/* Compact layout: phones are narrow, so spacing is tight and tap targets stay ≥ 40px. */
:root {
  --bg: #f5f6f8; --card: #fff; --text: #1d2330; --muted: #5d6677; --accent: #2459c4; --accent-dark: #1a449a;
  --ok: #18794e; --ok-bg: #e5f5ec; --warn: #8a5a00; --warn-bg: #fff4d6; --err: #b42318; --err-bg: #fde8e7;
  --border: #d5d9e0; --rail: 2.5rem; --down: #b42318; --up: #18794e;
}
html { font-size: 100%; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: .95rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
main { max-width: 640px; margin: 0 auto; padding: 4px 6px 40px; }
body.admin main { max-width: 1000px; padding: 6px 10px 40px; }
a { color: var(--accent); }
h1 { font-size: 1.15rem; margin: 6px 0 4px; }
h2 { font-size: 1rem; margin: 10px 0 4px; }
h3 { font-size: .95rem; margin: 8px 0 4px; }
h2.inline { display: inline; }
p { margin: 4px 0; }
small { font-weight: normal; }
.muted { color: var(--muted); font-size: .85rem; }

/* ----- Header ----- */
.top { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: #fff; border-bottom: 1px solid var(--border); font-size: .85rem; }
/* The top bar's contents line up with the page's centered column on every page (owner, 2026-11-11). */
.top { padding-inline: max(6px, calc((100% - 640px) / 2 + 6px)); }
body.admin .top { padding-inline: max(10px, calc((100% - 1000px) / 2 + 10px)); }
body:has(form.ge) .top { padding-inline: max(10px, calc((100% - 1200px) / 2 + 10px)); }
.brand { font-weight: 800; text-decoration: none; color: var(--text); }
/* The owner's wordmark (ask 95 a). 22 px tall in the top bar and 48 px on Log In: set by hand; the owner is judging
   the 22 px size. Images: wordmark-bar.png (66 px tall) and wordmark.png (144 px), cropped copies of his file. */
.brand img { display: block; height: 22px; width: auto; }
.signin-mark { display: block; height: 48px; width: auto; margin: 14px 0 6px; }
/* Log In: centered; the large wordmark only (the bar's small one is hidden there). On a company's address the bar
   keeps the small wordmark and the company's logo and name lead (owner, 2026-11-12). */
body.login:not(.company) .top .brand { display: none; }
.company-name { font-weight: 700; margin: 8px 0 0; }
body.login main { text-align: center; }
body.login .signin-mark { margin-inline: auto; }
body.login form.narrow { margin-inline: auto; margin-top: 12px; text-align: left; }
/* A company address's logo, under ours, on white so a clear background never disappears. */
.company-mark { display: block; margin: 6px auto 0; max-width: min(240px, 80vw); max-height: 80px; width: auto; height: auto;
  background: #fff; border-radius: 8px; padding: 6px 10px; }
.devtag { font-size: .65rem; font-weight: 800; color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 0 4px; }
.crumbs { margin: 2px 0 0; font-size: .8rem; }

/* ----- The notebook frame (app.md, BACKLOG 47; mockup staff-frame.html, approved 2026-11-11) -----
   One centered column: the page, then the goal tab rail on its right. The horizontal line is the base of the client
   tabs, full width; the vertical line is the rail's left edge, starting at the horizontal line. The corner above the
   rail holds the menu button. The client tabs' row stays at the top; the rail stays under its line. */
:root { --strip-h: 2.6rem; }
.book { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); max-width: calc(640px + var(--rail)); margin: 0 auto; }
.book > main { grid-column: 1; grid-row: 2; max-width: none; margin: 0; min-width: 0; }
body:not(.has-goal-tabs) .book > main { grid-column: 1 / -1; }
body.has-client .top { padding-inline: max(6px, calc((100% - 640px - var(--rail)) / 2 + 6px)); }
.strip-row { grid-column: 1 / -1; display: flex; position: sticky; top: 0; z-index: 8; height: var(--strip-h);
  background: #e9edf4; border-bottom: 2px solid var(--accent); }

/* ----- The menu: the corner button, or the top bar's right end on a page without client tabs ----- */
.corner { position: relative; flex: 0 0 var(--rail); display: flex; }
.top .corner { margin-left: auto; flex-basis: 40px; height: 40px; }
.corner-menu { flex: 1; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text);
  display: flex; align-items: center; justify-content: center; }
.corner-menu svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.corner-menu[aria-expanded="true"] { background: var(--accent); color: #fff; }
.menu { position: absolute; right: 0; top: calc(100% + 2px); min-width: 12rem; background: #fff; border: 1px solid var(--border);
  border-radius: 0 0 0 10px; box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 4px 0; z-index: 9; font-size: .95rem; }
.menu form { margin: 0; }
.menu a, .menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
  padding: 0 14px; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; font-weight: 600;
  text-decoration: none; text-align: left; }
.menu a:hover, .menu button:hover { background: #f2f6ff; }
.menu .menu-out { border-top: 1px solid var(--border); margin-top: 4px; }
.menu .sw-state { font-weight: 800; color: var(--muted); }
.menu-switch[aria-pressed="true"] .sw-state { color: var(--ok); }

/* ----- Client strip (top) ----- */
.client-strip { display: flex; flex: 1 1 auto; min-width: 0; align-items: flex-end; gap: 3px; overflow-x: auto; padding: 3px 4px 0; scrollbar-width: none; }
.client-strip::-webkit-scrollbar { display: none; }
.client-strip a { flex: 0 0 auto; padding: 5px 10px; font-weight: 800; font-size: .9rem; text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; }
.client-strip a.active { font-size: 1.35rem; padding: 2px 14px; letter-spacing: .04em; background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }

/* ----- Goal tabs (right side, text turned 90° clockwise, scrolls) -----
   Each tab as tall as its name needs, the name centered along it; every tab touches the line. The current one is
   outlined (drawn inside the tab) and shadowed, its text unchanged, so choosing a tab changes no size (goals.md
   2026-11-11). High Priority: same width; text about 1 pt larger and bold, never italic; a thicker red outline. */
.goal-tabs { position: sticky; top: var(--strip-h); grid-column: 2; grid-row: 2; align-self: start; height: calc(100dvh - var(--strip-h));
  padding: 0 0 16px; background: #e9edf4; border-left: 2px solid var(--accent); display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.goal-tabs::-webkit-scrollbar { display: none; }
.goal-tabs a { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: .55rem 0; margin-right: .45rem;
  text-decoration: none; color: var(--text); font-weight: 700; font-size: .78rem; border-radius: 0 7px 7px 0; background: #fff;
  border: 1px solid var(--border); border-left: 0; }
.goal-tabs a span { writing-mode: vertical-rl; white-space: nowrap; }
.goal-tabs a.active { outline: 3px solid var(--accent); outline-offset: -3px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.goal-tabs a.hp { font-size: .86rem; font-weight: 900; outline: 3px solid var(--down); outline-offset: -3px; }
.goal-tabs a.hp.active { outline-width: 4px; }

/* ----- Cards, forms, buttons ----- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin: 6px 0; }
.narrow { max-width: 360px; }
label { display: block; font-weight: 600; margin: 5px 0; font-size: .92rem; }
label.check, label.pill { font-weight: 500; }
input, select, textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: inherit; min-height: 40px; margin-top: 2px; } /* the height of a button, so a row lines up */
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; margin: 0 5px 0 0; }
input[type=color] { padding: 2px; width: 60px; }
textarea { min-height: 60px; resize: vertical; }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; margin: 6px 0; }
legend { font-weight: 700; padding: 0 3px; font-size: .9rem; }
button, .button { display: inline-block; font: inherit; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; text-decoration: none; min-height: 40px; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled, button.primary:disabled { background: #e5e7eb; border-color: #d1d5db; color: #8a929c; cursor: not-allowed; }
button.big { width: 100%; padding: 10px; font-size: 1rem; margin-top: 6px; }
button.huge { width: 100%; padding: 26px 0; font-size: 2.2rem; border-radius: 14px; }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); font-weight: 500; text-decoration: underline; }
button.danger { color: var(--err); border-color: #f4b4ae; }
form.inline { display: inline; }
.flash { padding: 6px 8px; border-radius: 8px; margin: 4px 0; font-size: .9rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.err { background: var(--err-bg); color: var(--err); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }

/* ----- Dashboard / lists ----- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.tile { display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 6px; text-align: center; font-size: 1.15rem; font-weight: 800; text-decoration: none; color: var(--text); }
.tile small { display: block; font-size: .75rem; color: var(--muted); font-weight: 500; }
.dash { display: grid; gap: 6px; }
.dash-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-decoration: none; color: var(--text); }
.dash-initials { font-size: 1.35rem; font-weight: 800; min-width: 3.2em; text-align: center; background: #eef1f6; border-radius: 8px; padding: 6px 4px; }
.dash-stats { color: var(--muted); font-size: .85rem; }
.behind { color: var(--warn); }
.goal-list { list-style: none; padding: 0; margin: 0; }
.goal-list a { display: flex; justify-content: space-between; gap: 6px; padding: 9px 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; margin: 4px 0; text-decoration: none; color: var(--text); }
.goal-name { font-weight: 700; }
.tally { color: var(--muted); font-size: .82rem; white-space: nowrap; }

/* ----- Goal page ----- */
.question { font-size: .98rem; font-weight: 600; }
details.info { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin: 3px 0; }
details.info summary { padding: 6px 8px; font-weight: 700; cursor: pointer; font-size: .92rem; }
.info-body { padding: 0 8px 4px; font-size: .92rem; }
.info-body ul { margin: 2px 0; padding-left: 18px; }
.ack { border-color: #f0d58a; background: var(--warn-bg); }
.count-today { text-align: center; font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
.btn-grid button small, .score small { display: block; font-weight: 400; font-size: .78rem; }
.score-list { display: grid; gap: 5px; }
.score { text-align: left; padding: 6px 10px; }
.score.independent { border-color: var(--ok); background: var(--ok-bg); }
.score b { display: inline-block; min-width: 1.5em; }
.steps { padding-left: 16px; margin: 4px 0; }
.steps li { margin: 6px 0; }
.step-text { margin: 0; font-weight: 600; }
.reminder { margin: 1px 0 3px; color: var(--warn); font-size: .85rem; }
label.pill { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; margin: 2px 2px 2px 0; background: #fff; font-size: .9rem; }
.issues { background: var(--warn-bg); border: 1px solid #f0d58a; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; }
.issues.has-block { background: var(--err-bg); border-color: #f4b4ae; }
.issues ul { margin: 2px 0; padding-left: 18px; }
.timer { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.clock { font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 800; min-width: 4.5ch; }
details.earlier { margin-top: 6px; font-size: .9rem; }
.entries { list-style: none; padding: 0; margin: 2px 0; }
.entries li { display: grid; grid-template-columns: 4.2em 1fr auto auto; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.entries li.muted { display: block; }
.entries li.void .what { text-decoration: line-through; color: var(--muted); }
.who { color: var(--muted); font-size: .8rem; }
.badge { background: #eee; border-radius: 5px; padding: 0 5px; font-size: .75rem; }
.history { padding-left: 18px; }
.history li { margin: 5px 0; font-size: .9rem; }
.eos-item { border-top: 1px solid var(--border); padding: 5px 0; }

/* ----- Admin ----- */
.row-form { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: end; }
.row-form > label { flex: 1 1 150px; }
.row-form > * { margin-bottom: 0; } /* fields and buttons end on one line (a label's own bottom margin lifted it) */
.row-form > label.check { display: flex; align-items: center; min-height: 40px; }
.row2 { display: flex; flex-wrap: wrap; gap: 0 6px; }
.row2 > label { flex: 1 1 13rem; min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
table.grid { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
table.grid th, table.grid td { border-bottom: 1px solid var(--border); padding: 4px 6px; text-align: left; vertical-align: top; }
tr.inactive, tr.void { color: var(--muted); }
.adminnav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; font-size: .88rem; }
.field-block { margin: 6px 0; }
.field-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.field-head input:not([type]) { flex: 1; }
.type-opts { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 2px; }
ul.plain { padding-left: 18px; margin: 4px 0; }
code { background: #eef1f6; padding: 0 3px; border-radius: 3px; }
.records-table td, .records-table th { font-size: .85rem; }

/* ----- Print ----- */
@media print {
  .top, .strip-row, .goal-tabs, .adminnav, .no-print, .flash { display: none !important; }
  .book { display: block; max-width: none; }
  main { margin: 0; padding: 0; max-width: none; }
  body { background: #fff; font-size: 10.5pt; }
  .card { border: 0; padding: 0; }
  tr { page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* ----- Categories: Behavior Reduction (goal: down) / Adaptive Living (goal: up) ----- */
.cat-head { display: flex; align-items: baseline; gap: .4em; margin: .7rem 0 .2rem; }
.cat-head .muted { font-weight: 500; }
.goal-title { display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; }
.goal-title .edit-link { margin-left: auto; font-size: .8rem; font-weight: 500; }

/* ----- Information sections: Short Form when collapsed, Long Form when opened ----- */
details.info .short { display: block; font-weight: 400; margin-top: 2px; }
details.info[open] .short { display: none; }
div.info { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin: 3px 0; padding: 0 0 2px; }
.info-name { margin: 0; padding: 6px 8px 0; font-size: .92rem; }
.quick-edit { margin: 2px 8px 6px; font-size: .85rem; }
.quick-edit summary { color: var(--accent); cursor: pointer; }

/* ----- Data fields: question directly above the answer ----- */
.dfield { margin: .5rem 0; }
.q, label.q { font-weight: 700; font-size: 1rem; margin: .3rem 0 .2rem; }
.narrowfield { flex: 0 0 5.5em !important; }
.fld-row { background: #fafbfc; }
.savebar { position: sticky; bottom: 0; background: var(--bg); padding: 4px 0; }

/* ----- Privacy reminder under every free-text box ----- */
/* Hidden until someone is typing in the box right above it. */
.phi-note { display: none; margin: 2px 0 6px; padding: 3px 8px; font-size: .82rem; font-weight: 600; color: var(--err); background: var(--err-bg); border-radius: 6px; }

/* ----- ABC ----- */
legend .explain { font-weight: 500; color: var(--muted); }
label.other { margin-top: 6px; }

/* ----- Number + stopwatch on one row ----- */
.num-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.num-row input { flex: 1 1 6em; width: auto; }
.num-row .timer { margin: 0; }
.num-row .clock { font-size: 1.25rem; }
.sw-start { white-space: nowrap; }
.abc-sw { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.abc-sw .clock { font-size: 1.25rem; }

label:focus-within + .phi-note, .other-box:focus-within .phi-note { display: block; }

/* "Other": its text box appears only after the Other chip is ticked. */
.other-box { display: none; margin-top: 4px; }
fieldset:has(.other-toggle:checked) .other-box { display: block; }

/* ----- Carets: one style everywhere. Collapsed points right (at the text); open points down. ----- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); font-weight: 700; }
details[open] > summary::before { content: "▾"; }
details.info > summary { padding-left: .5rem; }
details.info .short { margin-left: 1em; }

/* Header: keep the brand on one line. */
.brand, .devtag { white-space: nowrap; flex: 0 0 auto; }

/* ----- Admin: Homes & Clients, Goal Bank ----- */
.home-block > summary { font-size: 1.05rem; padding: 2px 0; }
.client-rows { list-style: none; padding: 0; margin: 6px 0; }
.client-rows li { display: flex; gap: 10px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.client-rows li.inactive { opacity: .6; }
details.sub { margin: 6px 0; }
.add-to-client { display: flex; flex-wrap: wrap; gap: 4px; }
.add-to-client select { width: auto; min-width: 7em; }
option.taken, select option:disabled { color: #9aa1ad; }

/* ----- Goal page links (All Goal Information, resource pages) ----- */
.goal-links { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .85rem; margin: 0 0 4px; }
.isp-section { margin: 8px 0; }
.isp-section h2 { margin-bottom: 2px; }

/* ----- Owner Edit Mode ----- */
.editmode.on { color: #fff; background: var(--warn); border-radius: 6px; padding: 0 6px; text-decoration: none; }
.owner-box { border: 1px dashed var(--warn); border-radius: 8px; padding: 4px 8px; background: #fffaf0; }
.fld-quick { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; }
.push-right { margin-left: auto; }
button.small { padding: 3px 8px; min-height: 0; font-size: .85rem; }

/* ----- Add Goals on the client page ----- */
.bank-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2px 10px; margin: 4px 0; }
.bank-pick { font-weight: 500; display: flex; align-items: center; gap: 4px; padding: 3px 0; }
.bank-pick.has-it { color: var(--muted); }

/* ----- Data Sheet preview: a phone-width look at what staff see ----- */
.phone-preview { max-width: 360px; border: 8px solid #2b2f36; border-radius: 22px; padding: 6px; background: var(--bg); }
.preview-lock { border: 0; padding: 0; margin: 0; }
.preview-lock[disabled] button, .preview-lock[disabled] input { opacity: 1; cursor: default; }

/* Date and time pickers with a Now button */
.time-row { display: flex; gap: 6px; align-items: center; }
.time-row input[type=time] { flex: 1 1 8em; width: auto; min-width: 0; font-size: 1.15rem; }
.time-row input[type=date] { flex: 1 1 9em; width: auto; min-width: 0; font-size: 1.15rem; }
.time-row .now-btn { flex: 0 0 auto; }

/* Rich-text editor (owner text staff read) */
.rt-wrap { border: 1px solid var(--line, #c9ced6); border-radius: 8px; background: #fff; margin-top: 4px; }
.rt-dock { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 2px 4px; margin: 2px 0 4px; background: #f6f7f9; border: 1px solid #c9ced6; border-radius: 8px; }
.rt-dock[hidden], .rt-dock button[hidden] { display: none; }
.rt-dock button { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 0 8px; font-size: 1.05rem; line-height: 1; border-radius: 6px; background: transparent; border: 1px solid transparent; color: inherit; font-weight: normal; display: inline-flex; align-items: center; justify-content: center; }
.rt-dock button[aria-pressed="true"] { background: #dfe7fb; border-color: #9fb5ef; }
.rt-dock .rt-gap { margin-right: 8px; }
.rt-dock .rt-b { font-weight: 700; }
.rt-dock .rt-i { font-style: italic; font-family: Georgia, serif; }
.rt-dock .rt-u { text-decoration: underline; }
.rt-dock .rt-s { text-decoration: line-through; }
.rt-box { padding: 6px 8px; min-height: 1.6em; outline: none; font-weight: normal; overflow-wrap: anywhere; }
.rt-block .rt-box { min-height: 5em; }
.rt-box:empty::before { content: attr(data-placeholder); color: #8a929c; }
.rt-box p { margin: 0 0 0.5em; }
.rt-wrap:focus-within { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15); }
mark { background: #fff1a8; color: inherit; padding: 0 1px; }

/* Admin > Staff: homes and which clients */
.home-access { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid #eef0f3; }
.home-access:last-child { border-bottom: none; }
.access-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.access-choice .check { margin: 0; }

/* Data sheet and form editors: folded questions */
details.fld-row { border: 1px solid #e3e6ea; border-radius: 8px; margin: 6px 0; padding: 0 10px; background: #fafbfc; }
details.fld-row > summary { cursor: pointer; padding: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
details.fld-row[open] { padding-bottom: 10px; background: #fff; }
.preview { color: #5b6470; font-weight: normal; flex: 1 1 14em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 0.8em; background: #eef1f5; color: #3d4652; border-radius: 10px; padding: 0 8px; white-space: nowrap; }
details.more { margin: 8px 0 0; }
details.more > summary { cursor: pointer; color: #1d4ed8; font-size: 0.95em; padding: 4px 0; }
details.card.ge-more > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
details.card.ge-more > summary h2 { margin: 0; }

.row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.row-actions .danger { margin-left: auto; }
details.info .short p, details.info .short ul, details.info .short ol { margin: 0; }


/* Pressing Enter in a box saves (the first button in the form), never moves or removes. */
.enter-saves { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }

/* Data sheet editor: choices and steps as rows */
fieldset.rows { margin: 10px 0; }
.item-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: flex-end; padding: 6px 0; border-bottom: 1px solid #eef0f3; }
.item-row .grow { flex: 2 1 14em; margin: 0; }
.item-row .code { flex: 0 0 5.5em; margin: 0; }
.item-row label { margin: 0; }
.item-row.new-row { background: #f6f8fb; border-radius: 6px; padding: 6px; }
.row-n { flex: 0 0 auto; font-weight: 600; color: #5b6470; min-width: 2em; padding-bottom: 8px; }
.row-actions.small { display: flex; gap: 4px; margin: 0 0 4px; }
.row-actions.small button { padding: 2px 8px; min-height: 0; font-size: 0.85rem; }

/* ----- Staff goal page: choices spelled out as rows, Frequency Recording buttons, High Priority tabs ----- */
.opt-rows { display: grid; gap: 3px; margin: 3px 0; }
label.opt-row { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 3px 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; line-height: 1.3; cursor: pointer; }
label.opt-row input { width: auto; min-height: 0; margin: 0; flex: 0 0 auto; }
label.opt-row:has(input:checked) { border-color: var(--accent); background: #e8eefb; }
.opt-row.independent { border-left: 4px solid var(--ok); }
.score b { min-width: 0; }
/* Frequency Recording: a big button, never a huge one, its count under it (goals.md 2026-11-11). */
.rec-row { margin: 4px 0 8px; }
.rec-row button.rec-btn { width: 100%; padding: 14px 0; font-size: 1.35rem; border-radius: 12px; }
.rec-row .count-now { margin: 4px 0 0; text-align: center; font-weight: 600; }
.link-set { margin: 6px 0; }
.link-set details.info summary { color: var(--accent); text-decoration: underline; }

/* ----- Edit Goal page (goals.md, mockup v36) ----- */
main:has(form.ge) { max-width: 1200px; }
.ge-split { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ge-main { flex: 1 1 520px; min-width: 0; }
.ge-phone-wrap { flex: 0 0 320px; position: sticky; top: 8px; }
.ge-phone-wrap h2 { font-size: 1rem; margin: 0 0 6px; }
@media (max-width: 860px) {
  .ge-main { flex-basis: 100%; }
  .ge-phone-wrap { flex: 1 1 100%; max-width: 360px; position: static; }
}
.ge h3 { margin: 6px 0; font-size: 1rem; }
.ge .req { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 8px; }
.ge .block select, .ge .block textarea, .ge .block input { margin-top: 4px; }
.ge label.switch, label.switch.al-multi { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; margin: 6px 12px 6px 0; }
.ge label.switch input, label.switch.al-multi input { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; min-height: 0; padding: 0; border-radius: 12px; background: #c9ced6; border: 0; position: relative; cursor: pointer; margin: 0; flex: 0 0 auto; }
.ge label.switch input::after, label.switch.al-multi input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.ge label.switch input:checked, label.switch.al-multi input:checked { background: var(--up); }
.ge label.switch input:checked::after, label.switch.al-multi input:checked::after { left: 21px; }
/* Rows edited in place (asks 76, 78): plain text, tapped to open its box right there. */
.ge .tap-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.ge .ltext { flex: 1 1 auto; min-width: 0; cursor: pointer; line-height: 1.35; overflow-wrap: anywhere; }
.ge .ltext p, .ge .ltext ul, .ge .ltext ol { margin: 0 0 4px; }
.ge .ledit { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; align-items: center; }
.ge .ledit[hidden], .ge .ltext[hidden] { display: none; }
.ge .ledit .rt-wrap, .ge .ledit input { flex: 1 1 auto; min-width: 0; }
.ge .sub-head { display: flex; gap: 8px; align-items: center; }
.at { color: var(--accent); font-weight: 600; white-space: nowrap; }
.at-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.at-pick[hidden] { display: none; }
.at-pick button { min-height: 40px; padding: 0 12px; }
.rt-insert { font-weight: 600; padding: 0 10px; }
/* Goal row and Tab row: name and slot share one line; a box being edited takes the whole line. */
.ge .goal-line { display: flex; gap: 8px; align-items: center; }
.ge .goal-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.ge .goal-fields > .tap-row, .ge .goal-fields > .slot-row { margin: 0; flex: 0 1 auto; min-width: 0; }
.ge .goal-fields > .editing { flex: 1 1 100%; }
.ge .goal-name .ltext { font-weight: 700; font-size: 1.1rem; }
.ge .slot-row { display: flex; gap: 6px; align-items: center; }
.ge .slot-row .ltext { color: #4b5563; font-size: .85rem; }
.ge .slot-row select[hidden], .ge .slot-row .ltext[hidden] { display: none; }
.ge .tab-line { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; }
.ge .tab-line .tap-row { margin: 0; flex: 0 1 auto; min-width: 0; }
.ge .tab-line .tap-row.editing { flex: 1 1 100%; }
.ge .goal-tab .ltext { display: inline-block; padding: 4px 12px; border: 1px solid #c9ced6; border-left: 0; border-radius: 0 8px 8px 0; font-weight: 700; }
.ge .tab-pick { padding: 4px 10px; }
.ge .tab-pick[aria-expanded="true"] { background: #e8eefb; }
.ge .tab-pick .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #9aa1ad; margin-right: 6px; vertical-align: -2px; }
.ge .tab-line label.switch { margin: 0; }
.ge .swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.ge .swatches[hidden] { display: none; }
.ge .swatch { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 1px solid #9aa1ad; }
.ge .swatch[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Blocks in staff order: title left, one three-dots icon right (asks 71, 77). */
.ge .block-head { display: flex; gap: 8px; align-items: center; }
.ge .block-head h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ge .block-head .pick { flex: 1 1 auto; }
.ge .block[data-settled="0"] > :not(.block-head) { display: none; }
.ge .ctl { margin-left: auto; display: flex; flex-wrap: nowrap; gap: 4px; flex: 0 0 auto; position: relative; }
.ge .ctl > .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 4px; width: max-content; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #c9ced6; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.ge .ctl > .menu[hidden] { display: none; }
.ge .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; border: 1px solid #c9ced6; border-radius: 8px; background: #fff; color: var(--accent); }
.ge .icon-btn svg { width: 24px; height: 24px; }
.ge .icon-btn[aria-pressed="false"] { color: #8a929c; border-color: #e3e6ec; }
.ge .icon-btn[aria-pressed="true"] { background: #e8eefb; }
.ge .icon-btn.tip-btn { padding: 0 10px; font-weight: 600; }
/* The three dots keep a 40 px tap area but take only 24 px of the row's height (owner, 2026-11-10). */
.ge .icon-btn[data-kind="more"] { border-color: transparent; background: transparent; color: #4b5563; margin: -8px 0; }
.ge .icon-btn[aria-expanded="true"] { background: #e8eefb; }
/* Tips (ask 68): one line under the item; a tip's Remove is a small plain X as wide as the three dots. */
.ge .tip-slot { margin: 2px 0 8px; }
.ge .tip-slot:empty { display: none; }
.ge .tip-row { display: flex; gap: 8px; align-items: center; padding-left: 10px; border-left: 3px solid var(--accent); }
.ge .tip-row .icon-btn { min-width: 40px; min-height: 28px; border: 0; background: none; color: #6b7280; }
.ge .tip-row .icon-btn svg { width: 18px; height: 18px; }
/* Steps, prompt levels, buttons and choices: one row each. */
.ge .step-row, .ge .level-row { border-bottom: 1px solid #e3e6ec; padding: 6px 0; }
.ge .step-line, .ge .level-line { display: flex; gap: 8px; align-items: center; }
.ge .step-line .n { font-weight: 600; min-width: 1.6em; }
.ge .item-list:not(.numbered) .step-line .n { display: none; }
.ge .step-row > .tip-slot { margin: 4px 0 0 calc(1.6em + 8px); }
.ge .item-list:not(.numbered) .step-row > .tip-slot { margin-left: 0; }
.ge .level-line .use { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: 0; }
.ge .level-row:has(.use:not(:checked)) .ltext { color: #8a929c; }
.ge .level-row > .tip-slot { margin: 4px 0 0 28px; }
.ge .used { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px 28px; }
.ge .used[hidden] { display: none; }
.ge .used-label { font-size: .85rem; font-weight: 600; color: #4b5563; }
.ge .used-pick { text-align: left; font-weight: normal; padding: 6px 8px; }
/* Cutoff row (ask 94 a) at the bottom of the Data Sheet block. */
.ge .cut-row { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }
.ge .cut-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ge .cut-edit[hidden], .ge .cut-edit [hidden] { display: none; }
.ge .cut-edit select { width: auto; margin: 0; }
.ge .cut-edit input[type=number] { width: 5em; margin: 0; }
.ge .link-row { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.ge-more summary { cursor: pointer; }
.ge-toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; gap: 12px; align-items: center; background: #1f2937; color: #fff; padding: 8px 14px; border-radius: 8px; }
.ge-toast[hidden] { display: none; }
.ge-toast .link { color: #a9c4ff; }
/* Staff Preview: the goal page as staff see it, goal tabs on the right; a High Priority tab is bigger. */
.ge-phone { border: 10px solid #1d2330; border-radius: 26px; background: var(--bg); padding: 8px; min-height: 480px; max-height: 80vh; overflow-y: auto; font-size: .9rem; }
.ph-wrap { display: flex; gap: 6px; align-items: flex-start; }
.ph-main { flex: 1 1 auto; min-width: 0; }
.ph-rail { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; margin-right: -8px; }
.ph-rail span { writing-mode: vertical-rl; white-space: nowrap; padding: 8px 3px; border: 1px solid #c9ced6; border-left: 0; border-radius: 0 6px 6px 0; font-size: .72rem; font-weight: 700; color: #111827; }
/* As on the staff page: the current tab outlined and shadowed, no size change; High Priority about 1 pt larger and
   bold, never italic, a thicker red outline. */
.ph-rail span.on { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); }
.ph-rail span.hp { font-size: .8rem; font-weight: 900; outline: 2px solid var(--down); outline-offset: -2px; }
.ph-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.ph-tabs span { padding: 2px 10px; border-radius: 6px 6px 0 0; background: #dfe3ea; font-weight: 600; }
.ph-tabs span.on { background: var(--accent); color: #fff; }
.ph-title { font-weight: 700; font-size: 1.05rem; margin: 2px 0; }
.ph-links { margin: 0 0 6px; color: var(--accent); font-size: .85rem; }
.ph-sec { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 4px 8px; margin: 4px 0; }
.ph-sec summary { cursor: pointer; }
.ph-sec p, .ph-sec ul, .ph-body p { margin: 4px 0; }
.ph-open { border-color: #dfe3ea; }
.ph-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin: 8px 0; }
.ph-q { font-weight: 600; margin: 4px 0; }
.ph-rem { color: var(--warn); font-size: .82rem; margin: 0 0 4px; }
.ph-step { border-bottom: 1px solid #eef0f3; padding: 4px 0; }
.ph-opts { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
.ph-opt { border: 1px solid #c9ceda; border-radius: 6px; padding: 4px 8px; background: #fff; line-height: 1.3; }
.ph-big { background: var(--accent); color: #fff; text-align: center; border-radius: 8px; padding: 10px; margin: 4px 0; font-weight: 700; }
.ph-big.light { background: #e8ebf0; color: var(--text); }
.ph-rec { margin: 0 0 6px; }
.ph-rec .ph-big { width: 100%; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ph-count { margin: 3px 0 0; text-align: center; font-weight: 600; }
.ph-save { background: var(--accent); color: #fff; text-align: center; border-radius: 8px; padding: 6px; margin-top: 8px; font-weight: 600; }
.ph-row { display: flex; gap: 6px; }
.ph-box { display: inline-block; border: 1px solid #c9ced6; border-radius: 6px; padding: 4px 8px; min-width: 4em; background: #fff; color: #8a929c; }
.ph-box.wide { display: block; min-height: 1.8em; }
.ph-btn { border: 1px solid #c9ced6; border-radius: 6px; padding: 4px 8px; background: #fff; }
.ph-linkset { border-top: 1px solid #dfe3ea; margin-top: 8px; padding-top: 4px; }
.ph-link summary { color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Homes & Clients and Staff by home (BACKLOG 25, 27; mockups 2026-11-11): homes collapsed, one line per client or
   person, a three-dots menu per row (the Edit Goal page's, so these pages sit in a .ge wrapper). */
.page-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.page-head h1 { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.home-card > summary { display: flex; gap: 6px 10px; align-items: baseline; flex-wrap: wrap; font-size: 1.05rem; padding: 2px 0; }
.home-card > summary .meta { color: var(--muted); font-size: .9rem; font-weight: normal; }
.home-card.inactive > summary { opacity: .6; }
.rows { list-style: none; padding: 0; margin: 6px 0 4px; }
.rows > li { display: flex; gap: 10px; align-items: center; padding: 4px 0 4px 4px; border-bottom: 1px solid var(--border); min-height: 44px; }
/* Fade the row's contents, never the row: opacity on the row would fade its open menu too and let the next row
   show through it. */
.rows > li.inactive > :not(.ctl), .rows > li.inactive > .ctl > .icon-btn { opacity: .6; }
.rows .who { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; color: inherit; text-decoration: none; }
.rows .who b { color: var(--accent); }
.rows .who .muted { font-size: .9rem; }
.client-tab { display: inline-block; padding: 2px 10px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 700; }
.role { flex: 0 0 auto; font-size: .8rem; font-weight: 600; border-radius: 10px; padding: 1px 8px; background: #eef1f5; color: #3d4652; white-space: nowrap; }
.role.records { background: #fdf3e2; color: #8a5a00; }
.role.owner { background: #e8eefb; color: #1d4ed8; }
details.inactive-fold { margin: 6px 0 0; }
details.inactive-fold > summary { color: var(--muted); font-size: .92rem; padding: 6px 0; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.home-actions[hidden], .inline-form[hidden] { display: none; }
.inline-form { border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 8px; }
.inline-form h3 { margin: 0 0 6px; font-size: 1rem; }
.inline-form .home-actions { margin-top: 6px; }
.inline-form .row-form { margin: 0; }
.row-form .switch { align-self: flex-end; padding-bottom: 8px; }
.ge .static-menu .menu form { margin: 0; display: inline; }
.ge .static-menu .menu .icon-btn[data-kind="text"] { white-space: nowrap; padding: 0 10px; text-decoration: none; }
.ge .icon-btn.danger { color: var(--err); }
.home-access { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.home-access:last-child { border-bottom: 0; }
.home-access .access-choice { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; flex: 1 1 100%; padding-left: 26px; }
.home-access .access-choice[hidden], .home-access .clients[hidden] { display: none; }
.home-access .clients { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.home-access label.check { margin: 0; }
.home-actions.head-actions { margin: 0; }
.inline-form.top-form { border-top: 0; margin-top: 0; }
.ge .static-menu .menu a.icon-btn { color: var(--accent); }
/* Staff search and filters (BACKLOG 32): one line on a wide screen, wrapping on a phone. */
.list-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.list-filters input[type=search] { flex: 1 1 12rem; min-width: 0; margin: 0; }
.list-filters select { flex: 0 1 auto; width: auto; margin: 0; }
.rows .who .facts { flex: 1 1 100%; color: var(--muted); font-size: .85rem; }
/* The Objective block of Edit Goal (BACKLOG 34; mockup objective-block.html): one line per row where it fits. */
.ge .ob-h { margin: 10px 0 2px; font-size: 1rem; }
.ge .ob-row { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #e3e6ec; padding: 6px 0; min-height: 40px; }
.ge .ob-row .ledit { flex-wrap: wrap; }
.ge .ob-row .ledit select { width: auto; flex: 0 1 auto; margin: 0; }
.ge .ob-row .n { font-weight: 600; min-width: 1.4em; }
.ge .ob-num, .ge .ledit input.ob-num { width: 5em; flex: 0 0 auto; margin: 0; }
.ge .ob-month { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ge .ob-row.off .ltext, .ge .ob-row.off .ltext .at { color: #8a929c; }
.ge .ob-row.past .ltext { color: #4b5563; }
.ge .sample { color: #8a929c; }
.ge .ob-new { flex-wrap: wrap; }
.ge .ob-start, .ge .ob-crit + button { margin-top: 6px; }
.ge .ob-text .ltext > b + p { display: inline; }
/* The Activity Log card (BACKLOG 37; mockup activity-log.html) and its entries on Recorded Data. */
.al-card input[type=date] { width: 100%; }
.al-field:focus-within .phi-note { display: block; }
.al-sug { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.al-sug[hidden] { display: none; }
.al-sug button { text-align: left; border: 0; border-bottom: 1px solid #eef0f3; border-radius: 0; background: #fff; min-height: 40px; padding: 0 10px; font-weight: 500; color: inherit; }
.al-sug button:last-child { border-bottom: 0; }
label.al-ok { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; line-height: 1.3; }
label.al-ok input { margin-top: 3px; flex: 0 0 auto; width: auto; min-height: 0; }
tr.not-counted td.entry-what { color: #8a929c; }
.al-count { min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid #c9ced6; background: #fff; color: #4b5563; font-weight: 600; }
.al-count.on { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.ph-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-pill { border: 1px solid #c9ceda; border-radius: 999px; padding: 2px 8px; background: #fff; font-size: .85em; }
.al-card fieldset { border: 0; padding: 0; margin: 4px 0; }
/* The Required switch on a question's heading line, left of its three dots (ask 144). */
.ge .sub-head label.req-sw { margin: 0 0 0 auto; font-size: .85rem; font-weight: 500; gap: 6px; }
.ge .sub-head label.req-sw + .ctl { margin-left: 0; }
.ge label.switch.small input { width: 32px; height: 18px; border-radius: 9px; }
.ge label.switch.small input::after { top: 2px; left: 2px; width: 14px; height: 14px; }
.ge label.switch.small input:checked::after { left: 16px; }

/* ----- Recorded Data: one screen for any span (BACKLOG 64, ask 167) ----- */
.dv-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.dv-row .button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dv-form .button.small, .dv-row .button.small { padding: 6px 10px; min-height: 40px; font-size: .9rem; }
.dv-saved { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.dv-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: #fff; padding: 2px 4px 2px 10px; }
.dv-chip button.link { min-width: 32px; min-height: 32px; font-size: 1.1rem; text-decoration: none; }
details.dv-filters, details.dv-custom, details.dv-save { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin: 6px 0; padding: 4px 8px; }
details.dv-filters > summary, details.dv-custom > summary, details.dv-save > summary { font-weight: 700; padding: 4px 0; }
.dv-filters fieldset { border: 0; padding: 0; margin: 6px 0; }
.dv-filters legend { font-weight: 700; padding: 0; }
.dv-ticks { display: flex; flex-wrap: wrap; gap: 0 14px; }
.dv-ticks label.check { display: flex; align-items: center; gap: 4px; min-height: 40px; }
.dv-scroll { overflow-x: auto; }
table.dv-cal { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; margin: 8px 0 2px; }
table.dv-cal caption { text-align: left; font-weight: 700; padding: 2px 0; }
table.dv-cal th { font-size: .75rem; color: var(--muted); font-weight: 600; }
table.dv-cal td { border: 1px solid var(--border); height: 3.6rem; vertical-align: top; padding: 2px; font-size: .85rem; }
table.dv-cal td.out { background: var(--bg); border-color: transparent; }
td.filtered, th.filtered { background: #eceef2; color: #8a929c; }
.dn { display: block; font-size: .72rem; color: var(--muted); }
.dv-val { font-weight: 700; font-size: 1rem; }
button.dv-nr { min-height: 40px; min-width: 40px; padding: 0 6px; border: 1px dashed #c9ced6; background: #f0f1f4; color: #6b7280; font-weight: 600; }
button.dv-nr.on { background: var(--err-bg); border: 1px solid var(--err); color: var(--err); font-size: .72rem; line-height: 1.1; }
.dv-gl { font-size: .75rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-gl .gname { color: var(--muted); }
.dv-gl.empty { color: #8a929c; }
.dv-gl.nr { color: var(--err); font-weight: 700; }
.dv-gl .mk { font-weight: 600; color: #6d28d9; }
/* Marks (BACKLOG 63, 76): each a pill of at most two words, never a `*`; its detail plain text beside it. */
.dv-mk { display: inline-block; margin: 1px 0; padding: 0 5px; border-radius: 5px; font-size: .75rem; font-weight: 600; background: #ede9fe; color: #4c1d95; white-space: nowrap; }
.dv-mk-detail { font-size: .8rem; color: var(--muted); }
.dv-mk.k-excluded, .dv-mk.k-questionable { background: var(--err-bg); color: var(--err); }
.dv-mk.k-event { background: #e0f2fe; color: #075985; }
.dv-mk.k-late { background: var(--warn-bg); color: var(--warn); }
.dv-mk.held { background: #f0f1f4; color: #374151; font-weight: 500; }
a.dv-mlink { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; font-weight: 700; text-decoration: none; }
.dv-panel h3 { margin: 0; flex: 1 1 auto; }
.dv-markform [hidden] { display: none; }
tr.excluded td { color: #8a929c; }
table.dv-table td { vertical-align: top; }
.dv-msum { font-size: .9rem; }
table.dv-side th, table.dv-side td { white-space: nowrap; text-align: center; padding: 3px 4px; }
table.dv-side th:first-child { text-align: left; position: sticky; left: 0; background: #fff; }
table.dv-side td[colspan] { text-align: left; white-space: normal; }
.dv-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dv-month { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
.dv-mline { margin: 4px 0; }
details.dv-mine > summary { font-size: .85rem; color: var(--accent); padding: 2px 0; }
.dv-plot { margin: 6px 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.dv-plot svg { width: 100%; height: auto; display: block; }
.dv-plot line.grid { stroke: #e3e6ea; }
.dv-plot text.ax { font-size: 12px; fill: var(--muted); }
.dv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; margin-top: 4px; }
.dv-legend svg { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; }
/* Goal colors on the Time of Day plot: set by hand, each at least 3:1 against white. */
.c0 { fill: #2459c4; stroke: #2459c4; } .c1 { fill: #b42318; stroke: #b42318; } .c2 { fill: #18794e; stroke: #18794e; }
.c3 { fill: #8a5a00; stroke: #8a5a00; } .c4 { fill: #6d28d9; stroke: #6d28d9; } .c5 { fill: #0e7490; stroke: #0e7490; }
.c6 { fill: #be185d; stroke: #be185d; } .c7 { fill: #4b5563; stroke: #4b5563; }
circle.hollow { fill: #fff; stroke-width: 2; }