/* TaskOptic web app: shell and app-level styles. Contract: docs/design/APP-SHELL.md.
   Uses tokens only (assets/ds/tokens.css). Shared components (.btn, .card, .pill, .tabs, .dialog,
   .empty, .pagehead ...) live in assets/ds/components.css; this file adds the app shell
   (top bar, rail + context nav, drawer, content area, Copilot panel) and app page layouts.
   Shell selectors are class-scoped on purpose: legacy pages still load Bootstrap and the
   Coderthemes CSS after this file, and their bare element rules must not restyle the chrome.
   Breakpoints: 768 (md), 1024 (lg: persistent sidebar), 1440 (xl: Copilot docks). */

/* ==========================================================================
   1. Shell root
   ========================================================================== */
body { min-height: 100vh; min-height: 100dvh; }
/* The context column needs room for "Check sheets and FAI" on one line. */
.app { --sidebar-w: 17rem; }
.app { min-height: 100vh; min-height: 100dvh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm); }
html.has-overlay-open { overflow: hidden; }

/* ==========================================================================
   2. Top bar
   ========================================================================== */
.app-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--topbar-h); padding: 0 var(--space-3);
  background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.app-topbar.is-scrolled { box-shadow: var(--shadow-md); }
@media (min-width: 1024px) { .app-topbar { padding: 0 var(--space-4) 0 var(--space-3); } }

.app-topbar .app-topbar__brand { flex: none; padding: var(--space-1); border-radius: var(--radius-md); }
.app-topbar .app-topbar__brand .brand__name { font-size: var(--text-base); }
@media (max-width: 479px) { .app-topbar .app-topbar__brand .brand__name { display: none; } }
@media (min-width: 1024px) { .app-topbar .app-topbar__brand { width: calc(var(--sidebar-w) - var(--space-3) - var(--space-2)); } .app-topbar__menu { display: none !important; } }

.app-topbar .app-topbar__crumbs { min-width: 0; display: none; }
.app-topbar .app-topbar__crumbs ol { margin: 0; flex-wrap: nowrap; }
.app-topbar .app-topbar__crumbs li { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar .app-topbar__crumbs li:not(:last-child) { flex: 0 1 auto; max-width: 16rem; }
.app-topbar .app-topbar__crumbs li:last-child { flex: 0 0 auto; }
.app-topbar .app-topbar__crumbs li:last-child { overflow: hidden; text-overflow: ellipsis; }
.app-topbar .app-topbar__crumbs a { color: var(--color-text-muted); text-decoration: none; }
.app-topbar .app-topbar__crumbs a:hover { color: var(--color-text); text-decoration: underline; }
.app-topbar .app-topbar__crumbs [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); }
/* Below 1024 px the page header carries the title and the top bar is busy, so no breadcrumb; the
   workspace switcher is in the sidebar drawer. */
@media (min-width: 1024px) { .app-topbar .app-topbar__crumbs { display: block; flex: 0 1 auto; overflow: hidden; } }
@media (max-width: 1279px) { .app-topbar .crumbs__company { display: none; } .app-topbar .crumbs__company + li::before { display: none; } }

.app-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); }
@media (min-width: 768px) { .app-topbar__actions { gap: var(--space-2); } }

/* Icon buttons in the bar. Not .btn, so Bootstrap's .btn on legacy pages never reaches them. */
.app .topbar-btn {
  appearance: none; position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 2.25rem; height: 2.25rem; padding: 0 var(--space-2); margin: 0;
  border: var(--border-width) solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-muted);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.app .topbar-btn:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.app .topbar-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.app .topbar-btn[aria-expanded="true"] { background: var(--color-surface-sunken); color: var(--color-text); }
.app .topbar-btn .icon { width: 1.125rem; height: 1.125rem; }
.app .topbar-btn .icon--lg { width: 1.25rem; height: 1.25rem; }
.topbar-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .topbar-btn__badge { position: absolute; top: 1px; left: calc(50% + 1px); height: 1rem; min-width: 1rem; padding: 0 4px; font-size: 0.625rem; box-shadow: 0 0 0 2px var(--color-surface); }
@media (max-width: 479px) { .app .topbar-btn--bell { display: none; } }

/* Project switcher */
.app .topbar-btn--project { border-color: var(--color-border); padding: 0 var(--space-2) 0 var(--space-1); max-width: 16rem; color: var(--color-text); }
.app .topbar-btn--project .topbar-btn__label { max-width: 20ch; font-weight: var(--weight-semibold); }
.app .topbar-btn--project .topbar-btn__chevron { width: 0.875rem; height: 0.875rem; color: var(--color-text-subtle); }
@media (max-width: 639px) { .app .topbar-btn--project .topbar-btn__label { display: none; } }
/* #projectBadge is restyled by module scripts with Tailwind classes; the id selector keeps it on-system. */
.app #projectBadge {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: var(--radius-sm); background: var(--color-accent-subtle); color: var(--color-accent);
  font: var(--weight-medium) 0.6875rem/1 var(--font-mono); letter-spacing: 0; text-transform: uppercase;
}

/* Ask Copilot */
.app .topbar-btn--copilot { color: var(--color-accent); }
.app .topbar-btn--copilot .topbar-btn__label { display: none; }
@media (min-width: 1280px) { .app .topbar-btn--copilot .topbar-btn__label { display: inline; } }

/* Theme toggle in the bar: icon-only, compact */
.app-topbar .app-topbar__theme { height: 2rem; }
.app-topbar .app-topbar__theme [data-theme-option] { min-width: 1.75rem; padding: 0 var(--space-1); }
@media (max-width: 359px) { .app-topbar .app-topbar__theme { display: none; } }

/* Account */
.app .topbar-btn--account { padding: 0; width: 2.25rem; border-radius: var(--radius-full); }
.avatar {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full);
  background: var(--color-accent-subtle); color: var(--color-accent); border: var(--border-width) solid var(--color-accent-border);
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans); letter-spacing: 0.02em; text-transform: uppercase;
}

/* ==========================================================================
   3. Menus (#projectMenu, #userMenu). Opened by app-shell.js ([data-shell-menu]).
   They keep .dropdown-menu for legacy hooks; the two-class selectors beat Bootstrap's.
   ========================================================================== */
.app-menu { position: relative; }
.app .app-menu__panel {
  display: block; position: absolute; top: calc(100% + var(--space-2)); right: 0; left: auto; z-index: var(--z-dropdown);
  width: 17rem; max-width: calc(100vw - 1.5rem); max-height: min(28rem, calc(100vh - 5rem)); overflow: auto;
  margin: 0; padding: var(--space-1); float: none;
  background: var(--color-surface-raised); color: var(--color-text);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-size: var(--text-sm); text-align: left;
}
.app .app-menu__panel[hidden] { display: none !important; }
.app .app-menu__panel .menu__label { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); }
.app .app-menu__panel .menu__item { min-height: 2.25rem; }
.app .app-menu__panel .menu__item .icon { color: var(--color-text-subtle); }
.app .app-menu__panel .menu__item--danger, .app .app-menu__panel .menu__item--danger .icon { color: var(--color-danger); }
.app .app-menu__panel .menu__item--danger:hover { background: var(--color-danger-subtle); color: var(--color-danger); }
.app-menu__empty { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.app-menu__list { display: flex; flex-direction: column; }
/* Project options are built by checkauth.js and by older module scripts (with Tailwind classes);
   the id-scoped rules below normalise both. */
.app #projectdlist .project-option {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.5rem;
  padding: var(--space-1) var(--space-3); margin: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text); font: var(--weight-regular) var(--text-sm)/1.2 var(--font-sans);
  text-align: left; cursor: pointer;
}
.app #projectdlist .project-option:hover, .app #projectdlist .project-option:focus-visible { background: var(--color-surface-sunken); outline: none; }
.app #projectdlist .project-option.is-active, .app #projectdlist .project-option[aria-checked="true"] { background: var(--color-accent-subtle); color: var(--color-text); font-weight: var(--weight-semibold); }
.app #projectdlist .project-option > div, .app #projectdlist .project-option .project-option__badge {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--radius-sm);
  background: var(--color-surface-sunken); color: var(--color-text-muted); font: var(--weight-medium) 0.6875rem/1 var(--font-mono);
}
.app #projectdlist .project-option span { font-size: var(--text-sm); font-weight: inherit; }
.app-menu__panel--account { width: 16rem; }
.acct { padding: var(--space-2) var(--space-3); }
.acct p { margin: 0; }
.acct__name { font-weight: var(--weight-semibold); color: var(--color-text); overflow-wrap: anywhere; }
.acct__line { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px !important; overflow-wrap: anywhere; }
.acct__line:empty { display: none; }
.acct__version { margin: 0; padding: var(--space-1) var(--space-3) var(--space-2); font-size: var(--text-xs); }

/* ==========================================================================
   4. Sidebar (Ledger, docs/design/PATTERNS.md 3): the workspace switcher, then one flat list of
   groups. Persistent from 1024 px; a drawer below.
   ========================================================================== */
.app-sidebar {
  position: fixed; left: 0; bottom: 0; top: var(--topbar-h); z-index: var(--z-sidebar);
  display: flex; flex-direction: column; width: var(--sidebar-w);
  background: var(--color-surface); border-right: var(--border-width) solid var(--color-border);
  font-family: var(--font-sans); font-size: var(--text-sm);
}
.app-sidebar__drawerhead { display: none; }

.ledger-scope { flex: none; padding: var(--space-3) var(--space-3) var(--space-2); }
.ledger-scope__btn {
  appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
}
.ledger-scope__btn:hover, .ledger-scope__btn[aria-expanded="true"] { border-color: var(--color-border-strong); background: var(--color-surface-sunken); }
.ledger-scope__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ledger-scope__btn .icon { flex: none; color: var(--color-text-subtle); }
.ledger-scope__text { display: flex; flex-direction: column; min-width: 0; }
.ledger-scope__company { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-scope__branch { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-scope__branch[hidden] { display: none; }
/* Fixed: placed under the scope button by app-shell.js. */
.app .app-menu__panel--branch { position: fixed; right: auto; width: 18rem; }
.app .app-menu__panel--branch .menu__group { margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3) 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.app .app-menu__panel--branch .menu__item[aria-current="page"] { background: var(--color-accent-subtle); font-weight: var(--weight-semibold); }
.app .app-menu__panel--branch .menu__item .menu__check { margin-left: auto; color: var(--color-accent); }

.ledger-nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-6); }
.ledger-nav__group + .ledger-nav__group { margin-top: var(--space-5); }
.ledger-nav__group[hidden] { display: none; }
.ledger-nav__label {
  margin: 0 0 var(--space-1); padding: 0 10px;
  font: var(--weight-medium) var(--text-xs)/1.4 var(--font-sans); color: var(--color-text-subtle);
}
.app .taskoptic-nav-group-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.app .taskoptic-nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 2rem; padding: 0 10px;
  border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none;
  font: var(--weight-regular) var(--text-sm)/1.25 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.app .taskoptic-nav-item .icon { color: var(--color-text-subtle); width: 1rem; height: 1rem; }
.app .taskoptic-nav-item:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.app .taskoptic-nav-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* The active item: weight and one accent bar (PATTERNS 3.2), nothing else. */
.app .taskoptic-nav-item.is-active { background: var(--color-surface-sunken); color: var(--color-text); font-weight: var(--weight-medium); }
.app .taskoptic-nav-item.is-active::before { content: ""; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--color-accent); }
.app .taskoptic-nav-item.is-active .icon { color: var(--color-accent); }
.taskoptic-nav-item__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .taskoptic-nav-item[hidden], .app [data-taskoptic-nav-item][hidden] { display: none; }

/* Persistent layout from 1024 px */
@media (min-width: 1024px) {
  .app-main { margin-left: var(--sidebar-w); }
  .app .scrim.app-scrim { display: none; }
}

/* Drawer below 1024 px: slides in from the left. */
@media (max-width: 1023px) {
  .app-sidebar {
    top: 0; width: min(20rem, 88vw); z-index: var(--z-modal);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
  }
  .app.is-drawer-open .app-sidebar { transform: none; visibility: visible; transition: transform var(--duration-slow) var(--ease-standard), visibility 0s; }
  .app-sidebar__drawerhead {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    height: var(--topbar-h); padding: 0 var(--space-2) 0 var(--space-4); border-bottom: var(--border-width) solid var(--color-border);
  }
  .app .taskoptic-nav-item { min-height: var(--touch-min); }
}

/* ==========================================================================
   5. Content area and page layouts
   ========================================================================== */
.app-main { display: block; min-width: 0; min-height: calc(100vh - var(--topbar-h)); }
.app-main:focus { outline: none; }
.app-page { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); }
@media (min-width: 768px) { .app-page { padding: var(--space-6) var(--space-6) var(--space-12); } }
@media (min-width: 1024px) { .app-page { padding: var(--space-8) var(--space-8) var(--space-16); } }
.app-page--narrow { max-width: calc(35rem + 2 * var(--space-8)); }
.app-page--wide { max-width: none; }
.app-page .pagehead h1 { font-size: var(--text-xl); }
.section-title { font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.section + .section { margin-top: var(--space-10); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section__head .section-title { margin: 0; }

/* Status line (replaces ShowError/ShowSuccess inline-styled labels) */
.status { font-size: var(--text-sm); color: var(--color-text-muted); }
.status:empty { display: none; }
.status.is-error { color: var(--color-danger); }
.status.is-ok { color: var(--color-success); }

/* A bordered well with a scrolling list inside (settings checklists, pickers) */
.well { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); max-height: 18rem; overflow: auto; padding: var(--space-1) 0; }
.well__hint { margin-top: var(--space-2); }
.well__title { font-size: var(--text-sm); font-weight: var(--weight-medium); margin: 0 0 var(--space-2); }
.checkrow { display: flex; align-items: center; gap: var(--space-3); min-height: 2.5rem; padding: 0 var(--space-3); }
.checkrow + .checkrow { border-top: var(--border-width) solid var(--color-border); }
.checkrow label { flex: 1; min-width: 0; cursor: pointer; }
.checkrow:hover { background: var(--color-surface-sunken); }
.well:empty::before { content: "Loading…"; display: block; padding: var(--space-3); color: var(--color-text-subtle); }

/* Field with a trailing reveal button (secrets) */
.input-reveal { position: relative; }
.input-reveal > .input { padding-right: 2.75rem; }
.input-reveal > button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; background: none; color: var(--color-text-muted); border-radius: var(--radius-sm); cursor: pointer; }
.input-reveal > button:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.input-reveal > button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Native <dialog>: header, optional tabs, scrolling body, footer */
.dialog[open] { display: flex; flex-direction: column; }
.dialog > form, .dialog__panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dialog__panel[hidden] { display: none; }
.dialog__body { flex: 1; min-height: 0; }
.dialog__tabs { padding: 0 var(--space-6); flex: none; }
.dialog__foot--split { justify-content: space-between; }
/* Centred dialogs: the action last. Drawers keep the primary first (PATTERNS 4.2). */
.dialog:not(.dialog--drawer) .dialog__foot .btn--primary { order: 9; }

/* ==========================================================================
   6. Module workspace pages (MES Copilot, Check sheets, Templates, CAR insights ...)
   The module body renders into #contentdiv; the Copilot panel docks on the right.
   ========================================================================== */
.app-page--workspace { max-width: none; padding: 0; display: flex; flex-direction: column; }
.workspace-head { flex: none; padding: var(--space-4) var(--space-4) 0; background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
@media (min-width: 768px) { .workspace-head { padding: var(--space-5) var(--space-6) 0; } }
.workspace-head .pagehead { margin-bottom: var(--space-3); align-items: center; }
.workspace-head .pagehead:last-child { margin-bottom: var(--space-4); }
.workspace-head .tabs { border-bottom: 0; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
.pagehead__sub { font: var(--weight-medium) var(--text-lg)/1.1 var(--font-sans); color: var(--color-text-muted); }
.pagehead__sub:empty { display: none; }
.pagehead__sub::before { content: "/"; margin-right: var(--space-3); color: var(--color-border-strong); }
.workspace { display: flex; flex: 1; min-height: 0; position: relative; }
.workspace__content { flex: 1; min-width: 0; min-height: 60vh; position: relative; background: var(--color-bg); }
.workspace__content > .empty { padding: 0 var(--space-4); }
@media (min-width: 1024px) {
  .app-page--workspace { height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); }
  .workspace__content { min-height: 0; overflow: auto; }
}
/* #navpanel sub-views render as tabs; .link-btn items are copied by checkauth.js */
.module-tabs .link-btn { text-decoration: none; }
.module-tabs .link-btn .icon { color: var(--color-text-subtle); }
.module-tabs .link-btn.is-active .icon { color: var(--color-accent); }

/* Copilot panel: docked at >= 1440, overlay sheet 1024-1439, full screen below 1024 */
.copilot {
  display: flex; flex-direction: column; width: var(--copilot-w); flex: none;
  background: var(--color-surface); border-left: var(--border-width) solid var(--color-border);
}
.copilot__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: 3rem; flex: none; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.copilot__head h2 { display: flex; align-items: center; gap: var(--space-2); font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); letter-spacing: 0; }
.copilot__head h2 .icon { color: var(--color-accent); }
.copilot__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); }
.copilot__composer { flex: none; padding: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.copilot__field { position: relative; }
.copilot__field .textarea { min-height: 5rem; padding-right: 3rem; resize: none; }
.copilot__field .copilot__send { position: absolute; right: var(--space-2); bottom: var(--space-2); }
.copilot__note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
#chat-task-progress-bar { height: 2px; flex: none; overflow: hidden; background: var(--color-accent-subtle); position: relative; }
#chat-task-progress-bar .progress-segment { display: none; }
#chat-task-progress-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--color-accent); animation: shell-progress 1.2s var(--ease-standard) infinite; }
@keyframes shell-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { #chat-task-progress-bar::after { animation: none; width: 100%; } }
@media (min-width: 1440px) {
  .app.copilot-closed .copilot { display: none; }
  .copilot__close--overlay { display: none; }
}
@media (max-width: 1439px) {
  .copilot {
    position: fixed; right: 0; bottom: 0; top: var(--topbar-h); z-index: var(--z-modal); width: min(var(--copilot-w), 100vw);
    box-shadow: var(--shadow-lg); transform: translateX(100%); visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
  }
  .app.copilot-open .copilot { transform: none; visibility: visible; transition: transform var(--duration-slow) var(--ease-standard), visibility 0s; }
}
@media (max-width: 1023px) { .copilot { top: 0; width: 100vw; border-left: 0; } }

/* ==========================================================================
   7. Launchpad (index.html)
   ========================================================================== */
.launch-tools { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.app .taskoptic-tile { display: flex; flex-direction: column; gap: var(--space-3); min-height: 9.5rem; padding: var(--space-5); }
.taskoptic-tile .card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.taskoptic-tile__copy { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.taskoptic-tile__go { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.taskoptic-tile:hover .taskoptic-tile__go { color: var(--color-accent); }
@media (max-width: 767px) {
  .app .taskoptic-tile { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-1); min-height: 0; padding: var(--space-4); }
  .app .taskoptic-tile .tile-icon { grid-row: span 2; }
  .app .taskoptic-tile .taskoptic-tile__go { display: none; }
  .launch-skeleton { min-height: 4.5rem; }
}
.card__head > .btn--sm { margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) calc(-1 * var(--space-1)) 0; }
.launch-skeleton { min-height: 9.5rem; border-radius: var(--radius-lg); border: var(--border-width) dashed var(--color-border); background: var(--color-surface); }
.launch-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .launch-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li + li { border-top: var(--border-width) solid var(--color-border); }
.activity a { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-5); color: var(--color-text); text-decoration: none; }
.activity a:hover { background: var(--color-surface-sunken); text-decoration: none; }
.activity__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--color-border-strong); }
.activity__item.is-unread .activity__dot { background: var(--color-accent); }
.activity__title { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.activity__meta { display: block; color: var(--color-text-subtle); font-size: var(--text-xs); margin-top: 2px; }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li + li { border-top: var(--border-width) solid var(--color-border); }
.linklist a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); color: var(--color-text); text-decoration: none; }
.linklist a:hover { background: var(--color-surface-sunken); text-decoration: none; }
.linklist a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-focus); }
.linklist__text { flex: 1; min-width: 0; }
.linklist__text strong { display: block; font-weight: var(--weight-semibold); }
.linklist__text span { display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }
.linklist .icon:last-child { color: var(--color-text-subtle); }

/* Settings dialog ("Projects and access") */
.settings-access__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-5); }
.settings-config fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.settings-config fieldset + fieldset { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.settings-config legend { padding: 0; margin-bottom: var(--space-3); font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--color-text); }
.settings-config .field-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.settings-config .field-row + .field-row { margin-top: var(--space-4); }
.project-edit.btn { margin-left: auto; }

/* ==========================================================================
   8. Toast region helper (TaskOpticShell.toast)
   ========================================================================== */
.toast-ds { align-items: flex-start; }
.toast-ds > .icon { margin-top: 2px; color: var(--toast-accent, var(--color-info)); }
.toast-ds__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-ds__close { appearance: none; border: 0; background: none; color: var(--color-text-subtle); cursor: pointer; padding: 2px; border-radius: var(--radius-sm); }
.toast-ds__close:hover { color: var(--color-text); }

/* ==========================================================================
   9. Print: chrome off, content full width
   ========================================================================== */
@media print {
  .app-topbar, .app-sidebar, .app-scrim, .skip-link, .copilot, .toasts, .workspace-head .tabs { display: none !important; }
  .app-main { margin: 0 !important; }
  .app, body { background: #fff; }
  .app-page--workspace { height: auto; }
}

/* ==========================================================================
   10. Page sections. Each page or page group owns one block below; keep edits inside it.
   ========================================================================== */
/* --- auth pages (login, forgot, reset, demo, error) --- */
/* Signed-out pages use the ds .auth layout (components.css); these rules finish it. */
.auth__main { min-height: 100vh; min-height: 100dvh; padding: calc(var(--topbar-h) + var(--space-6)) var(--space-4) var(--space-10); }
.auth__top { top: 0; left: 0; right: 0; height: var(--topbar-h); padding: 0 var(--space-4); }
@media (min-width: 1024px) { .auth--split .auth__brand { visibility: hidden; } .auth__top { padding: 0 var(--space-6); } }
.auth__panel { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.auth__panel > .brand:first-child { align-self: flex-start; }
.auth__pitch { max-width: 32rem; }
@media (max-width: 767px) { .auth__main { justify-content: flex-start; padding-top: calc(var(--topbar-h) + var(--space-4)); } }
.auth__pitch h1, .auth__pitch h2 { font-size: clamp(var(--text-2xl), 0.9rem + 1.6vw, var(--text-3xl)); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.auth__pitch .auth__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); }
.auth__eyebrow::before { content: ""; width: 0.75rem; height: 2px; background: currentColor; flex: none; }
.auth__pitch p.muted { margin-top: var(--space-4); font-size: var(--text-md); line-height: var(--leading-normal); }
.auth__panel .proof { max-width: 30rem; gap: var(--space-5); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-8); }
.proof li > span { display: flex; flex-direction: column; gap: 2px; }
.proof strong { font-weight: var(--weight-semibold); }
.auth__card { box-shadow: var(--shadow-sm); }
@media (max-width: 479px) { .auth__card { padding: var(--space-6) var(--space-5); } }
.auth__card .eyebrow { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.auth__lede { margin-top: var(--space-1); line-height: var(--leading-normal); text-wrap: pretty; }
.auth__pitch h1, .auth__pitch h2 { text-wrap: balance; }
.auth__pitch p { text-wrap: pretty; }
.auth__form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.auth__form > div:first-child h1 { margin-bottom: 0; }
#demo-form { margin-top: 0; }
#demo-form #captcha:empty { display: none; }
.auth__form .field + .field { margin-top: 0; }
.auth__form .divider { margin: 0 0 var(--space-4); }
.auth__form .btn--lg { font-size: var(--text-base); }
.auth__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.auth__labelrow label { font-weight: var(--weight-medium); }
.auth__labelrow a { font-size: var(--text-sm); }
.auth__sso { display: flex; flex-direction: column; gap: var(--space-2); }
.auth__foot { margin-top: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.auth__foot a { display: inline-flex; align-items: center; gap: var(--space-1); }
.auth__card--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.auth__icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; color: var(--color-text-subtle); margin-bottom: var(--space-4); }
.auth__actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin-top: var(--space-6); }
.copy-btn { appearance: none; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; }
.copy-btn:hover { background: var(--color-surface); color: var(--color-text); }
.copy-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.auth__top-actions { display: flex; align-items: center; gap: var(--space-4); }
.auth__top-link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.auth__top-link:hover { color: var(--color-text); }
/* Demo sign-up (.auth--demo): framed product preview, checklist, card with footer, success view */
.demo-preview { padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background-color: var(--color-surface-sunken); background-image: radial-gradient(rgb(var(--rgb-border-strong) / 0.28) 1px, transparent 1.5px); background-size: 1rem 1rem; max-width: 34rem; flex: none; }
.demo-window { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; font-size: var(--text-xs); }
.demo-window__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.demo-window__crumbs { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-window__crumbs i { font-style: normal; color: var(--color-text-subtle); margin: 0 2px; }
.demo-window__crumbs b { color: var(--color-text); font-weight: var(--weight-semibold); }
.demo-window__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--border-width) solid var(--color-border); }
.demo-window__stats span { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-window__stats span + span { border-left: var(--border-width) solid var(--color-border); }
.demo-window__stats b { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.demo-window__rows { list-style: none; margin: 0; padding: 0; }
.demo-window__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 5.5rem; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.demo-window__rows li + li { border-top: var(--border-width) solid var(--color-border); }
.demo-window__rows li > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.demo-window__rows strong { font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-window__rows em { font-style: normal; color: var(--color-text-subtle); }
.demo-window__rows .pill { justify-self: end; }
.demo-window__meter { height: 4px; border-radius: var(--radius-full); background: var(--color-surface-sunken); overflow: hidden; }
.demo-window__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.demo-window__fill--64 { width: 64%; }
.demo-window__fill--100 { width: 100%; background: var(--color-success); }
.demo-window__fill--30 { width: 30%; background: var(--color-warning); }
@media (max-width: 1279px) { .demo-preview { padding: var(--space-4); } .demo-window__rows li { grid-template-columns: minmax(0, 1fr) auto; } .demo-window__meter { display: none; } .demo-window__stats span:nth-child(3) { display: none; } .demo-window__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 799px) { .demo-preview { display: none; } }
.demo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.demo-checks li { display: flex; align-items: flex-start; gap: var(--space-3); }
.demo-checks .icon { color: var(--color-accent); stroke-width: 2.25; margin-top: 1px; }
.demo-checks--compact { gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
@media (min-width: 1024px) { .demo-checks--compact { display: none; } }
/* Card */
.demo-card.auth__card { width: min(25rem, 100%); padding: 0; overflow: hidden; }
.demo-form { gap: var(--space-4); padding: var(--space-8); }
@media (max-width: 479px) { .demo-form { padding: var(--space-6) var(--space-5); } }
.demo-head { margin-bottom: var(--space-2); }
.demo-chip { gap: var(--space-1); margin-bottom: var(--space-4); }
.demo-head h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2) !important; }
@media (min-width: 1024px) { .demo-head h1 { font-size: var(--text-xl); } }
.demo-submit { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.demo-form #start .icon { transition: transform var(--duration-base) var(--ease-standard); }
.demo-form #start:hover .icon { transform: translateX(2px); }
.demo-form #start[aria-busy="true"] .icon { display: none; }
.demo-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
.demo-trust > span + span::before { content: "·"; margin-right: var(--space-2); }
.demo-card__foot { padding: var(--space-4) var(--space-8); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface-sunken); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 479px) { .demo-card__foot { padding: var(--space-4) var(--space-5); } }
.demo-card__foot a { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-medium); }
.demo-form.is-done > :not(#ok) { display: none; }
/* Success view */
.demo-ok { display: flex; flex-direction: column; align-items: center; text-align: center; }
.demo-ok__badge { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-success-subtle); color: var(--color-success); animation: demo-pop var(--duration-slow) var(--ease-standard) both; }
.demo-ok__badge .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.5; }
@keyframes demo-pop { from { transform: scale(0.6); opacity: 0; } }
.demo-ok__title { margin-top: var(--space-5); font-size: var(--text-xl); }
.demo-ok__lede { margin-top: var(--space-2); max-width: 20rem; line-height: var(--leading-normal); }
.demo-ok .kv { width: 100%; margin-top: var(--space-6); grid-template-columns: minmax(0, 1fr); gap: var(--space-1); text-align: left; color: var(--color-text); }
.demo-ok .kv dt { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.demo-ok .kv dd + dt { margin-top: var(--space-3); }
.demo-ok .copyline { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.demo-ok .copy-btn.is-copied { color: var(--color-success); }
.demo-ok__exp { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-subtle); }
.demo-ok #go { margin-top: var(--space-6); }
/* --- workspace pages (notifications, audit, security, company admin) --- */
/* Notifications */
.notif-layout { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .notif-layout { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); } }
.notif-list { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.notif-list__loading { padding: var(--space-5); }
.notif-list .item { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); }
.notif-list .item + .item { border-top: var(--border-width) solid var(--color-border); }
.notif-list .item.unread { box-shadow: inset 2px 0 0 var(--color-accent); }
.notif-list .item__dot { width: 8px; height: 8px; margin-top: 6px; flex: none; border-radius: 50%; background: transparent; }
.notif-list .item.unread .item__dot { background: var(--color-accent); }
.item__main { flex: 1; min-width: 0; }
.item__title { display: block; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.item:not(.unread) .item__title { font-weight: var(--weight-medium); color: var(--color-text-muted); }
.item__body { margin-top: 2px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.item__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-subtle); }
.item__action { flex: none; }
.notif-prefs fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.prefs-group + .prefs-group { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.prefs-group legend { float: left; width: 100%; }
.prefs-group legend + * { clear: both; }
.prefs-group .field-row > .field + .field { margin-top: 0; }
.prefs-group .field-row .field > label { font-weight: var(--weight-medium); }
.prefs-group legend, .prefs-group > label { padding: 0; margin-bottom: var(--space-3); font-weight: var(--weight-semibold); color: var(--color-text); font-size: var(--text-sm); }
.prefs-group .switch { display: flex; min-height: 2rem; }
.prefs-group .switch + .prefs-hint { margin-top: -2px; margin-bottom: var(--space-2); margin-right: 0; margin-left: calc(2.25rem + var(--space-2)); }
.prefs-group .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notif-prefs .input.num { max-width: 8rem; }
.prefs-note { margin-top: var(--space-5); }
.prefs-actions { margin-top: var(--space-5); }

/* Audit trail */
.filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.filterbar .field { gap: var(--space-1); flex: 1 1 9rem; min-width: 0; }
.filterbar .field + .field { margin-top: 0; }
.filterbar .field > label { font-size: var(--text-xs); color: var(--color-text-muted); }
.filterbar__actions { display: flex; gap: var(--space-2); }
.audit-table td { vertical-align: top; }
.audit-when { white-space: nowrap; color: var(--color-text-muted); width: 8rem; }
.audit-sentence { font-weight: var(--weight-regular); }
.audit-sentence strong { font-weight: var(--weight-semibold); }
.audit-table .row-sub { font-size: var(--text-xs); }
.audit-details { width: 9rem; }
.audit-details summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-accent); }
.audit-details details[open] { width: min(32rem, 70vw); }
.audit-details .codeblock { margin-top: var(--space-2); max-height: 18rem; overflow: auto; font-size: var(--text-xs); }
.audit-meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); font-size: var(--text-xs); }
.audit-meta dt { color: var(--color-text-muted); }
.audit-meta dd { margin: 0; overflow-wrap: anywhere; }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.audit-details .codeblock { margin-top: var(--space-2); max-height: 16rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-more { display: flex; justify-content: center; margin-top: var(--space-4); }
#verify-result { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }

/* Preferences (PATTERNS 4.4) */
.prefs-panel > * + * { margin-top: var(--space-3); }
.prefs-choices { border: 0; padding: 0; margin: var(--space-4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); }
.prefs-choices[disabled] { opacity: 0.7; }
.prefs-choice { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-3); align-items: start; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; }
.prefs-choice:hover { border-color: var(--color-border-strong); }
.prefs-choice:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); background: var(--color-accent-subtle); }
.prefs-choice:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.prefs-choice input { margin-top: 0.2rem; }
.prefs-choice__art { grid-column: 2; display: flex; gap: 4px; height: 3.5rem; padding: 6px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-sunken); position: relative; overflow: hidden; }
.prefs-choice__art > span { border-radius: 3px; background: var(--color-surface); border: var(--border-width) solid var(--color-border); }
.prefs-choice__art--column > span:first-child { flex: 1.3; }
.prefs-choice__art--column > span:last-child { flex: 1; border-color: var(--color-accent-border); }
.prefs-choice__art--drawer > span:first-child { flex: 1; }
.prefs-choice__art--drawer > span:last-child { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; border-radius: 0; border-width: 0 0 0 var(--border-width); border-color: var(--color-accent-border); box-shadow: var(--shadow-md); }
.prefs-choice__text { grid-column: 2; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.prefs-choice__text strong { font-size: var(--text-base); }

/* Branch holidays drawer */
.branch-holidays > * + * { margin-top: var(--space-4); }
.branch-holidays__list { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.branch-holidays__list li { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.branch-holidays__list li + li { border-top: var(--border-width) solid var(--color-border); }
.branch-holidays__list li.is-muted { color: var(--color-text-muted); }
.branch-holidays__date { flex: 0 0 9.5rem; white-space: nowrap; }
.branch-holidays__name { flex: 1 1 auto; min-width: 0; }
.branch-holidays__add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.branch-holidays__add .input { flex: 1 1 10rem; width: auto; }

/* Security and MFA */
.security-panel { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-5); }
.security-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.security-panel__head h2 { font-size: var(--text-md); }
.security-body > * + * { margin-top: var(--space-4); }
.security-body .steps { margin: var(--space-5) 0 0; flex-wrap: wrap; }
.security-body .steps.hidden { display: none; }
@media (max-width: 479px) { .security-body .steps li + li::before { width: var(--space-2); } .security-body .steps li > span::before { margin-right: var(--space-1); } }
.security-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
#step-confirm > * + *, #step-done > * + *, #step-manage > * + * { margin-top: var(--space-4); }
.security-qr { display: flex; justify-content: center; }
.security-qr__frame svg { display: block; width: 11rem; height: 11rem; padding: var(--space-2); background: #fff; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.security-details summary { font-size: var(--text-sm); color: var(--color-text-muted); }
.security-otpauth { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.security-code { max-width: 12rem; font-size: var(--text-md); letter-spacing: 0.2em; }
.recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-4); background: var(--color-surface-sunken); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); }
.security-off { margin-top: var(--space-6) !important; padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.security-off h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.security-off .field-row { margin-top: var(--space-4); }
#error:empty { display: none; }

/* Company administration */
.admin-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .admin-layout { grid-template-columns: 18rem minmax(0, 1fr); } }
.admin-companies__search { padding: var(--space-3) var(--space-4) var(--space-2); }
.company-list { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-2) var(--space-3); max-height: 26rem; overflow-y: auto; }
.company-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); font: var(--weight-medium) var(--text-sm)/1.3 var(--font-sans); text-align: left; cursor: pointer; }
.company-row:hover { background: var(--color-surface-sunken); }
.company-row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.company-row.is-active { background: var(--color-accent-subtle); font-weight: var(--weight-semibold); box-shadow: inset 2px 0 0 var(--color-accent); }
.company-row__name { overflow-wrap: anywhere; }
.company-row__slug { font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--weight-regular); }
.admin-companies__new { padding: var(--space-4); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.admin-companies__new .banner, .admin-foot .banner { margin-top: var(--space-3); }
.admin-detail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.admin-detail__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.admin-detail__head h2 { font-size: var(--text-lg); }
#selected-company-slug { color: var(--color-text-subtle); font-size: var(--text-sm); }
.admin-rows { min-width: 0; container-type: inline-size; }
.admin-row { display: grid; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); grid-template-columns: minmax(0, 1fr) auto; }
.admin-row + .admin-row { border-top: var(--border-width) solid var(--color-border); }
.admin-row__who { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); }
.admin-row__name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.admin-row__meta { flex-basis: 100%; font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.admin-row--user { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 46rem) { .admin-row--user { grid-template-columns: minmax(10rem, 1fr) auto auto auto; align-items: end; } }
.admin-row__control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-row__label { font-size: var(--text-xs); color: var(--color-text-muted); }
.admin-row__inline { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-row__inline .select { width: auto; min-width: 8rem; max-width: 100%; }
.admin-row__end { display: flex; justify-content: flex-start; }
.admin-empty { padding: var(--space-5); color: var(--color-text-muted); text-align: center; }
.admin-empty--error { color: var(--color-danger); }
.admin-foot { display: block; }
.admin-inline-form .input-group { max-width: 28rem; }
.admin-messages:has(.banner:not(.hidden)) { padding: var(--space-3) var(--space-5) 0; }
.admin-messages .banner + .banner { margin-top: var(--space-2); }
.admin-users { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1800px) { .admin-users { grid-template-columns: minmax(0, 1fr) 22rem; } }
@media (min-width: 768px) and (max-width: 1799px) {
  .admin-user-form .card__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .admin-user-form .card__body .field + .field { margin-top: 0; }
}
.admin-user-form .card__foot .btn--primary { width: auto; }
.admin-generate { margin-top: var(--space-1); align-self: flex-start; }
/* Regions and roles (REGIONS-DESIGN.md 7). */
.admin-card-hint { flex-basis: 100%; margin: 0; }
.card__head:has(.admin-card-hint) { flex-wrap: wrap; row-gap: var(--space-1); }
.admin-row--region { grid-template-columns: minmax(0, 1fr) auto; }
.admin-row__actions { justify-content: flex-end; }
.admin-row__confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-danger-subtle); color: var(--color-text); font-size: var(--text-sm); }
.admin-row__confirm > span { flex: 1 1 16rem; }
.admin-row--region [data-region-rename-form] .input { width: auto; min-width: 12rem; }
.admin-row--branch { grid-template-columns: minmax(0, 1fr) auto; }
.admin-row__meta--region { color: var(--color-accent); }
.admin-row__check { min-height: 2rem; white-space: nowrap; }
.admin-inline-form--branch { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.admin-inline-form--branch .field { margin: 0; flex: 1 1 12rem; max-width: 20rem; }
/* User rows hold up to five parts (who, company role, branch, regional role, disable): they wrap. */
@container (min-width: 46rem) {
  .admin-row--user { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); }
  .admin-row--user .admin-row__who { flex: 1 1 14rem; }
}
.app .app-topbar, .app .app-sidebar { font-family: var(--font-sans); line-height: 1.43; }
.app .app-topbar h2, .app .app-sidebar h2 { padding: 0; }
.app .app-topbar p, .app .app-sidebar p { margin: 0; }
.app .app-topbar ol, .app .app-topbar ul, .app .app-sidebar ul { padding-left: 0; margin-bottom: 0; }
.app .app-topbar a:not(.btn):not(.menu__item), .app .app-sidebar a { text-decoration: none; }
.app .app-menu__panel .menu__item { color: var(--color-text); }
.app .app-menu__panel .menu__item--danger { color: var(--color-danger); }
.app .app-topbar .crumbs a { color: var(--color-text-muted); }
.app .taskoptic-theme-toggle [data-theme-option] { line-height: 1; }
/* ds buttons inside page headers win over Bootstrap's .btn */
.legacy-page .pagehead .btn { font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); border-radius: var(--radius-md); box-shadow: none; }
.legacy-page .pagehead .btn { background: var(--btn-bg); color: var(--btn-fg); border: var(--border-width) solid var(--btn-bd); padding: 0 var(--space-4); min-height: var(--control-h-md); }
.legacy-page .pagehead .btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.legacy-page .pagehead .btn--ghost:hover { color: var(--color-text); }
/* Route summary (print) */
.print-page #errorlabel:empty { display: none; }
.print-page__sheet { padding: var(--space-5); overflow: auto; }
.print-page__sheet:empty { display: none; }
@media print {
  .print-page__toolbar { display: none !important; }
  .print-page { padding: 0 !important; }
  .print-page__sheet { border: 0; padding: 0; }
}

/* ---------- Taskoptic client (SPA, views/app.html) ----------
   The SPA renders into #spa-root, the shell's content region. Its own stylesheet (dist/app) is
   scoped to #spa-root; each page sits in .page-host, which carries the page padding. */
.app-page--spa { max-width: none; padding: 0; }
.app-page--spa .spa-loading { padding: var(--space-8); }
.app-page--spa .spa-scope-alert { padding: var(--space-8); }
.app-page--spa .spa-scope-alert[hidden] { display: none; }

/* ==========================================================================
   Ledger pages (company and companies; docs/design/LEDGER-PLAN.md L3)
   ========================================================================== */
.ledger-page .tabs { margin-bottom: var(--space-5); }
.ledger-page .tabpanel { padding-top: 0; }
.ledger-page .table-wrap { border-radius: var(--radius-lg); }
.ledger-page > .banner { margin-bottom: var(--space-4); }
.ledger-heading { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ledger-section { margin-top: var(--space-5); }
.ledger-more { margin-top: var(--space-4); }
.linklike { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; }
.linklike:hover { color: var(--color-accent); text-decoration: underline; }
.linklike:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.ledger-rowmenu { position: absolute; }

/* Region cards on the company overview (cards justified: PATTERNS 5.4). */
.ledger-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
.ledger-card { padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ledger-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.ledger-card__head h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ledger-card__note { font-size: var(--text-xs); color: var(--color-text-muted); }
.ledger-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); }
.ledger-card__list .row-name, .ledger-card__list .row-sub { display: block; }
.row-sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Lists inside drawers (regions, a person's memberships). */
.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--text-sm); }
.ledger-list__item--stack { flex-direction: column; align-items: stretch; }
.ledger-list__main { flex: 1 1 12rem; min-width: 0; }
.ledger-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ledger-row .select { width: auto; min-width: 9rem; }
.ledger-row--add { margin-top: var(--space-3); }
.ledger-inline-add { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ledger-inline-add .input { flex: 1 1 12rem; }
.ledger-drawer-list .hint { margin-bottom: var(--space-2); }

/* The person drawer. */
.ledger-person { display: flex; flex-direction: column; gap: var(--space-6); }
.ledger-person__head .row-name { font-size: var(--text-md); }
.ledger-person__section h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.ledger-person__section > .hint { margin-bottom: var(--space-2); }

/* Settings. */
.ledger-settings { display: flex; flex-direction: column; gap: var(--space-2); max-width: 40rem; }
.ledger-settings__group { padding-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
.ledger-settings__group .ledger-heading { margin-top: var(--space-2); }
.ledger-settings > .btn { align-self: flex-start; margin-top: var(--space-3); }
.ledger-row__label { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Company settings: Disciplines (DISCIPLINES-DESIGN D1). */
.ledger-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ledger-disciplines { max-width: 40rem; margin-top: var(--space-2); }
.ledger-disciplines .table-wrap { margin-top: var(--space-3); }
.ledger-settings__group > .btn { margin-top: var(--space-3); }
.ledger-disciplines tr.is-muted .row-name { color: var(--color-text-muted); }

/* Company settings: Template approval (TEMPLATE-APPROVAL-PLAN.md). */
/* Settings sections reached by a link (#template-types) clear the sticky top bar. */
.ledger-settings__group[id] { scroll-margin-top: 6rem; }
/* AI assistant (AI-PROVIDERS.md) */
.ledger-ai { margin-top: var(--space-2); }
.ledger-ai__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 36rem; }
.ledger-ai__now { margin: 0; }
.ledger-ai__note { margin: 0; }
.ledger-ai__actions { display: flex; gap: var(--space-2); align-items: center; }
.ledger-ai__result { margin: 0; }
.ledger-ai__policy { border: 0; border-top: var(--border-width, 1px) solid var(--color-border); margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ledger-ai__policy-title { font-weight: var(--weight-semibold, 600); padding: 0; margin-bottom: var(--space-1); }
.ledger-ai__policy .check { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium, 500); }
.ledger-ai__policy .check input { width: 1rem; height: 1rem; accent-color: var(--color-accent); }
.ledger-ai__policy .hint { margin: 0; max-width: 70ch; }
.ledger-ai__result.text-success { color: var(--color-success); }
/* Template types (TEMPLATE-TYPES.md) */
.ledger-types { margin-top: var(--space-2); }
.ledger-types__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 52rem; }
.ledger-types__body > .btn { align-self: flex-start; }
.ledger-types__table tr.is-muted td { color: var(--color-text-subtle); }
/* Project keys (PROJECT-KEYS.md) */
.ledger-keys { margin-top: var(--space-2); }
.ledger-keys__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 48rem; }
.ledger-keys__body .field { max-width: 28rem; }
.ledger-keys__preview { margin-top: var(--space-1); font-family: var(--font-mono); }
.ledger-keys__tokens { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.ledger-keys__tokens code { font-family: var(--font-mono); color: var(--color-text); }
.ledger-keys__table .input { min-width: 12rem; }
.ledger-keys__body > .btn { align-self: flex-start; }
.ledger-branch-code { margin-left: var(--space-2); padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-xs); }
.ledger-doc-control { max-width: 40rem; margin-top: var(--space-2); }
.ledger-choice { border: 0; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ledger-choice__item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.ledger-choice__item:hover { border-color: var(--color-border-strong); }
.ledger-choice__item:has(input:checked) { border-color: var(--color-accent-border); background: var(--color-accent-subtle); }
.ledger-choice__item input { margin-top: var(--space-1); }
.ledger-choice__text { display: flex; flex-direction: column; gap: var(--space-1); }
.ledger-doc-control__note { margin-top: var(--space-2); }

/* Platform overview above the Companies table (LEDGER L4). */
[data-platform-overview] > * { margin-bottom: var(--space-5); }

/* ---------- Root support access, "View as" (PATTERNS 9) ----------
   The bar sits above the shell for as long as the session lasts. support-bar.js sets
   --support-bar-h to its measured height; the sticky and fixed parts of the shell move down. */
.support-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-modal) - 1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); line-height: 1.4;
  background: var(--color-warning-subtle); color: var(--color-text); border-bottom: 2px solid var(--color-warning);
}
.support-bar--act { background: var(--color-danger-subtle); border-bottom-color: var(--color-danger); }
.support-bar__mode { display: inline-block; margin-right: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-warning); color: var(--color-bg); }
.support-bar--act .support-bar__mode { background: var(--color-danger); }
.support-bar__text { margin: 0; min-width: 0; flex: 1 1 24rem; }
.support-bar__text strong { font-weight: var(--weight-semibold); }
.support-bar__tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.support-bar__time { font-variant-numeric: tabular-nums; color: inherit; opacity: 0.85; white-space: nowrap; }
.support-bar__btn { color: inherit; }
.has-support-bar body { padding-top: var(--support-bar-h, 2.75rem); }
.has-support-bar .app-topbar { top: var(--support-bar-h, 2.75rem); }
.has-support-bar .app-sidebar { top: calc(var(--topbar-h) + var(--support-bar-h, 2.75rem)); }
.has-support-bar .app-page--workspace { height: calc(100dvh - var(--topbar-h) - var(--support-bar-h, 2.75rem)); }
.has-support-bar .app-main { min-height: calc(100vh - var(--topbar-h) - var(--support-bar-h, 2.75rem)); }
@media (max-width: 1023px) { .has-support-bar .app-sidebar { top: var(--support-bar-h, 2.75rem); } }
@media (max-width: 1439px) { .has-support-bar .copilot { top: calc(var(--topbar-h) + var(--support-bar-h, 2.75rem)); } }
/* Read-only while viewing as: the control stays visible, greyed, and says why on hover. */
.is-support-view [data-support-readonly] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Demo sandbox (docs/design/DEMO-SANDBOX.md) ---------- */
.sandbox-card h1 { font-size: var(--text-2xl); }
.sandbox-roles { list-style: none; margin: var(--space-5) 0 var(--space-4); padding: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.sandbox-role { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); }
.sandbox-role + .sandbox-role { border-top: var(--border-width) solid var(--color-border); }
.sandbox-role__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: var(--text-sm); }
.sandbox-role__text strong { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.sandbox-role__login { font-size: var(--text-xs); color: var(--color-text-subtle); }
.auth .sandbox-role .btn { flex: none; width: auto; position: static; margin: 0; }
.sandbox-card__foot { font-size: var(--text-sm); margin-top: var(--space-2); }
/* The notice on every page of the sandbox: slimmer and quieter than the View as bar. */
.support-bar--sandbox { background: var(--color-surface-sunken); border-bottom: var(--border-width) solid var(--color-border); padding-top: var(--space-1); padding-bottom: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.support-bar--sandbox .support-bar__mode { background: var(--color-accent); }

/* API access and webhooks (company Settings; docs/design/PUBLIC-API-PLAN.md) */
.ledger-api, .ledger-webhooks { margin-top: var(--space-2); }
.ledger-api__body, .ledger-webhooks__body { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; max-width: 64rem; }
.ledger-api__body .table-wrap, .ledger-webhooks__body .table-wrap { align-self: stretch; }
.api-secret { display: flex; flex-direction: column; gap: var(--space-3); }
.api-secret__label { font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.api-secret code { word-break: break-all; }

/* ---------- Developer portal (views/developers.html; PUBLIC-API-PLAN.md A3) ---------- */
body.dev { margin: 0; background: var(--color-surface); color: var(--color-text); }
.dev-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--color-surface-raised); border-bottom: var(--border-width) solid var(--color-border); }
.dev-top__links { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); }
.dev-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); max-width: 78rem; margin: 0 auto; padding: var(--space-6); }
.dev-nav { position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 6rem); overflow: auto; }
.dev-nav__toggle { display: none; }
.dev-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--text-sm); }
.dev-nav__list a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; }
.dev-nav__list a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.dev-main { min-width: 0; max-width: 52rem; }
.dev-section { padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: var(--border-width) solid var(--color-border); scroll-margin-top: 4.5rem; }
.dev-section:last-child { border-bottom: 0; }
.dev-section h1 { font-size: var(--text-3xl); margin: var(--space-1) 0 var(--space-3); }
.dev-section h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.dev-section h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.dev-section p, .dev-section li { line-height: 1.6; max-width: 72ch; }
.dev-lede { font-size: var(--text-lg); color: var(--color-text-muted); }
.dev-facts { margin: var(--space-4) 0; }
.dev-steps { padding-left: 1.25rem; display: grid; gap: var(--space-3); }
.dev-code { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-sunken); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); overflow-x: auto; font-size: var(--text-sm); line-height: 1.55; }
.dev-code code { font-family: var(--font-mono); white-space: pre; }
.dev-tabs__list { display: flex; gap: var(--space-1); margin-top: var(--space-3); }
.dev-tabs__list button { font: inherit; font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; }
.dev-tabs__list button[aria-selected="true"] { background: var(--color-surface-sunken); color: var(--color-text); border-color: var(--color-border-strong); }
.dev-errors tr.is-target td { background: var(--color-surface-sunken); }
.dev-errors tr { scroll-margin-top: 5rem; }
.dev-ref__search { width: 100%; max-width: 28rem; margin-bottom: var(--space-4); }
.dev-ref__group { margin-bottom: var(--space-6); scroll-margin-top: 4.5rem; }
.dev-ref__group h3 { margin-top: var(--space-4); }
.dev-op { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); margin: var(--space-2) 0; background: var(--color-surface); scroll-margin-top: 4.5rem; }
.dev-op__summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; flex-wrap: wrap; }
.dev-op__summary::-webkit-details-marker { display: none; }
.dev-op__path { font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.dev-op__title { color: var(--color-text-muted); font-size: var(--text-sm); }
.dev-op__body { padding: 0 var(--space-4) var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.dev-op__body h4 { font-size: var(--text-sm); margin: var(--space-4) 0 var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.dev-op__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.dev-method { display: inline-block; min-width: 3.75rem; text-align: center; padding: 1px var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold, 600); background: var(--color-surface-sunken); color: var(--color-text); }
.dev-method--get { color: var(--color-accent); }
.dev-method--post { color: var(--color-success); }
.dev-method--patch, .dev-method--put { color: var(--color-warning, var(--color-text)); }
.dev-method--delete { color: var(--color-danger); }
.dev-fields td { vertical-align: top; }
.dev-fields code { overflow-wrap: anywhere; }
.dev-required { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--color-danger); }
.dev-required--quiet { color: var(--color-text-muted); }
.dev-nested { margin-top: var(--space-2); }
.dev-nested summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-accent); }
.dev-responses { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-sm); }
.dev-responses dd { margin: 0; min-width: 0; }
.dev-status { font-family: var(--font-mono); font-weight: var(--weight-semibold, 600); }
.dev-status--2 { color: var(--color-success); }
.dev-status--4, .dev-status--5 { color: var(--color-danger); }
@media (max-width: 860px) {
  .dev-top { padding: var(--space-3) var(--space-4); }
  .dev-top__links a:not(.btn) { display: none; }
  .dev-layout { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); gap: var(--space-4); }
  .dev-nav { position: static; max-height: none; }
  .dev-nav__toggle { display: inline-flex; }
  .dev-nav__list { display: none; margin-top: var(--space-2); }
  .dev-nav__list.is-open { display: grid; }
  .dev-section h1 { font-size: var(--text-2xl); }
}
.dev-steps { grid-template-columns: minmax(0, 1fr); }
.dev-steps > li, .dev-section, .dev-tabs { min-width: 0; }
.dev-code { max-width: 100%; }
.dev-section p code, .dev-section li code, .dev-section dd code, .dev-section td code { overflow-wrap: anywhere; }

/* Connector sign-in consent (views/oauth-consent.html; API-NEXT-PLAN.md O) */
.oauth-consent { max-width: 34rem; display: flex; flex-direction: column; gap: var(--space-3); }
.oauth-consent h1 { font-size: var(--text-xl); margin: 0; }
.oauth-consent__return { padding: var(--space-2) var(--space-3); background: var(--color-surface-sunken); border-radius: var(--radius-md); font-size: var(--text-sm); }
.oauth-consent__scopes { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.oauth-consent__scopes legend { font-weight: var(--weight-semibold, 600); margin-bottom: var(--space-2); }
.oauth-consent__scopes .check { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.oauth-consent__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.connected-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.connected-apps__item { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.connected-apps__item .hint { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }