/* AKR WebOps dashboard. BEM on Atomic Framework variables, house rules from the Bricks architect:
   prefix akr-wo (company plus app code), one element level, modifiers never alone, is- states
   only with their block, no !important, mobile-first (min-width queries), and no literal except
   0, 1px, 100% and auto: every other value is a var() from tokens.css.
   Direction: a quiet tool with one loud thing. The site progress cards carry the colour; status is
   a word plus a dot; gold marks progress and the one primary action.
   app.js adds the prefix to every class it sets (bem()); tests/guard.test.mjs enforces all of this. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--text-s)/var(--line-height-text) var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-heading); font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); }
[hidden] { display: none; }

/* ---------- vh: visually hidden utility ---------- */
.akr-wo-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- skip-link ---------- */
.akr-wo-skip-link { position: absolute; left: var(--space-s); top: 0; z-index: var(--z-tooltip); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-s); background: var(--card); transform: translateY(-200%); }
.akr-wo-skip-link:focus { transform: translateY(var(--space-xs)); }

/* ---------- top ---------- */
.akr-wo-top { position: sticky; top: 0; z-index: var(--z-sticky); border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 84%, transparent); backdrop-filter: saturate(1.4) blur(var(--blur-bar)); -webkit-backdrop-filter: saturate(1.4) blur(var(--blur-bar)); }
.akr-wo-top[hidden] { display: none; }
.akr-wo-top__inner { display: flex; align-items: center; gap: var(--space-xs); max-width: var(--container-width); min-height: calc(var(--control-m) * 1.6); margin: 0 auto; padding: var(--space-2xs) max(var(--space-s), env(safe-area-inset-left)); }
.akr-wo-top__tools { display: flex; flex: none; align-items: center; gap: var(--space-2xs); }

/* ---------- mark ---------- */
.akr-wo-mark { display: inline-flex; flex: none; align-items: center; gap: var(--space-2xs); text-decoration: none; }
.akr-wo-mark__bg { fill: var(--ink); }
.akr-wo-mark__fg { fill: none; stroke: var(--gold); stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.akr-wo-mark__word { display: none; color: var(--ink); font: var(--heading-font-weight) var(--text-s)/var(--line-height-flat) var(--font-heading); }

/* ---------- nav ---------- */
.akr-wo-nav { display: flex; flex: 1; gap: var(--space-3xs); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.akr-wo-nav::-webkit-scrollbar { display: none; }
.akr-wo-nav__link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--control-s); padding: 0 var(--space-xs); border-radius: var(--radius-full); color: var(--muted); font-size: var(--text-s); font-weight: 500; text-decoration: none; white-space: nowrap; transition: var(--transition-fast); }
.akr-wo-nav__link:hover { color: var(--ink); background: var(--card); }
.akr-wo-nav__link[aria-current="page"] { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- badge ---------- */
.akr-wo-badge { display: inline-grid; place-items: center; min-width: calc(var(--text-xs) * 1.6); height: calc(var(--text-xs) * 1.6); padding: 0 var(--space-3xs); border-radius: var(--radius-full); background: var(--gold); color: var(--on-gold); font: 500 var(--text-xs)/var(--line-height-flat) var(--font-mono); }

/* ---------- sync ---------- */
.akr-wo-sync { display: none; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.akr-wo-sync[data-state="bad"] { color: var(--bad); }

/* ---------- icon-btn ---------- */
.akr-wo-icon-btn { display: inline-grid; place-items: center; width: var(--control-m); height: var(--control-m); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--muted); cursor: pointer; transition: var(--transition-fast); }
.akr-wo-icon-btn:hover { color: var(--ink); background: var(--card); }

/* ---------- main, view, layout ---------- */
.akr-wo-main { max-width: var(--container-width); margin: 0 auto; padding: var(--space-l) max(var(--space-s), env(safe-area-inset-left)) calc(var(--space-xl) + env(safe-area-inset-bottom)); outline: none; }
.akr-wo-main[hidden] { display: none; }
.akr-wo-view { display: grid; gap: var(--space-l); }
.akr-wo-view--narrow { max-width: var(--reading); margin: 0 auto; }
.akr-wo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: start; }

/* ---------- head ---------- */
.akr-wo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-s); }
.akr-wo-head__title { font-size: var(--text-xl); }
.akr-wo-head__sub { margin: var(--space-3xs) 0 0; color: var(--muted); font-size: var(--text-s); }

/* ---------- section ---------- */
.akr-wo-section { display: grid; gap: var(--space-xs); scroll-margin-top: calc(var(--control-m) * 2.2); }
.akr-wo-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.akr-wo-section__title { font-size: var(--text-l); }
.akr-wo-section__meta { color: var(--muted); font-size: var(--text-xs); }

/* ---------- notice ---------- */
.akr-wo-notice { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; color: var(--muted); font-size: var(--text-xs); }

/* ---------- card ---------- */
.akr-wo-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card); }
.akr-wo-card__pad { padding: var(--space-s); }
.akr-wo-card--pad { padding: var(--space-s); }
.akr-wo-card--inbox { border-color: color-mix(in oklab, var(--gold) 45%, var(--line)); background: linear-gradient(180deg, var(--gold-soft), var(--card) var(--space-xl)); }

/* ---------- list and item ---------- */
.akr-wo-list { margin: 0; padding: 0; list-style: none; }
.akr-wo-list__more { display: block; width: 100%; min-height: var(--control-l); border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--text-xs); cursor: pointer; }
.akr-wo-list__more:hover { color: var(--ink); background: var(--bg); }
.akr-wo-item { display: flex; align-items: center; gap: var(--space-2xs); min-height: var(--control-l); padding: var(--space-xs) var(--space-s); border-top: 1px solid var(--line); }
.akr-wo-item:first-child { border-top: 0; }
.akr-wo-item__main { flex: 1; min-width: 0; }
.akr-wo-item__title { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.akr-wo-item__title a { text-decoration: none; }
.akr-wo-item__title a:hover { text-decoration: underline; text-underline-offset: var(--space-3xs); }
.akr-wo-item__meta { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-xs); margin-top: var(--space-3xs); color: var(--muted); font-size: var(--text-xs); }
.akr-wo-item__end { display: flex; flex: none; align-items: center; gap: var(--space-2xs); }
.akr-wo-item__end--meter { width: min(40%, var(--max-width-s)); }
.akr-wo-item--report .akr-wo-md { font-size: var(--text-s); }
.akr-wo-item.is-done .akr-wo-item__main, .akr-wo-item.is-done .akr-wo-item__main a { color: var(--muted); }

/* ---------- ref: task and question IDs ---------- */
.akr-wo-ref { color: var(--muted); font: 500 var(--text-xs)/var(--line-height-flat) var(--font-mono); }

/* ---------- status: a dot and a word ---------- */
.akr-wo-status { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--text); font-size: var(--text-xs); white-space: nowrap; }
.akr-wo-status::before { content: ""; flex: none; width: var(--dot); height: var(--dot); border-radius: var(--radius-full); background: var(--muted); }
.akr-wo-status--ok { color: var(--ok); }
.akr-wo-status--ok::before { background: var(--ok); }
.akr-wo-status--doing::before { background: var(--info); }
.akr-wo-status--review::before { background: var(--gold); }
.akr-wo-status--bad { color: var(--bad); }
.akr-wo-status--bad::before { background: var(--bad); }
.akr-wo-status--late { color: var(--warn); }
.akr-wo-status--late::before { background: var(--warn); }
.akr-wo-status--idle { color: var(--muted); }
.akr-wo-status--idle::before { background: var(--line-strong); }

/* ---------- progress ---------- */
.akr-wo-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); }
.akr-wo-progress__bar { height: var(--bar); overflow: hidden; border-radius: var(--radius-full); background: var(--track); }
.akr-wo-progress__fill { width: var(--p, 0); height: 100%; border-radius: inherit; background: var(--gold); transition: width var(--duration-slow) var(--ease-out); }
.akr-wo-progress__count { color: var(--muted); font: 500 var(--text-xs)/var(--line-height-flat) var(--font-mono); white-space: nowrap; }
.akr-wo-progress__done { color: var(--ink); font-weight: 500; }

/* ---------- stats ---------- */
.akr-wo-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--line); }
.akr-wo-stats__item { display: grid; gap: var(--space-3xs); padding: var(--space-s); background: var(--card); text-decoration: none; transition: var(--transition-fast); }
a.akr-wo-stats__item:hover { background: color-mix(in oklab, var(--card) 92%, var(--gold)); }
.akr-wo-stats__value { color: var(--ink); font: 500 var(--text-xl)/var(--line-height-snug) var(--font-mono); letter-spacing: var(--tracking-tight); }
.akr-wo-stats__label { color: var(--muted); font-size: var(--text-xs); }

/* ---------- btn ---------- */
.akr-wo-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: var(--control-m); padding: 0 var(--space-s); border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--card); color: var(--ink); font-size: var(--text-s); font-weight: 500; text-decoration: none; cursor: pointer; transition: var(--transition-fast); }
.akr-wo-btn:hover { border-color: var(--ink); }
.akr-wo-btn.akr-wo-btn--primary { border-color: var(--ink); background: var(--ink); color: var(--card); }
.akr-wo-btn.akr-wo-btn--primary:hover { background: color-mix(in oklab, var(--ink) 86%, var(--gold)); }
.akr-wo-btn.akr-wo-btn--sm { min-height: var(--control-s); padding: 0 var(--space-xs); font-size: var(--text-xs); }
.akr-wo-btn[disabled] { opacity: var(--opacity-busy); cursor: progress; }

/* ---------- note-btn ---------- */
.akr-wo-note-btn { display: inline-flex; align-items: center; gap: var(--space-3xs); min-height: var(--control-s); padding: 0 var(--space-2xs); border: 1px solid transparent; border-radius: var(--radius-full); background: transparent; color: var(--muted); font-size: var(--text-xs); cursor: pointer; transition: var(--transition-fast); }
.akr-wo-note-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.akr-wo-note-btn.is-noted { color: var(--gold-ink); }
.akr-wo-note-btn.is-new { background: var(--gold); color: var(--on-gold); }

/* ---------- tick ---------- */
.akr-wo-tick { display: inline-grid; flex: none; place-items: center; width: var(--control-s); height: var(--control-s); border: var(--border-strong) solid var(--muted); border-radius: var(--radius-full); background: transparent; color: transparent; cursor: pointer; transition: var(--transition-fast); }
.akr-wo-tick:hover { border-color: var(--ok); color: var(--ok); }
.akr-wo-tick[aria-pressed="true"] { border-color: var(--ok); background: var(--ok); color: var(--card); }
.akr-wo-tick.is-saving { opacity: var(--opacity-busy); }
.akr-wo-tick--readonly { cursor: default; }
.akr-wo-tick.akr-wo-tick--readonly:hover { border-color: var(--muted); color: transparent; }
.akr-wo-tick.akr-wo-tick--readonly[aria-pressed="true"]:hover { border-color: var(--ok); color: var(--card); }

/* ---------- ext-link ---------- */
.akr-wo-ext-link { display: inline-grid; place-items: center; width: var(--control-s); height: var(--control-s); border-radius: var(--radius-full); color: var(--muted); text-decoration: none; transition: var(--transition-fast); }
.akr-wo-ext-link:hover { background: var(--bg); color: var(--ink); }

/* ---------- chip-group and chip ---------- */
.akr-wo-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.akr-wo-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--control-s); padding: 0 var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); color: var(--muted); font-size: var(--text-xs); cursor: pointer; transition: var(--transition-fast); }
.akr-wo-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.akr-wo-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--card); }
.akr-wo-chip__count { font-family: var(--font-mono); opacity: var(--opacity-busy); }

/* ---------- search ---------- */
.akr-wo-search { display: flex; align-items: center; gap: var(--space-2xs); width: 100%; min-height: var(--control-m); padding: 0 var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); }
.akr-wo-search:focus-within { border-color: var(--ink); }
.akr-wo-search__input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--text-s); outline: none; }

/* ---------- drill: one site's articles ---------- */
.akr-wo-drill__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }

/* ---------- site-grid and site-card: the one loud thing ---------- */
.akr-wo-site-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.akr-wo-site-card { display: grid; gap: var(--space-xs); padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card); text-align: left; transition: var(--transition); }
.akr-wo-site-card--toggle { cursor: pointer; }
.akr-wo-site-card--toggle:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.akr-wo-site-card.is-open { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.akr-wo-site-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2xs); }
.akr-wo-site-card__name { color: var(--ink); font: var(--heading-font-weight) var(--text-m)/var(--line-height-snug) var(--font-heading); }
.akr-wo-site-card__url { color: var(--muted); font-size: var(--text-xs); text-decoration: none; overflow-wrap: anywhere; }
.akr-wo-site-card__url:hover { color: var(--ink); }
.akr-wo-site-card__stages { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-xs); color: var(--muted); font-size: var(--text-xs); }
.akr-wo-site-card__count { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
.akr-wo-site-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); }

/* ---------- question ---------- */
.akr-wo-question { display: grid; gap: var(--space-xs); padding: var(--space-s); border-top: 1px solid var(--line); }
.akr-wo-question:first-child { border-top: 0; }
.akr-wo-question__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.akr-wo-question__text { margin: 0; color: var(--ink); font-size: var(--text-m); line-height: var(--line-height-text); overflow-wrap: anywhere; }
.akr-wo-question__unblocks { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.akr-wo-question__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.akr-wo-question__sent { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--ok); font-size: var(--text-xs); }

/* ---------- inbox: Mandeep's new notes and ticks ---------- */
.akr-wo-inbox__item { display: grid; gap: var(--space-2xs); width: 100%; padding: var(--space-s); border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.akr-wo-inbox__item:first-child { border-top: 0; }
.akr-wo-inbox__item:hover .akr-wo-inbox__body { color: var(--ink); }
.akr-wo-inbox__who { color: var(--muted); font-size: var(--text-xs); }
.akr-wo-inbox__name { color: var(--gold-ink); font-weight: 600; }
.akr-wo-inbox__body { display: -webkit-box; overflow: hidden; color: var(--text); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }

/* ---------- day-report: Day Start on Today ---------- */
.akr-wo-day-report { max-height: var(--max-width-s); overflow: auto; font-size: var(--text-s); }

/* ---------- report: Day End with ticks ---------- */
.akr-wo-report__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-s); list-style: none; cursor: pointer; }
.akr-wo-report__summary::-webkit-details-marker { display: none; }
.akr-wo-report__summary::after { content: ""; flex: none; width: var(--space-2xs); height: var(--space-2xs); border-right: var(--border-strong) solid var(--muted); border-bottom: var(--border-strong) solid var(--muted); transform: rotate(45deg); transition: var(--transition-fast); }
.akr-wo-report[open] > .akr-wo-report__summary { border-bottom: 1px solid var(--line); }
.akr-wo-report[open] > .akr-wo-report__summary::after { transform: rotate(-135deg); }
.akr-wo-report__title { color: var(--ink); font: var(--heading-font-weight) var(--text-m)/var(--line-height-snug) var(--font-heading); }
.akr-wo-report__meter { display: none; flex: 1; max-width: var(--max-width-s); margin-left: auto; }
.akr-wo-report__heading { padding: var(--space-s) var(--space-s) var(--space-3xs); color: var(--ink); font: 600 var(--text-s)/var(--line-height-snug) var(--font-body); }
.akr-wo-report__label { padding: var(--space-2xs) var(--space-s) 0; color: var(--muted); font-size: var(--text-xs); }

/* ---------- sheet: note drawer (bottom sheet on phones) ---------- */
.akr-wo-sheet { width: 100vw; max-width: 100vw; height: var(--sheet-mobile-height); max-height: var(--sheet-mobile-height); margin: auto 0 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.akr-wo-sheet::backdrop { background: var(--scrim); backdrop-filter: blur(var(--blur-scrim)); }
.akr-wo-sheet[open] { animation: sheet-in var(--duration-sheet) var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(var(--space-m)); } to { opacity: 1; transform: none; } }
.akr-wo-sheet__inner { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; }
.akr-wo-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xs); padding: var(--space-m) var(--space-s) var(--space-xs); }
.akr-wo-sheet__kicker { margin: 0 0 var(--space-3xs); color: var(--muted); font: 500 var(--text-xs)/var(--line-height-snug) var(--font-mono); }
.akr-wo-sheet__title { font-size: var(--text-l); overflow-wrap: anywhere; }
.akr-wo-sheet__context { padding: 0 var(--space-s) var(--space-xs); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-s); }
.akr-wo-sheet__context:empty { display: none; }

/* ---------- thread and msg ---------- */
.akr-wo-thread { display: grid; align-content: start; gap: var(--space-s); margin: 0; padding: var(--space-s); overflow: auto; list-style: none; }
.akr-wo-thread__empty { padding: var(--space-l) 0; color: var(--muted); font-size: var(--text-s); text-align: center; }
.akr-wo-msg { display: grid; gap: var(--space-2xs); }
.akr-wo-msg__who { display: flex; align-items: baseline; gap: var(--space-2xs); color: var(--muted); font-size: var(--text-xs); }
.akr-wo-msg__name { color: var(--ink); font-weight: 600; }
.akr-wo-msg__body { padding: var(--space-xs) var(--space-s); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg); overflow-wrap: anywhere; }
.akr-wo-msg--mine .akr-wo-msg__body { border-color: color-mix(in oklab, var(--gold) 30%, var(--line)); background: var(--gold-soft); }
.akr-wo-msg.is-pending .akr-wo-msg__body { opacity: var(--opacity-busy); }
.akr-wo-msg__more { justify-self: start; padding: 0; border: 0; background: none; color: var(--gold-ink); font-size: var(--text-xs); text-decoration: underline; text-underline-offset: var(--space-3xs); cursor: pointer; }
.akr-wo-msg__link { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--gold-ink); font-size: var(--text-xs); overflow-wrap: anywhere; }

/* ---------- composer ---------- */
.akr-wo-composer { display: grid; gap: var(--space-xs); padding: var(--space-s) var(--space-s) calc(var(--space-s) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.akr-wo-composer__field { width: 100%; min-height: calc(var(--control-l) * 2); max-height: var(--composer-max); padding: var(--space-xs) var(--space-s); border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--bg); font-size: var(--text-s); line-height: var(--line-height-text); outline: none; resize: vertical; transition: var(--transition-fast); }
.akr-wo-composer__field:focus { border-color: var(--ink); background: var(--card); }
.akr-wo-composer.is-drop .akr-wo-composer__field { border-style: dashed; border-color: var(--gold); background: var(--gold-soft); }
.akr-wo-composer__link-input { width: 100%; min-height: var(--control-m); padding: 0 var(--space-s); border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--bg); font-size: var(--text-s); outline: none; }
.akr-wo-composer__link-input:focus { border-color: var(--ink); background: var(--card); }
.akr-wo-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.akr-wo-composer__tools { display: flex; align-items: center; gap: var(--space-3xs); min-width: 0; }
.akr-wo-composer__count { padding-left: var(--space-2xs); color: var(--muted); font: 500 var(--text-xs)/var(--line-height-flat) var(--font-mono); }
.akr-wo-composer__count.is-over { color: var(--bad); }
.akr-wo-composer__hint { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.akr-wo-composer__hint.is-bad { color: var(--bad); }
.akr-wo-composer__hint.is-ok { color: var(--ok); }

/* ---------- tool-btn: Link, File ---------- */
.akr-wo-tool-btn { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--control-s); padding: 0 var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius-full); background: transparent; color: var(--muted); font-size: var(--text-xs); cursor: pointer; transition: var(--transition-fast); }
.akr-wo-tool-btn:hover, .akr-wo-tool-btn[aria-expanded="true"] { border-color: var(--line-strong); color: var(--ink); }
.akr-wo-tool-btn:focus-within { outline: var(--focus-ring-width) solid var(--focus); }

/* ---------- md: rendered Markdown in notes and reports ---------- */
.akr-wo-md { font-size: var(--text-s); line-height: var(--line-height-text); }
.akr-wo-md > :first-child { margin-top: 0; }
.akr-wo-md > :last-child { margin-bottom: 0; }
.akr-wo-md p, .akr-wo-md ul, .akr-wo-md ol, .akr-wo-md blockquote, .akr-wo-md pre, .akr-wo-md__table { margin: 0 0 var(--space-xs); }
.akr-wo-md h3, .akr-wo-md h4, .akr-wo-md h5, .akr-wo-md h6 { margin: var(--space-s) 0 var(--space-2xs); font-size: var(--text-s); }
.akr-wo-md ul, .akr-wo-md ol { padding-left: var(--space-m); }
.akr-wo-md li + li { margin-top: var(--space-3xs); }
.akr-wo-md a { color: var(--gold-ink); text-underline-offset: var(--space-3xs); }
.akr-wo-md code { padding: 0 var(--space-3xs); border-radius: var(--radius-xs); background: var(--track); font-family: var(--font-mono); font-size: var(--text-xs); }
.akr-wo-md pre { padding: var(--space-xs); overflow: auto; border-radius: var(--radius-s); background: var(--track); }
.akr-wo-md pre code { padding: 0; background: none; }
.akr-wo-md blockquote { padding-left: var(--space-xs); border-left: var(--border-strong) solid var(--gold); color: var(--muted); }
.akr-wo-md hr { margin: var(--space-s) 0; border: 0; border-top: 1px solid var(--line); }
.akr-wo-md__table { overflow: auto; }
.akr-wo-md table { border-collapse: collapse; font-size: var(--text-xs); }
.akr-wo-md th, .akr-wo-md td { padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

/* ---------- empty, skeleton, toast ---------- */
.akr-wo-empty { display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-l) var(--space-m); color: var(--muted); font-size: var(--text-s); text-align: center; }
.akr-wo-empty__title { color: var(--ink); font-weight: 600; }
.akr-wo-empty__action { margin-top: var(--space-2xs); }
.akr-wo-skeleton__line { height: var(--control-l); border-top: 1px solid var(--line); background: linear-gradient(90deg, transparent, var(--track), transparent) 0 0 / 200% 100%; animation: skeleton-shimmer var(--duration-shimmer) infinite linear; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
.akr-wo-toast { position: fixed; bottom: calc(var(--space-m) + env(safe-area-inset-bottom)); left: 50%; z-index: var(--z-tooltip); display: flex; align-items: center; gap: var(--space-xs); max-width: calc(100vw - var(--space-m) * 2); padding: var(--space-xs) var(--space-s); border-radius: var(--radius-full); background: var(--ink); color: var(--card); font-size: var(--text-s); box-shadow: var(--shadow); transform: translateX(-50%); }
.akr-wo-toast[hidden] { display: none; }
.akr-wo-toast__action { border: 0; background: none; color: var(--gold); font-weight: 600; cursor: pointer; }

/* ---------- gate: owner sign-in ---------- */
.akr-wo-gate { display: grid; gap: var(--space-xs); max-width: var(--max-width-s); margin: var(--gate-top) auto 0; padding: 0 var(--space-s); text-align: center; }
.akr-wo-gate[hidden] { display: none; }
.akr-wo-gate__title { font-size: var(--text-xl); }
.akr-wo-gate__lead { margin: 0 0 var(--space-2xs); color: var(--muted); }
.akr-wo-gate__input { min-height: var(--control-l); padding: 0 var(--space-s); border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--card); text-align: center; outline: none; }
.akr-wo-gate__input:focus { border-color: var(--ink); }
.akr-wo-gate__submit { min-height: var(--control-l); }
.akr-wo-gate__err { min-height: var(--text-m); margin: 0; color: var(--bad); font-size: var(--text-xs); }

/* ---------- Larger screens (mobile-first: everything above is the phone) ---------- */
@media (min-width: 641px) {
  .akr-wo-top__inner { gap: var(--space-m); }
  .akr-wo-mark__word, .akr-wo-sync { display: inline; }
  .akr-wo-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .akr-wo-stats__item { padding: var(--space-s) var(--space-m); }
  .akr-wo-item { gap: var(--space-xs); padding: var(--space-xs) var(--space-m); }
  .akr-wo-card__pad, .akr-wo-card--pad, .akr-wo-question, .akr-wo-site-card { padding: var(--space-m); }
  .akr-wo-inbox__item { padding: var(--space-s) var(--space-m); }
  .akr-wo-report__summary { padding: var(--space-s) var(--space-m); }
  .akr-wo-report__heading { padding: var(--space-s) var(--space-m) var(--space-3xs); }
  .akr-wo-report__label { padding: var(--space-2xs) var(--space-m) 0; }
  .akr-wo-report__meter { display: block; }
  .akr-wo-search { width: auto; min-width: var(--max-width-s); }
  .akr-wo-site-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-width-s) * 0.54), 1fr)); }
  .akr-wo-sheet { width: min(var(--sheet-width), 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-top: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .akr-wo-sheet[open] { animation-name: sheet-in-side; }
  .akr-wo-sheet__head { padding: var(--space-m) var(--space-m) var(--space-xs); }
  .akr-wo-sheet__context { padding: 0 var(--space-m) var(--space-xs); }
  .akr-wo-thread { padding: var(--space-s) var(--space-m); }
  .akr-wo-composer { padding: var(--space-s) var(--space-m) calc(var(--space-s) + env(safe-area-inset-bottom)); }
}
@keyframes sheet-in-side { from { opacity: 0; transform: translateX(var(--space-m)); } to { opacity: 1; transform: none; } }
@media (min-width: 961px) {
  .akr-wo-layout--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* ---------- revision 29 Oct: eyebrows, icons, labelled fields, collapsible long text ---------- */
.akr-wo-mark__text { display: none; flex-direction: column; gap: var(--space-3xs); }
.akr-wo-mark__word { display: block; }
.akr-wo-mark__tag { display: none; color: var(--muted); font-size: var(--text-xs); line-height: var(--line-height-flat); white-space: nowrap; }
.akr-wo-head__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-2xs); color: var(--gold-ink); font: 700 var(--text-xs)/var(--line-height-flat) var(--font-body); letter-spacing: var(--tracking-label); }
.akr-wo-section__title { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.akr-wo-section__icon { display: inline-grid; place-items: center; width: var(--control-s); height: var(--control-s); border-radius: var(--radius-full); background: var(--gold-soft); color: var(--gold-ink); }
.akr-wo-nav__link svg { flex: none; }
.akr-wo-item__desc { margin: var(--space-3xs) 0 0; color: var(--text); font-size: var(--text-xs); line-height: var(--line-height-snug); }
.akr-wo-fields { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-s); margin-top: var(--space-2xs); }
.akr-wo-field { display: inline-flex; align-items: baseline; gap: var(--space-2xs); font-size: var(--text-xs); }
.akr-wo-field__label { color: var(--muted); font-weight: 700; }
.akr-wo-field__value { color: var(--ink); }
.akr-wo-clamp.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp-lines); }
.akr-wo-clamp__toggle { display: inline-flex; align-items: center; gap: var(--space-3xs); margin-top: var(--space-2xs); padding: 0; border: 0; background: none; color: var(--gold-ink); font: 700 var(--text-xs)/var(--line-height-flat) var(--font-body); cursor: pointer; }
.akr-wo-clamp__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.akr-wo-report__part { border-top: 1px solid var(--line); }
.akr-wo-report__part > .akr-wo-report__heading { display: flex; align-items: center; gap: var(--space-xs); list-style: none; cursor: pointer; padding-bottom: var(--space-s); }
.akr-wo-report__part > .akr-wo-report__heading::-webkit-details-marker { display: none; }
.akr-wo-report__part > .akr-wo-report__heading > span:first-child { flex: 1; }
.akr-wo-report__count { color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.akr-wo-report__part[open] > .akr-wo-report__heading svg { transform: rotate(180deg); }
.akr-wo-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3xs) var(--space-xs); max-width: var(--container-width); margin: 0 auto; padding: var(--space-m) var(--space-s) calc(var(--space-l) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); text-align: center; }
.akr-wo-foot__brand { color: var(--ink); font-weight: 700; }
@media (min-width: 641px) {
  .akr-wo-mark__text { display: flex; }
}
@media (min-width: 961px) {
  .akr-wo-mark__tag { display: block; }
}

/* Logo: mark sized to the two-line text block; name and tagline left-aligned, centred on the mark. */
.akr-wo-mark { gap: var(--space-xs); }
.akr-wo-mark svg { width: var(--control-m); height: var(--control-m); }
.akr-wo-mark__dot { fill: var(--gold); }
.akr-wo-mark__text { display: flex; justify-content: center; align-items: flex-start; text-align: left; }
.akr-wo-mark__word { font: var(--heading-font-weight) var(--text-m)/var(--line-height-flat) var(--font-heading); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.akr-wo-mark__akr { color: var(--ink); }
.akr-wo-mark__ops { color: var(--gold-ink); }
.akr-wo-mark__tag { letter-spacing: var(--tracking-label); }

/* Wordmark only (29 Oct): no icon. The tagline is held to the exact width of the name
   (grid column sized by the name; tagline min-width 100%, width 0) and spread edge to edge. */
.akr-wo-mark__text { display: inline-grid; grid-template-columns: max-content; gap: var(--space-3xs); }
.akr-wo-mark__word { font-size: var(--text-l); line-height: var(--line-height-flat); }
.akr-wo-mark__akr { font-weight: 800; }
.akr-wo-mark__ops { font-weight: 300; }
.akr-wo-mark__tag { display: block; width: 0; min-width: 100%; overflow: hidden; font-size: var(--text-xs); letter-spacing: 0; text-align: justify; text-align-last: justify; white-space: normal; }
.akr-wo-mark__text { font-size: calc(var(--text-m) * 1.4); }
.akr-wo-mark__word { font-size: inherit; }
.akr-wo-mark__tag { display: none; font-size: var(--logo-tag-scale); white-space: nowrap; }
@media (min-width: 641px) {
  .akr-wo-mark__tag { display: block; }
}

/* Ticks (29 Oct): a small square checkbox, not a big ring. */
.akr-wo-tick { width: var(--tick-size); height: var(--tick-size); border-width: 1px; border-color: var(--line-strong); border-radius: var(--radius-xs); background: var(--card); }
.akr-wo-tick:hover { border-color: var(--ok); color: transparent; }
.akr-wo-tick[aria-pressed="true"] { border-color: var(--ok); background: var(--ok); color: var(--card); }
.akr-wo-tick:focus-visible { outline: var(--focus-ring-width) solid var(--focus); outline-offset: var(--focus-ring-offset); }
.akr-wo-tick.akr-wo-tick--readonly:hover { border-color: var(--line-strong); }
.akr-wo-tick--auto, .akr-wo-tick.akr-wo-tick--auto:hover { border-color: var(--line-strong); background: var(--track); color: var(--muted); }
.akr-wo-item__auto { display: block; margin-top: var(--space-3xs); color: var(--muted); font-size: var(--text-xs); }
/* Questions: label first, context second, facts as fields. */
.akr-wo-question__label { margin: 0; color: var(--ink); font: 700 var(--text-m)/var(--line-height-snug) var(--font-heading); overflow-wrap: anywhere; }
.akr-wo-question__desc { color: var(--text); font-size: var(--text-s); line-height: var(--line-height-text); }
.akr-wo-question .akr-wo-fields { margin-top: 0; }
.akr-wo-tick.akr-wo-tick--auto[aria-pressed="true"] { border-color: var(--line-strong); background: var(--track); color: var(--muted); }
/* Phones: tabs move to a bottom bar, icon over a short label, every tab in reach of the thumb. */
.akr-wo-nav { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; padding: var(--space-3xs) var(--space-3xs) calc(var(--space-3xs) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); overflow: visible; }
.akr-wo-nav__link { position: relative; flex-direction: column; justify-content: center; gap: var(--space-3xs); min-height: var(--control-l); padding: var(--space-3xs); border-radius: var(--radius-s); font-size: var(--text-xs); }
.akr-wo-nav__link[aria-current="page"] { box-shadow: none; background: var(--gold-soft); color: var(--ink); }
.akr-wo-nav__text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.akr-wo-nav__link .akr-wo-badge { position: absolute; top: var(--space-3xs); left: 55%; }
.akr-wo-main { padding-bottom: calc(var(--control-l) * 2 + env(safe-area-inset-bottom)); }
/* A backdrop filter would trap the fixed bar inside the header, so phones get a solid header. */
.akr-wo-top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (min-width: 641px) {
  .akr-wo-top { background: color-mix(in oklab, var(--bg) 84%, transparent); backdrop-filter: saturate(1.4) blur(var(--blur-bar)); -webkit-backdrop-filter: saturate(1.4) blur(var(--blur-bar)); }
  .akr-wo-nav { position: static; display: flex; padding: 0; border-top: 0; background: transparent; overflow-x: auto; gap: var(--space-3xs); }
  .akr-wo-nav__link { flex-direction: row; gap: var(--space-2xs); min-height: var(--control-s); padding: 0 var(--space-xs); border-radius: var(--radius-full); font-size: var(--text-s); }
  .akr-wo-nav__link[aria-current="page"] { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
  .akr-wo-nav__link .akr-wo-badge { position: static; }
  .akr-wo-main { padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom)); }
}
/* Phones: a smaller wordmark leaves room for every tab. */
.akr-wo-mark__text { font-size: var(--text-m); }
@media (min-width: 641px) {
  .akr-wo-mark__text { font-size: calc(var(--text-m) * 1.4); }
}
.akr-wo-top__tools { margin-left: auto; }

/* Review home and calls to action (29 Oct). */
.akr-wo-site-card__cta { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--gold-ink); font-size: var(--text-s); font-weight: 700; }
.akr-wo-home-card { text-decoration: none; color: var(--text); }
.akr-wo-home-card:hover { border-color: var(--gold); }
.akr-wo-home-card.is-due { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.akr-wo-home-card__label { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); }
.akr-wo-home-card__value { color: var(--ink); font: 700 var(--text-l)/var(--line-height-snug) var(--font-heading); }
.akr-wo-home-card__sub { color: var(--text); font-size: var(--text-s); }
.akr-wo-report__whole { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin: 0 var(--space-s) var(--space-s); padding: var(--space-s); border-radius: var(--radius-m); background: var(--gold-soft); }
.akr-wo-report__whole-text { display: grid; gap: var(--space-3xs); color: var(--text); font-size: var(--text-s); }
.akr-wo-report__whole-text b { color: var(--ink); }
.akr-wo-btn svg { flex: none; }
.akr-wo-note-btn { white-space: nowrap; }
/* Phones: report feedback sits under the item so the text keeps its width. */
.akr-wo-item--report { flex-wrap: wrap; }
.akr-wo-item--report .akr-wo-item__main { flex: 1 1 0; }
.akr-wo-item--report .akr-wo-item__end { flex-basis: 100%; padding-left: calc(var(--tick-size) + var(--space-2xs)); }
@media (min-width: 641px) {
  .akr-wo-item--report { flex-wrap: nowrap; }
  .akr-wo-item--report .akr-wo-item__end { flex-basis: auto; padding-left: 0; }
}

/* Content table: one row per site, a column per stage (29 Oct). */
.akr-wo-ctable-wrap { overflow-x: auto; }
.akr-wo-ctable { width: 100%; border-collapse: collapse; font-size: var(--text-s); }
.akr-wo-ctable th, .akr-wo-ctable td { padding: var(--space-xs) var(--space-s); border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.akr-wo-ctable thead th { border-top: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); }
.akr-wo-ctable tfoot th, .akr-wo-ctable tfoot td { color: var(--ink); font-weight: 700; background: var(--bg); }
.akr-wo-ctable tr.is-open { background: var(--gold-soft); }
.akr-wo-ctable__num { text-align: right; font-family: var(--font-mono); }
.akr-wo-ctable th.akr-wo-ctable__num, .akr-wo-ctable td.akr-wo-ctable__num { text-align: right; }
.akr-wo-ctable__num.is-zero { color: var(--muted); }
.akr-wo-ctable__num.is-bad { color: var(--bad); font-weight: 700; }
.akr-wo-ctable__bar { min-width: calc(var(--max-width-s) * 0.4); }
.akr-wo-ctable__site { display: grid; gap: var(--space-3xs); padding: 0; border: 0; background: none; color: var(--ink); font: 700 var(--text-s)/var(--line-height-snug) var(--font-body); text-align: left; cursor: pointer; }
.akr-wo-ctable__go { color: var(--gold-ink); font-size: var(--text-xs); }
.akr-wo-icon-btn.is-busy svg { animation: akr-wo-spin var(--duration-shimmer) linear infinite; }
.akr-wo-icon-btn:disabled { opacity: var(--opacity-busy); cursor: default; }
@keyframes akr-wo-spin { to { transform: rotate(360deg); } }
.akr-wo-ctable th, .akr-wo-ctable td { padding: var(--space-xs) var(--space-2xs); }
.akr-wo-ctable th:first-child, .akr-wo-ctable td:first-child { padding-left: var(--space-s); }
.akr-wo-ctable th:last-child, .akr-wo-ctable td:last-child { padding-right: var(--space-s); }
.akr-wo-ctable__bar { min-width: calc(var(--max-width-s) * 0.25); }
.akr-wo-ctable thead th { font-family: var(--font-body); }
/* Phones: drop the bar column so the table fits; the Live count carries progress. */
.akr-wo-ctable tr > :nth-child(2) { display: none; }
.akr-wo-ctable { font-size: var(--text-xs); }
@media (min-width: 641px) {
  .akr-wo-ctable tr > :nth-child(2) { display: table-cell; }
  .akr-wo-ctable { font-size: var(--text-s); }
}
.akr-wo-ctable th:first-child { white-space: normal; }
.akr-wo-ctable th, .akr-wo-ctable td, .akr-wo-ctable th:first-child, .akr-wo-ctable td:first-child, .akr-wo-ctable th:last-child, .akr-wo-ctable td:last-child { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.akr-wo-ctable th:first-child, .akr-wo-ctable td:first-child { padding-left: var(--space-xs); }
@media (min-width: 641px) {
  .akr-wo-ctable th, .akr-wo-ctable td { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
  .akr-wo-ctable th:first-child, .akr-wo-ctable td:first-child { padding-left: var(--space-s); }
  .akr-wo-ctable th:last-child, .akr-wo-ctable td:last-child { padding-right: var(--space-s); }
}
.akr-wo-head__copy { flex: none; }
.akr-wo-notice--link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--text); }
.akr-wo-notice--link .akr-wo-site-card__cta { margin-left: auto; }

/* What to do here, Start Here, AI help (29 Oct). */
.akr-wo-guide { display: grid; gap: var(--space-xs); padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card); }
.akr-wo-guide--compact { padding: var(--space-xs) var(--space-s); }
.akr-wo-guide__head { display: flex; align-items: center; gap: var(--space-2xs); color: var(--text); font-size: var(--text-s); }
.akr-wo-guide__head b { color: var(--ink); }
.akr-wo-guide__steps { display: grid; gap: var(--space-3xs); margin: 0; padding-left: var(--space-m); color: var(--text); font-size: var(--text-s); line-height: var(--line-height-snug); }
.akr-wo-guide__ai { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--line); }
.akr-wo-guide--compact .akr-wo-guide__ai { padding-top: 0; border-top: 0; }
.akr-wo-guide__ai-text { display: grid; gap: var(--space-3xs); flex: 1 1 0; min-width: calc(var(--max-width-s) * 0.5); color: var(--muted); font-size: var(--text-xs); }
.akr-wo-guide__ai-text b { color: var(--ink); font-size: var(--text-s); }
.akr-wo-start { display: grid; gap: var(--space-2xs); padding: var(--space-m); border: 1px solid var(--gold); border-radius: var(--radius-l); background: var(--gold-soft); color: var(--text); text-decoration: none; }
.akr-wo-start__label { color: var(--gold-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); }
.akr-wo-start__title { color: var(--ink); font: 700 var(--text-xl)/var(--line-height-snug) var(--font-heading); }
.akr-wo-start__sub { font-size: var(--text-s); }
.akr-wo-start__btn { justify-self: start; margin-top: var(--space-2xs); }
.akr-wo-tool-btn--ai { color: var(--gold-ink); font-weight: 700; }
.akr-wo-tool-btn--ai { justify-content: center; width: 100%; margin-bottom: var(--space-2xs); border-style: dashed; }
.akr-wo-tool-btn__note { color: var(--muted); font-weight: 400; }