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}
.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}

.row{display:flex;align-items:center;gap:var(--sp-2,.5rem);flex-wrap:wrap}
.spacer{flex:1}
/* A habit is one calm, flat row. The former per-habit colour rail looked like an
   extra blue border inside the card and competed with the completion controls. */
.h-item{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4,1rem);padding:.85rem 1rem;border:1px solid var(--border);background:var(--card);margin:.55rem 0;box-shadow:none;transition:background .14s ease,border-color .14s ease}
.h-item:hover{border-color:var(--border2);background:var(--row-hover)}
.h-body{flex:1 1 8rem;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-0,.15rem)}
.h-name{font-weight:650;color:var(--text-hi);font-size:1.02rem;letter-spacing:-.01em}
.h-name a{color:var(--text-hi)}.h-name a:hover{color:var(--link);text-decoration:none}
.h-meta{color:var(--muted);font-size:.76rem}
.h-ctl{display:flex;align-items:center;gap:var(--sp-2,.5rem);flex:none}
/* check toggle (bool) + number log (int) */
/* Done/not-done check toggle: the shared flat/square/outline look. OFF = neutral
   transparent outline; ON (.check.on, server-rendered when logged) = the system
   ACCENT GREEN flat fill — converged off the old green gradient so it matches the
   .btn system and the day-picker (.day-btn.on) accent. */
.check{display:inline-flex;align-items:center;gap:var(--sp-2,.5rem);background:transparent;border:1px solid var(--border2);color:var(--text-hi);padding:.5rem .95rem;cursor:pointer;font-size:.85rem;font-weight:650;box-shadow:none;transition:background .12s ease,border-color .12s ease,color .12s ease}
.check:hover{filter:none;background:var(--panel);border-color:var(--text-hi)}
.check.on{background:var(--primary);border-color:var(--primary);color:#06210f}
.check.on:hover{background:var(--primary);border-color:var(--primary);color:#06210f;filter:brightness(1.06)}
/* Fixed width + centred so the bool toggle is the SAME size whether it reads
   "Mark done" or "Done" (it no longer resizes when you check it off). Scoped to the
   toggle so the int "Log" button keeps its natural width. Height matches .h-day. */
.check{min-height:2.4rem}
.done-toggle{min-width:8.5rem;justify-content:center}
/* right cluster: the read-only history squares + the editable control, kept as one
   unit that wraps below the name on narrow screens. */
.h-right{display:flex;align-items:center;gap:var(--sp-2,.5rem);margin-left:auto}
/* read-only "last 3 days" squares (day-of-month labelled): filled green when that
   day was done/logged, neutral otherwise. Sized to line up with the toggle button. */
.h-days{display:flex;align-items:center;gap:var(--sp-1,.25rem)}
.h-day{width:2.4rem;height:2.4rem;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);background:var(--row-hover);color:var(--muted);font-size:.78rem;font-weight:650;user-select:none}
.h-day.on{background:var(--primary);border-color:var(--primary);color:#06210f}
.h-day.part{border-color:var(--primary);color:var(--primary)}
.numlog{display:flex;align-items:center;gap:var(--sp-2,.5rem)}
.numlog input{width:4.5rem;text-align:center;padding:.45rem .4rem;height:2.4rem;box-sizing:border-box}
/* the Log button picks up the same green accent on hover as its number box does on focus */
.numlog .check:hover{background:transparent;border-color:var(--primary);color:var(--primary)}
.numlog .check.on,.numlog .check.on:hover{background:var(--primary);border-color:var(--primary);color:#06210f}
.numlog .unit{color:var(--muted);font-size:.76rem;white-space:nowrap}
/* year-in-pixels */
.yp-wrap{overflow-x:auto;padding:.35rem 0}
.yp{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.yp i{display:block;width:12px;height:12px;background:var(--row-hover);transition:transform .1s ease}
.yp i:hover{transform:scale(1.4)}
.yp-legend{display:flex;align-items:center;gap:var(--sp-1,.25rem);font-size:.72rem;color:var(--muted);margin-top:.6rem}
.yp-legend i{display:inline-block;width:12px;height:12px}
.draft-badge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#d2991d;border:1px solid #3a3320;background:rgba(210,153,29,.1);padding:.05rem .45rem;margin-left:.35rem}
/* day-picker (the schedule day toggle) */
.day-pick{display:flex;gap:var(--sp-1,.25rem);flex-wrap:wrap;margin:.15rem 0 .2rem}
.day-btn{padding:.34rem .6rem;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem;user-select:none;box-shadow:none;transition:border-color .12s ease,color .12s ease}
.day-btn:hover{filter:none;background:transparent;border-color:var(--text);color:var(--text)}
.day-btn.on{background:transparent;border-color:var(--primary);color:var(--primary)}
.day-btn.on:hover{border-color:var(--primary);color:var(--primary)}
.tcell{font-size:.72rem;color:var(--muted);white-space:nowrap}
/* prev/next day switcher (ported from diary): the two buttons share the row so it
   stays symmetric; "Next day" is hidden on today (you can't log the future). */
.day-nav{display:flex;justify-content:space-between;gap:var(--sp-2,.5rem);margin:0 0 1rem}
.day-nav .btn{flex:1;min-height:31px}
/* narrow screens: the history squares + control drop onto their own full-width row
   beneath the name — squares packed LEFT, the action pushed RIGHT (margin-left:auto) so
   the row reads name↓ then [13][14][15] … [button]. Squares + number box shrink a touch
   so the whole control row fits without a further wrap. */
@media(max-width:560px){
  /* controls drop to their own row under the name; the action button right-aligns to the
     card edge on EVERY row. bool: space-between pushes the button's <form> to the right.
     int (number-log): the .numlog form GROWS to fill the row and its Log button is pushed
     right within it (margin-left:auto) — so the input stays by the squares and the button
     lines up on the right like the others. */
  .h-right{flex-basis:100%;margin-left:0;flex-wrap:wrap;gap:var(--sp-2,.5rem);align-items:center}
  /* .h-ctl is the control wrapper (holds the bool button-form OR the .numlog input+button)
     and is the real flex child of .h-right — push IT to the right so every row's button
     lines up at the right edge, whether it sits by the squares or wraps to its own line. */
  .h-ctl{margin-left:auto}
  .h-day{width:2rem;height:2rem;font-size:.72rem}
  .done-toggle{min-width:0}
  .numlog input{width:3.4rem}
}

.mr-field{display:flex;flex-direction:column}
.mr-block{display:flex;flex-wrap:wrap;gap:var(--sp-2,.5rem);align-items:center;background:var(--panel2);border:1px solid var(--border);padding:.45rem .55rem;margin-bottom:.4rem}
.mr-block select,.mr-block input{margin:0}
.mr-block .mr-and{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.mr-block input[type=number]{width:5.5rem}
.mr-block input[type=time]{width:7rem}
.mr-block .btn.mr-rm{margin-left:auto;min-height:1.7rem;padding:.15rem .45rem}
#mr-add{align-self:flex-start;margin-top:.1rem}