/* Hilda · Tinte. Component styles ported from hilda-design-system/components/bundle.css
   (class names kept, `hl-`), then the screen layer carried over from the Egle build
   (app/egle/egle.css, renamed). Colours, sizes and fonts come from tokens.css; the only values
   defined here are the translucent overlays on the black bar, which the design draws as white
   at low opacity and which have no token. */
:root {
  --bar-field: color-mix(in srgb, var(--on-bar) 8%, transparent);
  --bar-field-hover: color-mix(in srgb, var(--on-bar) 12%, transparent);
  --bar-field-line: color-mix(in srgb, var(--on-bar) 16%, transparent);
  --bar-kbd-line: color-mix(in srgb, var(--on-bar) 25%, transparent);
  --bar-chip-line: color-mix(in srgb, var(--on-bar) 35%, transparent);
  --radius-touch: 12px;
}
html, body { height: 100%; }
/* content-box like the reference renders (bundle.css sets border-box only where it needs it):
   a global border-box shrank every section heading by 12px (Egle round 1 fidelity review). */
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.hl-pad { padding: var(--space-5); }
.hl-stack { display: grid; gap: var(--space-6); }
.hl-row-flex { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.hl-num { font-family: var(--font-mono); font-size: 13.5px; }
.hl-ink2 { color: var(--ink-2); }
.hl-ink3 { color: var(--ink-3); }
.hl-attn { color: var(--attention); font-weight: 600; }
.hl-danger { color: var(--danger); font-weight: 500; }

/* focus: one ring */
.hl-btn:focus-visible, .hl-tr[tabindex]:focus-visible, .hl-cb:focus-visible, .hl-nav a:focus-visible, .hl-icon-btn:focus-visible, .hl-bar-field:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* Button */
.hl-btn { font: 500 14px/20px var(--font-sans); height: var(--control-height); padding: 0 14px; border-radius: var(--radius-sm); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .12s, box-shadow .12s; }
.hl-btn:hover { background: var(--surface-sunk); }
.hl-btn-primary { background: var(--action); color: var(--on-action); box-shadow: none; }
.hl-btn-primary:hover { background: var(--action); filter: brightness(1.08); }
.hl-btn-quiet { background: transparent; box-shadow: none; color: var(--ink-2); }
.hl-btn-quiet:hover { color: var(--ink); background: var(--surface-sunk); }
.hl-btn[disabled] { cursor: default; filter: none; background: var(--tray); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.hl-btn-touch { height: var(--row-height-touch); width: 100%; font-size: 16px; font-weight: 600; border-radius: 12px; }
.hl-icon-btn { font: inherit; font-size: 16px; min-width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.hl-icon-btn:hover { background: var(--surface-sunk); color: var(--ink); }

/* Status label */
.hl-status { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; line-height: 20px; white-space: nowrap; color: var(--ink-2); }
.hl-status svg { width: 12px; height: 12px; }
.hl-status-ok { color: var(--ok); }
.hl-status-danger { color: var(--danger); font-weight: 500; }
.hl-status-attention { color: var(--attention); font-weight: 500; }
.hl-status-attention::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Top bar (Egle) */
.hl-bar { height: var(--top-bar); display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--bar); color: var(--on-bar); }
.hl-logo { font-weight: 700; font-size: 16px; letter-spacing: -.02em; margin-right: 6px; }
.hl-crumb { color: var(--on-bar-2); font-size: 13px; }
.hl-bar-field { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius-sm); border: 0; background: var(--bar-field); box-shadow: inset 0 0 0 1px var(--bar-field-line); color: var(--on-bar); font: 400 14px var(--font-sans); }
.hl-bar-month span { color: var(--on-bar-2); }
.hl-bar-search { flex: 1; max-width: 440px; justify-content: space-between; color: var(--on-bar-2); }
.hl-bar-search kbd { font: 12px var(--font-mono); color: var(--on-bar-2); border: 1px solid var(--bar-field-line); border-radius: var(--radius-xs); padding: 0 5px; }
.hl-bar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hl-chip { font-size: 12px; color: var(--on-bar-2); border: 1px dashed var(--bar-chip-line); border-radius: var(--radius-xs); padding: 1px 8px; }
.hl-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bar-field-hover); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.hl-step { display: flex; align-items: center; gap: 4px; font: 13px var(--font-mono); color: var(--on-bar-2); }
.hl-bar .hl-icon-btn { color: var(--on-bar); }
.hl-bar .hl-icon-btn:hover { background: var(--bar-field-hover); color: var(--on-bar); }

/* Side nav */
.hl-nav { display: grid; gap: 2px; padding: 18px 12px; width: var(--nav-width); align-content: start; box-sizing: border-box; }
.hl-nav a { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; text-decoration: none; }
.hl-nav a:hover { background: var(--surface-sunk); color: var(--ink); }
.hl-nav a[aria-current="page"] { background: var(--surface); color: var(--action); font-weight: 600; box-shadow: var(--shadow-panel); }
.hl-navc { font: 500 12.5px var(--font-mono); color: var(--ink-3); }
.hl-navc-attn { color: var(--attention); font-weight: 600; }

/* Section: panel (hers) or tray (Hilda's) */
.hl-sec { border-radius: var(--radius-md); overflow: hidden; }
.hl-sec-panel { background: var(--surface); box-shadow: var(--shadow-panel); }
.hl-sec-tray { background: var(--tray); }
.hl-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px var(--space-5) 10px; min-height: 34px; }
.hl-sec-h h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.005em; }
.hl-count { margin-left: 8px; font: 500 14px var(--font-mono); color: var(--ink-3); }
.hl-sec-r { display: flex; align-items: center; gap: 12px; }
.hl-aside { font-size: 12.5px; color: var(--ink-3); }
.hl-empty { display: flex; align-items: baseline; gap: 12px; padding: 4px var(--space-5) 20px; }
.hl-empty b { font-size: 15px; font-weight: 600; }
.hl-empty span { font-size: 12.5px; color: var(--ink-3); }

/* Tables: the one row type, two lines */
.hl-table { width: 100%; border-collapse: collapse; }
.hl-table th { font-size: 12.5px; line-height: 16px; font-weight: 400; color: var(--ink-3); text-align: left; padding: 0 10px 6px; white-space: nowrap; }
.hl-table td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: middle; height: var(--row-height); box-sizing: border-box; }
.hl-table th:first-child, .hl-table td:first-child { padding-left: var(--space-5); }
.hl-table th:last-child, .hl-table td:last-child { padding-right: var(--space-5); }
.hl-table .hl-n { text-align: right; }
.hl-table td.hl-go, .hl-table th.hl-go { width: 28px; text-align: right; color: var(--ink-3); font-size: 18px; }
.hl-table td.hl-c, .hl-table th.hl-c { width: 30px; padding-right: 0; }
.hl-tr[tabindex] { cursor: pointer; }
.hl-sec-panel .hl-tr[tabindex]:hover td { background: var(--surface-sunk); }
.hl-tr[tabindex]:hover td.hl-go { color: var(--ink); }
.hl-two b { display: block; font-weight: 500; font-size: 14.5px; line-height: 20px; }
.hl-two span { display: block; font-size: 12.5px; line-height: 16px; color: var(--ink-3); margin-top: 1px; }
.hl-two-num b { font: 400 13.5px/20px var(--font-mono); }
.hl-name { font-weight: 500; font-size: 14.5px; }
.hl-reason-cell { color: var(--ink-2); font-size: 13.5px; }
.hl-reason-cell.hl-danger { color: var(--danger); font-weight: 500; }
.hl-reason-cell.hl-danger::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 2px; }
.hl-amount { font: 500 15px var(--font-mono); letter-spacing: -.01em; }
.hl-prev { display: block; font: 12px var(--font-mono); color: var(--attention); }

/* Checkbox */
.hl-cb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface); display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle; }
.hl-cb:checked { background: var(--action); border-color: var(--action); }
.hl-cb:checked::after { content: ""; width: 8px; height: 4px; border: solid var(--on-action); border-width: 0 0 1.8px 1.8px; transform: translateY(-1px) rotate(-45deg); }

/* Doubt: the one mark for a value Hilda is unsure of */
.hl-doubt { text-decoration: underline dashed var(--attention); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Posting: the booking panel */
.hl-posting { background: var(--surface); box-shadow: var(--shadow-panel); border-radius: var(--radius-md); padding: 22px 24px 10px; display: grid; align-content: start; }
.hl-total span { display: block; font-size: 12.5px; color: var(--ink-3); }
.hl-total b { font: 500 32px/38px var(--font-mono); letter-spacing: -.02em; }
.hl-total i { font-style: normal; font: 400 15px var(--font-sans); color: var(--ink-3); margin-left: 6px; }
.hl-why { display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; font-weight: 500; font-size: 14.5px; }
.hl-why::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--attention); flex: none; }
.hl-why-risk { color: var(--danger); }
.hl-why-risk::before { background: var(--danger); }
.hl-actions { display: flex; gap: var(--space-2); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.hl-fields { margin: 4px -24px 0; }
.hl-field { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 9px 24px; border-bottom: 1px solid var(--line); }
.hl-field dt { font-size: 12.5px; color: var(--ink-3); padding-top: 1px; }
.hl-field dd { margin: 0; }
.hl-field dd small { display: block; font: 12px var(--font-sans); color: var(--ink-3); }
.hl-field-doubt { background: var(--attention-tint); }
.hl-book { margin: 14px 0 8px; }
.hl-book th:first-child, .hl-book td:first-child { padding-left: 0; }
.hl-book th:last-child, .hl-book td:last-child { padding-right: 0; }
.hl-book td { height: auto; padding: 9px 10px; }

/* Side column */
.hl-side { display: grid; gap: var(--space-6); width: var(--side-column); align-content: start; font-size: 13.5px; }
.hl-side h3 { margin: 0 0 6px; font-size: 12.5px; line-height: 16px; font-weight: 400; color: var(--ink-3); }
.hl-kv { display: grid; grid-template-columns: 1fr auto; gap: 3px var(--space-2); }
.hl-kv .hl-num { text-align: right; }
.hl-check { display: grid; gap: 8px; }
.hl-check label { display: flex; gap: 10px; align-items: center; cursor: pointer; }

/* Owner */
.hl-ocard { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 18px 18px 16px; font-size: 16px; line-height: 24px; }
.hl-olbl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--attention); }
.hl-olbl svg { width: 12px; height: 12px; }
.hl-olbl-ok { color: var(--ok); }
.hl-osup { font-size: 18px; line-height: 24px; font-weight: 600; margin-top: 6px; letter-spacing: -.01em; }
.hl-oamt { font: 500 30px/36px var(--font-mono); letter-spacing: -.02em; margin-top: 10px; }
.hl-oamt i { font: 400 15px var(--font-sans); color: var(--ink-3); margin-left: 6px; }
.hl-ometa { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.hl-oacts { display: grid; gap: 10px; margin-top: 18px; }

@media (max-width: 640px) {
  .hl-table .hl-hide-s { display: none; }
  .hl-table th:first-child, .hl-table td:first-child { padding-left: var(--space-4); }
  .hl-table th:last-child, .hl-table td:last-child { padding-right: var(--space-4); }
  .hl-btn { height: var(--row-height-touch); }
  .hl-book th:first-child, .hl-book td:first-child { padding-left: 0; }
  .hl-book th:last-child, .hl-book td:last-child { padding-right: 0; }
}

/* ==== Screens and parts added with Brief 2 ==== */

/* ---- Brief 2 additions ---- */
.hl-app { min-height: 100vh; background: var(--paper); display: grid; grid-template-rows: auto 1fr; }
.hl-app-body { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); }
.hl-app-main { padding: 28px 36px 40px; display: grid; gap: 22px; align-content: start; min-width: 0; }
.hl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.hl-head h1 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.025em; }
.hl-head p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.hl-head-r { display: flex; align-items: center; gap: 10px; }
.hl-due { text-align: right; display: grid; gap: 1px; }
.hl-due span { font-size: 12.5px; color: var(--ink-3); }
.hl-due b { font: 500 20px/26px var(--font-mono); color: var(--action); }
.hl-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-column); gap: 32px; align-items: start; }
.hl-col { display: grid; gap: 22px; align-content: start; }
.hl-attn-t { color: var(--attention); }
.hl-ok-t { color: var(--ink); display: flex !important; align-items: center; }
.hl-ostatus b, .hl-vat-signed b { display: flex; align-items: center; }

/* Tabs */
.hl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.hl-tab { font: 500 14px var(--font-sans); height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hl-tab:hover { background: var(--surface-sunk); color: var(--ink); }
.hl-tab[aria-selected="true"] { background: var(--surface); color: var(--action); font-weight: 600; box-shadow: var(--shadow-panel); }
.hl-tab-c { font: 500 12.5px var(--font-mono); color: var(--ink-3); }
.hl-tab-c-attn { color: var(--attention); font-weight: 600; }

/* Unread marker and setup note in lists */
.hl-unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px; border-radius: 9px; background: var(--attention); color: var(--surface); font: 600 11px var(--font-mono); vertical-align: 2px; }
.hl-setup { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.hl-msg b { color: var(--attention); font-weight: 600; font-size: 13px; }
.hl-msg b i { font-style: normal; color: var(--ink-3); font-weight: 400; }
.hl-msg span { color: var(--ink); font-size: 13.5px; display: block; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FirstRun */
.hl-first { background: var(--surface); box-shadow: var(--shadow-panel); border-radius: var(--radius-md); padding: 32px 36px 30px; max-width: 760px; }
.hl-first-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* DemoNote */

/* Checklist */
.hl-checklist { list-style: none; margin: 0; padding: 0; }
.hl-cl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px var(--space-5); border-top: 1px solid var(--line); min-height: 56px; box-sizing: border-box; }
.hl-cl-mark { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; font: 700 12px var(--font-sans); }
.hl-cl-mark svg { width: 11px; height: 11px; }
.hl-cl-done .hl-cl-mark { background: var(--action); box-shadow: none; color: var(--on-action); }
.hl-cl-blocked .hl-cl-mark { box-shadow: inset 0 0 0 1.5px var(--attention); color: var(--attention); }
.hl-cl-text b { display: block; font-weight: 500; font-size: 14.5px; }
.hl-cl-val { font: 400 13.5px var(--font-sans); color: var(--ink-2); margin-left: 8px; }
.hl-cl-text > span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.hl-cl-blocked .hl-cl-text > span { color: var(--attention); }
.hl-cl-done .hl-cl-text b { color: var(--ink-2); }
.hl-cl-r { display: flex; align-items: center; gap: 12px; }

/* AddressCard */
.hl-addr { display: grid; gap: 6px; }
.hl-addr-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--radius-sm); padding: 6px 6px 6px 12px; }
.hl-addr-row b { font: 500 14px var(--font-mono); overflow-wrap: anywhere; }

/* Field */
.hl-field-in { display: grid; gap: 5px; }
.hl-field-in > span { font-size: 12.5px; color: var(--ink-3); }
.hl-field-in > span i { font-style: normal; }
.hl-field-in small { font-size: 12px; color: var(--ink-3); }
.hl-input { font: 400 14px var(--font-sans); height: var(--control-height); padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); box-sizing: border-box; width: 100%; }
.hl-input.hl-num { font-family: var(--font-mono); }
.hl-input::placeholder { color: var(--ink-3); }
.hl-input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.hl-input[disabled] { background: var(--tray); box-shadow: inset 0 0 0 1px var(--line); }

/* Bank */
.hl-bank-ok { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; color: var(--ok); vertical-align: -1px; }
.hl-bank-ok svg { width: 12px; height: 12px; }

/* VAT return */
.hl-vat { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0; }
.hl-vat-rows { margin: 0; padding: 4px 0 8px; }
.hl-vat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 10px var(--space-5); border-top: 1px solid var(--line); align-items: baseline; }
.hl-vat-row dt { font-size: 14px; }
.hl-vat-row dt small { display: block; font-size: 12px; color: var(--ink-3); }
.hl-vat-row dd { margin: 0; font-size: 14px; }
.hl-vat-strong { border-top: 1px solid var(--line-strong); }
.hl-vat-strong dt { font-weight: 600; }
.hl-vat-strong dd { font: 500 22px/28px var(--font-mono); letter-spacing: -.01em; }
.hl-vat-sign { border-left: 1px solid var(--line); padding: 14px var(--space-5) 18px; display: grid; gap: 12px; align-content: start; }
.hl-vat-block { margin: 0; font-size: 13px; color: var(--attention); }
.hl-vat-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hl-vat-done { display: grid; gap: 6px; font-size: 13.5px; }
.hl-vat-done > span { color: var(--ink-3); font-size: 12.5px; }

/* Thread */
.hl-te-doc { display: inline-flex; gap: 6px; align-items: baseline; margin-top: 6px; padding: 3px 8px; border: 0; border-radius: var(--radius-xs); background: var(--tray); color: var(--ink); font: 13px var(--font-sans); cursor: pointer; }
.hl-te-doc span { color: var(--ink-3); font-size: 12px; }
.hl-te-doc b { font-weight: 500; }
.hl-te-link { border: 0; background: none; padding: 0; color: var(--action); font: 600 12.5px var(--font-sans); cursor: pointer; }
.hl-icon-btn svg { width: 16px; height: 16px; }

/* Drawer: the thread beside the client page */

/* Owner */
.hl-ostatus { background: var(--surface); box-shadow: var(--shadow-panel); border-radius: var(--radius-lg); padding: 16px 18px; display: grid; gap: 2px; }
.hl-ostatus b { font-size: 17px; line-height: 24px; font-weight: 600; }
.hl-ostatus > span { font-size: 13.5px; color: var(--ink-3); }
.hl-ostatus-done b { color: var(--ok); }
.hl-odocs { list-style: none; margin: 0; padding: 0; }
.hl-odocs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.hl-odocs li div b { display: block; font-weight: 500; font-size: 15px; }
.hl-odocs li div span { font: 12.5px var(--font-mono); color: var(--ink-3); }
.hl-odocs-unpaid { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.hl-oq { margin: 12px 0 0; font-size: 15px; }
.hl-oacts-2 { grid-template-columns: 1fr 1fr; }
.hl-olist-h { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 2px; }
.hl-olist-h b { font-size: 14px; font-weight: 600; }
.hl-olist-h span { font-size: 12.5px; color: var(--ink-3); }

/* Phone shell */
.hl-phone { width: 390px; min-height: 100vh; margin: 0 auto; background: var(--paper); display: flex; flex-direction: column; font-size: 15px; }
.hl-phone-bar { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--bar); color: var(--on-bar); }
.hl-phone-bar b { font-size: 16px; letter-spacing: -.02em; }
.hl-phone-back { font-size: 15px; }
.hl-phone-right { font: 500 13px var(--font-sans); color: var(--on-bar-2); }
.hl-phone-head { display: flex; justify-content: space-between; align-items: baseline; padding: 30px 20px 18px; background: var(--bar); color: var(--on-bar); }
.hl-phone-head b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.hl-phone-head span { font-size: 13px; color: var(--on-bar-2); }
.hl-phone-body { flex: 1; padding: 16px; display: grid; gap: 16px; align-content: start; }
.hl-phone-body h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.hl-phone-bottom { position: sticky; bottom: 0; padding: 12px 16px 18px; background: var(--surface); box-shadow: 0 -1px 0 var(--line); display: grid; gap: 8px; }
.hl-phone-tabs { position: sticky; bottom: 0; display: flex; justify-content: space-around; padding: 10px 0 18px; background: var(--surface); box-shadow: 0 -1px 0 var(--line); font-size: 12.5px; color: var(--ink-3); }
.hl-phone-tabs span.on { color: var(--action); font-weight: 600; }
.hl-phone-tabs i { font-style: normal; margin-left: 4px; color: var(--attention); font: 600 11.5px var(--font-mono); }
.hl-phone .hl-sec-h { padding-left: var(--space-4); padding-right: var(--space-4); }
.hl-phone .hl-first { padding: 22px 20px; }
.hl-phone .hl-vat { grid-template-columns: 1fr; }
.hl-phone .hl-vat-sign { border-left: 0; border-top: 1px solid var(--line); }
.hl-phone .hl-cl { padding-left: var(--space-4); padding-right: var(--space-4); grid-template-columns: 22px minmax(0,1fr); }
.hl-phone .hl-cl-r { grid-column: 2; }
@media (max-width: 640px) {
  .hl-vat { grid-template-columns: 1fr; }
}

.hl-cl-val.mono { font-family: var(--font-mono); }
.hl-count.text { font: 500 13px var(--font-sans); letter-spacing: 0; }
/* Phone: bank row stacks — who + amount on top, what Hilda did underneath. */
.hl-phone .hl-bank thead { display: none; }
.hl-phone .hl-bank tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hl-phone .hl-bank td { border: 0; padding: 0; height: auto; }
.hl-phone .hl-bank td:nth-child(1) { grid-column: 1; grid-row: 1; }
.hl-phone .hl-bank td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: start; padding-top: 1px; }
.hl-phone .hl-bank td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; margin-top: 6px; }
.hl-phone .hl-bank td:nth-child(2) .hl-two b { font-size: 13.5px; }
.hl-phone .hl-bank td:nth-child(4) { display: none; }
/* Phone: decision row stacks — supplier + amount on top, reason underneath. */
.hl-phone .hl-dec thead { display: none; }
.hl-phone .hl-dec tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hl-phone .hl-dec tbody tr:last-child { border-bottom: 0; }
.hl-phone .hl-dec td { border: 0; padding: 0; height: auto; }
.hl-phone .hl-dec td:nth-child(1) { grid-column: 1; grid-row: 1; }
.hl-phone .hl-dec td:nth-child(3) { grid-column: 2; grid-row: 1; }
.hl-phone .hl-dec td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; margin-top: 4px; font-size: 13.5px; }
.hl-phone .hl-dec td:nth-child(4) { display: none; }
.hl-phone .hl-msg span { white-space: normal; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* DirectionCard */
.hl-dir { display: grid; gap: 6px; padding: 16px 20px; background: var(--attention-tint); border-radius: var(--radius-md); }
.hl-dir b { font-weight: 600; font-size: 14.5px; }
.hl-dir span { font-size: 13px; color: var(--ink-2); }
.hl-dir-acts { display: flex; gap: 8px; margin-top: 6px; }
.hl-dir-rule { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* ---- cut pass ---- */
.hl-first { padding: 20px var(--space-5) 22px; max-width: none; }
.hl-first h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.hl-first-acts { gap: 6px; }
.hl-phone .hl-first { padding: 18px 16px; }
.hl-addr-row { background: none; box-shadow: none; padding: 0; justify-content: flex-start; gap: 12px; }
.hl-addr-row b { font: 500 14.5px var(--font-mono); }
.hl-addr-copy { font: 500 13px var(--font-sans); color: var(--action); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.hl-addr { gap: 2px; }
.hl-found { color: var(--ok) !important; }
.hl-vat-sign { gap: 8px; }
.hl-vat-block { font-size: 12.5px; }
.hl-vat-file { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.hl-vat-file svg { width: 14px; height: 14px; }
.hl-ostatus { box-shadow: none; background: none; padding: 4px 0 0; }
.hl-ostatus b { font-size: 20px; line-height: 26px; }
.hl-olinks { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.hl-olinks li { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 500; border-top: 1px solid var(--line); cursor: pointer; }
.hl-olinks li:first-child { border-top: 0; }
.hl-olinks li span:last-child { color: var(--ink-3); }
.hl-olinks li:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.hl-oblock { display: grid; gap: 4px; }
/* phone checklist: control sits on the line's right, not under it */
.hl-phone .hl-cl { grid-template-columns: 22px minmax(0,1fr) auto; }
.hl-phone .hl-cl-r { grid-column: auto; }
.hl-phone .hl-cl .hl-btn { height: 36px; padding: 0 12px; font-size: 14px; }
/* VAT: one column; signing is the footer line, not a half-empty side panel */
.hl-vat { grid-template-columns: 1fr; }
.hl-vat-rows { padding-bottom: 0; }
.hl-vat-sign { border-left: 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px var(--space-5) 14px; }
.hl-vat-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hl-vat-done > b { font-size: 14px; }
.hl-side .hl-btn-quiet { padding-left: 0; }
.trial-open + .hl-table thead { display: none; }

/* ==== Conversation ==== */
/* ---- Conversation ---- */
.hl-cv { display: grid; grid-template-rows: 1fr auto; }
.hl-cv-list { display: grid; gap: 6px; padding: 8px 0 16px; align-content: start; }
.hl-cv-earlier { justify-self: start; margin: 4px var(--space-5) 6px; border: 0; background: none; padding: 0; color: var(--action); font: 600 13px var(--font-sans); cursor: pointer; }
.hl-cv-letter { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline; padding: 6px var(--space-5); font-size: 12.5px; color: var(--ink-3); }
.hl-cv-letter time { font-variant-numeric: tabular-nums; }
.hl-cv-new { display: flex; align-items: center; gap: 10px; margin: 8px var(--space-5) 0; color: var(--attention); font-size: 12px; font-weight: 600; }
.hl-cv-new::after { content: ''; flex: 1; height: 1px; background: var(--attention); opacity: .45; }

.hl-msg2 { padding: 14px var(--space-5) 16px; }
.hl-msg2 > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hl-msg2 > header b { font-weight: 600; font-size: 14.5px; }
.hl-msg2 > header span { font-size: 12.5px; color: var(--ink-3); }
.hl-msg2 > header time { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hl-msg2 > header .hl-msg2-via { margin-left: auto; }
.hl-msg2-mine { background: var(--surface-sunk); border-radius: var(--radius-md); margin: 0 12px; padding-left: calc(var(--space-5) - 12px); padding-right: calc(var(--space-5) - 12px); }
.hl-msg2-auto { background: var(--tray); border-radius: var(--radius-md); margin: 0 12px; padding-left: calc(var(--space-5) - 12px); padding-right: calc(var(--space-5) - 12px); }
.hl-msg2-new > header b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--attention); margin-right: 7px; vertical-align: 2px; }
.hl-msg2-body { max-width: 64ch; }
.hl-msg2-body p { margin: 8px 0 0; font-size: 15px; line-height: 24px; }
.hl-msg2-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.hl-msg2-files li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.hl-msg2-files svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.hl-msg2-files a { color: var(--action); text-decoration: none; font-weight: 500; }
.hl-msg2-status { display: flex; gap: 12px; align-items: baseline; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.hl-msg2-danger { color: var(--danger); }

/* Composer: a writing surface, not a chat input */
.hl-cmp { border-top: 1px solid var(--line); padding: 14px var(--space-5) 16px; display: grid; gap: 8px; background: var(--surface); }
.hl-cmp-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-3); }
.hl-cmp-text { box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--radius-sm); padding: 6px 14px 10px; min-height: 72px; max-width: none; }
.hl-cmp-text p { margin: 6px 0 0; font-size: 15px; line-height: 24px; max-width: 64ch; }
.hl-cmp-text:not(.hl-cmp-empty) { box-shadow: inset 0 0 0 2px var(--action); }
.hl-cmp-empty { color: var(--ink-3); font-size: 15px; line-height: 24px; padding-top: 10px; }
.hl-cmp-files { margin: 0; }
.hl-cmp-bar { display: flex; align-items: center; gap: 14px; }
.hl-cmp-tool { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; color: var(--ink-2); font: 500 13px var(--font-sans); cursor: pointer; }
.hl-cmp-tool svg { width: 15px; height: 15px; }
.hl-cmp-sp { flex: 1; }
.hl-phone .hl-cmp { padding: 12px 16px 14px; }
.hl-phone .hl-msg2 { padding-left: 16px; padding-right: 16px; }
.hl-phone .hl-msg2-mine, .hl-phone .hl-msg2-auto { margin: 0 8px; padding-left: 8px; padding-right: 8px; }
.hl-phone .hl-cv-letter { padding-left: 16px; padding-right: 16px; grid-template-columns: 44px 1fr auto; }
.hl-phone .hl-cv-new { margin-left: 16px; margin-right: 16px; }

/* Saruna tab on desktop: the conversation in a panel, the month's facts beside it */
.hl-cv-panel { background: var(--surface); box-shadow: var(--shadow-panel); border-radius: var(--radius-md); overflow: hidden; }
.hl-cv-panel > .hl-cv-h { display: flex; justify-content: space-between; align-items: baseline; padding: 16px var(--space-5) 8px; }
.hl-cv-panel > .hl-cv-h b { font-size: 16px; font-weight: 600; }
.hl-cv-panel > .hl-cv-h span { font-size: 12.5px; color: var(--ink-3); }

/* MailFrame */
.hl-mail { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); overflow: hidden; }
.hl-mail-h { padding: 18px 24px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px; }
.hl-mail-h > b { font-size: 18px; font-weight: 600; }
.hl-mail-h > div { display: flex; gap: 8px; align-items: baseline; color: var(--ink-2); }
.hl-mail-h > div i { font-style: normal; color: var(--ink-3); }
.hl-mail-h > div time { margin-left: auto; color: var(--ink-3); }
.hl-mail-h .hl-mail-to { color: var(--ink-3); }
.hl-mail-b { padding: 8px 24px 22px; }
.hl-mail-b p { margin: 12px 0 0; font-size: 15px; line-height: 24px; max-width: 64ch; }
.hl-mail-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.hl-olinks-r { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); }
.hl-olinks-r .hl-unread { font-size: 12.5px; }
.hl-cmp-bar .hl-btn { width: auto; flex: none; padding: 0 22px; }
.hl-cmp-compact .hl-cmp-empty { min-height: 48px; }
.hl-phone .hl-msg2-files li { flex-wrap: wrap; row-gap: 2px; }
.hl-phone .hl-msg2-files a { flex-basis: 100%; padding-left: 23px; }

/* ==== Hilda direction · Tinte: an ink frame, white work lifted on cream, violet only for Hilda's ink ==== */
body { font-family: var(--font-sans); font-feature-settings: "tnum" 1, "cv11" 1, "ss03" 1; }
h1 { font-family: var(--font-serif); font-weight: 600; font-size: 32px; letter-spacing: -.01em; }
.hl-num, .hl-two-num b, .hl-navc, .hl-count, .hl-tab-c, .hl-step, .hl-odocs li div span { font-family: var(--font-sans); font-weight: 450; }
.hl-count { font-size: 13.5px; }
.hl-amount { font: 600 15px var(--font-sans); letter-spacing: -.005em; }
.hl-total b { font: 600 34px/40px var(--font-sans); letter-spacing: -.02em; }
.hl-oamt { font: 600 32px/38px var(--font-sans); letter-spacing: -.02em; }
.hl-vat-strong dd { font: 600 24px/30px var(--font-sans); }
.hl-due b { font: 600 20px/26px var(--font-sans); color: var(--ink); }

/* the bar: the ink frame. Hilda turns cream on it */
.hl-bar, .hl-phone-bar, .hl-phone-head { background: var(--bar); color: var(--on-bar); box-shadow: none; --cat: var(--on-bar); --cat-detail: var(--bar); }
[data-theme="dark"] .hl-bar, [data-theme="dark"] .hl-phone-bar, [data-theme="dark"] .hl-phone-head { box-shadow: inset 0 -1px 0 var(--bar-field); }
.hl-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 23px; font-weight: 700; letter-spacing: -.01em; color: var(--on-bar); }
.hl-logo .hl-mark { display: block; }
.hl-bar-field { background: var(--bar-field); box-shadow: inset 0 0 0 1px var(--bar-field-line); color: var(--on-bar); }
.hl-bar-search kbd { border-color: var(--bar-kbd-line); }
.hl-chip { color: var(--on-bar); border: 1px solid var(--bar-chip-line); border-radius: 2px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hl-avatar { background: var(--bar-field-hover); color: var(--on-bar); box-shadow: none; }
.hl-bar .hl-icon-btn:hover { background: var(--bar-field); }
.hl-phone-head b { font-family: var(--font-serif); font-size: 27px; letter-spacing: -.01em; color: var(--on-bar); }
.hl-phone-head span { color: var(--on-bar-2); }
.hl-phone-head { align-items: center; }
.hl-phone-head .hl-ph-r { display: flex; align-items: center; gap: 10px; }

/* controls: a mid-tone edge, never a frame */
.hl-btn { box-shadow: inset 0 0 0 1px var(--line-strong); }
.hl-btn-primary, .hl-btn-quiet { box-shadow: none; }
.hl-btn-primary:hover { filter: none; background: var(--ink-2); }
.hl-btn[disabled] { box-shadow: inset 0 0 0 1px var(--line); }
.hl-btn-touch { border-radius: 6px; }
.hl-cb { border-width: 1.5px; border-color: var(--line-strong); }
.hl-input, .hl-cmp-text { box-shadow: inset 0 0 0 1px var(--line-strong); }
.hl-cmp-text:not(.hl-cmp-empty) { box-shadow: inset 0 0 0 2px var(--stamp); }
.hl-btn:focus-visible, .hl-tr[tabindex]:focus-visible, .hl-cb:focus-visible, .hl-nav a:focus-visible, .hl-icon-btn:focus-visible, .hl-bar-field:focus-visible { outline-color: var(--focus); }

/* sections: her work lifted, Hilda's work recessed */
/* hierarchy: three tiers, about 1.3x apart. 1 the screen's name; 2 her work (Tev, the panel); 3 Hilda's work (the trays) */
.hl-head h1 { font-family: var(--font-serif); font-size: 46px; line-height: 48px; font-weight: 400; letter-spacing: -.02em; }
.hl-head p { font-size: 13px; margin-top: 6px; }
.hl-due b { font: 600 17px/22px var(--font-sans); color: var(--ink); }
.hl-app-main { gap: 28px; }
.hl-sec-h h2 { font-size: 16px; }
.hl-sec-panel > .hl-sec-h { padding: 20px var(--space-5) 12px; }
.hl-sec-panel > .hl-sec-h h2 { font-size: 22px; line-height: 28px; letter-spacing: -.015em; }
.hl-sec-panel > .hl-sec-h .hl-count { font-size: 22px; font-weight: 400; margin-left: 10px; }
.hl-sec-panel .hl-table thead { display: none; }
.hl-sec-panel .hl-two b { font-size: 15.5px; font-weight: 600; }
.hl-sec-panel .hl-two span { font-size: 13px; }
.hl-sec-panel .hl-reason-cell { font-size: 14.5px; }
.hl-sec-panel .hl-reason-cell:not(.hl-danger) { color: var(--ink); }
.hl-sec-panel .hl-amount { font-size: 17px; }
.hl-sec-panel .hl-table td { height: 64px; }
.hl-sec-tray { margin-top: -8px; }
.hl-sec-tray > .hl-sec-h h2 { font-size: 14px; color: var(--ink-2); }
.hl-sec-tray > .hl-sec-h .hl-count { font-size: 13px; }
.hl-sec-tray .hl-two b { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.hl-sec-tray .hl-amount { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.hl-sec-tray .hl-table td { height: 52px; }
/* the black button belongs to her work: in a tray it is secondary, until Tev is empty */
.hl-sec-tray .hl-btn-primary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
:has(> .hl-sec-panel .hl-empty) > .hl-sec-tray .hl-btn-primary { background: var(--action); color: var(--on-action); box-shadow: none; }
.hl-phone .hl-sec-panel .hl-table td, .hl-phone .hl-sec-tray .hl-table td { height: auto; }
.hl-phone .hl-sec-panel > .hl-sec-h { padding: 16px 16px 8px; }
.hl-phone-body h1 { font-family: var(--font-serif); font-size: 30px; line-height: 34px; font-weight: 400; letter-spacing: -.015em; }
/* owner: the status is the screen's title; lists are labelled, not headed */
.hl-ostatus { padding-top: 8px; }
.hl-ostatus b { font-family: var(--font-serif); font-size: 31px; line-height: 34px; font-weight: 600; letter-spacing: -.015em; }
.hl-olist-h b { font-size: 12.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.hl-addr-lbl { font-size: 13px; color: var(--ink-3); }
.hl-addr-row b { font-size: 16px; }
.hl-sec-h h2, .hl-cv-panel > .hl-cv-h b { letter-spacing: -.005em; }
.hl-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-panel); }
.hl-ocard { box-shadow: var(--shadow-panel); }
.hl-status-ok, .hl-olbl-ok, .hl-ostatus-done b, .hl-found { color: var(--ok) !important; }
.hl-unread { background: var(--attention); color: var(--surface); font-family: var(--font-sans); }
.hl-msg2-mine, .hl-te-mine { background: var(--surface-sunk); }

/* Hilda's pieces */
.hl-wordmark { display: inline-flex; align-items: center; gap: .3em; font-family: var(--font-serif); font-weight: 700; letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.hl-wordmark .hl-mark { display: block; }
.hl-stamp { display: block; overflow: visible; }
.hl-icon { display: block; flex: none; }
.hl-art { margin: 0; background: var(--paper); border-radius: var(--radius-md); overflow: hidden; }
.hl-art img { display: block; width: 100%; height: auto; }
.hl-art figcaption { padding: 8px 12px; font-size: 12.5px; color: var(--ink-3); background: var(--surface-sunk); border-top: 1px solid var(--line); }

/* ===== SCREEN LAYOUTS, from the screen previews' own styles (BoardScreen, ClientScreen,
   DocumentScreen, DocumentScreenPhone, OwnerScreen), carried over from the Egle build;
   the Hilda previews set the same values. ===== */
.scr{min-height:100vh;background:var(--paper);display:grid;grid-template-rows:auto 1fr}
.scr-body{display:grid;grid-template-columns:var(--nav-width) minmax(0,1fr)}
.scr-main{padding:28px 36px 40px;display:grid;gap:22px;align-content:start;min-width:0}
.scr-due{text-align:right;display:grid;gap:1px}
.scr-due span{font-size:12.5px;color:var(--ink-3)}
.scr-due b{font:500 20px/26px var(--font-mono);color:var(--action)}
.scr-two{display:grid;grid-template-columns:minmax(0,1fr) var(--side-column);gap:32px;align-items:start}
.scr-col{display:grid;gap:22px;min-width:0}
.scr-tabs{display:flex;gap:4px;align-items:center}
.scr-tabs a{padding:6px 12px;border-radius:var(--radius-sm);color:var(--ink-2);font-weight:500;text-decoration:none}
.scr-tabs a[aria-current="page"]{background:var(--surface);color:var(--action);box-shadow:var(--shadow-panel)}
.scr-tabs a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.doc-head{padding:24px 36px 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.doc-head h1{margin:0;font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.02em}
.doc-head p{margin:0;font-size:13px;color:var(--ink-3)}
.doc-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,1fr);gap:24px;padding:0 36px 36px;align-items:start}
.viewer{background:var(--tray);border-radius:var(--radius-md);padding:16px 22px 26px;min-width:0}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-3);margin-bottom:14px;gap:12px}
.viewer-bar button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs)}
.viewer-bar button:hover{color:var(--ink);background:var(--surface-sunk)}
.viewer-bar button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ===== NEW RULES for what the design implies but does not draw. Tokens only. ===== */
:root{--paper-sheet:#ffffff;--paper-ink:#6a6356}   /* the scanned page stays paper-white in both themes, and text on it keeps the light theme's ink-3 (DocumentScreen README; Hilda's ink-3, 5.9:1 on white) */
.hs-sheet{background:var(--paper-sheet);border-radius:2px;box-shadow:var(--shadow-paper);overflow:hidden}
.hs-sheet img{display:block;width:100%;height:auto}
.hs-sheet object{display:block;width:100%;height:70vh;border:0}
.hs-skel{height:12px;width:40%;border-radius:var(--radius-xs);background:var(--line)}
.hs-row-err{display:block;font-size:12.5px;color:var(--danger);margin-top:2px}
.hs-err{color:var(--danger)}
/* a refusal under a field is red like any other: `.hl-field dd small` (ink-3) outweighed .hs-err, so Apstiprināt's reason under Konts read as a grey note (N27) */
.hl-field dd small.hs-err{color:var(--danger)}
.hs-block{margin:-8px 0 14px;font-size:12.5px;color:var(--attention)}
.hs-in{font:inherit;font-size:14px;height:var(--control-height);padding:0 10px;border:0;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--surface);color:var(--ink);width:100%;max-width:260px}
.hs-in:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hs-mono{font-family:var(--font-mono)}
.hs-ask{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:4px}
.hs-qa{margin:14px 0 6px;padding:12px 0 4px;border-top:1px solid var(--line);display:grid;gap:4px;font-size:13.5px}
.hs-qa span{color:var(--ink-3);font-size:12.5px}
/* N26 (2026-10-08): "Sasaistīt ar rēķinu" on a bank line, and the quiet list of lines that
   repeat a payment already loaded. */
.bk-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:6px 0}
.bk-link>div{min-width:0}
.bk-repeats{padding:12px 20px 16px;display:grid;gap:4px;font-size:12.5px;border-top:1px solid var(--line)}
.bk-repeats>.hl-ink3{padding-bottom:4px}
.bk-repeat{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:var(--space-3);padding:6px 0;color:var(--ink-2);cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums}
.bk-repeat small{display:block;margin-top:2px;color:var(--ink-3);font-size:12.5px;overflow-wrap:anywhere}
.bk-repeat:hover>span:nth-child(2),.bk-repeat:focus-visible>span:nth-child(2){color:var(--ink);text-decoration:underline}
.bk-repeat:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* The owner's own words on the row she decides (N04, 2026-10-08): set apart from the system's
   labels by quotes and full ink, never truncated, because the point is that she reads all of it. */
.hs-quote{display:block;margin-top:3px;font:400 13.5px/19px var(--font-sans);color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.hl-reason-cell .hs-quote{max-width:46ch}
.hs-qa .hs-quote{color:var(--ink);font-size:13.5px}
.hs-answer{padding:var(--space-2) var(--space-5) var(--space-5);display:grid;gap:12px}
.hs-answer blockquote{margin:0;padding:2px 0 2px 14px;border-left:2px solid var(--line-strong);font-size:16px;line-height:24px;color:var(--ink);overflow-wrap:anywhere}
.hs-answer-meta{font-size:12.5px;color:var(--ink-3)}
.hs-answer .hl-row-flex{flex-wrap:wrap}
.hs-menu{position:absolute;z-index:20;min-width:200px;background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-menu);padding:4px;display:grid}
.hs-menu button{font:inherit;text-align:left;background:none;border:0;padding:8px 12px;border-radius:var(--radius-xs);color:var(--ink);cursor:pointer;display:flex;gap:8px;align-items:center}
.hs-menu button svg{width:12px;height:12px;color:var(--action)}
.hs-menu button:hover,.hs-menu button:focus-visible{background:var(--surface-sunk);outline:none}
.hl-bar-search input{flex:1;min-width:0;background:none;border:0;color:var(--on-bar);font:inherit;outline:none}
.hl-bar-search input::placeholder{color:var(--on-bar-2)}
.hl-bar-search:focus-within{box-shadow:inset 0 0 0 1px var(--on-bar-2)}
.hl-logo{color:var(--on-bar);text-decoration:none}
.hl-avatar{border:0;color:var(--on-bar);font-family:inherit;cursor:pointer}
.hl-avatar:focus-visible,.hl-bar-month:focus-visible{outline:2px solid var(--on-bar);outline-offset:2px}
.hl-bar-month{cursor:pointer}
.hs-results{position:absolute;z-index:20;background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-menu);padding:4px;display:grid;min-width:320px;max-width:440px}
.hs-results a{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:var(--radius-xs);color:var(--ink);text-decoration:none}
.hs-results a span{color:var(--ink-3);font-size:12.5px}
.hs-results a:hover,.hs-results a:focus-visible,.hs-results a[aria-selected="true"]{background:var(--surface-sunk);outline:none}
/* N35 (2026-10-08): the account picker under Konts, the same menu surface as .hs-results.
   Listed in hilda-design-system/LOCAL-CHANGES.md. */
.hs-acc-wrap{position:relative}
.hs-acc-list{position:absolute;left:0;top:calc(var(--control-height) + 4px);z-index:20;background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-menu);padding:4px;display:grid;width:min(420px,calc(100vw - 32px));max-height:340px;overflow:auto}
.hs-acc-list[hidden]{display:none}
.hs-acc-opt{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline;padding:8px 10px;border-radius:var(--radius-xs);color:var(--ink);cursor:pointer;font-size:14px;line-height:1.35}
.hs-acc-opt span{color:var(--ink-2)}
.hs-acc-opt:hover,.hs-acc-opt[aria-selected="true"]{background:var(--surface-sunk)}
.hs-acc-none{margin:0;padding:8px 10px;color:var(--ink-3);font-size:13px;line-height:1.4}
.hs-acc-act{font:inherit;font-size:14px;text-align:left;padding:8px 10px;border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:var(--radius-xs)}
.hs-acc-act:hover{background:var(--surface-sunk)}
.hs-acc-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 10px 10px}
.hs-acc-add .hs-in{flex:1 1 180px;max-width:none}
.hs-acc-add .hs-err{flex-basis:100%}
.hs-acc-src{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:4px;padding:8px 10px 6px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px}
.hs-acc-load{color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hs-acc-load:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hs-letter{background:var(--paper-sheet);border-radius:var(--radius-md);box-shadow:var(--shadow-paper);overflow:hidden}
.hs-letter iframe{display:block;width:100%;height:520px;border:0}
.hs-refused{max-width:420px;margin:15vh auto;padding:0 16px;display:grid;gap:8px}
.hs-refused h1{margin:0;font-size:22px;line-height:28px;font-weight:600}
.hs-refused p{margin:0;color:var(--ink-3)}
.hl-sec-tray .hl-tr:hover td{background:color-mix(in srgb, var(--surface) 35%, transparent)}
.hs-tabbar{display:none}
.hl-check small{display:block;font-size:12px;color:var(--ink-3);margin-left:26px}
/* 2026-10-08, N02/N08: her answer to a tick (which basis), the refusal that stays on the close
   card, and a reason she writes. Tokens only. */
.hs-choice{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:2px 0 4px 26px}
.hs-close-err{margin:12px 0 0;font-size:13px;line-height:1.5}
.hs-held{margin-top:var(--space-4);font-size:13px;line-height:1.5}
.hs-held p{margin:0 0 var(--space-2)}
.hs-held ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-3)}
.hs-held li{color:var(--ink-2)}
.hs-held b{display:block;color:var(--ink);font-weight:600}
.hs-held span{display:block;color:var(--ink);margin-top:2px}
.hs-area{height:auto;min-height:80px;padding:8px 10px;max-width:none;line-height:1.45;resize:vertical}
.hs-risk{padding-top:var(--space-4)}
/* 2026-10-08, N09: her figure from the filed return, the one the client is shown. Tokens only. */
.hs-payable{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line);display:grid;gap:var(--space-2);font-size:13px;line-height:1.5}
.hs-payable>span{color:var(--ink-2)}
.hs-payable>b{font-size:15px;font-weight:600;color:var(--ink)}
.hs-payable small{display:block;font-size:12px;color:var(--ink-3)}
.hs-payable .hl-btn{justify-self:start}
.hs-payable-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.hs-payable-row label{display:grid;gap:4px;color:var(--ink-3);font-size:12.5px}
.hs-payable-row .hs-in{max-width:none;min-width:0}
/* N23: a received document's amounts per VAT rate (code, bez PVN, PVN), typed off the paper. Tokens only. */
.hs-vls{display:grid;gap:var(--space-2)}
.hs-vl{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 28px;gap:var(--space-2);align-items:center}
.hs-vl .hs-in{max-width:none;min-width:0}
.hs-vl-add{font:inherit;font-size:13px;background:none;border:0;padding:var(--space-2) 0 0;color:var(--ink-2);text-decoration:underline;cursor:pointer;justify-self:start}
.hs-vl-add:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:640px){
  .hs-vl{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}
  .hs-vl select{grid-column:1 / -1}
}
.hl-check small[data-sales-in]{color:var(--ink-2)}

.hs-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:var(--radius-sm);font-size:13.5px;box-shadow:var(--shadow-menu)}
.hs-form{display:grid;gap:10px;padding:4px var(--space-5) 18px;max-width:420px}
.hs-form label{display:grid;gap:4px;font-size:12.5px;color:var(--ink-3)}
.hs-letters{display:grid;gap:10px;padding:0 var(--space-5) var(--space-5)}
.hs-letterhead{font-size:12.5px}

.hs-in,.own-in,.hs-menu,.hs-results,.hs-ask,.hs-form,.hs-toast{box-sizing:border-box}
.viewer-bar .hs-zoom{display:inline-flex;align-items:center;gap:0}
.viewer-bar .hs-zoom button{padding:0 3px}
.hl-cb:indeterminate{background:var(--action);border-color:var(--action)}
.hl-cb:indeterminate::after{content:"";width:8px;height:0;border:solid var(--on-action);border-width:0 0 1.8px 0;transform:none}
.hl-tr[data-prepared],.hl-tr[data-gap]{cursor:pointer}
.hs-thumb{display:none}
.hs-prop{display:block;font:12.5px/16px var(--font-sans);color:var(--ink-3);margin-top:1px}
.hs-prop .hs-pm{font-family:var(--font-mono)}
.hs-why{display:block;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.hl-reason-cell.hl-danger .hs-prop{font-weight:400;color:var(--ink-3)}
.hs-full{position:fixed;inset:0;z-index:40;background:var(--paper);overflow:auto;padding:12px}
.hs-full img{display:block;width:100%;height:auto;background:var(--paper-sheet);box-shadow:var(--shadow-paper)}
.ph-top{display:none}

/* Fixes from the blind reviews, 2026-10-07 (plans/hilda/QA-2026-10-07.md) */
[hidden]{display:none !important}
/* round 2 blind reviews */
.hl-sec .hl-tr[tabindex]:focus-visible{outline-offset:-2px}   /* the panel clips an outside ring */
.hs-menu button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hl-btn:disabled,.hl-btn:disabled:hover{background:var(--surface-sunk);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);filter:none;cursor:not-allowed}
.hs-check{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-size:13.5px;font-weight:500}
.hs-why-err{color:var(--danger)}
.hs-why a{color:inherit;text-decoration:underline}
.hs-sheet-wait{aspect-ratio:1/1.414;background:var(--paper-sheet)}
.hl-book td:last-child,.hl-book th:last-child{padding-right:12px}
.hl-dec{table-layout:fixed}
.hl-dec th:nth-child(1),.hl-dec td:nth-child(1){width:34%}
.hl-dec th:nth-child(3),.hl-dec td:nth-child(3){width:14%}
.hl-dec th:nth-child(4),.hl-dec td:nth-child(4){width:40px}   /* a rule with display set (.hs-why) beat the hidden attribute: a hint stayed after it was true */
.hl-posting,.hl-fields,.hl-field dd{min-width:0}
.hl-posting{grid-template-columns:minmax(0,1fr)}   /* the panel's one grid column grew to its widest field's min-content */
.hl-field dd{overflow-wrap:anywhere}   /* a long IBAN pushed the field rows 16px past the card on a phone */
.hl-logo:focus-visible{outline:2px solid var(--on-bar);outline-offset:2px;border-radius:var(--radius-xs)}
.hl-bar-search:focus-within{box-shadow:inset 0 0 0 1px var(--bar-field-line);outline:2px solid var(--on-bar);outline-offset:2px}
.hs-toast{display:flex;align-items:center;gap:12px}
.hs-toast-act{font:inherit;font-weight:600;background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:4px 2px}
.hs-toast-act:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* "Air": a whitespace variant for R to compare (2026-10-07, R: "the design system did a shitty job
   with white space"). On only with ?air=1; desktop only. What it changes and why:
   - a reading column: content stops at 1080px instead of running to the window's edge, so the
     name, reason and amount of a row sit closer together and the eye does not travel 900px;
   - the three sections stand apart (22 -> 40px) and the title gets room under it, so Tev,
     Hilda's trays and the head read as separate blocks rather than one slab;
   - Hilda's tray rows open from 52 to 60px and every row gets 28px at the sides instead of 20.
   Row heights for Tev (64px) and the type stay as the design set them. */
@media (min-width:641px){
  :root[data-air] .scr-main{padding:44px 56px 64px;gap:40px;max-width:1080px}
  :root[data-air] .hl-head{margin-bottom:4px}
  :root[data-air] .hl-head p{margin-top:10px}
  :root[data-air] .hl-sec-h{padding-left:28px;padding-right:28px}
  :root[data-air] .hl-sec-panel > .hl-sec-h{padding-top:26px;padding-bottom:16px}
  :root[data-air] .hl-table td:first-child,:root[data-air] .hl-table th:first-child{padding-left:28px}
  :root[data-air] .hl-table td:last-child,:root[data-air] .hl-table th:last-child{padding-right:28px}
  :root[data-air] .hl-sec-tray .hl-table td{height:60px}
  :root[data-air] .hl-sec-tray > .hl-sec-h{padding-top:20px;padding-bottom:12px}
  :root[data-air] .hl-empty{padding:20px 28px 26px}
}

/* The client list keeps its column heads. Tinte drops heads in her panels so Tev reads as rows of
   work (README, three tiers); on the client list that left four unlabeled numbers per row, the
   design's own ClientList render included. A deliberate difference: plans/hilda/ALLOWED-DIFFERENCES.md. */
.hl-sec-panel .hl-table.hl-clients thead{display:table-header-group}

/* ===== PHONE: one breakpoint, as bundle.css (640px). ===== */
@media (max-width:640px){
  .scr-body{grid-template-columns:minmax(0,1fr)}
  .scr-body > .hl-nav{display:none}
  .scr-main{padding:16px 16px 88px}
  .hl-head{flex-wrap:wrap;align-items:flex-start}
  .hl-head h1{font-size:30px;line-height:34px}
  .scr-two{grid-template-columns:minmax(0,1fr)}
  .hl-side{width:auto}
  .hl-bar{padding:0 12px;gap:8px}
  .hl-bar-search{display:none}
  .hl-chip{display:none}
  .doc-head{padding:16px 16px 12px}
  .doc-head h1{font-size:22px;line-height:28px}
  .doc-split{grid-template-columns:minmax(0,1fr);padding:0 16px 96px;gap:16px}
  .hs-tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);box-shadow:0 -1px 0 var(--line)}
  .hs-tabbar a{height:var(--row-height-touch);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-2);text-decoration:none;font-weight:500}
  .hs-tabbar a[aria-current="page"]{color:var(--action);font-weight:600}
  .ph-bar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px 20px;background:var(--surface);box-shadow:0 -1px 0 var(--line)}
  .hs-hide-phone{display:none}
  /* the phone document view, as DocumentScreenPhone */
  .ph-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bar);color:var(--on-bar)}
  .ph-top .hl-icon-btn{color:var(--on-bar);font-size:15px;padding:0 8px;width:auto}
  .ph-top span{font:13px var(--font-mono);color:var(--on-bar-2)}
  .hs-doc > .hl-bar{display:none}
  .doc-head{display:block}
  .doc-head p{margin-top:2px;font-size:12.5px}
  .doc-split .viewer{display:none}
  .hs-thumb{display:block;position:relative;height:168px;overflow:hidden;background:var(--paper-sheet);border-radius:var(--radius-md);box-shadow:var(--shadow-paper);cursor:pointer;border:0;padding:0;width:100%;text-align:left}
  .hs-thumb img{width:100%;display:block}
  .hs-thumb span{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--paper-ink);background:var(--paper-sheet);padding:0 4px}
  .doc-split .hl-posting .hl-actions{display:none}
  .hl-field[data-phone="hide"]{display:none}
  [data-section="sagatavoti"] .hl-two-num > span{display:none}
  /* the supplier keeps half the row, so "✓ atsūtīja 07.09." cannot crush it to one word a line
     (BoardMessagesPhone draws the name at about half the width) */
  [data-section="prasits"] .hl-table td:first-child{width:52%}
  [data-section="prasits"] .hl-status{white-space:normal}
  /* the prepared tray's aside ("konts un PVN kā jūlijā") is a desktop note; on a phone it
     wrapped the heading onto three lines beside the button */
  [data-section="sagatavoti"] .hl-aside{display:none}
  /* phones (blind design review, 2026-10-07): controls reach the 52px the README sets, rows open
     at a thumb's height, and Tev keeps to name, client, reason and amount */
  .hl-clients .hl-tr td{height:52px}
  .hl-bar-month,.hl-avatar{min-height:44px;min-width:44px}
  .hl-icon-btn{min-width:44px;min-height:44px}
  .hl-cb{width:22px;height:22px}
  .hs-prop{display:none}
  .scr .hl-dec td,.scr .hl-dec th{width:auto}
  /* booking names on one line on a phone, as DocumentScreenPhone (round 4 fidelity) */
  .hl-book .hl-two-num > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
}
@media (min-width:641px){ .ph-bar{display:none} }

/* ===== PHONE, from the design: bundle.css draws its phone layouts inside a 390px card frame
   (`.hl-phone`); the live screen gets the same rules below 640px. Generated once from the
   `.hl-phone …` rules of bundle.css, in their order, so a later rule still wins. ===== */
@media (max-width:640px){
  .scr .hl-sec-h { padding-left: var(--space-4); padding-right: var(--space-4); }
  .scr .hl-first { padding: 22px 20px; }
  .scr .hl-vat { grid-template-columns: 1fr; }
  .scr .hl-vat-sign { border-left: 0; border-top: 1px solid var(--line); }
  .scr .hl-cl { padding-left: var(--space-4); padding-right: var(--space-4); grid-template-columns: 22px minmax(0,1fr); }
  .scr .hl-cl-r { grid-column: 2; }
  .scr .hl-bank thead { display: none; }
  .scr .hl-bank tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .scr .hl-bank td { border: 0; padding: 0; height: auto; }
  .scr .hl-bank td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .scr .hl-bank td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: start; padding-top: 1px; }
  .scr .hl-bank td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; margin-top: 6px; }
  .scr .hl-bank td:nth-child(2) .hl-two b { font-size: 13.5px; }
  .scr .hl-bank td:nth-child(4) { display: none; }
  .scr .hl-dec thead { display: none; }
  .scr .hl-dec tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .scr .hl-dec tbody tr:last-child { border-bottom: 0; }
  .scr .hl-dec td { border: 0; padding: 0; height: auto; }
  .scr .hl-dec td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .scr .hl-dec td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .scr .hl-dec td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; margin-top: 4px; font-size: 13.5px; }
  .scr .hl-dec td:nth-child(4) { display: none; }
  .scr .hl-msg span { white-space: normal; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .scr .hl-first { padding: 18px 16px; }
  .scr .hl-cl { grid-template-columns: 22px minmax(0,1fr) auto; }
  .scr .hl-cl-r { grid-column: auto; }
  .scr .hl-cl .hl-btn { height: 36px; padding: 0 12px; font-size: 14px; }
  .scr .hl-cmp { padding: 12px 16px 14px; }
  .scr .hl-msg2 { padding-left: 16px; padding-right: 16px; }
  .scr .hl-msg2-mine, .scr .hl-msg2-auto { margin: 0 8px; padding-left: 8px; padding-right: 8px; }
  .scr .hl-cv-letter { padding-left: 16px; padding-right: 16px; grid-template-columns: 44px 1fr auto; }
  .scr .hl-cv-new { margin-left: 16px; margin-right: 16px; }
  .scr .hl-msg2-files li { flex-wrap: wrap; row-gap: 2px; }
  .scr .hl-msg2-files a { flex-basis: 100%; padding-left: 23px; }
  .scr .hl-sec-panel .hl-table td, .scr .hl-sec-tray .hl-table td { height: auto; }
  .scr .hl-sec-panel > .hl-sec-h { padding: 16px 16px 8px; }
}

/* The payment screen (2026-10-08): the bank line is the paper, and on a phone it and the
   Grāmatot button stay on screen (the document view hides both for its own phone layout). */
.bp-sheet{padding:6px 24px 10px;color:var(--paper-ink)}
.bp-sheet .hl-field dt,.bp-sheet .hl-field dd{color:var(--paper-ink)}
.hs-booked{display:flex;align-items:center;margin-right:auto}
.hs-pay .hl-total + .hl-actions{margin-top:16px}
/* A document or payment screen has four rows (bar, phone top, head, split), and `.scr` sizes two:
   the empty phone top took the 1fr, so a short screen (a repeated bank line, N26) drew its title
   halfway down an empty page. The split takes the rest instead. */
.scr.hs-doc{grid-template-rows:auto auto auto 1fr}
@media (max-width:640px){
  .hs-pay .doc-split .viewer{display:block}
  .hs-pay .doc-split .hl-posting .hl-actions{display:flex;flex-wrap:wrap}
}
/* N03, 2026-10-08: a four-figure Kt amount (Depo DIY 1180.40) pushed the booking lines 6px past
   the card on a phone; the 12px end padding above is for the desktop card only */
@media (max-width:640px){ .hl-book td:last-child,.hl-book th:last-child{padding-right:0} }
.hl-why-ok::before{background:var(--ok)}   /* N03: the approved line on a reopened document */
.hs-notes{margin:0;border-top:0;font-size:15px;line-height:22px;gap:2px 0}
.hs-notes span:not(:first-child){margin-top:10px}
/* N13 (2026-10-08): the month's own invoices under "Izrakstītie rēķini" on her close card */
.hs-issued{list-style:none;margin:2px 0 8px 26px;padding:0;display:grid;gap:8px}
.hs-issued li{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.hs-issued li small{display:block;color:var(--ink-3)}
.hs-issued-acts{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.hs-issued-acts .hs-in{max-width:140px}

/* N11, 2026-10-08: onboarding from her screen. The owner's link is shown once, wide enough to
   read; a submitted part of the client file opens from its Lieta row; inside it the question
   column is wider than the booking panel's 104px, because the sheet's questions are sentences. */
a.hl-btn{text-decoration:none}
.hs-invite{max-width:620px}
.hs-invite .hs-in{max-width:none}
.hs-invite p{margin:0}
.hs-part-link{display:block;color:inherit;text-decoration:none}
.hs-part-link:hover b,.hs-part-link:focus-visible b{text-decoration:underline}
.hs-part-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)}
.hl-sec-panel > .hs-part{margin:0 var(--space-5) var(--space-5)}
.hs-part .hl-field{grid-template-columns:minmax(140px,36%) minmax(0,1fr)}
.hs-part .hs-sheet img{max-width:640px;margin:0 auto 6px}
.hs-part-rules{margin:16px -22px 0}
.hs-part-rules .hl-field{padding-left:22px;padding-right:22px}
@media (max-width:640px){ .hs-part .hl-field{grid-template-columns:minmax(0,1fr);gap:2px} }

/* N16: what the Moneo zip leaves out, beside the file (the Neiekļauti.txt lines). Tokens only. */
.hs-mheld{margin-top:var(--space-3)}
.hs-mheld small{display:block;font-size:inherit;color:var(--ink-2);margin-top:2px}
/* N28: new cards with no PVN number, above what the file leaves out, set apart from it */
.hs-mvat{margin-bottom:var(--space-5)}
/* N34: the PVN status VID's register gave each card: one quiet line per card, after the cards
   that need her, because a register "Jā" is information, not a task. Tokens only. */
.hs-mvat-reg{margin-top:var(--space-3)}
.hs-mvat-reg ul{gap:var(--space-1)}
.hs-mvat-reg b{font-weight:400}
.hs-mvat-reg small{margin:0}
/* N31: an owner's message on Šodien, inset like the table rows above it */
.hs-omsg{margin:0;padding:12px var(--space-5) 16px}
.hs-omsg .hl-row-flex{margin-top:8px}
.hs-omsg .hs-in{margin-top:8px;width:100%;box-sizing:border-box}

/* TO-REAL-CUSTOMER T04 (2026-10-08): a firm waiting for approval, said above every screen */
.hs-held{margin:0 0 16px;padding:10px 14px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--surface);color:var(--ink-2);font-size:14px;line-height:20px}