/* Oris Design System (F43) — the tokens and the o-* components both surfaces are built of: one look, one family of
   classes (BEM-like: .o-block, .o-block__part, .o-block--variant). From the design's tokens.css and components/bundle.css
   (the Claude Design canvas "Oris — felület újratervezés"), with what the live pages need besides. Hand-written, no build
   step. One meaning, one colour: green done / works · amber waits for you — always · red error / stuck · blue runs /
   information · grey waits, queued, not begun, over. The red header is the operator's — never a state. */

:root, [data-theme="light"] {
  --bg-page: #f5f6f8; --bg-surface: #ffffff; --bg-subtle: #f0f2f5; --border: #e2e5ea; --border-strong: #a9b0bb;
  --text: #18202e; --text-muted: #545d6d; --text-subtle: #667085;
  --primary: #13203b; --primary-hover: #22345c; --on-primary: #ffffff; --link: #1c47c4; --focus: #2f6bea;
  --header-po: #13203b; --header-po-muted: #b9c3d8; --header-op: #9f1a1e; --header-op-muted: #f7d2d3;
  --ok-fg: #11643c; --ok-bg: #e5f4eb; --ok-dot: #1e9e5a;
  --wait-fg: #8a4500; --wait-bg: #fff2d9; --wait-dot: #e58a00; --wait-border: #f0c36a;
  --err-fg: #a8221a; --err-bg: #fcebe9; --err-dot: #d92d20;
  --run-fg: #1c47c4; --run-bg: #e8eefd; --run-dot: #2f6bea;
  --idle-fg: #4a5361; --idle-bg: #eef0f3; --idle-dot: #98a1ae;
  --shadow-overlay: 0 12px 32px rgba(16, 24, 40, 0.18);
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --header-height: 56px; --help-width: 440px; --control-height: 40px;
  /* Inter and JetBrains Mono where the machine has them, else its own: the browsers never ask an outside font service */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
html, body { margin: 0; }
.o-app { min-height: 100vh; background: var(--bg-page); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 22px; -webkit-font-smoothing: antialiased; }
.o-app *, .o-app *::before, .o-app *::after { box-sizing: border-box; }
/* :where() keeps these as weak as a bare element's rule — the pages of before keep their own spacing until rebuilt */
:where(.o-app) h1, :where(.o-app) h2, :where(.o-app) h3, :where(.o-app) p { margin: 0; }
:where(.o-app) a { color: var(--link); text-decoration: none; }
:where(.o-app) a:hover { text-decoration: underline; }
.o-app :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.o-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.o-muted { color: var(--text-muted); }
.o-subtle { color: var(--text-subtle); font-size: 13px; }
/* what a page hides stays hidden, whatever its component shows it as */
.o-app [hidden] { display: none !important; }
/* E155: a step's form says its own error — the page's line of it stays hidden */
body:has([data-step-error]) [data-page-error] { display: none; }
/* a Livewire button while its request runs */
.o-app [data-loading].o-btn { opacity: .7; cursor: progress; }
.o-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.o-hstack { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.o-grow { flex: 1 1 auto; min-width: 0; }
.o-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── header + menu ───────────────────────────────────────────────────────── */
.o-header { position: sticky; top: 0; z-index: 30; background: var(--header-po); color: var(--on-primary); }
.o-header--op { background: var(--header-op); }
/* F43, E314: the header, the page and the operator's band as wide as the window (E116) */
.o-header__bar { padding: 0 var(--space-6); min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-5); }
.o-logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; color: var(--on-primary); white-space: nowrap; }
.o-app .o-logo, .o-app .o-logo:hover { color: var(--on-primary); text-decoration: none; }
/* F43, E309: the mark (partials.logo) — its colour the text's, the bead another where the page has room for colour */
.o-logo__mark { width: 24px; height: 24px; flex: none; display: block; }
/* E310: while Oris works the bead goes round its ring, slowly (the operator's header: o-logo--busy; the PO's: the live
   poll's data-po-busy, so it starts and stops without a reload) — never for someone who asked for less motion */
@keyframes o-orbit { to { transform: rotate(360deg); } }
.o-logo--busy .o-logo__mark, body[data-po-busy="1"] .o-logo .o-logo__mark { animation: o-orbit 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .o-logo--busy .o-logo__mark, body[data-po-busy="1"] .o-logo .o-logo__mark { animation: none; } }
.o-logo__surface { font-weight: 500; font-size: 13px; color: var(--header-po-muted); }
.o-header--op .o-logo__surface { color: var(--header-op-muted); }
.o-logo__version { font-weight: 500; font-size: 12px; color: var(--header-po-muted); font-variant-numeric: tabular-nums; }
.o-header--op .o-logo__version { color: var(--header-op-muted); }
.o-nav { display: flex; align-items: stretch; gap: var(--space-1); align-self: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.o-nav::-webkit-scrollbar { display: none; }
.o-app .o-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-3); color: var(--header-po-muted); font-weight: 500; border-bottom: 3px solid transparent; border-top: 3px solid transparent; white-space: nowrap; text-decoration: none; }
.o-app .o-header--op .o-nav a { color: var(--header-op-muted); }
.o-app .o-nav a:hover { color: var(--on-primary); }
.o-app .o-nav a[aria-current="page"] { color: var(--on-primary); border-bottom-color: var(--on-primary); }
.o-header__right { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; white-space: nowrap; }
.o-header__right form { margin: 0; }
.o-header__ctx { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.10); color: var(--on-primary); font-weight: 500; border: 0; font: inherit; font-size: 13px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.o-app a.o-header__ctx { color: var(--on-primary); text-decoration: none; }
.o-app a.o-header__ctx:hover { background: rgba(255, 255, 255, 0.18); }
select.o-header__ctx { appearance: none; -webkit-appearance: none; padding-right: 26px; background: rgba(255, 255, 255, 0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px; }
select.o-header__ctx option { color: var(--text); background: var(--bg-surface); }
/* E316: a page of every company's: the header names no company — a quiet mark, nothing to choose */
.o-header__ctx--all { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }
.o-header__state { display: inline-flex; align-items: center; gap: 6px; color: var(--header-po-muted); font-weight: 500; }
.o-header--op .o-header__state { color: var(--header-op-muted); }
.o-app a.o-header__state { color: inherit; text-decoration: none; }
.o-app a.o-header__state:hover { color: var(--on-primary); }
.o-header__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ccf7f; flex: none; }
.o-header__state--wait::before { background: var(--wait-dot); }
.o-header__state--err::before { background: #ff6b5f; }
.o-header__user { color: var(--header-po-muted); }
.o-header--op .o-header__user { color: var(--header-op-muted); }
.o-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--wait-dot); color: #1a1200; font-size: 12px; font-weight: 700; line-height: 1; }
.o-count--err { background: var(--err-dot); color: #ffffff; }
.o-count--quiet { background: rgba(255, 255, 255, 0.18); color: var(--on-primary); }
.o-count--info { background: var(--run-bg); color: var(--run-fg); }
/* E314: the menu on a row of its own when the header's row has no room for it — never cut off (partials.header-fit) */
@media (min-width: 901px) {
  .o-header--stacked .o-header__bar { flex-wrap: wrap; gap: 0 var(--space-3); }
  .o-header--stacked .o-header__right { margin-left: auto; min-height: var(--header-height); }
  .o-header--stacked .o-nav { order: 3; flex-basis: 100%; height: 44px; margin: 0 calc(-1 * var(--space-6)); padding: 0 calc(var(--space-6) - var(--space-3)); }
}
@media (max-width: 900px) {
  .o-header__bar { flex-wrap: wrap; padding: 0 var(--space-4); gap: 0 var(--space-3); }
  /* E317: the company, the project, the state and the rest wrap rather than run off a phone's screen */
  .o-header__right { margin-left: auto; min-height: var(--header-height); flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; padding: 6px 0; }
  .o-nav { order: 3; flex-basis: 100%; height: 44px; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-2); }
  .o-header__user-name { display: none; }
}


/* A menu that opens under its button (the user's, a row's "⋯"): a <details>, no script */
.o-menu { position: relative; display: inline-block; }
.o-menu > summary { list-style: none; cursor: pointer; }
.o-menu > summary::-webkit-details-marker { display: none; }
.o-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; padding: 6px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.o-menu__list form { margin: 0; display: block; }
.o-menu__item, .o-app a.o-menu__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.o-menu__item:hover, .o-app a.o-menu__item:hover { background: var(--bg-subtle); text-decoration: none; }
.o-menu__item--danger, .o-app a.o-menu__item--danger { color: var(--err-fg); }
.o-menu__sep { height: 1px; margin: 4px 0; background: var(--border); }
.o-menu__note { padding: 6px 10px; font-size: 12px; color: var(--text-subtle); }

/* ── the operator's band (an operator on a company's PO surface) ─────────── */
.o-opband { background: var(--wait-bg); border-bottom: 1px solid var(--wait-border); color: var(--wait-fg); font-size: 13px; }
.o-opband__in { padding: 8px var(--space-6); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.o-opband b, .o-opband strong { color: var(--text); }
.o-opband form { margin: 0; }
.o-opband select { height: 30px; padding: 0 8px; border: 1px solid var(--wait-border); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text); font: inherit; font-size: 13px; }

/* ── page + its head ─────────────────────────────────────────────────────── */
.o-page { padding: var(--space-6) var(--space-6) 80px; display: flex; flex-direction: column; gap: var(--space-5); }
.o-pagehead { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.o-pagehead__main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.o-crumb { font-size: 13px; color: var(--text-subtle); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.o-title { margin: 0; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.o-display { margin: 0; font-size: 28px; line-height: 36px; font-weight: 650; letter-spacing: -0.01em; }
.o-sub { margin: 0; color: var(--text-muted); }
.o-meta { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; font-size: 13px; color: var(--text-subtle); }
.o-pagehead__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.o-pagehead__actions form { margin: 0; }

/* ── the state: colour + word (+ dot) ────────────────────────────────────── */
.o-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--idle-bg); color: var(--idle-fg); }
.o-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--idle-dot); flex: none; }
.o-status--ok { background: var(--ok-bg); color: var(--ok-fg); } .o-status--ok::before { background: var(--ok-dot); }
.o-status--wait { background: var(--wait-bg); color: var(--wait-fg); } .o-status--wait::before { background: var(--wait-dot); }
.o-status--err { background: var(--err-bg); color: var(--err-fg); } .o-status--err::before { background: var(--err-dot); }
.o-status--run { background: var(--run-bg); color: var(--run-fg); } .o-status--run::before { background: var(--run-dot); animation: o-pulse 1.6s ease-in-out infinite; }
.o-status--plain { background: transparent; padding: 0; height: auto; }
.o-status--lg { height: 28px; font-size: 14px; padding: 0 12px 0 10px; }
.o-status--sm { height: 20px; font-size: 12px; padding: 0 8px 0 6px; }
@keyframes o-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* A neutral tag (a size, a count, a source) — one kind */
.o-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.o-tag--solid { background: var(--bg-subtle); border-color: transparent; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.o-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.o-app a.o-btn { color: var(--text); text-decoration: none; }
.o-btn:hover { background: var(--bg-subtle); }
.o-btn--primary, .o-app a.o-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.o-btn--primary:hover, .o-app a.o-btn--primary:hover { background: var(--primary-hover); }
.o-btn--ghost, .o-app a.o-btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.o-btn--ghost:hover { background: var(--bg-subtle); color: var(--text); }
.o-btn--danger, .o-app a.o-btn--danger { background: var(--bg-surface); border-color: var(--err-fg); color: var(--err-fg); }
.o-btn--danger:hover { background: var(--err-bg); }
.o-btn--ok, .o-app a.o-btn--ok { background: var(--ok-dot); border-color: var(--ok-dot); color: #ffffff; }
.o-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.o-btn--icon { width: var(--control-height); padding: 0; }
.o-btn--sm.o-btn--icon { width: 32px; }
.o-btn--block { width: 100%; white-space: normal; overflow-wrap: anywhere; height: auto; min-height: var(--control-height); padding-top: 6px; padding-bottom: 6px; text-align: center; }
.o-btn[disabled], .o-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.o-btn svg, .o-btn .icon { width: 16px; height: 16px; flex: none; }
.o-header .o-btn--icon { width: 32px; height: 32px; border: 0; background: transparent; color: inherit; }
.o-header .o-btn--icon:hover { background: rgba(255, 255, 255, 0.14); }

/* ── panel + band ────────────────────────────────────────────────────────── */
.o-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.o-panel--visible { overflow: visible; }
.o-panel__head { display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.o-panel__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.o-panel__head .o-panel__aside { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.o-panel > .o-panel__head:last-child { border-bottom: 0; }
.o-panel__body { padding: var(--space-4); }
.o-panel__foot { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.o-panel__foot--end { justify-content: flex-end; }
/* E324: the dashboard starting again: said over the page, under the header */
.o-away { position: fixed; top: calc(var(--header-height) + 12px); left: 50%; transform: translateX(-50%); z-index: 40; width: max-content; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(16, 24, 40, .16); }
/* E318: a long form's save stays in reach — its foot (or a bar of its own) sticks to the window's bottom while the form
   runs on below it; the help's button steps up above it (partials.sticky-foot) */
.o-panel:has(.o-panel__foot--sticky) { overflow: clip; }
.o-panel__foot--sticky, .o-savebar { position: sticky; bottom: 0; z-index: 5; background: var(--bg-surface); box-shadow: 0 -10px 18px -16px rgba(16, 24, 40, .45); }
.o-savebar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.o-panel__foot--end > .o-error { margin-right: auto; }
/* a foot's words wrap first; its buttons stay side by side (.o-actions: together, moving under the words only when the
   line has no room for them) */
.o-panel__foot > .o-grow { flex: 1 1 260px; }
.o-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); flex: 0 0 auto; max-width: 100%; }
.o-panel--wait { border-color: var(--wait-border); }
.o-panel--wait > .o-panel__head { background: var(--wait-bg); border-bottom-color: var(--wait-border); }
.o-panel--err { border-color: var(--err-dot); }
.o-panel--err > .o-panel__head { background: var(--err-bg); border-bottom-color: var(--err-dot); }
details.o-panel > summary { list-style: none; cursor: pointer; }
details.o-panel > summary::-webkit-details-marker { display: none; }
details.o-panel > summary.o-panel__head { border-bottom: 0; }
details.o-panel[open] > summary.o-panel__head { border-bottom: 1px solid var(--border); }
details.o-panel > summary .o-panel__title::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--text-subtle); border-bottom: 2px solid var(--text-subtle); transform: rotate(-45deg); transition: transform .12s; }
details.o-panel[open] > summary .o-panel__title::after { transform: rotate(45deg); }
.o-band { padding: 8px var(--space-4); background: var(--bg-subtle); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-subtle); display: flex; gap: var(--space-2); align-items: center; }
.o-band:first-child { border-top: 0; }
h2.o-band, h3.o-band { margin: 0; }
.o-band__aside { margin-left: auto; font-weight: 400; letter-spacing: 0; text-align: right; }
.o-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.o-cols--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* F43, E297: the operator's forms — a row of fields ending in its button, a whole config, a diff, a repo's and a model's
   row, a field switched off with what it depends on, a step of the new-project wizard */
.o-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.o-form-row > .o-field { flex: 1 1 220px; }
.o-nowrap { white-space: nowrap; }
.o-app .o-yaml { min-height: 560px; font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; white-space: pre; overflow: auto; }
.o-diff span { display: block; }
.o-diff .add { background: var(--ok-bg); color: var(--ok-fg); }
.o-diff .del { background: var(--err-bg); color: var(--err-fg); }
.o-diff .same { color: var(--text-subtle); }
.o-danger-zone { background: var(--bg-subtle); border-top: 1px solid var(--border); }
.o-range__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.o-range__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.o-bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.o-repo-row { display: grid; grid-template-columns: minmax(120px, 180px) 140px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
/* E318: a repo's row is a grid even as a row of a list (.o-row, later in the sheet, is a flex — its name squeezed); a repo
   being added (the wizard's) has nothing to take it out with */
.o-row.o-repo-row { display: grid; }
.o-repo-row--new { grid-template-columns: minmax(120px, 180px) 140px minmax(0, 1fr); }
.o-model-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 180px; gap: var(--space-3); align-items: end; }
.o-field.is-off { opacity: .55; }
.o-stepper { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-subtle); }
.o-stepper li { display: inline-flex; align-items: center; gap: 8px; }
.o-stepper li > span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--bg-subtle); border: 1px solid var(--border); }
.o-stepper li.is-current { color: var(--text); font-weight: 600; }
.o-stepper li.is-current > span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.o-stepper li.is-done > span { background: var(--ok-bg); border-color: transparent; color: var(--ok-fg); }
@media (max-width: 720px) {
    .o-repo-row, .o-repo-row--new, .o-model-row { grid-template-columns: minmax(0, 1fr); }
}
/* F43, E297: a skill's files beside the one open; a button that reads as a link; a file dropped or picked; a long list
   that scrolls; a folded panel whose head is its summary */
.o-cols--files { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.o-files-nav .o-row { min-height: 40px; padding: 6px var(--space-4); }
.o-files-nav .o-row[aria-current="true"] { background: var(--bg-subtle); }
.o-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.o-linkbtn:hover { text-decoration: underline; }
.o-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 28px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-muted); font-size: 13px; text-align: center; cursor: pointer; }
.o-dropzone strong { color: var(--text); font-size: 14px; }
.o-dropzone:hover, .o-dropzone.has-file { border-color: var(--primary); }
.o-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.o-list--scroll { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
details.o-panel > summary.o-panel__head { list-style: none; }
details.o-panel > summary.o-panel__head::-webkit-details-marker { display: none; }
details.o-panel:not([open]) > summary.o-panel__head { border-bottom: 0; }
@media (max-width: 900px) { .o-cols--files { grid-template-columns: minmax(0, 1fr); } }
/* F43, E299: a number with its − and + (the pool's size) */
.o-stepper-num { display: inline-flex; align-items: center; gap: var(--space-2); }
.o-stepper-num__value { min-width: 72px; text-align: center; font-size: 15px; }
/* F43, E300: readiness marks in words — ✓ ready, ✗ missing, ? unknown, – not asked (a machine's Gép, Claude, GitHub, Kívülről) */
.o-marks { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.o-mark { font-weight: 600; white-space: nowrap; color: var(--text-subtle); }
.o-mark--ok { color: var(--ok-fg); }
.o-mark--no { color: var(--err-fg); }
.o-mark--unknown { color: var(--wait-fg); }
.o-mark--none { color: var(--text-subtle); }
.o-step-fold > summary { list-style: none; }
.o-step-fold > summary::-webkit-details-marker { display: none; }
.o-list > li:first-child > .o-step-fold > summary.o-row { border-top: 0; }
/* F43, E301: the Infrastruktúra's map — the people, the control and the machines (each with its tunnel), the services outside */
.o-infra { display: grid; }
.o-infra__users, .o-infra__outside-wrap { display: grid; justify-items: start; }
.o-infra.is-split .o-infra__users { width: calc((100% - 150px) / 2); }
.o-infra.is-split .o-infra__outside-wrap { margin-left: calc((100% + 150px) / 2); }
.o-infra-actor { display: grid; gap: 1px; min-width: 240px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); font-size: 13px; color: var(--text-muted); }
.o-infra-actor strong { color: var(--text); font-size: 14px; }
.o-infra-actor .o-mono { color: var(--text-subtle); overflow-wrap: anywhere; }
.o-infra-flow { position: relative; display: flex; align-items: center; height: 46px; margin-left: 36px; padding-left: 14px; color: var(--text-subtle); font-size: 12px; }
.o-infra-flow::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 9px; border-left: 1.5px solid var(--border-strong); }
.o-infra-flow::after { content: ""; position: absolute; left: -4.25px; bottom: 3px; border: 5px solid transparent; border-top: 7px solid var(--border-strong); border-bottom: 0; }
.o-infra__zones { display: grid; grid-template-columns: minmax(0, 1fr); }
.o-infra.is-split .o-infra__zones { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: stretch; row-gap: 12px; }
.o-infra.is-split .o-infra-zone.is-control { grid-column: 1; }
.o-infra.is-split .o-infra-tunnel { grid-column: 2; }
.o-infra.is-split .o-infra-zone.is-site { grid-column: 3; }
.o-infra-zone { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.o-infra-zone.is-site { background: var(--bg-page); border-color: var(--border-strong); }
.o-infra-zone > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 12px; font-size: 13px; color: var(--text-subtle); }
.o-infra-zone > header strong { color: var(--text); font-size: 15px; }
.o-infra-zone > header .o-btn { margin-left: auto; }
.o-infra__nodes, .o-infra__outside { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }
.o-infra__outside { width: 100%; }
.o-app .o-infra-node { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text); text-decoration: none; }
.o-app .o-infra-node:hover { text-decoration: none; border-color: var(--border-strong); }
.o-infra__outside .o-infra-node { border-style: dashed; border-color: var(--border-strong); }
.o-infra-node__head { display: flex; align-items: center; gap: 7px; }
.o-infra-node__head strong { font-size: 14px; }
.o-infra-node__what { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.o-infra-node__detail { color: var(--text-subtle); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.o-app .o-infra-node.is-warn { border-color: var(--wait-border); background: var(--wait-bg); }
.o-app .o-infra-node.is-down { border-color: var(--err-dot); background: var(--err-bg); }
.o-infra-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--idle-dot); }
.is-ok > .o-infra-dot, .is-ok .o-infra-node__head .o-infra-dot { background: var(--ok-dot); }
.is-warn > .o-infra-dot, .is-warn .o-infra-node__head .o-infra-dot { background: var(--wait-dot); }
.is-down > .o-infra-dot, .is-down .o-infra-node__head .o-infra-dot { background: var(--err-dot); }
.o-infra-tunnel { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 0 10px; color: var(--text-subtle); font-size: 12px; text-align: center; }
.o-infra-tunnel strong { color: var(--text); font-size: 13px; }
.o-infra-tunnel__arrow { position: relative; width: 100%; height: 12px; }
.o-infra-tunnel__arrow::before { content: ""; position: absolute; left: 8px; right: 0; top: 50%; border-top: 1.5px solid var(--border-strong); }
.o-infra-tunnel__arrow::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right: 8px solid var(--border-strong); border-left: 0; }
.o-infra-tunnel.is-down .o-infra-tunnel__arrow::before { border-top: 1.5px dashed var(--err-dot); }
.o-infra-tunnel.is-down .o-infra-tunnel__arrow::after { border-right-color: var(--err-dot); }
.o-infra-workers { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.o-infra-workers__head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; }
.o-infra-workers__head a { margin-left: auto; font-weight: 500; }
.o-infra-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 900px) {
    .o-infra.is-split .o-infra__users { width: auto; }
    .o-infra.is-split .o-infra__outside-wrap { margin-left: 0; }
    .o-infra.is-split .o-infra__zones { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .o-infra.is-split .o-infra-zone.is-control, .o-infra.is-split .o-infra-tunnel, .o-infra.is-split .o-infra-zone.is-site { grid-column: auto; grid-row: auto !important; }
    .o-infra-tunnel { padding: 6px 0; }
    .o-infra-tunnel__arrow { width: 12px; height: 30px; }
    .o-infra-tunnel__arrow::before { left: 50%; right: auto; top: 8px; bottom: 0; border-top: 0; border-left: 1.5px solid var(--border-strong); }
    .o-infra-tunnel__arrow::after { left: 50%; top: 0; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 8px solid var(--border-strong); border-top: 0; }
    .o-infra-tunnel.is-down .o-infra-tunnel__arrow::before { border-top: 0; border-left: 1.5px dashed var(--err-dot); }
    .o-infra-tunnel.is-down .o-infra-tunnel__arrow::after { border-right-color: transparent; border-bottom-color: var(--err-dot); }
}
/* F43, E302: an operator's update under way — a thin bar on the window's top (the pages' own refreshes show none) */
.o-busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; overflow: hidden; background: transparent; }
.o-busy::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--run-dot); animation: o-busy 1.1s ease-in-out infinite; }
.o-busy[hidden] { display: none; }
@keyframes o-busy { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .o-busy::before { animation-duration: 3s; } }
.o-worker-note__full { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* F43, E303: the card's and the feature's technical parts — a heading between a page's groups of panels, a plain list, a
   group folded inside a panel, an acceptance item, a timeline's step, a file list */
.o-section-title { margin: var(--space-3) 0 0; font-size: 18px; line-height: 26px; font-weight: 650; }
.o-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.o-subfold { border-top: 1px solid var(--border); }
.o-subfold:first-child { border-top: 0; }
.o-subfold > summary { list-style: none; cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14px; }
.o-subfold > summary::-webkit-details-marker { display: none; }
.o-subfold > summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--text-subtle); }
.o-subfold[open] > summary::before { content: "▾"; }
.o-acc-item { padding: 12px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.o-subfold .o-acc-item:first-of-type { border-top: 0; padding-top: 4px; }
.o-acc-item p { margin: 0; }
.o-acc-item ol, .o-acc-item ul { margin: 2px 0 0; padding-left: 20px; font-size: 13px; }
.o-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.o-steps { list-style: none; margin: 0; padding: 0; }
.o-steps > li { display: grid; grid-template-columns: 64px minmax(0, auto) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.o-steps > li:first-child { border-top: 0; }
.o-steps > li.is-sub { padding-left: 24px; }
.o-steps > li.is-gap { display: block; }
.o-steps > li.is-gap > details > summary { cursor: pointer; color: var(--text-muted); }
.o-steps time { font-size: 13px; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-steps details > summary { cursor: pointer; }
.o-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.o-tone--err { color: var(--err-fg); }
.o-tone--wait { color: var(--wait-fg); }
.o-limits > summary { cursor: pointer; }
@media (max-width: 720px) {
    .o-two { grid-template-columns: minmax(0, 1fr); }
    .o-steps > li { grid-template-columns: 52px minmax(0, 1fr); }
    .o-steps > li > :last-child { grid-column: 1 / -1; }
}
/* F43, E297: a page with a menu of its own on the left (the operator's settings) */
.o-settings { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.o-app input[type="file"].o-file { border: 0; padding: 0; background: none; font-size: 14px; max-width: 100%; }
.o-settings__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.o-sidenav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-4); }
.o-sidenav__group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: var(--space-4) 12px 6px; margin-top: var(--space-3); border-top: 1px solid var(--border); cursor: default; }
.o-sidenav__group:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.o-sidenav__note { font-size: 13px; color: var(--text-muted); padding: 4px 12px 8px; }
.o-app .o-sidenav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; }
.o-app .o-sidenav a:hover { background: var(--bg-subtle); color: var(--text); }
.o-app .o-sidenav a[aria-current="page"] { background: var(--bg-surface); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 900px) {
    .o-settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .o-sidenav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .o-sidenav__group { width: 100%; padding: 10px 4px 2px; margin-top: 6px; }
}
/* a side column that comes first on a narrow screen (an environment before the use cases tried in it) */
@media (max-width: 900px) { .o-cols > .o-cols__top { order: -1; } }
/* what only a phone needs (a wide screen has it beside) */
.o-app .o-only-phone { display: none; }
@media (max-width: 900px) { .o-app .o-only-phone { display: flex; } }
@media (max-width: 900px) {
  .o-cols, .o-cols--half { grid-template-columns: minmax(0, 1fr); }
  .o-page { padding: var(--space-4) var(--space-4) 72px; }
}

/* ── rows + the row of a to-do ───────────────────────────────────────────── */
.o-list { list-style: none; margin: 0; padding: 0; }
.o-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); min-height: 56px; }
.o-list > .o-row:first-child, .o-list > li:first-child > .o-row { border-top: 0; }
.o-app a.o-row { color: inherit; text-decoration: none; }
.o-app a.o-row:hover { background: var(--bg-subtle); }
/* E322: a row to choose — the whole row the button, a chevron at its end; a link of its own beside it */
.o-pick { display: flex; align-items: center; border-top: 1px solid var(--border); }
.o-list > .o-pick:first-child { border-top: 0; }
.o-app .o-pick__choice { flex: 1 1 auto; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.o-app .o-pick__choice:hover { background: var(--bg-subtle); }
.o-app .o-pick__choice:focus-visible { outline-offset: -2px; }
.o-pick__label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-pick__choice::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 6px; border-right: 2px solid var(--text-subtle); border-bottom: 2px solid var(--text-subtle); transform: rotate(-45deg); }
.o-pick__choice:hover::after { border-color: var(--text); }
.o-pick__open { flex: none; padding: 0 var(--space-4); font-size: 13px; }
.o-row__id { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-subtle); width: 72px; flex: none; overflow-wrap: anywhere; }
.o-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-row__title { font-weight: 600; overflow-wrap: anywhere; }
.o-row__sum { font-size: 13px; line-height: 20px; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.o-row__sum--full { -webkit-line-clamp: unset; display: block; }
.o-row__end { display: flex; align-items: center; gap: var(--space-3); flex: none; flex-wrap: wrap; justify-content: flex-end; }
.o-row__end form { margin: 0; }
.o-row__time { font-size: 13px; color: var(--text-subtle); white-space: nowrap; min-width: 48px; text-align: right; }
/* a row with a button of its own: the row leads to its page through its title's link, stretched over it — the buttons stay theirs */
.o-row--link { position: relative; }
.o-app .o-row--link:has(.o-row__link:hover) { background: var(--bg-subtle); }
.o-app .o-row__link { color: inherit; text-decoration: none; }
.o-row__link::after { content: ""; position: absolute; inset: 0; }
.o-app .o-row__link:focus-visible { outline: 0; }
.o-app .o-row__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }
.o-row--link .o-row__end :is(a, button, form) { position: relative; z-index: 1; }
/* E379: a form a file is dragged over (a finding's, a feature's conversation): where it lands */
form.is-drop { outline: 2px dashed var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.o-todo { position: relative; padding-left: 20px; }
.o-todo::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--wait-dot); }
.o-todo--err::before { background: var(--err-dot); }
@media (max-width: 640px) { .o-row { flex-wrap: wrap; } .o-row__end { width: 100%; justify-content: space-between; } .o-row__id { width: auto; } }

/* A log line: time · what · who */
.o-log { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); padding: 10px var(--space-4); border-top: 1px solid var(--border); align-items: baseline; }
.o-log__time { font-size: 13px; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-log__who { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.o-list > .o-log:first-child { border-top: 0; }
.o-log--dated { grid-template-columns: 112px minmax(0, 1fr) auto; }
.o-log .o-live { margin-top: 6px; }
.o-table td .o-live { margin-top: 6px; }
@media (max-width: 640px) { .o-log { grid-template-columns: 48px minmax(0, 1fr); } .o-log__who { grid-column: 2; } .o-log.o-log--dated { grid-template-columns: 92px minmax(0, 1fr); } }

/* ── table ───────────────────────────────────────────────────────────────── */
.o-table-wrap { overflow-x: auto; }
.o-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.o-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-subtle); padding: 10px var(--space-4); background: var(--bg-subtle); border-bottom: 1px solid var(--border); white-space: nowrap; }
.o-table td { padding: 12px var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.o-table tr:last-child td { border-bottom: 0; }
.o-table td.o-num, .o-table th.o-num { text-align: right; font-variant-numeric: tabular-nums; }
.o-table .o-table__sub { display: block; font-size: 13px; color: var(--text-muted); }
.o-table tr.o-table__band > th { border-top: 1px solid var(--border); }
.o-table tr.o-table__band > th > span { margin-left: 8px; font-weight: 400; letter-spacing: 0; white-space: normal; }
.o-table tr.is-proposed > td { background: var(--wait-bg); }
.o-table tr.is-proposed:has(+ tr.is-actions) > td { border-bottom: 0; }
/* a table that turns into a list on a phone: its first cell the row's name, every other one saying its column (data-label) */
@media (max-width: 640px) {
    .o-table--stack thead { display: none; }
    .o-table--stack, .o-table--stack tbody, .o-table--stack tr, .o-table--stack td { display: block; width: 100%; }
    .o-table--stack tr { padding: 12px var(--space-4); border-bottom: 1px solid var(--border); }
    .o-table--stack tr:last-child { border-bottom: 0; }
    .o-table--stack td, .o-table--stack tr:last-child td { padding: 3px 0; border: 0; white-space: normal !important; }
    .o-table--stack td:first-child { font-weight: 600; padding-bottom: 6px; }
    .o-table--stack td[data-label] { display: flex; gap: 12px; align-items: baseline; }
    .o-table--stack td[data-label]::before { content: attr(data-label); flex: 0 0 104px; font-size: 12px; color: var(--text-subtle); }
    .o-table--stack td.o-table__none { display: none; }
}

/* ── form controls ───────────────────────────────────────────────────────── */
.o-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.o-label { font-size: 13px; font-weight: 600; color: var(--text); }
.o-hint { font-size: 13px; color: var(--text-subtle); }
.o-error { font-size: 13px; color: var(--err-fg); }
.o-input, .o-select, .o-textarea { width: 100%; height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text); font: inherit; font-size: 14px; }
.o-textarea { height: auto; min-height: 96px; padding: 10px var(--space-3); line-height: 22px; resize: vertical; }
.o-input:focus, .o-select:focus, .o-textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.o-input[readonly] { background: var(--bg-subtle); }
.o-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 500; }
.o-switch input, .o-app .o-switch input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--border-strong); position: relative; margin: 0; cursor: pointer; flex: none; }
.o-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: left .15s; }
.o-switch input:checked, .o-app .o-switch input:checked { background: var(--primary); }
.o-switch input:checked::after { left: 18px; }
.o-switch input:disabled { opacity: .5; cursor: not-allowed; }
.o-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.o-check input, .o-app .o-check input { margin: 3px 0 0; width: 16px; height: 16px; padding: 0; accent-color: var(--primary); flex: none; }
.o-range { display: flex; flex-direction: column; gap: 4px; }
.o-range input[type="range"] { width: 100%; accent-color: var(--primary); margin: 0; padding: 0; border: 0; background: transparent; }
.o-range__ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-subtle); }
.o-range__ends output { font-size: 14px; font-weight: 600; color: var(--text); text-align: center; }
.o-range__ticks { display: flex; justify-content: space-between; padding: 0 5px; font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.o-range input[type="range"]:disabled { opacity: .5; }
.o-range__stops { display: flex; justify-content: space-between; gap: 4px; font-size: 13px; }
.o-app .o-range__stops a { color: var(--text-muted); text-decoration: none; }
.o-app .o-range__stops a[aria-current="true"] { color: var(--text); font-weight: 600; }
.o-seg { display: inline-flex; width: fit-content; max-width: 100%; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.o-seg button, .o-app .o-seg a { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-3); background: var(--bg-surface); border: 0; border-left: 1px solid var(--border); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; text-decoration: none; }
.o-seg button:first-child, .o-seg a:first-child { border-left: 0; }
.o-seg button[aria-pressed="true"], .o-app .o-seg a[aria-current="true"], .o-app .o-seg a[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.o-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
/* F45: a value and what it makes, side by side, one row each (a card's field value → its type) */
.o-mapping { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); max-width: 640px; }

/* ── tabs ────────────────────────────────────────────────────────────────── */
.o-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.o-tabs::-webkit-scrollbar { display: none; }
.o-app .o-tabs a, .o-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; text-decoration: none; }
.o-app .o-tabs a:hover { color: var(--text); text-decoration: none; }
.o-app .o-tabs a[aria-current="page"], .o-tabs button[aria-selected="true"], .o-tabs button[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); }
.o-tabs button:hover { color: var(--text); }
/* F43, E300: tabs inside a panel (a machine's parts) */
.o-tabs--panel { padding: 0 var(--space-3); border-top: 1px solid var(--border); }
.o-app .o-tabs a.o-tabs__later { color: var(--text-subtle); font-weight: 500; }
.o-tabs__hint { font-weight: 500; font-size: 13px; color: var(--text-subtle); }

/* ── the login pages (E86): one panel in the middle of the page ── */
.o-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.o-auth__box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-4); }
.o-auth__brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 650; color: var(--text); }
.o-auth__brand .o-logo__mark { width: 32px; height: 32px; color: var(--primary); }
.o-auth__brand .o-logo__bead { fill: var(--run-dot); }
.o-auth__foot { margin: 0; font-size: 13px; color: var(--text-subtle); text-align: center; }

/* ── an Agent Chat's two cards (E113): who came later, who worked on it, what holds between them ── */
.o-parties { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.o-party { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); color: inherit; }
.o-app a.o-party { text-decoration: none; color: inherit; }
.o-app a.o-party[href]:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.o-party__role { font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.o-party__relation { font-size: 13px; color: var(--text-muted); text-align: center; white-space: nowrap; }
@media (max-width: 720px) { .o-parties { grid-template-columns: minmax(0, 1fr); } .o-party__relation { text-align: left; } }

/* ── the statistics' charts (E43): the year's calendar, the week by hours, a bar in a table ── */
.o-heatmap { overflow-x: auto; }
.o-heatmap svg { display: block; width: 100%; min-width: 560px; height: auto; }
.o-heatmap text { fill: var(--text-subtle); font: 9px var(--font-sans); }
.o-heatmap__legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--text-subtle); }
.o-heatmap__legend span { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.o-bar { height: 8px; min-width: 80px; overflow: hidden; border-radius: var(--radius-pill); background: var(--bg-subtle); }
.o-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.o-big { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--text); }

/* E335: how many use cases, re-planned there and then — the slider and its button on one line where there is room */
.o-retune { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); padding-top: var(--space-2); }
.o-retune__range { flex: 1 1 320px; max-width: 520px; display: flex; flex-direction: column; gap: 4px; }
.o-retune > .o-btn { margin-bottom: 22px; }

/* E335: a worker's other ways in, by their names */
.o-app a.o-tag--link { color: var(--link); }
.o-app a.o-tag--link:hover { border-color: var(--link); }

/* a fold whose summary is a band (a log under its panel) */
details.o-fold > summary { list-style: none; cursor: pointer; }
details.o-fold > summary::-webkit-details-marker { display: none; }
details.o-fold > summary::before { content: "▸"; flex: none; width: 12px; color: var(--text-subtle); }
details.o-fold[open] > summary::before { content: "▾"; }

/* ── tools folded under one quiet line (E121: a knowledge page's Kezelés), their panels side by side ── */
.o-tools > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2); padding: 6px 0; font-weight: 600; }
.o-tools > summary::-webkit-details-marker { display: none; }
.o-tools > summary::before { content: "▸"; width: 14px; color: var(--text-subtle); }
.o-tools[open] > summary::before { content: "▾"; }
.o-tools > summary > .o-subtle { font-weight: 400; }
.o-tools__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-3); align-items: start; }
@media (max-width: 900px) { .o-tools__grid { grid-template-columns: minmax(0, 1fr); } }

/* ── a setting folded to its gist and value (E128); opened, its control ─── */
.o-setting { border-top: 1px solid var(--border); }
.o-setting:first-child, .o-band + .o-setting { border-top: 0; }
.o-setting > summary { list-style: none; cursor: pointer; display: flex; gap: var(--space-3); align-items: center; padding: 12px var(--space-4); }
.o-setting > summary::-webkit-details-marker { display: none; }
.o-setting > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px; border-right: 2px solid var(--text-subtle); border-bottom: 2px solid var(--text-subtle); transform: rotate(45deg); transition: transform .12s; }
.o-setting[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.o-setting > summary:hover { background: var(--bg-subtle); }
.o-setting__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.o-setting__name strong { font-size: 14px; font-weight: 600; }
.o-setting__name span { font-size: 13px; color: var(--text-muted); }
.o-setting__state { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; max-width: 50%; }
/* E318: a long value wraps within its pill rather than squeezing the setting's name */
.o-setting__value { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--bg-subtle); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35; }
.o-setting__value.is-on { background: var(--ok-bg); color: var(--ok-fg); }
.o-setting__value.is-off { color: var(--text-subtle); }
.o-setting.is-changed > summary { background: var(--wait-bg); }
.o-setting__body { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--space-4) var(--space-4); }
.o-setting__body > p { margin: 0; }
/* E318: on a phone the value under the setting's name, the fold's mark beside the name */
@media (max-width: 640px) {
    .o-setting > summary { flex-wrap: wrap; row-gap: 6px; }
    .o-setting__name { flex-basis: calc(100% - 32px); }
    .o-setting > summary::after { order: 1; }
    .o-setting__state { order: 2; max-width: none; flex-basis: 100%; justify-content: flex-start; }
}

/* ── the question and its answer ─────────────────────────────────────────── */
.o-question { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.o-question__head { display: flex; gap: var(--space-2); align-items: baseline; }
.o-question__head > .o-mono, .o-question__head > .o-tag { flex: none; white-space: nowrap; }
.o-question__text { margin: 0; font-weight: 600; font-size: 15px; line-height: 22px; }
.o-opt { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); cursor: pointer; }
.o-opt input { margin: 3px 0 0; accent-color: var(--primary); width: 16px; height: 16px; flex: none; }
.o-opt--selected, .o-opt:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.o-opt__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-opt__reason { font-size: 13px; color: var(--text-muted); }
.o-suggest { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--run-bg); color: var(--run-fg); font-size: 12px; font-weight: 600; }
.o-question__foot { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* a question shown to be answered elsewhere (on the card, in the tracker): its options numbered, nothing to pick */
.o-opt--static { cursor: default; border-color: var(--border); }
.o-opt__n { flex: none; min-width: 20px; font-weight: 600; color: var(--text-subtle); }
.o-copy { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--bg-subtle); font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text); }

/* ── where a card is on its way ──────────────────────────────────────────── */
.o-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.o-track__s { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; color: var(--text-subtle); min-width: 0; }
.o-track__s::before { content: ""; height: 4px; border-radius: 4px; background: var(--border); }
.o-track__s--done { color: var(--text-muted); }
.o-track__s--done::before { background: var(--ok-dot); }
.o-track__s--wait { color: var(--wait-fg); font-weight: 600; }
.o-track__s--wait::before { background: var(--wait-dot); }
.o-track__s--run { color: var(--run-fg); font-weight: 600; }
.o-track__s--run::before { background: var(--run-dot); }
.o-track__s--err { color: var(--err-fg); font-weight: 600; }
.o-track__s--err::before { background: var(--err-dot); }
.o-track__s--next { color: var(--text); font-weight: 600; }
.o-track__s--next::before { background: var(--border-strong); }
@media (max-width: 640px) {
    .o-track { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .o-track__s { flex-direction: row; align-items: center; gap: 10px; }
    .o-track__s::before { width: 24px; flex: none; }
    .o-track__s:not(.o-track__s--wait):not(.o-track__s--run):not(.o-track__s--err):not(.o-track__s--next) { display: none; }
}
/* F46: who of the team does a stage — under its name, quiet */
.o-track__who { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-subtle); }
@media (max-width: 640px) { .o-track__who { margin-left: auto; } }

/* ── F46: the team — a role's mark, the work's way as stations, the environments as screens ── */
/* a role's mark: its icon in a navy circle (the person's an outline, done green, one to come dashed); the colours stay the states' */
.o-role { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-sizing: border-box; vertical-align: middle; }
.o-role svg { width: 54%; height: 54%; }
.o-role--xs { width: 18px; height: 18px; }
.o-role--xs svg { width: 62%; height: 62%; }
.o-role--sm { width: 22px; height: 22px; }
.o-role--lg { width: 36px; height: 36px; }
.o-role--xl { width: 64px; height: 64px; }
.o-role--you { background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border-strong); }
.o-role--done { background: var(--ok-bg); color: var(--ok-fg); }
.o-role--soon { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); }
.o-whom { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* the way: stations joined by arrows, the cards at each; on a phone one under the other */
.o-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; }
.o-flow__arrow { flex: 0 0 16px; align-self: center; display: flex; justify-content: center; color: var(--border-strong); }
.o-flow__arrow svg { width: 16px; height: 16px; }
.o-flow__st { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.o-flow__st--wait { border-color: var(--wait-border); }
.o-flow__st--err { border-color: var(--err-dot); }
.o-flow__st--end { flex: 0 1 136px; }
.o-flow__st > .o-status { align-self: flex-start; }
/* E384: the Kezdőlap's way in short — no cards, each tile a link; two in a row on a phone */
.o-app a.o-flow__st { color: inherit; text-decoration: none; }
.o-app a.o-flow__st:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.o-flow--short .o-flow__st { flex-basis: 130px; gap: 8px; }
.o-app .o-flow__head { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.o-app a.o-flow__head:hover .o-flow__name b { text-decoration: underline; }
.o-flow__name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 18px; }
.o-flow__name b { font-weight: 600; overflow-wrap: anywhere; }
.o-flow__name small { font-size: 12px; color: var(--text-subtle); }
.o-app .o-flow__card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-subtle); color: inherit; text-decoration: none; min-width: 0; }
.o-app a.o-flow__card:hover { background: var(--border); }
.o-flow__card--wait { background: var(--wait-bg); }
.o-app a.o-flow__card--wait:hover { background: var(--wait-border); }
.o-flow__card--err { background: var(--err-bg); }
.o-flow__card .o-live { margin-top: 4px; }
.o-flow__id { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-subtle); }
.o-flow__title { font-size: 13px; line-height: 18px; font-weight: 600; overflow-wrap: anywhere; }
.o-flow__note { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-subtle); }
.o-flow__card--wait .o-flow__note { color: var(--wait-fg); }
.o-flow__card--err .o-flow__note { color: var(--err-fg); }
.o-flow__count { font-size: 28px; line-height: 36px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* a band over or under the way: the lead's, the ops', the librarian's */
.o-flow__band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
/* a column of its own never wraps: a wrapping column would be as tall as its grid laid out one screen under the other */
.o-flow__band--stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.o-flow__band--stack > .o-flow__bandhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.o-flow__text { margin: 0; flex: 1 1 300px; min-width: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.o-flow__text b { color: var(--text); }
.o-flow__fact { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.o-flow__fact svg { width: 18px; height: 18px; flex: none; }
.o-flow__hint { display: flex; align-items: center; gap: 6px; padding-left: 16px; font-size: 12px; color: var(--text-subtle); }
.o-flow__hint svg { width: 14px; height: 14px; flex: none; }
.o-flow__chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; flex-basis: 100%; }
.o-flow__chips > .o-flow__card { flex: 0 1 240px; }
@media (max-width: 640px) {
    .o-flow__st, .o-flow__st--end { flex-basis: 100%; }
    .o-flow__arrow { flex-basis: 100%; }
    .o-flow__arrow svg { transform: rotate(90deg); }
    .o-flow--short .o-flow__st { flex-basis: calc(50% - 2px); }
    .o-flow--short .o-flow__arrow { display: none; }
}
/* the way in one line (the home's): each role a pill, its state under its name */
/* the environments as screens: who is in each, what for — a free one dashed */
.o-screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.o-app .o-screen { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.o-screen__face { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 10px; border: 2px solid var(--primary); border-radius: var(--radius-md); background: var(--bg-surface); box-sizing: border-box; }
.o-app a.o-screen:hover .o-screen__face { background: var(--bg-page); }
.o-screen--free .o-screen__face { border-style: dashed; border-color: var(--border-strong); }
.o-screen--wait .o-screen__face { border-color: var(--wait-dot); }
.o-screen--err .o-screen__face { border-color: var(--err-dot); }
.o-screen__text { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.o-screen__text b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.o-screen__text small { font-size: 12px; color: var(--text-subtle); overflow-wrap: anywhere; }
.o-screen--free .o-screen__text b { color: var(--ok-fg); }
.o-screen--err .o-screen__text b { color: var(--err-fg); }
.o-screen__stand { width: 36px; height: 8px; margin: 0 auto; background: var(--primary); border-radius: 0 0 4px 4px; }
.o-screen--free .o-screen__stand { background: var(--border-strong); }
.o-screen--wait .o-screen__stand { background: var(--wait-dot); }
.o-screen--err .o-screen__stand { background: var(--err-dot); }
.o-screen__name { margin-top: 4px; font-size: 12px; color: var(--text-subtle); text-align: center; }
/* the ones to come: dashed, quiet */
.o-soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.o-soon__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.o-soon__item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.o-soon__item b { font-weight: 600; }
.o-soon__item small { font-size: 13px; color: var(--text-subtle); }

/* ── a use case's step ───────────────────────────────────────────────────── */
.o-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--border); }
.o-step__n { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-subtle); color: var(--text-muted); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.o-step--current .o-step__n { background: var(--primary); color: var(--on-primary); }
.o-step--ok .o-step__n { background: var(--ok-dot); color: #ffffff; }
.o-step--fail .o-step__n { background: var(--err-dot); color: #ffffff; }
.o-step--skip .o-step__n { background: var(--idle-bg); color: var(--idle-fg); }
.o-step__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.o-step__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.o-step__k { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-subtle); margin-bottom: 2px; }
.o-step__answer { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.o-step__answer form { margin: 0; }
@media (max-width: 640px) { .o-step__pair { grid-template-columns: minmax(0, 1fr); } .o-step__answer .o-btn { flex: 1 1 auto; } }
/* a use case's step answered in one row — works, works otherwise (its note opening below the row), skipped at its end */
.o-case-forms { position: relative; display: flow-root; }
.o-case-forms > form { margin: 0; }
.o-case-forms > form:first-child { float: left; margin-right: var(--space-2); }
.o-case-forms > form:last-child:not(:first-child) { position: absolute; top: 0; right: 0; }
.o-case-forms:has(> form:last-child:not(:first-child)) .o-case-fail > summary { margin-right: 120px; }
.o-case-fail > summary, .o-case-redo > summary { list-style: none; cursor: pointer; }
.o-case-fail > summary::-webkit-details-marker, .o-case-redo > summary::-webkit-details-marker { display: none; }
.o-case-fail > form { clear: both; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--err-dot); border-radius: var(--radius-md); background: var(--err-bg); }
.o-case-fail .o-alert { margin: 0; }
.o-case-file { position: relative; overflow: hidden; }
.o-case-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.o-case-redo > summary { color: var(--link); font-size: 13px; font-weight: 600; }
.o-case-redo[open] > summary { margin-bottom: var(--space-2); }
.o-case-note { margin: 0; padding: 8px 12px; border-radius: var(--radius-md); background: var(--err-bg); color: var(--err-fg); white-space: pre-line; }
.o-case-figure, .o-case-shot, .o-wizard__figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.o-case-figure, .o-wizard__figure { max-width: 520px; }
.o-case-shot { max-width: 320px; }
.o-case-figure img, .o-case-figure video, .o-case-shot img, .o-case-shot video, .o-wizard__figure img, .o-wizard__figure video { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-subtle); }
.o-case-figure figcaption, .o-case-shot figcaption, .o-wizard__figure figcaption { font-size: 13px; color: var(--text-muted); }
/* F43, E294, E304: a feature's conversation — its log scrolls, its lines are bubbles (oris-feature.js builds them too) */
.o-chat--log { max-height: min(64vh, 720px); min-height: 220px; overflow-y: auto; }
.o-chat--log:has(> .o-chat__empty) { min-height: 0; }
.o-chat__empty { display: flex; flex-direction: column; gap: 8px; color: var(--text-muted); font-size: 14px; }
.o-chat__empty p { margin: 0; }
.o-chat__form { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.o-chat__form .o-composer { padding: 0; border-top: 0; }
.o-chat__form .o-composer { flex-wrap: wrap; }
.o-composer > textarea { flex: 1 1 280px; min-width: 0; min-height: 72px; resize: vertical; }
.o-composer > .o-btn, .o-composer > label { flex: none; }
.o-chat__form .o-composer > [data-chat="send"] { margin-left: auto; }
.o-bubble p { margin: 0; }
.o-bubble form { margin: 4px 0 0; }
.o-bubble--failed { background: var(--wait-bg); border-color: var(--wait-border); color: var(--text); }
.o-bubble__failed { font-size: 13px; font-weight: 600; color: var(--wait-fg); }
.o-bubble__note { padding-top: 6px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-subtle); }
.o-bubble--me .o-bubble__note { border-top-color: rgba(255, 255, 255, 0.25); color: var(--header-po-muted); }
.o-bubble__files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; }
/* E319: a working answer's gliding bar as wide as its bubble */
.o-bubble .o-live { align-self: stretch; }
/* a file picked with a button of ours: the input over the button, invisible */
.o-file { position: relative; overflow: hidden; }
.o-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.o-upload.is-auto .o-upload__submit { display: none; }
.o-app .o-btn.is-busy { opacity: .7; pointer-events: none; }
/* a folded row (a summary that is a row) */
.o-app details > summary.o-row { list-style: none; }
.o-app details > summary.o-row::-webkit-details-marker { display: none; }
/* the files a finding was shown with: an image small, any other by its name */
.o-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.o-files__shot { display: block; width: 96px; height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; background: var(--bg-subtle); }
.o-files__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── a walkthrough, one step at a time (oris-guide.js) ───────────────────── */
.o-wizard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.o-wizard__step { display: flex; flex-direction: column; gap: var(--space-3); }
.o-wizard__step:focus { outline: none; }
.o-wizard__head { display: flex; gap: var(--space-3); align-items: center; }
.o-wizard__head h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.o-wizard__n { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--run-bg); color: var(--run-fg); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.o-wizard__nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.o-wizard__nav[hidden] { display: none; }
.o-wizard__dots { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; }
.o-wizard__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--border-strong); cursor: pointer; }
.o-wizard__dot.seen { background: var(--run-dot); opacity: .45; }
.o-wizard__dot.active { background: var(--run-dot); }
.o-wizard__count { font-size: 13px; color: var(--text-subtle); }
.o-wizard__toggle { margin-top: var(--space-2); border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) {
    .o-case-forms > form:first-child, .o-case-forms > form:last-child:not(:first-child) { float: none; position: static; margin: 0 0 var(--space-2); }
    .o-case-forms:has(> form:last-child:not(:first-child)) .o-case-fail > summary { margin-right: 0; }
    .o-case-forms .o-btn { width: 100%; }
    .o-case-fail { margin-bottom: var(--space-2); }
}

/* A real share */
.o-progress { height: 6px; border-radius: var(--radius-pill); background: var(--bg-subtle); overflow: hidden; }
.o-progress > span { display: block; height: 100%; background: var(--ok-dot); border-radius: inherit; }
.o-progress--err > span { background: var(--err-dot); }
.o-progress--wait > span { background: var(--wait-dot); }
/* E413: a plan's comment leads to a card's settings: not under the header */
#setup { scroll-margin-top: 72px; }
/* E412: the AI allowance at a glance: a pie in the header; its details in a dialog */
.o-gauge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.10); color: var(--on-primary); cursor: pointer; }
.o-gauge:hover { background: rgba(255, 255, 255, 0.18); }
.o-gauge--ok { color: #3ccf7f; }
.o-gauge--wait { color: var(--wait-dot); }
.o-gauge--err { color: #ff6b5f; }
.o-gauge__pie { display: block; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(currentColor calc(var(--used) * 1%), rgba(255, 255, 255, 0.22) 0); }
.o-allowance { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; }
.o-allowance__row { display: flex; flex-direction: column; gap: 6px; }
.o-allowance__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }

/* The sliding strip — work that runs, without a share */
.o-live { position: relative; height: 3px; border-radius: var(--radius-sm); background: var(--run-bg); overflow: hidden; }
.o-live::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; border-radius: inherit; background: var(--run-dot); animation: o-slide 1.4s ease-in-out infinite; }
@keyframes o-slide { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .o-live::after { animation: none; left: 0; width: 100%; opacity: .5; } .o-status--run::before { animation: none; } }

/* E359: a run of tests at a glance — one bar of its parts (passed, failed, skipped; the rest to come, moving while it runs) and
   the same in numbers beside it */
.o-meter-row { display: flex; flex-direction: column; gap: 8px; }
.o-meter { display: flex; height: 10px; border-radius: var(--radius-pill); background: var(--bg-subtle); overflow: hidden; }
.o-meter--live { background-image: repeating-linear-gradient(-45deg, var(--run-bg) 0 6px, var(--bg-subtle) 6px 12px); background-size: 16.97px 16.97px; animation: o-meter-move 1.2s linear infinite; }
@keyframes o-meter-move { to { background-position: 16.97px 0; } }
.o-meter__part { display: block; height: 100%; flex: none; transition: width .4s ease; }
.o-meter__part--ok { background: var(--ok-dot); }
.o-meter__part--err { background: var(--err-dot); }
.o-meter__part--skip { background: var(--idle-dot); }
.o-meter__part--run { background: var(--run-dot); }
.o-meter__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--text-muted); }
.o-meter__key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.o-meter__key::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--idle-dot); }
.o-meter__key--ok { color: var(--ok-fg); } .o-meter__key--ok::before { background: var(--ok-dot); }
.o-meter__key--err { color: var(--err-fg); } .o-meter__key--err::before { background: var(--err-dot); }
.o-meter__key--wait { font-weight: 400; } .o-meter__key--wait::before { background: transparent; border: 1.5px solid var(--idle-dot); }
.o-meter__key--skip { font-weight: 400; }
.o-meter__took { margin-left: auto; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .o-meter--live { animation: none; } .o-meter__part { transition: none; } }

/* E359: a test (or a check) and what it came to — its mark, its words, how long it took */
.o-results { list-style: none; margin: 0; padding: 0; }
.o-result { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: 9px var(--space-4); border-top: 1px solid var(--border); font-size: 14px; line-height: 22px; }
.o-results > .o-result:first-child { border-top: 0; }
.o-result__mark { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; background: var(--idle-bg); color: var(--idle-fg); }
.o-result--ok .o-result__mark { background: var(--ok-dot); color: #ffffff; }
.o-result--err .o-result__mark { background: var(--err-dot); color: #ffffff; }
.o-result--warn .o-result__mark { background: var(--wait-dot); color: #1a1200; }
.o-result--wait .o-result__mark { background: transparent; border: 1.5px dashed var(--idle-dot); }
.o-result--wait .o-result__text { color: var(--text-muted); }
.o-result__text { min-width: 0; overflow-wrap: anywhere; }
.o-result__note { display: block; font-size: 13px; line-height: 20px; color: var(--text-subtle); }
.o-result__end { display: inline-flex; gap: var(--space-3); align-items: center; font-size: 13px; color: var(--text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a group's band says what came of it in the legend's marks, at the band's size */
.o-band .o-meter__legend { font-size: 12px; gap: 4px 12px; letter-spacing: 0; justify-content: flex-end; }
/* inside a panel's body: its rows without a padding of their own; the pictures of a check, small, under it */
.o-results--inset > .o-result { padding-left: 0; padding-right: 0; grid-template-columns: 20px minmax(0, 1fr); }
.o-result__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.o-thumb { display: block; width: 72px; height: 45px; border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; background: var(--bg-subtle); }
.o-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-app .o-thumb--video { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 10px; font-size: 12px; color: var(--text-muted); text-decoration: none; }

/* ── conversation ────────────────────────────────────────────────────────── */
.o-chat { display: flex; flex-direction: column; gap: var(--space-3); }
.o-bubble { max-width: 85%; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--bg-subtle); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.o-bubble__who { font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.o-bubble--me { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: var(--radius-sm); }
.o-bubble--me .o-bubble__who { color: var(--header-po-muted); }
.o-app .o-bubble--me a { color: #c9d6ff; }
.o-bubble--oris { align-self: flex-start; background: var(--bg-surface); border: 1px solid var(--border); border-bottom-left-radius: var(--radius-sm); }
.o-bubble--system { align-self: center; max-width: 100%; background: transparent; padding: 2px 0; font-size: 13px; color: var(--text-subtle); text-align: center; }
.o-composer { display: flex; gap: var(--space-2); align-items: flex-end; padding: var(--space-3); border-top: 1px solid var(--border); }
.o-attach { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(127, 127, 127, 0.12); font-size: 12px; }

/* ── evidence ────────────────────────────────────────────────────────────── */
.o-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.o-shot { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.o-shot__img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-subtle); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); font-size: 12px; }
.o-shot__img img, .o-shot__img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-shot__badge { position: absolute; left: 8px; bottom: 8px; padding: 2px 6px; border-radius: var(--radius-sm); background: rgba(19, 32, 59, 0.85); color: #ffffff; font-size: 12px; font-weight: 600; }
.o-shot__cap { font-size: 13px; color: var(--text-muted); }
.o-sketch { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.o-sketch img { display: block; width: 100%; max-width: 900px; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.o-shot__img video { object-fit: contain; background: #000000; }
.o-shot__cap time { display: block; font-size: 12px; color: var(--text-subtle); }
.o-shot__cap a { font-size: 12px; }

/* ── messages ────────────────────────────────────────────────────────────── */
.o-alert { display: flex; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-surface); font-size: 14px; flex-wrap: wrap; }
.o-alert--wait { background: var(--wait-bg); border-color: var(--wait-border); color: var(--wait-fg); }
.o-alert--err { background: var(--err-bg); border-color: var(--err-dot); color: var(--err-fg); }
.o-alert--run { background: var(--run-bg); border-color: transparent; color: var(--run-fg); }
.o-alert--ok { background: var(--ok-bg); border-color: transparent; color: var(--ok-fg); }
.o-alert__text { flex: 1 1 280px; min-width: 0; }
.o-alert__text b, .o-alert__text strong { color: var(--text); }
.o-alert form { margin: 0; }
.o-alert .o-live { flex: 1 1 160px; }
.o-empty { padding: var(--space-7) var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.o-empty__title { font-weight: 600; color: var(--text); }
.o-allgood { display: flex; align-items: center; gap: var(--space-2); padding: 12px var(--space-4); color: var(--ok-fg); font-weight: 500; }

/* ── numbers ─────────────────────────────────────────────────────────────── */
.o-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.o-stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.o-stat__label { font-size: 13px; color: var(--text-muted); }
.o-stat__value { font-size: 28px; line-height: 36px; font-weight: 650; font-variant-numeric: tabular-nums; }
.o-stat__foot { font-size: 13px; color: var(--text-subtle); }

/* ── key–value, readiness ────────────────────────────────────────────────── */
.o-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--space-4); font-size: 14px; margin: 0; }
.o-kv dt { color: var(--text-subtle); } .o-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.o-ready { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; font-size: 13px; }
.o-ready span { display: inline-flex; align-items: center; gap: 4px; }
.o-ready i { font-style: normal; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.o-ready .y { background: var(--ok-bg); color: var(--ok-fg); }
.o-ready .n { background: var(--err-bg); color: var(--err-fg); }
.o-ready .q { background: var(--wait-bg); color: var(--wait-fg); }
.o-ready .x { background: var(--idle-bg); color: var(--idle-fg); }

/* ── confirmation ────────────────────────────────────────────────────────── */
.o-dialog { width: calc(100% - 32px); max-width: 480px; padding: 0; border: 0; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); color: var(--text); font: inherit; }
.o-dialog::backdrop { background: rgba(16, 24, 40, 0.4); }
.o-dialog__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.o-dialog__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-2); }
.o-dialog__text { margin: 0; white-space: pre-line; font-size: 15px; line-height: 22px; }
.o-dialog > form { margin: 0; }

/* ── code, logs, prose ───────────────────────────────────────────────────── */
.o-code { margin: 0; padding: var(--space-3) var(--space-4); background: var(--bg-subtle); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; max-height: 480px; }
.o-prose { overflow-wrap: anywhere; }
.o-prose--long { max-height: 26em; overflow: auto; }
.o-prose > * + * { margin-top: 10px; }
.o-prose h1, .o-prose h2, .o-prose h3, .o-prose h4 { font-size: 15px; line-height: 22px; font-weight: 600; }
.o-prose ul, .o-prose ol { margin: 0; padding-left: 20px; }
.o-prose li + li { margin-top: 4px; }
.o-prose code { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-subtle); padding: 1px 5px; border-radius: var(--radius-sm); }
.o-prose pre { background: var(--bg-subtle); padding: var(--space-3); border-radius: var(--radius-md); overflow-x: auto; }
.o-prose pre code { background: none; padding: 0; }
.o-prose table { border-collapse: collapse; }
.o-prose th, .o-prose td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.o-prose blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-muted); }
/* E349: a picture of a card's text (its own, its sync saved it): small in the text, whole in a tab of its own */
.o-text-picture { display: inline-block; max-width: 100%; cursor: zoom-in; }
.o-text-picture__img { display: block; max-width: 100%; max-height: 360px; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }

/* ── help ────────────────────────────────────────────────────────────────── */
.o-helpbtn { position: fixed; right: 24px; bottom: 24px; z-index: 35; height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 0; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; box-shadow: var(--shadow-overlay); display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.o-proposal { border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--bg-surface); }