/* AI Anvaya stylesheet: the design system (docs/design/README.md) as the app ships it.
   One file for every screen: system fonts, no images, no @import, no framework.
   Budget: 20 KB minified. Mobile first; breakpoints 48em and 64em. The :root tokens are the one
   source of docs/design/tokens.json (python -m anvaya.web.design_tokens --json). Components only
   admin pages use live in app-admin.css. */

:root {
  --ink: #0f1b26; --ink-2: #3a4756; --ink-3: #4f5d6d;
  --on-brand: #fff; --surface: #fff; --canvas: #f3f6f9; --sunken: #e6ecf2; --line: #c3ccd6; --edge: #5f6c7b;
  --brand: #1f4e79; --brand-d: #163a5b; --brand-l: #eaf1f8; --brand-m: #d3e3f2; --on-brand-edge: #9dbad8;
  --turmeric: #f2b01e; --focus: #a34d00; --focus-dark: #ffd166;
  --ok: #1b5e20; --ok-bg: #e8f5e9; --ok-solid: #2e7d32;
  --warn: #5c3b00; --warn-bg: #fff1c9;
  --bad: #9b1c1c; --bad-bg: #fdecec; --bad-solid: #b42318;
  --info: #12456f; --info-bg: #e1eefa; --violet: #43286b; --violet-bg: #efe8f8;
  --font: "Noto Sans Gujarati", "Shruti", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-xs: .8125rem; --fs-sm: .9rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 3rem;
  --r-1: .375rem; --r-2: .5rem; --r-3: .875rem;
  --shadow: 0 1px 3px rgb(15 27 38 / .2);
  --tap: 2.75rem; --page: 64rem; --measure: 40rem; --gutter: 1rem;
  --bp-md: 48em; --bp-lg: 64em;
  --bang: radial-gradient(circle at 50% 73%, #fff 0 11%, #fff0 12%), linear-gradient(#fff, #fff) 50% 27% / 15% 38% no-repeat;
  --i: radial-gradient(circle at 50% 29%, #fff 0 11%, #fff0 12%), linear-gradient(#fff, #fff) 50% 74% / 15% 38% no-repeat;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center / 100%;
}
@media (min-width: 48em) { :root { --gutter: 1.5rem; } }

/* Base */
*, ::before, ::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 1rem/1.65 var(--font); }
h1, h2, h3 { margin: 0; line-height: 1.35; }
h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); }
p, ul, ol, dl, fieldset, figure { margin: 0; }
a { color: var(--brand); text-underline-offset: .18em; }
a:hover { color: var(--brand-d); text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.on-dark { --focus: var(--focus-dark); }
[hidden] { display: none !important; }
main:focus { outline: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; z-index: 10; left: var(--s-2); top: -6rem; padding: var(--s-2) var(--s-4); border: 2px solid var(--brand); border-radius: var(--r-2); background: var(--surface); font-weight: 700; box-shadow: var(--shadow); --focus: var(--focus-dark); }
.skip:focus { top: var(--s-2); }
.stack { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.stack > .btn:not(.btn--block) { justify-self: start; }
.page > * + * { margin-top: var(--s-5); }
h1 + .lead { margin-top: var(--s-2); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); }
.lead { color: var(--ink-2); font-size: var(--fs-md); }
.user-text { overflow-wrap: anywhere; }

/* App shell */
.wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3); max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.top-bar { padding: var(--s-2) 0; border-bottom: 3px solid var(--turmeric); background: var(--brand); color: var(--on-brand); }
.tab-bar { border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); }
.btn, .brand, .lang-toggle a, .app-nav a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-weight: 700; line-height: 1.3; text-decoration: none; }
.brand, .brand:hover { color: var(--on-brand); }
.brand svg { flex: none; }
.lang-toggle { display: flex; gap: var(--s-1); }
.top-end { display: flex; flex: none; align-items: center; gap: var(--s-1); }
.top-end .btn { padding: 0 var(--s-3); }
.lang-toggle a { padding: 0 var(--s-2); border: 2px solid var(--on-brand-edge); border-radius: var(--r-2); color: var(--on-brand); }
.lang-toggle a:hover { background: var(--brand-d); color: var(--on-brand); }
.lang-toggle a[aria-current="true"] { border-color: var(--on-brand); background: var(--on-brand); color: var(--brand); }
.subnav { border-bottom: 1px solid var(--line); }
.top-bar .wrap, .tab-bar .wrap { flex-wrap: nowrap; }
.tab-bar .wrap { gap: 0; }
.app-nav { flex: 1; min-width: 0; }
.app-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.app-nav li { flex: 1 1 auto; }
.app-nav a { justify-content: center; width: 100%; padding: 0 var(--s-2); border-bottom: 3px solid transparent; text-align: center; }
.tab-bar .btn { padding: 0 var(--s-2); }
.app-nav a:hover { background: var(--brand-l); }
.app-nav a[aria-current="page"] { border-bottom-color: var(--brand); background: var(--brand-l); color: var(--brand-d); }
.new-dot { flex: none; width: .6rem; height: .6rem; margin-inline-start: var(--s-1); border-radius: 50%; background: var(--turmeric); }
.count { min-width: 1.5rem; padding: 0 var(--s-2); border-radius: 99px; background: var(--turmeric); color: var(--ink); font-size: var(--fs-xs); line-height: 1.5rem; text-align: center; }
.page { max-width: var(--page); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-6); }
.page--narrow { --page: var(--measure); }
.back { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-weight: 700; }
.back::before { content: ""; width: .6rem; height: .6rem; border: solid currentColor; border-width: 0 0 3px 3px; transform: rotate(45deg); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-3); }

/* Buttons */
.btn { justify-content: center; padding: var(--s-2) var(--s-4); border: 2px solid var(--brand); border-radius: var(--r-2); background: var(--brand); color: var(--on-brand); font-family: inherit; font-size: inherit; cursor: pointer; }
.btn:hover { color: var(--on-brand); box-shadow: inset 0 0 0 9rem rgb(15 27 38 / .14); }
.btn--secondary { background: var(--surface); color: var(--brand); }
.btn--danger { border-color: var(--bad-solid); background: var(--bad-solid); }
.btn--accent { border-color: var(--turmeric); background: var(--turmeric); color: var(--ink); }
.btn--link { border-color: transparent; background: none; color: var(--brand); text-decoration: underline; }
.btn--secondary:hover, .btn--link:hover { color: var(--brand-d); }
.btn--accent:hover { color: var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn:disabled:hover, .btn[aria-disabled="true"], .control:disabled { border-color: var(--line); background: var(--sunken); color: var(--ink-3); box-shadow: none; text-decoration: none; cursor: not-allowed; }

/* Forms */
.field { display: grid; align-content: start; gap: var(--s-1); }
.field__label, legend { font-weight: 700; }
.meta, .field__hint { color: var(--ink-3); font-size: var(--fs-sm); }
.field__error { display: flex; gap: var(--s-2); color: var(--bad); font-size: var(--fs-sm); font-weight: 700; }
.field__error::before { content: ""; flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; border-radius: 50%; background: var(--bang), var(--bad-solid); }
.control { display: block; width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3); border: 2px solid var(--edge); border-radius: var(--r-2); background: var(--surface); color: var(--ink); font: inherit; line-height: 1.5; }
textarea.control { min-height: 7rem; resize: vertical; }
.control:hover { border-color: var(--ink-2); }
.control:focus-visible { border-color: var(--brand); }
.control[aria-invalid="true"] { border-color: var(--bad-solid); }
.fieldset { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); }
.choice { position: relative; display: flex; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; }
.choice input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--brand); cursor: pointer; }
.choice input[aria-invalid="true"] { outline: 2px solid var(--bad-solid); outline-offset: 2px; }
.choice label { flex: 1; cursor: pointer; line-height: 1.5; }
.choice label::after { content: ""; position: absolute; inset: 0; }
.choice input:disabled + label { color: var(--ink-3); }
.form-grid { display: grid; gap: var(--s-4); }
.form-grid .wide { grid-column: 1 / -1; }

/* Feedback. A tone sets --t (strong colour) and --t-bg (tint); a data-status or data-guardrail
   attribute picks the tone itself, so the badge and the notice inside a [data-status] element agree. */
.tone-ok, [data-status="COMPLETED"], [data-guardrail="PASS"] { --t: var(--ok); --t-bg: var(--ok-bg); --ico: var(--tick) no-repeat; }
[data-status="RUNNING"], [data-guardrail="PASS_AFTER_RERUN"] { --t: var(--info); --t-bg: var(--info-bg); }
.tone-warn, [data-status="HELD_FOR_REVIEW"], [data-guardrail="HELD_FOR_REVIEW"] { --t: var(--warn); --t-bg: var(--warn-bg); --ico: var(--bang); }
.tone-bad, [data-status^="FAILED"] { --t: var(--bad); --t-bg: var(--bad-bg); --ico: var(--bang); }
[data-status="REVISION_REQUESTED"] { --t: var(--violet); --t-bg: var(--violet-bg); }
.notice { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--t, var(--info)); border-left-width: 6px; border-radius: var(--r-2); background: var(--t-bg, var(--brand-l)); }
.notice::before { content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ico, var(--i)), var(--t, var(--info)); }
.notice > * { min-width: 0; }
.notice p + p, .notice ul { margin-top: var(--s-2); }
.notice--banner { padding: var(--s-4) var(--s-5); border-left-width: 8px; }
.notice__title { font-size: var(--fs-md); }
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .1em .7em; border: 1.5px solid transparent; border-radius: 99px; background: var(--t-bg, var(--surface)); color: var(--t, var(--ink-3)); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.badge::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.badge[data-guardrail] { border-color: currentColor; background: var(--surface); }
.badge[data-status="FAILED_LOCALIZATION"] { border: 1.5px dashed currentColor; background: var(--surface); }
.plan-id { display: inline-block; padding: .05em .5em; border-radius: var(--r-1); background: var(--brand-l); color: var(--brand-d); font: 700 var(--fs-sm) / 1.6 var(--mono); white-space: nowrap; }
.vpill { border: 1.5px solid currentColor; border-radius: 99px; }
.vpill[data-kind="scheme-table"] { background: var(--violet-bg); color: var(--violet); }
.flag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); padding: .1em .7em .1em .5em; border: 1.5px solid currentColor; border-radius: var(--r-1); background: var(--t-bg); color: var(--t); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; }
.flag::before { content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ico, var(--bang)), var(--t); }
.flag code { font: 400 var(--fs-xs) / 1.5 var(--mono); }

/* Surfaces */
.card, .plan-item, .empty { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.card { box-shadow: var(--shadow); }
.card--action { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.empty { padding-block: var(--s-5); border: 2px dashed var(--edge); }
.dl-list, .plan-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.dl-card { justify-content: flex-start; min-height: 4rem; border-radius: var(--r-3); }
.plan-item { display: grid; gap: var(--s-2); padding-block: var(--s-3); }
.plan-item__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.plan-item__name { font-weight: 700; overflow-wrap: anywhere; }
.cols, .split { display: grid; gap: var(--s-5); }

/* Tables and description lists */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.6; }
.table th, .table td { padding: var(--s-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table thead th { background: var(--brand-l); color: var(--brand-d); }
.table thead th, .table tbody th { white-space: nowrap; }
.table .badge { white-space: normal; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table a, .section__head a, .notice li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .is-over > * { background: var(--bad-bg); color: var(--bad); font-weight: 700; }
.icon { flex: none; vertical-align: -.2em; }
.scenarios { display: grid; gap: var(--s-5); }
.col-opt { display: none; }
.card--attn { border-left: 6px solid var(--turmeric); }
.dl { display: grid; gap: var(--s-1) var(--s-4); }
.dl dt { color: var(--ink-2); font-weight: 700; }
.dl dd { margin: 0 0 var(--s-2); }

/* Intake: progress, chat, stages */
.progress { display: grid; gap: var(--s-1); }
.progress progress { width: 100%; height: .75rem; accent-color: var(--brand); }
.chat { display: flex; flex-direction: column; gap: var(--s-3); }
.bubble { max-width: 92%; padding: var(--s-3) var(--s-4); border: 2px solid var(--brand-m); border-radius: var(--r-3); overflow-wrap: anywhere; white-space: pre-wrap; }
.bubble--q { align-self: flex-start; border-bottom-left-radius: var(--r-1); background: var(--brand-l); }
.bubble--a { align-self: flex-end; border-color: var(--brand); border-bottom-right-radius: var(--r-1); background: var(--brand); color: var(--on-brand); }
.bubble--end { align-self: stretch; max-width: none; border-color: var(--ok-solid); background: var(--surface); }
.chat > .bubble--q:last-child { border-color: var(--brand); box-shadow: inset 6px 0 0 var(--turmeric); }
.bubble--clar { border-style: dashed; border-color: var(--brand); background: var(--warn-bg); }
.bubble--clar::before { content: ""; display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: var(--s-2); border-radius: 50%; background: var(--i), var(--info); vertical-align: -.15em; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); border: 2px solid var(--brand); border-radius: 99px; background: var(--surface); color: var(--brand); font-weight: 700; line-height: 1.3; }
.chip input:hover + label { box-shadow: inset 0 0 0 9rem rgb(15 27 38 / .14); }
.chip input:checked + label { background: var(--brand); color: var(--on-brand); }
.chip input:checked + label::before { content: ""; width: 1rem; height: 1rem; background: var(--tick) no-repeat; }
.chip input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + label { border-color: var(--line); background: var(--sunken); color: var(--ink-3); box-shadow: none; }
.stages { margin: 0; padding: 0; list-style: none; }
.stages li { --c: var(--edge); position: relative; display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0 var(--s-3) 2.75rem; }
.stages li::before, .stages li::after { content: ""; position: absolute; left: 0; top: var(--s-3); }
.stages li::before { width: 1.6rem; height: 1.6rem; border: 3px solid var(--c); border-radius: 50%; background: var(--mark, var(--surface)); }
.stages li::after { left: calc(.8rem - 1.5px); top: calc(var(--s-3) + 1.6rem); bottom: calc(var(--s-3) * -1); width: 3px; background: var(--c); opacity: .5; }
.stages li:last-child::after { display: none; }
.stages li[data-state="completed"] { --c: var(--ok-solid); --mark: var(--tick) no-repeat, var(--c); }
.stages li[data-state="started"] { --c: var(--brand); --mark: radial-gradient(var(--turmeric) 38%, var(--surface) 42%); }
.stages li[data-state="failed"] { --c: var(--bad-solid); --mark: var(--bang), var(--c); }
.stages li[data-state="not_run"]::before { border-style: dashed; }
.stage-state { color: var(--c); font-weight: 700; white-space: nowrap; }
.timeline li { flex-wrap: wrap; }
.stage-outcome { flex-basis: 100%; min-width: 0; }
.stage-outcome .badge { max-width: 100%; white-space: normal; }

/* Table as cards: one card per row on a phone, every cell named by its data-label. table--stack keeps
   the cards at every width, for a table that sits in a narrow column and would only scroll sideways. */
:is(.table--cards, .table--stack) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:is(.table--cards, .table--stack), :is(.table--cards, .table--stack) tbody, :is(.table--cards, .table--stack) tr { display: block; }
:is(.table--cards, .table--stack) tr { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
:is(.table--cards, .table--stack) :is(th, td) { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; border: 0; text-align: right; }
:is(.table--cards, .table--stack) tbody th { justify-content: flex-start; text-align: left; white-space: normal; }
:is(.table--cards, .table--stack) td::before { content: attr(data-label); color: var(--ink-2); font-weight: 700; text-align: left; }
.table--stack .is-over { background: var(--bad-bg); }

/* Navigation aids: breadcrumbs, pagination, filters */
.crumb-bar { border-bottom: 1px solid var(--line); background: var(--surface); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: .45rem; height: .45rem; margin: 0 var(--s-3) 0 var(--s-2); border: solid var(--ink-3); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 700; overflow-wrap: anywhere; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.pager .btn { min-width: var(--tap); padding-inline: var(--s-3); }
.filter-bar { display: grid; gap: var(--s-3); align-items: end; }

/* Dialog, loading, error page */
.dialog { width: min(30rem, calc(100vw - 2 * var(--gutter))); padding: var(--s-5); border: 2px solid var(--brand); border-radius: var(--r-3); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgb(15 27 38 / .6); }
.dialog .row { justify-content: flex-end; }
.skeleton { display: grid; gap: var(--s-2); }
.skeleton__line { height: 1rem; border-radius: var(--r-1); background: var(--sunken); }
.skeleton__line:last-child { width: 60%; }
.error-page { display: grid; justify-items: start; gap: var(--s-4); padding-block: var(--s-5); }
.error-code { color: var(--ink-3); font: 700 var(--fs-2xl) / 1 var(--mono); }

@media (min-width: 48em) {
  h1 { font-size: var(--fs-2xl); }
  .tab-bar { font-size: 1rem; }
  .app-nav li { flex: none; }
  .app-nav a { padding: 0 var(--s-3); }
  .table th, .table td { padding-inline: var(--s-3); }
  .col-opt { display: table-cell; }
  .dl-list, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); }
  .dl dd { margin: 0; }
  .table--cards thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .table--cards { display: table; }
  .table--cards tbody { display: table-row-group; }
  .table--cards tr { display: table-row; padding: 0; }
  .table--cards th, .table--cards td { display: table-cell; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: left; }
  .table--cards td::before { content: none; }
  .filter-bar { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) auto; }
  .scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 64em) {
  .cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .split { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .split__aside { position: sticky; top: var(--s-4); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse { 50% { opacity: .35; } }
  .badge[data-status="RUNNING"]::before, .stages li[data-state="started"]::before, .skeleton__line { animation: pulse 1.6s ease-in-out infinite; }
}