/* Shared page styles for every tenant. Tokens only: colours, type and spacing all come from the vendored design
   tokens and the tenant theme. Phone first, one column; two columns from 900px. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 18px; line-height: 1.5; }
h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--sp-2); }
h2 { font-size: 1.125rem; letter-spacing: 0; margin: 0 0 var(--sp-3); }
p { margin: 0 0 var(--sp-3); }
.btn { min-height: var(--tap-min, 48px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sign-in pages: one narrow card of text */
main.narrow { max-width: 28rem; margin: 8vh auto 0; padding: 0 var(--sp-4); }
.brand { display: block; max-width: 100%; height: auto; margin: 0 0 var(--sp-8); }

/* Home */
.app-main { max-width: 64rem; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-8); display: grid; gap: var(--sp-8); grid-template-columns: minmax(0, 1fr); }
.col { display: grid; gap: var(--sp-8); align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.hello .lede { color: var(--text-muted); margin: 0; }
.ask { display: grid; gap: var(--sp-3); }
.ask textarea { width: 100%; box-sizing: border-box; min-height: 7rem; padding: var(--sp-4); font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-md); resize: vertical; }
.ask textarea:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ask textarea:disabled { background: var(--surface-sunk); color: var(--text-muted); }
.ask .hint { color: var(--text-muted); font-size: .875rem; margin: 0; }
.thread { display: grid; gap: var(--sp-3); max-height: 30rem; overflow-y: auto; }
.thread:empty { display: none; }
.msg { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); background: var(--surface); overflow-wrap: anywhere; }
.msg p { margin: 0 0 var(--sp-3); }
.msg > :last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); }
.msg-user { background: var(--primary-pale); border-color: var(--primary-pale); justify-self: end; max-width: 90%; white-space: pre-wrap; }
.msg-error { border-left: 4px solid var(--danger); }
.msg-note { color: var(--text-muted); }
.src { display: inline-block; font-size: .8125rem; line-height: 1.4; padding: 2px 10px; margin: 2px 2px; border: 1px solid var(--border-2); border-radius: var(--r-full); background: var(--surface); color: var(--primary); text-decoration: none; }
a.src:hover { background: var(--primary-pale); }
a.ext { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.host { color: var(--text-muted); font-size: .8125rem; }
.ask form { display: grid; gap: var(--sp-3); }
.ask-actions { display: flex; gap: var(--sp-3); }
/* Files added to a question: a chip per file with a Remove button, an Attach button beside Ask. */
.attach-btn { white-space: nowrap; }
.attach-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.attach-chips[hidden] { display: none; }
.attach-chip { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: 2px var(--sp-3); font-size: .875rem; line-height: 1.4; border: 1px solid var(--border-2); border-radius: var(--r-full); background: var(--surface); color: var(--text); overflow-wrap: anywhere; }
.attach-chips .attach-chip { padding-right: var(--sp-1); }
.attach-chip .attach-remove { min-height: var(--tap-min, 48px); min-width: var(--tap-min, 48px); padding: 0 var(--sp-3); }
.attach-pending, .attach-expired { color: var(--text-muted); }
.msg-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); white-space: normal; }
.float-form .attach-chips { grid-column: 1 / -1; }
.diary .when { color: var(--text-muted); font-size: .875rem; margin: 0 0 var(--sp-3); }
.diary .empty { padding: var(--sp-6) var(--sp-4); }
.diary-list { list-style: none; margin: 0; padding: 0; }
.diary-list li { display: flex; gap: var(--sp-4); padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.diary-list li:last-child { border-bottom: 0; }
.diary-list .t { flex: 0 0 5.5rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.diary-list .what { display: grid; gap: var(--sp-1); min-width: 0; overflow-wrap: anywhere; }
.diary-list .where { color: var(--text-muted); font-size: .875rem; }
a { color: var(--primary); }
.glance { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.app-foot { max-width: 64rem; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); color: var(--text-muted); font-size: .8125rem; }
h2 + p, section.card h2 { margin-top: 0; }
.btn { text-decoration: none; }
.app-main.single { max-width: 64rem; }
.app-main.single .col { max-width: 40rem; }
.alert { display: block; padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); }
.alert ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
@media (min-width: 900px) {
  .app-main.single { grid-template-columns: 1fr; }
  .app-main { grid-template-columns: 3fr 2fr; align-items: start; }
  .ask textarea:not(.ask-input) { min-height: 12rem; }
}

/* Waiting for you */
.draft .meta { display: grid; grid-template-columns: 5rem 1fr; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-4); }
.draft .meta dt { color: var(--text-muted); font-size: .875rem; }
.draft .meta dd { margin: 0; overflow-wrap: anywhere; }
.draft .body { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--sp-4); background: var(--surface-sunk); border: 1px solid var(--border); margin: 0 0 var(--sp-4); }
.draft .actions, .editform .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.draft .tick { flex: 1 1 100%; display: flex; gap: var(--sp-3); align-items: center; min-height: var(--tap-min, 48px); }
.draft .tick input { width: 24px; height: 24px; }
.draft form:last-child { margin: 0; }
.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.recent li:last-child { border-bottom: 0; }
.recent .state { color: var(--text-muted); font-size: .875rem; }
.editform { display: grid; gap: var(--sp-4); }
.editform .field input, .editform .field textarea { font-size: 1rem; }
.editform textarea { min-height: 14rem; }

/* Draft cards inside the conversation */
.draft-card { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-2); background: var(--surface-sunk); display: grid; gap: var(--sp-1); }
.draft-card .label { font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.draft-card .warn { color: var(--ft-coral-text, var(--text)); font-size: .875rem; }
a.stat-tile { color: inherit; text-decoration: none; }

.draft h3 { font-size: .9rem; letter-spacing: 0; text-transform: none; margin: var(--sp-5) 0 var(--sp-2); color: var(--text-muted); }
.draft .where { color: var(--text-muted); font-size: .875rem; }
.draft .diff { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-1); }
.draft .diff li { padding: var(--sp-2) var(--sp-3); border-left: 4px solid var(--border-2); background: var(--surface-sunk); overflow-wrap: anywhere; }
.draft .diff .del { border-left-color: var(--danger); }
.draft .diff .add { border-left-color: var(--ft-green, var(--primary)); }
.draft .diff .sign { font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-right: var(--sp-2); }
.draft details.full { margin: 0 0 var(--sp-4); }
.draft details.full summary { cursor: pointer; min-height: var(--tap-min, 48px); display: flex; align-items: center; font-weight: 600; }
.docform { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.editform .tick { display: flex; gap: var(--sp-3); align-items: center; min-height: var(--tap-min, 48px); }
.editform .tick input { width: 24px; height: 24px; }

/* Business areas */
.areas { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); }
.areas h3 { font-size: 1.05rem; margin: 0 0 var(--sp-2); }
.areas p { margin: 0 0 var(--sp-2); }
.areas .lead { color: var(--text-muted); font-size: .9rem; }
.areas .actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); }
.areas .actions form { margin: 0; }
.areas .hidden-area { opacity: .65; }
.owner-only { display: inline-block; font-size: .7rem; letter-spacing: 0; text-transform: none; padding: 2px 8px; border: 1px solid var(--border-2); color: var(--text-muted); margin-left: var(--sp-2); vertical-align: middle; }
.lede { color: var(--text-muted); }

/* Diary entries and prep cards */
.diary-list a.evt { color: var(--text); font-weight: 600; text-decoration: none; display: block; padding: 2px 0; }
.diary-list a.evt:hover { text-decoration: underline; }
.diary-list .prepline { color: var(--primary); font-size: .875rem; }
.prep-points { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.prep-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* People (owner only) */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-4); }
.facts dt { color: var(--text-muted); font-size: .9rem; }
.facts dd { margin: 0; }
.small-head { font-size: 1rem; margin: var(--sp-4) 0 var(--sp-2); }
.notes { white-space: pre-wrap; margin: 0 0 var(--sp-4); }
.areas h3 a { color: inherit; text-decoration: none; }

.nb { white-space: nowrap; }

/* The floating assistant: a pill button bottom-right on every signed-in page, opening a panel. On a phone the panel is a sheet from the bottom. */
.float-ask { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 60; }
.float-open { box-shadow: var(--shadow-3); }
.float-panel { box-sizing: border-box; position: fixed; right: var(--sp-4); bottom: var(--sp-4); width: min(26rem, calc(100vw - 2 * var(--sp-4))); height: min(38rem, calc(100vh - 2 * var(--sp-4))); display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.float-panel[hidden] { display: none; }
.float-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.float-tools { display: flex; gap: var(--sp-2); }
.float-tools .btn { white-space: nowrap; }
.float-panel .thread { flex: 1; max-height: none; min-height: 0; align-content: start; }
.float-panel .thread:empty { display: block; }
.float-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-2); }
.float-form .ask-actions { margin: 0; }
.float-form textarea { width: 100%; box-sizing: border-box; min-height: 3.25rem; padding: var(--sp-3); font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-md); resize: none; }
.float-panel .hint { margin: 0; min-height: 1.25rem; color: var(--text-muted); font-size: .875rem; }
@media (max-width: 40rem) {
  .float-panel { right: 0; bottom: 0; width: 100vw; height: 85vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
.draft-card .change { display: grid; gap: 2px; font-size: .9375rem; }
.draft-card .change .what { font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.draft-card .change .was { color: var(--text-muted); text-decoration: line-through; }
.draft-card .card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.draft-card .done { color: var(--primary); font-weight: 600; }
.draft-card .left { color: var(--text-muted); font-size: .875rem; }
.ask-stop { margin: 0 0 var(--sp-3); }
.ask-stop[hidden] { display: none; }

/* Journal: a person's register and an area's timeline */
.journal { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.journal-entry { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.journal-entry.is-private { background: var(--surface-sunk); }
.je-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: .875rem; }
.je-date { color: var(--text-muted); }
.je-summary { margin: var(--sp-2) 0 0; font-weight: 600; }
.je-detail { margin: var(--sp-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.je-source, .je-follow { margin: var(--sp-1) 0 0; font-size: .875rem; color: var(--text-muted); }
.je-follow.overdue, .fu-when.overdue { color: var(--danger); font-weight: 600; }
.je-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.journal .btn-sm { min-height: 2.5rem; }
form.inline { display: inline; margin: 0; }
.addentry { margin: var(--sp-3) 0; }
.addentry > summary { cursor: pointer; display: inline-flex; list-style: none; }
.addentry[open] > summary { margin-bottom: var(--sp-3); }
details.timeline { margin-top: var(--sp-3); }
details.timeline > summary { cursor: pointer; font-weight: 600; }
.followup-list { list-style: none; margin: 0; display: grid; gap: var(--sp-2); }
.followup-list li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.fu-kind, .fu-when { color: var(--text-muted); font-size: .875rem; }
.draft-card .change .now { white-space: pre-wrap; overflow-wrap: anywhere; }
.keeplines { white-space: pre-wrap; }

/* Settings: set-up steps, usage lines, key forms */
.steps { margin: var(--sp-3) 0 0; padding-left: var(--sp-6); display: grid; gap: var(--sp-1); }
.steps li.done { color: var(--primary); font-weight: 600; }
.usage { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-2); }
.usage li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2); }
code.uri { display: block; padding: var(--sp-3); background: var(--surface-sunk); border-radius: var(--r-md); overflow-wrap: anywhere; user-select: all; }
details.confirm { display: inline-block; }
details.confirm > summary { cursor: pointer; list-style: none; }
details.confirm[open] { display: block; margin-top: var(--sp-2); }
details.confirm form { margin-top: var(--sp-2); }

/* Xero access chooser */
table.access { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; }
table.access th { text-align: left; font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); padding: var(--sp-2); }
table.access td { padding: var(--sp-2); border-top: 1px solid var(--border); vertical-align: top; }
table.access th:nth-child(n+2), table.access td:nth-child(n+2) { text-align: center; width: 5.5rem; }
table.access input[type=checkbox] { width: 1.5rem; height: 1.5rem; margin: 0; }
/* The whole cell is the tap target: the label fills it, at least 44px tall and as wide as the column (88px). */
table.access td.tapcell { padding: 0; vertical-align: middle; }
table.access label.tapfill { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; cursor: pointer; }
/* Cards from the Claude Code engine and the answer while it is being written */
.msg-live { white-space: pre-wrap; color: var(--text-muted); }
.draft-card .card-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; margin: var(--sp-1) 0 0; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--border); font-size: .8125rem; }
.draft-card .card-detail summary { cursor: pointer; font-size: .875rem; }
/* Settings: "Getting set up" steps, and folded sections the current engine does not use. */
.setup { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.setup > li { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.setup > li:first-child { border-top: 0; padding-top: 0; }
.setup p { margin: var(--sp-1) 0 var(--sp-3); color: var(--text-muted); }
.setup .setup-head { display: flex; align-items: center; gap: var(--sp-3); }
.setup .setup-n { flex: 0 0 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-2); border-radius: var(--r-full); font-weight: 600; font-variant-numeric: tabular-nums; }
.setup > li.done .setup-n { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.setup > li.done strong { color: var(--primary); }
.setup .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.setup .actions form { margin: 0; }
.setup .actions .hint { color: var(--text-muted); font-size: .875rem; }
details.fold { display: grid; gap: var(--sp-4); }
details.fold > summary { cursor: pointer; min-height: var(--tap-min, 48px); display: flex; align-items: center; padding: 0 var(--sp-4); border: 1px solid var(--border-2); background: var(--surface); font-weight: 600; }
details.fold[open] > summary { margin-bottom: var(--sp-4); }
details.fold > .hint { color: var(--text-muted); margin: 0 0 var(--sp-4); }
details.fold > section + section { margin-top: var(--sp-8); }
.setup ol.how { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); display: grid; gap: var(--sp-1); }
.setup ol.how li { padding: 0; border: 0; }
.setup .setup-account { margin: 0 0 var(--sp-3); padding: var(--sp-4); background: var(--surface-sunk); border: 1px solid var(--border); }
.setup .setup-account p:last-child, .setup .setup-account form:last-child { margin-bottom: 0; }
.device-link .qr { max-width: 18rem; margin: 0 0 var(--sp-4); background: #fff; }
.device-link .qr svg { display: block; width: 100%; height: auto; }
.setup .setup-device { margin: 0 0 var(--sp-3); }

/* Tasks */
.tasks-panel .card { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.tasks-panel h3 { margin: var(--sp-2) 0 0; font-size: 1rem; }
.quickadd { display: flex; gap: var(--sp-2); align-items: stretch; margin: 0; }
.quickadd input, .quickadd textarea { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: var(--sp-3) var(--sp-4); font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-md); }
.quickadd input:focus, .quickadd textarea:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.tasks-page .quickadd { flex-direction: column; align-items: flex-start; }
.tasks-page .quickadd textarea { width: 100%; }
.tasks-page .task-links { margin-top: var(--sp-3); }
.tag-filter { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-4) 0 0; }
.tag-filter label { font-weight: 600; }
.tag-filter select { min-height: 2.75rem; padding: 0 var(--sp-4); font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-md); }
.tag-filter select:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.task-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0; }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tasks-page .task-list { padding: var(--sp-2) var(--sp-5); }
.task { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; align-items: flex-start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.task-main { display: grid; gap: var(--sp-1); min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.task-title { font-weight: 600; }
.task-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); color: var(--text-muted); font-size: .875rem; }
.task-star { color: var(--primary); }
.task-high { color: var(--danger); font-weight: 600; }
.task-slot { font-variant-numeric: tabular-nums; color: var(--primary); font-weight: 600; }
.task-note { color: var(--text-muted); white-space: pre-wrap; font-size: .9375rem; }
.task-due.overdue, .task.overdue .task-title { color: var(--danger); }
.task-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.task-actions .btn-sm, .task-links .btn-sm, .tasks-page .btn-sm { min-height: 2.75rem; }
.task-edit, .task-move { flex: 0 0 auto; }
.task-edit[open], .task-move[open] { flex: 1 1 100%; }
.task-move > summary { list-style: none; cursor: pointer; display: inline-flex; }
.task-move[open] > summary { margin-bottom: var(--sp-3); }
.move-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.move-waiting { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.move-waiting input { min-height: 2.75rem; box-sizing: border-box; padding: 0 var(--sp-3); font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-md); }
.task-edit > summary { list-style: none; cursor: pointer; display: inline-flex; }
.task-edit[open] > summary { margin-bottom: var(--sp-3); }
.task-clash { color: var(--danger); font-size: .875rem; padding: 0 0 var(--sp-2); list-style: none; }
.tasks-page .count { color: var(--text-muted); font-size: .875rem; font-weight: 400; }
.task-big { overflow-wrap: anywhere; }
.clear-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.clear-actions .btn { min-height: 3rem; }
.countdown { font-size: 2.5rem; font-variant-numeric: tabular-nums; color: var(--primary); margin: var(--sp-3) 0; }
.countdown.over { color: var(--danger); }

/* Task manager tidy-up (2026-10-21): quick sort buttons, waiting form, details folded away, readable labels, phone order */
.waiting-quick { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin: 0 0 var(--sp-4); }
.waiting-quick .field { flex: 1 1 14rem; min-width: 0; }
.waiting-quick .btn { min-height: 3rem; }
.more-details > summary { list-style: none; cursor: pointer; display: inline-flex; }
.more-details[open] > summary { margin-bottom: var(--sp-3); }
.tasks-page .field label { font-family: inherit; font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.tasks-page .actions { margin-top: var(--sp-4); }
@media (max-width: 899px) {
  /* On a phone the day's tasks come straight after the greeting, before the ask box and diary. */
  .app-main:not(.single) { display: flex; flex-direction: column; }
  .app-main:not(.single) > .col { display: contents; }
  .app-main:not(.single) .hello { order: -2; }
  .app-main:not(.single) .tasks-panel { order: -1; }
}
@media (max-width: 40rem) {
}
.tasks-added { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.tasks-added li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tasks-added li.undone > span:first-child { text-decoration: line-through; color: var(--text-muted); }

/* Home, owner's sections layout */
.home-sections { display: grid; gap: var(--sp-8); grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
.home-sections > * { min-width: 0; }
.home-sec h2 { margin-top: 0; }
.home-sec .sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.home-sec .sec-head h2 { margin-bottom: var(--sp-2); }
.quote { margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); border-left: 3px solid var(--primary); color: var(--text-muted); font-style: italic; }
.briefing-slot { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius, .5rem); padding: var(--sp-4); min-height: 3rem; }
.briefing-slot .hint { color: var(--text-muted); font-size: .875rem; margin: 0; }
.idea-list { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
@media (min-width: 900px) {
  .home-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .home-sections .home-wide { grid-column: 1 / -1; }
}

/* Ask bar: attach on the left and Ask on the right, level with the first line; about four lines tall, grows as you type (Mark, 2026-10-24). */
.ask-bar { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 6px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg, 16px); }
.ask-bar:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ask .ask-bar textarea.ask-input { flex: 1; min-width: 0; min-height: 7rem; max-height: 16rem; padding: 10px 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; resize: none; overflow-y: auto; line-height: 1.4; }
.ask .ask-bar textarea.ask-input:focus { outline: none; box-shadow: none; }
.ask-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-muted); cursor: pointer; }
.ask-icon:hover:not(:disabled) { background: var(--primary-pale); color: var(--primary); }
.ask-icon:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ask-icon:disabled { opacity: .5; cursor: default; }
.ask-send { flex: none; min-height: 2.75rem; border-radius: var(--r-full); padding-inline: var(--sp-4); }
.quote-edit { margin-top: var(--sp-2); }
.quote-edit summary { cursor: pointer; color: var(--primary); font-size: .875rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.quote-edit form { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.quote-edit textarea { width: 100%; box-sizing: border-box; padding: var(--sp-3); font: inherit; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
.quote-edit .btn { justify-self: start; }

/* One compact top bar on every signed-in page (src/lib/chrome.js, views/partials/app-top.ejs); Sign out is in the footer. */
.app-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); max-width: 64rem; margin: 0 auto; }
.app-top .brand-link { display: inline-flex; flex: 0 1 220px; min-width: 0; }
.app-top .brand { margin: 0; width: 100%; height: auto; max-width: 220px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; max-width: 100%; }
.top-nav a { white-space: nowrap; padding: 5px 8px; min-height: 2.25rem; display: inline-flex; align-items: center; border-radius: var(--r-full); font-size: .8125rem; font-weight: 600; color: var(--text); text-decoration: none; }
.top-nav a:hover { background: var(--primary-pale); }
.top-nav a[aria-current="page"] { background: var(--primary); color: var(--surface); }
.back-link { max-width: 64rem; margin: 0 auto; padding: 0 var(--sp-4); }
.back-link a { font-size: .875rem; }
.app-foot { max-width: 64rem; margin: var(--sp-8, 3rem) auto var(--sp-6, 2rem); padding: var(--sp-4); border-top: 1px solid var(--border-2); text-align: center; }
.app-foot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.app-foot form { margin: 0; }
.app-foot .credit { font-size: .8125rem; color: var(--text-muted); }
@media (max-width: 599px) {
  .app-top { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
  .app-top .brand-link { flex-basis: 170px; }
  .top-nav { margin-left: -6px; width: calc(100% + 6px); gap: 0; }
  .top-nav a { padding: 5px 6px; }
}

/* What can TEA do? (/help) and the links to it */
.ask-help { margin: 0; font-size: .875rem; }
.help-link { font-size: .875rem; font-weight: 600; }
.help-page { max-width: 48rem; }
.help-group h2 { margin-top: 0; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.help-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.help-text { display: grid; gap: 2px; min-width: 0; }
.help-say { font-style: italic; color: var(--text); }
.help-list .btn { flex: none; }
.help-plain { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }

/* ---- Review 2026-10-24: sentence case, a solid focus ring, 48px taps, chat in the page flow ---- */
/* Vendored rules that shout in capitals are overridden here (vendor/ is never edited). */
.label, .chip, .stat-tile-label, .field label, table.dtable th { text-transform: none; letter-spacing: 0; }
.label { font-family: var(--font-body); font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.chip { font-size: .8125rem; }
.stat-tile-label { font-size: .875rem; }
.field label { font-family: var(--font-body); font-size: .9375rem; font-weight: 600; color: var(--text); }
table.dtable th { font-family: var(--font-body); font-size: .875rem; font-weight: 600; }
.draft-card .label, .draft-card .change .what, .draft .diff .sign, table.access th, .owner-only, .draft h3 { font-size: .875rem; }

/* Focus: a solid ring, 3:1 or better on the beige, on everything that takes a key press. */
a:focus-visible, summary:focus-visible, select:focus-visible, button:focus-visible,
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible,
input:not([type=checkbox]):not([type=radio]):focus-visible, textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Taps: every link and choice is at least 48px tall. */
.help-link, .ask-help a, .card-link { display: inline-flex; align-items: center; min-height: var(--tap-min, 48px); }
.card-link { padding-right: var(--sp-3); }
.tick, label.inline-choice { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap-min, 48px); }
.tick input[type=checkbox], .tick input[type=radio], label.inline-choice input { flex: none; width: 24px; height: 24px; margin: 0; }
fieldset.field { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
fieldset.field legend { flex: 1 1 100%; font-weight: 600; }
.followup-list a, .idea-list a { display: inline-flex; align-items: center; min-height: var(--tap-min, 48px); }
.idea-list { list-style: none; padding-left: 0; }

/* The conversation is part of the page: one scroll, no box inside it. (The floating panel keeps its own, it is a sheet.) */
.thread { max-height: none; overflow: visible; }
.float-panel .thread { overflow-y: auto; }

/* Starter prompts under the ask box */
.starters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
/* Chip-sized so two sit on one row at 390 px, and wrap after that; still a full 48 px tap. The selector has to outrank the
   tenant theme's own :root[data-tenant-theme] .btn (28px padding). */
.ask .starters a.btn { min-height: var(--tap-min, 48px); padding: 0 var(--sp-3); font-size: .875rem; }

/* Home: Needs you, last conversation */
.needs-you { display: grid; gap: var(--sp-3); }
.needs-you h2 { margin: 0; }
.needs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.needs-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.needs-list li:last-child { border-bottom: 0; }
.needs-list .what { display: grid; min-width: 0; overflow-wrap: anywhere; }
.needs-list form { margin: 0; }
.calm { color: var(--text-muted); margin: 0; }
details.last-convo > summary { cursor: pointer; min-height: var(--tap-min, 48px); display: flex; align-items: center; font-weight: 600; color: var(--primary); }
details.last-convo[open] > summary { margin-bottom: var(--sp-3); }

/* Tasks page: empty lists in one line, plan chips, the filter without its button when scripts run */
.empty-lists { color: var(--text-muted); margin: 0; }
.tasks-page .task-links { gap: var(--sp-3); }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.choice-row .chip-choice { position: relative; }
.choice-row .chip-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-row .chip-choice span { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min, 48px); min-width: 4.5rem; padding: 0 var(--sp-4); border: 1px solid var(--border-2); border-radius: var(--r-full); background: var(--surface); font-weight: 600; }
.choice-row .chip-choice input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.choice-row .chip-choice input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.field legend { font-weight: 600; }
.review-count { color: var(--text-muted); font-weight: 400; font-size: .9375rem; }
.editform fieldset.field { display: grid; gap: var(--sp-2); }
.btn[hidden] { display: none; }

/* Documents */
.docs-page .doc-list { list-style: none; margin: 0; display: grid; gap: var(--sp-3); }
.docs-page .doc-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); min-width: 0; }
.docs-page h1, .docs-page .doc-meta { overflow-wrap: anywhere; }
.docs-page .doc-title { font-weight: 600; font-size: 1.0625rem; min-height: var(--tap-min, 48px); display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.docs-page .doc-meta { color: var(--text-muted); font-size: .875rem; }
.docs-page .doc-body { overflow-wrap: anywhere; min-width: 0; }
.docs-page .doc-body table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; }
.docs-page .doc-body th, .docs-page .doc-body td { border: 1px solid var(--border-2); padding: var(--sp-2) var(--sp-3); }
.docs-page .doc-body blockquote { margin-left: 0; padding-left: var(--sp-4); border-left: 3px solid var(--border-2); }
.docs-page .doc-form textarea { width: 100%; min-height: 20rem; font-family: inherit; }
.docs-page .doc-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.docs-page .doc-toolbar[hidden], .docs-page .doc-editor[hidden], .docs-page .doc-form textarea[hidden] { display: none; }
.docs-page .doc-editor { min-height: 20rem; border: 1px solid var(--border-2); background: var(--surface); overflow-wrap: anywhere; }
.docs-page .doc-editor:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.docs-page .doc-danger summary { cursor: pointer; min-height: var(--tap-min, 48px); display: flex; align-items: center; }

.docs-page .tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.docs-page .tag-filter select { flex: 1 1 8rem; min-width: 0; max-width: 100%; }

/* Decision inbox and operator page: big, well-spaced buttons. Yes and No sit at opposite ends of the card, with Later and Change between. */
.decide-actions { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 0; }
/* The theme sets .btn padding and size with a more specific selector, so these repeat the parents to win. */
.app-main .decide-actions .btn.decide-yes, .app-main .decide-actions .btn.decide-no, .app-main .decide-actions .btn.decide-wide { width: 100%; min-height: 4.5rem; font-size: 1.25rem; }
.decide-mid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-4) 0; }
.decide-mid .btn { min-height: var(--tap-min, 48px); }
.decide textarea, .operator-page textarea { width: 100%; box-sizing: border-box; padding: var(--sp-4); font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-md); }
.decide textarea:focus, .operator-page textarea:focus, .operator-page input:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.decide blockquote { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--primary); background: var(--surface-sunk); }
.decisions .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.decisions .group { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.operator-page progress { width: 100%; height: 1rem; }
.operator-page input[name="budget"] { font: inherit; padding: var(--sp-3); min-height: var(--tap-min, 48px); width: 14rem; max-width: 100%; box-sizing: border-box; }
.operator-page .stage-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.operator-page .stage-row p { margin: 0; flex: 1 1 16rem; }
.operator-page .ctl { margin-bottom: var(--sp-4); }
.operator-page .recent form { display: inline; }
.operator-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.operator-page .ctl { gap: var(--sp-8); } /* Pause and Stop well apart: a stray tap must not hit Stop */
.operator-page .actions form { margin: 0; }
/* How it's going (new IB B2): goals and standing checks, each with a worded traffic light and the owner's priority taps */
.goal-list { list-style: none; margin: 0; padding: 0; }
.goal-list li { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.goal-list li:last-child { border-bottom: 0; }
.goal-list p { margin: 0 0 var(--sp-2); }
.goal-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.goal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.operator-page .btn-sm { min-height: 48px; }
.operator-page details > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }