/* The clinic board: v7's parts at board scale, as in the mock David approved (2026-10-30).
   Colours, weights, borders, radii and spacings up to 20px are v7 tokens; the --b- sizes are
   the board's own, for reading across a room on an upright screen, and the --wb- sizes the
   whiteboard's rows (web/mockups, mockup B, as David decided it). */
:root{
  --wb-h:44px; --wb-text:15px; --wb-lead:18px; --wb-small:12px; --wb-title:20px; --wb-tick:20px;
  --wb-loc:44px; --wb-name-w:146px; --wb-vc:84px; --wb-vet:42px; --wb-iv:58px; --wb-nts:66px; --wb-so:30px;
  --wb-gap:6px; --wb-bar:4px; --wb-pop-w:300px; --wb-short:44px; --wb-z:1;
  --b-last-lit:color-mix(in srgb, var(--overdue) 90%, var(--ink-on-overdue));
  --b-area-h:196px; --b-area-problem-h:100px; --b-area-m-h:124px; --b-area-problem-m-h:76px;
  --b-board-w:1080px; --b-pad:24px; --b-main-top:18px; --b-head-h:68px; --b-floor:28px; --b-date:17px; --b-upd:15px; --b-upd-glyph:18px;
  --b-icon:30px; --b-ptitle:22px; --b-psub:15px; --b-count:16px; --b-count-w:32px; --b-caret:26px;
  --b-name:23px; --b-name-lead:27px; --b-meta:14px; --b-detail:16px; --b-chip:13px; --b-glyph:18px; --b-loc-glyph:16px; --b-id:13px;
  --b-gap:14px; --b-section-gap:22px; --b-ctop:32px;
  --b-cname:17px; --b-cmeta:14px; --b-ch:44px; --b-rel-t:16px; --b-rel-n:14px; --b-rel-n-w:28px;
  --b-more:15px; --b-more-glyph:20px; --b-order-l:14px; --b-order-b:15px;
  --b-pen-c:34px; --b-pen-glyph:22px; --b-close:34px; --b-close-glyph:20px;
  --b-form-w:440px; --b-label-w:118px; --b-field-h:50px; --b-field-fs:18px; --b-field-caret:22px; --b-initials-w:96px;
  --b-form-sub:15px; --b-label:15px; --b-check:17px; --b-link:16px;
  --b-tog-w:56px; --b-tog-h:30px; --b-tog-radius:16px; --b-tog-knob:24px; --b-tog-inset:3px; --b-tog-on:29px;
  --b-btn:17px; --b-btn-ghost:16px; --b-btn-pad-y:13px; --b-btn-pad-x:18px;
  --b-modal-top:150px; --b-modal-pad:24px; --b-modal-gap:18px; --b-modal-title:22px;
  --b-w-name:300px; --b-w-id:120px; --b-w-age:140px; --b-ak-name-min:160px; --b-ak-pen-min:120px; --b-w-date:calc((var(--b-w-name) + var(--b-w-id)) / 2); --b-focus:3px; --b-pulse:1.6s; --b-ease:cubic-bezier(.2,.7,.2,1); --b-fold:320ms; --b-busy:.6;
  --b-alarm-wash:color-mix(in srgb, var(--overdue) 12%, transparent);
}

.board{position:relative;flex:1 1 auto;display:flex;flex-direction:column;background:var(--page);color:var(--ink-body)}
/* a value's light, a step past the stripes in either theme: mixed on the body, where v7 sets the dark
   theme's tokens (body.theme-dark), so from the theme's own; on :root it was the light theme's in both */
body{--wb-lit:color-mix(in srgb, var(--kebab-hover) 90%, var(--ink-body))}

/* header: the floor, the date, when the board last refreshed */
.bhead{height:var(--b-head-h);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 var(--b-pad);background:var(--surface);border-bottom:var(--bw-1) solid var(--seam)}
.bh-left{display:flex;align-items:baseline;gap:var(--sp-14)}
.bh-floor{font-size:var(--b-floor);font-weight:var(--fw-800);color:var(--heading);letter-spacing:-.01em}
.bh-date{font-size:var(--b-date);color:var(--ink-soft)}
.bh-right{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--b-upd);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.bh-right .ms{font-size:var(--b-upd-glyph)}
/* a screen wider than the portrait board's (a laptop's): the board keeps the portrait board's
   width, centred; its header and the red line still span the window, their words over the lists */
.board[data-view="board"] :is(.bhead,.bstale,.bmain){padding-left:max(var(--b-pad),calc((100% - var(--b-board-w)) / 2 + var(--b-pad)));padding-right:max(var(--b-pad),calc((100% - var(--b-board-w)) / 2 + var(--b-pad)))}

/* when the board cannot refresh: a red line under the header, in the alarm's colours, until it can */
.bstale{flex:0 0 auto;display:flex;align-items:baseline;gap:var(--sp-12);padding:var(--sp-12) var(--b-pad);background:var(--overdue);color:var(--ink-on-overdue)}
.bs-ico{align-self:center;font-size:var(--b-icon)}
.bs-t{font-size:var(--b-ptitle);font-weight:var(--fw-700)}
.bs-s{font-size:var(--b-psub)}

/* panels, each folding to its header */
.bmain{flex:1 1 auto;padding:var(--b-main-top) var(--b-pad) var(--b-pad);display:flex;flex-direction:column;gap:var(--b-section-gap)}
.panel{display:flex;flex-direction:column}
.ph{display:flex;align-items:center;gap:var(--sp-12);width:100%;padding:0 var(--sp-4) var(--sp-10);border:none;border-bottom:var(--bw-1) solid var(--seam);background:none;color:inherit;font:inherit;text-align:left}
.ph:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-4);border-radius:var(--r-6)}
.pico{font-size:var(--b-icon);color:var(--ink-soft)}
.ptitle{font-size:var(--b-ptitle);font-weight:var(--fw-700);color:var(--heading)}
.psub{font-size:var(--b-psub);color:var(--ink-muted)}
.pcount{margin-left:auto;min-width:var(--b-count-w);padding:var(--sp-3) var(--sp-10);border-radius:var(--r-14);background:var(--badge-bg);color:var(--badge-ink);font-size:var(--b-count);font-weight:var(--fw-700);text-align:center;font-variant-numeric:tabular-nums}
.pcaret{font-size:var(--b-caret);color:var(--ink-faint);transition:transform var(--b-fold) var(--b-ease)}
.panel.folded .pcaret{transform:rotate(180deg)}
.pbody{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--b-fold) var(--b-ease),opacity var(--b-fold) var(--b-ease)}
.pinner{min-height:0;overflow:hidden}
.panel.folded .pbody{grid-template-rows:0fr;opacity:0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--b-gap);padding-top:var(--sp-14)}

/* First vaccination's undated animals: one heading, compact cards, then "View more" */
.rel-h{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-14) var(--sp-4) 0}
.rel-t{font-size:var(--b-rel-t);font-weight:var(--fw-700);color:var(--ink-soft)}
.rel-n{min-width:var(--b-rel-n-w);padding:var(--sp-2) var(--sp-8);border-radius:var(--r-14);background:var(--badge-bg);color:var(--badge-ink);font-size:var(--b-rel-n);font-weight:var(--fw-700);text-align:center;font-variant-numeric:tabular-nums}
.rel-h + .cards{padding-top:var(--sp-10)}
/* Completed vaccinations with none in the range chosen: says so, quietly, beside the range */
.rel-none{font-size:var(--b-rel-t);color:var(--ink-muted)}
.more{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);min-height:var(--b-ch);border:var(--bw-1) dashed var(--ctrl-border);border-radius:var(--gridcard-radius);background:none;font-size:var(--b-more);font-weight:var(--fw-600);color:var(--ink-soft)}
.more .ms{font-size:var(--b-more-glyph)}
.more:hover{background:var(--row)}
.more:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}

/* the group's order: the look of v7's user-menu segment (shell.html .umenu .th) */
.order{margin-left:auto;display:flex;align-items:center;gap:var(--sp-10)}
.order-l{font-size:var(--b-order-l);color:var(--ink-muted)}
.order-t{display:flex;padding:var(--sp-3);border-radius:var(--ctrl-radius);background:var(--seg-on-bg)}
.order-b{padding:var(--sp-6) var(--sp-14);border:none;border-radius:var(--r-6);background:none;font-size:var(--b-order-b);color:var(--ink-soft)}
.order-b.on{background:var(--surface);color:var(--ink-strong);font-weight:var(--fw-600);box-shadow:0 var(--bw-1) var(--bw-2) var(--menu-shadow)}
.order-b:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-1)}

/* the last day for a second vaccination: the whole list turns red and its header pulses; the red
   pulses beneath the words, which stay solid and readable */
.panel.alarm{background:var(--b-alarm-wash);border-radius:var(--gridcard-radius);box-shadow:0 0 0 var(--sp-12) var(--b-alarm-wash)}
.panel.alarm .ph{position:relative;isolation:isolate;border-bottom-color:transparent;border-radius:var(--r-6);padding:var(--sp-10) var(--sp-12)}
.panel.alarm .ph::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--overdue);animation:b-pulse var(--b-pulse) ease-in-out infinite}
.panel.alarm .pico,.panel.alarm .ptitle,.panel.alarm .psub,.panel.alarm .pcaret{color:var(--ink-on-overdue)}
.panel.alarm .pcount{background:var(--on-fill);color:var(--ink-on-overdue)}
@keyframes b-pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* a second vaccination with one day left before its last day: the list's header turns amber,
   and stays still */
.panel.warn .ph{background:var(--due);border-bottom-color:transparent;border-radius:var(--r-6);padding:var(--sp-10) var(--sp-12)}
.panel.warn .pico,.panel.warn .ptitle,.panel.warn .psub,.panel.warn .pcaret{color:var(--ink-on-amber)}
.panel.warn .pcount{background:var(--on-fill);color:var(--ink-on-amber)}

/* the card */
.card{position:relative;display:flex;flex-direction:column;gap:var(--sp-8);min-width:0;padding:var(--sp-14) var(--sp-16);background:var(--surface);border:var(--bw-1) solid var(--card-border);border-radius:var(--gridcard-radius)}
/* one day left: the card's edge turns amber */
.card.left1{border-color:var(--due);box-shadow:0 0 0 var(--bw-1) var(--due)}
/* the last day: the whole card red, its words in the red's own ink, its chip turned round */
.card.last{background:var(--overdue);border-color:var(--overdue);box-shadow:0 0 0 var(--bw-1) var(--overdue)}
.card.last .c-name,.card.last .c-loc,.card.last .c-id,.card.last .c-line,.card.last .c-line .ms,.card.last .c-note,.card.last .pen{color:var(--ink-on-overdue)}
.card.last .c-loc{background:transparent;padding-left:0}
.card.last .schip.last{--fill:var(--ink-on-overdue);--on-fill:var(--overdue)}
/* a course that has to restart: red-edged, its line's mark in red */
.card.restart{border-color:var(--overdue);box-shadow:0 0 0 var(--bw-1) var(--overdue)}
.card.restart .c-line .ms{color:var(--overdue)}
.c-top{display:flex;align-items:center;gap:var(--sp-8);min-width:0;min-height:var(--b-ctop)}
.c-top .schip{padding:var(--sp-4) var(--sp-7)}
/* the name's place takes the line's room; on the vet floor the name in it is Edit animal's button, as
   wide as its words, so the rest of the line opens nothing (Codex 1177) */
.c-slot{flex:1;min-width:0;display:flex}
.c-slot > .fdet{max-width:100%;white-space:normal}
/* a name takes a second line only when it needs one, whole beside its label (Codex 1153) */
.c-name{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:var(--b-name);font-weight:var(--fw-700);line-height:var(--b-name-lead);color:var(--ink-strong)}
.schip{flex:0 0 auto;display:inline-block;padding:var(--sp-4) var(--sp-9);border-radius:var(--chip-radius);font-size:var(--b-chip);font-weight:var(--fw-700);letter-spacing:.02em;background:var(--fill);color:var(--on-fill)}
.schip.due,.schip.left2,.schip.left1{--fill:var(--due);--on-fill:var(--ink-on-amber)}
.schip.overdue,.schip.last,.schip.restart{--fill:var(--overdue);--on-fill:var(--ink-on-overdue)}
/* a long room name keeps its whole name: the number moves to the next line instead */
.c-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-10);min-width:0;font-size:var(--b-meta);color:var(--ink-muted)}
.c-loc{display:inline-flex;align-items:center;gap:var(--sp-4);min-width:0;max-width:100%;padding:var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-5);border-radius:var(--chip-radius);background:var(--row);color:var(--ink-soft);font-weight:var(--fw-600);white-space:nowrap}
.c-loc .ms{font-size:var(--b-loc-glyph)}
.c-loc .tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
.c-id{font-family:var(--mono);font-size:var(--b-id);color:var(--ink-muted);white-space:nowrap}
/* a patient still in hospital, on Second vaccination: says so beside its room */
.c-hosp{display:inline-flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-5);border-radius:var(--chip-radius);background:var(--badge-bg);color:var(--badge-ink);font-weight:var(--fw-700);white-space:nowrap}
.c-hosp .ms{font-size:var(--b-loc-glyph)}
.card.last .c-hosp{background:transparent;padding-left:0;color:var(--ink-on-overdue)}
.c-line{display:flex;align-items:center;gap:var(--sp-7);min-width:0;font-size:var(--b-detail);color:var(--ink-body)}
.c-line .ms{font-size:var(--b-glyph);color:var(--ink-faint)}
/* the card's line runs to two lines before it is cut short, and keeps clear of the card's pencil */
.c-line .tx{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.c-line.quiet{color:var(--ink-muted)}
.card:has(> .c-top > .pen) .c-line{min-height:var(--b-glyph);padding-right:calc(var(--b-pen-c) - var(--sp-12))}
/* an animal's note, only when it has one: quiet, shown whole however many lines it takes, clear of the
   card's pencil (David, 2026-11-04) */
.c-note{min-width:0;font-size:var(--b-meta);color:var(--ink-soft);overflow-wrap:anywhere}
.c-note-on{font-weight:var(--fw-600);font-variant-numeric:tabular-nums}
.card:has(> .c-top > .pen) .c-note{padding-right:calc(var(--b-pen-c) - var(--sp-12))}

/* the compact card, for an undated first vaccination: name and room on one line, any note beneath */
.cards.compact{gap:var(--sp-8) var(--sp-12)}
/* the name is kept whole and the room given what is left, no more than it needs; a room that does not
   fit shows its short name, and the name gives way; the card's pencil has the far end to itself */
.card.ccard{gap:var(--sp-2);min-height:var(--b-ch);padding:var(--sp-5) calc(var(--b-pen-c) + var(--sp-5)) var(--sp-5) var(--sp-12)}
/* the row keeps the card's height without a note, so a row of cards lines up whichever has one */
.cc-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0;width:100%;min-height:calc(var(--b-ch) - 2 * var(--sp-5) - 2 * var(--bw-1))}
.cc-name{flex:0 1 auto;min-width:0;font-size:var(--b-cname);font-weight:var(--fw-700);color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-loc{flex:0 1 auto;min-width:0;font-size:var(--b-cmeta);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-row > .fdet{flex:0 1 auto}
.cc-row > .cc-loc,.cc-row > .fpick{flex:1 1 0;min-width:0;max-width:max-content;margin-left:var(--sp-8)}
.cc-row > .short{flex:none}
.cc-loc .vh{position:absolute;width:var(--sp-1);height:var(--sp-1);overflow:hidden;clip-path:inset(50%)}
/* a completed course: both days it was given, quiet, beneath the name and room */
.cc-when{min-width:0;font-size:var(--b-meta);color:var(--ink-muted);font-variant-numeric:tabular-nums}
/* on Completed vaccinations, where the animal is looked for by name, the name is never cut: whole, on as
   many lines as it needs, clear of the card's pencil, and the room on its own line beneath it (Codex 1165) */
.ccard[data-k="vaxdone"] .cc-row{flex-direction:column;align-items:flex-start}
.ccard[data-k="vaxdone"] .cc-name{white-space:normal;overflow:visible;overflow-wrap:anywhere}
.ccard[data-k="vaxdone"] .cc-row > :is(.cc-loc,.fpick){flex:none;max-width:100%;margin-left:0}

/* In hospital, as on the vet floor's whiteboard: the inpatient board, and the dashboard's list when
   it is open. One row a patient under the columns' names, the patients to be seen soonest first,
   every row the same height: 36 fit a screen 1080 x 1740 with nothing scrolled. */
.wb-top{flex:0 0 auto;display:flex;align-items:baseline;gap:var(--sp-12);padding:var(--sp-10) var(--sp-16);background:var(--surface);border-bottom:var(--bw-1) solid var(--seam)}
.wb-title{font-size:var(--wb-title);font-weight:var(--fw-800);color:var(--heading)}
.wb-count{padding:var(--sp-2) var(--sp-8);border-radius:var(--r-14);background:var(--badge-bg);color:var(--badge-ink);font-size:var(--fs-13);font-weight:var(--fw-700);font-variant-numeric:tabular-nums}
.wb-date{font-size:var(--fs-14);color:var(--ink-soft)}
.wb-upd{margin-left:auto;font-size:var(--fs-13);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.wb{flex:0 0 auto;display:flex;flex-direction:column;background:var(--surface)}
.wb-head,.wb-row{display:grid;grid-template-columns:var(--wb-loc) var(--wb-name-w) var(--wb-vc) minmax(0,3fr) minmax(0,4fr) var(--wb-vet) var(--wb-iv) var(--wb-nts) var(--wb-so);column-gap:var(--wb-gap);padding:0 var(--sp-8) 0 calc(var(--sp-8) + var(--wb-bar))}
.wb-head{padding-top:var(--sp-6);padding-bottom:var(--sp-5);font-size:var(--wb-small);font-weight:var(--fw-700);color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:var(--bw-1) solid var(--seam)}
.wb-head > span{padding:0 var(--sp-3)}
.wb-row{height:var(--wb-h);align-items:stretch;font-size:var(--wb-text);line-height:var(--wb-lead);color:var(--ink-body);border-bottom:var(--bw-1) solid var(--seam)}
/* --as-hover is v7's visible wash: the zebra in light, a step that shows in dark, where the zebra
   does not */
.wb-row:nth-child(odd){background:var(--as-hover)}
/* the row's edge: the more urgent of its alerts */
.wb-row.red{box-shadow:inset var(--wb-bar) 0 0 var(--overdue)}
.wb-row.amber{box-shadow:inset var(--wb-bar) 0 0 var(--due)}
.wb-empty{margin:0;padding:var(--sp-20) var(--sp-16);font-size:var(--wb-text);color:var(--ink-muted)}
.wb-c{display:flex;min-width:0}
/* every value is a button filling its cell: it lights up when pointed at, a step past the stripes in
   either theme, shows v7's ring when focused (its full width however far the rows have shrunk), and
   nothing on the row moves */
.wb-row .pick.fpick{display:flex;flex:1;min-width:0;max-width:none}
.wb-row :is(.wb-btn,.fpen,.fdet){flex:1;display:flex;align-items:center;min-width:0;max-width:none;margin:var(--sp-1) 0;padding:var(--sp-2) var(--sp-3);border:none;border-radius:var(--r-6);background:none;color:inherit;font:inherit;line-height:inherit;text-align:left;white-space:normal;cursor:pointer}
.wb-row :is(button.wb-btn,button.fpen,button.fdet):hover,.wb-row button.fpen[aria-expanded="true"]{background:var(--wb-lit);box-shadow:inset 0 0 0 var(--bw-1) var(--ink-quiet)}
.wb-row :is(.wb-btn,.fpen,.fdet):focus-visible{outline:calc(var(--b-focus) / var(--wb-z)) solid var(--btn);outline-offset:calc(-1 * var(--bw-1))}
.wb-loc{font-weight:var(--fw-700);color:var(--field-ink)}
.wb-nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:var(--fw-600);color:var(--ink-strong)}
.wb-vcd{font-weight:var(--fw-700);color:var(--ink-strong);white-space:nowrap}
.wb-row .schip{padding:var(--sp-2) var(--sp-6);font-size:var(--fs-13);white-space:nowrap}
/* a problem and a plan: one line, and a second only when they need it */
.wb-tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-width:0;overflow:hidden;overflow-wrap:anywhere}
.wb-vet{font-weight:var(--fw-700);color:var(--ink-strong);overflow-wrap:anywhere}
.wb-day{font-variant-numeric:tabular-nums;white-space:nowrap}
.wb-nts .wb-day{font-size:var(--fs-14)}
.wb-none{color:var(--ink-faint)}
.wb-nts .wb-btn{gap:var(--sp-3)}
.wb-nts .ms{font-size:var(--wb-tick);color:var(--ink-faint)}
.wb-nts .on .ms{color:var(--done)}
/* the whiteboard's magnet: at rest it matches the empty notes box beside it, darker under the hand; its
   reach runs on to the row's edge, so a finger finds it however far the rows have shrunk */
.wb-so .wb-btn{position:relative;justify-content:center}
.wb-so .wb-btn::after{content:"";position:absolute;inset:calc(-1 * var(--sp-1)) calc(-1 * var(--sp-8)) calc(-1 * var(--sp-1)) calc(-1 * var(--wb-gap))}
.wb-so .ms{font-size:var(--wb-tick);color:var(--ink-faint)}
.wb-so button.wb-btn:is(:hover,:focus-visible) .ms{color:var(--ink-strong)}
/* the same rows on the dashboard: as wide as the board, its heading in line with the other lists' */
.panel[data-k="hospital"]{margin:0 calc(-1 * var(--b-pad))}
.panel[data-k="hospital"] > .ph{width:auto;margin:0 var(--b-pad)}
.panel[data-k="hospital"] .wb{margin-top:var(--sp-10)}
/* In hospital's one line: how many red and amber beside its name */
.ph > .schip{white-space:nowrap}

/* A value's box or panel: on the page, not in the rows, at full size however far they have shrunk;
   v7's menu surface, as the lists and calendars are. */
.wb-over{position:fixed;z-index:25;left:0;top:0}
.wb-edit{position:relative;display:block;margin:0}
.wb-box{display:block;max-width:calc(100vw - 2 * var(--sp-8));padding:var(--sp-3) var(--sp-3);border:var(--bw-2) solid var(--btn);border-radius:var(--r-6);background:var(--surface);color:var(--ink-body);font:inherit;font-size:var(--wb-text);line-height:var(--wb-lead);overflow:hidden;overflow-wrap:anywhere;resize:none}
.wb-box:focus,.wb-box:focus-visible{outline:none}
.wb-foot,.wb-pop{display:flex;flex-direction:column;gap:var(--sp-10);padding:var(--sp-12) var(--sp-14);background:var(--menu-bg);border:var(--bw-1) solid var(--card-border);border-radius:var(--ctrl-radius);box-shadow:var(--menu-shadow-geom) var(--menu-shadow);color:var(--ink-body)}
.wb-foot{position:absolute;left:0;top:calc(100% + var(--sp-4));width:100%;padding:var(--sp-10)}
.wb-foot.up{top:auto;bottom:calc(100% + var(--sp-4))}
.wb-foot .wb-acts{gap:var(--sp-8)}
.wb-pop{width:var(--wb-pop-w);margin:0}
.wb-pt{font-size:var(--fs-15);font-weight:var(--fw-700);color:var(--ink-strong);overflow-wrap:anywhere}
.wb-acts{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-10)}
.wb-room{margin-right:auto;font-size:var(--fs-13);font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.wb-room.over{color:var(--destructive);font-weight:var(--fw-700)}
.wb-foot .bf-error,.wb-pop .bf-error{font-size:var(--fs-14)}
.wb-pop .bf-input{height:var(--b-ch);font-size:var(--fs-16)}
:is(.wb-foot,.wb-pop) .b-primary{padding:var(--sp-10) var(--sp-16);font-size:var(--fs-15)}
:is(.wb-foot,.wb-pop) .b-ghost{padding:var(--sp-9) var(--sp-14);font-size:var(--fs-15)}
.wb-foot .b-primary{padding:var(--sp-10) var(--sp-12)}
.wb-foot .b-ghost{padding:var(--sp-9) var(--sp-10)}
/* where words are measured for their row: the column on a screen 1080 px wide, unseen */
.wb-mirror{position:absolute;left:0;top:0;visibility:hidden;font-size:var(--wb-text);line-height:var(--wb-lead);overflow-wrap:anywhere;white-space:normal}
/* a room's list on the whiteboard: its short name, then its full name */
.pick-s{display:inline-block;width:var(--wb-short);font-weight:var(--fw-700);color:var(--ink-strong)}

/* a sign-off undone: on the vet floor's Signed off list, where other lists have a pencil */
.c-undo{flex:0 0 auto;padding:var(--sp-4) var(--sp-8);border:none;border-radius:var(--r-6);background:none;color:var(--btn);font-size:var(--fs-14);font-weight:var(--fw-600)}
.c-undo:hover{background:var(--kebab-hover)}
.c-undo:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-1)}

/* the one pencil on a card: v7's edit pencil (`edit` in --pencil-ink, shown when the card is pointed
   at) in the row kebab's grey circle; it opens the card's list's work for the animal (David, 2026-11-06:
   one pencil a card; agreed with Codex 1177) */
.pen{flex:0 0 auto;width:var(--b-pen-c);height:var(--b-pen-c);border:none;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:none;color:var(--pencil-ink);opacity:0;transition:opacity 120ms ease}
.pen .ms{font-size:var(--b-pen-glyph)}
.card:hover .pen,.pen:focus-visible{opacity:1}
/* on a touch screen nothing points: the pencil always shows, as v7's do (README, the sheet's w1); so on one that also
   has a mouse or trackpad, whose finger never points either (audit F14) */
@media (hover:none),(any-pointer:coarse){.pen{opacity:1}}
.pen:hover{background:var(--kebab-hover)}
.pen:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-1)}
/* at the card's foot, on the right, taking nothing from the name's line, and nothing moves as it shows */
.c-top .pen{position:absolute;right:var(--sp-4);bottom:var(--sp-4)}
.ccard .pen{position:absolute;right:var(--sp-5);top:var(--sp-4)}

/* a value edited there on the list — an animal's name (Edit animal), room or IV change (David,
   2026-10-31): the value itself is the button, the hand over it, with no pencil of its own, a card's
   one pencil being its list's (David, 2026-11-06; agreed with Codex 1177) */
.pick.fpick{display:inline-flex;align-items:center;vertical-align:middle;min-width:0;max-width:100%}
.fpen,.fdet{display:inline-flex;align-items:center;min-width:0;max-width:100%;padding:0;border:none;border-radius:var(--ctrl-radius);background:none;color:inherit;font:inherit;text-align:left;white-space:nowrap;cursor:pointer}
.fpen:focus-visible,.fdet:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}
/* on a card, pointed at, it lights as the In hospital rows' values do: their --wb-lit, edged in
   --ink-quiet. A name, and a compact card's room, have no room inside them, so the light is drawn
   around them by shadows alone and no box changes; a room's chip lights itself. A room's quiet words
   take the body's ink while lit, so they stand out from the light in either theme. On the red last-day
   card the light is that card's own red, a step towards its ink, edged in that ink. Nothing on the
   board moves. */
.card .fdet:hover,.ccard .fpen:is(:hover,[aria-expanded="true"]){background:var(--wb-lit);box-shadow:0 0 0 var(--sp-3) var(--wb-lit),0 0 0 calc(var(--sp-3) + var(--bw-1)) var(--ink-quiet)}
.ccard .fpen:is(:hover,[aria-expanded="true"]) .cc-loc{color:var(--ink-body)}
.card .fpen:is(:hover,[aria-expanded="true"]) > .c-loc{background:var(--wb-lit);box-shadow:inset 0 0 0 var(--bw-1) var(--ink-quiet);color:var(--ink-body)}
.card.last .fdet:hover{background:var(--b-last-lit);box-shadow:0 0 0 var(--sp-3) var(--b-last-lit),0 0 0 calc(var(--sp-3) + var(--bw-1)) var(--ink-on-overdue)}
.card.last .fpen:is(:hover,[aria-expanded="true"]) > .c-loc{background:var(--b-last-lit);box-shadow:inset 0 0 0 var(--bw-1) var(--ink-on-overdue);color:var(--ink-on-overdue)}

/* the card's form: a label beside each field, in the centred form (below). A line of words is no paragraph of the
   browser's: the identity pages' `<p class="bf-sub">` keeps none of its own margins (Fable 920 M2, Codex 1290). */
.bf-sub{margin:0;font-size:var(--b-form-sub);color:var(--ink-muted)}
.bf-row{display:grid;grid-template-columns:var(--b-label-w) minmax(0,1fr);align-items:center;gap:var(--sp-12)}
.bf-label{font-size:var(--b-label);font-weight:var(--fw-600);color:var(--field-ink)}
.bf-input{width:100%;height:var(--b-field-h);padding:0 var(--sp-12);border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);background:var(--surface);color:var(--ink-body);font:inherit;font-size:var(--b-field-fs)}
.bf-input:focus{outline:var(--bw-2) solid var(--btn);outline-offset:0;border-color:var(--btn)}
.bf-input::placeholder{color:var(--addnote)}
.bf-initials{width:var(--b-initials-w);text-transform:uppercase}
.bf-initials::placeholder{text-transform:none}
/* the plan (up to 150 characters) and the problem (up to 80): all of each in view, never the
   browser's scrollbar. Both start the problem's height (David: "Plan can be same height as
   problem"), and one whose words need more lines grows its box to show them all; in the wider
   New patient form the boxes are shorter. */
.bf-row.bf-top{align-items:start}
.bf-top .bf-label{padding-top:var(--sp-14)}
.bf-area{height:var(--b-area-problem-h);padding:var(--sp-10) var(--sp-12);resize:none;overflow:hidden;line-height:1.35}
.bf-area.grown{height:var(--b-area-h)}
.bmodal[data-form="add"] .bf-area{height:var(--b-area-problem-m-h)}
.bmodal[data-form="add"] .bf-area.grown{height:var(--b-area-m-h)}
/* a second vaccination asked for too early: when it may be given */
.bf-wait{margin:0;font-size:var(--b-label);color:var(--ink-body)}
.bf-val{font-size:var(--b-field-fs);color:var(--ink-body);font-variant-numeric:tabular-nums}
.bf-error{margin:0;font-size:var(--b-label);color:var(--destructive)}

/* A yes/no: v7's toggle (dashboard.html .np-tog) at board scale, over a hidden checkbox. */
.bf-check{position:relative;display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-4) 0;font-size:var(--b-check);color:var(--ink-body);cursor:pointer}
.tog-in{position:absolute;width:var(--sp-1);height:var(--sp-1);margin:0;opacity:0;pointer-events:none}
.tog{position:relative;flex:0 0 auto;width:var(--b-tog-w);height:var(--b-tog-h);border-radius:var(--b-tog-radius);background:var(--ctrl-border)}
.tog::after{content:"";position:absolute;top:var(--b-tog-inset);left:var(--b-tog-inset);width:var(--b-tog-knob);height:var(--b-tog-knob);border-radius:50%;background:var(--toggle-knob);box-shadow:var(--np-tog-knob-shadow);transition:left 120ms ease}
.tog-in:checked + .tog{background:var(--done)}
.tog-in:checked + .tog::after{left:var(--b-tog-on)}
.tog-in:focus-visible + .tog{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}
/* a switch's own field, shown only while it is on (the move's new room) */
.bf-reveal{display:flex;flex-direction:column;gap:var(--b-modal-gap)}

/* A choice or a date: v7's closed dropdown (dashboard.html .np-select) at board scale. */
.pick{display:block;min-width:0}
.pick-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);width:100%;height:var(--b-field-h);padding:0 var(--sp-8) 0 var(--sp-12);border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);background:var(--surface);color:var(--ink-body);font-size:var(--b-field-fs);text-align:left}
.pick-btn.faint{color:var(--ink-muted)}
.pick-btn[aria-expanded="true"],.pick-btn:focus-visible{outline:var(--bw-2) solid var(--btn);outline-offset:0;border-color:var(--btn)}
/* the shown value over every choice, unseen, so a box fits its longest choice */
.pick-t{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.pick-v,.pick-sz{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-sz{visibility:hidden}
.pick-caret{font-size:var(--b-field-caret);color:var(--ink-faint)}
/* Open: v7's menu surface (shell.html .umenu), the choices as its rows. */
.pick-pop{position:fixed;z-index:30;background:var(--menu-bg);border:var(--bw-1) solid var(--card-border);border-radius:var(--ctrl-radius);box-shadow:var(--menu-shadow-geom) var(--menu-shadow);color:var(--ink-body)}
.pick-pop[role="listbox"]{display:flex;flex-direction:column;padding:var(--sp-8) 0;max-height:calc(100vh - 2 * var(--sp-16))}
.pick-l{min-height:0;overflow-y:auto}
/* a field on a list: what its save is doing, then Clear and Cancel; while it saves, or once a
   conflict has stopped it, its choices are dimmed. Its words wrap to the choices' width, never
   widening the list. */
.pick-f{display:flex;flex-direction:column;gap:var(--sp-8);width:0;min-width:100%;padding:var(--sp-10) var(--sp-16) var(--sp-4)}
.pick-pop[role="dialog"] .pick-f{padding:var(--sp-12) 0 0}
.pick-fb{display:flex;align-items:center}
.pick-cancel{margin:0 0 0 auto}
.pick-say{margin:0;font-size:var(--b-label);color:var(--ink-muted)}
.pick-say.err{color:var(--destructive)}
.pick-pop[data-busy] :is(.pick-l,.cal-h,.cal-g),.pick-pop[data-locked] :is(.pick-l,.cal-h,.cal-g){opacity:var(--b-busy);pointer-events:none}
.pick-o{display:flex;align-items:center;min-height:var(--b-ch);padding:0 var(--sp-16);font-size:var(--b-field-fs);white-space:nowrap;cursor:pointer}
.pick-o:hover,.pick-o:focus{outline:none;background:var(--row)}
.pick-o.on{background:var(--row);color:var(--ink-strong);font-weight:var(--fw-600)}
/* A date, open: one month headed by v7's day stepper (sheet.html .step) at board scale. */
.pick-pop[role="dialog"]{padding:var(--sp-14) var(--sp-16) var(--sp-16)}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);padding-bottom:var(--sp-12)}
.cal-m{font-size:var(--b-field-fs);font-weight:var(--fw-700);color:var(--ink-strong)}
.cal-step{display:flex;border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);overflow:hidden}
.cal-step button{display:flex;align-items:center;padding:var(--sp-8) var(--sp-12);border:none;background:var(--surface);font-size:var(--b-detail);color:var(--stepper-ink)}
.cal-step .ms{font-size:var(--b-field-caret)}
.cal-step .cal-td{border-left:var(--bw-1) solid var(--ctrl-divider);border-right:var(--bw-1) solid var(--ctrl-divider);font-weight:var(--fw-600)}
.cal-step button:hover{background:var(--row)}
.cal-step button:focus-visible{outline-offset:calc(-1 * var(--bw-2))}
.cal-g{display:grid;grid-template-columns:repeat(7,var(--b-ch));gap:var(--sp-4)}
.cal-wd{display:flex;align-items:center;justify-content:center;height:var(--b-ctop);font-size:var(--b-meta);font-weight:var(--fw-600);color:var(--ink-muted)}
.cal-d{height:var(--b-ch);padding:0;border:none;border-radius:var(--r-6);background:none;color:var(--ink-body);font-size:var(--b-detail);font-variant-numeric:tabular-nums}
.cal-d:hover{background:var(--row)}
.cal-d.now{color:var(--ink-strong);font-weight:var(--fw-700);box-shadow:inset 0 0 0 var(--bw-1) var(--ctrl-border)}
.cal-d.on{background:var(--btn);color:var(--on-fill);font-weight:var(--fw-600);box-shadow:none}
.cal-d:disabled{background:none;color:var(--ink-quiet);cursor:default}
.cal-d:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-1)}
.cal-f{display:flex;justify-content:flex-end;padding-top:var(--sp-12)}
.bf-link{margin-right:auto;padding:0;border:none;background:none;font-size:var(--b-link);color:var(--btn)}
.bf-link:hover{text-decoration:underline}
.bf-link:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}
/* v7's form buttons (dashboard.html .np-primary / .np-ghost) at board scale */
.b-primary{padding:var(--b-btn-pad-y) var(--b-btn-pad-x);border:none;border-radius:var(--ctrl-radius);background:var(--btn);color:var(--on-fill);font-size:var(--b-btn);font-weight:var(--fw-600);white-space:nowrap}
.b-ghost{padding:var(--sp-12) var(--sp-16);border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);background:var(--surface);color:var(--ink-soft);font-size:var(--b-btn-ghost);white-space:nowrap}
.b-primary:focus-visible,.b-ghost:focus-visible,.newpatient:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}
.b-primary:disabled{opacity:var(--b-busy);cursor:default}
/* Rehomed or fostered switched on: Save becomes "Remove from every list", in v7's destructive red */
.b-primary.danger{background:var(--destructive)}

/* A card's form and adding an animal: v7's blocking modal (dashboard.html .np-modal), centred. A
   card's form keeps a label beside each field, at the width it had. */
.bscrim{position:fixed;inset:0;background:var(--modal-scrim);z-index:20}
.bmodal[data-form="card"]{width:var(--b-form-w)}
.bm-tt{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
/* It stays on the screen: on one shorter than the portrait board's (a laptop's) it starts near the
   top, and its fields scroll between its title and its buttons, which are always in view. */
.bmodal{position:fixed;top:var(--b-modal-top);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2 * var(--sp-16));max-height:calc(100vh - var(--b-modal-top) - var(--b-pad));background:var(--surface);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-geom) var(--modal-shadow);display:flex;flex-direction:column;overflow:hidden;z-index:21;color:var(--ink-body)}
@media (max-height:1200px){.bmodal{top:var(--b-pad);max-height:calc(100vh - 2 * var(--b-pad))}}
.bm-h{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:var(--b-main-top) var(--b-modal-pad);border-bottom:var(--bw-1) solid var(--seam)}
.bm-title{font-size:var(--b-modal-title);font-weight:var(--fw-700);color:var(--ink-strong)}
.bm-close{width:var(--b-close);height:var(--b-close);padding:0;border:none;border-radius:var(--r-6);background:var(--ctrl-fill);color:var(--ink-muted);display:flex;align-items:center;justify-content:center}
.bm-close .ms{font-size:var(--b-close-glyph)}
.bm-close:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}
.bm-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--b-section-gap) var(--b-modal-pad) var(--b-modal-pad);display:flex;flex-direction:column;gap:var(--b-modal-gap)}
/* The form is as wide as its rows; each field is as wide as what it holds (a list's box, its
   longest choice). A message under the fields wraps to the rows instead of widening the form. */
.bm-row{display:flex;gap:var(--sp-16)}
.bm-f{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--sp-7);min-width:0}
.bm-l{font-size:var(--b-label);font-weight:var(--fw-600);color:var(--field-ink)}
.np-req{color:var(--destructive);font-weight:var(--fw-700)}
.bm-w-name{width:var(--b-w-name)}
.bm-w-id{width:var(--b-w-id)}
.bm-w-age{width:var(--b-w-age)}
/* two dates side by side span the name and ID above them */
.bm-w-date{width:var(--b-w-date)}
.bm-full{width:100%}
.bm-vax{display:flex;flex-direction:column;gap:var(--b-modal-gap)}
.bm-body .bf-error,.bm-body .bf-wait,.bm-found{contain:inline-size}
.bm-found{margin:0;font-size:var(--b-check);color:var(--ink-body)}
.bm-found.quiet{color:var(--ink-muted)}
.bm-found.err{color:var(--destructive)}
.bm-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:var(--sp-10);padding:var(--sp-16) var(--b-modal-pad);border-top:var(--bw-1) solid var(--seam)}

/* Vet requests (web/mockups/requests.css, agreed by Codex 1160 and 1171). The top bar: Ask a vet beside the
   add button. */
.ask{padding:var(--sp-8) var(--sp-14);border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);background:var(--surface);color:var(--ink-body);font-size:var(--fs-13);font-weight:var(--fw-600)}
.ask:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}
/* the inpatient board's top line: how many wait, in the list's colours */
.wb-top .schip{white-space:nowrap}
/* the list's header: amber while anything waits (.panel.warn), red once anything has waited past its day; still,
   never the pulse, which stays the last day of a vaccination */
.panel.late .ph{background:var(--overdue);border-bottom-color:transparent;border-radius:var(--r-6);padding:var(--sp-10) var(--sp-12)}
.panel.late .pico,.panel.late .ptitle,.panel.late .psub,.panel.late .pcaret{color:var(--ink-on-overdue)}
.panel.late .pcount{background:var(--on-fill);color:var(--ink-on-overdue)}
.panel[data-k="requests"] .ph{cursor:default}
/* words on a chip are the neutral label: v7's --ink-on-done is for glyphs, and no ink reads on green in both
   themes. The green is the card's edge and the reply mark. */
.schip.answered{--fill:var(--badge-bg);--on-fill:var(--badge-ink)}
/* the card: what has been asked since the last answer, whole, and who asked when */
.rq-card .c-loc{white-space:normal;overflow-wrap:anywhere}
.card.answered{border-color:var(--done);box-shadow:0 0 0 var(--bw-1) var(--done)}
.rq-ask{margin:0;font-size:var(--b-psub);line-height:1.3;color:var(--ink-body);overflow-wrap:anywhere}
.card.answered .rq-ask{color:var(--note)}
.rq-by{font-size:var(--b-meta);color:var(--note);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rq-part{display:flex;flex-direction:column;gap:var(--sp-2)}
.rq-reply{display:flex;gap:var(--sp-6);margin:0;font-size:var(--b-psub);line-height:1.3;font-weight:var(--fw-600);color:var(--ink-strong);overflow-wrap:anywhere}
.rq-reply .ms{flex:0 0 auto;font-size:var(--b-glyph);color:var(--done)}
/* Sent back after an answer: that answer kept above what has been asked since, quiet, as the asks of an answered card are. */
.rq-reply.was{font-weight:var(--fw-400);color:var(--note)}
.rq-reply.was .ms{color:var(--note)}
.rq-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-8);margin-top:auto}
.rq-foot .rq-by{flex:1;min-width:0}
/* Answer; Reply and Close; or Answer and Close on a vet-floor request (David, 2026-11-07) */
.rq-acts{display:flex;flex:0 0 auto;gap:var(--sp-4)}
/* the forms: as wide as v7's modal; their boxes grow as the board's do */
.bmodal[data-form="ask"],.bmodal[data-form="answer"],.bmodal[data-form="reply"],.bmodal[data-form="remind"]{width:var(--modal-w)}
.bmodal[data-form="ask"] .bf-area,.bmodal[data-form="answer"] .bf-area,.bmodal[data-form="reply"] .bf-area,.ask-card .bf-area{height:var(--b-area-problem-m-h)}
.bmodal[data-form="ask"] .bf-area.grown,.bmodal[data-form="answer"] .bf-area.grown,.bmodal[data-form="reply"] .bf-area.grown,.ask-card .bf-area.grown{height:var(--b-area-m-h)}
.rq-count{margin-left:auto;font-size:var(--b-meta);font-weight:var(--fw-400);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.rq-count.over{color:var(--destructive);font-weight:var(--fw-700)}
.rq-label{display:flex;align-items:baseline;gap:var(--sp-4)}
.rq-found{margin:0;font-size:var(--b-check);color:var(--ink-body)}
.rq-found.quiet{color:var(--ink-muted)}
/* the name typed is another animal's on Yeeba: nothing is sent until name and ID agree (Codex 1193) */
.rq-found.err{color:var(--destructive)}
.rq-earlier{margin:0;padding:var(--sp-10) var(--sp-12);border-radius:var(--ctrl-radius);background:var(--row);font-size:var(--b-label);line-height:1.3;color:var(--ink-body)}
.rq-urgent{margin:0 auto 0 0;align-self:center;font-size:var(--b-label);color:var(--ink-soft)}
/* everything said, above the answer: a long thread scrolls here, the answer's box and buttons stay in view */
.rq-asked{display:flex;flex-direction:column;gap:var(--sp-8);max-height:var(--b-area-h);overflow-y:auto;padding:var(--sp-10) var(--sp-12);border-radius:var(--ctrl-radius);background:var(--row)}
.rq-asked .rq-by{color:var(--ink-muted)}
.rq-grow{flex:1 1 auto}
.bm-body .rq-found,.bm-body .rq-earlier{contain:inline-size}

/* Still to do (web/mockups/reminders-proposal.md, agreed by Codex 1197 as amended): each type under its heading, as
   First vaccination's groups were (.rel-h); the vet floor's Types at the right of the first. Its cards are a list's
   cards, a request's Done at the foot. A new type's box as wide as a name's, on a line of its own. */
.rm-types{margin-left:auto}
.bm-w-type{width:var(--b-w-name)}
/* the vet floor's Done keeps clear of the card's pencil, in the corner every card's pencil has */
.card:has(> .c-top > .pen) .rq-foot{padding-right:var(--b-pen-c)}
/* the card's pencil's form as wide as a list's card form, so a new type's longest name shows whole */
.bmodal[data-form="reminder"]{width:var(--b-form-w)}
/* Types: each type, how many open reminders it has, and Remove beside each with none */
.bmodal[data-form="types"]{width:var(--b-form-w)}
.rm-tlist{display:flex;flex-direction:column;gap:var(--sp-4)}
.rm-trow{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--b-ch)}
.rm-tname{flex:1 1 auto;min-width:0;font-size:var(--b-check);font-weight:var(--fw-600);color:var(--ink-strong);overflow-wrap:anywhere}
.rm-topen{flex:0 0 auto;font-size:var(--b-label);color:var(--ink-muted)}

/* Asking on a phone (/ask; agreed by Codex 1171): the same form as a page of its own, one column at a phone's
   width, on the board's own fields and buttons; the team beside its title; Light/Dark and Sign out quiet below. */
.main.ask-page{display:flex;flex-direction:column;align-items:center;gap:var(--sp-16);padding:var(--sp-16)}
.ask-card{width:100%;max-width:var(--modal-w);background:var(--surface);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-geom) var(--modal-shadow);display:flex;flex-direction:column;color:var(--ink-body)}
.ak-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-10);padding:var(--b-main-top) var(--b-modal-pad);border-bottom:var(--bw-1) solid var(--seam)}
.ak-team{font-size:var(--b-label);color:var(--ink-muted);white-space:nowrap}
.ak-body{display:flex;flex-direction:column;gap:var(--b-modal-gap);padding:var(--b-section-gap) var(--b-modal-pad) var(--b-modal-pad)}
.ak-body > .bm-f{width:100%}
/* Name and ID on one line, Location and Pen / kennel no. on the next (David, 2026-11-07), each wrapping where its
   fields do not fit: the name and the pen grow to the line's end, the ID and the room's box as wide as they hold */
.ak-row{flex-wrap:wrap}
.ak-name{flex:1 1 var(--b-ak-name-min)}
.ak-pen{flex:1 1 var(--b-ak-pen-min)}
.ak-body > .ak-who{width:min(100%, var(--b-w-name))}
.ak-body .bf-error,.ak-body .rq-found,.ak-body .rq-earlier{contain:inline-size}
.ak-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-10);padding:var(--sp-16) var(--b-modal-pad);border-top:var(--bw-1) solid var(--seam)}
.ak-what{margin:0;font-size:var(--b-check);font-weight:var(--fw-600);color:var(--ink-strong);overflow-wrap:anywhere}
.ak-quiet{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);width:100%;max-width:var(--modal-w);font-size:var(--b-label);color:var(--ink-muted)}
.ak-out{padding:var(--sp-8) var(--sp-12);border:none;border-radius:var(--ctrl-radius);background:none;font-size:var(--b-label);color:var(--ink-soft)}
.ak-out:focus-visible{outline:var(--b-focus) solid var(--btn);outline-offset:var(--sp-2)}

/* Sign-in and Accounts (the logins' R2): the identity strip, its top bar, the PIN, read-only board values. */
.topbar.id-bar{position:sticky;top:0;z-index:4;height:auto;min-height:var(--topbar-h);flex-wrap:wrap;row-gap:var(--sp-8);padding:var(--sp-8) var(--sp-16)}
.id-bar .umenu{top:100%}
.id-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-10);min-width:0}
.id-name{font-size:var(--fs-13);font-weight:var(--fw-600);color:var(--ink-strong);overflow-wrap:anywhere}
/* A modal's header with the strip: one row, as v7's header is (the manager's V1), wherever the title fits in at most two
   lines at its own word breaks there, with the strip's action whole on one line (the two-line limit: Fable 920 M1,
   Codex 1290). The title takes the room the strip and Close leave, and wraps within it; the strip and Close stay
   together at the right, Close never alone. The strip takes at most half the row, its own name wrapping, so a long name
   never leaves the title none. Where a word of the title would not fit that room, where the title would take more than
   two lines there, or where the strip's action would not fit its half of the row (client/identity.ts measures each, the
   title's words held unbroken for the one reading), the title takes its own full row and the strip and Close stay
   together at the right of the row below, the strip taking that row's width less Close's; the DOM and tab order are
   the same. A word is broken only when it is wider than the whole row; nothing overflows sideways. */
.bm-h.id-h{gap:var(--sp-10)}
.bm-h.id-h .bm-title{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.bm-h.id-h > .bm-tt{flex:1 1 0;min-width:0}
.bm-h.id-h .id-strip{margin-left:auto;flex:0 1 auto;max-width:50%}
.bm-h.id-h .id-strip .ask{white-space:nowrap}
.bm-h.id-h .bm-close{flex:none}
.bm-h.id-h[data-probe] .bm-title{overflow-wrap:normal}
.bm-h.id-h[data-head="split"]{flex-wrap:wrap;row-gap:var(--sp-8)}
.bm-h.id-h[data-head="split"] .bm-title{flex:1 0 100%}
.bm-h.id-h[data-head="split"] > .bm-tt{flex:1 0 100%}
.bm-h.id-h[data-head="split"] .id-strip{max-width:calc(100% - var(--b-close) - var(--sp-10))}
.id-secret{margin:0;font-family:var(--mono);font-size:var(--b-field-fs);font-weight:var(--fw-700);color:var(--ink-strong)}
.id-row{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-12) 0;border-top:var(--bw-1) solid var(--seam)}
.id-row:first-child{border-top:none;padding-top:0}
/* a row's facts break a word too long for the row anywhere, as its name does (.ak-what): a long name stays in its card */
.id-row > .bf-sub{overflow-wrap:anywhere}
/* a row's actions start where its words do: each `.c-undo` keeps its padding, the row drawn out by it (Codex 1290 L5) */
.id-acts{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-left:calc(-1 * var(--sp-8))}
.main > .bf-wait[data-identity-status]{padding:var(--sp-12) var(--b-pad)}
/* On a registered board page wider than the portrait board, the status line's words start where the board's do. */
.main[data-shell="board"] > .bf-wait[data-identity-status]{padding-left:max(var(--b-pad),calc((100% - var(--b-board-w)) / 2 + var(--b-pad)));padding-right:max(var(--b-pad),calc((100% - var(--b-board-w)) / 2 + var(--b-pad)))}
.wb-row span:is(.wb-btn,.fpen,.fdet){cursor:default}
/* The PIN and Accounts modals: v7's modal width, as the request forms take it; fields the form's width; a foot that
   wraps on a phone, its buttons' words too. */
.bmodal:is([data-form="pin"],[data-form="accounts"]){width:var(--modal-w)}
.bmodal:is([data-form="pin"],[data-form="accounts"]) .bm-f{width:100%}
.bmodal:is([data-form="pin"],[data-form="accounts"]) .bm-foot{flex-wrap:wrap}
.bmodal:is([data-form="pin"],[data-form="accounts"]) :is(.b-primary,.b-ghost){white-space:normal;max-width:100%}
/* While its answer is awaited, a frozen form's Cancel, Close and Switch person look as unable to act as its primary
   does: the board's own busy value (Fable 920 L1, Codex 1290) — an identity modal's, and a board form's while its save
   is on its way or its token is awaited (the logins' R3 § 7.4, § 7.6): a board modal's Close and Cancel, a panel's and a
   text box's Cancel, a list's Clear and Cancel, Types' Remove, and the strip's Switch person, in a header or the bar. */
.bmodal:is([data-form="pin"],[data-form="accounts"]) :is(.b-ghost,.bm-close,.ask):disabled,:is(.bmodal,.wb-pop,.wb-edit) :is(.b-ghost,.bm-close):disabled,.pick-pop .bf-link:disabled,.rm-tlist .c-undo:disabled,.id-strip .ask:disabled{opacity:var(--b-busy);cursor:default}
/* The identity modal's two cases (the logins' R2 contract § 8.1; client/identity.ts chooses): its fixed header and foot
   with the body scrolling between them while they fit with a usable body; else the whole modal is the one box a person
   scrolls, its body at its natural height, nothing clipped. A control brought into view keeps its focus ring in view
   (the ring's own width and offset, --b-focus and --sp-2). */
.bmodal:is([data-form="pin"],[data-form="accounts"])[data-fit="whole"]{overflow-y:auto}
.bmodal:is([data-form="pin"],[data-form="accounts"])[data-fit="whole"] > .bm-body{flex:none;overflow-y:visible}
.bmodal:is([data-form="pin"],[data-form="accounts"]) :is(button,input,.bf-check){scroll-margin:calc(var(--b-focus) + var(--sp-2))}
.pick-pop[data-identity]{max-width:calc(100vw - 2 * var(--sp-16))}
.pick-pop[data-identity] .pick-o{white-space:normal;overflow-wrap:anywhere}
/* Nothing drawn by the browser itself: Edge's reveal and clear buttons inside a field. */
input::-ms-reveal,input::-ms-clear{display:none}

@media (prefers-reduced-motion:reduce){
  .pbody,.pcaret,.pen{transition:none}
  .panel.alarm .ph::before{animation:none}
}