/* Laid Off HQ: one stylesheet. "Darkroom": warm paper page, white cards, black ink, one red. Light only (no dark-mode rules, on purpose).
   Look source: workspace/laid-off/hq-redesign-2026-10-06/modern/page-3.png (Option B), approved by Sam 6 Oct 2026 (msg 3838).
   Red is Ask Sienna's colour: the Ask Sienna button, its tab on the phone and the small "HQ" tag on the wordmark. Nothing else is filled red.
   Deadlines and votes are black blocks and black tags, so the red button never competes with an alarm.
   No inline styles are allowed by the CSP: every look is a class here. Class names are the old ones (navy-edge, .dt.navy, .c-navy ...): they are hooks, not colours.
   Layout: sections 1-3 tokens, shell, components; 4 forms and tables; 5 older pages' classes (kept so nothing looks broken);
   6 folders block (owned by the folders job); 7 sections block (owned by the sections job); 8 fix round. */

/* ---------- 1. tokens, reset, type ---------- */
:root {
  color-scheme: light only;
  --paper: #F3F1EC; --card: #FFFFFF; --card2: #ECE9E2; --ink: #111111; --muted: #5A5650; --line: #E4E0D8; --edge: #8C877E;
  --card2h: #E1DDD3; --cardh: #FAF9F6; --tone1: #3B3935; --tone2: #D8D3C8; --tone3: #C9C3B6;
  --red: #D7261E; --redtext: #C21F18;
  --side: #111111; --sidetext: #FFFFFF; --sidemuted: #B9B5AE; --sideon: #2A2A2A;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "DIN Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --radius: 2px; --tap: 44px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.45 var(--body); }
a { color: var(--ink); text-underline-offset: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; flex: none; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
h1 { font: 700 44px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 6px 0 8px; }
h2 { font: 700 26px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 10px; }
h3 { font-size: 17px; margin: 0 0 4px; font-weight: 800; }
p { margin: 0 0 8px; }
.sub { color: var(--muted); font-size: 15px; }
.small, small, .muted { color: var(--muted); }
.small { font-size: 14px; }
.help { display: block; color: var(--muted); margin-top: 0.2rem; font-size: 14px; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.red { background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; line-height: 1.3; padding: 0 6px; border-radius: var(--radius); white-space: nowrap; display: inline-block; }
.gap { height: 16px; } .gap8 { height: 8px; }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 100; min-height: 44px; display: flex; align-items: center; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
#side :focus-visible, .bottombar .tab.ask :focus-visible, #top :focus-visible, .card.next:focus-visible { outline-color: #fff; }
.card.next:focus-visible { outline-offset: -5px; }
.stack > * + * { margin-top: 16px; }
.stack-s > * + * { margin-top: 8px; }

/* ---------- 2. shell: sidebar (laptop), trail, bottom bar (phone) ---------- */
#app { min-height: 100vh; }
#side { display: none; }
#top { background: var(--side); color: #fff; }
#top .main, #top .crumb { align-items: center; min-height: 56px; padding: 0 8px 0 16px; gap: 12px; }
#top .main { display: flex; }
#top .crumb { display: none; padding-left: 4px; }
#top:not(.is-home) .main { display: none; }
#top:not(.is-home) .crumb { display: flex; }
.wordmark { font: 700 24px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.wordmark span { font: 800 12px/1 var(--body); letter-spacing: .12em; padding: 4px 6px 3px; border-radius: var(--radius); background: var(--red); color: #fff; }
#top .main .wordmark { flex: 1; }
.who { width: 44px; height: 44px; border-radius: 50%; background: var(--card2); color: var(--ink); font-weight: 800;
  display: grid; place-items: center; text-decoration: none; }
.back { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; flex: none; }
.trail { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; }
.trail a { min-height: 44px; display: flex; align-items: center; color: #fff; text-decoration: none; }
.trail .sep { color: #fff; opacity: .8; }
.trail b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }

main#content { display: block; padding-bottom: 96px; }
.eyebrow.dsk { display: none; }        /* "Folders" label above the tiles: laptop only */
.wrap { padding: 16px 16px 28px; max-width: 920px; margin: 0 auto; }
.wrap.wide { max-width: 1160px; }
.wrap.narrow { max-width: 440px; padding-top: 32px; }
main#content:focus { outline: none; }

.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px;
  font-size: 13px; font-weight: 600; color: var(--muted); border-radius: var(--radius); position: relative; text-decoration: none; }
.tab .pill { width: 48px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; }
.tab[aria-current="page"] { color: var(--ink); font-weight: 800; }
.tab[aria-current="page"] .pill { background: var(--card2); color: var(--ink); }
.tab.ask { color: var(--ink); font-weight: 800; }
.tab.ask .pill { width: 56px; background: var(--red); color: #fff; }
.tab.ask[aria-current="page"] .pill { background: var(--red); color: #fff; outline: 2px solid var(--ink); outline-offset: 2px; }
.tab-dot { position: absolute; top: 2px; right: calc(50% - 30px); min-width: 20px; height: 20px; border-radius: var(--radius); background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }

.banner { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 12px 16px;
  font-weight: 800; min-height: 52px; }
.banner small { display: block; font-weight: 600; font-size: 14px; color: #fff; }
.banner.navy { background: var(--card2); color: var(--ink); }
.banner.navy small { color: var(--ink); }
#offline { border-radius: 0; justify-content: center; }
.flash, .notice { display: flex; gap: 10px; align-items: center; border-radius: var(--radius); padding: 10px 16px; margin: 0 0 12px; font-weight: 700; }
.flash { background: var(--ink); color: #fff; }
.notice { background: var(--card2); color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  #app { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  #side { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side); color: var(--sidetext);
    padding: 26px 16px 16px; grid-column: 1; grid-row: 1 / 4; }
  #top, main#content { grid-column: 2; }
  #top, #top:not(.is-home) { background: var(--paper); color: var(--ink); }
  #top.is-home { display: none; }
  #top .main { display: none !important; }
  #top:not(.is-home) .crumb { background: var(--paper); border-bottom: 1px solid var(--line); min-height: 56px; padding: 0 24px 0 16px; }
  #top .crumb .back, #top .crumb .trail a, #top .crumb .trail .sep { color: var(--ink); }
  #top :focus-visible { outline-color: var(--ink); }
  main#content { padding-bottom: 32px; }
  .wrap { padding: 36px 40px 40px; }
  .bottombar { display: none; }
  #side .wordmark { padding: 0 10px 22px; font-size: 26px; }
  .sl { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius); font-size: 15px; font-weight: 600; color: var(--sidemuted);
    margin-bottom: 2px; text-decoration: none; }
  .sl:hover, .ss:hover { background: var(--sideon); color: var(--sidetext); }
  .sl[aria-current="page"] { background: var(--sideon); color: var(--sidetext); font-weight: 800; }
  .sl.ask { background: var(--red); color: #fff; font-weight: 800; font-size: 15.5px; min-height: 48px; margin: 0 0 20px; }
  .sl.ask:hover { background: var(--redtext); color: #fff; }
  .sl.ask[aria-current="page"] { background: var(--red); outline: 2px solid #fff; outline-offset: 2px; }
  .sl.open { font-weight: 800; color: var(--sidetext); }
  .sl .n { margin-left: auto; min-width: 24px; height: 24px; border-radius: var(--radius); display: grid; place-items: center; font-size: 13px; font-weight: 800;
    padding: 0 7px; background: #fff; color: var(--ink); }
  .sl .n.r { background: #fff; color: var(--ink); }
  .sh { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sidemuted); margin: 26px 12px 8px; }
  .ss { display: flex; align-items: center; min-height: 38px; padding: 0 12px 0 48px; border-radius: var(--radius); font-size: 15px; font-weight: 600;
    color: var(--sidemuted); margin-bottom: 2px; text-decoration: none; }
  .ss[aria-current="page"] { background: var(--sideon); color: var(--sidetext); font-weight: 800; }
  .sfoot { margin-top: auto; padding: 16px 12px 0; font-size: 13px; color: var(--sidemuted); }
  .sfoot form { display: inline; }
  .sfoot button { background: none; border: 0; color: #fff; text-decoration: underline; padding: 0 0 0 6px; font-size: 13px; min-height: 0; }
  /* Home on a laptop: Needs you beside the black Next deadline block, then the six folder tiles in one row (page-3.png) */
  .home { display: block; }
  .home > .stack { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
  .home > .stack > * + * { margin-top: 0; }
  .home > .stack > .card { margin: 0; }
  .home > div + div { margin-top: 28px; }
  .gtitle h1 { font-size: 60px; line-height: .95; margin: 0; }
  .gtitle .sub { margin: 8px 0 0; }
  .home .folders { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .home .tile { min-height: 168px; }
  .eyebrow.dsk { display: block; margin-bottom: 10px; }
}
@media (min-width: 1240px) {
  .home .folders { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (min-width: 900px) {
  .home > .stack { grid-template-columns: 1fr; }
}

/* ---------- 3. components ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 18px 20px; margin: 16px 0; }
.card .card { background: var(--card2); }
.card.white { background: var(--card); }
.card.navy-edge { background: var(--card); border-left: 6px solid var(--ink); }
.card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.card > header h2 { margin: 0; font-size: 24px; }
.card.attention { border-left: 6px solid var(--ink); }
a.card { display: block; text-decoration: none; color: var(--ink); }
.note { display: flex; gap: 12px; align-items: flex-start; }
.sa { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800;
  display: grid; place-items: center; font-size: 15px; }
.lock { display: flex; gap: 10px; align-items: center; background: var(--card); border-left: 6px solid var(--ink); border-radius: var(--radius); padding: 12px 16px; font-weight: 700; }
.callout { background: var(--card2); color: var(--ink); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; }
.empty { color: var(--muted); padding: 8px 0; }
.empty-state { background: var(--card); border-radius: var(--radius); padding: 22px 20px; }
.empty-state h3 { margin-bottom: 4px; font-size: 19px; }
.empty-state p { color: var(--muted); }
.error { color: var(--redtext); font-weight: 700; }

.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: var(--radius); font-size: 13px; font-weight: 700;
  background: var(--card2); color: var(--ink); white-space: nowrap; }
.chip.real, .chip.sched, .chip.wait { background: var(--ink); color: #fff; }
.chip.idea { background: var(--card2); color: var(--ink); }
.chip.draft { background: var(--card); color: var(--ink); border: 1.5px dashed var(--ink); }
.chip.plain { background: var(--card2); font-weight: 600; }

.btn, button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--radius);
  font-weight: 800; font-size: 16px; border: 0; background: var(--card2); color: var(--ink); text-decoration: none; }
.btn:hover { background: var(--card2h); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--sideon); }
.btn.block { display: flex; width: 100%; }
.btn.on { background: var(--ink); color: #fff; }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn:disabled, button:disabled { opacity: .55; cursor: progress; }
button.link { background: none; border: 0; color: var(--ink); text-decoration: underline; padding: 0 4px; min-height: var(--tap); font-weight: 700; }
summary.btn { list-style: none; }
form.inline { display: inline-block; margin: 0 6px 6px 0; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* needs you: a white card, no red; the count is a black tag */
.need { background: var(--card); border-radius: var(--radius); overflow: hidden; padding: 6px 0 0; }
.need .hd { display: flex; align-items: center; gap: 10px; padding: 12px 20px 10px; min-height: 48px; font-weight: 800; font-size: 17px; }
.need .hd > svg { display: none; }
.need .cnt { background: var(--ink); color: #fff; border-radius: var(--radius); min-width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px; padding: 0 7px; }
.need .more { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; text-align: center; }
.row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 11px 20px; border-top: 1px solid var(--line); width: 100%; background: var(--card);
  color: var(--ink); text-decoration: none; text-align: left; }
.list .row:first-child { border-top: 0; }
.row .ico { width: 38px; height: 38px; border-radius: var(--radius); background: var(--card2); color: var(--muted); display: grid; place-items: center; flex: none; }
.row .tx { flex: 1; min-width: 0; font-size: 16px; line-height: 1.3; }
.row .tx small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.row .chev { color: var(--muted); }
a.row:hover { background: var(--paper); }
.list { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.pillnum { background: var(--ink); color: #fff; border-radius: var(--radius); min-width: 28px; height: 28px; display: grid; place-items: center; font-weight: 800; font-size: 14px; padding: 0 8px; }
.pillnum.z { background: var(--card2); color: var(--ink); }

/* next up: the one black block on the page. A huge condensed number, then the title */
.card.next { display: flex; flex-direction: column; background: var(--ink); color: #fff; padding: 22px 24px; min-height: 260px; margin: 16px 0; }
.card.next .eyebrow { color: var(--sidemuted); margin: 0; }
.card.next h3 { font-size: 21px; line-height: 1.2; color: #fff; margin: 0 0 4px; }
.card.next .sub, .card.next .small { color: var(--sidemuted); }
.card.next .grow { margin-top: auto; flex: none; }
.countdown { display: flex; align-items: baseline; gap: 8px; color: #fff; margin: 14px 0 18px; }
.countdown b { font: 700 118px/.85 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.countdown span { font-size: 18px; font-weight: 700; color: #fff; }
.countdown.urgent { color: #fff; }
.dots { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--card2); box-shadow: inset 0 0 0 2px var(--ink); }
.dots i.f { background: var(--ink); }
.card.next .dots i { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.card.next .dots i.f { background: #fff; }
.card.next .dots-text { color: #fff; }

/* folder tiles */
.folders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; min-height: 112px; padding: 16px 16px 14px; border-radius: var(--radius); background: var(--card);
  color: var(--ink); text-decoration: none; }
a.tile:hover { background: var(--cardh); box-shadow: inset 0 -3px 0 var(--ink); }
.tile .ib { width: 28px; height: 28px; margin-bottom: 8px; color: var(--ink); display: grid; place-items: center; justify-items: start; }
.tile .nm { font-size: 14px; font-weight: 700; line-height: 1.1; color: var(--muted); }
.tile .big { font: 700 42px/1.05 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.tile .st { font-size: 13px; color: var(--muted); line-height: 1.3; }
.tile .nx { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-top: auto; padding-top: 8px; }
.trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 14px; color: var(--ink); }
.trow { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }

/* segmented switch, stats, bars */
.seg { display: flex; background: var(--card2); border-radius: var(--radius); padding: 4px; gap: 4px; }
.seg a { flex: 1; min-height: 44px; display: grid; place-items: center; border-radius: var(--radius); font-weight: 700; color: var(--ink); text-decoration: none; }
.seg a[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 800; }
.bigno { font: 700 60px/1 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--card2); border-radius: var(--radius); padding: 12px; }
.stat b { display: block; font: 700 30px/1.05 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); line-height: 1.2; display: block; margin-top: 2px; }
.stat.none b { font: 700 16px/1.2 var(--body); color: var(--muted); }
progress.bar { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 12px; border: 0; border-radius: var(--radius);
  background: var(--card2); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--card2); }
progress.bar::-webkit-progress-value { background: var(--ink); }
progress.bar::-moz-progress-bar { background: var(--ink); }
.segbar { display: flex; gap: 6px; }
.segbar i { flex: 1; height: 18px; border-radius: var(--radius); background: var(--card2); }
.segbar i.f { background: var(--ink); }
.segbar i.n { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, var(--card) 3px 6px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.note2 { display: block; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 10px 14px; font-weight: 700; font-size: 15px; line-height: 1.3; }

/* people, availability badges */
.people { display: flex; justify-content: space-between; gap: 4px; }
.pp { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; flex: 1; }
.av { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; position: relative; }
.av.me { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.bg { position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); display: grid; place-items: center; color: #fff; }
.bg.y { background: var(--ink); } .bg.n { background: var(--muted); } .bg.q { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.bg svg { stroke-width: 3; }

/* tracker */
.steps { display: flex; align-items: flex-start; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; font-size: 13px; line-height: 1.15; font-weight: 600; color: var(--muted); }
.step .c { width: 30px; height: 30px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; position: relative; z-index: 1; color: var(--ink); font-weight: 800; font-size: 14px; }
.step.done .c { background: var(--ink); color: #fff; }
.step.cur .c { background: var(--card); box-shadow: 0 0 0 3px var(--ink); }
.step.cur, .step.done { color: var(--ink); }
.step.cur { font-weight: 800; }
.step:not(:first-child)::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.step.done:not(:first-child)::before, .step.cur:not(:first-child)::before { background: var(--ink); }

/* calendar-style rows, post tiles */
.dayrow { display: flex; gap: 14px; align-items: center; min-height: 64px; padding: 11px 20px; border-top: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.dayrow:first-child { border-top: 0; }
.dt { flex: none; width: 52px; height: 56px; border-radius: var(--radius); background: var(--card2); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.dt b { font: 700 26px/1 var(--display); } .dt span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.dt.urgent { background: var(--ink); color: #fff; } .dt.urgent span { color: #fff; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.post { display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 0; text-align: left; min-width: 0; color: var(--ink); text-decoration: none; }
.post .pv { aspect-ratio: 1 / 1.1; border-radius: var(--radius); padding: 8px; display: flex; align-items: flex-end; font-size: 13px; font-weight: 800; line-height: 1.15; }
.post .vw { font-size: 13px; color: var(--muted); padding-left: 2px; }
.c-navy { background: var(--ink); color: #fff; } .c-mid { background: var(--tone1); color: #fff; }
.c-or { background: var(--tone2); color: var(--ink); } .c-sor { background: var(--card2); color: var(--ink); } .c-sn { background: var(--tone3); color: var(--ink); }

/* chat (Ask Sienna) */
.chat { padding: 16px 0; }
.bub { max-width: 88%; padding: 12px 16px; border-radius: var(--radius); margin: 10px 0; font-size: 16px; line-height: 1.4; }
.bub.me { margin-left: auto; background: var(--ink); color: #fff; }
.bub.si { background: var(--card); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chips button, .chips a { min-height: 44px; padding: 8px 14px; border-radius: var(--radius); border: 0; background: var(--card); font-weight: 700; font-size: 15px; text-align: left; line-height: 1.2; color: var(--ink); text-decoration: none; }
.chips button:hover, .chips a:hover { background: var(--card2); }
.composer { display: flex; gap: 8px; padding: 10px 0; }
.composer input, .composer textarea { flex: 1; min-width: 0; min-height: 48px; border-radius: var(--radius); border: 1px solid var(--edge); padding: 0 16px; font: inherit; color: var(--ink); background: var(--card); }
.composer button { width: 48px; height: 48px; border-radius: var(--radius); border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; padding: 0; }

/* ---------- 4. forms, tables, disclosure ---------- */
.field { margin: 10px 0; }
.field label, fieldset legend { display: block; font-weight: 700; margin-bottom: 4px; }
input, select, textarea { width: 100%; font: inherit; min-height: var(--tap); padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--card); color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
textarea { min-height: 5rem; }
input[type="checkbox"], input[type="radio"] { width: 1.3rem; min-height: 1.3rem; height: 1.3rem; accent-color: var(--ink); }
input[type="file"] { padding: 6px; }
label.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-weight: 400; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.inline-form .field { flex: 1; min-width: 12rem; }
.rowform { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.rowform .field { flex: 1; min-width: 9rem; }
@media (max-width: 600px) { .rowform { display: block; } }
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
details > summary { cursor: pointer; font-weight: 700; min-height: var(--tap); display: flex; align-items: center; }
details.card > summary { font-weight: 800; }
details.add { margin: 8px 0; }

/* ---------- 5. older pages' classes (tasks, decisions, events, music, money, ...) restyled so they sit in the new look ---------- */
.badge { display: inline-block; border-radius: var(--radius); padding: 1px 9px; font-size: 13px; font-weight: 700; background: var(--card2); color: var(--muted); white-space: nowrap; }
.badge-good, .badge-new { background: var(--ink); color: #fff; }
.badge-bad { background: var(--card); color: var(--redtext); box-shadow: inset 0 0 0 1.5px var(--redtext); }
.badge-hold { background: var(--card); color: var(--ink); border: 1.5px dashed var(--ink); }
.badge-no { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }      /* a "No" vote: votes are black, never red (review) */
.count { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 0 7px; font-size: 12px; font-weight: 800; }
ul.plain, ol.plain { list-style: none; padding: 0; margin: 4px 0; }
ul.plain li { padding: 4px 0; }
.rows .row, li.row { min-height: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; }
.rows .row:last-child { border-bottom: 0; }
.row a.grow { text-decoration: none; color: var(--ink); }
.quick { display: flex; flex-wrap: wrap; }
nav.tabs, nav.toggle { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
nav.tabs a, nav.toggle a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--card2); font-weight: 700; }
nav.tabs a[aria-current="page"], nav.toggle a[aria-current="page"] { background: var(--ink); color: #fff; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.notif.unread { background: var(--paper); }
.unconfirmed { border-left: 4px dashed var(--ink); padding-left: 10px; margin: 4px 0 10px; }
dl.proposal { display: grid; grid-template-columns: 7rem 1fr; gap: 4px 12px; margin: 0; }
dl.proposal dt { color: var(--muted); }
dl.proposal dd { margin: 0; font-weight: 700; }
blockquote { margin: 6px 0; padding: 6px 14px; border-left: 4px solid var(--ink); font-size: 1.05rem; white-space: pre-wrap; }
.status { font-weight: 700; }
.wait { color: var(--ink); font-weight: 700; }
.votebtns { display: flex; flex-wrap: wrap; gap: 8px; }
.stagebar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.stagebar li { padding: 2px 10px; background: var(--card2); border-radius: var(--radius); font-size: 14px; color: var(--muted); }
.stagebar li[aria-current="step"] { background: var(--ink); color: #fff; font-weight: 800; }
.claim { border-left: 4px dashed var(--ink); background: var(--card2); border-radius: var(--radius); padding: 8px 14px; margin: 8px 0; }
.parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; padding: 0; list-style: none; }
.parts li { border: 2px dashed var(--ink); border-radius: var(--radius); padding: 1px 10px; font-weight: 700; }
.parts li.done { border: 1px solid var(--edge); text-decoration: line-through; color: var(--muted); font-weight: 400; }
.version { border-top: 1px solid var(--line); padding: 10px 0; }
.version:first-of-type { border-top: 0; }
.fb { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.fb .ts { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 3.2rem; }
.fb.addressed { color: var(--muted); text-decoration: line-through; }
ul.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 10px; margin: 8px 0; padding: 0; list-style: none; }
ul.tiles .tile { min-height: 0; }
ul.tiles .tile > span, ul.tiles .tile > a { display: block; }
.tile.booked { box-shadow: inset 6px 0 0 var(--ink); }
.tile.unbooked { box-shadow: inset 0 0 0 2px var(--ink); }
.tile .num { font: 700 1.9rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.tile .num.state { font: 700 1.05rem/1.2 var(--body); }
.tile .label { font-weight: 700; }
.target { border-left: 4px solid var(--ink); padding-left: 8px; margin: 6px 0; }
.target.draft { border-left: 4px dashed var(--ink); }
.pipeline { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 6px 0; list-style: none; }
.pipeline li a { display: block; min-width: 5.5rem; padding: 6px 12px; border-radius: var(--radius); background: var(--card); text-decoration: none; color: var(--ink); }
.pipeline .n { font: 700 1.6rem/1.1 var(--display); display: block; }
/* the old month grid and its event chips: confirmed = grey block with a black edge, deadline = black block, hold = dashed */
.chip[class*="ev-"] { display: block; padding: 2px 8px; margin: 3px 0; border-radius: var(--radius); font-size: 13px; text-decoration: none; color: var(--ink); line-height: 1.3; white-space: normal; border: 0; }
.chip.ev-confirmed { background: var(--card2); box-shadow: inset 5px 0 0 var(--ink); padding-left: 12px; font-weight: 800; }
.chip.ev-tentative, .chip.ev-proposed { background: var(--card); border: 1.5px dashed var(--ink); padding: 1px 7px; font-weight: 600; }
.chip.ev-deadline { background: var(--ink); color: #fff; font-style: normal; }
.legend .chip { display: inline-block; margin-right: 6px; }
.legend .chip.real { background: var(--card2); color: var(--ink); box-shadow: inset 5px 0 0 var(--ink); padding-left: 12px; }      /* the key looks like the thing it explains */
.monthnav { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; }
.month-grid { display: none; }
.agenda li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--line); padding: 8px 0; }
.agenda .when { min-width: 11rem; font-weight: 700; }
@media (min-width: 700px) {
  .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
  .month-grid .dow { background: var(--card2); text-align: center; font-weight: 800; padding: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .month-grid .day { background: var(--card); min-height: 6.5rem; padding: 4px; }
  .month-grid .day.out { background: var(--paper); opacity: .7; }
  .month-grid .day.today .num { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 0 7px; }
  .month-grid .num { font-size: 13px; font-weight: 800; }
}
/* Sienna conversations */
.transcript { margin: 8px 0; }
.msg { padding: 8px 14px; margin: 8px 0; border-radius: var(--radius); background: var(--card); max-width: 90%; }
.msg.msg-me { margin-left: auto; background: var(--ink); color: #fff; }
.msg.msg-me .muted, .msg.msg-me a { color: #fff; }
.msg .body { white-space: pre-wrap; }
.msg .meta { margin: 0 0 4px; }
.jobstate { color: var(--ink); font-weight: 700; }
.jobstate.failed { color: var(--redtext); }
.action { border-left: 4px solid var(--ink); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; background: var(--card2); }
.visibility { background: var(--card2); border-radius: var(--radius); padding: 8px 12px; }
.add-card > summary { font-weight: 800; }

/* helpers from app/kit.py */
.phead { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.phead .ib { width: 52px; height: 52px; border-radius: var(--radius); background: var(--card2); color: var(--ink); display: grid; place-items: center; flex: none; }
.phead h1 { margin: 0; }
.bigno.none, .tile .big.none { font: 700 18px/1.2 var(--body); color: var(--muted); letter-spacing: 0; }
.nextstep .nx-text { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.votetext { font-size: 16px; }
.dots-text { margin-left: 6px; font-weight: 700; color: var(--ink); }
.countdown b.word { font-size: 22px; }
.tile .ib svg { margin: 0; }

/* ---------- 6. folders (owned by the `folders` job; additive) ---------- */
/* folders */
.headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.headrow .btn { margin-top: 4px; }
.foldertop { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 12px; align-items: stretch; margin: 8px 0 16px; }
.foldertop > .card { margin: 0; display: flex; flex-direction: column; justify-content: center; }
.foldertop .nextstep { margin: 0; }
.pillnum.wide { padding: 0 12px; }
.bg.t { background: var(--card2); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
dl.kv { display: grid; grid-template-columns: 7rem 1fr; gap: 6px 14px; margin: 8px 0 0; }
dl.kv dt { color: var(--muted); font-weight: 700; font-size: 15px; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
ul.notes { margin: 8px 0; font-size: 15px; }
p.ask { margin: 14px 0 8px; font-size: 17px; }
.gigpage .card h3 { margin-bottom: 6px; }
.gigpage .btnrow { margin: 6px 0; }
.gigpage details { margin: 6px 0; }
.gigpage .grid2 form { margin: 0; }
.btn.on { background: var(--ink); color: #fff; }
.gigpage details > summary:not(.btn), details.card.white > summary { justify-content: space-between; }
.gigpage details > summary:not(.btn)::after, details.card.white > summary::after { content: "+"; font-size: 22px; font-weight: 700; line-height: 1; padding-left: 12px; }
.gigpage details[open] > summary:not(.btn)::after, details.card.white[open] > summary::after { content: "\2212"; }
details.edit { margin: 8px 0; }
details.edit > summary { list-style: none; width: fit-content; }
details.edit > section.card { margin: 8px 0 0; }
details.edit > section.card > header { display: none; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cols2 > .card { margin: 0; }
.plat { display: flex; flex-direction: column; gap: 4px; min-height: 148px; padding: 16px; border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; }
a.plat:hover { background: var(--cardh); box-shadow: inset 0 -3px 0 var(--ink); }
.plat .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.plat .ib { width: 28px; height: 28px; display: grid; place-items: center; justify-items: start; }
.plat .nm { font-size: 14px; font-weight: 700; line-height: 1.1; color: var(--muted); }
.plat .big { font: 700 40px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.plat .big.none { font: 700 17px/1.2 var(--body); color: var(--muted); }
.plat .st { font-size: 14px; color: var(--muted); line-height: 1.3; }
.platgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 16px; }
.chart { width: 100%; height: auto; display: block; }
.chart .ln { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .ar { fill: var(--card2); stroke: none; }
.chart .dot { fill: var(--ink); stroke: var(--card); stroke-width: 3; }
.chart .ax { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 13px; font-weight: 600; }
.bigline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tablewrap table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* folders: phones. One column, thumb-sized buttons, nothing under 14px, nothing wider than the screen. */
@media (max-width: 899px) {
  .foldertop { grid-template-columns: 1fr; gap: 10px; }
  .foldertop > .card { padding: 14px 16px; }
  .platgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cols2 { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 5.5rem 1fr; }
  .headrow { flex-direction: column; align-items: stretch; gap: 4px; }
  .headrow .btn { width: 100%; }
  .trail > a:not(:nth-last-of-type(1)), .trail > .sep:not(:nth-last-of-type(1)) { display: none; }      /* a long trail on a phone: the parent and the page, the back arrow does the rest */
  .trail > a { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
  .gigpage .grid2 { gap: 10px; }
  .gigpage .grid2 .btn, .gigpage .btn.block { min-height: 56px; font-size: 18px; }
  .chip, .step, .stat span, .pillnum, .badge, .dt span, ul.notes, .votetext { font-size: 14px; }
  .step .c { width: 32px; height: 32px; }
  .stat b { font-size: 28px; }
  .plat { min-height: 132px; }
  .posts { grid-template-columns: repeat(2, 1fr); }
  .chart text { font-size: 15px; }
  table.data { font-size: 14px; }
  .tablewrap { max-width: 100%; }
  .row .tx { overflow-wrap: anywhere; }
  .gigpage blockquote { overflow-wrap: anywhere; }
}
/* end folders */

/* ---------- 7. sections (owned by the `sections` job; additive) ---------- */
/* sections */
.chiprow { margin-top: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.chip.dl { background: var(--ink); color: #fff; font-weight: 800; }
.dt.navy { background: var(--ink); color: #fff; } .dt.navy span { color: #fff; }
.dt.hold { background: var(--card); border: 2px dashed var(--ink); }
.dt.dl { background: var(--card2); box-shadow: inset 0 -4px 0 var(--ink); color: var(--ink); } .dt.dl span { color: var(--ink); }
.bg.t { background: var(--card2); color: var(--ink); }
.pp .ans { font-weight: 600; line-height: 1.1; text-align: center; }
.agenda-group { margin: 0 0 16px; }
details.agenda-group > summary { min-height: var(--tap); }
.nobody { margin: 0 0 12px; }
.cal-asks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; margin: 0 0 20px; }
.cal-asks .card { margin: 0; }
.cal-asks .btnrow { margin: 4px 0 8px; }
.cal-asks .btn.on, .btn.sm.on { background: var(--ink); color: #fff; }
.note-more { margin: 4px 0; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cal-main { display: none; }
.cal-side .card { margin: 0; }
.cal-side .list { margin: 0; }
.monthnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 12px; }
.monthnav h2 { margin: 0; font-size: 28px; }
.monthnav .btn svg { margin: 0; }
.chip[class*="ev-"] .chip-time { font-weight: 800; }
.chip.ev-deadline { border: 0; font-style: normal; }
.chip.ev-deadline span[aria-hidden] { color: #fff; }
.cal-main, .cal-side, .ask-side, .you-layout > *, .inbox-layout > *, .settings-layout > * { min-width: 0; }
.month-grid .day { min-height: 6rem; min-width: 0; overflow: hidden; }
.month-grid .chip[class*="ev-"] { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; position: relative; }   /* position: the hidden screen-reader text must stay inside the chip, or it widens the page */
.stack-grid { display: grid; gap: 16px; align-content: start; }
.stack-grid > * { margin: 0; }
details.agenda-more { margin: 8px 0 0; }
details.agenda-more summary { min-height: var(--tap); }
.month-grid .day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.add-event .field { margin: 8px 0; }
.chat { min-width: 0; }
.chat .note { margin: 0 0 12px; }
.chat .visibility { margin: 0 0 8px; }
.chat .visibility summary { min-height: var(--tap); display: inline-flex; font-weight: 700; margin-left: 4px; }
.status-line p { margin: 4px 0 8px; }
.ask-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ask-side .card { margin: 0; }
ol.transcript { list-style: none; padding: 0; margin: 8px 0 0; }
li.bub { max-width: 92%; padding: 12px 16px; border-radius: var(--radius); margin: 10px 0; line-height: 1.4; }
li.bub.me { margin-left: auto; background: var(--ink); color: #fff; }
li.bub.si { background: var(--card); }
li.bub.other { background: var(--card2); }
li.bub .meta { margin: 0 0 2px; font-size: 14px; }
li.bub .when { color: var(--muted); font-weight: 400; }
li.bub.me .when, li.bub.me a, li.bub.me .jobstate { color: #fff; }
li.bub .body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
li.bub .jobstate { margin: 6px 0 0; }
li.bub.me .badge { background: #fff; color: var(--ink); }
.chipform .chips { margin: 8px 0; }
.chips button { cursor: pointer; }
.composer-dock { position: sticky; bottom: 0; z-index: 5; background: var(--paper); border-top: 1px solid var(--line); margin-top: 12px; padding: 8px 0 12px; }
.composer-form .composer { padding: 6px 0 0; align-items: flex-end; }
.composer textarea { padding: 12px 16px; line-height: 1.3; min-height: 48px; max-height: 160px; border-radius: var(--radius); resize: none; }
.inbox-layout, .you-layout, .settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.inbox-layout .card, .you-layout .card, .settings-layout .card, .inbox-layout .need { margin: 0; }
.sechead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sechead h2 { margin: 0; }
.sechead form { margin: 0 0 0 auto; }
.notifs { margin: 8px 0; }
.nrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 11px 20px; border-top: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.nrow:first-child { border-top: 0; }
.nrow:hover { background: var(--paper); }
.nrow.unread { background: var(--card); box-shadow: inset 5px 0 0 var(--ink); }
.nrow .tx { flex: 1; min-width: 0; }
.nrow .tx small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.nrow .chev { flex: none; color: var(--muted); }
.card .foot { margin: 8px 0 0; }
.you-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.you-head h1 { margin: 0; }
.av.big { width: 64px; height: 64px; font-size: 26px; flex: none; }
.you-out { margin-top: 16px; }
.mlist { margin: 0 0 8px; }
.mrow { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mrow:last-child { border-bottom: 0; }
.mrow .av { width: 44px; height: 44px; font-size: 17px; flex: none; }
@media (min-width: 900px) {
  .cal-main { display: block; }
  .nav-phone { display: none; }
  .ask-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .ask-side { position: sticky; top: 16px; }
  .inbox-layout, .you-layout, .settings-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .composer-dock { bottom: 0; }
}
/* a 1280 laptop gets the month grid across the full width (cells wide enough to read), the agenda under it; 1300 and up put the agenda beside it */
@media (min-width: 1300px) { .cal-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }

/* ---------- phone frame (sections job; 899px and under; matches page-3.png's phone) ---------- */
/* phone frame */
@media (max-width: 899px) {
  /* nothing under 14px: the small labels the laptop keeps at 12-13px grow here */
  .chip, .badge, .count, .tab, .stat span, .step, .dt span, .tab-dot, .post .vw, .bg, .sechead .small, .eyebrow, .red, .tile .st, .tile .nx, .tile .nm, .wordmark span, .need .cnt, .need .hd .cnt, table.data th { font-size: 14px; }
  .tab-dot { min-width: 22px; height: 22px; right: calc(50% - 32px); }
  .tab { letter-spacing: -.2px; white-space: nowrap; }
  .tab .pill { width: 44px; }
  .tab.ask .pill { width: 52px; }
  .wrap { padding: 14px 16px 24px; }
  #top .main .who { margin-right: 4px; }
  #top .main .wordmark, #top .main .wordmark span { gap: 8px; }
  #top .main .wordmark { font-size: 24px; }
  #top .main .wordmark span { letter-spacing: .06em; padding: 3px 5px 2px; }
  .trail a { min-width: 44px; justify-content: center; padding: 0 4px; }
  h1 { font-size: 40px; }
  /* Home: Needs you, the black Next deadline block, then the six folders in two columns; a tile's next step is cut to two lines so the grid stays short */
  .home { display: block; }
  .home > div + div { margin-top: 16px; }
  .home .folders { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { min-height: 0; padding: 14px 14px 12px; }
  .tile .big { font-size: 36px; }
  .tile .nx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
  .tile .big.none { font-size: 16px; }
  .gtitle h1 { font-size: 46px; line-height: .98; margin: 0; }
  .need .hd { font-size: 17px; }
  .card.next { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 16px 18px; min-height: 0; }
  .card.next .eyebrow { grid-column: 2; grid-row: 1; align-self: end; }
  .card.next .countdown { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
  .card.next .countdown b { font-size: 70px; }
  .card.next .countdown span { font-size: 14px; }
  .card.next .grow { grid-column: 2; grid-row: 2; margin-top: 4px; align-self: start; }
  .card.next h3 { font-size: 19px; }
  .row, .dayrow, .nrow { padding-left: 16px; padding-right: 16px; }
  .monthnav .btn { padding: 0 12px; }
  .need .hd { padding-left: 16px; padding-right: 16px; }
  .need .more { padding-left: 16px; padding-right: 16px; }
  /* forms and buttons: full width and thumb height */
  .btn, button.btn, a.btn { min-height: 48px; }
  .btn.sm { min-height: 44px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .rowform, .inline-form { display: block; }
  .grid2 { grid-template-columns: 1fr; }
  table.data { font-size: 14px; }
  .card { padding: 16px; }
}

/* ---------- signed-out pages ---------- */
body.bare { background: var(--paper); }
body.bare .wordmark { color: var(--ink); font-size: 40px; display: flex; margin: 8px 0 28px; }
body.bare .wordmark span { font-size: 14px; }
body.bare h1 { margin-bottom: 14px; font-size: 52px; }
body.bare .btn.primary { width: 100%; margin-bottom: 14px; }
body.bare .stack > * + * { margin-top: 8px; }

@media (max-width: 899px) {
  .wrap { padding-top: 14px; }
  .home > div + div { margin-top: 16px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}
@media print { #side, .bottombar, #top { display: none; } }

/* ---------- 8. fix round (6 Oct 2026, `fix` job; additive. Findings: reviews/review.md) ---------- */
/* MINOR-1: "Sign out" in the laptop sidebar was navy on navy (button.link, further down the file, beat `.sfoot button`) */
#side .sfoot button, #side .sfoot button.link { color: #fff; }
/* MINOR-6: the laptop trail starts at the folder, as in the previews ("Gigs > Offers & leads > Oslo"); a phone keeps "Home" */
@media (min-width: 900px) { .trail .crumb-home { display: none; } }
/* MINOR-2: a long unbroken word (a pasted link) in a title or line wraps instead of widening the page */
main#content :where(h1, h2, h3, h4, p, li, dd, dt, summary, blockquote, small, b, strong, .tx, .banner, .nx-text) { overflow-wrap: anywhere; }
/* FIX-1700: the Calendar's month title read "Octobe / r" on a 390 phone (the rule above let it break mid-word). It breaks only at the space */
main#content .monthnav h2 { overflow-wrap: normal; word-break: normal; min-width: 0; text-align: center; font-size: clamp(20px, 6vw, 30px); }
nav.tabs a, nav.toggle a { min-height: 44px; }                 /* MINOR-3: the My work view switch and the older filter tabs were 40px */
@media (max-width: 899px) {
  /* MAJOR-1 (and the 34-row Offers list): a status chip beside the text left the title 40-100px wide; it now sits under the text, as the
     dayrows already do. A short count (pillnum) stays on the right. kit.row adds `chipunder` when it is given a chip. */
  .row.chipunder { display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; column-gap: 14px; row-gap: 6px; align-items: center; }
  .row.chipunder > .ico { grid-column: 1; grid-row: 1; }
  .row.chipunder > .tx { grid-column: 2; grid-row: 1; }
  .row.chipunder > .chev { grid-column: 3; grid-row: 1; }
  .row.chipunder > .chip { grid-column: 2 / 4; grid-row: 2; justify-self: start; white-space: normal; line-height: 1.25; padding-top: 2px; padding-bottom: 2px; }
  .row.chipunder > .pillnum { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
  /* the older list rows (Decisions, Gigs): the badge goes under the title rather than squeezing it */
  li.row { flex-wrap: wrap; }
  li.row > a.grow { flex: 1 1 100%; }
  /* MINOR-3: a link that stands alone on its line is a 44px target (the "Back to ..." lines, "See all ...", list-item links, metric names) */
  a.tap, ul.plain li:not(.row) > a:first-child, ul.tiles .tile a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  /* any other plain link in the page (inside a sentence or a list): the padding makes its box, and so what a thumb can hit, 44px tall without moving any text */
  main a:not([class]) { padding-block: 14px; }
  #top .main .wordmark { padding-block: 7px; }        /* the Home page's top bar: the name is a link to Home, so it is 44px tall */
  ul.plain li:not(.row) > a:first-child, ul.tiles .tile a { padding-block: 0; }
  table.data.stack td { overflow-wrap: anywhere; }
  .dotsep { display: none; }                  /* two 44px links wrap onto their own lines on a phone, so the dot between them goes */
  input[type="checkbox"], input[type="radio"] { width: 26px; height: 26px; min-height: 26px; flex: none; }     /* the whole label row (48px) is the target */
  label.check { min-height: 48px; padding: 4px 0; }
  /* MINOR-4: the next step on a folder tile may run to three lines (the date now comes first, so the part that matters is never cut) */
  .tile .nx { -webkit-line-clamp: 3; }
  /* MINOR-5: a data table with `stack` shows each row as a small card (label: value) instead of squeezing five columns into 390px */
  table.data.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td { display: block; }
  table.data.stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.data.stack td { border: 0; padding: 2px 0; }
  table.data.stack td:empty { display: none; }
  table.data.stack td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted); }
}

/* notify (06/10 round) */
/* Inbox: under each notification, where it went. "In HQ" always; the email state in words, never a tick. */
.nrow .tx .where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.nrow .where .inhq { background: var(--card2); color: var(--ink); font-weight: 700; padding: 1px 8px; border-radius: 2px; }
.nrow .where .em { color: var(--muted); }
.nrow .where .em-sent { color: var(--ink); }
.nrow .where .em-failed { color: var(--ink); font-weight: 700; }
/* Settings: the plain status line about the band email */
.status-line { margin: 0 0 6px; }

/* workui (06/10 round) */
/* Home: a slim line instead of a big empty panel, the My work / Band work switch, This week and Up for grabs as work rows, a compact Next deadline strip */
.slimline { color: var(--muted); font-size: 15px; margin: 0; padding: 6px 2px; }
.homeswitch { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.homeswitch .btn .pillnum { background: #fff; color: var(--ink); margin-left: 4px; }
.card.nextline { display: flex; align-items: center; gap: 18px; background: var(--ink); color: #fff; padding: 14px 20px; margin: 4px 0 16px; min-height: 0; }
.card.nextline:focus-visible { outline-color: #fff; outline-offset: -5px; }
.nextline .nl-tx { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.nextline .eyebrow { color: var(--sidemuted); margin: 0; flex-basis: 100%; }
.nextline .nl-title { font-size: 19px; color: #fff; overflow-wrap: anywhere; }
.nextline .nl-when { color: var(--sidemuted); font-size: 15px; }
.nextline .countdown { margin: 0; gap: 6px; align-items: baseline; flex: none; }
.nextline .countdown b { font-size: 52px; line-height: .9; }
.nextline .countdown span { font-size: 15px; }
.nextline .dots { flex-basis: 100%; }
.nextline .dots i { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.nextline .dots i.f { background: #fff; }
.nextline .dots-text { color: #fff; }
.home2 { display: block; margin-bottom: 8px; }
.hsec { margin: 0 0 22px; }
.hsec .trow { align-items: baseline; margin-bottom: 8px; }
.hh { font: 700 24px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.hsec .cnt { background: var(--ink); color: #fff; border-radius: var(--radius); min-width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: 13px; padding: 0 7px; font-weight: 800; }
.hsec .cnt { font-size: 14px; }
.wmeta b { font-size: inherit; }
.hcol .need { margin-bottom: 22px; }
.hcol .slimline { margin-bottom: 14px; }
@media (max-width: 899px) { .wact form.inline { flex: 1 1 auto; } .wact form.inline .btn { width: 100%; } }
ul.updates { margin: 0; padding: 0; list-style: none; }
ul.updates li { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
ul.updates li:first-child { border-top: 0; }
/* a work-list row: title, next action, owner / date / project, blocker; the buttons beside it (under it on a phone) */
.wlist { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.wrow { display: flex; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
.wrow:first-child { border-top: 0; }
.wmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.wmain b { font-size: 16px; line-height: 1.3; }
.wmain:hover b { text-decoration: underline; }
.wnext { font-size: 15px; }
.wmeta { font-size: 14px; color: var(--muted); }
.wblock { font-size: 14px; font-weight: 700; color: var(--ink); }
.wact { display: flex; flex-wrap: wrap; gap: 6px; flex: none; justify-content: flex-end; max-width: 46%; }
.wact form.inline { margin: 0; }
/* the sidebar and phone bar: + Add on every page, My work / Band work under Home */
.addbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius); background: var(--card2); color: var(--ink); font-weight: 800; font-size: 15px; text-decoration: none; flex: none; }
.addbtn:hover { background: var(--card2h); }
.sl.add { background: #fff; color: var(--ink); font-weight: 800; min-height: 44px; margin: 0 0 20px; }
.sl.add:hover { background: var(--card2); color: var(--ink); }
.sl.ask { margin-bottom: 8px; }
.ss.on { color: var(--sidetext); font-weight: 800; background: var(--sideon); }
@media (min-width: 900px) { .crumb .addbtn { display: none; } }
@media (min-width: 1000px) {
  .home2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
}
/* the opportunity and task pages: compact header, next step, the work, then files and discussion */
.ophead h1 { margin: 0 0 4px; font-size: 40px; overflow-wrap: anywhere; }
.opmeta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; margin: 8px 0; }
.inlinedetails { display: inline-block; }
.inlinedetails[open] { display: block; width: 100%; }
.inlinedetails form { margin-top: 8px; }
.nx-why { margin: 6px 0 0; }
.ownerfold > summary, .askfold > summary { font-weight: 800; }
.mergednote { margin: 0; }
ul.dups li, ul.linked li { padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
ul.dups li:first-child, ul.linked li:first-child { border-top: 0; }
/* the merge preview: both records side by side, a pick for every field that differs */
.mheads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.mheads > div { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.mfield { border-top: 1px solid var(--line); padding: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.mfield .mlabel, .mfield .note { grid-column: 1 / -1; }
.mfield .mcell { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.mfield.conflict { background: var(--paper); padding: 10px 12px; border-left: 6px solid var(--ink); }
label.pick { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 6px 10px; background: var(--card2); border-radius: var(--radius); font-weight: 700; }
label.pick input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }
@media (max-width: 899px) {
  .homeswitch .btn { flex: 1; }
  .card.nextline { padding: 12px 16px; gap: 12px; }
  .nextline .countdown b { font-size: 44px; }
  .wrow { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
  .wact { max-width: none; justify-content: flex-start; }
  .wact .btn { flex: 1 1 auto; }
  .ophead h1 { font-size: 34px; }
  .mheads, .mfield { grid-template-columns: 1fr; }
  .hh { font-size: 22px; }
}

/* areasui (06/10 round) */
/* Songs, releases, content and the folder steps: status, then the next action, then the work, then files and discussion. Black and grey only (red is Ask Sienna's). */
.sheader { padding: 18px 22px; margin: 0 0 12px; }
.sheader h1 { margin: 0 0 6px; font-size: 40px; overflow-wrap: anywhere; }
.sheader .claim { margin: 6px 0; }
.sheader .stagebar { margin: 4px 0 6px; }
.facts2 { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; font-size: 15px; align-items: flex-start; }
.fact { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.fact .k, .oline .k, dl.roles dt, .mile .k { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.oline { display: inline-flex; gap: 6px; align-items: baseline; }
.oact { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oact form.inline, .mact form.inline, .wkact form.inline, .stepcard form.inline, .lbtn form.inline, .prow form.inline, .relrow form.inline { margin: 0; }
details.choose { display: inline-block; }
details.choose[open] { display: block; width: 100%; }
details.choose > summary { display: inline-flex; padding: 0 12px; background: var(--card2); border-radius: var(--radius); font-weight: 700; }
.ohist { flex-basis: 100%; }
.stepcard { margin: 0 0 12px; }
.stepcard .btnrow { margin-top: 8px; align-items: center; }
.nx-text .why { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.hub > .card { margin: 0; }
.hubcard h2 { font: 800 14px/1.2 var(--body); margin: 0 0 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hubcard.wide { grid-column: 1 / -1; }
.hubcard p { margin: 4px 0; }
.big2 { font: 700 30px/1.05 var(--display); margin: 0 0 6px; text-transform: uppercase; }
.none { color: var(--muted); margin: 0; }
h2 .count { margin-left: 6px; }
ul.prows { margin: 0; padding: 0; list-style: none; }
.prow { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.prow:first-child { border-top: 0; }
ul.plrows { margin: 0; padding: 0; list-style: none; }
.plrow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.plrow:first-child { border-top: 0; }
.plrow > a { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; color: var(--ink); text-decoration: none; }
.plrow > a:hover b { text-decoration: underline; }
.plrow .blk { font-weight: 700; font-size: 14px; }
.relrow { padding: 8px 0; border-top: 1px solid var(--line); }
.relrow:first-of-type { border-top: 0; }
.provline { margin: 4px 0; font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.provnote { font-size: 14px; color: var(--muted); }
ul.fbl { margin: 0; padding: 0; list-style: none; }
ul.fbl li { padding: 4px 0; overflow-wrap: anywhere; }
.nobody { text-decoration: underline dotted; font-weight: 800; }
.warnline { font-weight: 700; padding-left: 10px; border-left: 4px solid var(--ink); margin: 6px 0; }
/* linked records, both ways */
section.linked h2 { margin: 0 0 8px; }
ul.lrows { margin: 0; padding: 0; list-style: none; }
.lrow { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.lrow:first-child { border-top: 0; }
.lrow > a { display: flex; gap: 12px; align-items: center; flex: 1 1 260px; min-width: 0; color: var(--ink); text-decoration: none; }
.lrow > a:hover b { text-decoration: underline; }
.lrow .ib { flex: none; width: 36px; height: 36px; background: var(--card2); border-radius: var(--radius); display: grid; place-items: center; }
.lrow .tx { display: flex; flex-direction: column; min-width: 0; }
.lrow .provline { flex-basis: 100%; margin: 0 0 0 48px; }
.lbtn { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
/* the songs on a release */
ul.srows { margin: 0; padding: 0; list-style: none; }
.srow { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.srow:first-child { border-top: 0; }
.srow > a { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; color: var(--ink); text-decoration: none; }
.srow > a:hover b { text-decoration: underline; }
.srow .provline { flex-basis: 100%; margin: 0; }
/* a release's milestones as a checklist: the tick is only the look, the state is always in words too */
ul.checklist { margin: 0; padding: 0; list-style: none; }
.mile { padding: 14px 0; border-top: 1px solid var(--line); }
.mile:first-child { border-top: 0; }
.mhead { display: flex; gap: 12px; align-items: flex-start; }
.mhead .grow { min-width: 0; overflow-wrap: anywhere; }
.tick { flex: none; width: 24px; height: 24px; margin-top: 2px; border: 2px solid var(--ink); border-radius: 3px; background: var(--card); display: grid; place-items: center; color: #fff; }
.tick.done { background: var(--ink); }
.mile .wait, .mile .warnline, .mile ul.mlinks { margin: 6px 0 0 36px; }
ul.mlinks { padding-left: 0; list-style: none; }
ul.mlinks li { font-size: 14px; padding: 2px 0; }
.mact { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 36px; align-items: center; }
.startblock { margin: 0 0 12px; }
.startblock h2 { margin: 0 0 4px; }
/* calendar: the six kinds of date */
.dt.opens { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); } .dt.opens span { color: var(--ink); }
.dt.decision { background: var(--card2); box-shadow: inset 5px 0 0 var(--ink); color: var(--ink); } .dt.decision span { color: var(--ink); }
.dt.target { background: var(--card2); color: var(--ink); } .dt.target span { color: var(--muted); }
.wkact details.choose, .oact details.choose { margin: 0; }
.chip.ev-opens { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted); border: 0; font-weight: 600; }
.chip.ev-decision { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); border: 0; font-weight: 700; }
.chip.ev-target { background: var(--card2); color: var(--ink); border: 0; font-weight: 600; }
.chip.cont { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -4px; }
.legend .chip.dl, .legend .chip.plain, .legend .chip.idea { display: inline-block; margin-bottom: 4px; }
.kinds { margin: 6px 0 0; } .kinds ul { margin: 6px 0 0; padding-left: 18px; } .kinds li { padding: 2px 0; }
.glance { margin: 8px 0; }
.integration { margin: 18px 0 0; }
.chiprow .small { margin-left: 6px; }
/* content: this week */
.weekcard h2 { margin: 0 0 4px; }
ul.weeklist { margin: 8px 0 0; padding: 0; list-style: none; }
.wkitem { padding: 14px 0; border-top: 1px solid var(--line); }
.wkitem:first-child { border-top: 0; }
.wkitem.late { box-shadow: inset 4px 0 0 var(--ink); padding-left: 12px; }
.whead { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.whead a { color: var(--ink); font-size: 18px; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.whead a:hover b { text-decoration: underline; }
dl.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 10px 0; }
.rl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rl dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.rl dt { margin: 0; }
.wkitem { padding: 16px 0; }
.helper { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wkact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
@media (max-width: 899px) {
  .sheader { padding: 14px 16px; }
  .sheader h1 { font-size: 34px; }
  .facts2 { flex-direction: column; gap: 10px; }
  .hub { grid-template-columns: 1fr; }
  .fact .k, .oline .k, dl.roles dt, .mile .k, .hubcard h2 { font-size: 14px; }
  dl.roles { grid-template-columns: 1fr 1fr; }
  .mile .wait, .mile .warnline, .mile ul.mlinks, .mact { margin-left: 0; }
  .lrow .provline { margin-left: 0; }
  .oact .btn, .mact .btn, .wkact .btn, .stepcard .btn, .lbtn .btn, .prow .btn, .relrow .btn, .rl .btn, .startblock .btn { min-height: 44px; }
  .oact, .mact, .wkact, .lbtn { width: 100%; }
  .stepcard .btnrow .btn, .mact .btn, .wkact .btn { flex: 1 1 auto; }
  details.choose > summary { min-height: 44px; }
  .big2 { font-size: 26px; }
  .rl dd .btn { margin-top: 2px; }
}
/* end areasui */

/* core (usability round) */
/* Controls: a link opens information (ink text or a chevron row); a button changes something (a block with an edge or a fill). One black primary per screen (the Next step's);
   the quiet button beside it is outlined. A fold is text with a triangle and is never drawn as a button. Red stays Ask Sienna's. */
.btn.outline, button.btn.outline, a.btn.outline { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.outline:hover { background: var(--card2); }
.btn.outline.destructive { box-shadow: inset 0 0 0 2px var(--ink); border-left: 8px solid var(--ink); }
.btn.outline.destructive::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; }
summary.fold-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); list-style: none; padding: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
summary.fold-sum::-webkit-details-marker { display: none; }
.fold-tri { width: 0; height: 0; border-left: 7px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; flex: none; }
details[open] > summary .fold-tri { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
.fold { margin: 4px 0; }
.fold-body { padding: 4px 0 10px; }
.inline-fold { display: inline-block; vertical-align: middle; margin: 0 0 0 6px; }
.inline-fold[open] { display: block; width: 100%; }
[id^="row-"], #owner, #discussion, #files, #linked, #history { scroll-margin-top: 72px; }

/* The notice after an action: what changed, a link to it, Undo. Black left edge = done; dashed = waiting on someone; a failure is a bold box with a warning mark. */
.notice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--card); border-left: 6px solid var(--ink); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; font-weight: 600; position: sticky; top: 8px; z-index: 30; box-shadow: 0 2px 10px rgba(0,0,0,.18); }   /* fix (usability round, R-03): the notice stays on screen after an anchored landing */
.notice-bar .nt { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.notice-bar .na { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notice-bar .n-link { font-weight: 800; min-height: 44px; display: inline-flex; align-items: center; }
.notice-bar form.inline { margin: 0; }
.notice-bar.wait { border-left-style: dashed; }
.notice-bar.fail { box-shadow: inset 0 0 0 2px var(--ink); border-left-width: 10px; font-weight: 800; }
.notice-bar.fail .nt::before { content: "Not done: "; }
.just { display: inline-block; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; padding: 0 7px; border-radius: var(--radius); margin-left: 8px; }
:target.lrow2, :target.wrow { box-shadow: inset 4px 0 0 var(--ink); background: var(--cardh); }
.changebar { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; display: flex; gap: 12px; align-items: center; font-weight: 700; }
.changebar button { background: #fff; color: var(--ink); border: 0; border-radius: var(--radius); min-height: 44px; padding: 0 14px; font-weight: 800; }

/* Form errors: a summary on top and a sentence under the field; the typing is kept. */
.formerr { background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); border-left: 10px solid var(--ink); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 14px; }
.formerr ul { margin: 6px 0; padding-left: 18px; }
.field-error { color: var(--ink); font-weight: 800; margin: 4px 0 0; }
.field-error::before { content: "! "; font-weight: 800; }
.field.has-error input, .field.has-error select, .field.has-error textarea { box-shadow: 0 0 0 3px var(--ink); }

/* The owner line, the same on every page. */
.ownerline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ownerline .ol-label { color: var(--muted); font-weight: 700; }
.ownerline form.inline { margin: 0; }
.ownerline .ol-wait, .ownerline .ol-ask { font-size: 15px; }
.rhead .eyebrow { margin-bottom: 2px; }
.rhead h1 { margin: 0 0 8px; font-size: 40px; overflow-wrap: anywhere; }
.rh-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; }
.rh-when { font-weight: 700; }
.rh-owner { margin-top: 8px; }
.nx-more { margin: 8px 0 0; font-size: 15px; }
.nx-text { font-size: 18px; font-weight: 700; }

/* An answer: Free · Maybe · Not free as one segmented group; yours is filled black with a tick. */
.seg-group { display: inline-flex; flex-wrap: nowrap; border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; max-width: 100%; }
.seg-btn { min-height: 44px; padding: 0 14px; background: var(--card); border: 0; border-left: 2px solid var(--ink); font-weight: 800; font-size: 15px; color: var(--ink); }
.seg-btn:first-child { border-left: 0; }
.seg-btn.on { background: var(--ink); color: #fff; }
.seg-btn:disabled { opacity: .55; }
.answerbox { display: flex; flex-wrap: wrap; gap: 6px; }
form.answerbox { display: block; }

/* Rows: one link for the whole text block; a button beside it only where answering is the point. */
.lrow2 { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); background: var(--card); padding: 0 16px 0 0; }
.lrow2:first-child { border-top: 0; }
.lr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0 8px 18px; color: var(--ink); text-decoration: none; }
.lr-main .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.lr-main small { color: var(--muted); font-size: 14px; }
.lr-main:hover b { text-decoration: underline; }
.lr-act { flex: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 46%; }
.lr-act form.inline { margin: 0; }
.lrow small { display: block; }
.lgroup + .lgroup { margin-top: 12px; }
.lgroup .row { border-top: 1px solid var(--line); }
.linked h2, #history h2, #discussion h2 { font-size: 22px; }
.emptynote { background: var(--card); border-radius: var(--radius); padding: 16px 18px; color: var(--muted); }
.emptynote p { margin: 0 0 8px; }
ul.histlist { margin: 0; padding: 0; list-style: none; }
ul.histlist li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: 15px; }
ul.histlist li:first-child { border-top: 0; }
.h-at { color: var(--muted); font-size: 14px; }
ul.replies { margin: 4px 0 6px 18px; padding-left: 12px; border-left: 3px solid var(--line); list-style: none; }
.comment.reply { font-size: 15px; }
li.thread { padding: 8px 0; border-top: 1px solid var(--line); }
li.thread:first-child { border-top: 0; }

/* The sidebar: tools on top (Ask Sienna, Add, Jump to…), the seven places, the member's name at the foot. */
#side .tools { margin-bottom: 4px; }
#side .jump { margin: 0 0 14px; }
#side .jump input { width: 100%; min-height: 40px; border: 0; border-radius: var(--radius); background: var(--sideon); color: #fff; padding: 0 12px; font-size: 15px; }
#side .jump input::placeholder { color: var(--sidemuted); opacity: 1; }
.sfoot .youlink { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; min-height: 44px; font-size: 15px; }
.sfoot .youlink[aria-current="page"] { text-decoration: underline; }
.menulist { background: var(--card); border-radius: var(--radius); overflow: hidden; margin: 0 0 16px; }
.menulist .mh { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-height: 56px; font-weight: 800; font-size: 17px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); }
.menulist .mh:first-child { border-top: 0; }
.menulist .ms { display: flex; align-items: center; min-height: 44px; padding: 0 18px 0 54px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); font-size: 15px; }
.menulist .mh .chev, .menulist .ms .chev { margin-left: auto; }
.jumpbox { display: flex; gap: 8px; margin: 0 0 14px; }
.jumpbox input { flex: 1; min-height: 48px; }

/* Faces wrap instead of running off a 390 screen (audit U-38): seven members must fit. */
.people { flex-wrap: wrap; justify-content: flex-start; gap: 8px 10px; }
.people .pp { flex: 0 0 auto; min-width: 56px; }
.menuhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.askstate { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.askstate b { color: var(--ink); }
.myw-sec { margin: 0 0 22px; }
.group-line { margin: 0; padding: 10px 18px; font-weight: 700; background: var(--card); border-top: 1px solid var(--line); }
.newdivider { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.newdivider::before, .newdivider::after { content: ""; flex: 1; height: 2px; background: var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius); background: var(--card2); text-decoration: none; font-weight: 700; font-size: 15px; }
.filters a[aria-current="true"] { background: var(--ink); color: #fff; }
@media (max-width: 899px) {
  .lr-act { max-width: none; flex-basis: 100%; justify-content: flex-start; padding: 0 0 10px 18px; }
  .lrow2 { flex-wrap: wrap; }
  .lr-main { flex-basis: 100%; }
  .notice-bar .nt { flex-basis: 100%; }
  .rhead h1 { font-size: 34px; }
  .seg-btn { padding: 0 10px; font-size: 15px; }
}
.gigpage details > summary.fold-sum, details.card.white > summary.fold-sum, details > summary.fold-sum { justify-content: flex-start; }
.gigpage details > summary.fold-sum::after, details.card.white > summary.fold-sum::after, details > summary.fold-sum::after { content: none; padding: 0; }
.wlead { display: block; font-size: 14px; color: var(--muted); }
.newdivider { font-size: 14px; }
.group-line { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; word-break: break-word; color: var(--ink); text-decoration: none; }
a.group-line:hover { text-decoration: underline; }
.newlines li { overflow-wrap: anywhere; }
/* end core */

/* areasA (usability round) */
.statusline { margin: 6px 2px 0; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.chklist { margin: 10px 0 0; padding: 0; list-style: none; }
.chklist li a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; min-height: 44px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.chklist li a:hover b { text-decoration: underline; }
.chklist .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; flex: none; background: var(--card); }
.chklist .tick.done { background: var(--ink); color: #fff; }
.chklist small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.kindpick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.kindpick .kp-label { font-weight: 800; width: 100%; }
.kindpick-a { padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 22px; font-weight: 700; color: var(--ink); text-decoration: none; font-size: 15px; }
.kindpick-a.on { background: var(--ink); color: #fff; }
.songpick { border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px 8px; margin: 0 0 12px; }
.songpick legend { font-weight: 800; padding: 0 6px; }
.songpick .check { min-height: 44px; }
.votewarn { margin: 0 0 8px; }
.sysnote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--line); overflow-wrap: anywhere; }
.stepwrap .steps { flex-wrap: wrap; row-gap: 14px; }
@media (max-width: 700px) {
  .stepwrap .step { flex: 0 0 25%; }
  .stepwrap .step::before { display: none; }
}
/* end areasA */

/* fix (usability round): review R-18 and the fresh tester */
.nowrap { white-space: nowrap; }
.trail a { display: block; line-height: 44px; min-width: 44px; text-align: center; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.trail a:first-child { flex: none; }
.trail b { min-width: 0; flex: 1 1 auto; }