@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
:root{
  /* CH 101326 ~01:30: "I don't love the pastels still." State washes are not used as fills; state shows in its number, word and square. */
  /* ground and ink: A */
  --ol-paper:#F0F1F3; --ol-surface:#FFFFFF; --ol-wash:#F0F0F0; --ol-wash-2:#E8E8E8; --ol-side:#F4F4F4;
  --ol-ink:#141414; --ol-ink-2:#3A3A36; --ol-muted:#4D4E50; --ol-faint:#4D4E50;
  --ol-line:#ECEEED; --ol-rule:#AFAFAF; --ol-ctl:#8C8C85;
  --ol-primary:#141414; --ol-on-primary:#FFFFFF;
  --ol-today:#E8E8E8; --ol-on-today:#141414; --ol-day:#ECECF0; --ol-now:#141414;
  /* roles: soft blocks and bars (12 Toggl Track, 5 Square Workday) */
  --ol-block-sub:#C8E4F4; --ol-block-staff:#C8E4BC; --ol-block-support:#F0E8C4;
  --ol-bar-sub:#B0D0FC; --ol-bar-staff:#A8CCAC; --ol-bar-support:#F0E8C4;
  --ol-tag-staff:#34A402; --ol-tag-support:#CBAF05; --ol-tag-sub:#2F85D8;
  /* the human mark: ONE LOOK */
  --ol-mark:#B02E20;
  /* state: ONE LOOK, unchanged */
  --ol-safe:#17703C;   --ol-safe-wash:#E6F1E9;
  --ol-pend:#A84500;   --ol-pend-wash:#FBEEDF;
  --ol-danger:#B91C1C; --ol-danger-wash:#FBE9E9;   /* true red, 6.47:1 on white; CH 101426 "no magenta anywhere" */
  /* the state band: A ink */
  --ol-band:#141414; --ol-on-band:#FFFFFF; --ol-on-band-2:#AFAFAF;
  --ol-flood-safe:#17703C; --ol-flood-danger:#B91C1C; --ol-on-flood:#FFFFFF; --ol-on-flood-ink:#141414;
  /* app identity */
  --ol-id-coverage:#1F5673;
  /* Achievement First, from the logo on achievementfirst.org (MS demo 101426, CH: "a few big bold colors where it matters") */
  --ol-af-blue:#0271AC; --ol-af-navy:#01486D; --ol-af-yellow:#FFD200; --ol-af-hair:rgba(255,255,255,.22); --ol-af-on-navy-2:#C8C8C8;   /* measured on achievementfirst.org 101426 */
  --ol-id:var(--ol-id-coverage);
  /* type, space, shape, motion: ONE LOOK */
  --ol-font:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ol-fs-13:13px; --ol-fs-15:15px; --ol-fs-17:17px; --ol-fs-20:20px;
  --ol-fs-24:24px; --ol-fs-32:32px; --ol-fs-48:48px; --ol-fs-display:clamp(48px,5.6vw,80px);
  --ol-sp-4:4px; --ol-sp-8:8px; --ol-sp-12:12px; --ol-sp-16:16px;
  --ol-sp-24:24px; --ol-sp-40:40px; --ol-sp-64:64px; --ol-sp-96:96px;
  --ol-gutter:clamp(16px,4.5vw,44px);
  --ol-r:6px; --ol-r-round:50%;
  --ol-e1:0 1px 2px rgba(23,23,23,.08),0 16px 40px -12px rgba(23,23,23,.28);
  --ol-h:44px; --ol-h-block:56px; --ol-row:56px; --ol-row-phone:64px;
  --ol-fast:120ms; --ol-base:200ms; --ol-slow:400ms; --ol-state:1000ms;
  --ol-ease:cubic-bezier(.2,.7,.2,1); --ol-ease-state:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}

/* Coverage Schedule Maker, demo copy. Look B (CH 101226 21:00 "b"; 21:03 square buttons, rounded cards; "calling a sub is going to be rare").
   Every color, size, family, radius and shadow below is a var(--ol-*) from the :root block above. No literal values. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; }
a, button, input, select, label, .choice, .dayb { touch-action: manipulation; }
a { color: var(--ol-ink); text-underline-offset: 3px; }   /* a plain link is ink, never the browser's blue (CH 101326 critic 3) */
body { font-family: var(--ol-font); font-size: var(--ol-fs-15); line-height: 1.5; color: var(--ol-ink); background: var(--ol-paper); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ol-ink); outline-offset: 2px; scroll-margin-top: 120px; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-weight: 800; font-size: var(--ol-fs-32); letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: var(--ol-fs-20); margin-bottom: var(--ol-sp-8); }
h3 { font-size: var(--ol-fs-17); margin-bottom: 6px; }
p { margin: 0; }
[hidden] { display: none !important; }
.muted { color: var(--ol-muted); }
.small { font-size: var(--ol-fs-13); }
.mono { font-variant-numeric: tabular-nums; }
.count { display: inline-block; margin-left: 4px; font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-muted); }

/* top bar: paper, ink, one hairline under it */
.top { display: flex; align-items: flex-start; gap: 6px 12px; flex-wrap: wrap; padding: 12px 24px 0; background: var(--ol-paper); color: var(--ol-ink); border-bottom: 1px solid var(--ol-line); position: sticky; top: 0; z-index: 20; }
.brand-logo { flex: none; width: 30px; height: 32px; padding: 2px; border-radius: var(--ol-r); background: var(--ol-surface); object-fit: contain; }
.brand { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.brand-name { font-weight: 600; font-size: var(--ol-fs-17); line-height: 1.25; color: var(--ol-ink); }
.brand-sub { font-size: var(--ol-fs-13); line-height: 1.4; color: var(--ol-muted); margin-top: 1px; }
.brand-date:not(:empty)::before { content: ", "; }
.sample-bar { order: 2; flex: 1 1 100%; min-width: 0; margin: 0; font-size: var(--ol-fs-13); line-height: 1.45; color: var(--ol-muted); }
.sample-bar::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--ol-muted); vertical-align: 0; }
.sample-bar.is-live::before { background: var(--ol-safe); }
.sample-bar.is-fallback::before { background: var(--ol-pend); }
.sample-bar b { color: var(--ol-ink); font-weight: 600; }
.sample-bar.is-fallback b { color: var(--ol-pend); }
.sample-bar .src-link { color: var(--ol-ink); text-decoration: underline; text-underline-offset: 2px; }
.tabs, .admin-tabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs { order: 3; flex: 1 1 100%; padding-bottom: 8px; }
.tabs::-webkit-scrollbar, .admin-tabs::-webkit-scrollbar { display: none; }
.tabs button, .admin-tabs button { flex: none; background: none; border: 0; border-radius: var(--ol-r); padding: 0 14px; min-height: var(--ol-h); font-weight: 400; font-size: var(--ol-fs-15); color: var(--ol-muted); white-space: nowrap; }
.tabs button[aria-current="page"], .admin-tabs button[aria-current="page"] { color: var(--ol-on-today); background: var(--ol-today); font-weight: 600; }
.tabs.fade-r, .admin-tabs.fade-r { -webkit-mask-image: linear-gradient(to right, var(--ol-ink) calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, var(--ol-ink) calc(100% - 28px), transparent 100%); }
.tabs.fade-l, .admin-tabs.fade-l { -webkit-mask-image: linear-gradient(to right, transparent 0, var(--ol-ink) 16px); mask-image: linear-gradient(to right, transparent 0, var(--ol-ink) 16px); }
.tabs.fade-l.fade-r, .admin-tabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent 0, var(--ol-ink) 16px, var(--ol-ink) calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, var(--ol-ink) 16px, var(--ol-ink) calc(100% - 28px), transparent 100%); }
.admin-slot { order: 4; flex: 1 1 100%; min-width: 0; }
.admin-slot:empty { display: none; }
.admin-tabs { margin: 0; padding: 4px 0 8px; border-top: 1px solid var(--ol-line); }
.admin-tabs .admin-name { flex: none; margin: 0 6px 0 2px; font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-muted); white-space: nowrap; }
.notice { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ol-band); color: var(--ol-on-band); padding: 12px 16px; border-radius: var(--ol-r); box-shadow: var(--ol-e1); z-index: 13; width: max-content; max-width: calc(100% - 32px); font-size: var(--ol-fs-15); }
.notice .btn.quiet { color: var(--ol-on-band); vertical-align: middle; }
.save-status { z-index: 11; }
body.has-save-status .notice:not(.save-status) { bottom: 76px; }
.data-warning { background: var(--ol-surface); color: var(--ol-pend); font-weight: 600; border-bottom: 1px solid var(--ol-pend); padding: 12px 16px; font-size: var(--ol-fs-15); }
.main { max-width: 1240px; margin: 0 auto; padding: 20px 24px 60px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--ol-surface); border: 1px solid var(--ol-line); border-radius: var(--ol-r); padding: 18px 20px; min-width: 0; }
.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.grow { flex: 1 1 240px; }

/* buttons: square-ish, one filled primary per screen, everything else secondary or quiet */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ol-h); padding: 0 18px; background: var(--ol-surface); color: var(--ol-ink); border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); font-weight: 600; font-size: var(--ol-fs-15); line-height: 1.25; text-align: center; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ol-primary); border-color: var(--ol-primary); color: var(--ol-on-primary); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ol-ink); text-decoration: underline; text-underline-offset: 3px; padding: 0 10px; }
.btn.small { padding: 0 12px; }
.btn.quiet.small { padding: 0 8px; }
.btn.big { min-height: var(--ol-h-block); padding: 0 24px; font-size: var(--ol-fs-17); }
.btn[disabled] { background: var(--ol-paper); border-color: var(--ol-line); color: var(--ol-muted); cursor: not-allowed; text-decoration: none; }
.btn.quiet[disabled] { background: transparent; border-color: transparent; text-decoration: underline; }
.seg { display: inline-flex; border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); overflow: hidden; }
.seg button { background: var(--ol-surface); border: 0; border-left: 1px solid var(--ol-line); padding: 0 14px; min-height: var(--ol-h); font-weight: 600; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ol-today); color: var(--ol-on-today); outline: 2px solid var(--ol-ink); outline-offset: -2px; }
select, input[type="number"], input[type="search"], input[type="text"], input[type="date"], textarea { border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); padding: 0 10px; min-height: var(--ol-h); background-color: var(--ol-surface); color: var(--ol-ink); font-size: var(--ol-fs-17); max-width: 100%; }
textarea { padding: 10px 12px; line-height: 1.45; }
select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ol-ink) 50%), linear-gradient(135deg, var(--ol-ink) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
label { display: inline-flex; flex-direction: column; gap: 4px; font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-ink-2); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ol-ink); font-weight: 400; font-size: var(--ol-fs-15); min-height: var(--ol-h); }
label.check input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--ol-primary); }
.test-days { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 14px; }
.test-days .btn { font-weight: 400; text-align: left; }
.abs-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 0; }
.abs-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; border-top: 1px solid var(--ol-line); }
.abs-list li:first-child { border-top: 0; padding-top: 0; }
.abs-name { font-weight: 600; }
.abs-list .btn { margin-left: auto; }
.abs-list .btn.sub-book { margin-left: 0; }
.abs-list .sub-name-in { width: 11.5em; max-width: 100%; font-size: var(--ol-fs-17); }
.abs-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--ol-line); }

/* statuses: an 8px square and the word, no pill. A flag (6px radius, state wash) where it sits on a block. */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ol-fs-13); font-weight: 600; line-height: 1.4; color: var(--ol-ink-2); white-space: nowrap; }
.tag::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid var(--ol-muted); }
.tag.warn { color: var(--ol-pend); }
.tag.warn::before { background: var(--ol-pend); border-color: var(--ol-pend); }
.tag.ok { color: var(--ol-safe); }
.tag.ok::before { background: var(--ol-safe); border-color: var(--ol-safe); }
.tag.stipend { color: var(--ol-ink-2); }
.scoreboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--ol-surface); border: 1px solid var(--ol-line); border-radius: var(--ol-r); padding: 12px 16px; display: flex; flex-direction: column; }
.stat .n { font-weight: 800; font-size: var(--ol-fs-32); line-height: 1; letter-spacing: -0.02em; }
.stat .l { display: flex; align-items: center; gap: 6px; font-size: var(--ol-fs-13); color: var(--ol-muted); font-weight: 600; }
.stat .l::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }
.stat.ok .l { color: var(--ol-safe); }
.stat.bad { border-color: var(--ol-line); background: var(--ol-surface); }
.stat.bad .n, .stat.bad .l { color: var(--ol-danger); }
.stat.warn { border-color: var(--ol-line); background: var(--ol-surface); }
.stat.warn .l { color: var(--ol-pend); }
.group-head { margin: 8px 0 0; font-size: var(--ol-fs-20); font-weight: 600; }
.head-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.flag { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ol-h); padding: 0 14px; border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); font-size: var(--ol-fs-15); font-weight: 600; text-decoration: none; color: var(--ol-ink); }
.flag::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }
.flag.danger { background: var(--ol-surface); border-color: var(--ol-danger); color: var(--ol-danger); }
.flag.pend { background: var(--ol-surface); border-color: var(--ol-pend); color: var(--ol-pend); }
.approve-bar .status-foot { flex: 1 1 100%; margin: 0; font-size: var(--ol-fs-15); font-weight: 600; line-height: 1.35; color: var(--ol-ink); }
.jcalls { border-color: var(--ol-line); }
.jcall { padding: 12px 0; border-top: 1px solid var(--ol-line); }
.jcall:first-of-type { border-top: 0; }
.jcall .q { font-weight: 600; margin-bottom: 8px; }
.opts { display: flex; flex-direction: column; gap: 6px; }
.choice { text-align: left; background: var(--ol-surface); border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); padding: 10px 14px; font-size: var(--ol-fs-15); }
.choice[aria-pressed="true"] { background: var(--ol-today); color: var(--ol-on-today); outline: 2px solid var(--ol-ink); outline-offset: -2px; }
.choice[aria-pressed="true"]::before { content: "Chosen: "; font-weight: 600; }
.need { color: var(--ol-pend); font-weight: 600; font-size: var(--ol-fs-15); margin-top: 6px; }
.ok-line { color: var(--ol-safe); }
.approve-bar .ok-line { color: var(--ol-ink); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: var(--ol-fs-13); color: var(--ol-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--ol-rule); vertical-align: bottom; }
td { padding: 10px; border-bottom: 1px solid var(--ol-line); vertical-align: top; }
td.t { white-space: nowrap; font-weight: 600; }
.plan th:nth-child(1) { width: 104px; }
.plan th:nth-child(2) { width: 170px; }
.plan th:nth-child(3) { width: 320px; }
.plan th:nth-child(4) { width: 200px; }
/* CH 101526 condense: two lines a row. Change sits beside the name and count; Why? sits after the reason */
.plan td[data-h="Assigned coverage"] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.plan td[data-h="Assigned coverage"] .chips { margin-top: 0; }
.plan td[data-h="Assigned coverage"] .chips:empty { display: none; }
.plan td[data-h="Assigned coverage"] details.swap { margin-top: 0; }
.plan td[data-h="Assigned coverage"] details.swap > summary { display: inline; }
.plan td[data-h="Assigned coverage"] details.swap[open] { flex-basis: 100%; }
.plan td.why details.more { display: inline; }
.plan td.why details.more > summary { display: inline; margin-left: 4px; }
.plan td.why details.more[open] p { display: block; }
.nocover-line { margin: 0 0 var(--ol-sp-8); color: var(--ol-ink-2); }
.plan td.why { font-size: var(--ol-fs-15); color: var(--ol-ink-2); min-width: 200px; }
.plan tr.gap td { background: var(--ol-wash); }
.gap-word { color: var(--ol-danger); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.step { display: inline-block; font-size: var(--ol-fs-13); font-weight: 600; padding: 1px 8px; border-radius: var(--ol-r); background: var(--ol-paper); border: 1px solid var(--ol-line); color: var(--ol-ink-2); white-space: nowrap; }
.step.s5, .step.s6 { background: var(--ol-surface); border-color: var(--ol-danger); color: var(--ol-danger); }
.step.s4 { background: var(--ol-surface); border-color: var(--ol-pend); color: var(--ol-pend); }
ul.orig { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--ol-fs-15); }
.lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ol-fs-13); font-weight: 600; white-space: nowrap; }
.lbl::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ol-ink); }
.l-protected, .l-avoid, .l-flexible, .l-available { color: var(--ol-ink-2); }   /* labels, not state: only Covered, Open, Waiting and a gap carry state colors (CH 101326 critic 2) */
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.list ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--ol-fs-15); }
.list.bad { border-color: var(--ol-danger); }
.approve-bar { display: flex; flex-wrap: wrap; gap: var(--ol-sp-8) var(--ol-sp-16); align-items: center; padding: var(--ol-sp-12) var(--ol-sp-16); position: sticky; bottom: var(--ol-sp-8); z-index: 12; border-color: var(--ol-rule); box-shadow: var(--ol-e1); }
.approve-actions p { margin: 0; }
.blank { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ol-sp-8); }
.blank p { margin: 0; }
.tag.na { color: var(--ol-muted); }
.approve-bar p { flex: 1 1 280px; }
.approve-bar .btn.big { min-height: var(--ol-h); }
.tag.bad { color: var(--ol-danger); }
.tag.bad::before { background: var(--ol-danger); border-color: var(--ol-danger); }
.need::before, .pv-changed::before, .ok-line::before { content: ""; display: inline-block; flex: none; width: 8px; height: 8px; margin-right: var(--ol-sp-8); background: currentColor; }
.approve-bar .ok-line::before { content: none; }
.pick-status { margin: var(--ol-sp-4) 0 0; }
.approve-bar .need { margin: 0; }
.pick select { min-width: 240px; }
.status { margin-top: 10px; font-weight: 600; font-size: var(--ol-fs-15); padding: 6px 10px; border-radius: var(--ol-r); display: inline-block; }
.status { display: inline-flex; align-items: center; gap: var(--ol-sp-8); background: var(--ol-surface); }
.status::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }
.status.safe { color: var(--ol-safe); }
.status.pend { color: var(--ol-pend); }
.status.na { color: var(--ol-ink-2); }
.status.na::before { background: transparent; border: 1px solid var(--ol-muted); }
.who-list .status { margin: 0; padding: 0; font-size: var(--ol-fs-15); }
.blank .btn.quiet { padding-left: 0; }
.approve-bar .status-short, .foot-full { display: none; }
.changed-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.changed-people .btn[aria-pressed="true"] { background: var(--ol-today); color: var(--ol-on-today); border-color: var(--ol-ink); }
.myday tr.changed td { background: var(--ol-wash); }
.myday tr.k-out td { background: var(--ol-paper); }
.chg { display: inline-block; font-size: var(--ol-fs-13); font-weight: 600; background: var(--ol-surface); color: var(--ol-pend); border: 1px solid var(--ol-pend); padding: 0 6px; border-radius: var(--ol-r); margin-right: 4px; }
table.fair tr.changed td { background: var(--ol-wash); }
.chip { display: inline-block; font-size: var(--ol-fs-13); font-weight: 600; padding: 1px 8px; border-radius: var(--ol-r); border: 1px solid var(--ol-line); background: var(--ol-paper); color: var(--ol-ink-2); white-space: nowrap; }
.chip.tom { background: var(--ol-today); border-color: var(--ol-today); color: var(--ol-on-today); }
.chip.ask { background: var(--ol-surface); border-color: var(--ol-pend); color: var(--ol-pend); }
.chip.yours { background: var(--ol-surface); border-color: var(--ol-safe); color: var(--ol-safe); }
.chip.setting { background: var(--ol-surface); }
ol.rules { padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rule .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quote { font-size: var(--ol-fs-13); color: var(--ol-muted); margin-top: 4px; padding: 6px 10px; background: var(--ol-paper); border-radius: var(--ol-r); }
.rule-ask, .rule-said { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 8px; font-size: var(--ol-fs-15); font-weight: 600; }
.rule-said { color: var(--ol-pend); }
.ctl { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; align-items: flex-end; }
.ctl input[type="number"] { width: 90px; }
table.labels tr.locked td { color: var(--ol-muted); }
table.labels select { margin-right: 6px; }
table.key tr.unmapped td { background: var(--ol-wash); }
table.key tr.edited td { background: var(--ol-today); }
.note { color: var(--ol-ink-2); font-weight: 600; }
ol.known { padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
ol.known p { font-size: var(--ol-fs-15); margin-top: 4px; }
ul.flags { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--ol-fs-15); }
details > summary { cursor: pointer; display: flex; align-items: center; min-height: var(--ol-h); }
/* flex on a summary drops the browser's triangle; every summary gets a chevron (CH 101326) */
details > summary:not(.faq-q):not([data-action="tc-toggle"])::before { content: ""; display: inline-block; flex: none; width: 10px; height: 10px; margin-right: var(--ol-sp-8); background: currentColor; clip-path: polygon(0 25%, 12% 12%, 50% 50%, 88% 12%, 100% 25%, 50% 75%); transform: rotate(-90deg); }
details[open] > summary:not(.faq-q):not([data-action="tc-toggle"])::before { transform: none; }
details.more.jwhy > summary { font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-ink); }
.fill { display: flex; flex-direction: column; gap: 18px; }
.fill-q { display: flex; flex-direction: column; gap: 4px; color: var(--ol-ink); }
.fill-q .q { font-size: var(--ol-fs-15); font-weight: 600; }
.fill-q .help { font-size: var(--ol-fs-15); font-weight: 400; color: var(--ol-muted); }
.fill-q textarea { width: 100%; font-weight: 400; }
.confirm-banner { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; border-color: var(--ol-line); background: var(--ol-surface); }
.confirm-banner p { flex: 1 1 320px; }
ol.confirm { padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 16px; list-style: decimal; }
ol.confirm li { padding-left: 4px; }
ol.confirm .c-title { font-weight: 600; }
ol.confirm li.done .c-title { color: var(--ol-muted); }
.c-ans { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.plan td.why .reason { display: inline; font-size: var(--ol-fs-15); color: var(--ol-ink); }
details.more summary { font-size: var(--ol-fs-13); color: var(--ol-muted); cursor: pointer; margin-top: 3px; }
details.more p { font-size: var(--ol-fs-13); color: var(--ol-ink-2); margin-top: 4px; }
ul.hand { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
ul.hand li { background: var(--ol-paper); border: 1px solid var(--ol-line); border-radius: var(--ol-r); padding: 6px 10px; }
ul.hand li.over { border-color: var(--ol-line); background: var(--ol-surface); }
.date-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.notes-field { display: flex; margin-top: 14px; width: 100%; }
.notes-field textarea { width: 100%; font-weight: 400; color: var(--ol-ink); }
.away-form input[type="text"] { width: 100%; min-width: 0; }
.away-form .grow { flex: 1 1 180px; }
.print-notes { display: none; }
.fair-n { display: inline-flex; align-items: center; gap: 8px; }
.fair-n .mono { min-width: 2ch; text-align: center; }
.fair-n .btn { min-width: var(--ol-h); padding: 0; background: var(--ol-surface); border-color: var(--ol-ctl); text-decoration: none; font-size: var(--ol-fs-17); }
.jcall.answered .q { color: var(--ol-muted); }
input[type="date"]:focus, input[type="date"]:focus-within { outline: 2px solid var(--ol-ink); outline-offset: 2px; }
.head-row > div:first-child { min-width: 0; }

/* choices to make */
.jsum { margin: 2px 0 4px; font-size: var(--ol-fs-15); }
.jcalls > .muted.small { margin-bottom: 4px; }
.jcall { padding: 10px 0; scroll-margin-top: 96px; border-radius: var(--ol-r); }
.jcall .q { font-weight: 600; margin-bottom: 6px; }
.jcall .q .tag { vertical-align: 1px; margin-left: 6px; }
.opts { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.choice { flex: 1 1 250px; max-width: 420px; min-height: var(--ol-row); padding: 8px 14px; font-size: var(--ol-fs-15); line-height: 1.4; color: var(--ol-ink); }
.choice b { font-weight: 600; }
.choice.leave { border-style: dashed; background: transparent; color: var(--ol-ink-2); flex: 0 1 250px; }
.choice.leave b { font-weight: 400; }
.choice.committed { border-color: var(--ol-pend); }
.choice .committed-note { display: block; margin-top: 3px; font-weight: 600; color: var(--ol-pend); }
.choice[aria-pressed="true"] .committed-note, .choice[aria-pressed="true"] .cnt { color: var(--ol-on-today); }
.choice.leave[aria-pressed="true"] { background: var(--ol-paper); color: var(--ol-ink); border-style: solid; }
.change-report .keep-line { margin-top: 6px; }
.held { font-size: var(--ol-fs-13); color: var(--ol-muted); margin-top: 6px; }
.jcall .need { margin-top: 4px; }
.jbtns { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
p.jbtns { display: flex; margin-top: 6px; }
.jcall.folded { padding: 8px 0; }
.jline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--ol-fs-15); }
.jline .jwho { font-weight: 600; color: var(--ol-muted); }
.jline .chosen { flex: 1 1 320px; min-width: 0; order: 2; }
.jline .jbtns { margin-left: auto; order: 4; }
a.jump { color: var(--ol-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
a.tag.jump { text-decoration: none; }
.plan tbody tr { scroll-margin-top: 96px; }
.flash { animation: flash 1.6s var(--ol-ease); }
.plan tr.flash td { animation: flash 1.6s var(--ol-ease); }
@keyframes flash { 0%, 40% { outline: 2px solid var(--ol-ink); } 100% { outline: 2px solid transparent; } }   /* arrival is an outline, never a fill */
@media (prefers-reduced-motion: reduce) { .flash, .plan tr.flash td { animation: none; outline: 2px solid var(--ol-ink); } }

/* the day bar */
.daybar { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)) 44px; gap: 6px; margin-top: 14px; max-width: 640px; }
.daybar .wk { padding: 0; font-size: var(--ol-fs-20); line-height: 1; min-height: 48px; text-decoration: none; background: var(--ol-surface); border-color: var(--ol-ctl); }
.dayb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 48px; padding: 5px 2px; background: var(--ol-surface); border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); font-weight: 600; line-height: 1.2; }
.dayb .dn { font-size: var(--ol-fs-15); }
.dayb .dd { font-size: var(--ol-fs-13); font-weight: 400; color: var(--ol-muted); }
.dayb .tm { font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-ink); }
.dayb[aria-pressed="true"] { background: var(--ol-today); border-color: var(--ol-ink); color: var(--ol-on-today); outline: 2px solid var(--ol-ink); outline-offset: -3px; }
.dayb[aria-pressed="true"] .dd, .dayb[aria-pressed="true"] .tm { color: var(--ol-on-today); }
.head-card .date-row { margin-top: 10px; }
.head-card .date-pick { font-weight: 400; font-size: var(--ol-fs-15); }
.calls-pointer { margin-top: 12px; padding: 8px 12px; background: var(--ol-surface); border: 1px solid var(--ol-pend); border-radius: var(--ol-r); font-size: var(--ol-fs-15); color: var(--ol-pend); font-weight: 600; }
.change-report { border-color: var(--ol-line); background: var(--ol-surface); }
.change-report p + p, .change-report ul { margin-top: 6px; }
.change-report ul.dropped { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--ol-fs-15); }
.held-core { font-size: var(--ol-fs-13); color: var(--ol-muted); margin-top: 4px; }
.plan tr.nocover td { color: var(--ol-muted); background: var(--ol-paper); }
.plan tr.nocover td b { color: var(--ol-ink-2); font-weight: 600; }
.test-days-card { background: transparent; border-style: dashed; border-color: var(--ol-ctl); }
.test-days-card .test-days { margin-top: 6px; }
.c-group { margin-bottom: 2px; }
.c-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 4px; }
.c-why summary { font-size: var(--ol-fs-13); color: var(--ol-muted); }
.c-why p { margin-top: 4px; }
.c-note { display: flex; width: 100%; margin-top: 8px; }
.c-note textarea { width: 100%; font-weight: 400; color: var(--ol-ink); }
.chip.ask-said { background: var(--ol-surface); border-color: var(--ol-pend); color: var(--ol-pend); }
table.fair td.fair-na { color: var(--ol-ctl); }
.fair-how { margin-top: 8px; }
.fair-how p { margin-top: 4px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* FAQ */
.faq .faq-card { padding: 0; }
.faq-q { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 15px 18px; min-height: var(--ol-h); cursor: pointer; list-style: none; border-radius: var(--ol-r); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q h2 { font-size: var(--ol-fs-20); margin: 0; line-height: 1.25; }
.faq-q:focus-visible { outline: 2px solid var(--ol-ink); outline-offset: -2px; }
.faq-mark, .tc-chev { flex: none; width: 12px; height: 12px; margin-right: 2px; background: var(--ol-ink); clip-path: polygon(0 25%, 100% 25%, 50% 80%); }
.faq-card[open] > .faq-q { border-bottom: 1px solid var(--ol-line); border-radius: var(--ol-r) var(--ol-r) 0 0; }
.faq-card[open] .faq-mark { transform: rotate(180deg); }
.faq-a { padding: 14px 18px 18px; max-width: 760px; }
.faq-a p { margin-top: 10px; color: var(--ol-ink-2); }
.faq-a p:first-child { margin-top: 0; }
.faq-a h3 { font-size: var(--ol-fs-17); margin: 18px 0 0; }
.faq-a h3 + p { margin-top: 6px; }

/* sub pool, quiet: covering from inside the building is the main flow */
.pool-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pool-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--ol-line); }
.pool-list li:first-child { border-top: 0; }
.pool-list .btn { flex: none; }
.opened-note { margin: 6px 0 0; }
.abs-form:not(.has-sub) .sub-hours, .abs-form:not(.has-sub) ~ .sub-hours-note { display: none; }
.sub-opts { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; font-size: var(--ol-fs-15); color: var(--ol-ink-2); }
.sub-opts .opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sub-opts .btn, .abs-list .btn.sub-book { font-weight: 400; }
.pool-note { color: var(--ol-muted); }
.sub-opts .btn { margin-left: 0; }
.choice .opt-n { margin-right: 2px; }
.choice .tag.sugg { margin-left: 6px; vertical-align: 1px; color: var(--ol-ink-2); }
.choice .tag.sugg::before { background: var(--ol-ink-2); border-color: var(--ol-ink-2); }
.jcall .jwho { font-weight: 600; }
details.more-detail { padding: 12px 16px; }
details.more-detail > summary { cursor: pointer; font-weight: 600; }
.why-facts { margin: 6px 0; }
details.swap { margin-top: 4px; }
details.swap > summary { cursor: pointer; font-size: var(--ol-fs-13); color: var(--ol-ink); text-decoration: underline; text-underline-offset: 2px; }
.swap-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fair-num { width: 72px; }
.who-card { background: var(--ol-surface); }
.who-list { margin: 6px 0 10px 18px; padding: 0; }
.who-list li { margin: 3px 0; }
.email-card { background: var(--ol-surface); }
.email-list { list-style: none; margin: var(--ol-sp-12) 0 0; padding: 0; display: flex; flex-direction: column; }
.email-item { padding: var(--ol-sp-12) 0; border-top: 1px solid var(--ol-line); min-width: 0; }
.email-item:first-child { border-top: 0; padding-top: 0; }
.email-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ol-sp-4) var(--ol-sp-12); min-width: 0; }
.email-to { overflow-wrap: anywhere; }
.email-guess { font-size: var(--ol-fs-13); color: var(--ol-muted); }
@media (max-width: 480px) { .email-to { order: 3; flex: 1 0 100%; } }
.email-subj { margin: var(--ol-sp-8) 0 var(--ol-sp-4); font-weight: 600; overflow-wrap: anywhere; }
.email-body { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--ol-wash); padding: var(--ol-sp-12) var(--ol-sp-16); border-radius: var(--ol-r); font-size: var(--ol-fs-15); line-height: 1.5; min-width: 0; }
.email-more { margin-top: var(--ol-sp-8); }
.email-more > summary { font-weight: 600; }
/* CH 101526 condense: Emails and Who to tell are one strip under Approve; the detail folds */
.fold-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ol-sp-8) var(--ol-sp-16); }
.fold-top h2 { margin: 0; }
.fold-top .row-btns { margin-top: 0; }
.email-card > p, .who-card > p { margin: var(--ol-sp-8) 0 0; }
.email-nomail .status { margin-right: var(--ol-sp-4); }
.who-more { margin-top: var(--ol-sp-8); }
.who-more > summary { font-weight: 600; }
.daysheet { display: none; }
.pbtn { width: 100%; min-height: var(--ol-h); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px 14px; background: var(--ol-surface); border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pname { font-weight: 600; font-size: var(--ol-fs-15); }
.pmeta { font-size: var(--ol-fs-13); color: var(--ol-muted); }
.pstat { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 2px; }
.person-head .top-btns { margin: 0 0 10px; }
.person-head h1 { margin-bottom: 4px; }
.pool-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin-top: 12px; }
.pool-toggle { font-weight: 600; }
.pool-why { flex: 1 1 260px; }
.pool-why input[type="text"] { width: 100%; min-width: 0; font-weight: 400; }
.pool-rule, .person-head .need { margin-top: 8px; }
.lock-line { margin-top: 14px; padding: 10px 12px; background: var(--ol-paper); border-radius: var(--ol-r); }
.pdays { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 10px 0 14px; max-width: 520px; }
.pdays .dayb { min-height: 48px; position: relative; }
.pdot { position: absolute; top: 3px; right: 4px; min-width: 18px; padding: 0 5px; border-radius: var(--ol-r); background: var(--ol-surface); border: 1px solid var(--ol-pend); color: var(--ol-pend); font-size: var(--ol-fs-13); font-weight: 600; line-height: 16px; text-align: center; }
.pdays .dayb[aria-pressed="true"] .pdot { background: var(--ol-surface); }
.pweek { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pblock { display: grid; grid-template-columns: 150px minmax(0, 1fr) 230px; gap: 4px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--ol-line); border-radius: var(--ol-r); background: var(--ol-surface); }
.pblock .ptop { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pblock .pwhat { font-weight: 600; overflow-wrap: anywhere; }
.pblock .plabel, .pblock .plock { grid-column: 3; }
.pblock .plabel select { width: 100%; }
.pblock .pchanged, .pblock > p.muted { grid-column: 2 / span 2; }
.pblock .pchanged { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ol-pend); font-weight: 600; }
.pblock.changed { border-color: var(--ol-line); background: var(--ol-surface); }
.pblock.locked .pwhat { color: var(--ol-muted); }
.plock { color: var(--ol-muted); }
.fill-group { margin: 6px 0 -6px; }
.fill-q label.q { display: block; font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-ink); }
.we-think { font-size: var(--ol-fs-15); color: var(--ol-ink); background: var(--ol-paper); border-radius: var(--ol-r); padding: 4px 8px; }
.fill-confirm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ol-muted); }
.okfirst-ctl { margin-top: 10px; }
.okfirst-ctl p { margin: 2px 0 0; }
.okfirst-toggle { font-weight: 600; }
.tag.unit { color: var(--ol-ink-2); }
.fill-q.answered .q { display: block; font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-ink); }
.answered-by { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.answered-by .quote { flex-basis: 100%; margin-top: 0; color: var(--ol-ink); }
.earlier-note { margin-top: 4px; }
table.labels tr.lastchoice td { background: var(--ol-wash); }
.tag.lastchoice { white-space: nowrap; }

/* the tour */
.tour-btn, .day-reset-btn { min-height: var(--ol-h); flex: none; }
.head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ol-sp-4) var(--ol-sp-12); margin: 0; }
.head-meta .btn.quiet.small.tour-btn, .head-meta .btn.quiet.small.day-reset-btn { padding-left: 0; }
.day-reset-ask { margin-top: var(--ol-sp-12); border-color: var(--ol-ink); }   /* critic 101426: not the pend orange of the choice flag */   /* CH 101426: Start the day over asks first */
.day-reset-ask .row-btns .btn { min-height: var(--ol-h); }
.defaults-list { margin: 0; padding: 0; list-style: none; }   /* critic 101426 P1: two columns, so the card is not half empty at 1440 */
.defaults-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ol-sp-24); padding: var(--ol-sp-12) 0; border-top: 1px solid var(--ol-line); }
.defaults-list .dflt-now { color: var(--ol-ink-2); }
@media (max-width: 900px) { .defaults-list li { grid-template-columns: minmax(0, 1fr); gap: var(--ol-sp-4); } }
.help-head .row-btns .btn { min-height: var(--ol-h); }
.status.danger { color: var(--ol-danger); }
.bar-states { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ol-sp-4); }
.ok-line .bar-states { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: var(--ol-sp-4) var(--ol-sp-12); vertical-align: middle; }
.bar-states .status { margin: 0; padding: 0; }
.bar-states .tag { margin: 0; }
.ok-line .bar-states { align-items: center; }
.ok-line .bar-states { margin-right: var(--ol-sp-12); }
.spots-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ol-sp-8) var(--ol-sp-12); }
.faq-tour { padding: 0 18px 18px; }
.faq-tour .btn { min-height: var(--ol-h); }
.tour-card { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 420px; max-width: calc(100% - 16px); background: var(--ol-surface); border: 2px solid var(--ol-ink); border-radius: var(--ol-r); box-shadow: var(--ol-e1); padding: 14px 16px 12px; }
.tour-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-eyebrow { font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-muted); white-space: nowrap; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 18px; height: 6px; border-radius: var(--ol-r); background: var(--ol-line); }
.tour-dots i.done { background: var(--ol-safe); }
.tour-dots i.on { background: var(--ol-primary); }
.tour-card h2 { font-size: var(--ol-fs-20); margin: 6px 0 4px; }
.tour-card h2:focus { outline: none; }
.tour-cap { margin: 0; font-size: var(--ol-fs-15); line-height: 1.45; }
.tour-why { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tour-jump { display: block; width: 100%; min-height: var(--ol-h); text-align: left; background: var(--ol-surface); border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); padding: 6px 10px; font-size: var(--ol-fs-15); line-height: 1.35; color: var(--ol-ink); }
.tour-jump b { color: var(--ol-ink); font-weight: 600; margin-right: 2px; }
.tour-note { margin: 8px 0 0; font-size: var(--ol-fs-13); color: var(--ol-muted); }
.tour-btns { display: flex; gap: 8px; margin-top: 10px; }
.tour-btns .btn { min-height: var(--ol-h); }
.tour-btns [data-tour="next"] { flex: 1; }
.tour-hl { outline: 2px solid var(--ol-pend); outline-offset: 2px; border-radius: var(--ol-r); }
.plan tr.tour-hl td { background: var(--ol-wash); }
.tour-primary { scroll-margin-top: 90px; }
.tour-tag { background: var(--ol-surface); white-space: normal; display: inline-flex; max-width: 100%; padding: 0 6px; border-radius: var(--ol-r); }
@media (prefers-reduced-motion: no-preference) { .tour-card { transition: opacity var(--ol-base) var(--ol-ease); } }

/* adding an absence */
.entry { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ol-line); }
.entry-seg { display: flex; width: 100%; max-width: 720px; }
.entry-seg button { flex: 1 1 0; min-width: 0; font-size: var(--ol-fs-15); line-height: 1.2; padding: 8px 10px; white-space: normal; }
.entry + .abs-form { border-top: 0; }
.intake, .batch { padding-top: 12px; }
.intake-box { display: flex; width: 100%; font-size: var(--ol-fs-15); color: var(--ol-ink); }
.intake-box textarea { width: 100%; min-height: 84px; font-weight: 400; resize: vertical; }
.intake-help, .batch-help { margin: 6px 0 0; }
.intake .row-btns { margin-top: 10px; }
.readback { margin-top: 14px; padding: 12px 14px 14px; border: 1px solid var(--ol-line); border-radius: var(--ol-r); background: var(--ol-paper); }
.readback h3 { margin: 0 0 8px; font-size: var(--ol-fs-17); }
.rb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rb { position: relative; padding: 10px 12px 10px 30px; background: var(--ol-surface); border: 1px solid var(--ol-line); border-radius: var(--ol-r); }
.rb::before { content: ""; position: absolute; left: 12px; top: 17px; width: 8px; height: 8px; background: var(--ol-ctl); }
.rb p { margin: 0; line-height: 1.45; }
.rb p + p { margin-top: 4px; }
.rb .opts { margin-top: 8px; }
.rb-ok::before { background: var(--ol-safe); }
.rb-ask { background: var(--ol-surface); border-color: var(--ol-line); }
.rb-ask::before { background: var(--ol-pend); }
.rb-ask .rb-q { font-weight: 600; }
.rb-bad { border-color: var(--ol-line); background: var(--ol-surface); }
.rb-bad::before { background: var(--ol-danger); }
.rb-grey { color: var(--ol-muted); background: transparent; }
.rb-said { color: var(--ol-muted); }
.rb-ok .rb-said { color: inherit; }
.rb-where { margin-left: 2px; vertical-align: 1px; }
.rb-pick { display: flex; margin-top: 8px; max-width: 380px; }
.rb-pick select { width: 100%; }
.rb-actions { margin-top: 12px; }
.rb-status { margin: 6px 0 0; }
.batch-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 10px 0; border-bottom: 1px solid var(--ol-line); }
.batch-row .bwho select { min-width: 200px; }
.batch-read h3 { margin-bottom: 6px; }
.plan details > summary, ul.orig details > summary { min-height: 0; padding: 14px 0; margin: -14px 0; }

/* teacher view: schedule and phone preview */
.tv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 10px; }
.tv-switch, .pseg { display: inline-flex; border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); overflow: hidden; background: var(--ol-surface); }
.tv-switch button, .pseg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ol-h); padding: 0 16px; border: 0; border-left: 1px solid var(--ol-line); border-radius: 0; background: transparent; color: var(--ol-ink-2); font-weight: 600; font-size: var(--ol-fs-15); white-space: nowrap; }
.tv-switch button:first-child, .pseg button:first-child { border-left: 0; }
.tv-switch button[aria-pressed="true"], .pseg button[aria-pressed="true"] { background: var(--ol-today); color: var(--ol-on-today); outline: 2px solid var(--ol-ink); outline-offset: -2px; }
.pseg { margin-top: 14px; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }   /* look B: the phone track fits the phone, so its text is not stranded left (S9) */
.pv-stagebg { display: flex; justify-content: center; padding: 40px 24px 44px; border-radius: var(--ol-r); border: 1px solid var(--ol-line); background: var(--ol-paper); }

/* the teacher's phone: ink frame, surface screen, one shadow at most */
.pv-device { position: relative; width: 384px; height: 790px; padding: 11px; border-radius: var(--ol-r); background: var(--ol-ink); box-shadow: var(--ol-e1); }
.pv-device::before { content: ""; position: absolute; right: -3px; top: 188px; width: 3px; height: 92px; border-radius: var(--ol-r); background: var(--ol-ink-2); }
.pv-device::after { content: ""; position: absolute; left: -3px; top: 150px; width: 3px; height: 56px; border-radius: var(--ol-r); background: var(--ol-ink-2); }
.pv-screen { position: relative; height: 100%; overflow: hidden; border-radius: var(--ol-r); background: var(--ol-surface); color: var(--ol-ink); isolation: isolate; }
.pv-island { position: absolute; z-index: 4; top: 11px; left: 50%; width: 112px; height: 24px; margin-left: -56px; border-radius: var(--ol-r); background: var(--ol-ink); }
.pv-home { position: absolute; z-index: 4; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: var(--ol-r); background: var(--ol-ink); }
.pv-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pv-scroll::-webkit-scrollbar { display: none; }
.pv-scroll:focus-visible { outline: 2px solid var(--ol-ink); outline-offset: -4px; border-radius: var(--ol-r); }
.pv-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 46px 20px 12px; background: var(--ol-paper); color: var(--ol-ink); border-bottom: 1px solid var(--ol-line); }
.pv-logo { width: 30px; height: 32px; padding: 2px; flex: none; border-radius: var(--ol-r); background: var(--ol-surface); object-fit: contain; }
.pv-nw { white-space: nowrap; }
.pv-brand { font-weight: 600; font-size: var(--ol-fs-17); color: var(--ol-ink); line-height: 1; }
.pv-me { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 10px 3px 3px; border-radius: var(--ol-r); background: var(--ol-surface); border: 1px solid var(--ol-line); }
.pv-av { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--ol-r-round); background: var(--ol-primary); color: var(--ol-on-primary); font-weight: 600; font-size: var(--ol-fs-13); }
.pv-who { font-weight: 600; font-size: var(--ol-fs-13); color: var(--ol-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pv-body { padding: 18px 20px 40px; }
.pv-date { margin-bottom: 16px; }
.pv-day { font-weight: 800; font-size: var(--ol-fs-32); line-height: 1.05; letter-spacing: -0.02em; }
.pv-dm { font-size: var(--ol-fs-15); color: var(--ol-muted); margin-top: 3px; }
.pv-card { border-radius: var(--ol-r); padding: 16px 18px 18px; }
.pv-kicker { display: flex; align-items: center; gap: 6px; font-size: var(--ol-fs-13); font-weight: 600; margin-bottom: 8px; }
.pv-summary .pv-lead { display: block; font-size: var(--ol-fs-20); line-height: 1.32; font-weight: 600; }
.pv-summary .pv-more { display: block; font-size: var(--ol-fs-15); line-height: 1.5; margin-top: 8px; }
.pv-card.is-changed { color: var(--ol-on-today); background: var(--ol-today); }
.pv-card.is-changed .pv-kicker, .pv-card.is-changed .pv-more { color: var(--ol-on-today); }
.pv-card.is-same { background: var(--ol-surface); border: 1px solid var(--ol-line); }
.pv-card.is-same .pv-kicker { color: var(--ol-muted); }
.pv-ok { width: 16px; height: 16px; stroke-width: 2.2; }
.pv-h { font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-muted); margin: 26px 0 12px; }
.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-block { --pv-mark: var(--ol-ctl); position: relative; display: grid; grid-template-columns: 50px 16px minmax(0, 1fr); column-gap: 10px; padding-bottom: 12px; }
.pv-block.changed { --pv-mark: var(--ol-ink); }
.pv-block.prot { --pv-mark: var(--ol-muted); }   /* protected time is calm, not an alarm */
.pv-time { display: flex; flex-direction: column; align-items: flex-end; padding-top: 3px; white-space: nowrap; }
.pv-time b { font-size: var(--ol-fs-15); font-weight: 600; line-height: 1.2; }
.pv-end { font-size: var(--ol-fs-13); color: var(--ol-muted); line-height: 1.4; }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv-rail { position: relative; }
.pv-rail::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: -20px; width: 2px; background: var(--ol-line); }
.pv-block:last-child .pv-rail::before { display: none; }
.pv-rail::after { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 12px; border-radius: var(--ol-r-round); box-sizing: border-box; background: var(--ol-surface); border: 2px solid var(--pv-mark); }
.pv-block.changed .pv-rail::after { background: var(--pv-mark); }
.pv-what { min-width: 0; padding: 2px 0 4px; }
.pv-now { font-size: var(--ol-fs-15); line-height: 1.4; color: var(--ol-ink-2); overflow-wrap: anywhere; }
.pv-block.changed .pv-what { padding: 10px 12px 12px; border-radius: var(--ol-r); background: var(--ol-today); border: 1px solid var(--ol-line); }
.pv-block.changed .pv-now { font-weight: 600; color: var(--ol-on-today); }
.pv-block.changed .pv-was, .pv-block.changed .pv-was-l, .pv-block.changed .pv-support { color: var(--ol-on-today); }
.pv-block.changed .pv-was s { text-decoration-color: var(--ol-on-today); }
.pv-tag { display: inline-block; margin-bottom: 4px; font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-on-today); }
.pv-was { margin-top: 6px; font-size: var(--ol-fs-13); line-height: 1.4; color: var(--ol-muted); overflow-wrap: anywhere; }
.pv-was-l { font-size: var(--ol-fs-13); font-weight: 600; margin-right: 3px; color: var(--ol-muted); }
.pv-was s { text-decoration-line: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--ol-muted); }
.pv-support { margin-top: 6px; font-size: var(--ol-fs-13); line-height: 1.4; color: var(--ol-ink-2); font-weight: 600; overflow-wrap: anywhere; }
.pv-prot { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 8px 2px 6px; border-radius: var(--ol-r); background: var(--ol-paper); color: var(--ol-ink-2); border: 1px solid var(--ol-line); font-size: var(--ol-fs-13); font-weight: 600; }
.pv-prot .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.pv-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--ol-r); font-size: var(--ol-fs-15); font-weight: 600; text-align: center; }
.pv-foot .ic { width: 17px; height: 17px; }
.pv-foot.ok { background: var(--ol-surface); color: var(--ol-safe); }
.pv-foot.draft { background: var(--ol-surface); color: var(--ol-pend); }
.pv-panel { padding: 24px 26px 26px; }
.pv-panel h2 { font-size: var(--ol-fs-20); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; }
.pv-panel h3 { font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-muted); margin: 22px 0 10px; }
.pv-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--ol-r); background: var(--ol-today); border: 1px solid var(--ol-line); color: var(--ol-on-today); font-size: var(--ol-fs-15); }
.pv-steps, .pv-alerts { list-style: none; margin: 0; padding: 0; counter-reset: pv; display: flex; flex-direction: column; gap: 10px; }
.pv-steps li, .pv-alerts li { counter-increment: pv; position: relative; padding-left: 38px; line-height: 1.5; min-height: 26px; }
.pv-steps li::before, .pv-alerts li::before { content: counter(pv); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: var(--ol-r-round); display: grid; place-items: center; background: var(--ol-surface); border: 2px solid var(--ol-ctl); color: var(--ol-ink); font-size: var(--ol-fs-13); font-weight: 600; }
.pv-rule { margin-top: 12px; padding-left: 38px; color: var(--ol-muted); font-size: var(--ol-fs-15); }
.pv-bts { display: flex; flex-direction: column; gap: 12px; }
.pv-item { padding: 14px 16px; border-radius: var(--ol-r); background: var(--ol-paper); border: 1px solid var(--ol-line); }
.pv-item p { font-size: var(--ol-fs-15); line-height: 1.5; }
.pv-item p + p { margin-top: 6px; }
.pv-item-h { font-weight: 600; font-size: var(--ol-fs-15) !important; margin-bottom: 4px; }
.pv-alerts { gap: 8px; margin-top: 4px; }
.pv-alerts li { font-size: var(--ol-fs-15); }
.pv-changed { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--ol-r); background: var(--ol-surface); color: var(--ol-pend); font-size: var(--ol-fs-15); line-height: 1.35; font-weight: 600; }
.pv-changed button { margin-left: 6px; min-height: var(--ol-h); padding: 2px 12px; border-radius: var(--ol-r); border: 1px solid var(--ol-ctl); background: var(--ol-surface); color: var(--ol-ink); font: inherit; font-size: var(--ol-fs-15); font-weight: 600; cursor: pointer; }
.pv-usual { margin-top: 12px; }
.pv-usual > summary { cursor: pointer; font-weight: 600; min-height: var(--ol-h); display: flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .pv-scroll { scroll-behavior: auto; } }

/* standing meetings, the week grid */
.mt-head .row-btns { margin-top: 14px; }
.mt-empty { margin-top: 12px; padding: 12px 14px; border-radius: var(--ol-r); background: var(--ol-paper); border: 1px solid var(--ol-line); color: var(--ol-ink); font-size: var(--ol-fs-15); }
.mt-form-card h2 { font-size: var(--ol-fs-20); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; }
.mt-form { display: flex; flex-direction: column; gap: 16px; }
.mt-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.mt-fields label, .mt-times label { min-width: 0; }
.mt-fields select, .mt-fields input[type="text"], .mt-times select { width: 100%; min-width: 0; }
.mt-form input[type="text"] { font-weight: 400; color: var(--ol-ink); }
.mt-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.mt-set legend { padding: 0; margin-bottom: 6px; font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-ink-2); }
.mt-days { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt-chip, .mt-opt { position: relative; display: inline-flex; flex-direction: row; gap: 0; color: var(--ol-ink); }
.mt-chip input, .mt-opt input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.mt-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: var(--ol-h); padding: 0 12px; border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); background: var(--ol-surface); font-size: var(--ol-fs-15); font-weight: 600; }
.mt-chip input:checked + span { background: var(--ol-today); border-color: var(--ol-ink); color: var(--ol-on-today); outline: 2px solid var(--ol-ink); outline-offset: -3px; }
.mt-chip input:focus-visible + span, .mt-opt input:focus-visible + span { outline: 2px solid var(--ol-ink); outline-offset: 2px; }
.mt-every { min-height: var(--ol-h); }
.mt-days + p { margin-top: 6px; }
.mt-times { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 12px 16px; align-items: end; }
.mt-seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mt-opt span { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: var(--ol-h); padding: 10px 14px; border: 1px solid var(--ol-ctl); border-radius: var(--ol-r); background: var(--ol-surface); }
.mt-opt b { font-size: var(--ol-fs-15); font-weight: 600; }
.mt-opt small { font-size: var(--ol-fs-13); color: var(--ol-muted); font-weight: 400; }
.mt-opt input:checked + span { border-color: var(--ol-ink); outline: 2px solid var(--ol-ink); outline-offset: -3px; background: var(--ol-today); }
.mt-opt input:checked + span b { color: var(--ol-on-today); }
.mt-opt input:checked + span small { color: var(--ol-on-today); }
.mt-btns { margin-top: 0; }
.mt-week h2, .mt-all h2 { font-size: var(--ol-fs-20); font-weight: 800; letter-spacing: -0.01em; }
.wk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-size: var(--ol-fs-15); color: var(--ol-muted); font-weight: 600; }
.wk-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.wk-key { display: inline-block; width: 16px; height: 16px; border-radius: var(--ol-r); }
.wk-key.never { background: var(--ol-wash-2); border: 1px solid var(--ol-ink); }
.wk-key.soft { background: var(--ol-surface); border: 1px dashed var(--ol-ctl); }
.wk-grid { display: grid; grid-template-columns: 96px repeat(5, minmax(0, 1fr)); gap: 6px; }
.wk-day { padding: 0 4px 8px; border-bottom: 1px solid var(--ol-rule); font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-muted); }
.wk-time { padding: 12px 8px 0 0; text-align: right; font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-muted); white-space: nowrap; }
.wk-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 58px; padding: 5px; border-radius: var(--ol-r); background: var(--ol-paper); }
.wk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 48px; padding: 7px 10px; border-radius: var(--ol-r); text-align: left; font-size: var(--ol-fs-13); line-height: 1.3; overflow-wrap: anywhere; }
.wk-tile.never { background: var(--ol-wash-2); border: 1px solid var(--ol-ink); color: var(--ol-on-today); }
.wk-tile.soft { background: var(--ol-surface); border: 1px dashed var(--ol-ctl); color: var(--ol-ink); }
.wk-name { font-weight: 600; }
.wk-why { font-size: var(--ol-fs-13); }
.wk-tile.soft .wk-why { color: var(--ol-muted); }
.wk-tt, .wk-none { display: none; }
.mt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--ol-line); border-radius: var(--ol-r); background: var(--ol-surface); }
.mt-row.soft { border-style: dashed; border-color: var(--ol-ctl); }
.mt-main { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; min-width: 0; }
.mt-when b { font-weight: 600; }
.mt-when .mono, .person-meetings .mono { white-space: nowrap; }
.mt-who { font-weight: 600; }
.mt-why { color: var(--ol-muted); }
.mt-strength.never { color: var(--ol-ink); }
.mt-strength.never::before { background: var(--ol-ink); border-color: var(--ol-ink); }
.mt-strength.soft { color: var(--ol-ink-2); }
.mt-rowbtns { display: flex; gap: 6px; }
.person-meetings { margin-top: 14px; padding: 10px 12px; border-radius: var(--ol-r); background: var(--ol-paper); border: 1px solid var(--ol-line); }
.person-meetings ul { margin: 4px 0 8px; padding-left: 18px; }
.mt-tag { color: var(--ol-ink-2); }
.long-tag, .tag.hand { color: var(--ol-ink-2); }

/* the phone link card */
.tc-card { padding: 0; overflow: hidden; }
.tc-card > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--ol-row); padding: 12px 20px; cursor: pointer; border-radius: var(--ol-r); }
.tc-card > summary::-webkit-details-marker { display: none; }
.tc-card > summary:focus-visible { outline-offset: -3px; }
.tc-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--ol-fs-17); }
.tc-title .ic { width: 22px; height: 22px; padding: 3px; border-radius: var(--ol-r); background: var(--ol-wash-2); color: var(--ol-ink); stroke-width: 1.9; box-sizing: content-box; }
.tc-chev { margin: 0 6px 0 0; }
.tc-card[open] .tc-chev { transform: rotate(180deg); }
.tc-card[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tc-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start; padding: 20px 20px 22px; border-top: 1px solid var(--ol-line); }
.tc-qr { padding: 10px; border-radius: var(--ol-r); background: var(--ol-surface); border: 1px solid var(--ol-line); line-height: 0; }
.tc-qr svg { display: block; width: 168px; height: 168px; }
.tc-main { min-width: 0; }
.tc-lead { font-size: var(--ol-fs-15); line-height: 1.5; max-width: 62ch; margin-bottom: 14px; }
.tc-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 14px; border-radius: var(--ol-r); background: var(--ol-paper); border: 1px solid var(--ol-line); margin-bottom: 16px; max-width: 720px; }
.tc-url { flex: 1 1 260px; min-width: 0; font-size: var(--ol-fs-15); line-height: 1.45; color: var(--ol-ink-2); overflow-wrap: anywhere; word-break: break-all; }
.tc-copy { flex: none; }
.tc-steps { list-style: none; margin: 0; padding: 0; counter-reset: tc; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.tc-steps li { counter-increment: tc; position: relative; padding-left: 38px; line-height: 1.5; min-height: 26px; }
.tc-steps li::before { content: counter(tc); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: var(--ol-r-round); display: grid; place-items: center; background: var(--ol-surface); border: 2px solid var(--ol-ctl); color: var(--ol-ink); font-size: var(--ol-fs-13); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .faq-mark, .tc-chev { transition: transform var(--ol-fast) var(--ol-ease); } }

/* protected times */
.prot-card { padding: 22px 24px 18px; }
.pt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.pt-titles { flex: 1 1 420px; min-width: 0; }
.prot-card h2 { font-weight: 800; font-size: var(--ol-fs-24); letter-spacing: -0.015em; margin-bottom: 6px; }
.pt-hrow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pt-hrow h2 { margin-bottom: 0; }
.pt-lead { max-width: 70ch; font-size: var(--ol-fs-15); }
.pt-print { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.pt-print .ic { width: 18px; height: 18px; }
.pt-printed { display: none; }
.pt-legend { list-style: none; margin: 16px 0 14px; padding: 12px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; border-radius: var(--ol-r); background: var(--ol-paper); }
.pt-legend li { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: var(--ol-fs-15); color: var(--ol-muted); line-height: 1.45; }
.pt-legend .pt-chip { flex: none; }
.pt-chip { display: inline-block; padding: 1px 9px; border-radius: var(--ol-r); border: 1px solid; font-size: var(--ol-fs-13); font-weight: 600; line-height: 1.55; white-space: nowrap; }
.pt-chip.t-never { background: var(--ol-surface); border-color: var(--ol-danger); color: var(--ol-danger); }
.pt-chip.t-call { background: var(--ol-today); border-color: var(--ol-ink); color: var(--ol-on-today); }
.pt-chip.t-keep { background: var(--ol-surface); border-color: var(--ol-pend); color: var(--ol-pend); }
.pt-chip.t-last { background: var(--ol-surface); border-color: var(--ol-ctl); color: var(--ol-ink); }
.prot-table { table-layout: fixed; }
.prot-table thead th:nth-child(1) { width: 14%; } .prot-table thead th:nth-child(2) { width: 16%; } .prot-table thead th:nth-child(3) { width: 22%; } .prot-table thead th:nth-child(4) { width: 24%; } .prot-table thead th:nth-child(5) { width: 24%; }
.prot-table .pt-tier { white-space: normal; }
.prot-table thead th { font-size: var(--ol-fs-13); padding: 6px 12px 8px; }
.prot-table tbody.pt-group { border-top: 1px solid var(--ol-rule); }
.prot-table tbody.pt-group:first-of-type { border-top: 0; }
.prot-table td, .prot-table tbody th { padding: 10px 12px; border-bottom: 0; vertical-align: top; overflow-wrap: anywhere; }
.prot-table tr.pt-more td { border-top: 1px dashed var(--ol-line); }
.prot-table .pt-person { font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-ink); text-align: left; border-bottom: 0; }
.pt-reason { font-size: var(--ol-fs-15); }
.pt-source { font-size: var(--ol-fs-15); color: var(--ol-ink-2); }
.pt-when { font-size: var(--ol-fs-15); line-height: 1.55; color: var(--ol-ink); }
.pt-line { display: block; }
.pt-days { font-weight: 600; }
.pt-span { white-space: nowrap; }
.pt-sep { display: none; }
.pt-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ol-line); }
.pt-empty { margin-top: 6px; }
.why-prot { margin-top: 6px; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--ol-ink); font-weight: 600; font-size: var(--ol-fs-15); text-decoration: underline; text-underline-offset: 2px; }
.linkbtn { padding: 12px 0; margin: -12px 0; }
.src-link { margin-left: 6px; color: inherit; font-weight: 600; }
.src-list { margin: 4px 0 10px 18px; padding: 0; font-size: var(--ol-fs-15); }
.src-card h2 { margin-top: 18px; }

/* long absences */
.entry-seg { max-width: 720px; }
.long-note { margin-left: 2px; }
.long-ask { flex-basis: 100%; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ol-pend); border-radius: var(--ol-r); background: var(--ol-surface); }
.long-ask p { margin: 0 0 6px; font-weight: 600; }
.long-form label.grow { flex: 1 1 100%; }
.long-form label.grow input { width: 100%; }
.long-form:not(.has-sub) .long-sub, .long-form:not(.has-sub) .long-other, .long-form:not(.has-other) .long-other { display: none; }
.long-hol { margin-top: 6px; }
.long-link { margin: 8px 0 0; }
.long-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.long-row { padding: 10px 0; border-top: 1px solid var(--ol-line); }
.long-row:first-child { border-top: 0; }
.long-row .row-btns { margin-top: 6px; }
.rules-history .rh-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rules-history .rh-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--ol-line); }
.rules-history .rh-line { flex: 1 1 22em; min-width: 0; overflow-wrap: anywhere; }
.rules-history .rh-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* the rules table */
.rt-head h1 { margin-bottom: 4px; }
.rt-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rt-chip { min-height: var(--ol-h); border: 1px solid var(--ol-ctl); background: var(--ol-surface); color: var(--ol-ink); border-radius: var(--ol-r); padding: 0 14px; font-size: var(--ol-fs-15); font-weight: 600; }
.rt-chip[aria-pressed="true"] { background: var(--ol-today); border-color: var(--ol-ink); color: var(--ol-on-today); outline: 2px solid var(--ol-ink); outline-offset: -3px; }
.rt-card { padding-top: 6px; }
table.rt { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.rt thead th:nth-child(1) { width: 19%; } table.rt thead th:nth-child(2) { width: 27%; } table.rt thead th:nth-child(3) { width: 33%; } table.rt thead th:nth-child(4) { width: 21%; }
table.rt td { overflow-wrap: anywhere; }
table.rt thead th { text-align: left; font-size: var(--ol-fs-13); color: var(--ol-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--ol-rule); }
table.rt td { padding: 11px 10px; border-bottom: 1px solid var(--ol-line); vertical-align: top; }
table.rt tr.why-open td { border-bottom: 0; }
table.rt td.rt-topic { width: 19%; }
table.rt td.rt-topic b { font-weight: 600; }
table.rt td.rt-sit { width: 27%; color: var(--ol-ink-2); }
table.rt td.rt-now { width: 32%; }
table.rt td.rt-act { width: 22%; }
table.rt tr.rt-group th { text-align: left; font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-muted); padding: 16px 10px 6px; border-bottom: 1px solid var(--ol-line); }
table.rt tr.rt-empty td { color: var(--ol-muted); padding: 16px 10px; }
.rt-link { display: inline; border: 0; background: none; padding: 0 2px; color: var(--ol-ink); font-size: var(--ol-fs-15); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rt-link { padding: 12px 2px; margin: -12px 0; }
.rt-link[aria-expanded="true"] { text-decoration-thickness: 2px; }
.rt-status { display: inline-block; max-width: 100%; font-size: var(--ol-fs-13); font-weight: 600; padding: 2px 9px; border-radius: var(--ol-r); white-space: normal; background: var(--ol-paper); color: var(--ol-muted); border: 1px solid var(--ol-line); }
.rt-status.s-conf { background: var(--ol-surface); color: var(--ol-safe); border-color: var(--ol-safe); }
.rt-status.s-ask, .rt-status.s-check, .rt-status.s-wrong { background: var(--ol-surface); color: var(--ol-pend); border-color: var(--ol-pend); }
.rt-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rt-btns .btn { font-weight: 600; }
.rt-ctl { margin-top: 6px; }
.rt-ctl .ctl { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; }
.rt-ctl select { max-width: 100%; }
.rt-open { padding: 8px 10px; border-radius: var(--ol-r); background: var(--ol-paper); border: 1px solid var(--ol-line); }
.rt-open .btn { margin-top: 4px; }
.rt-note { display: block; margin-top: 8px; font-size: var(--ol-fs-15); font-weight: 600; color: var(--ol-pend); }
.rt-note input { display: block; width: 100%; margin-top: 4px; font-weight: 400; color: var(--ol-ink); }
table.rt tr.rt-why td { padding: 0 10px 12px; border-bottom: 1px solid var(--ol-line); }
.rt-why-in { background: var(--ol-paper); border-radius: var(--ol-r); padding: 10px 12px; font-size: var(--ol-fs-15); color: var(--ol-ink-2); }
.rt-why-in p + p, .rt-why-in .quote + p, .rt-why-in p + .quote { margin-top: 6px; }
.rt-reset { margin: -4px 0 16px; }

/* the live phone beside the plan, laptop only */
.live-col { display: none; }
.status-line { margin: 10px 0 0; font-weight: 600; }
a.btn { color: var(--ol-ink); text-decoration: none; display: inline-flex; align-items: center; }
.daysheet .ds-line { display: block; }
.daysheet .ds-out .ds-line { display: inline; margin-right: 8px; }
.daysheet .ds-spots { margin: 0 0 6px; }
@media screen and (min-width: 1100px) {
  .shell.has-live { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 24px; max-width: 1620px; margin: 0 auto; padding-right: 24px; align-items: start; }
  .shell.has-live > .main { width: 100%; max-width: 1240px; margin: 0 0 0 auto; padding-right: 0; }
  .shell.has-live > .live-col:not([hidden]) { display: block; padding: 20px 0 40px; min-width: 0; }
  .live-h { font-size: var(--ol-fs-17); font-weight: 600; margin: 4px 0 10px; }
  .live-pick { display: flex; width: 100%; }
  .live-pick select { width: 100%; background-color: var(--ol-surface); }
  .live-note { margin: 8px 0 14px; color: var(--ol-muted); }
  .live-stage { display: flex; justify-content: center; }
  .live-stage .pv-device { zoom: 0.76; }
}
@media screen and (max-height: 500px) {
  .top { position: relative; }
}

/* counts beside names and the leader-coverage line (D2 demo) */
.cnt { display: inline-block; margin-left: 6px; font-size: var(--ol-fs-13); font-weight: 400; color: var(--ol-muted); white-space: nowrap; }
.leader-line .lead-sum { margin: 0; }
details.leader-line > summary { cursor: pointer; }
details.leader-line[open] > summary { margin-bottom: var(--ol-sp-12); }
.lead-bars { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ol-sp-8); align-items: flex-start; }
.lead-bars li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ol-sp-4); }
.lead-bars .plot { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: var(--ol-sp-64); border-bottom: 1px solid var(--ol-ctl); }
.lead-bars .bar { display: block; width: 100%; max-width: var(--ol-sp-40); height: calc(var(--v, 0) * 100%); background: var(--ol-wash-2); border-radius: var(--ol-r) var(--ol-r) 0 0; }
.lead-bars .now .bar { background: var(--ol-ink-2); }
.lead-bars .val { font-size: var(--ol-fs-13); font-weight: 600; color: var(--ol-ink); }
.lead-bars .lab { font-size: var(--ol-fs-13); line-height: 1.2; color: var(--ol-muted); text-align: center; min-height: calc(var(--ol-fs-13) * 2.4); }

/* tablet */
@media screen and (min-width: 761px) and (max-width: 1100px) {
  .plan { table-layout: fixed; }
  .plan th:nth-child(1) { width: 13%; }
  .plan th:nth-child(2) { width: 19%; }
  .plan th:nth-child(3) { width: 27%; }
  .plan th:nth-child(4) { width: 17%; }
  .plan th:nth-child(5) { width: 24%; }
  .plan td { overflow-wrap: anywhere; }
  .plan td.why { min-width: 0; }
  .plan td.t { white-space: normal; }
}
@media screen and (max-width: 1100px) and (min-width: 761px) {
  .prot-table thead th:nth-child(1) { width: 17%; } .prot-table thead th:nth-child(2) { width: 15%; } .prot-table thead th:nth-child(3) { width: 21%; } .prot-table thead th:nth-child(4) { width: 22%; } .prot-table thead th:nth-child(5) { width: 25%; }
  .pt-legend { grid-template-columns: 1fr; }
}
@media screen and (max-width: 1060px) {
  .pv-stage { grid-template-columns: minmax(0, 1fr); }
  .pv-stagebg { padding: 36px 16px 40px; }
  .mt-times { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mt-times .mt-block { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .lists > :only-child, .lists > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .faq-a { max-width: none; }
  .pt-lead { max-width: none; }
}
@media (max-width: 480px) {
  .approve-bar .status-foot { display: none; }
  .approve-bar .status-short { display: block; flex: 1 1 100%; margin: 0; font-size: var(--ol-fs-15); font-weight: 600; line-height: 1.35; color: var(--ol-ink); }
  .foot-full { display: block; }
}
@media (max-width: 560px) {
  .src-link { display: inline-block; padding: 12px 4px; margin: -12px 0; }
}

/* phone */
@media screen and (max-width: 760px) {
  /* CH 101326 critic: the tab strip wraps (nothing hidden) and stays pinned; the bar around it lets its children sit in the page */
  .top { display: contents; }
  .brand { padding: var(--ol-sp-8) var(--ol-sp-16) 0; }
  .sample-bar { padding: 0 var(--ol-sp-16); margin-top: var(--ol-sp-4); }
  .tabs { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; overflow: visible; padding: var(--ol-sp-4) var(--ol-sp-16) var(--ol-sp-8); background: var(--ol-paper); border-bottom: 1px solid var(--ol-line); margin-top: var(--ol-sp-8); }
  .admin-slot { padding: 0 var(--ol-sp-16); }
  .card.approve-bar { margin-inline: calc(var(--ol-sp-16) * -1); bottom: 0; border-radius: 0; border-inline-width: 0; padding: var(--ol-sp-8) var(--ol-sp-16); }
  .btn.block { width: 100%; }
  .approve-bar .btn.block { width: auto; flex: 1 1 0; min-width: 0; }
  .approve-bar .btn.big { min-height: var(--ol-h-block); }
  .approve-bar p { flex: 1 1 100%; }
  .admin-tabs { padding-top: 2px; }
  .brand-sub .brand-what { display: none; }
  .brand-date:not(:empty)::before { content: none; }
  .tabs button, .admin-tabs button { padding: 0 12px; }
  .main { padding: 14px 16px 48px; gap: 10px; }
  .card { padding: 12px 14px; }
  h1 { font-size: var(--ol-fs-24); }
  .scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .head-end { align-items: stretch; width: 100%; }
  .flags { justify-content: flex-start; }
  .stat { padding: 8px; }
  .stat .n { font-size: var(--ol-fs-24); }
  .lists { grid-template-columns: 1fr; gap: 10px; }
  .lists .card { padding: 12px 14px; }
  .list h3 { margin-bottom: 4px; }
  .list ul { gap: 4px; line-height: 1.35; padding-left: 16px; }
  .abs-form { gap: 6px 10px; padding-top: 10px; }
  .abs-form label:not(.check) { flex: 1 1 40%; }
  .abs-form label select { width: 100%; }
  .abs-form label:first-child { flex-basis: 100%; }
  .abs-form label, .notes-field { gap: 2px; }
  .notes-field { margin-top: 10px; }
  .pick, .pick select { width: 100%; min-width: 0; }
  .date-row, .date-pick, .date-pick input[type="date"] { width: 100%; }
  .date-row { flex-wrap: nowrap; }
  .date-row .date-pick { flex: 1 1 auto; width: auto; }
  .away-form label:not(.check) { flex: 1 1 40%; }
  .away-form label.grow { flex-basis: 100%; }
  .fair-n .btn { min-width: 44px; }
  label.check input[type="checkbox"] { width: 22px; height: 22px; }
  .abs-list li { padding: 10px 0; }
  .abs-list { margin-bottom: 10px; }
  .test-days .btn { padding: 0 10px; line-height: 1.3; }
  .test-days-card { padding: 8px 12px; }
  .confirm-banner { gap: 8px; }
  /* tables become stacked blocks */
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { border: 1px solid var(--ol-line); border-radius: var(--ol-r); margin-bottom: 10px; padding: 4px 0; background: var(--ol-surface); }
  td { border-bottom: 0; padding: 5px 12px; }
  td[data-h]::before { content: attr(data-h); display: block; font-size: var(--ol-fs-13); color: var(--ol-muted); font-weight: 600; margin-bottom: 1px; }
  .plan td.why { min-width: 0; }
  .plan tr.gap { border-color: var(--ol-danger); }
  .plan tr { display: grid; grid-template-columns: auto 1fr; column-gap: 0; padding: 5px 0; margin-bottom: 8px; line-height: 1.4; }
  .plan td { padding: 2px 12px; }
  .plan td[data-h="Time"] { padding-right: 0; }
  .plan td:nth-child(n+3) { grid-column: 1 / -1; }
  .plan td[data-h="Time"]::before, .plan td[data-h="Absent staff / class"]::before, .plan td[data-h="Assigned coverage"]::before, .plan td[data-h="Rationale"]::before { display: none; }
  .plan td[data-h="Assigned coverage"] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .plan td[data-h="Assigned coverage"] .chips { margin-top: 0; }
  .plan td[data-h="Original assignment affected"]::before { display: inline; margin-right: 6px; }
  .plan td[data-h="Original assignment affected"] ul.orig { display: inline; }
  .plan td[data-h="Original assignment affected"] ul.orig li { display: inline; }
  .plan td[data-h="Original assignment affected"] ul.orig li + li::before { content: ", "; }
  .plan td.why details.more { display: inline; }
  .plan td.why details.more summary { display: inline; margin-left: 4px; }
  .plan td.why details.more[open] p { display: block; }
  .plan td.why .reason { display: inline; }
  .plan td.none { display: none; }
  .plan tbody tr { scroll-margin-top: calc(var(--ol-sp-96) + var(--ol-sp-12)); }
  .plan tr.nocover { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 3px 0; margin-bottom: 4px; background: var(--ol-paper); font-size: var(--ol-fs-13); line-height: 1.3; }
  .plan tr.nocover td { background: transparent; padding: 1px 0 1px 10px; width: auto; }
  .plan tr.nocover td[data-h="Absent staff / class"] { padding-left: 0; }
  .plan tr.nocover td[data-h="Absent staff / class"] div { display: inline; margin-left: 4px; }
  .plan tr.nocover td[data-h="Assigned coverage"], .plan tr.nocover td[data-h="Original assignment affected"], .plan tr.nocover td[data-h="Rationale"] { display: none; }
  .nocover-key { margin-bottom: 6px; }
  .myday tr.changed { border-color: var(--ol-pend); }
  .myday tr { display: grid; grid-template-columns: 112px 1fr; padding: 2px 0; margin-bottom: 6px; }
  .myday td.t { padding-right: 4px; }
  .myday td { padding: 4px 10px; }
  .myday td[data-h="Time"]::before, .myday td[data-h="Normal day"]::before { display: none; }
  .myday tr:not(.changed) td[data-h="Today"] { display: none; }
  .myday td[data-h="Today"] { grid-column: 1 / -1; }
  table.fair td.fair-na { display: none; }
  /* choices */
  .choice, .choice.leave { flex: 1 1 100%; max-width: none; padding: 8px 12px; }
  .choice { line-height: 1.35; }
  .jcall { scroll-margin-top: calc(var(--ol-sp-96) + var(--ol-sp-12)); scroll-margin-bottom: calc(var(--ol-sp-96) + var(--ol-sp-40)); }
  #calls, .spots-card { scroll-margin-bottom: calc(var(--ol-sp-96) + var(--ol-sp-40)); }
  a.jump { padding: 6px 0; }
  a.tag.jump { display: inline-flex; align-items: center; min-height: var(--ol-h); padding: 0 12px; }
  .jline { gap: 2px 8px; line-height: 1.4; }
  .jline .jbtns { margin-left: auto; order: 2; }
  .jline .chosen { flex-basis: 100%; order: 3; }
  .jcall.folded { padding: 5px 0; }
  .continuity > p.small { font-size: var(--ol-fs-13); }
  ul.hand { gap: 6px; }
  ul.hand li { padding: 4px 8px; font-size: var(--ol-fs-15); line-height: 1.35; }
  details.more summary { margin-top: 0; }
  /* day bar */
  .daybar { grid-template-columns: 44px repeat(5, minmax(0, 1fr)) 44px; gap: 4px; }
  .dayb .dn, .dayb .dd, .dayb .tm { white-space: nowrap; }
  .head-card .date-row { flex-wrap: wrap; }
  .head-card .date-pick { flex-direction: row; align-items: center; gap: 8px; }
  .head-card .date-pick input[type="date"] { width: auto; flex: 1 1 auto; }
  /* faq */
  .faq-q { padding: 14px 16px; }
  .faq-q h2 { font-size: var(--ol-fs-17); }
  .faq-a { padding: 12px 16px 16px; }
  /* tour */
  .tour-card { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; padding: 10px 12px; }
  .tour-card h2 { margin-top: 4px; }
  .tour-note { display: none; }
  .tour-jump { padding: 5px 9px; }
  .head-row .tour-btn, .head-row .day-reset-btn { width: auto; }
  /* people */
  .plist { grid-template-columns: 1fr; }
  .pblock { grid-template-columns: minmax(0, 1fr); }
  .pblock .ptop { flex-direction: row; align-items: center; gap: 8px; }
  .pblock .plabel, .pblock .plock, .pblock .pchanged, .pblock > p.muted { grid-column: 1; }
  .pdays { gap: 4px; }
  .pool-why { flex-basis: 100%; }
  /* adding an absence */
  .entry-seg button { min-height: 48px; padding: 6px; }
  .batch-row .bwho { flex: 1 1 100%; }
  .batch-row .bwho select { width: 100%; min-width: 0; }
  .batch-row label:not(.check):not(.bwho) { flex: 1 1 40%; }
  .batch-row label select { width: 100%; }
  .batch-row .btn { margin-left: auto; order: 4; }
  .batch-row .bsub { order: 5; }
  .readback { padding: 10px 10px 12px; }
  .rb { padding: 8px 10px 8px 28px; }
  .rb::before { left: 10px; top: 15px; }
  /* teacher view */
  .tv-bar { margin-bottom: 8px; }
  .tv-switch { display: flex; width: 100%; }
  .tv-switch button { flex: 1 1 0; padding: 0 10px; }
  .tv-head.is-phone .changed-people { display: none; }
  .pv-stage { gap: 12px; }
  .pv-stagebg { margin: 0 -16px; padding: 0; border: 0; border-radius: 0; background: none; }
  .pv-device { width: 100%; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .pv-device::before, .pv-device::after, .pv-island, .pv-home { display: none; }
  .pv-screen { height: auto; overflow: visible; border-radius: 0; border-top: 1px solid var(--ol-line); border-bottom: 1px solid var(--ol-line); }
  .pv-scroll { position: static; overflow: visible; }
  .pv-scroll:focus-visible { border-radius: 0; outline-offset: -3px; }
  .pv-bar { padding: 12px 16px; }
  .pv-body { padding: 18px 16px 22px; }
  .pv-panel { padding: 18px 16px 20px; }
  /* standing meetings */
  .mt-fields, .mt-seg { grid-template-columns: minmax(0, 1fr); }
  .mt-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mt-chip span { min-width: 0; width: 100%; padding: 0 4px; }
  .mt-every { grid-column: 1 / -1; }
  .wk-grid { display: block; }
  .wk-corner, .wk-time { display: none; }
  .wk-day { margin: 16px 0 8px; padding-bottom: 6px; }
  .wk-day.first { margin-top: 4px; }
  .wk-cell { display: block; min-height: 0; padding: 0; background: none; margin-bottom: 6px; }
  .wk-cell:empty { display: none; }
  .wk-tile { min-height: 48px; }
  .wk-tt { display: block; font-size: var(--ol-fs-13); font-weight: 600; }
  .wk-none { display: block; margin: 0; font-size: var(--ol-fs-15); color: var(--ol-muted); }
  .mt-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mt-rowbtns { grid-column: 1 / -1; }
  .mt-rowbtns .btn { flex: 1 1 0; }
  /* phone link card */
  .tc-card > summary { padding: 10px 14px; }
  .tc-title { font-size: var(--ol-fs-17); }
  .tc-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 14px 18px; }
  .tc-qr { justify-self: center; }
  .tc-link { padding: 10px 10px 10px 12px; }
  .tc-copy { width: 100%; }
  /* protected times */
  .pseg { display: flex; width: 100%; }
  .pseg button { flex: 1 1 0; padding: 0 8px; }
  .prot-card { padding: 16px 14px 14px; }
  .prot-card h2 { font-size: var(--ol-fs-20); }
  .pt-print { width: 100%; justify-content: center; }
  .pt-legend { grid-template-columns: 1fr; padding: 10px 12px; }
  .pt-legend li { flex-direction: column; gap: 2px; }
  .prot-table, .prot-table tbody, .prot-table tr, .prot-table td, .prot-table tbody th { display: block; width: 100%; }
  .prot-table thead { display: none; }
  .prot-table tbody.pt-group { margin-bottom: 10px; padding: 4px 0 6px; border: 1px solid var(--ol-line); border-radius: var(--ol-r); background: var(--ol-surface); }
  .prot-table tbody.pt-group:first-of-type { border-top: 1px solid var(--ol-line); }
  .prot-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 0; border-radius: 0; margin: 0; padding: 0; background: none; }
  .prot-table tr.pt-more { margin: 4px 12px 0; padding-top: 4px; border-top: 1px dashed var(--ol-line); }
  .prot-table tr.pt-more td { border-top: 0; padding-left: 0; padding-right: 0; }
  .prot-table td, .prot-table tbody th { padding: 3px 12px; }
  .prot-table .pt-person { font-size: var(--ol-fs-17); padding-top: 8px; }
  .pt-source details.more summary, .person-head details.more summary { display: flex; align-items: center; min-height: var(--ol-h); }
  .prot-table .pt-tiercell { width: auto; padding-top: 9px; text-align: right; }
  .prot-table .pt-reason, .prot-table .pt-source, .prot-table .pt-when { grid-column: 1 / -1; }
  .prot-table td[data-h]::before { margin-bottom: 0; }
  .linkbtn { min-height: var(--ol-h); }
  /* the rules table */
  table.rt tr.rt-row { padding: 8px 0 10px; margin-bottom: 8px; }
  table.rt tr.rt-row.why-open { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  table.rt tr.rt-why { margin: -1px 0 8px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  table.rt tr.rt-why td { padding: 0 12px 10px; border: 0; }
  table.rt tr.rt-group, table.rt tr.rt-empty { border: 0; background: none; margin: 4px 0; }
  table.rt tr.rt-group th { display: block; padding: 10px 2px 4px; border: 0; }
  table.rt td { width: 100% !important; border: 0; padding: 3px 12px; }
  table.rt td.rt-topic::before, table.rt td.rt-sit::before, table.rt td.rt-act::before { display: none; }
  table.rt td.rt-topic { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--ol-fs-17); }
  table.rt td.rt-sit { color: var(--ol-muted); }
  table.rt td.rt-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 6px; }
  table.rt td.rt-act .rt-btns { margin-top: 0; }
  .rt-link { min-height: var(--ol-h); padding: 0 6px; }
  .rt-btns .btn { min-width: 88px; }
}
@media screen and (max-width: 560px) {
  .fair-num { min-height: var(--ol-h); }
  .rules-history .rh-act .btn { min-width: 64px; }
}

/* hover only where a mouse can hover; nothing sticks after a tap */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--ol-ink); }
  .btn.primary:not([disabled]):hover { background: var(--ol-ink); border-color: var(--ol-ink); }
  .btn.quiet:hover { border-color: transparent; }
  .btn[disabled]:hover { border-color: var(--ol-line); }
  .btn.quiet[disabled]:hover { border-color: transparent; }
  .tabs button:hover, .admin-tabs button:hover { color: var(--ol-ink); background: var(--ol-surface); }
  .tabs button[aria-current="page"]:hover, .admin-tabs button[aria-current="page"]:hover { background: var(--ol-today); }
  .choice:hover, .dayb:hover, .pbtn:hover, .tour-jump:hover { border-color: var(--ol-ink); }
  .mt-chip:hover span, .mt-opt:hover span { border-color: var(--ol-ink); }
  .faq-q:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .tv-switch button:hover, .pseg button:hover { color: var(--ol-ink); }
  a.tag.jump:hover { text-decoration: underline; }
  .rt-chip:hover { border-color: var(--ol-ink); }
}

/* print */
@page { size: letter; margin: 0.4in; }
@media print {
  .approve-bar { position: static; box-shadow: none; }
  .approve-actions, .blank { display: none !important; }
  body { background: var(--ol-surface); font-size: var(--ol-fs-13); }
  .top, .sample-bar, .notice, .data-warning, .test-days, .abs-form, .abs-list .btn, .abs-list .sub-name-in, .seg, .approve-bar .btn, .row-btns, .confirm-banner, details.more { display: none !important; }
  .main { padding: 0; max-width: none; display: block; zoom: 0.8; }
  .main > * { margin-bottom: 8px; }
  .jcall .choice[aria-pressed="false"] { display: none; }
  .jcall:not(.answered) .choice { display: block !important; padding: 3px 8px; }
  .card, .stat { border-color: var(--ol-ctl); break-inside: avoid; padding: 8px 10px; }
  .plan-card, .lists .card { break-inside: auto; }
  .plan { table-layout: fixed; }
  .plan thead { display: table-header-group; }
  .plan th { padding: 4px 6px; }
  .plan th:nth-child(1) { width: 12%; } .plan th:nth-child(2) { width: 20%; } .plan th:nth-child(3) { width: 24%; } .plan th:nth-child(4) { width: 24%; } .plan th:nth-child(5) { width: 20%; }
  .plan td { padding: 5px 6px; }
  .plan td.t { white-space: normal; }
  .plan td.why { min-width: 0; }
  .step, .tag, .lbl { padding: 0 5px; }
  .plan tr { break-inside: avoid; }
  .lists { grid-template-columns: 1fr 1fr; gap: 8px; }
  .list ul { gap: 3px; }
  h1 { font-size: var(--ol-fs-20); }
  .day-changes .abs-form, .notes-field, .jcall .btn, .fair-n .btn, .date-row { display: none !important; }
  .print-notes { display: block; margin-top: 6px; }
  .print-notes:empty { display: none; }
  a.jump, .jcall .jbtns { display: none !important; }
  .daybar, .calls-pointer, .change-report, .test-days-card, .c-note { display: none !important; }
  .plan tr.nocover td { background: var(--ol-surface); padding: 1px 6px; color: var(--ol-muted); line-height: 1.25; }
  .plan tr.nocover td b { font-weight: 600; }
  .plan tr.nocover td .small { display: inline; margin-left: 4px; }
  .plan tr.nocover td.why, .plan tr.nocover td[data-h="Original assignment affected"] span { display: none; }
  .plan tr.nocover td.why { display: table-cell; }
  .plan tr.nocover td.why .reason { display: none; }
  .day-changes > p.muted.small, .abs-form + p.small, .jcalls > p.muted.small, .continuity > p.small, .nocover-key { display: none !important; }
  .subpool-card .btn, .step0-card .btn { display: none; }
  .tv-switch, .pv-panel { display: none !important; }
  .pv-device { box-shadow: none; }
  .mt-form-card, .mt-rowbtns, .mt-head .row-btns { display: none !important; }
  .tc-card { display: none !important; }
  .people-head, .pt-print, .pt-legend, .pt-lead { display: none !important; }
  .pt-printed { display: block; }
  .okfirst-ctl { display: none !important; }
  .person-head .top-btns, .pool-ctl, .pdays, .pblock select { display: none !important; }
  .entry, .intake, .batch { display: none !important; }
  .tour-card, .tour-btn, .faq-tour, .day-reset-btn, .day-reset-ask, .help-head .row-btns { display: none !important; }
  .sub-opts .btn, details.more-detail { display: none !important; }
  details.swap, .swap-undo { display: none !important; }
  .who-card, .email-card { display: none !important; }
  .long-ask, .long-link, .long-hol { display: none !important; }
  .rt-filters, .rt-link, .rt-btns, .rt-reset { display: none !important; }
  .admin-tabs { display: none !important; }
  .live-col, .admin-slot { display: none !important; }
  .jcall.folded .jline { line-height: 1.3; }
  .daysheet td.mono { white-space: nowrap; }
}
@media print {
  body:not(.ds-printing) .daysheet { display: none !important; }
  body.ds-printing .top, body.ds-printing .sample-bar, body.ds-printing .notice, body.ds-printing #tour-card, body.ds-printing .main > :not(.daysheet) { display: none !important; }
  body.ds-printing .daysheet { display: block; color: var(--ol-ink); }
  .daysheet .ds-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ol-ink); margin-bottom: 4px; }
  .daysheet h1 { font-size: var(--ol-fs-20); margin: 0; }
  .daysheet .ds-stamp { font-weight: 600; }
  .daysheet .ds-out, .daysheet .ds-notes { margin: 3px 0 5px; }
  .daysheet table { width: 100%; border-collapse: collapse; margin-bottom: 6px; table-layout: fixed; }
  .daysheet th { background: var(--ol-ink); color: var(--ol-surface); font-weight: 600; text-align: left; padding: 2px 5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .daysheet td { border-bottom: 1px solid var(--ol-ctl); padding: 2px 5px; vertical-align: top; line-height: 1.2; }
  .daysheet .ds-plan th:nth-child(1) { width: 11%; } .daysheet .ds-plan th:nth-child(2) { width: 27%; } .daysheet .ds-plan th:nth-child(3) { width: 22%; }
  .daysheet .ds-people th:nth-child(1) { width: 22%; }
  .daysheet tr.ds-gap td { font-weight: 600; }
  .daysheet tr { break-inside: avoid; }
}
body.pt-printing .main { zoom: 1; }
body.pt-printing .prot-card { padding: 0; border: 0; max-width: none; }
body.pt-printing .prot-card h2 { font-size: var(--ol-fs-20); margin-bottom: 0; }
body.pt-printing .pt-hrow { margin-bottom: 1px; }
body.pt-printing .pt-printed { margin: 1px 0 6px; font-weight: 600; color: var(--ol-ink); }
body.pt-printing .prot-table thead th { padding: 3px 6px 4px; }
body.pt-printing .prot-table thead th:nth-child(1) { width: 14%; } body.pt-printing .prot-table thead th:nth-child(2) { width: 11%; } body.pt-printing .prot-table thead th:nth-child(3) { width: 20%; } body.pt-printing .prot-table thead th:nth-child(4) { width: 26%; } body.pt-printing .prot-table thead th:nth-child(5) { width: 29%; }
body.pt-printing .prot-table td, body.pt-printing .prot-table tbody th { padding: 3px 6px; line-height: 1.25; }
body.pt-printing .prot-table tr.pt-more td { border-top-color: var(--ol-line); }
body.pt-printing .pt-line, body.pt-printing .pt-sep { display: inline; }
body.pt-printing .pt-sep { color: var(--ol-muted); }
body.pt-printing .pt-chip { padding: 0 6px; line-height: 1.45; }
body.pt-printing .prot-table tbody.pt-group { break-inside: avoid; }
body.pt-printing .pt-foot { margin-top: 5px; padding-top: 3px; }

/* ---- MS demo 101426: Achievement First's blue and gold, bold and few (CH 101426: "professional, not too cute or too plain").
   Blue: the top rule, the one primary action, this week's leader bar. Gold: the selected tab's bar. States keep their own colors. */
.top { background: var(--ol-af-navy); color: var(--ol-on-band); border-bottom: 0; align-items: center; }
/* CH 101426 header: Achievement First left, the demo school center, what this is right; the tab row under all three */
@media screen and (min-width: 761px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--ol-sp-24); row-gap: var(--ol-sp-4); padding-top: var(--ol-sp-12); }
  .top .tabs, .top .admin-slot { grid-column: 1 / -1; }
  .top .brand { text-align: center; }
  .top .brand-end { justify-self: end; text-align: right; }
}
.top .brand-name { color: var(--ol-on-band); font-weight: 700; }
.brand-demo { font-weight: 400; color: var(--ol-on-band-2); }
.brand-end { display: flex; flex-direction: column; min-width: 0; font-size: var(--ol-fs-13); line-height: 1.35; color: var(--ol-on-band-2); }
.brand-end .brand-what { font-weight: 600; font-size: var(--ol-fs-15); color: var(--ol-on-band); }
.brand-date:not(:empty)::before { content: none; }
.tabs button, .admin-tabs button { color: var(--ol-on-band-2); }
.af-brand { flex: none; display: flex; align-items: center; gap: 8px; color: var(--ol-on-band); font-weight: 700; font-size: var(--ol-fs-17); line-height: 1.1; white-space: nowrap; }
.af-mark { display: block; height: 28px; width: auto; }
.tabs button[aria-current="page"], .admin-tabs button[aria-current="page"] { color: var(--ol-af-blue); background: none; box-shadow: inset 0 -3px 0 var(--ol-af-yellow); border-radius: 0; }
.tabs button[aria-current="page"], .admin-tabs button[aria-current="page"] { color: var(--ol-on-band); }
.btn.primary { background: var(--ol-af-blue); border-color: var(--ol-af-blue); color: var(--ol-on-primary); }
label.check input[type="checkbox"] { accent-color: var(--ol-af-blue); }
.lead-bars .now .bar { background: var(--ol-af-blue); }
.tour-dots i.on { background: var(--ol-af-blue); }
@media (hover: hover) {
  .tabs button[aria-current="page"]:hover, .admin-tabs button[aria-current="page"]:hover { background: none; }
}
@media screen and (max-width: 760px) {   /* .top is display: contents on a phone, so each of its rows takes the navy */
  .af-brand, .brand, .brand-end, .tabs, .admin-slot { background: var(--ol-af-navy); border-bottom: 0; margin: 0; }   /* .admin-slot added: critic 101426, its on-navy text sat on paper */
  .af-brand { font-size: var(--ol-fs-15); padding: var(--ol-sp-12) var(--ol-sp-16) 0; }
  .af-mark { height: 22px; }
  .brand { padding: var(--ol-sp-8) var(--ol-sp-16) 0; }
  .brand-end { padding: 2px var(--ol-sp-16) var(--ol-sp-12); box-shadow: inset 0 -1px 0 var(--ol-af-hair); }   /* CH 101426: a light hairline under the date row */
  .brand-end .brand-what { font-size: var(--ol-fs-13); }
}

/* ---- MS demo 101426: the Setup tab (CH 101426: "Questions for you" becomes Setup: the logic, open questions, assumptions, future work) */
.setup-jump { display: flex; flex-wrap: wrap; gap: var(--ol-sp-4) var(--ol-sp-16); margin-top: var(--ol-sp-12); font-size: var(--ol-fs-15); }
.setup-jump a { color: var(--ol-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ol-rule); text-underline-offset: 4px; padding: var(--ol-sp-8) 0; }
.setup-group { margin-top: var(--ol-sp-16); }
.setup-sub { margin: 0; }
.fill { display: flex; flex-direction: column; gap: var(--ol-sp-12); }
#q-open .fill-q + .fill-q, #q-assume .fill-q + .fill-q { margin-top: var(--ol-sp-12); }
#q-open .q-section + p, #q-assume .q-section + p { margin-bottom: var(--ol-sp-12); }
.future { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--ol-sp-8); }
.setup-copy { margin: 0; }
.admin-tabs .admin-name { color: var(--ol-on-band-2); font-weight: 400; }   /* was dark ink on the navy band */
.tour-hl { outline-color: var(--ol-af-blue); }   /* the tour points in AF blue; orange stays the waiting state */

/* ---- critic 101426 (fresh one-look-critic on the Setup layout) */
.top { --ol-on-band-2: var(--ol-af-on-navy-2); }   /* #AFAFAF on the navy was 4.45:1; this is 5.84:1, and it inherits through the phone's display: contents */
.btn.primary[disabled] { background: var(--ol-paper); border-color: var(--ol-line); color: var(--ol-muted); }   /* a locked Approve no longer looks live */
.tour-dots i.done { background: var(--ol-af-blue); }
.fair-n .btn.quiet { border: 1px solid var(--ol-ctl); text-decoration: none; }   /* minus is a box like plus */
@media (hover: hover) and (pointer: fine) {
  .btn.primary:not([disabled]):hover { background: var(--ol-af-navy); border-color: var(--ol-af-navy); }
  .tabs button:hover, .admin-tabs button:hover { color: var(--ol-on-band); background: none; box-shadow: inset 0 -3px 0 var(--ol-af-hair); }
}
.tab-long { display: inline; }
@media screen and (max-width: 480px) {   /* five tabs on one row at 390 */
  .tabs { flex-wrap: nowrap; justify-content: space-between; gap: 0; padding-left: var(--ol-sp-8); padding-right: var(--ol-sp-8); }
  .tabs button { padding: 0 7px; font-size: var(--ol-fs-15); }
  .tab-long { display: none; }
  .dayb .dd .mo, .dayb .tm { display: none; }   /* the day chip says Wed and 14; today is underlined */
  .dayb.is-today .dn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}
@media screen and (max-width: 374px) {   /* run 1 at 16ca400: five tabs on one row are 372px wide, so under 375 they wrap again */
  .tabs { flex-wrap: wrap; justify-content: flex-start; }
}

/* ---- CH 101426: the count on the Today's Plan tab and the day's changes */
.tab-badge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: var(--ol-r); background: var(--ol-af-yellow); color: var(--ol-ink); font-size: var(--ol-fs-13); font-weight: 700; line-height: 20px; text-align: center; vertical-align: 1px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: var(--ol-sp-8) 0; border-top: 1px solid var(--ol-line); }
.feed li:first-child { border-top: 0; padding-top: 0; }
.feed-at { display: inline-block; min-width: 72px; color: var(--ol-muted); }
@media screen and (max-width: 480px) {   /* the badge needs ~26px on the one-row phone tabs */
  .tabs button { padding: 0 5px; }
  .tab-badge { margin-left: 4px; min-width: 18px; padding: 0 4px; }
}

/* ---- critic 101426 (e4c858b) P2: a Who Is Out row on a phone is two short lines, name and time with Remove trailing, then Mark sub booked;
   the quiet buttons keep their 44px target and give back the extra height with negative margins */
@media screen and (max-width: 760px) {
  .abs-list li::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .abs-list li > * { order: 3; }
  .abs-list li > .abs-name, .abs-list li > .mono { order: 0; }
  .abs-list li > .btn[data-action="abs-remove"] { order: 1; margin-left: auto; }
  .abs-list li > .btn.quiet.small { margin-block: calc((var(--ol-h) - 24px) / -2); }
  .abs-list li > .btn.sub-book { padding-left: 0; }   /* lines up under the name */
}

/* ---- critic 101426 (e4c858b) P2: on a phone the person being chosen is the biggest thing in each option */
@media screen and (max-width: 480px) {
  .choice .opt-n, .choice .opt-ask { font-size: var(--ol-fs-20); font-weight: 600; line-height: 1.3; }
  .choice:not(:has(.opt-ask)) .opt-n { font-size: inherit; }   /* the sub pool stays the smallest option */
}

/* CH 101426 20:19: Standing meetings, the week by period (Mon to Fri across, the bell down); Add in any period */
.wk-periods { grid-template-columns: 128px repeat(5, minmax(0, 1fr)); }
.wk-periods .wk-time { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.wk-periods .wk-time b { color: var(--ol-ink); }
.wk-periods .wk-cell { min-height: 64px; }
.wk-periods .wk-tile { min-height: 0; gap: 4px; }
.wk-periods .wk-why { font-weight: 600; }
.wk-names { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.wk-name { min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wk-add { align-self: flex-start; min-height: 28px; margin-top: auto; padding: 2px 8px; border: 1px dashed var(--ol-line); border-radius: var(--ol-r); background: none; font: inherit; font-size: var(--ol-fs-13); color: var(--ol-muted); cursor: pointer; }
.wk-how { margin: -4px 0 8px; }
.helpers-check { display: flex; gap: 8px; align-items: center; min-height: var(--ol-h); font-weight: 600; }
.helpers-check input { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .wk-periods .wk-cell.is-empty { display: none; }
  .wk-periods .wk-add { display: none; }
  .wk-periods .wk-tt { display: block; }
  .mt-week .wk-legend { flex-wrap: nowrap; gap: 6px 12px; font-size: var(--ol-fs-13); }   /* smush 101426: one line on a phone */
  .mt-week .wk-legend > span { gap: 6px; white-space: nowrap; }
}
@media print { .wk-add, .helpers-card { display: none !important; } }
@media (max-width: 360px) { .mt-week .wk-legend { flex-wrap: wrap; } }   /* 320 wide: the legend may take two lines rather than overrun */