/* Every page (signed in or not): layout, colours, type, states. Plain layer.
   Colours, type and spacing follow the approved Figma frames (Intake R1, Brief 2, 3, 4/4b; T610,
   DL-O74): graphite scene #0d181f, header #091318, text #f1f2ec / #b4c6cb, saffron words #f6b87d,
   Inter (self-hosted, brand/fonts). DL-O61 readability: body 16px, captions 14px, contrast at least
   4.5:1, one primary button per screen, Back/Cancel as text links.
   Glass, band and grid live in glass.css; the buttons in signature.css + signature.js. */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: block; font-weight: 300 600;
  src: url("/static/brand/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* includes the rupee sign (U+20B9) */
  font-family: "Inter"; font-style: normal; font-display: block; font-weight: 300 600;
  src: url("/static/brand/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* T618 (CTO, 2 Nov): Inter is preloaded on every page and blocks briefly instead of swapping, so the
   wider fallback never paints first and pushes words out of their boxes. If Inter is ever late, this
   local fallback is sized to Inter's metrics, so the lines keep their length. */
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;
}
:root {
  --bg: #0d191f;          /* Figma scene (v0.2 study base) */
  --head: #091318;        /* Figma header band */
  --bg-2: #0f2027;
  --panel: #132830;
  --panel-2: #0e1e24;
  --field: rgba(6, 17, 22, .72);       /* Figma field */
  --field-line: rgba(158, 184, 196, .42);
  --rule: rgba(128, 166, 184, .24);    /* Figma row separator */
  --line: #2f4a53;
  --line-strong: #4f6f79;
  --fg: #f1f2ec;          /* Figma text-main; 15.9:1 on --panel */
  --muted: #b4c6cb;       /* Figma text-muted; 9.2:1 on --panel */
  --saffron: #f4a83e;     /* fills (tags, selected states) */
  --saffron-ink: #1c1206; /* text on saffron: 10.5:1 */
  --saffron-text: #f6b87d;/* Figma text-accent; 9.6:1 on --panel */
  --brand: #f47721;       /* brand saffron (DL-O68) */
  --bad: #ff9c8f;         /* 7.6:1 on --panel  */
  --ok: #8fdcae;
  --focus: #ffd38a;
  --radius: 28px;
  --gutter: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.app {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg);
  font: 16px/1.55 Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  font-feature-settings: "lnum" 1, "tnum" 1; /* lining, even-width figures, as in Figma */
}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--saffron-text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

/* ---- top bar ---------------------------------------------------------------------- */
.appbar {
  display: flex; align-items: center; gap: 32px; min-height: 112px; padding: 12px clamp(var(--gutter), 5vw, 64px);
  background: var(--head); position: relative; z-index: 2;
}
.app-tag { color: var(--muted); font-size: 13px; line-height: 19px; }
/* Approved logo artwork (docs/08-ui-ux/brand): the transparent version of the master, unchanged,
   only trimmed and scaled -- no plate. About 64 px tall on desktop, 48 px on small phones. */
.logo { display: inline-flex; line-height: 0; text-decoration: none; }
.logo img { display: block; height: 64px; width: auto; }
.appnav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.appnav a { color: var(--saffron-text); text-decoration: none; font-weight: 500; }
.appnav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.who { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.who-sub { color: var(--muted); font-size: 14px; }
.linkish, .textlink {
  background: none; border: 0; padding: 4px 0; font: inherit; color: var(--saffron-text);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px;
}
.linkish { font-size: 14px; min-height: 0; }

/* ---- page --------------------------------------------------------------------------- */
.page { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 32px clamp(var(--gutter), 5vw, 64px) 56px; }
.textlink.back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 20px; }
.textlink.back:hover { text-decoration: underline; }
.case-head { margin-bottom: 12px; }
.customer { font-size: 28px; font-weight: 500; margin: 0 0 6px; }
.meta { color: var(--saffron-text); font-size: 14px; margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a[aria-current] { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.step-label { color: var(--saffron-text); font-size: 14px; font-weight: 500; line-height: 20px; text-transform: uppercase; margin: 0 0 24px; }
.title { font-size: clamp(32px, 4.4vw, 42px); font-weight: 300; line-height: 1.45; margin: 0 0 24px; }
.title:focus { outline: none; }
.lead { font-size: 16px; line-height: 22px; color: var(--muted); max-width: 82ch; margin: 0 0 32px; }
.notice, .error-banner { border-radius: 14px; padding: 12px 16px; margin: 0 0 20px; font-weight: 500; }
.notice { background: rgba(143, 220, 174, .1); border: 1px solid rgba(143, 220, 174, .45); color: var(--ok); }
.error-banner { background: rgba(255, 156, 143, .1); border: 1px solid rgba(255, 156, 143, .5); color: var(--bad); }
.foot { color: var(--muted); font-size: 14px; margin-top: 24px; }

/* ---- cards -------------------------------------------------------------------------- */
.view { display: flex; flex-direction: column; gap: 24px; margin-bottom: 28px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); --sig-behind: var(--panel); }
.card h2 { font-size: 22px; font-weight: 500; margin: 0 0 6px; }
.card h3 { font-size: 16px; font-weight: 600; margin: 18px 0 8px; }
.card .sub { color: var(--muted); margin: 0 0 16px; }
.detail { margin: 4px 0 0; }
.detail.strong { font-weight: 600; margin-top: 14px; }
.detail.gap { color: var(--saffron-text); }
.hint { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.muted { color: var(--muted); }
.error { color: var(--bad); min-height: 1.4em; margin: 8px 0 0; font-weight: 500; }

/* ---- lists -------------------------------------------------------------------------- */
ul.files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
ul.files > li { padding: 16px 0; border-top: 1px solid var(--line); }
ul.files > li:first-child { border-top: 0; padding-top: 4px; }
.fname { font-size: 18px; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.status { color: var(--saffron-text); font-size: 15px; margin: 2px 0 0; }
.file.ready .status { color: var(--ok); }
.file.local.sending .status::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.acct.out .fname { color: var(--muted); }
ul.plain { margin: 8px 0 0; padding-left: 20px; }
ul.plain li { margin: 6px 0; }
ul.gaps li { color: var(--saffron-text); }
.case-list { list-style: none; padding: 0; margin: 0; }
.case-row { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.case-list li:first-child .case-row { border-top: 0; }
.case-row:hover .case-name { text-decoration: underline; text-underline-offset: 4px; }
.case-name { font-size: 18px; font-weight: 500; }
.case-sub { color: var(--muted); font-size: 14px; }

/* ---- buttons ------------------------------------------------------------------------ */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.actions.loose { margin-top: 0; }
/* The buttons themselves (light and signature) are in signature.css (T614, DL-O76). */

/* ---- choices: layout only; the chip look (Fable idea 4) is in glass.css ---------------------- */
.segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.segs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.segs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.dates { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.dates label, form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
form > label { margin: 8px 0 10px; }
ul.files .actions { margin-top: 12px; }
input[type=text], input[type=password], input[type=date], input[type=email], select {
  width: 100%; min-height: 52px; font: inherit; padding: 14px 16px; color: var(--fg); background: var(--field);
  border: 1px solid var(--field-line); border-radius: 12px;
}
input::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible { border-color: var(--saffron); outline-offset: 2px; }
input[type=date] { color-scheme: dark; }
fieldset.choice-row { border: 0; padding: 0; margin: 16px 0 0; display: flex; gap: 24px; flex-wrap: wrap; }
fieldset.choice-row legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }

/* ---- drop zone & processing --------------------------------------------------------- */
.drop { border: 2px dashed var(--line-strong); border-radius: 22px; padding: 24px; margin-top: 8px; }
.drop.over { border-color: var(--saffron); background: rgba(244, 168, 62, .08); }
.drop-text { font-size: 19px; font-weight: 500; margin: 0; }
.logo.big { margin: 4px 0 18px; display: inline-flex; }
.logo.big img { height: 80px; }

/* ---- phones -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .appbar { gap: 16px; padding-top: 14px; padding-bottom: 14px; }
  .appbar { flex-wrap: wrap; }
  .appnav { order: 3; width: 100%; gap: 6px 20px; font-size: 15px; }
  .logo img { height: 48px; }
  .who-sub { display: none; }
  .segs, .segs.three { grid-template-columns: 1fr 1fr; }
  .segs.three { grid-template-columns: 1fr; }
  .segs.two { grid-template-columns: 1fr 1fr; }
  .dates { grid-template-columns: 1fr; }
  .card { border-radius: 24px; }
  .drop { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .file.local.sending .status::after { animation: none; }
}

/* ---- results page (T354, T355, Brief 2; DL-O78 / T616 UA-01: the Excel cover's order) ------ */
.status-big { font-size: clamp(26px, 3.2vw, 34px); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; margin: 2px 0 10px; color: var(--fg); }
.strip-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.strip-main { display: grid; gap: 6px; align-content: start; }
.strip-main .actions { margin-top: 14px; }
.strip-main .hint { margin-top: 6px; }
.strip-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.kpi .n { font-size: clamp(34px, 3.4vw, 46px); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 0; }
.kpi .n small { font-size: 16px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.kpi .l { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
table.cover { grid-column: 2; border-collapse: collapse; font-size: 14px; width: 100%; }
table.cover th { text-align: left; font-weight: 500; padding: 4px 8px 4px 0; color: var(--fg); }
table.cover thead th { color: var(--muted); font-weight: 400; font-size: 12px; letter-spacing: .04em; }
table.cover th.m, table.cover td.m { text-align: center; width: 36px; padding: 4px 2px; }
table.cover tr.unsure th { color: var(--muted); }
table.cover small { color: var(--muted); font-weight: 400; }
table.cover .legend { color: var(--muted); font-size: 12px; padding-top: 8px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--saffron-text); vertical-align: middle; }
.dot.full { background: var(--brand); border-color: var(--brand); }
.dot.part { background: linear-gradient(90deg, var(--brand) 50%, transparent 50%); border-color: var(--brand); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.tile { padding: 16px 18px; border-radius: 22px; background: rgba(9, 19, 24, .42); border: 1px solid rgba(206, 228, 234, .14); display: grid; gap: 4px; align-content: start; min-width: 0; }
.tile .l { color: var(--muted); font-size: 13px; margin: 0; }
.tile .v { font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; margin: 0; }
.tile .v .tag { vertical-align: middle; }
.tile .p { color: var(--muted); font-size: 12px; margin: 0; }
details.more > summary { cursor: pointer; list-style: none; color: var(--saffron-text); font-weight: 500; min-height: 44px; display: flex; align-items: center; gap: 10px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "›"; display: inline-block; transition: transform .2s; font-size: 22px; line-height: 1; }
details.more[open] > summary::before { transform: rotate(90deg); }
details.more .when-open { display: none; }
details.more[open] .when-open { display: inline; }
details.more[open] .when-closed { display: none; }
.fold { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.fold h3 { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
@media (max-width: 860px) {
  .strip-grid { grid-template-columns: 1fr; }
  table.cover { grid-column: 1; }
}
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .strip-kpis { grid-template-columns: 1fr 1fr; } .tiles { grid-template-columns: 1fr; } }
dl.figures { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 16px 0 0; }
dl.figures dt, dl.figures dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
dl.figures dt { padding-right: 16px; }
dl.figures dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
dl.figures .period { color: var(--muted); font-weight: 400; font-size: 14px; }
.tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tag.check { background: var(--saffron); color: var(--saffron-ink); }
ol.facts { margin: 12px 0 0; padding-left: 22px; }
ol.facts > li { padding: 12px 0; border-top: 1px solid var(--line); }
ol.facts > li:first-child { border-top: 0; }
details.rows { margin-top: 8px; }
details.rows summary { cursor: pointer; color: var(--saffron-text); text-decoration: underline; width: max-content; }
ul.plain.small li { font-size: 14px; overflow-wrap: anywhere; }
dl.report-block { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 14px 0 6px; }
dl.report-block dt { color: var(--muted); }
dl.report-block dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  dl.figures { grid-template-columns: 1fr; }
  dl.figures dd { text-align: left; border-top: 0; padding-top: 0; }
  dl.report-block { grid-template-columns: 1fr; }
  dl.report-block dd { margin-bottom: 8px; }
}

/* ---- Brief 4: team, settings, my account, cases list (T361) ------------------------- */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.days .seg { min-height: 44px; padding: 6px 4px; font-variant-numeric: tabular-nums; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; margin-top: 10px; max-width: 360px; }
.card h3.section { font-size: 18px; font-weight: 500; margin: 26px 0 6px; }
.card h3.section:first-of-type { margin-top: 6px; }
.table-wrap { overflow-x: auto; margin-top: 10px; }
table.list { width: 100%; border-collapse: collapse; font-size: 15px; }
table.list th { text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); padding: 8px 12px 10px 0; border-bottom: 1px solid var(--line); }
table.list td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
table.list tr:last-child td { border-bottom: 0; }
table.list td.name { font-weight: 600; overflow-wrap: anywhere; }
table.list td .linkish { display: block; text-align: left; min-height: 0; padding: 0 0 8px; }
table.list a.rowlink { color: var(--fg); text-decoration: none; font-weight: 600; }
table.list a.rowlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.state { color: var(--saffron-text); font-weight: 500; }
.state.ready { color: var(--ok); }
.segs.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.field.search { max-width: none; margin: 0 0 14px; }
.qr { display: block; width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 12px; margin: 12px 0; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; word-break: break-all; background: #081216;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); display: inline-block; }
.confirm { border-color: var(--saffron); }
@media (max-width: 640px) {
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .segs.five { grid-template-columns: 1fr 1fr; }
  /* the cases table becomes stacked rows on phones */
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stack td { display: block; border: 0; padding: 2px 0; }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 14px; }
}

/* Terms of Use text (T353): readable line length; scrolls inside the panel on the accept page */
.terms-text { max-width: 72ch; }
.terms-text h3 { margin-top: 22px; }
.terms-text p { margin: 0 0 10px; line-height: 1.6; }
.terms-version { color: var(--saffron-text); margin: 0 0 12px; }
.terms-points { max-width: 72ch; margin: 0 0 16px; padding-left: 1.4em; display: grid; gap: 8px; line-height: 1.5; }
.terms-points li { padding-left: 4px; overflow-wrap: anywhere; }
.terms-points li::marker { color: var(--saffron-text); font-variant-numeric: tabular-nums; }
.accept .terms-text { max-height: min(52vh, 560px); overflow-y: auto; padding: 12px 8px 4px 0; border-block: 1px solid var(--line); margin-bottom: 14px; }
.plain-list { list-style: none; padding: 0; margin: 0; } .plain-list li { margin: 6px 0; }
.nowrap { white-space: nowrap; }

/* ---- sign-in and invitation (Brief 2 frames 00-12, T610) ---------------------------- */
.access-grid { display: grid; grid-template-columns: minmax(0, 712px) minmax(0, 560px); gap: 40px; align-items: start; }
.context { display: flex; flex-direction: column; gap: 24px; max-width: 662px; }
.statement { font-size: clamp(28px, 3.2vw, 36px); font-weight: 300; line-height: 1.47; margin: 0; }
.context-sub { font-size: 17px; line-height: 25px; color: var(--muted); margin: 0; }
.journey { font-size: 14px; line-height: 21px; color: var(--saffron-text); margin: 0; word-spacing: .12em; }
.card.auth { padding: 40px; }
.card.auth h2 { font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.card.auth form { display: flex; flex-direction: column; gap: 18px; }
.card.auth form > label { margin: 0; color: var(--fg); font-weight: 500; }
.card.auth .actions { margin-top: 0; }
.card.auth .error:empty { display: none; }
.card.auth .hint { margin: 0; }
input.code { letter-spacing: .3em; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
/* UA-13: the PDF password field at a readable width */
#pdf-password { max-width: 480px; }
/* UA-12: space the code, not the placeholder */
input.code::placeholder { letter-spacing: normal; font-size: 16px; }
/* UA-22: the authenticator link only opens an app on a phone */
@media (min-width: 900px) and (hover: hover) { #open-app { display: none; } }
/* UA-11: on wide screens the sign-in page fills the screen under the bar, its content centred in it */
@media (min-width: 900px) { .page.access { min-height: calc(100vh - 112px); display: flex; flex-direction: column; justify-content: center; } }
ol.steps { padding-left: 20px; margin: 0 0 8px; } ol.steps li { margin-bottom: 6px; }
@media (max-width: 1099px) {
  .access-grid { grid-template-columns: 1fr; gap: 28px; }
  .context { order: 2; }
}
@media (max-width: 640px) { .card.auth { padding: 24px; } }

/* ---- signed-in header (Brief 4 frames): in the scene, company name, then the menu --------- */
.appbar.scene { background: transparent; min-height: 0; flex-wrap: wrap; align-items: center; row-gap: 26px;
  padding-top: 28px; padding-bottom: 0; }
.appbar.scene .logo img { height: 64px; }
.org { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org-name { color: var(--saffron-text); font-size: 14px; font-weight: 500; line-height: 20px; text-transform: uppercase; }
.org-who { font-size: 17px; line-height: 25px; }
.appbar.scene .who { align-self: flex-start; }
.appbar.scene .appnav { order: 9; width: 100%; gap: 8px 72px; font-size: 16px; }
.appbar.scene .appnav a { font-weight: 400; }
/* the phone menu (DL-O78 / T616 UA-02); hidden on wide screens where the bar shows everything */
.menu-button { display: none; }
.menu { display: none; }
@media (max-width: 640px) {
  /* one 56 px bar: logo 30 px, company name, menu button; everything else inside the menu */
  .appbar.scene { min-height: 56px; height: 56px; padding: 0 var(--gutter); gap: 12px; flex-wrap: nowrap; row-gap: 0;
    background: var(--head); align-items: center; }
  .appbar.scene .logo img { height: 30px; }
  .appbar.scene .org { flex: 1 1 auto; min-width: 0; gap: 0; }
  .appbar.scene .org-name { font-size: 12px; line-height: 16px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appbar.scene .org-who, .appbar.scene .app-tag, .appbar.scene .who, .appbar.scene .appnav { display: none; }
  .menu-button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: transparent; border: 1px solid rgba(206, 228, 234, .3); color: var(--fg); cursor: pointer; padding: 0; }
  .menu-button .bars { width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; display: block; }
  .menu-button .bars::before, .menu-button .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
  .menu-button .bars::before { top: -6px; } .menu-button .bars::after { top: 6px; }
  .menu-button[aria-expanded="true"] { background: rgba(244, 168, 62, .14); border-color: var(--saffron); }
  .menu { display: grid; gap: 2px; position: relative; z-index: 3; margin: 0 var(--gutter); padding: 10px 14px 12px;
    background: rgba(9, 19, 24, .96); border: 1px solid rgba(206, 228, 234, .25); border-radius: 0 0 18px 18px; }
  .menu.hidden { display: none; }
  .menu-who { margin: 0 0 8px; font-size: 15px; line-height: 1.35; }
  .menu-who small { color: var(--muted); font-size: 12px; }
  .menu a { color: var(--fg); text-decoration: none; font-size: 16px; min-height: 44px; display: flex; align-items: center; border-top: 1px solid rgba(206, 228, 234, .12); }
  .menu a[aria-current] { color: var(--saffron-text); font-weight: 600; }
  .menu-out { margin-top: 6px; background: none; border: 0; padding: 10px 0; font: inherit; color: var(--saffron-text); text-decoration: underline; text-underline-offset: 4px; text-align: left; min-height: 44px; cursor: pointer; }
  /* the case head: one back link, the customer's name once, meta in one 12 px line */
  .textlink.back { margin: 10px 0 6px; min-height: 36px; font-size: 14px; }
  .customer { font-size: 22px; line-height: 1.2; margin: 0 0 2px; letter-spacing: -.01em; }
  .meta { font-size: 12px; line-height: 16px; color: var(--muted); }
  .crumbs { margin: 10px 0 12px; font-size: 13px; }
  .step-label { margin-bottom: 8px; font-size: 12px; }
  .title { font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
  .lead { margin-bottom: 18px; font-size: 15px; line-height: 21px; }
  .page { padding-top: 0; }
}

/* ---- Brief 4 lists and fields ------------------------------------------------------------ */
.field.search.inset { max-width: none; margin: 0 0 22px; gap: 4px; padding: 12px 16px; border-radius: 14px;
  background: var(--field); border: 1px solid var(--field-line); font-weight: 400; color: var(--muted); }
.field.search.inset input { min-height: 28px; padding: 0; border: 0; background: transparent; border-radius: 0; font-size: 16px; }
.field.search.inset input:focus-visible { outline: none; }
.field.search.inset:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.segs.five .seg { font-size: 14px; }
table.list.strips { border-collapse: separate; border-spacing: 0 18px; margin-top: -14px; font-size: 16px; }
table.list.strips th { color: var(--fg); font-weight: 500; font-size: 14px; border-bottom: 0; padding: 0 12px 0 0; }
table.list.strips td { border-bottom: 0; padding: 16px 12px 16px 0; background: rgba(36, 66, 77, .42); }
table.list.strips td:first-child { padding-left: 0; box-shadow: -16px 0 0 rgba(36, 66, 77, .42); border-radius: 10px 0 0 10px; }
table.list.strips td:last-child { border-radius: 0 10px 10px 0; }
table.list.strips .state, table.list.strips .state.ready { color: var(--saffron-text); }
#empty-box h2 { font-size: 26px; font-weight: 400; margin: 0 0 14px; }
@media (max-width: 640px) {
  table.list.strips { border-spacing: 0; margin-top: 0; }
  table.list.strips tr { margin-bottom: 12px; border-radius: 12px; background: rgba(36, 66, 77, .42); padding: 12px 14px; }
  table.list.strips td, table.list.strips td:first-child { background: none; box-shadow: none; padding: 2px 0; }
}
.page > .card + .card, .page > .card + .actions, .page > .actions + .card { margin-top: 36px; }
.page > .actions.loose { margin-top: 36px; }
/* hidden speed meter (?meter=1, T618 phone sign-off) */
.speed-meter { position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 50; max-width: calc(100vw - 16px);
  padding: 6px 10px; border-radius: 10px; background: rgba(4, 12, 16, .88); color: #f4f6f1; font: 500 12px/1.35 Inter, "Inter Fallback", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(226, 247, 255, .22); white-space: pre-line; }
/* UA-15: the setting in force, first line of each Settings card */
.card p.now { margin: 4px 0 2px; font-size: 15px; color: var(--fg); }
.card p.now strong { font-weight: 600; }