.dose-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4,1rem)}
@media(max-width:480px){.dose-form-grid{grid-template-columns:minmax(0,1fr)}}
.stat-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2,.5rem)}
.stat{flex:1 1 8rem;min-width:8rem;border:1px solid var(--border);background:var(--panel2);padding:.5rem .6rem}
.stat .s-lbl{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.02em}
.stat .s-val{color:var(--text-hi);font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;margin:.1rem 0}
.stat .s-hint{color:var(--muted);font-size:.72rem}
.stat .s-val.pnl-pos{color:#3fb950}
.stat .s-val.pnl-neg{color:#f85149}
.stat .s-val.pnl-warn{color:#d29922}
.day-chips{display:flex;gap:var(--sp-1,.25rem);flex-wrap:wrap}
.day-chip{font-size:.8rem;background:transparent;border:1px solid var(--border2,#30363d);color:var(--muted,#8b949e);padding:.34rem .6rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .12s ease,color .12s ease}
.day-chip input{display:none}
.day-chip:hover{border-color:var(--text,#c9d1d9);color:var(--text,#c9d1d9)}
.day-chip:has(input:checked){border-color:var(--primary,#2ea043);color:var(--primary,#2ea043)}

.xfn-cfg{display:flex;flex-direction:column;gap:var(--sp-2,.5rem)}
.xfn-row{display:flex;align-items:center;gap:var(--sp-2,.5rem);flex-wrap:wrap}
/* Vertical alignment of the "Send via" label against its Email/Chat toggles. THE ACTUAL
   CAUSE (found only by inspecting the FULL page cascade, not an isolated component — earlier
   rounds guessed emoji/line-box and never fixed it): the app shell ships a GLOBAL rule
   'label{display:block;margin:1rem 0 .25rem}'. Our channel toggles are <label>s, so each one
   inherited a 16px TOP MARGIN — a phantom band above the toggles that pushed them below the
   row centre, while the plain-<span> "Send via" label (no such margin) sat at the true centre
   and so read as floating ABOVE. Every prior line-height/flex tweak was inert because the
   culprit was margin, not the line box. FIX: reset margin:0 on the xfnotify labels so the
   global rule can't inject that space; then align-items:center is the single vertical
   authority. We also normalise the native checkbox (below) so its UA metrics/margins can't
   reintroduce asymmetry, and share one font-size across the row so text sits on one line. */
.xfn-lbl{display:inline-flex;align-items:center;align-self:center;min-width:5.5rem;margin:0;color:var(--muted,#8b949e);font-size:.85rem;line-height:1}
.xfn-chans{display:flex;align-items:center;gap:var(--sp-4,1rem)}
.xfn-cfg .xfn-chans label,.xfn-cfg .xfn-row>label{display:inline-flex;align-items:center;gap:var(--sp-1,.25rem);margin:0;cursor:pointer;line-height:1;font-size:.85rem}
.xfn-emoji{display:inline-flex;align-items:center;line-height:1;font-size:1em}
/* Normalise the native checkbox so its UA size/margins can't drive the row's vertical metrics.
   Scoped to .xfn-cfg + [type=checkbox] so it can't touch the day-chip inputs (display:none) or
   the time/number inputs. flex:0 0 auto keeps the square from squishing. */
.xfn-cfg input[type=checkbox]{appearance:auto;-webkit-appearance:auto;width:1rem;height:1rem;margin:0;padding:0;flex:0 0 auto;vertical-align:middle;accent-color:var(--primary,#2ea043)}
.xfn-note{color:var(--faint,#6e7681);font-size:.78rem}
/* A control is as wide as the thing it holds. The app shell ships a global
   input,select,textarea{width:100%}, so without a width here a time field and an IANA
   timezone stretch the full column — 819px each, measured on jobs' reminders page, for
   "09:00" and "Europe/London". max-width rather than width so a narrow screen still
   shrinks them. Reported by the owner as "fields are way too long" and "the timezone
   field is too long"; the same form renders in diary, habits and infer, which get this
   on their next build. */
.xfn-cfg input[type=time],.xfn-cfg input[type=text]{background:var(--panel2,#0d1117);border:1px solid var(--border2,#30363d);color:var(--text,#c9d1d9);padding:.3rem .5rem;width:100%}
.xfn-cfg input[type=time]{max-width:9rem}
.xfn-cfg input[type=text]{max-width:18rem}
.xfn-cfg input.xfn-every{width:4rem;background:var(--panel2,#0d1117);border:1px solid var(--border2,#30363d);color:var(--text,#c9d1d9);padding:.3rem .5rem}

dt{font-weight:600;color:var(--muted)}
dd{margin:0 0 .5rem 0}
/* Image-hint keep/text/describe toggles: the shared flat/square/outline .btn,
   with an accent-green ON state (selected option) matching the system. The
   on/off state is recomputed server-side per option; CSS just colours it. */
.hint-btn.btn.sm{padding:.3rem .6rem}
.hint-btn.on{background:transparent;color:var(--primary);border-color:var(--primary)}
.hint-btn.on:hover{background:var(--primary);color:#06210f}button.danger,button.delete,button.del,.btn-danger{background:var(--danger,#da3633);color:#fff;border:1px solid rgba(0,0,0,.18)}
button.danger:hover,button.delete:hover,button.del:hover,.btn-danger:hover{filter:none;background:#f85149;box-shadow:0 3px 10px rgba(218,54,51,.3)}
/* Compact inline delete (dense table rows): a bare red trash/✕ glyph, no box. */
button.del-icon,.del-icon{background:none;border:none;color:var(--red,#f85149);box-shadow:none;cursor:pointer;font-weight:600;font-size:1rem;padding:.1rem .4rem;line-height:1}
button.del-icon:hover,.del-icon:hover{filter:none;background:none;color:#ff7b72;box-shadow:none}