/*
  Ajyal Orbit shell (owner decision 2026-10-10: design "Orbit", dark + light themes). Phase 1 of the platform rollout.
  Applies Orbit to the shared workspace shell and the common legacy widgets on ANY page whose <head> loads
  ajyal-motion.js (which sets html[data-theme]). Every rule is scoped by html[data-theme], so a page that links this
  sheet without the motion script renders exactly as before.

  Load order: LAST stylesheet on the page (after design-tokens.css, the legacy sheets, ajyal-components.css, page
  sheets and workspace-live.css), so it can neutralise hard-coded legacy colours without !important wars.
  Page-specific Orbit tweaks then use a page class (e.g. html[data-theme] .documents-page ...) to win.

  Colours: tokens only (--ajyal-* remapped by the theme maps, --ajc-* semantic tokens; see ajyal-components.css,
  "Orbit design system"). The only literal colours are two neutral white inner highlights (brand mark, search) moved
  verbatim from the documents pilot so documents.html renders identically.
  Docs and per-page recipe: docs/design/COMPONENTS.md ("Orbit rollout").
*/

/* ---------- 0. Legacy variable bridge: the old page palettes follow the theme ---------- */
html[data-theme]{
  /* styles.css */
  --nav:var(--ajyal-canvas);--nav2:var(--ajc-glow-faint);--gold:var(--ajc-accent);--blue:var(--ajc-accent);
  /* experience.css */
  --focus-color:var(--ajc-accent);--focus-soft:var(--ajc-glow-soft);--surface-hover:var(--ajc-glow-faint);
  --surface-pressed:var(--ajyal-primary-soft);--premium-shadow:var(--ajc-toast-shadow);--premium-shadow-soft:var(--ajc-glass-shadow);
  --selected-bg:var(--ajc-glow-faint);--selected-border:var(--ajc-edge-strong);--soft-gold:var(--ajyal-primary-soft);
  --soft-green:color-mix(in srgb,var(--ajyal-success) 9%,transparent);--soft-red:color-mix(in srgb,var(--ajyal-error) 9%,transparent);
  --soft-amber:color-mix(in srgb,var(--ajyal-warning) 9%,transparent);
  /* user-saved-view.ui.css and other sheets that read a generic --border */
  --border:var(--ajyal-line);
  /* --ajo-* bridge tokens: defined ONLY here (under html[data-theme]). Legacy sheets read them with the old literal as
     fallback, e.g. background:var(--ajo-tint-warning,#fff9ed), so pages without the motion script are unchanged. */
  --ajo-on-primary:var(--ajc-on-primary);--ajo-toast-ink:var(--ajyal-ink);--ajo-avatar-ink:var(--ajc-accent);
  --ajo-arrow:var(--ajyal-muted);--ajo-code-ink:var(--ajc-accent);
  --ajo-nav-sub:var(--ajyal-muted);--ajo-nav-sub-active:var(--ajyal-ink);
  --ajo-tint-warm:var(--ajyal-primary-soft);--ajo-mark:color-mix(in srgb,var(--ajyal-warning) 30%,transparent);
  --ajo-tint-success:color-mix(in srgb,var(--ajyal-success) 8%,transparent);--ajo-edge-success:color-mix(in srgb,var(--ajyal-success) 38%,transparent);--ajo-ink-success:var(--ajyal-success);
  --ajo-tint-warning:color-mix(in srgb,var(--ajyal-warning) 8%,transparent);--ajo-edge-warning:color-mix(in srgb,var(--ajyal-warning) 40%,transparent);--ajo-ink-warning:var(--ajyal-warning);
  --ajo-tint-error:color-mix(in srgb,var(--ajyal-error) 8%,transparent);--ajo-edge-error:color-mix(in srgb,var(--ajyal-error) 40%,transparent);--ajo-ink-error:var(--ajyal-error);
}
html[data-theme] ::selection{background:var(--ajc-glow-soft);color:var(--ajyal-ink)}

/* ---------- 1. Canvas: the cosmos backdrop shows through the shell ---------- */
html[data-theme] body{font-family:var(--ajyal-font-family);background:var(--ajyal-canvas);color:var(--ajyal-ink)}
html[data-theme] :is(button,input,select,textarea){font-family:inherit}
html[data-theme] .app-shell{position:relative;z-index:1}
html[data-theme] .workspace,html[data-theme] .workspace>main{background:transparent;color:var(--ajyal-ink)}
html[data-theme] .workspace>main.ajc-page{max-width:1360px;margin:0 auto;padding:28px 32px 72px}

/* ---------- 2. Sidebar ---------- */
html[data-theme] .sidebar{background:var(--ajc-sidebar-bg);color:var(--ajyal-ink);border-inline-end:1px solid var(--ajc-edge)}
html[data-theme] .brand-row strong{color:var(--ajyal-ink)}
html[data-theme] .brand-mark{border-radius:11px;background:var(--ajc-primary-grad);color:var(--ajc-on-primary);box-shadow:0 0 18px var(--ajc-glow-soft),inset 0 1px 0 rgba(255,255,255,.3)}
/* Official logo mark (assets/brand/ajyal-mark.webp) replaces the old letter tile. Dark theme: a near-white token tile
   (--ajc-logo-tile) keeps the navy rings visible; light: no tile. */
html[data-theme] img.brand-mark--logo{display:block;flex:0 0 auto;width:36px;height:auto;aspect-ratio:384/376;box-sizing:content-box;padding:2px;border-radius:11px;background:var(--ajc-logo-tile);box-shadow:none;object-fit:contain}
html[data-theme] .brand-row span,html[data-theme] .workspace-switcher small,html[data-theme] .profile-row span,html[data-theme] .ns-role-context{color:var(--ajyal-muted)}
html[data-theme] .workspace-switcher{border-color:var(--ajc-edge);background:var(--ajc-chip-bg);color:var(--ajyal-ink)}
html[data-theme] .primary-nav a{min-height:42px;border-radius:10px;color:var(--ajyal-muted);font-weight:500;transition:background-color var(--ajc-dur-fast) var(--ajc-ease),color var(--ajc-dur-fast) var(--ajc-ease),transform var(--ajc-dur) var(--ajc-ease)}
html[data-theme] .primary-nav a>span{color:color-mix(in srgb,var(--ajc-accent) 70%,var(--ajyal-muted))}
html[data-theme] .primary-nav a:hover{background:var(--ajc-glow-faint);color:var(--ajyal-ink)}
html[data-theme] .primary-nav a.active{background:var(--ajc-nav-active-bg);color:var(--ajyal-ink);font-weight:700;box-shadow:inset -2px 0 0 var(--ajc-accent)}
html[data-theme] .primary-nav a.active>span{color:var(--ajc-accent);text-shadow:0 0 10px var(--ajc-glow)}
html[data-theme] .primary-nav :is(kbd,em){color:var(--ajyal-muted)}
html[data-theme] .sidebar-footer{border-top-color:var(--ajc-edge)}
html[data-theme] .sidebar-footer>a,html[data-theme] .profile-row button,html[data-theme] .sidebar-footer :is(p,small){color:var(--ajyal-muted)}
html[data-theme] .profile-row strong{color:var(--ajyal-ink)}
html[data-theme] .profile-row .avatar{background:var(--ajyal-primary-soft);color:var(--ajc-accent)}
html[data-theme] .ns-ms-link[data-state="connected"] .ns-ms-status{color:var(--ajyal-success)}
html[data-theme] .ns-ms-link[data-state="disconnected"] .ns-ms-status{color:var(--ajyal-warning)}
/* Phone drawer, its backdrop and the floating ☰ toggle (experience.css) */
html[data-theme] .icon-btn,html[data-theme] .mobile-nav-toggle{border:1px solid var(--ajc-edge);background:var(--ajc-chip-bg);color:var(--ajyal-ink);transition:border-color var(--ajc-dur) var(--ajc-ease),box-shadow var(--ajc-dur) var(--ajc-ease)}
html[data-theme] .mobile-nav-toggle[aria-expanded="true"]{border-color:transparent;background:var(--ajc-primary-grad);color:var(--ajc-on-primary);box-shadow:var(--ajc-primary-shadow)}
html[data-theme] :is(.sidebar-backdrop,.inspector-sheet-backdrop){background:var(--ajc-scrim)}

/* ---------- 3. Top bar, command-palette search, theme toggle, session chip ---------- */
html[data-theme] .topbar{background:var(--ajc-topbar-bg)!important;border-bottom:1px solid var(--ajc-edge)!important;box-shadow:0 1px 0 var(--ajc-glow-faint)}
html[data-theme] .context-title{background:transparent!important}
html[data-theme] .context-title span{color:var(--ajyal-muted)!important}
html[data-theme] .context-title strong{color:var(--ajyal-ink)!important;font-size:16px;font-weight:600}
html[data-theme] .global-search{gap:10px;height:46px;padding:0 14px;border:1px solid var(--ajc-edge)!important;border-radius:14px;background:var(--ajc-search-bg)!important;color:var(--ajyal-muted)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color var(--ajc-dur) var(--ajc-ease),box-shadow var(--ajc-dur) var(--ajc-ease),background-color var(--ajc-dur) var(--ajc-ease)}
html[data-theme] .global-search::before{content:"";flex:0 0 auto;width:16px;height:16px;background-color:var(--ajc-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme] .global-search>span{flex:1 1 auto;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme] .global-search:hover{border-color:var(--ajc-edge-strong)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 24px var(--ajc-glow-soft)}
html[data-theme] .global-search:focus-visible{outline:2px solid var(--ajc-accent);outline-offset:2px}
html[data-theme] .global-search kbd{border:1px solid color-mix(in srgb,var(--ajc-accent) 32%,transparent);border-radius:7px;background:var(--ajyal-primary-soft);color:var(--ajc-accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}
html[data-theme] .topbar [data-ajc-theme-toggle]{display:inline-grid;place-items:center;flex:0 0 auto;width:42px;height:42px;padding:0;border-radius:50%;color:var(--ajc-accent);font-size:18px;line-height:1;cursor:pointer}
html[data-theme] .topbar [data-ajc-theme-toggle]:hover{border-color:var(--ajc-edge-strong);box-shadow:0 0 18px var(--ajc-glow-soft)}
html[data-theme] .topbar [data-ajc-theme-toggle]:focus-visible{outline:2px solid var(--ajc-accent);outline-offset:2px}
/* Pages with a quick action next to the session chip (index.html): keep one centred row on desktop only.
   Phones (<=900px) keep the legacy one-column bar; the actions row wraps there (see "Responsive"). */
@media (min-width:901px){
  html[data-theme] .topbar:has(.top-actions .quick-action){grid-template-columns:minmax(150px,1fr) minmax(280px,560px) auto}
  html[data-theme] .top-actions:has(.quick-action){align-items:center;flex-wrap:nowrap}
}
html[data-theme] .ns-session-indicator{white-space:nowrap}
html[data-theme] .ns-session-indicator{border-color:color-mix(in srgb,var(--ajyal-success) 35%,transparent);background:color-mix(in srgb,var(--ajyal-success) 8%,transparent);color:var(--ajyal-success)}
html[data-theme] .ns-session-indicator[data-state="missing"]{border-color:color-mix(in srgb,var(--ajyal-warning) 40%,transparent);background:color-mix(in srgb,var(--ajyal-warning) 9%,transparent);color:var(--ajyal-warning)}
html[data-theme] .ns-session-indicator[data-state="checking"]{border-color:var(--ajc-edge);background:var(--ajc-chip-bg);color:var(--ajyal-muted)}
html[data-theme] .ns-session-indicator :is(a,button){color:inherit}

/* ---------- 4. Section tabs (.ajc-tabs): segmented control + sliding indicator from ajyal-motion.js ---------- */
html[data-theme] .workspace .ajc-tabs{position:static;display:flex;gap:4px;overflow-x:auto;margin:0 0 var(--ajc-gap);padding:4px;border:1px solid var(--ajc-edge);border-radius:calc(var(--ajyal-radius-button) + 5px);background:var(--ajc-tabs-bg);box-shadow:none;backdrop-filter:none;scrollbar-width:thin}
html[data-theme] .workspace .ajc-tabs.has-indicator{position:relative}
html[data-theme] .workspace .ajc-tabs button{flex:1 0 auto;min-height:42px;padding:8px 14px;border:0;border-radius:var(--ajyal-radius-button);background:transparent;color:var(--ajyal-muted);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:none!important;cursor:pointer;transition:color var(--ajc-dur) var(--ajc-ease),background-color var(--ajc-dur) var(--ajc-ease)}
html[data-theme] .workspace .ajc-tabs button:hover{background:var(--ajc-glow-faint);color:var(--ajyal-ink)}
html[data-theme] .workspace .ajc-tabs button.active{background:var(--ajyal-primary-soft)!important;color:var(--ajyal-ink)!important;font-weight:700}
html[data-theme] .workspace .ajc-tabs.has-indicator button.active{background:transparent!important;color:var(--ajyal-ink)!important}
html[data-theme] .workspace .ajc-tabs.has-indicator button:hover:not(.active){background:transparent;color:var(--ajyal-ink)}
html[data-theme] .workspace .ajc-tabs button:focus-visible{outline:2px solid var(--ajc-accent);outline-offset:-2px}

/* ---------- 5. Page intro and section heads (legacy markup) ---------- */
html[data-theme] .page-intro{border-bottom-color:var(--ajc-edge)}
html[data-theme] :is(.page-intro,.section-head) .eyebrow{color:var(--ajc-accent)}
html[data-theme] :is(.page-intro,.section-head,.inspector-head) :is(h1,h2,h3){color:var(--ajyal-ink)}
html[data-theme] .page-intro>div>p:last-child{color:var(--ajyal-muted)}

/* ---------- 6. Cards and panels: legacy surfaces become glass panels ---------- */
html[data-theme] :is(.inspector,.ns-inspector-surface,.crm-inspector,.program-inspector,.hr-inspector,.finance-inspector,.vol-inspector,.part-inspector,.partner-inspector,.template-inspector,.output-inspector,.settings-inspector,.ns-project-status){border-color:var(--ajc-edge)!important;background:var(--ajc-glass-bg);color:var(--ajyal-ink);box-shadow:var(--ajc-glass-shadow)}
html[data-theme] .ns-inspector-surface .inspector-head,html[data-theme] .inspector-head{background:transparent}
html[data-theme] :is(.inspector-head,.inspector-status,.inspector-facts,.inspector section){border-color:var(--ajyal-line-soft)}
html[data-theme] .inspector-facts dt{color:var(--ajyal-muted)}
html[data-theme] .next-action{border-inline-start-color:var(--ajc-accent);background:var(--ajyal-surface-alt);color:var(--ajyal-ink)}
html[data-theme] :is(.ns-live-panel,.ns-deep-read){border-color:var(--ajc-edge);background:var(--ajc-glass-bg);box-shadow:var(--ajc-glass-shadow)}
html[data-theme] :is(.ns-live-row,.ns-deep-read-row,.ns-deep-read-detail,.ns-deep-read-facts>div){border-color:var(--ajyal-line);background:var(--ajyal-surface-alt);color:var(--ajyal-ink)}
html[data-theme] :is(.ns-live-panel,.ns-deep-read)[data-state="live"]{border-color:color-mix(in srgb,var(--ajyal-success) 35%,transparent)}
html[data-theme] :is(.ns-live-panel,.ns-deep-read):is([data-state="error"],[data-state="signed-out"],[data-state="denied"]){border-color:color-mix(in srgb,var(--ajyal-warning) 40%,transparent)}
html[data-theme] .ns-project-grid article{border-inline-start-color:var(--ajc-accent)}
@media (max-width:1100px){
  /* The inspector becomes a bottom sheet over the content: near-opaque so text stays legible. */
  html[data-theme] .ns-inspector-surface,html[data-theme] .ns-inspector-surface :is(.inspector-head,.inspector-actions){background:var(--ajc-toast-bg)}
}

/* ---------- 7. Lists and rows ---------- */
html[data-theme] :is(.attention-row,.approval-row,.dense-row,.timeline>div,.activity-stream p,.file-row){border-color:var(--ajyal-line-soft)}
html[data-theme] :is(.attention-queue,.approval-table,.dense-list,.timeline,.activity-stream){border-top-color:var(--ajyal-line-soft)}
html[data-theme] .attention-row{color:var(--ajyal-ink);border-radius:10px}
html[data-theme] .attention-row:hover{background:var(--ajc-glow-faint)}
html[data-theme] .attention-row.selected{background:var(--ajc-nav-active-bg);box-shadow:inset -3px 0 0 var(--ajc-accent)}
html[data-theme] :is(.row-meta i,.approval-row i,.inspector-status i){border-color:color-mix(in srgb,var(--ajc-accent) 25%,transparent);background:var(--ajyal-primary-soft);color:var(--ajyal-ink)}
html[data-theme] .row-meta i.late{border-color:color-mix(in srgb,var(--ajyal-error) 40%,transparent);background:color-mix(in srgb,var(--ajyal-error) 9%,transparent);color:var(--ajyal-error)}
html[data-theme] .arrow{color:var(--ajyal-muted)}
html[data-theme] .dot{box-shadow:0 0 8px currentColor}
html[data-theme] .dot.red{color:var(--ajyal-error)}
html[data-theme] .dot.blue{color:var(--ajc-accent)}
html[data-theme] .dot.amber{color:var(--ajyal-warning)}
html[data-theme] .ns-record:is([aria-current="true"],.selected){background:var(--ajc-nav-active-bg)!important;box-shadow:inset -3px 0 0 var(--ajc-accent)!important}

/* ---------- 8. Tables ---------- */
html[data-theme] .workspace table:not(.ajc-table){color:var(--ajyal-ink);border-color:var(--ajyal-line)}
html[data-theme] .workspace :is(th,td){border-color:var(--ajyal-line-soft)}
html[data-theme] .workspace thead th{background-color:var(--ajyal-surface-alt);color:var(--ajyal-muted)}
html[data-theme] .workspace tbody tr:hover{background-color:var(--ajc-glow-faint)}
html[data-theme] .ajc-table th{border-bottom-color:var(--ajc-edge)}

/* ---------- 9. Forms: inputs, selects, textareas, file inputs ---------- */
html[data-theme] :is(.workspace,dialog) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image]),select,textarea){border-color:var(--ajc-edge);background-color:var(--ajc-field-bg);color:var(--ajyal-ink)}
html[data-theme] :is(input,textarea)::placeholder{color:var(--ajyal-muted);opacity:1}
html[data-theme] select option{background:var(--ajc-option-bg);color:var(--ajyal-ink)}
html[data-theme] :is(input,select,textarea):hover:not(:disabled):not(:focus){border-color:var(--ajyal-line-strong)}
html[data-theme] :is(input,select,textarea):focus{border-color:var(--ajc-accent)!important;box-shadow:0 0 0 3px var(--ajc-glow-soft),0 0 22px var(--ajc-glow-faint)}
html[data-theme] :is(input,select,textarea):disabled{background-color:var(--ajyal-surface-alt);color:var(--ajyal-muted)}
html[data-theme] :is(input,select,textarea).is-dirty{border-color:color-mix(in srgb,var(--ajyal-warning) 60%,transparent)!important;box-shadow:inset -3px 0 0 var(--ajyal-warning)}
html[data-theme] :is(input,select,textarea){caret-color:var(--ajc-accent)}
html[data-theme] :is(input[type=checkbox],input[type=radio],input[type=range],progress){accent-color:var(--ajc-accent)}
html[data-theme] input[type=file]{color:var(--ajyal-muted)}
html[data-theme] input[type=file]::file-selector-button{margin-inline-end:10px;padding:1px 10px;line-height:1.5;border:1px solid var(--ajc-edge);border-radius:calc(var(--ajyal-radius-button) - 4px);background:var(--ajc-chip-bg);color:var(--ajyal-ink);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color var(--ajc-dur) var(--ajc-ease),background-color var(--ajc-dur) var(--ajc-ease)}
html[data-theme] input[type=file]:hover::file-selector-button{border-color:var(--ajc-edge-strong);background:var(--ajc-chip-bg-hover)}
html[data-theme] :is(.upload-zone,.file-upload).has-file{border-color:color-mix(in srgb,var(--ajyal-success) 45%,transparent)!important;background:color-mix(in srgb,var(--ajyal-success) 7%,transparent)!important}
html[data-theme] .command-dialog .command-head input{background-color:transparent!important;box-shadow:none}

/* ---------- 10. Buttons (legacy classes; new markup uses .ajc-btn) ---------- */
html[data-theme] :is(.quick-action,.approve){border:0!important;background:var(--ajc-primary-grad)!important;color:var(--ajc-on-primary)!important;box-shadow:var(--ajc-primary-shadow);font-weight:600;white-space:nowrap}
html[data-theme] :is(.quick-action,.approve):hover:not(:disabled){box-shadow:var(--ajc-primary-shadow-hover)}
html[data-theme] .quick-action{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:var(--ajyal-radius-button)}
html[data-theme] .text-btn{color:var(--ajc-accent);font-weight:600}
html[data-theme] .text-btn:disabled{color:var(--ajyal-muted)}
html[data-theme] .filter{border-color:var(--ajc-edge);background:var(--ajc-chip-bg);color:var(--ajyal-muted);border-radius:999px;padding-inline:12px}
html[data-theme] .filter b{color:var(--ajc-accent)}
html[data-theme] .filter.active{border-color:var(--ajc-edge-strong);background:var(--ajc-indicator-bg);color:var(--ajyal-ink);box-shadow:var(--ajc-indicator-shadow)}
html[data-theme] :is(.row-actions button,.inspector-actions button:not(.approve),.inspector-actions a,.inspector-mobile-close){border:1px solid var(--ajc-edge);border-radius:var(--ajyal-radius-button);background:var(--ajc-chip-bg);color:var(--ajyal-ink)}
html[data-theme] :is(.row-actions button,.inspector-actions button:not(.approve),.inspector-actions a):hover:not(:disabled){border-color:var(--ajc-edge-strong);background:var(--ajc-chip-bg-hover);box-shadow:0 0 18px var(--ajc-glow-soft)}
html[data-theme] .inspector-actions a{color:var(--ajc-accent);font-weight:600}

/* ---------- 11. Badges and chips ---------- */
html[data-theme] :is(.ns-source-chip,.compact-metrics span){border-color:var(--ajc-edge);background:var(--ajc-chip-bg);color:var(--ajyal-muted)}
html[data-theme] .compact-metrics b{color:var(--ajyal-ink)}
html[data-theme] .ns-release-hold{border-color:color-mix(in srgb,var(--ajyal-warning) 40%,transparent);background:color-mix(in srgb,var(--ajyal-warning) 9%,transparent);color:var(--ajyal-warning)}
html[data-theme] .check{border-color:var(--ajyal-line-strong);background:var(--ajc-field-bg)}
html[data-theme] .check.done{border-color:var(--ajyal-success);background:var(--ajyal-success)}

/* ---------- 12. Dialogs (the result modal keeps its own glass) ---------- */
html[data-theme] dialog:not(.ajc-result){border:1px solid var(--ajc-edge);background:var(--ajc-result-bg);color:var(--ajyal-ink);box-shadow:var(--ajc-result-shadow)}
html[data-theme] dialog:not(.ajc-result)::backdrop{background:var(--ajc-scrim);backdrop-filter:blur(4px)}
html[data-theme] dialog:not(.ajc-result) :is(.dialog-head,.dialog-actions,.command-head){background:var(--ajc-toast-bg);border-color:var(--ajyal-line-soft)}
html[data-theme] .command-head kbd{border-color:var(--ajc-edge);color:var(--ajyal-muted)}
html[data-theme] .command-results>p{color:var(--ajyal-muted)}
html[data-theme] .command-results button{color:var(--ajyal-ink)}
html[data-theme] .command-results button>span{color:var(--ajc-accent)}
html[data-theme] .command-results button:is(:hover,:focus-visible){background:var(--ajc-glow-faint)}
html[data-theme] .command-results small{color:var(--ajyal-muted)}

/* ---------- 13. Empty, loading and error states ---------- */
html[data-theme] .state-surface{border:1px dashed color-mix(in srgb,var(--ajc-accent) 25%,transparent);border-radius:var(--ajyal-radius-card);background:var(--ajc-glow-faint);color:var(--ajyal-muted)}
html[data-theme] .state-surface strong{color:var(--ajyal-ink)}
html[data-theme] .state-surface p{color:var(--ajyal-muted)}
html[data-theme] .state-surface:is([data-state="blocked"],[data-state="error"]){border-color:color-mix(in srgb,var(--ajyal-error) 40%,transparent);background:color-mix(in srgb,var(--ajyal-error) 7%,transparent)}
html[data-theme] .state-surface:is([data-state="warning"],[data-state="stale"]){border-color:color-mix(in srgb,var(--ajyal-warning) 40%,transparent);background:color-mix(in srgb,var(--ajyal-warning) 7%,transparent)}
html[data-theme] .state-surface[data-state="success"]{border-color:color-mix(in srgb,var(--ajyal-success) 40%,transparent);background:color-mix(in srgb,var(--ajyal-success) 7%,transparent)}
html[data-theme] :is(.ns-deep-read-empty,.ns-deep-read-error,.ns-deep-read-loading){border-color:color-mix(in srgb,var(--ajc-accent) 25%,transparent);background:var(--ajc-glow-faint)}
html[data-theme] :is(.ns-myday-status,.ns-live-note){color:var(--ajyal-ink)}
html[data-theme] .ns-myday-status{display:flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--ajyal-warning) 40%,transparent);border-radius:var(--ajyal-radius-button);background:color-mix(in srgb,var(--ajyal-warning) 8%,transparent)}
html[data-theme] .ns-myday-status::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ajyal-warning);box-shadow:0 0 10px var(--ajyal-warning)}
html[data-theme] .ns-myday-status.is-live{border-color:color-mix(in srgb,var(--ajyal-success) 40%,transparent);background:color-mix(in srgb,var(--ajyal-success) 8%,transparent)}
html[data-theme] .ns-myday-status.is-live::before{background:var(--ajyal-success);box-shadow:0 0 10px var(--ajyal-success)}

/* ---------- 14. Toasts ---------- */
html[data-theme] .toast{border:1px solid var(--ajc-edge);border-inline-start:3px solid var(--ajc-accent);background:var(--ajc-toast-bg);color:var(--ajyal-ink);box-shadow:var(--ajc-toast-shadow)}
html[data-theme] .toast[data-tone="success"]{border-inline-start-color:var(--ajyal-success)}
html[data-theme] .toast[data-tone="warning"]{border-inline-start-color:var(--ajyal-warning)}
html[data-theme] .toast[data-tone="error"]{border-inline-start-color:var(--ajyal-error)}

/* ---------- 15. Dashboard layout helpers (index.html; reusable) ---------- */
/* Legacy .page-intro turned into the Orbit hero: keep the row layout (the legacy phone rule switches to a column,
   where the text's 320px flex-basis would become its height). */
html[data-theme] .page-intro.ajc-page-header{flex-direction:row;align-items:flex-start}
/* Four KPI cards in a row (2 x 2 on tablets and phones). */
html[data-theme] .ajc-kpi-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Ring/caption colours follow the card meaning: 3rd = overdue (warning), 4th = due today (accent). */
html[data-theme] .ajc-kpi-grid--4>.ajc-kpi-card:nth-child(3){--ajc-ring-bar:var(--ajyal-warning);--ajc-meta:var(--ajyal-warning)}
html[data-theme] .ajc-kpi-grid--4>.ajc-kpi-card:nth-child(4){--ajc-ring-bar:var(--ajc-ring-1);--ajc-meta:var(--ajc-meta-1)}
html[data-theme] .content-grid{gap:20px;margin-top:4px}
html[data-theme] .primary-column{display:grid;gap:var(--ajc-gap);align-content:start;min-width:0}
html[data-theme] .primary-column>.work-section{margin-top:0}
html[data-theme] .work-section.ajc-card .section-head{margin-bottom:12px}
html[data-theme] .work-section.ajc-card .section-head h2{font-size:17px;font-weight:600}
html[data-theme] .work-section.ajc-card>h2{margin:0 0 4px;font-size:17px;font-weight:600}
html[data-theme] .inspector{top:90px}
html[data-theme] .inspector .inspector-head h2{font-weight:600}

/* ---------- 16. Public pages (no staff sidebar): brand bar + centred glass card ---------- */
/* Pages whose <body> starts with <header class="pub-bar"> (employee-login, partner-login, staff-accounts, member-home,
   verify-document, sign-document). One brand bar with the theme toggle over the cosmos, and the page's centred card
   as a glass panel. The page sets only its column width: body.<page>{--pub-width:40rem} (default 840px).
   The base rules (the only selectors in this sheet not scoped by html[data-theme]; tests/myday-orbit.test.mjs allows
   exactly these) keep the bar usable without the motion script, read the :root tokens of design-tokens.css and match
   only .pub-bar/.pub-brand, which exist on these pages alone. The theme rules use :where() so page sheets still win
   at equal specificity (e.g. the 40px filter fields on staff-accounts). Cards: .verify-card, .sign-card,
   .accounts-head, .accounts-card, .pilot-login. */
.pub-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;max-width:var(--pub-width,840px);margin:0 auto;padding:18px 16px 0}
.pub-brand{display:flex;align-items:center;gap:10px;color:var(--ajyal-ink)}
/* Official logo: the full logo (mark + navy wordmark) without a theme and in light; in dark the navy wordmark would be
   unreadable, so the bar shows the mark on its token tile plus the existing text. Both images carry the alt text. */
.pub-brand__logo{display:block;width:auto;height:96px}
.pub-brand__logo~span{display:none}
.pub-brand__mark{display:none;width:40px;height:auto;aspect-ratio:384/376;box-sizing:content-box;padding:3px;border-radius:12px}
.pub-brand :is(strong,small){display:block;line-height:1.35}
.pub-brand small{color:var(--ajyal-muted);font-size:12px}
html:not(.ajc-js) .pub-bar [data-ajc-theme-toggle]{display:none}
html[data-theme] :where(body:has(>.pub-bar)) :is(.pub-bar,main){position:relative;z-index:1}
/* Which lockup shows is a theme token (--ajc-pub-logo / --ajc-pub-mark: light block/none, dark none/block). */
html[data-theme] .pub-brand__logo{display:var(--ajc-pub-logo)}
html[data-theme] :is(.pub-brand__mark,.pub-brand__logo~span){display:var(--ajc-pub-mark)}
html[data-theme] .pub-brand__mark{background:var(--ajc-logo-tile)}
html[data-theme] .pub-brand strong{color:var(--ajyal-ink)}
html[data-theme] .pub-brand small{color:var(--ajyal-muted)}
html[data-theme] .pub-bar [data-ajc-theme-toggle]{display:inline-grid;place-items:center;flex:0 0 auto;width:42px;height:42px;padding:0;border-radius:50%;color:var(--ajc-accent);font-size:18px;line-height:1;cursor:pointer}
html[data-theme] .pub-bar [data-ajc-theme-toggle]:hover{border-color:var(--ajc-edge-strong);box-shadow:0 0 18px var(--ajc-glow-soft)}
html[data-theme] .pub-bar [data-ajc-theme-toggle]:focus-visible{outline:2px solid var(--ajc-accent);outline-offset:2px}
html[data-theme] :where(body:has(>.pub-bar)) :is(.verify-card,.sign-card,.accounts-head,.accounts-card,.pilot-login){position:relative;overflow:hidden;border:1px solid var(--ajc-edge);border-radius:var(--ajyal-radius-card);background:var(--ajc-hero-aura),var(--ajc-glass-bg);box-shadow:var(--ajc-glass-shadow);color:var(--ajyal-ink)}
html[data-theme] :where(body:has(>.pub-bar)) :is(.verify-card,.sign-card,.accounts-head,.accounts-card,.pilot-login)::before{content:"";position:absolute;inset-inline:24px;inset-block-start:0;height:1px;background:var(--ajc-beam);opacity:.8;pointer-events:none}
html[data-theme] :where(body:has(>.pub-bar)) :is(h1,h2,h3){color:var(--ajyal-ink)}
html[data-theme] :where(body:has(>.pub-bar)) .eyebrow{color:var(--ajc-accent)}
html[data-theme] :where(body:has(>.pub-bar)) a:not(.quick-action){color:var(--ajc-accent)}
html[data-theme] :where(body:has(>.pub-bar)) :is(input:not([type=checkbox],[type=radio],[type=file],[type=submit],[type=button]),select,textarea){min-height:44px;box-sizing:border-box;border:1px solid var(--ajc-edge);border-radius:var(--ajyal-radius-button);background-color:var(--ajc-field-bg);color:var(--ajyal-ink)}
html[data-theme] :where(body:has(>.pub-bar)) textarea{min-height:90px}
html[data-theme] :where(body:has(>.pub-bar)) :focus-visible{outline:2px solid var(--ajc-accent);outline-offset:3px}

/* ---------- 17. Print: paper uses the light Orbit palette in both themes ---------- */
/* Printing (or "Save as PDF") from the dark theme must not produce a navy page with pale text. Under print the theme
   tokens are remapped to the raw light palette (--ajyal-ol-*, no literals) on a white sheet, glass/glow/shadow
   effects are switched off and the cosmos is hidden. Page sheets keep only their layout print rules (what to hide,
   break-inside). On screen, a paper preview inside a dark page uses the same idea on its own subtree
   (see COMPONENTS.md, "paper-preview token subtree"). */
@media print{
  html[data-theme]{
    color-scheme:light;
    --ajyal-canvas:var(--ajyal-ol-white);--ajyal-ink:var(--ajyal-ol-ink);--ajyal-muted:var(--ajyal-ol-muted);
    --ajyal-surface:var(--ajyal-ol-white);--ajyal-surface-alt:var(--ajyal-ol-white);
    --ajyal-line:color-mix(in srgb,var(--ajyal-ol-ink) 14%,transparent);--ajyal-line-soft:color-mix(in srgb,var(--ajyal-ol-ink) 8%,transparent);
    --ajyal-line-strong:color-mix(in srgb,var(--ajyal-ol-ink) 30%,transparent);
    --ajyal-primary:var(--ajyal-ol-cyan);--ajyal-primary-soft:var(--ajyal-ol-white);--ajyal-document-primary:var(--ajyal-ol-cyan);
    --ajyal-error:var(--ajyal-ol-error);--ajyal-warning:var(--ajyal-ol-warning);--ajyal-success:var(--ajyal-ol-success);
    --ajyal-shadow-card:none;
    --ajc-accent:var(--ajyal-ol-ink);--ajc-accent-2:var(--ajyal-ol-indigo);--ajc-accent-3:var(--ajyal-ol-success);
    --ajc-on-primary:var(--ajyal-ol-white);--ajc-primary-grad:linear-gradient(135deg,var(--ajyal-ol-cyan-deep),var(--ajyal-ol-indigo-deep));
    --ajc-primary-shadow:none;--ajc-primary-shadow-hover:none;
    --ajc-chip-bg:var(--ajyal-ol-white);--ajc-chip-bg-hover:var(--ajyal-ol-white);
    --ajc-edge:color-mix(in srgb,var(--ajyal-ol-ink) 16%,transparent);--ajc-edge-strong:color-mix(in srgb,var(--ajyal-ol-ink) 30%,transparent);
    --ajc-glass:var(--ajyal-ol-white);--ajc-glass-bg:var(--ajyal-ol-white);--ajc-glass-shadow:none;--ajc-hero-aura:none;--ajc-beam:none;
    --ajc-glow:transparent;--ajc-glow-soft:transparent;--ajc-glow-faint:transparent;
    --ajc-field-bg:var(--ajyal-ol-white);--ajc-option-bg:var(--ajyal-ol-white);--ajc-tabs-bg:var(--ajyal-ol-white);
    --ajc-indicator-bg:var(--ajyal-ol-white);--ajc-indicator-shadow:none;--ajc-nav-active-bg:transparent;
    --ajc-value-fill:linear-gradient(var(--ajyal-ol-ink),var(--ajyal-ol-ink));--ajc-value-glow:none;
    --ajc-ring-track:color-mix(in srgb,var(--ajyal-ol-ink) 10%,transparent);
    --ajc-ring-1:var(--ajyal-ol-cyan);--ajc-ring-2:var(--ajyal-ol-success);--ajc-ring-3:var(--ajyal-ol-indigo);
    --ajc-meta-1:var(--ajyal-ol-cyan);--ajc-meta-2:var(--ajyal-ol-success);--ajc-meta-3:var(--ajyal-ol-indigo);
    --ajc-toast-bg:var(--ajyal-ol-white);--ajc-toast-shadow:none;--ajc-result-bg:var(--ajyal-ol-white);--ajc-result-shadow:none;
    --ajo-tint-warning:var(--ajyal-ol-white);
    background:var(--ajyal-ol-white);color:var(--ajyal-ol-ink)
  }
  html[data-theme] body{background:var(--ajyal-ol-white);color:var(--ajyal-ol-ink)}
  html[data-theme] .ajc-cosmos{display:none}
}

/* ---------- 18. Logo watermark in the cosmos backdrop ---------- */
/* A very faint, large official mark drifting/rotating slowly behind everything (inside the fixed .ajc-cosmos, which has
   pointer-events:none and z-index 0). Opacity is a theme token (--ajc-mark-opacity: light .06, dark .08, multiplied by
   the glow breathing .7-1 => about 4-6% / 6-8%). Transform-only loop, no blur. Pseudo-elements are not matched by
   the ".ajc-cosmos *" pause/reduced-motion rules, so they are repeated here. The keyframes ajc-mark-orbit live in ajyal-components.css. */
html[data-theme] .ajc-cosmos__glow::before{content:"";position:absolute;left:64%;top:48%;width:min(80vmin,780px);aspect-ratio:384/376;background:url("assets/brand/ajyal-mark.webp") center/contain no-repeat;opacity:var(--ajc-mark-opacity);transform:translate(-50%,-50%);animation:ajc-mark-orbit 180s linear infinite;will-change:transform;pointer-events:none}
html[data-theme].ajc-paused .ajc-cosmos__glow::before{animation-play-state:paused}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  html[data-theme] .ajc-kpi-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* Quick actions + session chip + toggle: one in-flow row that wraps (never wider than the phone). */
  html[data-theme] .top-actions:has(.quick-action){position:static;flex-wrap:wrap;align-items:center;row-gap:6px;min-width:0;max-width:100%}
  html[data-theme] .top-actions:has(.quick-action) .quick-action{min-height:38px;padding:0 12px;font-size:13px}
  html[data-theme] .top-actions:has(.quick-action) [data-ajc-theme-toggle]{width:38px;height:38px}
  html[data-theme] .sidebar{background:var(--ajc-toast-bg);box-shadow:var(--ajc-toast-shadow)}
  html[data-theme] .global-search{height:44px}
}
@media (max-width:760px){
  html[data-theme] .ajc-kpi-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-theme] .ajc-kpi-grid--4 .ajc-kpi-card{grid-template-columns:minmax(0,1fr);align-items:start;gap:10px;padding:16px}
  html[data-theme] .ajc-kpi-grid--4 .ajc-ring{inset-block-start:16px;inset-inline-end:14px;width:40px;height:40px;margin-top:0}
  html[data-theme] .ajc-kpi-grid--4 .ajc-kpi-card__body{padding-inline-end:0}
  html[data-theme] .ajc-kpi-grid--4 .ajc-kpi-card__value{font-size:30px}
  html[data-theme] .ajc-kpi-grid--4 .ajc-kpi-card__label{font-size:12px}
}
@media (max-width:480px){
  html[data-theme] .top-actions:has(.quick-action){gap:6px}
  html[data-theme] .top-actions:has(.quick-action) .ns-session-indicator{gap:6px;padding:6px 9px;font-size:11px}
  html[data-theme] .top-actions:has(.quick-action) .quick-action{padding:0 10px;font-size:12px}
}
@media (max-width:720px){
  html[data-theme] .pub-brand__logo{height:72px}
  html[data-theme] .workspace>main.ajc-page{padding:20px 16px 96px}
}
@media (prefers-reduced-motion:reduce){
  html[data-theme] .primary-nav a,html[data-theme] .global-search,html[data-theme] .workspace .ajc-tabs button,html[data-theme] input[type=file]::file-selector-button,html[data-theme] .pub-bar [data-ajc-theme-toggle]{transition:none}
  html[data-theme] .ajc-cosmos__glow::before{animation:none}
}
@media (forced-colors:active){
  html[data-theme] .ns-myday-status::before,html[data-theme] .dot{forced-color-adjust:none}
}