/* ---------------------------------------------------------------------------
 * DayGrid, as pages.
 *
 * Loaded alongside styles.css, which still dresses the planner and the older
 * screens. This is the shell everything is moving onto: an app bar, a client
 * sidebar, and a page made of cards.
 *
 * Two rules hold this together. Groups are told apart by shape, not by colour —
 * a card, an edge, a real heading — so that every colour on the screen is free
 * to mean something. And colour only ever means something: settled, needs you,
 * missed, waiting. Nothing is tinted to look nice.
 * ------------------------------------------------------------------------- */
:root{
  --bg:#f6f7f9; --surface:#fff; --surface-2:#f0f2f5; --border:#dfe3e8;
  --line:#eaedf1;                       /* quieter rule, inside a card */
  --text:#16191d; --muted:#6b7280; --accent:#2563eb;
  --good:#567241; --good-bg:#e9f2e2;    /* settled, met, done */
  --warn:#866b2b; --warn-bg:#fef4dc;    /* waiting on somebody */
  --bad:#9f542f;  --bad-bg:#fee6db;     /* missed, overdue, blocked */
  --cool:#226c8a; --cool-bg:#d4e5ec;    /* on the calendar, in hand */
  --danger:#b91c1c;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font)}
a{color:var(--accent);text-decoration:none}

/* ---- app bar: five things, not eight ---- */
.appbar{display:flex;align-items:center;gap:20px;padding:0 20px;height:50px;
  background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
/*
 * `.wordmark`, not `.mark`. It was `.mark`, and every "2 late" and overdue date on
 * Clients was set in the logo's 15.5px bold because they share a sheet with the app bar.
 */
.wordmark{font-weight:700;font-size:15.5px;color:var(--text)}
.tabs{display:flex;gap:2px}
.tabs a{padding:6px 12px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:550}
.tabs a[aria-current]{background:var(--surface-2);color:var(--text);font-weight:650}
/* A page with no client sidebar — the list itself is the way in. */
.shell.onecol{grid-template-columns:minmax(0,1fr)}
/*
 * The clients list beside what is owed.
 *
 * Two columns rather than one narrow one: the list answers "who" and the tasks answer
 * "what now", and they are read together. minmax(0,…) on both, or a long task title
 * pushes the whole page sideways — see the note by .shell.
 */
.listpage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:16px;align-items:start}
@media (max-width:1000px){ .listpage{grid-template-columns:minmax(0,1fr)} }
/*
 * The right column's own stack: what to prepare, then what is late.
 * The gap does the spacing, so the cards' own bottom margin would double it.
 */
.worklist{display:flex;flex-direction:column;gap:16px;min-width:0}
.worklist > .card{margin-bottom:0}

/* Setup: one item that opens the five screens you set up once and leave alone. */
.tabs .setup{position:relative}
.tabs .setup > summary{list-style:none;cursor:pointer;padding:6px 12px;border-radius:8px;
  color:var(--muted);font-size:13px;font-weight:550;display:flex;align-items:center;gap:6px}
.tabs .setup > summary::-webkit-details-marker{display:none}
.tabs .setup > summary::after{content:'▾';font-size:10px;opacity:.7}
.tabs .setup > summary:hover{color:var(--text)}
.tabs .setup > summary[aria-current]{background:var(--surface-2);color:var(--text);font-weight:650}
.tabs .setup .menu{position:absolute;top:100%;left:0;margin-top:5px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;padding:5px;min-width:158px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:20;display:flex;flex-direction:column}
.tabs .setup .menu a{padding:7px 11px;border-radius:7px;font-size:13px;color:var(--text);
  display:flex;align-items:center;gap:8px}
.tabs .setup .menu a:hover{background:var(--surface-2)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:9px;background:var(--warn-bg);color:var(--warn);
  font-size:10.5px;font-weight:700}
.spacer{flex:1}
.ghost{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:4px 10px;border-radius:8px}

/* ---- shell ---- */
/*
 * minmax(0,…), not 1fr, on every track that holds a page.
 *
 * A grid track sized 1fr will not shrink below the widest thing inside it, so one
 * un-wrappable row — a date, a table, a long address — quietly pushes the whole page
 * wider than the phone holding it, and everything else gets cut off at the right edge
 * rather than the row that caused it. minmax(0,1fr) lets the track shrink and hands the
 * overflow back to whoever can scroll it.
 */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start}
.main{min-width:0}
@media (max-width:1000px){ .shell{grid-template-columns:minmax(0,1fr)} .side{display:none} }
.side{position:sticky;top:50px;height:calc(100vh - 50px);overflow:auto;
  border-right:1px solid var(--border);background:var(--surface);padding:12px 10px}
.side input{width:100%;font:inherit;font-size:12.5px;padding:6px 9px;border-radius:8px;
  border:1px solid var(--border);background:var(--bg);margin-bottom:8px}
.side .grp{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:700;margin:11px 0 4px 4px}
.side a.c{display:block;padding:5px 8px;border-radius:7px;color:var(--text);font-size:12.5px}
.side a.c:hover{background:var(--surface-2)}
.side a.c[aria-current]{background:var(--surface-2);font-weight:650}
.side a.c small{display:block;color:var(--muted);font-size:10.5px;font-weight:400}
.main{padding:0 26px 70px;max-width:1240px}
@media (max-width:640px){ .main{padding:0 14px 60px} }

.crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:15px 0 0}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--accent)}

/* ---- page head ---- */
.head{padding:8px 0 15px;border-bottom:1px solid var(--border);margin-bottom:18px}
/*
 * "Northwind Traders · Quarterly Planning" — whose day and what kind, both said
 * outright. It is a long heading by design, so it is laid out to wrap kindly:
 * the two halves break onto separate lines before either one breaks in the
 * middle, and the status chip rides with the second half instead of being
 * pushed onto a line of its own.
 */
.head h1{font-size:24px;font-weight:680;letter-spacing:-.02em;margin:0 0 2px;
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:2px}
.head h1 > span{display:inline-flex;align-items:baseline;gap:9px}
.head h1 .sep{color:var(--muted);font-weight:400}
.head h1 .chip{align-self:center;white-space:nowrap}
/* The venue's chips ride with the stage: a flight, and the town the day is in. */
.head h1 .chipset{display:inline-flex;gap:6px;align-self:center}
.head h1 .chipset:empty{display:none}
/*
 * On a narrow screen the two halves stack, and a separator that has fallen to the front
 * of the second line is separating nothing — it just reads as a stray mark. The row gap
 * does the job the dot was doing.
 */
@media (max-width:620px){ .head h1{font-size:21px} .head h1 .sep{display:none} }
.head .sub{color:var(--muted);font-size:13.5px}
.facts{display:flex;flex-wrap:wrap;gap:22px;margin-top:13px}
.facts .k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:650;margin-bottom:1px}
.facts .v{font-weight:620;font-size:14.5px}
/* "as charged" beside a fee that is not what the client's rates imply. */
.facts .v .n{font-weight:400;font-size:11.5px;color:var(--muted)}
/* A figure that can be changed: the answer as a figure, and "change" beside its label. */
.facts .choicefact .chg{font-size:10px;text-transform:none;letter-spacing:0;margin-left:5px;font-weight:500}
.facts .choicefact select{font:inherit;font-size:13.5px;padding:2px 4px;border-radius:6px;
  border:1px solid var(--accent);background:var(--surface);color:var(--text)}
/* Something in the facts that does not agree with itself — said in words, marked in colour. */
.facts .flagfact .k,.facts .flagfact .v{color:var(--bad)}
.facts .flagfact .v{font-weight:500;font-size:13px}

/* ---- chips: every one of these means something ---- */
.chip{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 8px;border-radius:20px;vertical-align:2px}
.chip.good{background:var(--good-bg);color:var(--good)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.cool{background:var(--cool-bg);color:var(--cool)}
.chip.flat{background:var(--surface-2);color:var(--muted)}

/* ---- stage bar ---- */
.stages{display:flex;gap:5px;margin-top:11px}
.stages button{font:inherit;font-size:12px;padding:5px 13px;border-radius:20px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.stages button.on{border-color:var(--good);background:var(--good-bg);color:var(--good);font-weight:650}

/* ---- prep / wrap ---- */
.phase{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:10px;
  margin-bottom:18px;width:fit-content}
.phase button{font:inherit;font-size:13px;font-weight:600;border:0;background:none;
  color:var(--muted);border-radius:8px;cursor:pointer;padding:7px 20px}
/* Tabs say they are selected; a control that only switches how much is shown says it is pressed. */
.phase button[aria-selected=true],.phase button[aria-pressed=true]{background:var(--surface);
  color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---- a group is a card: shape, not colour ---- */
/*
 * Two cards side by side — named .cards, not .grid.
 *
 * `.grid` was already taken twice over: it is the planner's seven-column month and it is
 * the field grid inside the venue editor. Adding a third meaning here quietly turned the
 * calendar into two columns, which is not a calendar. A stylesheet this shared has to
 * take names nobody else is using.
 */
.cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1080px){ .cards{grid-template-columns:minmax(0,1fr)} }
.card{background:var(--surface);border:1px solid var(--border);border-radius:13px;
  padding:15px 17px 16px;margin-bottom:16px}
.card.wide{grid-column:1 / -1}
.card > h2{font-size:16px;font-weight:660;letter-spacing:-.01em;margin:0 0 10px;
  display:flex;align-items:baseline;gap:9px}
.card > h2 .st{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--muted)}
.card > p.note{color:var(--muted);font-size:12px;margin:-6px 0 11px;line-height:1.45}

.part{border-top:1px solid var(--line);padding-top:11px;margin-top:12px}
.part:first-of-type{border-top:0;padding-top:0;margin-top:0}
.part h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin:0 0 7px;display:flex;align-items:center;gap:8px}
.part h3 .st{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;font-size:11px}

/* ---- rows ---- */
.r{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.r:first-of-type{border-top:0}
.r .who{margin-left:auto;color:var(--muted);font-size:11px}
.r .due{margin-left:auto;color:var(--muted);font-size:11px}
.r .due.late{color:var(--bad);font-weight:650}

.person{display:grid;grid-template-columns:1fr 46px auto;gap:9px;align-items:center;
  padding:7px 0;border-top:1px solid var(--line)}
.person:first-of-type{border-top:0}
.person .nm{font-weight:600;font-size:13px}
.person .nm small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.said{grid-column:1/-1;width:100%;margin-top:4px;font:inherit;font-size:12.5px;padding:6px 8px;
  border-radius:7px;border:1px solid var(--border);background:var(--bg)}
.yn{display:flex;gap:3px}
.yn button{font:inherit;font-size:11px;padding:3px 9px;border-radius:6px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer}
.yn button.on{background:var(--good-bg);color:var(--good);border-color:var(--good);font-weight:650}
.yn button.no.on{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}

.mail{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-top:1px solid var(--line)}
.mail:first-of-type{border-top:0}
.mail .nm{font-weight:600;font-size:13px}
.mail .nm small{display:block;color:var(--muted);font-weight:400;font-size:11px}

.btn{font:inherit;font-size:12px;padding:5px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.sm{font-size:11.5px;padding:3px 9px}
.row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.tag{font-size:11.5px;padding:2px 9px;border-radius:20px;background:var(--surface-2);color:var(--text)}

.f{display:flex;flex-direction:column;gap:2px}
.f label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650}
.f input, .f select{font:inherit;font-size:13px;padding:6px 8px;border-radius:7px;
  border:1px solid var(--border);background:var(--surface)}
/*
 * One height for every control. A native date or time field is a few pixels taller than
 * a select, and a row of them read as ragged until the height was fixed rather than
 * left to each control's own idea of it.
 */
.f input, .f select{box-sizing:border-box;height:34px;width:100%;min-width:0;color:var(--text)}
.f label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
/*
 * The session's details are laid out on a fixed six-column grid, not auto-fit: the
 * fields are always the same eight, and a grid that re-flows with the window put Ends
 * under Type on one width and Stage on a row of its own on another.
 */
.fields.details{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 12px}
.fields.details .span2{grid-column:span 2}
@media (max-width:720px){
  .fields.details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields.details .span2{grid-column:span 2}
}

textarea.notes{width:100%;min-height:96px;font:inherit;font-size:12.5px;padding:9px 11px;
  border-radius:8px;border:1px solid var(--border);background:var(--bg);resize:vertical}

table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:650;padding:0 8px 5px 0}
table.tbl td{padding:6px 8px 6px 0;border-top:1px solid var(--line)}
table.tbl tr.click:hover td{background:var(--surface-2);cursor:pointer}
/*
 * A list of sessions where each row is one <a>, not a table row with a link over it.
 *
 * Stretching an anchor across a table row needs `position:relative` on the <tr> to hold
 * the overlay in, and an engine that ignores that — table parts are a long-standing
 * ragged edge — resolves `inset:0` against the whole document instead. The overlay then
 * covers the page and every click anywhere opens the last session. A row that simply is
 * an anchor needs no containing block and cannot get this wrong.
 */
.sesslist{display:grid}
.sesslist .h, .sesslist .sess{display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,.9fr) 84px 92px 66px;
  gap:10px;align-items:center;padding:7px 0}
.sesslist .h{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:650;padding-bottom:4px}
.sesslist .sess{border-top:1px solid var(--line);color:inherit;text-decoration:none;font-size:12.5px}
.sesslist .sess:hover{background:var(--surface-2)}
@media (max-width:640px){
  .sesslist{overflow-x:auto}
  .sesslist .h, .sesslist .sess{min-width:560px}
}
/* `table.tbl th` sets text-align:left and is the more specific selector, so a number
   column's heading needs its own rule or it sits at the left of its own figures. */
.num-col, table.tbl th.num-col{text-align:right}
/*
 * On a phone a table scrolls inside its own card rather than widening the page. A
 * table has a floor — its columns only compress so far — and without this the whole
 * screen is dragged sideways by the one row nobody was reading.
 */
@media (max-width:640px){
  table.tbl{display:block;overflow-x:auto}
}

/* ---- the bar at the bottom: nothing to press to keep your work ---- */
.donebar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);
  padding:10px 26px;display:flex;gap:9px;align-items:center;margin:22px -26px 0}
.donebar .saved{color:var(--good);font-size:11.5px;font-weight:600}
.donebar .tools{color:var(--muted);font-size:11.5px;margin-left:auto}
/*
 * The bar bleeds to the page's edges by negating .main's padding, so the two have to
 * agree — and on a phone the buttons wrap rather than run off the side.
 */
@media (max-width:640px){
  .donebar{padding:10px 14px;margin:22px -14px 0;flex-wrap:wrap}
  .donebar .tools{margin-left:0;flex-basis:100%}
}


/* ---------------------------------------------------------------------------
 * Things the session page renders with markup written for the old sheet.
 *
 * The scripts were left alone on purpose — the move to a page was meant to be a
 * change of shell, not a rewrite of what fills it — so the classes they emit are
 * dressed here instead. Only inside a card, so the older screens are untouched.
 * ------------------------------------------------------------------------- */

/* The room: one person a line, with what they said under it. */
.card .room{display:block}
.card .room .p{padding:8px 0;border-top:1px solid var(--line)}
.card .room .p:first-child{border-top:0}
.card .room .p .top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.card .room .nm{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;flex:1;min-width:150px}
.card .room .nm.out{color:var(--muted);font-weight:400}
.card .room .seatmark{font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);background:var(--surface-2);padding:1px 6px;border-radius:3px;font-weight:700}
.card .room .uninvited{font-size:10.5px;color:var(--muted)}
.card .room .score, .card .room .met{display:flex;align-items:center;gap:6px}
.card .room .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700}
.card .room .rating{width:52px;font:inherit;font-size:12.5px;padding:4px 6px;
  border-radius:6px;border:1px solid var(--border);text-align:center}
.card .room .said{width:100%;margin-top:5px;font:inherit;font-size:12.5px;padding:6px 9px;
  border-radius:7px;border:1px solid var(--border);background:var(--bg);resize:vertical}
.card .room .none{color:var(--muted);font-size:12.5px}

/* Rocks, numbers, tasks, emails and files, at card scale. */
.card .rocklist .grp{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;margin:9px 0 4px}
.card .rocklist .grp:first-child{margin-top:0}
.card .rocklist .r{display:flex;align-items:center;gap:9px;padding:5px 0;
  border-top:1px solid var(--line);font-size:12.5px}
.card .rocklist .mark{margin-left:auto;display:flex;gap:3px}
.card .rocklist .mark button{font:inherit;font-size:10.5px;padding:2px 8px;border-radius:6px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer}
.card .rocklist .mark button.on{background:var(--good-bg);color:var(--good);
  border-color:var(--good);font-weight:650}
.card .rocklist .mark button[data-mark="not_done"].on{background:var(--bad-bg);
  color:var(--bad);border-color:var(--bad)}
.card .rocktag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  background:var(--surface-2);color:var(--muted);padding:1px 6px;border-radius:3px}

/*
 * A measurable's row, and a rock typed in by hand, are dressed in client.css, not here.
 *
 * They were dressed here once, as `.nums` and `.newrock`, and the day the numbers list
 * became `.numlist` the rule for `.nums` moved to client.css and this copy was meant to
 * go with it — but `.newrock` was missed, so `.card .newrock` sat here for two weeks,
 * outranking client.css's real one on specificity alone (two classes beat one, whichever
 * loaded last) and quietly flattening its grid to a plain flex row. Nothing broke loudly
 * enough to notice; it was found building a second "add a rock" row that would have
 * inherited it. `.n` taught the reason a generic name in this sheet is never safe to
 * leave behind: it was a bare rule that turned every small figure elsewhere — Trends'
 * "9.1 → 8.4" among them — into a five-column grid with a 300px floor.
 */
.card .none{color:var(--muted);font-size:12.5px}

.card .toolbox{display:flex;flex-wrap:wrap;gap:6px}
.card .toolbox label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  padding:4px 9px;border-radius:7px;border:1px solid var(--border);background:var(--surface)}
.card .chips{display:flex;flex-wrap:wrap;gap:6px}
.card .chips .c{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  padding:3px 9px;border-radius:20px;background:var(--surface-2)}
.card .chips .c button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px}
.card .addtool input{width:100%;margin-top:8px;font:inherit;font-size:12.5px;padding:6px 9px;
  border-radius:7px;border:1px solid var(--border)}

/*
 * The session's files are laid out in client.css, which is the only place that draws
 * them. Two blocks of thumbnail sizing used to live here as well — a fixed 88x66 box and
 * a 96px-wide card — from when they were shown as pictures. Neither was overridden by
 * the list that replaced them, because they set width and height and the list sets
 * neither, so the names came out stacked on top of each other inside 96px boxes.
 */
.card .drop{display:block;margin-top:9px;padding:12px;border:1px dashed var(--border);
  border-radius:9px;text-align:center;color:var(--muted);font-size:12px;cursor:pointer}
.card .drop.over{border-color:var(--accent);background:var(--surface-2)}

.card .calbox .days{font-size:12.5px;margin:0 0 6px}
.card .calbox .acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.card .calbox .warn{background:var(--warn-bg);color:var(--warn);border-radius:7px;
  padding:7px 10px;font-size:12px;margin:6px 0}
.card .calbox .stop{background:var(--bad-bg);color:var(--bad);border-radius:7px;
  padding:7px 10px;font-size:12px;margin:6px 0}
.card .calbox .sent{color:var(--good);font-weight:650}
.card .calbox pre{white-space:pre-wrap;font:inherit;font-size:12px;background:var(--bg);
  padding:9px 11px;border-radius:8px;margin:7px 0}


/* A card that is a warning, not a group. Rare, and the only one with a coloured edge. */
.card.flagcard{border-color:var(--bad)}
.card.flagcard h2{color:var(--bad)}
/* The record itself: true, but not what you came to read. */
.card.quiet{background:transparent;border-style:dashed}
/*
 * The client's own record. Two answers side by side under their labels, then the things
 * that can be done to the record on a line of their own, delete pushed to the far end so
 * it is never the next word after something harmless.
 */
.clientrec .recfields{display:grid;grid-template-columns:minmax(12rem,22rem) auto;gap:10px 22px;
  justify-content:start;align-items:end}
.clientrec .recacts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:11px;
  border-top:1px solid var(--border)}
.clientrec .recacts .linky{font-size:12.5px}
.clientrec .recacts .danger{margin-left:auto}
@media (max-width:34rem){.clientrec .recfields{grid-template-columns:1fr}}
.card .seatadd, .card .newperson{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;align-items:center}
.card .seatadd input, .card .newperson input{font:inherit;font-size:12.5px;padding:5px 9px;
  border-radius:7px;border:1px solid var(--border);flex:1;min-width:120px}
.card .check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text)}
.card h2 .linky{font-size:11.5px;font-weight:400;margin-left:8px}

/* Leaving the dates out is a decision of its own, so it sits above the days rather
   than reading as one more of them. */
.datesbox .nodates{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:7px 0 3px;cursor:pointer}
.datesbox .nodates input{margin:0;cursor:pointer}

/* What was actually sent, read back where it was sent from. */
.readmail{border-top:1px solid var(--line);margin:0 0 8px;padding:8px 0 2px}
.readmail pre{white-space:pre-wrap;font:inherit;font-size:12.5px;line-height:1.5;margin:6px 0 0;
  background:var(--surface-2);border-radius:8px;padding:10px 12px;max-height:22rem;overflow:auto}
.mails .m.done .nm{font-weight:600}
.mails .m.done .sent{font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--good);font-weight:700;margin-right:5px}

/* A list of facts. `.warn` and `.stop` mean something; this is for what does not. */
.plainlist{margin:2px 0 6px;padding-left:18px;font-size:12.5px;color:var(--text)}
.plainlist li{margin:2px 0}

/*
 * The mark that says a section folds — one of them, for the whole app.
 *
 * There were five, all of them a bare ▸ in muted grey at ten or eleven pixels, and every
 * one was easy to miss: a small low-contrast triangle beside a heading reads as
 * decoration, not as something you can press. Sections stayed shut because nobody knew
 * they opened.
 *
 * A chevron in a bordered box has presence at the size a control needs to be, turns
 * rather than swapping to a different glyph, and takes the accent on hover so it is
 * plainly a thing that does something. That treatment already existed in client.css as
 * `.caret` — with a comment saying exactly this — but it needed a <span> nobody emitted,
 * so it never rendered anywhere. It is drawn from CSS alone now, and any <details> gets
 * it by carrying `foldmark`.
 */
.foldmark > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  user-select:none}
.foldmark > summary::-webkit-details-marker{display:none}
.foldmark > summary::before{content:'\25B6';display:inline-flex;align-items:center;
  justify-content:center;width:19px;height:19px;flex:0 0 19px;border:1px solid var(--border);
  border-radius:5px;background:var(--surface-2);color:var(--text);font-size:8px;line-height:1;
  transition:transform .14s ease,color .14s,border-color .14s}
.foldmark[open] > summary::before{transform:rotate(90deg)}
.foldmark > summary:hover::before{border-color:var(--accent);color:var(--accent)}
.foldmark > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:6px}

/* A card that folds. The heading stays the heading; the mark is the affordance. */
.card > .sect > summary h2{margin:0}
.card > .sect > summary .st{margin-left:auto}