/* Project Manager (sites/tasks): app-specific styles on top of the adminv1 kit (public/vendor/adminv1).
   Everything reads kit tokens, so light/dark, density and the accent come for free. Unlayered on purpose: it wins over the
   kit's layers without !important. Anything another app could use belongs in the kit (adminv1/ADOPTING.md), not here.
   Check every view in light AND dark (the owner uses dark for this app) and at 375px. */

/* ---- small helpers ---- */
.flashbar:not(:has(> *)) { display: none; }               /* Blade leaves whitespace, so :empty never matches */
.title-link { color: inherit; text-decoration: none; }
.title-link:hover { color: var(--accent-text); text-decoration: underline; }
.section-label { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.375rem; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.nav-dot { margin-inline-start: auto; }
.nav-link:has(.nav-dot) .nav-count { margin-inline-start: 0; }
.muted-link { color: var(--text-muted); text-decoration: none; }
.muted-link:hover { color: var(--accent-text); text-decoration: underline; }
@keyframes pm-flash { from { background: var(--accent-subtle); } to { background: transparent; } }
.is-flashing { animation: pm-flash 2.5s ease-out; }

/* ---- "add" = a plus in a circle at the far right of the heading it adds to (round 2, P35) ---- */
.add-btn { --control-h: 1.75rem; color: var(--accent-text); }
.add-btn .icon { --icon-size: 1.125rem; }

/* ---- calendar tile: one fixed size wherever a date shows; colour = urgency (round 2, T1/F3) ---- */
.date-tile { display: inline-flex; flex-direction: column; flex: none; inline-size: 2.75rem; block-size: 2.85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; line-height: 1; text-align: center; }
.date-tile-month { padding: 0.22rem 0 0.18rem; font-size: 0.6rem; font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg-muted); color: var(--text-muted); border-block-end: 1px solid var(--border-subtle); }
.date-tile-day { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: var(--weight-bold); color: var(--text-strong); }
.date-tile-warning { border-color: var(--warning-solid); }
.date-tile-warning .date-tile-month { background: var(--warning-solid); color: var(--on-warning); border-color: var(--warning-solid); }
.date-tile-danger { border-color: var(--danger-solid); }
.date-tile-danger .date-tile-month { background: var(--danger-solid); color: var(--on-solid); border-color: var(--danger-solid); }
.date-slot { flex: none; inline-size: 2.75rem; display: inline-flex; justify-content: center; }

/* ---- task and note rows (round 2, P21): title, one chip line, date tile in a fixed slot; the row opens the task ---- */
.task-list > li, .task-row { align-items: flex-start; cursor: pointer; }
.task-item-title { font-weight: var(--weight-medium); color: var(--text-strong); text-decoration: none; overflow-wrap: anywhere; }
.task-item-title:hover { color: var(--accent-text); text-decoration: underline; }
.task-item.is-done .task-item-title { text-decoration: line-through; color: var(--text-muted); }
.task-item.is-overdue .task-item-title { color: var(--danger-text); }
.task-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-block-start: 0.25rem; min-block-size: 1.25rem; }
.task-chips:empty { display: none; }
/* a task's number (#217, what search and /tasks/217 open): quiet, in the kit's id face, first in a row's chip or meta line */
.task-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.note-item { border-inline-start: 3px solid var(--warning-solid); padding-inline-start: var(--space-sm); }
.note-item-body { color: var(--text-muted); font-size: var(--text-sm); }
.list-section { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: 0.375rem 0; border-block-end: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-muted); }
.list-section-toggle { color: inherit; text-decoration: none; cursor: pointer; }
.list-section-toggle:hover { color: var(--accent-text); }

/* ---- workstream rows on the project page (hill colour dot ties a row to its dot on the hill) ---- */
.stream-dot { flex: none; inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; margin-block-start: 0.35rem; }
.stream-name { font-weight: var(--weight-semibold); color: var(--text-strong); text-decoration: none; }
.stream-name:hover { color: var(--accent-text); text-decoration: underline; }
.stream-sentence { color: var(--text-muted); font-size: var(--text-sm); }
.stream-meta { color: var(--text-subtle); font-size: var(--text-xs); }

/* ---- status updates: two lines until clicked, "to resume" always in full (round 2, P12) ---- */
.update-entry { padding-block: var(--space-sm); border-block-end: 1px solid var(--border-subtle); }
.update-entry:first-child { padding-block-start: 0; }
.update-entry:last-child { border-block-end: 0; }
.update-entry.is-archived { opacity: 0.65; }
.update-text { margin-block-start: 0.25rem; cursor: pointer; }
.update-text p:last-child { margin-block-end: 0; }
.update-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.update-text.is-clamped > * { display: inline; }
.resume-hint { color: var(--accent-text); font-size: var(--text-sm); margin-block-start: 0.25rem; }
.update-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); margin-block-start: 0.25rem; font-size: var(--text-xs); color: var(--text-muted); }

/* ---- hill chart (draggable dots, round 2 P3/P6) ---- */
.hill-svg { inline-size: 100%; block-size: auto; max-block-size: 260px; display: block; user-select: none; touch-action: none; }
.hill-label { font-size: 12px; fill: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.hill-name { font-size: 11px; fill: var(--text); pointer-events: none; }
.hill-line { stroke: var(--border-strong); }
.hill-dot { cursor: grab; }
.hill-dot circle { stroke: var(--bg-surface); }
.hill-dot.unplaced circle { opacity: 0.45; stroke-dasharray: 2 2; }
.hill-dot.dragging { cursor: grabbing; }
.hill-dot.dragging circle { r: 11; }

/* ---- task panel (drawer): read mode first, fields, where it lives; comments and history under it ---- */
.task-panel { --drawer-w: 36rem; }
.task-panel .panel-form { gap: var(--space-md); }
.panel-read-title { margin: 0 0 0.5rem; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-strong); overflow-wrap: anywhere; }
.panel-title-input { font-size: var(--text-md); font-weight: var(--weight-semibold); resize: none; }
/* a note reads top-down in DOM order: where it lives, then its text. A task leads with its title; where it lives comes after its fields. */
.task-panel:not(.is-note) .panel-task-fields { order: 1; }
.task-panel:not(.is-note) .panel-where { order: 2; }
.task-panel:not(.is-note) .panel-labels { order: 3; }
.panel-box { margin-block-start: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.panel-time-form { display: grid; grid-template-columns: 6rem 9.5rem minmax(0, 1fr) auto; gap: var(--space-xs); align-items: end; }
@container (max-width: 30rem) { .panel-time-form { grid-template-columns: 1fr 1fr; } .panel-time-note { grid-column: 1 / -1; } }
.panel-section { margin-block-start: var(--space-lg); }
/* comment box: five rows, Post underneath on the right (Davin, 2026-09-26) */
.panel-comment-form { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); margin-block-start: var(--space-xs); }
.panel-comment-form .textarea { align-self: stretch; }
/* comments use the kit's comment component; plain text keeps its line breaks. Own ones have edit / delete; a deleted one
   stays for the owner, struck through; the owner opens earlier versions under the text */
.comment-body { white-space: pre-wrap; font-size: var(--text-sm); }
.comment-header .btn-link { padding-inline: 0.125rem; font-size: inherit; }
.comment.is-deleted .comment-body { color: var(--text-muted); text-decoration: line-through; }
.comment-history { margin: 0 var(--space-md) var(--space-sm); padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--border-subtle); }
.comment-history .comment-body { padding: 0; }
.comment-version + .comment-version { margin-block-start: 0.375rem; }
.comment-version-head { font-size: var(--text-xs); color: var(--text-muted); }
.comment .panel-comment-form { margin: 0; padding: var(--space-sm) var(--space-md); }
.history-row { padding-block: 0.3rem; border-block-start: 1px solid var(--border-subtle); font-size: var(--text-xs); }
.history-row:first-child { border-block-start: 0; }

/* ---- labels: a tag field (chips with an x, type + Enter or comma adds; round 2 P29) with suggestions under it ---- */
.tag-field { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-block-size: var(--control-h); padding: 0.25rem 0.5rem; border: var(--border-width) solid var(--border-input); border-radius: var(--radius-control); background: var(--bg-surface); cursor: text; }
.tag-field:focus-within { outline: 2px solid var(--focus-ring); outline-offset: -1px; border-color: var(--accent); }
.tag-field .token-group { display: contents; }
.tag-field [data-tag-entry] { flex: 1 1 8rem; min-inline-size: 6rem; border: 0; outline: 0; background: transparent; color: inherit; padding: 0; font: inherit; }
.tag-chip { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.0625rem 0.125rem 0.0625rem 0.4rem; border-radius: var(--radius-sm); background: var(--neutral-subtle); color: var(--neutral-text); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.tag-chip button { border: 0; background: transparent; color: inherit; padding: 0 0.25rem; line-height: 1; font-size: 1rem; opacity: 0.7; cursor: pointer; }
.tag-chip button:hover { opacity: 1; color: var(--danger-text); }
.label-suggest { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-start: 0.375rem; }
.label-suggest:empty { display: none; }
.label-suggest .badge { cursor: pointer; border: 0; font: inherit; font-size: var(--text-xs); }
.label-suggest .badge:hover { background: var(--accent-subtle); color: var(--accent-text); }

/* ---- note text boxes: room for a paragraph ---- */
.note-text { min-block-size: calc(5 * 1.5em + 1rem); font-size: var(--text-md); }

/* ---- Sign-in & security: the QR code stays on white so it scans in dark mode; codes in a monospace grid ---- */
.qr-box { display: block; inline-size: max-content; background: #fff; padding: 0.5rem; border-radius: var(--radius-md); line-height: 0; }
.qr-box svg { inline-size: 180px; block-size: 180px; }
.setup-steps { padding-inline-start: 1.25rem; list-style: decimal; margin: 0; }
.setup-steps li { margin-block-end: var(--space-md); padding-inline-start: 0.25rem; }
.setup-steps li:last-child { margin-block-end: 0; }
.totp-input { inline-size: 8rem; font-family: var(--font-mono); letter-spacing: 0.15em; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.3rem 2.5rem; font-family: var(--font-mono); font-size: var(--text-md); }
@media (max-width: 400px) { .recovery-codes { grid-template-columns: max-content; } }


/* ---- page scaffolding the kit has no name for ---- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-sm); }
.section-title { margin: 0 0 var(--space-md); font-size: var(--fs-section-title, var(--text-md)); font-weight: var(--weight-semibold); color: var(--text-strong); display: flex; align-items: center; gap: 0.375rem; }
.section-head .section-title { margin: 0; }   /* in a heading row the row carries the space */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.flyout { --drawer-w: 32rem; }
.flyout-hint { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.form-card { max-inline-size: 32rem; }
.security-page { max-inline-size: 46rem; }
.doc-page { max-inline-size: 60rem; }
.priority-1 { color: var(--danger-text); }
.priority-2 { color: var(--warning-text); }

/* ---- Focus: "waiting on you" strip, equal project cards, coming-due column (round 2, F1-F20) ---- */
.waiting-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-lg); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--bg-surface); font-size: var(--text-sm); }
.waiting-item { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text); text-decoration: none; font-weight: var(--weight-medium); }
.waiting-item .icon { color: var(--warning-text); }
.waiting-item:hover { color: var(--accent-text); text-decoration: underline; }
.waiting-item.is-blocked, .waiting-item.is-blocked .icon { color: var(--danger-text); }
.focus-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@container content (min-width: 60rem) { .focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.focus-card .card-body { display: flex; flex-direction: column; block-size: 100%; }
.focus-card.is-at_risk { border-inline-start: 3px solid var(--warning-solid); }
.focus-card.is-blocked { border-inline-start: 3px solid var(--danger-solid); }
.focus-card-name { font-weight: var(--weight-semibold); color: var(--text-strong); text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; }
.focus-card-name:hover { color: var(--accent-text); }
.focus-card-sentence { margin: var(--space-xs) 0 0.25rem; font-size: var(--text-sm); line-height: 1.45; min-block-size: calc(3 * 1.45em); color: var(--text); }
.focus-card-parts { min-block-size: 1.2rem; font-size: var(--text-xs); color: var(--text-muted); }
.focus-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); min-block-size: 2.85rem; margin-block-start: auto; padding-block-start: var(--space-xs); }
.focus-card-touched { font-size: var(--text-xs); color: var(--text-muted); }
.due-list > li > .list-item { display: flex; align-items: center; gap: var(--space-sm); }
.due-row-title { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.35; color: var(--text-strong); }

/* ---- project and workstream pages ---- */
.project-line { display: flex; flex-direction: column; gap: 0.375rem; }
.project-scope { max-inline-size: 60rem; }
.stream-row { align-items: flex-start; }
.stream-pick.is-current { font-weight: var(--weight-semibold); box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: var(--space-sm); }
.stream-pick.is-current .list-title { color: var(--accent-text); }
.done-expander { margin-block-start: var(--space-xs); }
.inplace-title { display: inline-flex; align-items: center; min-inline-size: 0; }
.decision-item.is-proposed { box-shadow: inset 3px 0 0 var(--warning-solid); padding-inline-start: var(--space-sm); }
.decision-text { margin-block: 0.25rem; }
.decision-item .decision-answer { margin-block-start: var(--space-xs); max-inline-size: 40rem; }
/* decision answers: A, B ... before each option, like Claude's own questions */
.choice-letter { display: inline-block; min-inline-size: 1.25em; font-weight: 600; color: var(--accent-text); }
.review { max-inline-size: 52rem; }
.review-decision { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); margin: 0; }
.task-row { align-items: flex-start; }
.task-row-actions { flex-wrap: wrap; justify-content: flex-end; max-inline-size: 28rem; }
.task-row-body { margin-block-start: 0.125rem; }
.overview-card.is-parked { opacity: 0.75; }
.overview-grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
tr.is-late td { background: var(--warning-subtle); }
.roadmap-group .list-main { gap: 0.25rem; }
.path-btn .font-mono { font-size: var(--text-xs); }

/* ---- Project settings pickers: icon tiles and colour swatches (round 2, S6/S7/S9) ---- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)); gap: 0.25rem; margin-block-start: 0.25rem; max-block-size: 15rem; overflow-y: auto; }
.pick { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; color: var(--text); background: var(--bg-surface); padding: 0; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:hover { border-color: var(--accent); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent); }
.pick:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pick-auto { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.pick-swatch { inline-size: 60%; block-size: 60%; border-radius: 50%; }
.icon-picker-head { display: flex; align-items: center; gap: var(--space-xs); }
.icon-current { flex: none; inline-size: 2.5rem; block-size: 2.5rem; --icon-size: 1.25rem; }
.icon-current.is-custom { border-color: var(--accent); color: var(--accent-text); background: var(--accent-subtle); }

/* paths in rendered documents are copy chips (App\Support\Markdown, kit .copy-value): the path itself copies too */
.path-chip > code[data-copy] { cursor: copy; }

/* Activity: time, icon, what happened; a row with a task opens it in the panel */
.activity-item { align-items: flex-start; cursor: pointer; }
.activity-item.is-plain { cursor: default; }
.activity-time { flex: none; inline-size: 2.75rem; font-variant-numeric: tabular-nums; padding-block-start: 0.0625rem; }
.activity-icon { flex: none; color: var(--text-subtle); padding-block-start: 0.125rem; }

/* Scheduled jobs: a job's last runs as a row of kit dots, oldest first (jobs/_strip). Each item is a little larger than its
   dot so the pointer finds it; hovering names the run. */
.run-strip { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.run-strip > li { display: inline-flex; padding: 0.3125rem 0.125rem; }
/* a job with something wrong is marked at its edge, as a proposed decision is: danger failing, warning overdue or unfinished */
.job-card.is-danger { box-shadow: inset 3px 0 0 var(--danger-solid); padding-inline-start: var(--space-sm); }
.job-card.is-warning { box-shadow: inset 3px 0 0 var(--warning-solid); padding-inline-start: var(--space-sm); }

/* Claude sessions: the project picker keeps a readable width when the table scrolls on a phone */
.session-pick { min-inline-size: 9rem; }

/* Document page (documents/show): the published text at reading width, the publish line under it, comments in a card below */
.doc-wrap { max-inline-size: 60rem; }
.doc-meta { margin: 0; }
.doc-meta a[aria-current="page"] { text-decoration: none; }

/* ---- To-do sheet (/todo): one line per task on screen and on paper. On screen a row opens the task panel and shows no box
   (Davin, 2026-10-25: no checkboxes he could close a task with by accident); the printout has a box to tick with a pen ---- */
.todo-sheet { display: grid; gap: var(--space-lg, 1.5rem); max-inline-size: 60rem; }
.todo-heading { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; font-size: var(--text-sm); font-weight: var(--weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.todo-group-overdue .todo-heading { color: var(--danger-text, var(--text-strong)); }
.todo-count { letter-spacing: normal; text-transform: none; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; gap: 0.75rem; padding-block: 0.4rem; border-block-end: 1px solid var(--border-subtle); cursor: pointer; }
@media (hover: hover) { .todo-row:hover { border-block-end-color: var(--border-strong); } }
.todo-box { display: none; inline-size: 0.875rem; block-size: 0.875rem; border: 1.5px solid var(--text-muted); border-radius: 2px; align-self: center; }
.todo-date { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.todo-main { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; row-gap: 0.125rem; min-inline-size: 0; }
.todo-title { overflow-wrap: break-word; min-inline-size: 0; }
.todo-num { font-family: var(--font-mono); font-size: var(--text-xs); }
.todo-group.is-not-printed { opacity: 0.45; }
.todo-skip { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: none; letter-spacing: 0; }
.todo-print-pick { display: inline-flex; }
.todo-chips { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; font-size: var(--text-sm); }
@media (max-width: 40rem) {
  .todo-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.125rem; }
}
@media print {
  body:has(.todo-sheet) { background: #fff; color: #000; }
  body:has(.todo-sheet) :is(.app-topbar, .app-sidebar, .app-bar, .app-footer, .app-tools, .flashbar, .page-actions, .skip-link, .info-link) { display: none !important; }
  body:has(.todo-sheet) :is(.app, .app-body, .app-main, .app-content) { display: block; position: static; inset: auto; block-size: auto; max-block-size: none; min-block-size: 0; overflow: visible; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; color: #000; }
  body:has(.todo-sheet) .page-header { margin: 0 0 0.5rem; padding: 0; }
  body:has(.todo-sheet) :is(.page-title, .page-meta, .todo-heading, .todo-count, .todo-date, .todo-num, a, .todo-project) { color: #000 !important; text-decoration: none; }
  .todo-sheet { gap: 0.75rem; max-inline-size: none; font-size: 10.5pt; }
  .todo-group { break-inside: auto; }
  .todo-group.is-not-printed { display: none; }
  .todo-heading { break-after: avoid; font-size: 9pt; }
  .todo-row { grid-template-columns: 0.8rem 5rem minmax(0, 1fr); padding-block: 0.15rem; border-color: #bbb; break-inside: avoid; }
  .todo-box { display: block; border-color: #000; }
  .todo-main { flex-wrap: nowrap; }
  .todo-title { flex: 0 1 auto; }
  .todo-chips { flex: none; font-size: 9pt; }
  :is(.todo-chips .badge, .todo-num) { background: none !important; border: 1px solid #000; color: #000 !important; padding: 0 0.25em; }
}