:root {
    --paper: #f2f5f1;
    --card: #ffffff;
    --card-2: #fbfcfa;
    --line: #dde3dc;
    --line-soft: #e8ede6;
    --ink: #16221f;
    --ink-2: #3c4a45;
    --muted: #64736d;
    --jade: #0f6b5a;
    --jade-soft: #e2efe9;
    --on-accent: #ffffff;
    --marigold: #9d6a12;
    --marigold-soft: #f7ecd6;
    --clay: #a8452f;
    --clay-soft: #f8e6e0;
    --slate-soft: #e9edea;
    --shadow: 0 1px 2px rgba(22,34,31,.06), 0 8px 24px -16px rgba(22,34,31,.28);
    --radius: 10px;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #0e1613; --card: #16211e; --card-2: #1a2622;
      --line: #27342f; --line-soft: #202c28;
      --ink: #e7ebe7; --ink-2: #c3ccc7; --muted: #8d9c96;
      --jade: #4bb096; --jade-soft: #14332b; --on-accent: #07100d;
      --marigold: #e0aa4d; --marigold-soft: #33290f;
      --clay: #dd8067; --clay-soft: #36211a;
      --slate-soft: #1f2b27;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"] {
    --paper: #0e1613; --card: #16211e; --card-2: #1a2622;
    --line: #27342f; --line-soft: #202c28;
    --ink: #e7ebe7; --ink-2: #c3ccc7; --muted: #8d9c96;
    --jade: #4bb096; --jade-soft: #14332b; --on-accent: #07100d;
    --marigold: #e0aa4d; --marigold-soft: #33290f;
    --clay: #dd8067; --clay-soft: #36211a;
    --slate-soft: #1f2b27;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
  :root[data-theme="light"] {
    --paper: #f2f5f1; --card: #ffffff; --card-2: #fbfcfa;
    --line: #dde3dc; --line-soft: #e8ede6;
    --ink: #16221f; --ink-2: #3c4a45; --muted: #64736d;
    --jade: #0f6b5a; --jade-soft: #e2efe9; --on-accent: #ffffff;
    --marigold: #9d6a12; --marigold-soft: #f7ecd6;
    --clay: #a8452f; --clay-soft: #f8e6e0;
    --slate-soft: #e9edea;
    --shadow: 0 1px 2px rgba(22,34,31,.06), 0 8px 24px -16px rgba(22,34,31,.28);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--sans); font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1060px; margin: 0 auto; padding: 0 18px 80px; }

  /* header */
  .top {
    position: sticky; top: 0; z-index: 30;
    background: var(--paper); border-bottom: 1px solid var(--line-soft);
  }
  .top-in { max-width: 1060px; margin: 0 auto; padding: 13px 18px 0; display: flex; flex-direction: column; gap: 11px; }
  .brandrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .mark { display: flex; align-items: baseline; gap: 9px; margin-right: auto; }
  .mark h1 { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1; }
  .mark .sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jade); align-self: center; }
  .stamp {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  }
  /* six tabs overflow a narrow screen: still scrollable, no thick scrollbar */
  .tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    font: inherit; font-size: 14px; color: var(--muted); white-space: nowrap;
    padding: 9px 13px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--jade); font-weight: 600; }
  .tab .n { font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--slate-soft); border-radius: 999px; padding: 1px 6px; }
  .tab[aria-selected="true"] .n { background: var(--jade-soft); color: var(--jade); }

  /* glance */
  .glance {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft);
    border-radius: var(--radius); overflow: hidden; margin: 20px 0 24px;
  }
  .glance > div { background: var(--card); padding: 12px 14px; }
  .glance .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
  .glance .v { font-size: 14.5px; font-weight: 500; }
  .glance .v b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .warn { color: var(--clay); }

  h2.sec { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.005em; text-wrap: balance; }
  p.hint { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
  h3.grp {
    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 26px 0 10px; display: flex; align-items: center; gap: 9px;
  }
  h3.grp:first-of-type { margin-top: 0; }

  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

  /* people */
  .av {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: .02em;
  }
  .av.lg { width: 30px; height: 30px; font-size: 11.5px; }
  .who-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); background: var(--slate-soft); border-radius: 999px; padding: 2px 9px 2px 3px; }

  /* filters */
  .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
  .chipbtn {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px;
    background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
    border-radius: 999px; padding: 4px 11px 4px 4px; display: inline-flex; align-items: center; gap: 6px;
  }
  .chipbtn.plain { padding: 4px 12px; }
  .chipbtn:hover { border-color: var(--muted); }
  .chipbtn[aria-pressed="true"] { border-color: var(--jade); background: var(--jade-soft); color: var(--jade); font-weight: 600; }
  .chipbtn .c { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .chipbtn[aria-pressed="true"] .c { color: var(--jade); }
  button:focus-visible, .day:focus-visible, a:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

  /* tasks */
  .tasklist { display: flex; flex-direction: column; gap: 9px; }
  .task { padding: 11px 13px; display: flex; gap: 11px; border-left: 3px solid var(--line); }
  .task.s-done { border-left-color: var(--jade); }
  .task.s-doing { border-left-color: var(--marigold); }
  .task.s-blocked, .task.s-late { border-left-color: var(--clay); }
  .task .body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
  .task .tt { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
  .task.s-done .tt { color: var(--muted); }
  .task .note { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
  .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .pill {
    font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; background: var(--slate-soft); color: var(--muted); white-space: nowrap;
  }
  .pill.done { background: var(--jade-soft); color: var(--jade); }
  .pill.doing { background: var(--marigold-soft); color: var(--marigold); }
  .pill.blocked, .pill.late { background: var(--clay-soft); color: var(--clay); }
  .pill.due { border: 1px solid var(--line); background: none; }

  /* timeline */
  .feed { display: flex; flex-direction: column; gap: 14px; }
  .day-card { padding: 15px 16px; }
  .day-card header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .day-card .date { font-family: var(--serif); font-size: 17px; font-weight: 600; }
  .day-card .rel { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
  .day-card .tagline { font-size: 13px; color: var(--muted); margin-left: auto; }
  .bullets { display: flex; flex-direction: column; gap: 9px; }
  .bullet { display: flex; gap: 9px; align-items: flex-start; }
  .bullet p { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
  .bullet p b { color: var(--ink); font-weight: 600; }
  .bullet.key p { color: var(--ink); }
  .bullet.key { padding: 8px 10px; border-radius: 8px; background: var(--jade-soft); }
  .bullet.key .av { box-shadow: 0 0 0 2px var(--card); }

  /* calendar */
  .cal-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(250px,1fr); gap: 22px; align-items: start; }
  .calhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .calhead .m { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-right: auto; }
  .btn {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px;
    background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
    border-radius: 8px; padding: 5px 11px;
  }
  .btn:hover { border-color: var(--muted); }
  .grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
  .dow { background: var(--card-2); text-align: center; padding: 7px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .day { background: var(--card); min-height: 78px; padding: 6px; text-align: left; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 3px; overflow: hidden; font: inherit; color: inherit; }
  .day:hover { background: var(--card-2); }
  .day.out { background: var(--card-2); }
  .day.out .num { opacity: .45; }
  .day.sel { box-shadow: inset 0 0 0 2px var(--jade); }
  .day .num { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .day.today .num { color: var(--jade); font-weight: 700; }
  .day .ev { font-size: 11px; line-height: 1.35; border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--jade-soft); color: var(--jade); }
  .day .ev.target { background: var(--marigold-soft); color: var(--marigold); }
  .day .ev.past { background: var(--slate-soft); color: var(--muted); }
  .rail { display: flex; flex-direction: column; gap: 10px; }
  .evrow { display: flex; gap: 11px; padding: 11px 12px; }
  .evrow .d { font-family: var(--mono); font-size: 11px; text-align: center; color: var(--jade); background: var(--jade-soft); border-radius: 6px; padding: 4px 6px; height: fit-content; min-width: 46px; }
  .evrow .d b { display: block; font-size: 15px; }
  .evrow.target .d { color: var(--marigold); background: var(--marigold-soft); }
  .evrow.past .d { color: var(--muted); background: var(--slate-soft); }
  .evrow .t { font-weight: 600; font-size: 14px; }
  .evrow .sub { font-size: 12.5px; color: var(--muted); }

  .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
  .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: baseline; }

  .money { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; }
  .money .card { padding: 12px 14px; box-shadow: none; }
  .money .fig { font-family: var(--mono); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .money .lbl { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

  .note-box { padding: 12px 14px; border-radius: var(--radius); background: var(--marigold-soft); border: 1px solid color-mix(in srgb, var(--marigold) 30%, transparent); font-size: 13.5px; color: var(--ink-2); margin-bottom: 18px; }
  .note-box b { color: var(--ink); }
  .empty-state { border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

  a { color: var(--jade); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  footer.foot { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; display: flex; flex-direction: column; gap: 10px; }
  .links { display: flex; gap: 8px; flex-wrap: wrap; }
  .links a { font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; text-decoration: none; color: var(--ink-2); }
  .links a:hover { border-color: var(--jade); color: var(--jade); }
  /* add to home screen */
  .install {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .install img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
  .install .txt { font-size: 13px; color: var(--ink-2); min-width: 0; flex: 1; }
  .install .txt b { color: var(--ink); }
  .install .go {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    background: var(--jade); color: var(--on-accent); border: 0; border-radius: 8px; padding: 6px 12px; flex: none;
  }
  .install .x {
    appearance: none; cursor: pointer; background: none; border: 0; color: var(--muted);
    font-size: 15px; line-height: 1; padding: 4px 6px; flex: none;
  }
  .install .x:hover { color: var(--ink); }
  @media (min-width: 781px) { .install { left: auto; width: 360px; } }
  [hidden] { display: none !important; }
  @media (max-width: 1000px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 780px) {
    .cal-layout { grid-template-columns: minmax(0,1fr); }
    .day { min-height: 58px; }
    .day .ev { font-size: 10px; }
    .mark h1 { font-size: 23px; }
    .stamp { display: none; }
    .glance .v { font-size: 13.5px; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  /* ------------------------------------------------------------------ *
   * sign-in bar, tick-off buttons and the admin panel
   * ------------------------------------------------------------------ */
  .authbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  }
  .au-lead { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .authbar input {
    font: inherit; font-size: 13px; color: var(--ink);
    background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 10px; min-width: 0; flex: 0 1 190px;
  }
  .authbar input:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
  .au-go {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    background: var(--jade); color: var(--on-accent); border: 1px solid var(--jade);
    border-radius: 8px; padding: 6px 14px;
  }
  .au-go[disabled] { opacity: .6; cursor: default; }
  .au-link {
    appearance: none; cursor: pointer; font: inherit; font-size: 12.5px;
    background: none; border: 0; color: var(--muted); text-decoration: underline;
    text-underline-offset: 2px; padding: 4px 2px;
  }
  .au-link:hover { color: var(--ink-2); }
  .au-note { font-size: 12.5px; color: var(--muted); flex-basis: 100%; }
  .au-note.bad { color: var(--clay); }
  .au-who { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--ink-2); }
  .au-who .au-sub {
    font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  }

  .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .act {
    appearance: none; cursor: pointer; font: inherit; font-size: 12px;
    background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2);
    border-radius: 999px; padding: 4px 11px;
  }
  .act:hover { border-color: var(--muted); }
  .act.on { border-color: var(--jade); background: var(--jade-soft); color: var(--jade); font-weight: 600; }
  .act.ghost { background: none; color: var(--muted); }
  .act.danger:hover { border-color: var(--clay); color: var(--clay); }
  .act[disabled] { opacity: .5; cursor: default; }
  .act-err { flex-basis: 100%; font-size: 12px; color: var(--clay); }

  .admin {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px 16px; margin: 0 0 18px; box-shadow: var(--shadow);
  }
  .admin .grp { margin-top: 0; }
  .adrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .ad-in {
    font: inherit; font-size: 13px; color: var(--ink);
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 10px; min-width: 0; flex: 0 1 auto;
  }
  .ad-in.wide { flex: 1 1 220px; }
  .ad-in:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
  .ad-msg { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
  .ad-msg.bad { color: var(--clay); }

  @media (max-width: 560px) {
    .authbar input { flex: 1 1 100%; }
    .adrow > * { flex: 1 1 100%; }
  }

  /* ------------------------------------------------------------------ *
   * tracker - analytics
   *
   * Progress is an ordered scale, so it gets ONE hue stepped light to dark,
   * not four colours arguing. Clay is reserved for late and means nothing
   * else. Both ramps were checked with the palette validator: monotone
   * lightness, visible step gaps, and the pale end still clears the card.
   * ------------------------------------------------------------------ */
  .viz {
    --viz-surface: var(--card);
    --viz-rest:  #7fb8a7;
    --viz-doing: #3f9280;
    --viz-done:  #0f6b5a;
    --viz-late:  #a8452f;
    --viz-grid:  var(--line-soft);

    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 16px 18px 18px; margin: 0 0 14px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .viz {
      --viz-rest:  #36655a;
      --viz-doing: #4e9b86;
      --viz-done:  #6fc7ae;
      --viz-late:  #dd8067;
    }
  }
  :root[data-theme="dark"] .viz {
    --viz-rest:  #36655a;
    --viz-doing: #4e9b86;
    --viz-done:  #6fc7ae;
    --viz-late:  #dd8067;
  }

  .viz-h {
    font-family: var(--serif); font-size: 17px; font-weight: 400;
    color: var(--ink); margin: 0 0 3px;
  }
  .viz-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; max-width: 62ch; }
  .viz-none {
    font-size: 13px; color: var(--jade); background: var(--jade-soft);
    border-radius: 8px; padding: 11px 13px;
  }

  /* legend - identity never rests on colour alone */
  .viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; }
  .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
  .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
  .sw.s-done  { background: var(--viz-done); }
  .sw.s-doing { background: var(--viz-doing); }
  .sw.s-rest  { background: var(--viz-rest); }

  /* horizontal bars */
  .viz-plot { display: flex; flex-direction: column; gap: 9px; }
  .hrow { display: grid; grid-template-columns: minmax(84px, 128px) 1fr 44px; align-items: center; gap: 10px; }
  .hname { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); min-width: 0; }
  .hname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .htrack { background: var(--viz-grid); border-radius: 3px; min-width: 0; }
  .hval { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
  .hval.bad { color: var(--viz-late); }

  /* a 2px gap in the surface colour separates the segments - never a border */
  .hbar {
    display: flex; gap: 2px; height: 18px; min-width: 2px;
    background: var(--viz-surface); border-radius: 3px 4px 4px 3px;
  }
  .seg {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    min-width: 3px; height: 100%;
  }
  .seg:first-child { border-radius: 3px 0 0 3px; }
  .seg:last-child  { border-radius: 0 4px 4px 0; }
  .seg:only-child  { border-radius: 3px 4px 4px 3px; }
  .seg.s-done  { background: var(--viz-done); }
  .seg.s-doing { background: var(--viz-doing); }
  .seg.s-rest  { background: var(--viz-rest); }
  .seg:hover, .seg:focus-visible { filter: brightness(1.12); outline: none; }
  .seg:focus-visible { box-shadow: 0 0 0 2px var(--viz-surface), 0 0 0 4px var(--jade); }

  .lbar {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    display: block; height: 18px; min-width: 3px;
    background: var(--viz-late); border-radius: 3px 4px 4px 3px;
  }
  .lbar:hover, .lbar:focus-visible { filter: brightness(1.12); outline: none; }
  .lbar:focus-visible { box-shadow: 0 0 0 2px var(--viz-surface), 0 0 0 4px var(--jade); }

  /* columns */
  .viz-cols { display: flex; align-items: flex-end; gap: 8px; }
  .colwrap {
    appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 0;
  }
  .coltrack {
    width: 100%; height: 108px; padding-top: 22px; box-sizing: border-box;
    display: flex; align-items: flex-end; justify-content: center;
    border-bottom: 1px solid var(--viz-grid);
  }
  /* the value sits just above the cap, and costs the bar no height of its own */
  .colstack {
    position: relative; width: 100%; max-width: 24px; min-height: 0;
  }
  .colval {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    padding-bottom: 4px;
    font-family: var(--mono); font-size: 13px; color: var(--ink-2);
    line-height: 1;
  }
  .colval.zero { color: var(--muted); opacity: .6; }
  .col { display: block; width: 100%; height: 100%; min-height: 3px; border-radius: 4px 4px 0 0; }
  .col.b-late { background: var(--viz-late); }
  .col.b-now  { background: var(--viz-done); }
  .col.b-far  { background: var(--viz-doing); }
  .col.b-none { background: var(--viz-rest); }
  .collab {
    font-size: 11px; color: var(--muted); text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  }
  .colwrap:hover .col, .colwrap:focus-visible .col { filter: brightness(1.12); }
  .colwrap:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }

  /* a single value is a figure, not a chart */
  .viz-one { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  .one-n {
    font-family: var(--sans); font-size: 30px; font-weight: 600;
    line-height: 1; color: var(--clay);
  }
  .one-k { font-size: 13px; color: var(--ink-2); }
  .one-sub { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }

  /* tooltip - value leads, label follows */
  .viz-tip {
    position: absolute; z-index: 60; pointer-events: none;
    background: var(--ink); color: var(--paper);
    border-radius: 7px; padding: 7px 10px; font-size: 12px; line-height: 1.45;
    box-shadow: 0 6px 20px -8px rgba(0,0,0,.55); max-width: 240px;
  }
  .viz-tip .h { font-weight: 600; }
  .viz-tip .r { opacity: .82; }

  /* headline numbers - sans, never the serif */
  .teamline { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
  .kpi {
    flex: 1 1 130px; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .tl-k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .tl-n { font-family: var(--sans); font-size: 30px; font-weight: 600; line-height: 1; color: var(--ink); }
  .tl-n.bad { color: var(--clay); }

  /* the plain-numbers fallback */
  .viz-details { margin-top: 4px; }
  .viz-details summary {
    cursor: pointer; font-size: 12.5px; color: var(--muted);
    padding: 6px 2px; list-style-position: inside;
  }
  .viz-details summary:hover { color: var(--ink-2); }
  .viz-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
  .viz-table th, .viz-table td {
    text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line-soft);
  }
  .viz-table thead th { color: var(--muted); font-weight: 500; white-space: nowrap; }
  .viz-table tbody th { text-align: left; color: var(--ink-2); font-weight: 500; }
  .viz-table td { font-family: var(--mono); color: var(--ink-2); }

  @media (max-width: 560px) {
    .hrow { grid-template-columns: 78px 1fr 38px; gap: 8px; }
    .hname { font-size: 12px; }
    .viz-cols { gap: 5px; }
    .collab { font-size: 10px; }
    .viz-table { font-size: 11.5px; }
    .viz-table th, .viz-table td { padding: 6px 4px; }
  }

  /* ------------------------------------------------------------------ *
   * writing the feed
   * ------------------------------------------------------------------ */
  .ad-area {
    font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink);
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 9px 11px; width: 100%; resize: vertical;
    box-sizing: border-box;
  }
  .ad-area:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
  .ad-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
  .pastebox { display: flex; flex-direction: column; gap: 9px; padding-top: 8px; }
  .drafts { display: flex; flex-direction: column; gap: 7px; }
  .draft { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
  .draft .ad-in.wide { flex: 1 1 200px; }

  .bullet { position: relative; }
  .bullet-x {
    appearance: none; cursor: pointer; border: 0; background: none;
    color: var(--muted); font-size: 17px; line-height: 1; padding: 0 2px;
    align-self: flex-start; opacity: 0; transition: opacity .12s;
  }
  .bullet:hover .bullet-x, .bullet-x:focus-visible { opacity: 1; }
  .bullet-x:hover { color: var(--clay); }

  /* a job past its due date, shown on the calendar */
  .ev.late { background: var(--clay-soft); color: var(--clay); }
  .evrow.late { border-left: 3px solid var(--clay); }
  .tedit { padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }

  /* ------------------------------------------------------------------ *
   * photos
   * ------------------------------------------------------------------ */
  .ad-fixed { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
  .ad-in[type="file"] { padding: 5px 8px; max-width: 100%; }

  .pgrid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .pcard {
    margin: 0; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  }
  .ptile {
    appearance: none; border: 0; padding: 0; cursor: zoom-in; display: block;
    width: 100%; background: var(--slate-soft); line-height: 0;
  }
  .ptile img { width: 100%; height: 150px; object-fit: cover; display: block; }
  .ptile:focus-visible { outline: 2px solid var(--jade); outline-offset: -2px; }
  .pfoot {
    display: flex; align-items: center; gap: 7px; padding: 8px 10px;
    font-size: 12.5px; color: var(--muted);
  }
  .pcap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
  .pfoot .act { flex: 0 0 auto; }

  .lightbox {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(8, 12, 11, .88);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px;
  }
  .lightbox[hidden] { display: none; }
  .lightbox img { max-width: 100%; max-height: 78vh; border-radius: 8px; }
  .lb-x {
    position: absolute; top: 14px; right: 16px;
    appearance: none; border: 0; background: none; cursor: pointer;
    color: #fff; font-size: 30px; line-height: 1; padding: 4px 10px;
  }
  .lb-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    justify-content: center; color: #e7ebe7; font-size: 13px; max-width: 100%;
  }
  .lb-bar a {
    color: var(--jade); font-weight: 600; text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* how far along a job is */
  .tprog { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
  .tprog-track { flex: 1 1 auto; height: 5px; border-radius: 999px; background: var(--slate-soft); overflow: hidden; }
  .tprog-track i { display: block; height: 100%; background: var(--jade); border-radius: 999px; }
  .tprog-n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

  .slwrap { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 170px; min-width: 150px; }
  .sl-k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .sl { flex: 1 1 auto; min-width: 70px; accent-color: var(--jade); height: 20px; }
  .sl-n { font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-width: 34px; text-align: right; }

  /* ------------------------------------------------------------------ *
   * money
   * ------------------------------------------------------------------ */
  .money-n { font-size: 22px; }
  .money-seen { flex-basis: auto; font-family: var(--mono); }
  .fsep { display: inline-block; width: 1px; height: 22px; background: var(--line); margin: 0 4px; align-self: center; }
  .money-tools { margin-bottom: 14px; }
  .money-month { display: flex; justify-content: space-between; align-items: baseline; }
  .money-sum { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-transform: none; letter-spacing: 0; }
  .money-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .money-amt { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .money-row.in .money-amt { color: var(--jade); }
  .money-row .tt { flex: 1 1 200px; }
  .money-v { width: auto; min-width: 88px; }
  .mbar {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    display: block; height: 16px; min-width: 3px;
    background: var(--viz-doing, var(--jade)); border-radius: 3px 4px 4px 3px;
  }
  .mbar.in { background: var(--viz-done, var(--jade)); }
  .mbar:hover, .mbar:focus-visible { filter: brightness(1.12); outline: none; }
  #money-chart .hrow { grid-template-columns: minmax(84px, 120px) 1fr 104px; }

  /* lines the site wrote itself: present, but a step quieter than people's own words */
  .bullet.auto p { color: var(--ink-2); }
  .bullet.auto p b { color: var(--ink); font-weight: 600; }

  /* ------------------------------------------------------------------ *
   * money, second pass - one short form, and a ledger whose numbers
   * line up in a column the way a ledger's should
   * ------------------------------------------------------------------ */
  .mform { padding: 16px 18px 14px; }
  .mf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .mf-head .grp { margin: 0; }

  .seg-ctl { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 2px; background: var(--card-2); }
  .seg-b {
    appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
    font-size: 13px; color: var(--muted); padding: 5px 13px; border-radius: 7px;
  }
  .seg-b[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  .seg-b:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }

  .mf-in {
    font: inherit; font-size: 14px; color: var(--ink);
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 9px 11px; min-width: 0; width: 100%; box-sizing: border-box;
  }
  .mf-in:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; border-color: transparent; }
  .mf-file { padding: 6px 8px; font-size: 12.5px; }

  .mf-main { display: grid; grid-template-columns: 168px 1fr 150px; gap: 10px; }
  .mf-amtwrap { position: relative; }
  .mf-cur {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 15px; color: var(--muted); pointer-events: none;
  }
  .mf-amount { font-family: var(--mono); font-size: 17px; font-weight: 600; padding-left: 28px; letter-spacing: .01em; }
  .mform.is-in .mf-amount { color: var(--jade); }

  .mf-sub { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 4px; min-height: 30px; }
  .mf-seen { font-family: var(--mono); font-size: 13px; color: var(--jade); min-width: 120px; }
  .mf-seen.bad { color: var(--clay); }
  .mf-who { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mf-k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .mf-short { width: auto; padding: 6px 9px; font-size: 13px; }
  .mf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
  .mf-check[hidden] { display: none; }

  .mf-more { margin: 6px 0 2px; }
  .mf-more > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0; list-style-position: inside; }
  .mf-more > summary:hover { color: var(--ink-2); }
  .mf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .mf-row { margin-top: 10px; }
  .mf-field { display: flex; flex-direction: column; gap: 5px; }

  .mf-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 12px; }
  .mf-msg { font-size: 12.5px; color: var(--muted); margin-right: auto; }
  .mf-msg.bad { color: var(--clay); }
  .mf-msg.good { color: var(--jade); }
  .mf-go { padding: 8px 22px; }

  /* Thuan's bar */
  .mtools {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 14px; margin: 0 0 14px;
  }
  .mt-text { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
  .mt-text b { font-size: 13px; color: var(--ink); font-weight: 600; }
  .mt-text span { font-size: 12.5px; color: var(--muted); }
  .mt-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .mt-msg { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
  .mt-msg:empty { display: none; }
  .mt-msg.bad { color: var(--clay); }

  /* the ledger */
  .ledger {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; margin: 0 0 14px; box-shadow: var(--shadow);
  }
  .lg-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 11px 16px; background: var(--card-2); border-bottom: 1px solid var(--line);
  }
  .lg-month { font-family: var(--serif); font-size: 16px; color: var(--ink); }
  .lg-total { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

  .lg-row {
    display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: start;
    padding: 12px 16px;
  }
  .lg-row + .lg-row { border-top: 1px solid var(--line-soft); }
  .lg-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding-top: 1px; }
  .lg-date b { font-size: 17px; font-weight: 600; color: var(--ink); }
  .lg-date span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .lg-main { min-width: 0; }
  .lg-desc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 14.5px; color: var(--ink); }
  .lg-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .lg-amt {
    font-family: var(--mono); font-size: 14.5px; font-weight: 600; color: var(--ink);
    white-space: nowrap; text-align: right; padding-top: 1px;
  }
  .lg-row.in .lg-amt { color: var(--jade); }

  .lg-flags { display: inline-flex; gap: 6px; }
  .lg-flag { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
  .lg-flag.owed { color: var(--clay); }
  .lg-flag.ok { color: var(--jade); }
  .lg-flag.todo { color: var(--marigold); }

  .lg-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; }
  .lg-a {
    appearance: none; border: 0; background: none; cursor: pointer; font: inherit; padding: 0;
    font-size: 12.5px; color: var(--jade); font-weight: 600;
  }
  .lg-a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .lg-a.danger { color: var(--muted); font-weight: 500; }
  .lg-a.danger:hover { color: var(--clay); }
  .lg-a:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 3px; }

  @media (max-width: 620px) {
    .mf-main { grid-template-columns: 1fr 1fr; }
    .mf-main > input[type="text"]:not(.mf-amount) { grid-column: 1 / -1; order: 3; }
    .mf-grid2 { grid-template-columns: 1fr; }
    .mf-head { flex-wrap: wrap; }
    .lg-row { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 11px 12px; }
    .lg-amt { font-size: 13.5px; }
  }

  /* ------------------------------------------------------------------ *
   * the notifications bar
   * ------------------------------------------------------------------ */
  .nb {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px;
    background: var(--jade-soft); border: 1px solid var(--jade); border-radius: var(--radius);
    padding: 12px 16px; margin: 18px 0 0;
  }
  .nb-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
  .nb-body b { font-size: 14px; color: var(--ink); }
  .nb-body span { font-size: 13px; color: var(--ink-2); }
  .nb-btns { display: flex; align-items: center; gap: 12px; }
  .nb-link {
    appearance: none; border: 0; background: none; cursor: pointer; font: inherit; padding: 2px;
    font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
  }
  .nb-link:hover { color: var(--ink-2); }
  .nb-msg { font-size: 12.5px; color: var(--muted); }
  .nb-msg.bad { color: var(--clay); }
  .nb.nb-on {
    background: none; border: 0; padding: 0; margin: 14px 0 0; justify-content: flex-start; gap: 8px;
  }
  .nb-on .nb-text { font-size: 12.5px; color: var(--muted); }
  .nb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); flex: 0 0 auto; }

  /* the day in one line */
  .daysum {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    font-size: 12.5px; color: var(--muted); margin: -4px 0 12px;
  }
  .ds-bit { color: var(--ink-2); font-weight: 500; }
  .ds-bit.ok { color: var(--jade); }
  .ds-bit.bad { color: var(--clay); }
  .ds-sep { color: var(--line); }

  /* the paste box: chatter starts un-ticked and steps back */
  .draft .keep { flex: 0 0 auto; }
  .draft.chatter select, .draft.chatter input[type="text"] { opacity: .45; }
  .draft.chatter { text-decoration: none; }

  /* tonight's chat wrap, waiting for a look */
  .chatwrap { border-color: var(--jade); margin-bottom: 14px; }
  .cw-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
  .cw-head .grp { margin: 0; }
  .cw-sub { font-size: 12.5px; color: var(--muted); }
  .chatwrap .drafts { margin-bottom: 10px; }

  /* ------------------------------------------------------------------ *
   * the goal, and each fundraiser after costs
   * ------------------------------------------------------------------ */
  .goal .goal-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
  .goal .goal-top > div:first-child { display: flex; flex-direction: column; gap: 3px; }
  .goal-n { font-family: var(--sans); font-size: 32px; font-weight: 600; line-height: 1; color: var(--ink); }
  .goal-next { font-size: 13px; color: var(--ink-2); }
  .goal-next b { font-size: 15px; color: var(--jade); }
  .goal-meter {
    height: 12px; border-radius: 999px; background: var(--viz-rest, var(--slate-soft));
    overflow: hidden; cursor: default;
  }
  .goal-meter i { display: block; height: 100%; background: var(--viz-done, var(--jade)); border-radius: 999px; min-width: 6px; }
  .goal-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 12px; }

  .ms-ladder { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ms { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line-soft); }
  .ms-at { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .ms-name { font-size: 11.5px; color: var(--muted); }
  .ms.now { border-color: var(--jade); background: var(--jade-soft); }
  .ms.now .ms-at, .ms.now .ms-name { color: var(--jade); }
  .ms.done .ms-at { color: var(--ink-2); text-decoration: line-through; }

  .goal-split { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
  .goal-split > span { display: flex; flex-direction: column; gap: 2px; }
  .goal-split b { font-family: var(--mono); font-size: 14px; color: var(--ink); font-weight: 600; }

  .fund-rows { display: flex; flex-direction: column; gap: 16px; }
  .fund-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
  .fund-name { font-size: 14.5px; color: var(--ink); }
  .fund-verdict { font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .fund-verdict.ok { color: var(--jade); }
  .fund-verdict.bad { color: var(--clay); }
  .fund-track { position: relative; height: 16px; background: var(--viz-grid, var(--line-soft)); border-radius: 3px; }
  /* the 1-3M target sits ON TOP of the bar - a fundraiser that beat it
     is exactly when you want to see where the target was */
  .fund-band {
    position: absolute; top: -3px; bottom: -3px; z-index: 1; pointer-events: none;
    background: rgba(255, 255, 255, .16);
    border-left: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); border-radius: 2px;
  }
  .fund-bar {
    position: relative; appearance: none; border: 0; padding: 0; cursor: pointer; display: block;
    height: 100%; background: var(--viz-done, var(--jade)); border-radius: 3px 4px 4px 3px;
  }
  .fund-bar.neg { background: var(--viz-late, var(--clay)); }
  .fund-bar:hover, .fund-bar:focus-visible { filter: brightness(1.12); outline: none; }
  .fund-nums { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 7px; }
  .fund-nums > span { display: flex; align-items: baseline; gap: 6px; }
  .fund-nums b { font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-weight: 500; }
  .fund-left b { color: var(--ink); font-weight: 600; }

  @media (max-width: 560px) {
    .ms-ladder { grid-template-columns: repeat(2, 1fr); }
    .goal-n { font-size: 26px; }
  }

  /* ------------------------------------------------------------------ *
   * logging money from anywhere
   * ------------------------------------------------------------------ */
  /* + Log money, with Judy in a round badge on its left end - her head and
     badge-hand pop up out of the circle, over the top of the button. The
     picture is cut to the circle below her chest and left whole above it. */
  .fab {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 45;
    appearance: none; border: 0; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; height: 54px;
    padding: 0 22px 0 72px; border-radius: 999px;
    color: var(--on-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--jade) 82%, #fff) 0%, var(--jade) 55%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .2);
    transition: transform .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
    animation: fab-in .38s cubic-bezier(.2, .9, .3, 1.25) backwards;
  }
  .fab-label { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; letter-spacing: .005em; }
  .fab-plus { font-size: 20px; line-height: 1; margin-top: -2px; font-weight: 600; }
  .fab-judy { position: absolute; left: 5px; bottom: 4px; width: 66px; height: 82px; pointer-events: none; }
  .fab-judy::before {                      /* the badge she stands in */
    content: ""; position: absolute; left: 13px; bottom: 0; width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #1d8a73 0%, #0b4a3e 78%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 2px 5px rgba(0, 0, 0, .3) inset;
  }
  .fab-judy img {
    position: relative; display: block; width: 66px; height: 82px;
    clip-path: path("M0 0 H66 V59 H59 A23 23 0 0 1 13 59 H0 Z");
    transform-origin: 50% 100%;
    transition: transform .22s cubic-bezier(.2, .9, .3, 1.3);
  }
  .fab:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 14px 28px -10px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .2); transform: translateY(-1px); }
  .fab:hover .fab-judy img { transform: translateY(-3px) rotate(-4deg); }
  .fab:active { transform: scale(.97); }
  .fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  @keyframes fab-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .fab, .fab-judy img { animation: none; transition: none; } }
  body.has-install .fab { bottom: calc(92px + env(safe-area-inset-bottom)); }
  /* so the last thing on a page is never hidden under the button */
  body.has-fab .wrap { padding-bottom: 116px; }

  .sheet {
    border: 0; padding: 0; background: transparent; color: inherit;
    width: min(640px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 32px);
    overflow: visible;
  }
  .sheet::backdrop { background: rgba(6, 10, 9, .62); }
  .sheet .mform { margin: 0; max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
  .sheet-x {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    appearance: none; border: 0; background: none; cursor: pointer;
    color: var(--muted); font-size: 26px; line-height: 1; padding: 4px 9px; border-radius: 8px;
  }
  .sheet-x:hover { color: var(--ink); background: var(--card-2); }
  .sheet .mf-head { padding-right: 36px; }

  .mf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; }
  .mf-chips[hidden] { display: none; }

  .mcta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; margin: 0 0 14px; box-shadow: var(--shadow);
  }
  .mcta-go { font-size: 15px; padding: 10px 22px; }
  .mcta-sub { font-size: 13px; color: var(--muted); flex: 1 1 240px; }

  .toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
    background: var(--ink); color: var(--paper);
    padding: 10px 16px; border-radius: 10px; font-size: 13.5px;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .6); max-width: calc(100% - 32px);
  }

  /* on a phone the sheet comes up from the bottom, where a thumb is */
  @media (max-width: 620px) {
    .sheet { margin: auto 0 0; width: 100%; max-height: 92vh; }
    .sheet .mform { border-radius: 16px 16px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; }
    .fab { right: 14px; }
  }

  /* points */
  .pbar {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    display: block; height: 18px; min-width: 0;
    background: var(--viz-done); border-radius: 3px 4px 4px 3px;
  }
  .pbar.neg { background: var(--viz-late); }
  .pbar:hover, .pbar:focus-visible { filter: brightness(1.12); outline: none; }
  .pbar:focus-visible { box-shadow: 0 0 0 2px var(--viz-surface), 0 0 0 4px var(--jade); }
  .pts-tog { margin: 0 0 12px; }
  .officer {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
    padding: 12px 14px; margin: 0 0 14px; border-radius: 12px;
    background: var(--jade-soft); border: 1px solid var(--line);
  }
  .officer-ic { font-size: 30px; line-height: 1; }
  .officer-t, .officer-now { display: flex; flex-direction: column; gap: 1px; }
  .officer-t { flex: 1 1 180px; }
  .officer-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .officer-n { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); }
  .officer-n.sm { font-size: 15px; font-family: var(--sans); }
  .officer-s { font-size: 12.5px; color: var(--ink-2); }

  /* announce */
  .announce {
    margin: 0 0 18px; padding: 14px 16px 12px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 8px;
  }
  .an-head { display: flex; align-items: center; gap: 11px; }
  .an-ic { font-size: 24px; line-height: 1; }
  .an-h { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; }
  .an-sub { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
  .an-text {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 54px;
    font: inherit; font-size: 15px; padding: 9px 11px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
  }
  .an-text:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
  .an-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .an-count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
  .an-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .an-list:empty { display: none; }
  .an-item {
    display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; align-items: baseline;
    padding: 7px 10px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line-soft);
  }
  .an-who { font-size: 11.5px; color: var(--muted); }
  .an-t { grid-column: 1; font-size: 13.5px; }
  .an-state { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; color: var(--marigold); white-space: nowrap; }
  .an-item.sent .an-state { color: var(--jade); }

  /* ------------------------------------------------------------------ *
   * smoothness: cards far off screen are not laid out or painted until
   * they scroll near the view.
   * ------------------------------------------------------------------ */
  .day-card { content-visibility: auto; contain-intrinsic-size: auto 260px; }
  .card.task { content-visibility: auto; contain-intrinsic-size: auto 150px; }

  /* nudge */
  .act.nudge { border-color: color-mix(in srgb, var(--marigold) 55%, var(--line)); }
  .act.nudge:hover:not([disabled]) { background: var(--marigold-soft); }
  .act.nudge.sent { color: var(--jade); border-color: var(--line); opacity: .85; }
  .an-item.missed .an-state { color: var(--clay); }

  /* change password, under the signed-in bar */
  .au-pw { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 2px; }
  .au-pw input { flex: 1 1 170px; }
  .au-note.ok { color: var(--jade); }

  .an-item { grid-template-columns: 1fr auto auto; }
  .an-x {
    grid-column: 3; grid-row: 1 / span 2; align-self: center;
    appearance: none; border: 0; background: none; cursor: pointer;
    color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px;
  }
  .an-x:hover { color: var(--ink); background: var(--card); }

  /* a button waiting for its second tap */
  .armed, .au-go.armed, .act.armed, .lg-a.armed {
    background: var(--marigold) !important; color: #1b1405 !important; border-color: var(--marigold) !important;
    animation: armed-pulse 1s ease-in-out infinite alternate;
  }
  .bullet-x.armed { width: auto; padding: 0 8px; border-radius: 999px; font-size: 12px; }
  @keyframes armed-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marigold) 50%, transparent); } to { box-shadow: 0 0 0 5px transparent; } }
  @media (prefers-reduced-motion: reduce) { .armed { animation: none; } }

  /* ------------------------------------------------------------------ *
   * the clock: one quiet line in the header, after "Members"
   * ------------------------------------------------------------------ */
  .hclock {
    display: inline-flex; align-items: center; gap: 8px; align-self: center;
    margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line);
    font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--ink-2); line-height: 1;
  }
  .hc-t { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
  .hc-s { color: var(--muted); font-weight: 400; }
  .hc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--jade); }
  .hc-d { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  @media (max-width: 440px) {
    .hclock { gap: 6px; margin-left: 2px; padding-left: 9px; }
    .hc-dot, .hc-d { display: none; }          /* a phone gets just the time */
  }

  /* ------------------------------------------------------------------ *
   * pre-orders, members' side (Money tab)
   * ------------------------------------------------------------------ */
  .sales { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
  .sl-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .sl-headrow > .act { white-space: nowrap; flex: none; }
  .sale-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--card-2); border: 1px dashed var(--line); }
  .sale-form[hidden] { display: none; }
  .sf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
  .sf-items { display: flex; flex-direction: column; gap: 6px; }
  .sf-item { display: flex; gap: 8px; }
  .sf-item .sf-p { flex: 0 0 120px; }
  .sf-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
  .sale-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; background: var(--card-2); }
  .sale-card.open { border-color: color-mix(in srgb, var(--jade) 45%, var(--line)); }
  .sl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .sl-name { display: block; font-family: var(--serif); font-size: 18px; }
  .sl-meta { font-size: 12.5px; color: var(--muted); }
  .sl-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--line-soft); color: var(--muted); white-space: nowrap; }
  .sl-badge.open { background: var(--jade-soft); color: var(--jade); }
  .sl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .sl-link { font-family: var(--mono); font-size: 12px; min-width: 0; }
  .sl-make { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .sl-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
  .sl-chip { font-size: 13.5px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
  .sl-chip b { font-family: var(--mono); color: var(--jade); }
  .sl-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
  .sl-nums .ok { color: var(--jade); font-weight: 600; }
  .sl-empty { margin: 0; font-size: 13px; color: var(--muted); }
  .sl-log { align-self: flex-start; }
  .sl-det summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
  .sl-orders { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .sl-order { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--card); border: 1px solid var(--line-soft); content-visibility: auto; contain-intrinsic-size: auto 52px; }
  .sl-order.done { opacity: .55; }
  .sl-code { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; font-size: 13px; color: var(--jade); }
  .sl-who { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
  .sl-who span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
  .sl-amt { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; }
  .sl-amt span { font-size: 11px; color: var(--muted); }
  .sl-flips { display: flex; gap: 6px; }
  .act.sl-flip.on { background: var(--jade-soft); color: var(--jade); border-color: color-mix(in srgb, var(--jade) 45%, var(--line)); }
  @media (max-width: 620px) {
    .sl-order { grid-template-columns: auto 1fr auto; }
    .sl-flips { grid-column: 1 / -1; }
    .sl-flips .act { flex: 1; }
  }
  .nb-test { margin-left: auto; }

  /* ------------------------------------------------------------------ *
   * the public order page (order.html)
   * ------------------------------------------------------------------ */
  body.orderpage { background: var(--paper); }
  .op-wrap { max-width: 560px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
  .op-head { padding: 6px 0 16px; }
  .op-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 0 0 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
  .op-title { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.15; }
  .op-when { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); font-size: 14px; }
  .op-info { margin: 0; font-size: 14px; color: var(--ink-2); background: var(--card-2); border-radius: 10px; padding: 10px 12px; }
  .op-h { margin: 4px 0 0; font-size: 12px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .op-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); transition: border-color .15s, background .15s; }
  .op-item.on { border-color: var(--jade); background: var(--jade-soft); }
  .op-item-t { display: flex; flex-direction: column; }
  .op-item-t b { font-size: 16px; }
  .op-item-t span { font-size: 13.5px; color: var(--muted); }
  .op-step { display: flex; align-items: center; gap: 4px; }
  .op-btn { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
  .op-btn:active { transform: scale(.94); }
  .op-q { min-width: 28px; text-align: center; font-family: var(--mono); font-size: 17px; font-weight: 700; }
  .op-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 13px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); }
  .op-in:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
  .op-pays { display: flex; gap: 8px; }
  .op-pay { flex: 1; appearance: none; font: inherit; font-size: 15px; padding: 11px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); cursor: pointer; }
  .op-pay.on { border-color: var(--jade); background: var(--jade-soft); color: var(--jade); font-weight: 700; }
  .op-bar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
  .op-total { display: flex; flex-direction: column; }
  .op-total-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .op-total-n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .op-go, .op-again { appearance: none; border: 0; font: inherit; font-size: 16px; font-weight: 700; padding: 13px 22px; border-radius: 999px; cursor: pointer; background: var(--jade); color: var(--on-accent); }
  .op-go[disabled] { opacity: .6; }
  .op-note { min-height: 1em; margin: 10px 4px 0; font-size: 14px; color: var(--muted); }
  .op-note.bad { color: var(--clay); }
  .op-done { align-items: center; text-align: center; padding: 28px 18px; }
  .op-done h2 { margin: 0; font-family: var(--serif); font-size: 26px; }
  .op-done p { margin: 0; }
  .op-tick { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--jade); color: var(--on-accent); font-size: 28px; font-weight: 700; }
  .op-code { font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: .18em; color: var(--jade); padding: 8px 18px; border-radius: 14px; background: var(--jade-soft); }
  .op-sum { font-size: 15px; color: var(--ink-2); }
  .op-small { font-size: 12.5px; color: var(--muted); }
  .op-again { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); margin-top: 6px; }
  .op-msg { text-align: center; padding: 30px 18px; }
  .op-msg h2 { margin: 0; font-family: var(--serif); }
  .op-msg p { margin: 0; color: var(--ink-2); }
  .op-loading { color: var(--muted); text-align: center; padding: 40px 0; }
  .op-foot { margin-top: 26px; text-align: center; font-size: 12.5px; color: var(--muted); }

  /* impact & evidence (Tracker tab) */
  .impact { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
  .im-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .im-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-soft); }
  .im-n { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.1; }
  .im-k { font-size: 11.5px; color: var(--muted); }
  .im-evhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .im-total { font-size: 12.5px; color: var(--muted); }
  .im-list { display: flex; flex-direction: column; gap: 8px; }
  .im-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 8px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-soft); }
  .im-name { display: flex; flex-direction: column; min-width: 0; }
  .im-name span { font-size: 12px; color: var(--muted); }
  .im-checks { display: flex; flex-wrap: wrap; gap: 6px; }
  .im-chk { appearance: none; font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
  .im-chk.on { border-style: solid; border-color: color-mix(in srgb, var(--jade) 45%, var(--line)); background: var(--jade-soft); color: var(--jade); }
  .im-chk[disabled] { cursor: default; }
  .im-score { font-family: var(--mono); font-size: 13px; color: var(--marigold); }
  .im-score.full { color: var(--jade); }
  .im-add summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
  .im-add .sf-row { margin-top: 8px; justify-content: flex-start; }
  @media (max-width: 900px) { .im-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 620px) {
    .im-row { grid-template-columns: 1fr auto; }
    .im-checks { grid-column: 1 / -1; grid-row: 2; }
  }
  /* allergens on the order page */
  .op-allergens { margin: 0; font-size: 13.5px; color: var(--marigold); }

  /* after-event review */
  .rv { grid-column: 1 / -1; }
  .rv summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
  .rv.due summary { color: var(--marigold); font-weight: 600; }
  .rv.done summary { color: var(--jade); }
  .rv[open] { display: flex; flex-direction: column; gap: 6px; }
  .rv-a { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
  .rv-in { min-height: 44px; font-size: 14px; }
  .im-tile.warn .im-n { color: var(--clay); }

  /* sponsors */
  .sp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
  .sp-add { margin: 0 0 14px; }
  .sp-add summary { cursor: pointer; font-weight: 600; color: var(--jade); padding: 6px 0; }
  .sp-add .sale-form { margin-top: 8px; }
  .sp-stage { margin: 16px 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .sp-stage span { color: var(--ink-2); }
  .sp-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 13px; margin: 0 0 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
  .sp-card.late { border-color: color-mix(in srgb, var(--clay) 55%, var(--line)); }
  .sp-card.agreed { border-color: color-mix(in srgb, var(--jade) 55%, var(--line)); }
  .sp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .sp-who { display: flex; flex-direction: column; min-width: 0; }
  .sp-who b { font-size: 15px; }
  .sp-who span { font-size: 12.5px; color: var(--muted); }
  .sp-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
  .sp-row { justify-content: flex-start; }
  .sp-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
  .sp-lbl.late { color: var(--clay); font-weight: 600; }
  .sp-sel { min-width: 130px; }
  .sp-amt { width: 140px; }
  .sp-log summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
  .sp-log ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
  @media (max-width: 780px) { .sp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* meetings */
  .meetings { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
  .mt-card { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-soft); }
  .mt-card.soon { border-color: color-mix(in srgb, var(--jade) 50%, var(--line)); }
  .mt-notes { margin: 0; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; }
  .mt-decs { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .mt-dec { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13.5px; }
  .mt-dtext { flex: 1 1 200px; }
  .mt-job { font-size: 12px; color: var(--jade); }
  .mt-people { margin: 0; }
  .mt-row .mt-w { flex: 0 0 130px; }
  .mt-row .mt-d { flex: 0 0 150px; }
  @media (max-width: 620px) { .mt-row { flex-wrap: wrap; } .mt-row .mt-t { flex-basis: 100%; } }

  /* ------------------------------------------------------------------ *
   * members only: signed out, the page is the header's sign-in box and
   * this card - nothing else is even drawn
   * ------------------------------------------------------------------ */
  body.locked .wrap, body.locked .tabs, body.locked .stamp, body.locked #log-fab,
  body.locked .install, body.locked .sheet, body.locked .hclock, body.locked .search { display: none !important; }
  body:not(.locked) #gate { display: none; }
  .gate { max-width: 1060px; margin: 0 auto; padding: 40px 18px; }
  .gate-card { max-width: 440px; margin: 0 auto; text-align: center; padding: 28px 22px; border-radius: 18px;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .gate-ic { font-size: 30px; }
  .gate-card h2 { margin: 8px 0 6px; font-family: var(--serif); font-size: 24px; }
  .gate-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

  /* who's on (admins, Updates tab) */
  .whos-on { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
  .whos-on summary { cursor: pointer; font-size: 14px; }
  .wo-off { color: var(--muted); font-size: 13px; }
  .wo-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
  .wo-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; font-size: 13.5px; }
  .wo-dev { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wo-row:not(.on) .wo-dev { color: var(--clay); }
  .wo-ok { color: var(--jade); font-weight: 700; padding: 0 8px; }
  .act.sent { color: var(--jade); }
  .nb-ask { flex-basis: 100%; font-weight: 700; color: var(--marigold); margin-bottom: 4px; }
  .nb.nb-nudged { border-color: var(--marigold); }

  /* Me */
  .me-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; }
  .me-head .av.lg { width: 48px; height: 48px; font-size: 17px; }
  .me-id { flex: 1 1 200px; display: flex; flex-direction: column; }
  .me-id .sec { margin: 0; }
  .me-pts { display: flex; flex-direction: column; align-items: flex-end; }
  .me-need { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--jade-soft); color: var(--jade); font-weight: 600; font-size: 14px; }
  .me-need.hot { background: var(--marigold-soft); color: var(--marigold); }
  .me-sec { margin: 0 0 22px; }
  .me-h { margin: 0 0 10px; font-family: var(--serif); font-size: 19px; }
  .me-h span { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--muted); margin-left: 4px; }
  .me-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .me-list li { padding: 9px 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-2); }
  .me-list li b { color: var(--ink); }
  .me-list li.late { border-color: color-mix(in srgb, var(--clay) 55%, var(--line)); }
  .tab .n.hot { background: var(--marigold); color: #1b1405; }
  @media (max-width: 620px) { .me-pts { align-items: flex-start; flex-basis: 100%; } }

  /* welcome checklist (Me) */
  .welcome { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid color-mix(in srgb, var(--jade) 45%, var(--line)); display: flex; flex-direction: column; gap: 10px; }
  .wl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
  .wl-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
  .wl-bar span { display: block; height: 100%; background: var(--jade); border-radius: 999px; }
  .wl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .wl-steps li { display: flex; gap: 10px; align-items: flex-start; }
  .wl-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
  .wl-steps li.done .wl-tick { background: var(--jade); border-color: var(--jade); color: var(--on-accent); }
  .wl-steps li.done .wl-body b { color: var(--muted); text-decoration: line-through; font-weight: 500; }
  .wl-body { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
  .wl-body > span { color: var(--ink-2); font-size: 13.5px; }
  .wl-body .sf-row { justify-content: flex-start; }
  .wl-tour summary { cursor: pointer; color: var(--jade); font-weight: 600; font-size: 13.5px; }
  .wl-tour ul { margin: 8px 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }

  /* countdown (Updates) */
  .countdown { margin: 0 0 18px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--jade-soft), var(--card)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
  .cd-main { display: flex; align-items: center; gap: 16px; }
  .cd-num { display: flex; flex-direction: column; align-items: center; min-width: 76px; }
  .cd-n { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1; color: var(--jade); }
  .cd-k { font-size: 11.5px; color: var(--muted); }
  .cd-what { display: flex; flex-direction: column; }
  .cd-what b { font-family: var(--serif); font-size: 21px; }
  .cd-what span { font-size: 13px; color: var(--muted); }
  .cd-facts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
  .cd-facts > div { display: flex; flex-direction: column; gap: 5px; }
  .cd-jobs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
  .cd-jobs li { display: flex; align-items: center; gap: 6px; }
  .cd-jobs li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cd-none, .cd-val { font-size: 13px; color: var(--ink-2); }
  .cd-then { margin: 0; font-size: 12.5px; color: var(--muted); }
  @media (max-width: 780px) { .cd-facts { grid-template-columns: 1fr; } }

  /* system status (admins) */
  .sys-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 13.5px; }
  .sys-when { color: var(--muted); font-size: 12px; }
  .sys-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .sys-dot.green { background: var(--jade); } .sys-dot.amber { background: var(--marigold); } .sys-dot.red { background: var(--clay); } .sys-dot.grey { background: var(--line); }
  .sys-text { font-size: 12.5px; color: var(--muted); text-align: right; }
  .sys-text.red { color: var(--clay); } .sys-text.amber { color: var(--marigold); }
  @media (max-width: 620px) { .sys-row { grid-template-columns: auto 1fr; } .sys-text { grid-column: 2; text-align: left; } }

  /* archive: jobs finished over a month ago, folded at the bottom of Tasks */
  .archive { margin-top: 18px; }
  .archive summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }
  .archive .me-list { margin-top: 8px; }
  .archive .me-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

  /* countdown editing (admins) */
  .cd-main { position: relative; }
  .cd-edit { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-self: flex-start; }
  .ev-form { background: var(--card); }
  .ev-jobs { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; padding: 4px; border: 1px solid var(--line-soft); border-radius: 8px; }
  .ev-job { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
  .ev-job:hover { background: var(--card-2); }
  @media (max-width: 620px) { .cd-main { flex-wrap: wrap; } .cd-edit { margin-left: 0; } }

  /* ------------------------------------------------------------------ *
   * Updates, organised: countdown, then one tool bar, then the feed
   * ------------------------------------------------------------------ */
  .tools { margin: 0 0 22px; }
  .tools[hidden] { display: none; }
  .tool-bar { display: flex; flex-wrap: wrap; gap: 8px; }
  .tool-btn { appearance: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
    background: var(--card); color: var(--ink-2); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
  .tool-btn:hover { border-color: color-mix(in srgb, var(--jade) 45%, var(--line)); color: var(--ink); }
  .tool-btn.on { background: var(--jade-soft); border-color: var(--jade); color: var(--jade); }
  .tool-btn.bad { border-color: var(--clay); color: var(--clay); }
  .tool-badge { font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 999px; background: var(--card-2); color: var(--muted); }
  .tool-btn.on .tool-badge { background: var(--card); color: var(--jade); }
  .tool { display: none; margin-top: 12px; }
  .tool.open { display: block; }
  .tool > * { margin-bottom: 0 !important; }
  .tool .whos-on > details > summary { display: none; }       /* the button already says what it is */
  .feed-head { margin: 4px 0 6px; }
  .feed-head .sec { margin-bottom: 4px; }
  details.quoted { margin-top: 26px; }
  details.quoted > summary { cursor: pointer; font-size: 13.5px; color: var(--muted); padding: 6px 0; }

  /* the Admin mode switch in the header */
  .au-mode { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; padding: 4px 10px 4px 5px; border-radius: 999px; }
  .au-knob { width: 26px; height: 15px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
  .au-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--card); transition: left .15s; }
  .au-mode.on { color: var(--jade); border-color: color-mix(in srgb, var(--jade) 45%, var(--line)); }
  .au-mode.on .au-knob { background: var(--jade); }
  .au-mode.on .au-knob::after { left: 13px; }

  /* ------------------------------------------------------------------ *
   * phone fixes
   * ------------------------------------------------------------------ */
  /* countdown: columns may shrink, so long job names and the money line
     wrap inside the card instead of pushing the status tags off its edge */
  .countdown { overflow: hidden; }
  .cd-facts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .cd-facts > div { min-width: 0; }
  .cd-jobs li { min-width: 0; }
  .cd-jobs .pill { flex: none; }
  .cd-val, .cd-none { overflow-wrap: anywhere; }
  @media (max-width: 780px) { .cd-facts { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 620px) {
    .countdown { padding: 14px; }
    .cd-main { gap: 12px; }
    .cd-num { min-width: 58px; }
    .cd-n { font-size: 38px; }
    .cd-what b { font-size: 19px; }
    .cd-jobs li { align-items: flex-start; }
    .cd-jobs li > span:nth-child(2) { white-space: normal; overflow: visible; }
    .cd-jobs .pill { font-size: 10px; padding: 2px 6px; margin-top: 1px; }

    /* the tool buttons stay on one line and scroll sideways */
    .tool-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .tool-bar::-webkit-scrollbar { display: none; }
    .tool-btn { flex: none; font-size: 13.5px; padding: 8px 12px; }

    /* a smaller Log money button, which slides away while you scroll down
       and comes back when you scroll up - so it never sits on top of things */
    .fab { height: 48px; padding: 0 18px 0 62px; transition: transform .22s ease, box-shadow .16s ease; }
    .fab-label { font-size: 14px; }
    .fab-judy { transform: scale(.86); transform-origin: 0 100%; }
    body.fab-away .fab { transform: translateY(160%); }
  }

  /* while a saved login is being restored: a quiet "Signing you in..." */
  body.auth-pending .gate-locked, body:not(.auth-pending) .gate-wait { display: none; }
  .gate-spin, .au-spin { display: inline-block; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--jade); animation: spin .9s linear infinite; }
  .gate-spin { width: 28px; height: 28px; }
  .au-spin { width: 13px; height: 13px; border-width: 2px; margin-right: 8px; vertical-align: -2px; }
  .au-pending { font-size: 13px; color: var(--muted); }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .gate-spin, .au-spin { animation-duration: 3s; } }

  /* the group chat version of tonight's wrap, and whether it went */
  .gc { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
  .gc-on { font-weight: 600; font-size: 14px; color: var(--ink); }
  .gc-text { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
  .gc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13.5px; color: var(--ink-2); }
  .gc-status.sent { border-color: var(--jade); color: var(--jade); }
  .gc-status.failed { border-color: var(--clay); background: var(--clay-soft); color: var(--clay); }
  .gc-status > span:nth-child(2) { flex: 1 1 180px; min-width: 0; }
  .gc-status .act { margin-left: auto; }

  /* requests from the chat, each with the change it would make */
  .req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .req { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
  .req.gone { opacity: .7; }
  .req-said { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
  .req-who { font-weight: 600; color: var(--ink-2); }
  .req-q { flex: 1 1 100%; font-style: italic; color: var(--ink-2); overflow-wrap: anywhere; }
  .req-what { margin: 0; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
  .req.gone .req-what { color: var(--muted); font-size: 13px; }

  /* quick polls: at the top of Updates, one tap to vote, results as bars */
  .polls { display: flex; flex-direction: column; gap: 12px; }
  .polls:not(:empty) { margin-bottom: 14px; }
  .poll { padding: 14px; border-color: var(--jade); display: flex; flex-direction: column; gap: 10px; }
  .poll.closed { border-color: var(--line); }
  .poll-head { display: flex; gap: 10px; align-items: flex-start; }
  .poll-ic { font-size: 20px; line-height: 1.2; }
  .poll-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .poll-q { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
  .poll-sub { font-size: 12.5px; color: var(--muted); }
  .poll-opts { display: flex; flex-direction: column; gap: 7px; }
  .poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card-2); color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
  .poll-opt:hover:not(:disabled) { border-color: var(--jade); }
  .poll-opt:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
  .poll-opt:disabled { cursor: default; color: var(--ink); }
  .poll-opt.mine { border-color: var(--jade); font-weight: 600; }
  .poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--jade-soft); transition: width .25s ease; }
  .poll-o, .poll-n { position: relative; }
  .poll-o { overflow-wrap: anywhere; }
  .poll-n { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .poll-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
  .poll-who { flex: 1 1 100%; }
  .poll-foot .act { margin-left: auto; }
  .poll-new-q { width: 100%; box-sizing: border-box; }
  .poll-new-opts { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
  .poll-new-opts .ad-in.wide { flex: 1 1 auto; }
  @media (prefers-reduced-motion: reduce) { .poll-bar { transition: none; } }

  /* search: one box in the header; results grouped by kind, under it */
  .search { position: relative; }
  .q-in { width: 100%; box-sizing: border-box; height: 38px; padding: 0 36px 0 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
  .q-in::placeholder { color: var(--muted); }
  .q-in:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
  .q-key { position: absolute; right: 10px; top: 9px; font-family: var(--mono); font-size: 11px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; line-height: 18px; pointer-events: none; }
  .q-in:focus + .q-key, .q-in:not(:placeholder-shown) + .q-key { display: none; }
  @media (hover: none) { .q-key { display: none; } }
  .q-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: min(65vh, 520px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
  .q-group + .q-group { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
  .q-gh { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 4px; }
  .q-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none;
    color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .q-item:hover, .q-item.active { background: var(--jade-soft); }
  .q-item:focus-visible { outline: 2px solid var(--jade); outline-offset: -2px; }
  .q-t { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-s { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-more, .q-none { font-size: 12.5px; color: var(--muted); padding: 6px 8px; }
  /* the item a search result jumped to glows for a moment */
  .sk-hit { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 10px; animation: sk-glow 2.4s ease-out; }
  @keyframes sk-glow { 0%, 40% { box-shadow: 0 0 0 8px var(--marigold-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- editing the calendar ---- */
#rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#rail-head .cal-add { font-size: 12px; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 500; }
.evrow .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evrow .cal-edit { margin-left: auto; padding: 3px 10px; font-size: 12px; }
.evrow .cal-edit.on { color: var(--muted); }
.cal-form { padding: 10px 0 0; margin-top: 10px; }
.cal-form .adrow, .task .tedit .adrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cal-form .ad-in.wide, .task .tedit .ad-in.wide { flex: 1 1 220px; min-width: 0; }
.cal-form .an-text, .task .tedit .an-text { width: 100%; }
.cal-new { padding: 12px 14px; }
.cal-new .filters { margin: 0; }
.evrow .cal-rm { padding: 3px 10px; font-size: 12px; }

/* ---- merch ---- */
.merch-about { color: var(--muted); font-size: 13px; margin: -4px 0 12px; max-width: 70ch; }
.mgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 22px; }
.mgrid.wide { grid-template-columns: 1fr; }
.mgrid.ideas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.mcard { display: flex; flex-direction: column; }
.mtile {
  appearance: none; border: 0; padding: 0; cursor: zoom-in; display: block; width: 100%;
  background: #f4f1e6; line-height: 0;
}
.mtile img { width: 100%; height: 280px; object-fit: contain; display: block; }
.mgrid.wide .mtile img { height: auto; max-height: 760px; }
.mtile svg { display: block; width: 100%; height: auto; }
.mtile:focus-visible { outline: 2px solid var(--jade); outline-offset: -2px; }
.mfoot { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mhead b { font-size: 14px; }
.mhead .act { margin-left: auto; padding: 3px 10px; font-size: 12px; }
.mkind { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mcap { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.swatches { display: flex; gap: 8px; margin-top: 4px; }
.sw {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--line); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.sw[aria-pressed="true"] { outline: 2px solid var(--jade); outline-offset: 2px; }
.merch-add summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.merch-add[open] summary { margin-bottom: 10px; }
.merch-add .adrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.merch-add .ad-in.wide { flex: 1 1 240px; min-width: 0; }

/* the concept drawings: fixed garment colours and fonts, whatever the theme */
svg.mock .shirt { fill: var(--shirt); }
svg.mock .ink { fill: var(--dink); }
svg.mock .inks { stroke: var(--dink); }
svg.mock .an { font-family: "Archivo Narrow", sans-serif; }
svg.mock .mono { font-family: "IBM Plex Mono", monospace; font-weight: 500; }
svg.mock .anton { font-family: "Anton", sans-serif; }
svg.mock .barlow { font-family: "Barlow Condensed", sans-serif; }
svg.mock .bvp { font-family: "Be Vietnam Pro", sans-serif; }
svg.mock .slab { font-family: "Alfa Slab One", serif; }
svg.mock .lbl { fill: #7a7a72; font: 700 11px var(--sans, sans-serif); letter-spacing: 2px; }

.merch-lb .mlb-stage { max-width: 100%; display: flex; justify-content: center; }
.merch-lb .mlb-stage img { max-width: 100%; max-height: 80vh; border-radius: 8px; }
.merch-lb .mlb-stage svg { width: min(94vw, 1200px, 150vh); height: auto; background: #f4f1e6; border-radius: 8px; }
.mlb-nav {
  appearance: none; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff;
  width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1;
}
.mtools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.mtools .m-mv { padding: 3px 11px; font-size: 14px; line-height: 1.2; }
.mtools .m-mv:disabled { opacity: .35; cursor: default; }
.mtools .m-to { padding: 4px 8px; font-size: 12.5px; max-width: 150px; }
.mtools .m-rm { margin-left: auto; padding: 4px 12px; font-size: 12.5px; }
#mlb-rm .m-rm { padding: 5px 14px; font-size: 13px; }
.poll-foot .poll-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.poll-foot .poll-acts .act { margin-left: 0; }