/* FINAPLA dashboard — UI rework (ADR-0039, owner approved 3 Nov 2026).
   Mature, square, dense: 4px controls, 6px panels, 1px lines, 13px base, teal for actions only.
   Class names are unchanged from the previous design so app.js behaviour is untouched. */
:root {
  --bg: #F5F7F7; --card: #FFFFFF; --chip: #F0F3F3; --line: #E0E5E5; --line2: #C8D0D1;
  --ink: #0D1B21; --ink2: #34434B; --muted: #5B6870;
  --teal: #0B7D6C; --teal-deep: #086456; --teal-soft: #E2F1EE; --on-teal: #FFFFFF;
  --pill: #0D1B21; --pill-ink: #FFFFFF; --rail: #0D1B21; --rail-ink: #C3CFD3; --rail-muted: #7F9198; --rail-on: #2BBFA3;
  --amber: #94520A; --amber-soft: #FBEFDF; --red: #B42318; --red-soft: #FCE9E7; --blue: #1D5BA6; --blue-soft: #E7F0FA;
  --hero: #0D1B21; --hero-ink: #E4EBEE; --hero-muted: #9FB0B7; --glow: rgba(43, 191, 163, .25);
  --overlay: 0 12px 32px rgba(13, 27, 33, .14); --shadow: none;
  --font: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #091014; --card: #0F181D; --chip: #152128; --line: #213039; --line2: #2E414C;
  --ink: #E4EBEE; --ink2: #C2CDD2; --muted: #8D9DA6;
  --teal: #2BBFA3; --teal-deep: #4FD3BA; --teal-soft: #0F2E29; --on-teal: #03130F;
  --pill: #E4EBEE; --pill-ink: #091014; --rail: #060C0F;
  --amber: #E9AE62; --amber-soft: #2E2210; --red: #FF8B7C; --red-soft: #3A1714; --blue: #7FB2EE; --blue-soft: #11233A;
  --hero: #0F181D; --overlay: 0 12px 32px rgba(0, 0, 0, .55); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 13px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* buttons and chips */
.btn { height: 32px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn:hover { background: var(--chip); }
/* the dark button was the old main action: it is teal now, like the mockups */
.btn.dark { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn.dark:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn.teal { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn.teal:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn.card { background: var(--card); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: default; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; font-size: 11.5px; font-weight: 500; border-radius: 3px; padding: 0 7px; background: var(--chip); color: var(--ink2); white-space: nowrap; }
.tag.good { background: var(--teal-soft); color: var(--teal-deep); }
.tag.warn { background: var(--amber-soft); color: var(--amber); }
.tag.bad { background: var(--red-soft); color: var(--red); }
.tag.info { background: var(--blue-soft); color: var(--blue); }
.avatar { width: 28px; height: 28px; border-radius: 4px; background: var(--chip); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.avatar.teal { background: var(--teal-soft); color: var(--teal-deep); }

/* top bar */
.top { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; position: sticky; top: 0; z-index: 30; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; min-width: 200px; font-weight: 700; letter-spacing: .14em; font-size: 13px; }
.brand svg, .brand img { width: 22px; height: 22px; }
.ask { flex: 0 1 480px; margin: 0 auto; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--chip); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px 0 10px; height: 32px; }
.ask:focus-within { border-color: var(--teal); background: var(--card); box-shadow: 0 0 0 3px var(--teal-soft); }
.ask .ico { color: var(--teal); }
.ask input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; height: 30px; font-size: 13px; }
.ask kbd { font: inherit; font-size: 11px; color: var(--muted); border: 1px solid var(--line2); border-radius: 3px; padding: 0 5px; line-height: 16px; }
.live-btn { height: 32px; padding: 0 12px 0 8px; border-radius: 4px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font-weight: 500; font-size: 13px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.live-btn:hover { background: var(--chip); }
.live-dot { width: 18px; height: 18px; color: var(--teal); display: grid; place-items: center; }
.live-dot .ico { width: 16px; height: 16px; }
.live-btn[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-deep); font-weight: 600; }
.live-btn[aria-pressed="true"] .live-dot { animation: pulse 1.4s ease-in-out infinite; border-radius: 50%; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px var(--glow); } }
.create-btn { height: 32px !important; border-radius: 4px !important; }
.icon-btn { width: 32px; height: 32px; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--ink2); display: grid; place-items: center; position: relative; }
.icon-btn:hover { background: var(--chip); }
.icon-btn .badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.who { height: 36px; padding: 0 8px 0 4px; border-radius: 4px; border: 1px solid transparent; background: transparent; display: flex; align-items: center; gap: 8px; text-align: left; }
.who:hover { background: var(--chip); }
.who .avatar { background: var(--ink); color: var(--card); }
.who small { display: block; font-size: 11px; color: var(--muted); }
.menu { position: absolute; z-index: 50; background: var(--card); border: 1px solid var(--line2); box-shadow: var(--overlay); border-radius: 6px; padding: 4px; min-width: 230px; display: flex; flex-direction: column; gap: 1px; }
.menu button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 10px; border-radius: 4px; font-size: 13px; display: flex; gap: 10px; align-items: center; color: var(--ink); }
.menu button:hover, .menu button:focus-visible { background: var(--chip); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu-h { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }

/* layout: ink menu on the left, page on the right */
.layout { display: flex; align-items: stretch; min-height: calc(100vh - 52px); }
.rail { flex: 0 0 216px; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; z-index: 25; display: flex; flex-direction: column; gap: 2px; background: var(--rail); padding: 8px; }
.rail-who { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rail-who .who { width: 100%; height: 44px; color: #fff; }
.rail-who .who:hover { background: rgba(255,255,255,.06); }
.rail-who .who .avatar { background: rgba(255,255,255,.12); color: #fff; }
.rail-who .who small { color: var(--rail-muted); }
.rail-who .who .name { flex: 1 1 auto; min-width: 0; }
.rail-who .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-who .menu { left: 0; right: auto !important; top: 50px !important; color: var(--ink); }
.rail .group { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--rail-muted); padding: 14px 10px 6px; }
.rail > button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--rail-ink); }
.rail > button:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail > button[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; }
.rail > button[aria-current="page"] .ico { color: var(--rail-on); }
.rail > .rail-toggle { order: 99; margin-top: auto; height: 30px; font-size: 12px; font-weight: 400; color: var(--rail-muted); }
.rail > .rail-toggle:hover { color: #fff; background: rgba(255,255,255,.06); }
.rail.min { flex-basis: 60px; align-items: center; }
.rail.min .group { font-size: 0; padding: 0; height: 1px; width: 28px; background: rgba(255,255,255,.1); margin: 8px 0; }
.rail.min > button { width: 44px; height: 40px; justify-content: center; padding: 0; font-size: 0; gap: 0; }
.rail.min .rail-toggle span { display: none; }
.rail.min .rail-who .who { width: 44px; height: 44px; padding: 0; justify-content: center; }
.rail.min .rail-who .who .name, .rail.min .rail-who .who > svg { display: none; }
.rail.min .rail-who .menu { min-width: 220px; }
@media (min-width: 901px) { .phone-only { display: none !important; } }
main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 40px; max-width: 1440px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
h2 { margin: 0; font-size: 14px; font-weight: 600; }
.panelc { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px; min-width: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.empty { color: var(--muted); padding: 32px 12px; text-align: center; }
.pic { min-height: 96px; border: 1px dashed var(--line2); border-radius: 4px; display: grid; place-items: center; padding: 10px; background: var(--card); }
.pic img { max-height: 110px; max-width: 100%; }
.numtable { display: flex; flex-direction: column; }
.numrow { display: grid; grid-template-columns: 140px minmax(0,1fr) auto 120px 170px; gap: 12px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line); }
.numrow > b { align-self: center; font-weight: 600; }
@media (max-width: 900px) { .numrow { grid-template-columns: 1fr 1fr; } .numrow > b { grid-column: 1 / -1; } }
.tick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.tick input, .switch-row input, input[type="checkbox"], input[type="radio"] { accent-color: var(--teal); }
.prodphoto { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: center; }
.prodphoto .pic { min-height: 140px; }
.prodphoto .pic img { max-height: 150px; }
.prodphoto > div:last-child { align-items: flex-start; }

/* home */
.hero { background: var(--hero); color: var(--hero-ink); border: 1px solid var(--line); border-radius: 6px; padding: 20px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; position: relative; overflow: hidden; }
.hero .big { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero .big small { color: var(--hero-muted); font-size: 18px; }
.hero .lbl { font-size: 12px; color: var(--hero-muted); }
.hero .trend { font-size: 12px; font-weight: 600; color: #2BBFA3; background: rgba(43,191,163,.14); border-radius: 3px; padding: 2px 7px; }
.hero .side { display: flex; flex-direction: column; justify-content: center; position: relative; }
.hero .side div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.hero .side div:last-child { border-bottom: 0; }
.hero .side span:first-child { color: var(--hero-muted); font-size: 13px; }
.hero svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi > div:first-child { flex-wrap: wrap; gap: 6px; }
.kpi .btn { align-self: flex-start; }
.row { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--line); width: 100%; cursor: pointer; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--chip); }
.row[aria-selected="true"] { background: var(--teal-soft); }
.row .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.row .t b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .t span { font-size: 12px; color: var(--muted); }
.row .r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }
.line { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.line:first-of-type { border-top: 0; }
.how { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.how .ico { width: 13px; height: 13px; stroke: currentColor; }

/* modules */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs button { all: unset; cursor: pointer; height: 36px; padding: 0 12px; display: flex; align-items: center; font-size: 13px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--teal); }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.search { display: flex; gap: 8px; padding: 0 0 10px; }
.search input { flex: 1 1 auto; min-width: 0; height: 32px; border-radius: 4px; border: 1px solid var(--line2); background: var(--card); padding: 0 10px; font-size: 13px; outline: none; }
.search input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.progress { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.progress div { height: 100%; background: var(--teal); }
.box { background: var(--chip); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.box .kv { display: flex; justify-content: space-between; gap: 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); padding-top: 8px; }

/* forms */
.form-split { grid-template-columns: minmax(0,7fr) minmax(0,4fr); }
.form-split.full { grid-template-columns: minmax(0, 1fr) 300px; }
.form-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; }
.form-top .form-aside { position: static; }
.form-end { margin-top: 0; }
.form-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 84px); overflow-y: auto; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
.field.narrow { max-width: 260px; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.input.area { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; font: inherit; font-size: 13px; }
.num-chip { font-size: 12px; font-weight: 600; background: var(--chip); border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; align-items: stretch; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; background: var(--card); }
.seg > span { font-size: 12px; padding: 0 10px; display: flex; align-items: center; color: var(--muted); border-right: 1px solid var(--line2); }
.seg button { all: unset; box-sizing: border-box; cursor: pointer; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; border-right: 1px solid var(--line2); }
.seg button:last-child { border-right: 0; }
.seg button[aria-checked="true"] { background: var(--teal-soft); color: var(--teal-deep); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.seg.wide { display: grid; grid-template-columns: 1fr 1fr; } .seg.wide button { height: 40px; font-size: 14px; }
.lines input.desc { margin-top: 4px; height: 28px; font-size: 12px; background: transparent; border: 1px dashed var(--line2); }
.add-new { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--teal-deep); font-size: 13px; font-weight: 600; }
.add-new:hover { background: var(--teal-soft); }
.link { all: unset; cursor: pointer; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--teal-deep); }
.link:hover { text-decoration: underline; }
.sumcard { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.sumcard .lbl { font-size: 12px; color: var(--muted); }
.sumcard .big { font-size: 24px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.form-bar { display: none; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; }
.switch-row input { width: 18px; height: 18px; }
.pop-back { position: fixed; inset: 0; background: rgba(9, 16, 20, .45); z-index: 80; }
.pop { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 81; width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 96px); overflow-y: auto; background: var(--card); border: 1px solid var(--line2); border-radius: 6px; box-shadow: var(--overlay); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.glance { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.glance > b { font-size: 13px; font-weight: 600; }
.glance.price { border-color: var(--line2); }
.glance .cap { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.glance .cap.teal { color: var(--teal-deep); }
.glance .kv { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.glance .kv.sep { border-top: 1px solid var(--line); padding-top: 8px; }
.glance .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 4px; }
.glance .g2 > :first-child { border-right: 1px solid var(--line); }
.glance .chipbox, .glance .warnbox { padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; background: transparent; }
.glance .warnbox { background: var(--amber-soft); }
.glance .chipbox span, .glance .warnbox span { font-size: 11px; color: var(--muted); font-weight: 500; }
.glance .warnbox span { color: var(--amber); }
.glance .chipbox b, .glance .warnbox b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.glance .check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.glance .check > span { width: 16px; height: 16px; flex-shrink: 0; border-radius: 3px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--chip); color: var(--muted); }
.glance .check.ok > span { background: var(--teal); color: var(--on-teal); }
.glance .check.warn > span { background: var(--amber-soft); color: var(--amber); }
.glance .recent { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.glance .recent:hover, .glance .recent:focus-visible { color: var(--teal-deep); }
.glance .btn { align-self: flex-start; }
.tag.teal { background: var(--teal-soft); color: var(--teal-deep); }
.pop > .form-row { flex-wrap: nowrap; align-items: flex-start; }
.people-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.g2x { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.g4x { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.g4x .chipbox { padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; background: var(--card); border-right: 1px solid var(--line); }
.g4x .chipbox:last-child { border-right: 0; }
.g4x .chipbox span { font-size: 11px; color: var(--muted); font-weight: 500; }
.docline { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.docline:hover, .docline:focus-visible { color: var(--teal-deep); }
.contact-row { border: 1px solid var(--line); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pick-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pick { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--chip); }
.pick.on { background: var(--teal-soft); box-shadow: inset 2px 0 0 var(--teal); }
.pick:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.error { color: var(--red); font-size: 12.5px; }
.error:empty { display: none; }
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.field > label, .field > span { font-size: 12px; font-weight: 500; color: var(--ink2); }
.input { height: 32px; border-radius: 4px; border: 1px solid var(--line2); background: var(--card); padding: 0 10px; font-size: 13px; outline: none; width: 100%; }
.input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.input[disabled], .input[readonly] { background: var(--chip); color: var(--muted); }
select.input { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.chosen { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line2); border-radius: 4px; padding: 8px 10px; background: var(--card); }
.chosen .t { flex: 1 1 auto; min-width: 0; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px; background: var(--card); border: 1px solid var(--line2); box-shadow: var(--overlay); border-radius: 6px; padding: 0; overflow: hidden; }
.suggest button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; padding: 9px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.suggest button:last-child { border-bottom: 0; }
.suggest button:hover, .suggest button:focus-visible { background: var(--teal-soft); }

/* tables: document lines and lists */
.lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.lines th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 0 8px; height: 32px; background: var(--chip); border-bottom: 1px solid var(--line); white-space: nowrap; }
.lines td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lines input { width: 100%; height: 30px; border-radius: 4px; border: 1px solid var(--line2); background: var(--card); padding: 0 8px; font-size: 13px; outline: none; }
.lines input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.lines .n { text-align: right; font-variant-numeric: tabular-nums; }
/* Each line reads as one block (owner, 6 Nov 2026: "one over another, confusing which product it is") */
.lines tbody tr + tr td { border-top: 2px solid var(--line2); }
.lines td.prod { padding-top: 10px; padding-bottom: 10px; }
.line-no { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.line-acct { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.line-acct label { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.line-acct select.input { height: 30px; font-size: 12px; padding: 0 8px; flex: 1; min-width: 0; }
.line-new { display: flex; flex-direction: column; margin-top: 4px; border: 1px solid var(--line2); border-radius: 6px; background: var(--card); overflow: hidden; }
.line-new > .muted { padding: 8px 10px 0; font-size: 12px; }
.line-new .add-new { margin-top: 0; }
.line-mark { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.totals { min-width: 260px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; padding: 3px 0; }
.totals .grand { font-size: 17px; font-weight: 600; padding-top: 8px; border-top: 1px solid var(--line); }
.cardbox { border: 1px solid var(--line2); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--card); }
.cardbox .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.cardbox .btns .btn:first-child { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.hint { background: var(--chip); color: var(--ink2); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; font-size: 13px; display: flex; gap: 10px; }

/* right panel: Ask and Live (full Live redesign comes in its own PR) */
.side-panel { position: fixed; top: 52px; right: 0; bottom: 0; width: min(400px, 100%); z-index: 60; background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(105%); visibility: hidden; transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s .22s; }
.side-panel.open { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
body.panel-open .layout { padding-right: 400px; transition: padding .22s; }
.side-panel header { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; height: 52px; border-bottom: 1px solid var(--line); }
.side-panel header b { flex: 1 1 auto; font-size: 14px; }
.wave { margin: 16px 16px 0; height: 56px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.wave span { width: 3px; border-radius: 1px; background: var(--teal); animation: wave 1.1s ease-in-out infinite; }
.wave.quiet span { animation: none; height: 6px !important; background: var(--muted); opacity: .5; }
@keyframes wave { 50% { transform: scaleY(.35); } }
.chat { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 8px 10px; font-size: 13px; white-space: pre-wrap; border-radius: 6px; }
.msg.me { align-self: flex-end; background: var(--pill); color: var(--pill-ink); }
.msg.fp { align-self: flex-start; background: var(--chip); border: 1px solid var(--line); }
.side-panel form { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.side-panel form input { flex: 1 1 auto; min-width: 0; height: 36px; border-radius: 4px; border: 1px solid var(--line2); background: var(--card); padding: 0 10px; font-size: 13px; outline: none; }
.side-panel form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.btn.end { background: var(--red); border-color: var(--red); color: #fff; }

/* sign in / sign up */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth form { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.auth .error { color: var(--red); font-size: 12.5px; min-height: 18px; }
.auth .input { height: 40px; font-size: 14px; }
.auth .btn { height: 40px; font-size: 14px; }

/* phone and tablet */
.bottom-nav { display: none; }
@media (max-width: 1080px) { .create-lbl, .ask kbd { display: none; } .brand { min-width: 0; } }
@media (min-width: 901px) and (max-width: 1366px) {  /* tablet with the full menu: the form takes the width */
  .layout:not(.rmin) .split.form-split.full, .layout:not(.rmin) .form-split, .layout:not(.rmin) .form-top { grid-template-columns: 1fr; }
  .layout:not(.rmin) .form-aside { position: static; max-height: none; overflow: visible; }
  .layout:not(.rmin) .form-aside .sumcard, .layout:not(.rmin) .form-aside > .form-actions, .layout:not(.rmin) .form-end { display: none; }
  .layout:not(.rmin) .form-bar { display: flex; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 39; background: var(--card); border: 1px solid var(--line2); border-radius: 6px; box-shadow: var(--overlay); padding: 10px 10px 10px 16px; }
  .layout:not(.rmin) .form-bar > span { flex: 1 1 auto; display: flex; flex-direction: column; } .form-bar .lbl { font-size: 11px; color: var(--muted); } .form-bar b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .layout:not(.rmin) .form-bar .btn { height: 40px; padding: 0 20px; }
}
@media (max-width: 900px) {
  html, body { font-size: 14px; }
  .top { height: 56px; padding: 0 12px; gap: 8px; flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; }
  .brand { min-width: 0; } .brand span { display: none; }
  .who small, .who .name, .create-lbl { display: none; }
  .phone-only { flex: 0 0 auto; }
  .live-btn .lbl { overflow: hidden; text-overflow: ellipsis; }
  .live-btn { flex: 1 1 0; min-width: 0; height: 40px; justify-content: center; background: var(--teal); border-color: var(--teal); color: var(--on-teal); font-size: 14px; font-weight: 600; }
  .live-btn .live-dot { color: var(--on-teal); }
  .live-btn[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal-deep); }
  .icon-btn { width: 40px; height: 40px; } .who { height: 40px; width: auto; }
  .ask { order: 5; flex-basis: 100%; height: 40px; margin: 0; }
  .ask input { font-size: 15px; height: 38px; }
  .layout { min-height: 0; }
  main { padding: 12px 14px 100px; gap: 12px; }
  .rail { display: none; }
  h1 { font-size: 20px; }
  .btn { height: 40px; font-size: 14px; }
  .btn.small { height: 32px; font-size: 13px; }
  .input, .search input { height: 44px; font-size: 15px; }
  .lines input { height: 40px; font-size: 15px; }
  .seg button { height: 40px; font-size: 14px; }
  .hero { grid-template-columns: 1fr; padding: 16px; } .hero .big { font-size: 28px; }
  .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .form-split, .form-split.full, .form-top { grid-template-columns: 1fr; }
  .form-end { display: none; }
  .form-grid, .form-grid.two { grid-template-columns: 1fr; }
  .people-split { grid-template-columns: 1fr; }
  .form-aside { position: static; max-height: none; overflow: visible; }
  .form-aside .sumcard, .form-aside .form-actions { display: none; }
  .form-bar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 64px; z-index: 39; background: var(--card); border-top: 1px solid var(--line); padding: 10px 12px 10px 16px; }
  .form-bar > span { flex: 1 1 auto; display: flex; flex-direction: column; } .form-bar .lbl { font-size: 11px; color: var(--muted); } .form-bar b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .form-bar .btn { height: 44px; padding: 0 20px; }
  main:has(.form-bar) { padding-bottom: 170px; }
  .pop { top: 12px; max-height: calc(100vh - 24px); }
  .seg > span { display: none; }
  .create-btn { display: none; }
  .desk-only { display: none !important; }
  .create-menu { position: fixed; left: 12px; right: 12px; bottom: 72px; min-width: 0; z-index: 70; }
  .bottom-nav .create-menu button { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; padding: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
  .lines, .lines tbody { display: block; }
  .lines thead { display: none; }
  .lines tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 0; border-bottom: 2px solid var(--line2); }
  .lines tbody tr + tr td { border-top: 0; }
  .lines td { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; min-width: 0; }
  .lines td.prod { grid-column: 1 / -1; }
  .lines td[data-l]::before { content: attr(data-l); font-size: 11px; font-weight: 600; color: var(--muted); }
  .lines td.amt { justify-content: flex-end; text-align: left; font-size: 15px; }
  .lines td:last-child { justify-content: flex-end; align-items: flex-end; }
  .lines .n { text-align: left; }
  .side-panel { width: 100%; top: 0; z-index: 90; }
  body.panel-open .layout { padding-right: 0; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 40; background: var(--card); border-top: 1px solid var(--line); padding: 0 4px; }
  .bottom-nav button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--muted); }
  .bottom-nav button[aria-current="page"] { color: var(--teal-deep); font-weight: 600; }
  .bottom-nav .plus { justify-self: center; align-self: center; width: 44px; height: 36px; border-radius: 4px; background: var(--teal); color: var(--on-teal); display: grid; place-items: center; padding: 0; }
}
@media (max-width: 379px) { .live-btn .xl { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* sign-up password (owner, 3 Nov 2026): rules ticked as you type, show / hide */
.pwbox { position: relative; display: flex; }
.pwbox .input { flex: 1 1 auto; padding-right: 64px; }
.pweye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--teal-deep); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 8px; cursor: pointer; }
.pwrules { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.pwrules li.ok { color: var(--teal-deep); font-weight: 600; }

/* Connect WhatsApp bar (owner, 3 Nov 2026): on every page until this person's number is linked */
.wabar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--teal-soft); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; }
.wabar > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.wabar-ic { display: inline-flex; width: 26px; height: 26px; border-radius: 4px; align-items: center; justify-content: center; background: var(--teal); color: var(--on-teal); flex: 0 0 auto; }
.wabar-sub { color: var(--ink2); }
@media (max-width: 720px) { .wabar { padding: 8px 12px; } .wabar-sub { display: none; } }

/* Brand workspaces (owner, 3 Nov 2026: like V2) */
.brandrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.brandrow .grow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brandrow .acts { display: flex; gap: 8px; flex: 0 0 auto; }
.brandlogo { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; background: #fff; border: 1px solid var(--line); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--teal-deep); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
@media (max-width: 720px) { .brandrow { flex-direction: column; align-items: flex-start; } }

/* Finish your FINAPLA setup (owner, 3 Nov 2026: like V2) */
.setup-panel { display: flex; flex-direction: column; gap: 12px; }
.setup-progress { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.setup-progress span { display: block; height: 100%; background: var(--teal); }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; }
.setup-group { display: flex; flex-direction: column; gap: 0; }
.setup-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.setup-row .grow { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.setup-row small { color: var(--muted); font-size: 12px; }
.setup-row .tick-ic { width: 18px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--chip); color: var(--muted); flex: 0 0 auto; }
.setup-row.done .tick-ic { background: var(--teal); color: var(--on-teal); }
.setup-row.done .grow > span { color: var(--muted); }
.welcome .welcome-lines { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* Settings (ADR-0039): grouped left menu, labels beside fields, sticky save */
.set-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); margin: -20px -24px -40px; min-height: calc(100vh - 52px); }
.set-nav { background: var(--card); border-right: 1px solid var(--line); padding: 14px 10px; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.set-title { font-size: 18px; padding: 0 10px 2px; }
.set-cap { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.set-nav button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 4px; color: var(--ink2); font-size: 13px; }
.set-nav button .ico { color: var(--muted); }
.set-nav button .chev { margin-left: auto; display: none; }
.set-nav button:hover { background: var(--chip); }
.set-nav button[aria-current="page"] { background: var(--teal-soft); color: var(--teal-deep); font-weight: 600; }
.set-nav button[aria-current="page"] .ico { color: var(--teal-deep); }
.set-body { padding: 20px 28px 48px; display: flex; flex-direction: column; gap: 16px; max-width: 1080px; min-width: 0; }
.set-head { display: flex; gap: 8px; align-items: flex-start; }
.set-back { display: none; }
.set-crumb { font-size: 12px; }
.set-h { font-size: 22px; font-weight: 600; margin: 2px 0 0; letter-spacing: -.01em; }
.set-help { margin: 2px 0 0; font-size: 13px; max-width: 720px; }
.set-body .panelc { padding: 16px 20px; }
.set-body .panelc > .form-row:last-child { position: sticky; bottom: 0; z-index: 5; background: var(--card); border-top: 1px solid var(--line); margin: 6px -20px -16px; padding: 10px 20px; border-radius: 0 0 6px 6px; }
@media (min-width: 901px) {
  .set-body .form-grid, .set-body .form-grid.two { grid-template-columns: 1fr; gap: 0; }
  .set-body .form-grid > .field { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
  .set-body .form-grid > .field > label, .set-body .form-grid > .field > span:first-child { padding-top: 7px; font-size: 13px; }
  .set-body .form-grid > .field > :not(:first-child) { grid-column: 2; }
  .set-body .panelc > .field, .set-body .form-grid.two > .field { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
  .set-body .panelc > .field > label, .set-body .panelc > .field > span:first-child { padding-top: 7px; font-size: 13px; }
  .set-body .panelc > .field > :not(:first-child) { grid-column: 2; }
  .set-body .field > .seg { justify-self: start; }
  .set-body .field > .input[inputmode="numeric"] { max-width: 220px; }
  .set-body .form-grid > .form-grid { border-top: 1px solid var(--line); }
}
@media (min-width: 901px) and (max-width: 1366px) { .set-layout { grid-template-columns: 210px minmax(0, 1fr); } .set-body .form-grid > .field { grid-template-columns: 170px minmax(0, 1fr); } }
.int-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.int-row:first-child { border-top: 0; }
.int-ic { width: 32px; height: 32px; border-radius: 4px; background: var(--chip); display: grid; place-items: center; color: var(--ink2); flex-shrink: 0; }
.int-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.int-t .muted { font-size: 12px; }
@media (max-width: 900px) {
  .set-layout { display: block; margin: -12px -14px -100px; min-height: 0; }
  .set-nav { position: static; height: auto; border-right: 0; background: transparent; padding: 12px 14px 100px; gap: 0; }
  .set-title { font-size: 20px; padding: 0 2px 4px; }
  .set-cap { padding: 16px 2px 6px; }
  .set-nav button { height: 48px; background: var(--card); border: 1px solid var(--line); border-top-width: 0; border-radius: 0; padding: 0 12px; font-size: 14px; }
  .set-cap + button { border-top-width: 1px; border-radius: 6px 6px 0 0; }
  .set-nav button:has(+ .set-cap), .set-nav button:last-child { border-radius: 0 0 6px 6px; }
  .set-cap + button:has(+ .set-cap), .set-cap + button:last-child { border-radius: 6px; }
  .set-nav button .chev { display: block; color: var(--line2); }
  .set-nav button[aria-current="page"] { background: var(--card); color: var(--ink); font-weight: 500; }
  .set-nav button[aria-current="page"] .ico { color: var(--muted); }
  .set-layout.picked .set-nav { display: none; }
  .set-layout:not(.picked) .set-body { display: none; }
  .set-body { padding: 0 14px 120px; gap: 12px; }
  .set-head { position: sticky; top: 0; z-index: 6; background: var(--card); border-bottom: 1px solid var(--line); margin: 0 -14px; padding: 8px 14px; align-items: center; }
  .set-back { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); margin-left: -8px; }
  .set-help { display: none; }
  .set-h { font-size: 17px; }
  .set-body .panelc { padding: 12px 14px; }
  .set-body .panelc > .form-row:last-child { position: sticky; bottom: 64px; margin: 6px -14px -12px; padding: 10px 14px; }
}

/* List pages (ADR-0039): document tabs, figures strip, table with status filter and totals, preview on the right */
.doc-tabs { margin-top: -4px; }
.stat-strip { gap: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--card); overflow: hidden; }
.stat-strip .stat { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.stat-strip .stat:last-child { border-right: 0; }
.list-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.list-split > .sheet { position: sticky; top: 68px; max-height: calc(100vh - 84px); overflow-y: auto; min-width: 0; }
.sheet-back { display: none; }
.dt-panel { padding: 0; overflow: hidden; }
.dt-bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dt-bar .search { flex: 1 1 200px; padding: 0; }
.dt-wrap { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 0 12px; height: 32px; background: var(--chip); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt td { padding: 6px 12px; height: 44px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.dt .r { text-align: right; }
.dt td.party { white-space: normal; min-width: 160px; }
.dt .show-s { display: none; }
.dt td.amt { font-weight: 600; }
.dt td.late { color: var(--red); }
.dt .sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.25; }
.dt tbody tr { position: relative; }
.dt tbody tr:hover td { background: var(--chip); }
.dt tbody tr[aria-selected="true"] td { background: var(--teal-soft); }
.rowlink { all: unset; cursor: pointer; font-weight: 500; color: var(--ink); }
.rowlink::after { content: ""; position: absolute; inset: 0; }
.rowlink:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dt tfoot td { background: var(--chip); font-weight: 600; height: 40px; border-bottom: 0; }
.dt-panel .pager { padding: 8px 12px; border-top: 1px solid var(--line); }
@media (max-width: 1280px) { .list-split { grid-template-columns: 1fr; } .list-split > .sheet { position: static; max-height: none; } }
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip .stat:nth-child(2) { border-right: 0; }
  .stat-strip .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .doc-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .doc-tabs button { white-space: nowrap; height: 44px; }
  .dt-bar .seg { width: 100%; overflow-x: auto; }
  .dt thead, .dt .hide-s { display: none; }
  .dt .show-s { display: block; }
  .dt, .dt tbody, .dt tfoot { display: block; }
  .dt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: center; }
  .dt td { display: block; height: auto; padding: 0; border: 0; white-space: normal; }
  .dt td:first-child { grid-column: 1; grid-row: 1; }
  .dt td.amt { grid-column: 2; grid-row: 1; text-align: right; }
  .dt td.party { grid-column: 1; grid-row: 2; min-width: 0; color: var(--ink2); }
  .dt td:has(.tag) { grid-column: 2; grid-row: 2; text-align: right; }
  .dt tfoot tr { background: var(--chip); }
  .dt tfoot td { background: transparent; }
  .rowlink { font-size: 14px; }
}
.seg button { white-space: nowrap; }

/* Document forms (ADR-0039): bill-to beside the dates, lines table, totals panel, actions always in reach */
.form-main section[aria-label="Customer and details"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; padding: 0; }
.form-main section[aria-label="Customer and details"] > .field:first-child { padding: 16px; border-right: 1px solid var(--line); }
.form-main section[aria-label="Customer and details"] > .form-grid { padding: 16px; align-content: start; }
.form-main section[aria-label="Lines"] { padding: 0; gap: 0; }
.form-main section[aria-label="Lines"] > .form-row { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.form-main section[aria-label="Lines"] > div > .lines th:first-child, .form-main section[aria-label="Lines"] .lines td:first-child { padding-left: 16px; }
.form-main section[aria-label="Lines"] > .btn { margin: 10px 16px 12px; }
.form-main .lines input[data-line$="|label"] { font-weight: 500; }
.form-end { padding-top: 4px; }
.form-aside .sumcard { border-color: var(--line2); }
.page-head .num-chip { font-size: 12px; }
@media (max-width: 1366px) { .form-main section[aria-label="Customer and details"] { grid-template-columns: 1fr; } .form-main section[aria-label="Customer and details"] > .field:first-child { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 900px) {
  .form-main section[aria-label="Lines"] .lines tr { padding: 12px 14px; }
  .form-main section[aria-label="Lines"] > .btn { width: calc(100% - 28px); margin: 10px 14px 12px; }
}

/* Live Assistant (ADR-0039): a presence with captions, confirm cards and a clear End call */
.side-panel.live .presence { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
.side-panel.live .wave { margin: 0; height: 56px; }
.side-panel.live .wave.listen span { background: var(--muted); opacity: .6; }
.presence-state { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.side-panel.live .chat { gap: 10px; padding: 14px 16px; }
.side-panel.live .msg { max-width: none; align-self: stretch; background: transparent; border: 0; padding: 0; color: var(--ink2); font-size: 13px; }
.side-panel.live .msg.me::before { content: "You · "; font-weight: 600; color: var(--ink); }
.side-panel.live .msg.fp::before { content: "FINAPLA · "; font-weight: 600; color: var(--ink); }
.side-panel.live .msg.fp.now { font-size: 17px; line-height: 1.45; color: var(--ink); font-weight: 500; padding: 4px 0; }
.side-panel.live .msg.fp.now::before { content: ""; }
body.panel-open .list-split { grid-template-columns: 1fr; }
body.panel-open .list-split > .sheet { position: static; max-height: none; }
.live-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.live-ctl .btn.end { height: 40px; padding: 0 16px; font-weight: 600; }
.side-panel form .btn { height: 36px; }
@media (max-width: 900px) { .side-panel.live .presence { padding-top: 28px; } .side-panel.live .wave { height: 96px; } .side-panel.live .msg.fp.now { font-size: 20px; } .live-ctl .btn.end { height: 48px; flex: 1 1 auto; } }

/* Phone (owner, 3 Nov 2026): clean top on list pages, and a chosen row opens as its own page */
.doc-tabs, .dt-bar .seg { scrollbar-width: none; }
.doc-tabs::-webkit-scrollbar, .dt-bar .seg::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .doc-tabs { border-bottom: 0; gap: 6px; margin: 0 -14px; padding: 0 14px; }
  .doc-tabs button { height: 36px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 4px; background: var(--card); color: var(--ink2); margin: 0; font-size: 13.5px; }
  .doc-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
  .dt-bar { padding: 0; gap: 0; border-bottom: 0; }
  .dt-bar .seg { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; gap: 18px; padding: 0 14px; }
  .dt-bar .seg button { border: 0; background: transparent; height: 42px; padding: 0; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; }
  .dt-bar .seg button[aria-checked="true"] { background: transparent; color: var(--ink); border-bottom-color: var(--teal); }
  .dt-bar .search { padding: 10px 14px; flex-basis: 100%; }
  .dt-bar > .btn { margin: 0 14px 10px; }
}
/* phone and tablet: nothing opens by itself, and a chosen row opens as its own page with Back */
@media (max-width: 1280px) {
  .list-split:not(.has-sel) > .sheet { display: none; }
  .list-split.has-sel > .sheet { position: fixed; inset: 0; z-index: 95; background: var(--bg); overflow-y: auto; max-height: none; padding-bottom: 24px; }
  .sheet-back { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 3; width: 100%; height: 52px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; }
  .sheet > section { border-radius: 0; border-left: 0; border-right: 0; }
}
@media (min-width: 901px) and (max-width: 1280px) { .list-split.has-sel > .sheet { left: 50%; border-left: 1px solid var(--line); box-shadow: var(--overlay); } }

/* Clear confirmation after every save, and errors you cannot miss (owner, 3 Nov 2026) */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 8px; max-width: min(520px, calc(100% - 24px)); padding: 10px 16px; border-radius: 4px; background: var(--ink); color: var(--card); font-size: 13.5px; font-weight: 500; box-shadow: var(--overlay); }
.toast .ico { color: var(--rail-on); }
.toast.bad { background: var(--red); color: #fff; }
.toast.bad .ico { color: #fff; }
@media (max-width: 900px) { .toast { bottom: 78px; font-size: 14.5px; } }

/* Edit forms: customer, supplier, product (ADR-0039, mockups approved 3 Nov 2026) */
.ef-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 52px; z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); margin: -20px -24px 0; padding: 10px 24px; }
.ef-head > div { margin-right: auto; display: flex; flex-direction: column; }
.ef-head h1 { font-size: 18px; }
.ef-crumb { font-size: 12px; }
.ef-note { font-size: 12px; }
.ef-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ef-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ef-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 130px; }
.efsec { padding: 0; }
.efrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 10px 20px; border-top: 1px solid var(--line); }
.panel-h + .efrow { border-top: 0; }
.efrow > label, .efrow > .l { padding-top: 7px; color: var(--ink2); font-weight: 500; font-size: 13px; }
.efc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.efc > .seg { align-self: flex-start; }
.efh { font-size: 12px; }
.ef-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ef-inline .input { max-width: 200px; }
.efc > .input.short, .efc > .input[inputmode="decimal"], .efc > .input[inputmode="numeric"] { max-width: 220px; }
.ef-addr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px; }
.ef-addr.four { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1fr) 32px; }
.ef-ct td { height: auto; padding: 6px 8px; white-space: normal; }
.ef-ct .input { height: 30px; min-width: 90px; }
.ef-ct-acts { white-space: nowrap; text-align: right; }
.ef-side .panel-h { padding: 10px 14px; }
.ef-checks { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; font-size: 12.5px; }
.ef-checks span { display: flex; gap: 8px; align-items: center; }
.ef-checks .ok .ico { color: var(--teal); stroke-width: 2.2; width: 14px; height: 14px; }
.ef-checks .no { color: var(--amber); }
.ef-checks .no .ico { width: 14px; height: 14px; }
.ef-print { margin: 14px; background: #FFFFFF; color: #111; border: 1px solid #E0E5E5; padding: 12px; display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; line-height: 1.4; }
.ef-print b { font-size: 11.5px; }
.ef-print-cap { font-size: 9px; letter-spacing: .08em; color: #5B6870; }
.ef-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.ef-line > span:nth-child(2) { display: flex; flex-direction: column; color: #5B6870; }
.ef-line > span:nth-child(2) b { color: #111; }
.ef-ph { width: 40px; height: 40px; background: #E8ECEC; }
.ef-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 12px 14px; }
.ef-bar { display: none; }
@media (max-width: 1280px) {
  .ef-layout { grid-template-columns: 1fr; }
  .ef-aside { position: static; }
  .desk-wide { display: none; }   /* owner: "how it prints" on desktop only */
}
@media (max-width: 900px) {
  .ef-head { top: 0; margin: -12px -14px 0; padding: 10px 14px; }
  .ef-head .btn, .ef-note { display: none; }
  .efrow { grid-template-columns: 1fr; padding: 12px 14px; }
  .efrow > label, .efrow > .l { padding-top: 0; }
  .efc > .seg { align-self: stretch; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .ef-addr, .ef-addr.four { grid-template-columns: 1fr; }
  .ef-inline .input { max-width: none; flex: 1 1 140px; }
  .ef-ct thead { display: none; }
  .ef-ct, .ef-ct tbody, .ef-ct tr, .ef-ct td { display: block; }
  .ef-ct tr { padding: 10px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ef-ct td { padding: 0; border: 0; }
  .ef-ct td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
  .ef-ct td[data-l="Email"], .ef-ct td[data-l="Gets by email"], .ef-ct-acts { grid-column: 1 / -1; }
  .ef-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; position: fixed; left: 0; right: 0; bottom: 64px; z-index: 39; background: var(--card); border-top: 1px solid var(--line); padding: 10px 14px; }
  .ef-bar .btn { height: 44px; }
  main:has(.ef-bar) { padding-bottom: 150px; }
}
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-h .muted { font-size: 12px; }
.efsec > .panel-h { padding: 12px 20px; }
@media (max-width: 900px) { .efsec > .panel-h { padding: 12px 14px; flex-wrap: wrap; } }
.ef-side { padding: 0; }
/* Home (ADR-0039): figures strip, cash outlook, what needs you, today's records */
.home-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-h .muted { font-size: 12px; }
.home-figs .fig { gap: 4px; padding: 12px 16px; }
.home-figs .fig b { font-size: 20px; }
.home-figs .fig:first-child b { font-size: 22px; }
.fig-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.home-figs .link { margin-top: 2px; }
.home-figs.one { grid-template-columns: 1fr; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.home-cash, .home-needs { padding: 0; }
.home-cash-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; padding: 12px 16px 16px; align-items: center; }
.home-chart svg { width: 100%; height: auto; display: block; }
.home-side > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.home-side > div.end { border-bottom: 0; font-weight: 600; }
.home-side > div.end .num { color: var(--teal-deep); font-size: 16px; }
.need { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.need:last-child { border-bottom: 0; }
.need > span { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1280px) { .home-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .home-quick { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-quick .btn { padding: 0 6px; }
  .home-figs .fig:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-figs .fig:nth-child(2) { border-right: 1px solid var(--line); }
  .home-figs .fig:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); }
  .home-figs .fig:nth-child(4) { grid-column: 1 / -1; border-right: 0; }
  .home-cash-body { grid-template-columns: 1fr; gap: 8px; }
}
/* VAT (ADR-0039): period, figures, the VAT 201 return, checks before filing, Mark as filed */
.vat-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.vat-figs .fig .tag { align-self: flex-start; }
.vat-figs b.teal { color: var(--teal-deep); }
.vat-figs .fig > .muted:last-child { font-size: 12px; }
.vat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.vat-side { display: flex; flex-direction: column; gap: 16px; }
.vat-how { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.vat-how .muted { color: var(--ink2); }
.vat201 td.wrap { white-space: normal; }
.vat201 tr.sec td { background: var(--chip); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); height: 30px; }
.vat201 tr.em td:nth-child(2) { padding-left: 24px; color: var(--ink2); }
.vat201 tr.tot td { font-weight: 600; }
.vat201 tr.pay td { font-weight: 600; background: var(--teal-soft); color: var(--teal-deep); border-bottom: 0; }
.vat-confirm { display: flex; gap: 16px; align-items: center; justify-content: space-between; border-color: var(--amber); background: var(--amber-soft); }
.vat-confirm .muted { color: var(--ink2); font-size: 13px; }
.vat-confirm-b { display: flex; gap: 8px; flex-shrink: 0; }
.vat-rec { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); background: var(--chip); }
.vat-rec .rowlink::after { content: none; }
.vat-rec .rowlink:hover { background: var(--card); }
.vat-rec .rowlink { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; }
.vat-tabs { border-bottom: 0; margin: -12px 0; }
.vat-tabs button { height: 44px; }
.vat201 { table-layout: fixed; }
.vat201 th:nth-child(3), .vat201 th:nth-child(4) { width: 150px; }
@media (max-width: 1280px) { .vat-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .vat-acts { width: 100%; justify-content: stretch; }
  .vat-acts .seg { width: 100%; overflow-x: auto; }
  .vat-acts .btn { flex: 1 1 0; }
  .vat-figs .fig:nth-child(1) { grid-column: auto; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .vat-figs .fig:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .vat-figs .fig:nth-child(3) { grid-column: auto; border-right: 1px solid var(--line); border-bottom: 0; }
  .vat-figs .fig:nth-child(4) { grid-column: auto; border-right: 0; }
  .vat-confirm { flex-direction: column; align-items: stretch; }
  .vat-acts .seg { flex-direction: row-reverse; justify-content: flex-end; }
  .vat-grid { display: flex; flex-direction: column; }
  .vat-side { order: -1; }
  .panel-h .hide-s { display: none; }
  .vat201 tr { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 10px; }
  .vat201 td { padding: 0; height: auto; border: 0; text-align: left; }
  .vat201 td:nth-child(1) { grid-row: 1 / span 2; color: var(--muted); }
  .vat201 td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .vat201 td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--muted); }
  .vat201 td:nth-child(3):not(:empty)::before { content: "Amount "; }
  .vat201 td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; }
  .vat201 tr.sec { display: block; padding: 0; }
  .vat201 tr.sec td { display: block; padding: 8px 14px; height: auto; }
  .vat201 tr.em td:nth-child(2) { padding-left: 0; }
  .vat201 tr.pay td { background: transparent; }
  .vat201 tr.pay { background: var(--teal-soft); }
  .vat-confirm-b .btn { flex: 1 1 0; height: 44px; }
}
/* Leave a half-filled form? (owner, 3 Nov 2026) */
.leave-pop { width: min(440px, calc(100% - 24px)); }
.leave-b { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 900px) { .leave-b .btn { flex: 1 1 0; height: 44px; } }

/* Banking (ADR-0041) */
.bank-acct { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bank-acct .tag { align-self: flex-start; }
.bank-acct[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--teal); }
.bank-acct:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.bank-line { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.bank-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bank-sec:last-child { border-bottom: 0; }
.bank-sec .need { padding: 8px 0; }
.bank-pop { width: min(760px, calc(100% - 24px)); }
.bank-pop h2 { margin: 0; font-size: 18px; font-weight: 600; }
label.btn { cursor: pointer; }
.bank-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Reports (ADR-0042) */
.rep-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.rep-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rep-row:last-child { border-bottom: 0; }
.rep-row > span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-row .muted { font-size: 12px; }
.rep-row:hover { background: var(--chip); }
.rep-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.rep-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.rep-dates { display: flex; gap: 8px; align-items: center; }
.rep-dates .input { width: 150px; }
.crumb { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.crumb svg { width: 14px; height: 14px; }
.dt tr.tot td { font-weight: 600; }
@media (max-width: 720px) { .rep-dates { width: 100%; } .rep-dates .input { flex: 1 1 0; width: auto; } }
/* a choice inside a form row never runs off a phone screen (owner, 4 Nov 2026: product Type cut off) */
@media (max-width: 720px) {
  .efrow .seg, .field .seg, .bank-sec .seg { display: flex; flex-direction: column; width: 100%; }
  .efrow .seg button, .field .seg button, .bank-sec .seg button { width: 100%; height: 44px; justify-content: flex-start; white-space: normal;
    border-right: 0; border-bottom: 1px solid var(--line2); }
  .efrow .seg button:last-child, .field .seg button:last-child, .bank-sec .seg button:last-child { border-bottom: 0; }
}

/* Zoho units (ADR-0035): the Zoho name always in full, the choice beside it, or below it on a phone */
.zunits { display: flex; flex-direction: column; }
.zunit { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 2fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.zunit:last-child { border-bottom: 0; }
.zunit > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.zunit.head { font-size: 12px; padding: 4px 0; }

/* Help and support (ADR-1000): the customer's tickets and FINAPLA's Support inbox */
.rail .rail-n { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 3px; background: var(--rail-on); color: #03130F; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.hp-new { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.hp-new .seg { flex-wrap: wrap; }
.hp-ctx { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; border-radius: 4px; background: var(--chip); color: var(--ink2); font-size: 12.5px; }
.hp-ctx b { color: var(--ink); font-weight: 600; }
.hp-sugg, .hp-arts { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.hp-sugg .cap { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; background: var(--chip); }
.hp-art { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hp-art:first-child, .hp-sugg .cap + .hp-art { border-top: 0; }
.hp-sugg .hp-art { background: var(--chip); }
.hp-art:hover { background: var(--chip); }
.hp-art .ico { color: var(--teal); }
.hp-art span { flex: 1; display: flex; flex-direction: column; }
.hp-art small { font-size: 12px; }
.hp-thread, .ib-thread { display: flex; flex-direction: column; padding: 0; max-width: 860px; }
.hp-msg { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.hp-msg .avatar { background: var(--ink); color: var(--card); }
.hp-msg .avatar.fp { background: var(--teal); color: var(--on-teal); }
.hp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hp-body p { margin: 0; white-space: pre-wrap; color: var(--ink2); line-height: 1.55; overflow-wrap: anywhere; }
.hp-reply { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.hp-reply.row { flex-direction: row; align-items: center; }
.hp-reply .form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-attach { position: relative; cursor: pointer; }
.hp-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; max-width: 620px; }
.hp-tick { width: 44px; height: 44px; border-radius: 6px; background: var(--teal-soft); color: var(--teal-deep); display: grid; place-items: center; }
.hp-tick .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.ib-split { display: grid; grid-template-columns: 420px minmax(0, 1fr); min-height: 560px; overflow: hidden; }
.ib-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.ib-list .tabs { padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; }
.ib-list .tabs button { white-space: nowrap; gap: 6px; padding: 0 10px; }
.ib-rows { overflow: auto; max-height: calc(100vh - 230px); }
.ib-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ib-row:hover { background: var(--chip); }
.ib-row.on { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
.ib-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.ib-r1 { display: flex; align-items: center; gap: 8px; }
.ib-r1 b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ib-r2 { display: flex; gap: 6px; font-size: 12px; color: var(--ink2); }
.ib-last { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.ib-thread { max-width: none; min-width: 0; }
.ib-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ib-msgs { flex: 1; overflow: auto; max-height: calc(100vh - 430px); min-height: 120px; }
.ib-saved { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }
@media (max-width: 900px) {
  .ib-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ib-split.has-cur .ib-list { display: none; }
  .ib-split:not(.has-cur) .ib-thread { display: none; }
  .ib-list { border-right: 0; }
  .ib-rows, .ib-msgs { max-height: none; }
  .ib-row { padding: 14px 16px; }
  .hp-reply .btn, .hp-new .btn { height: 44px; }
  .hp-reply .form-row > span[style] { display: none; }
  .hp-reply .form-row > .btn { flex: 1 1 40%; }
  .hp-new .seg button { height: 40px; }
  .hp-msg p, .hp-body p { font-size: 14.5px; }
}
/* Lines can be moved up or down (owner, 6 Nov 2026) */
.line-tools { white-space: nowrap; }
.line-tools .btn { padding: 0 6px; }
.line-tools .btn + .btn { margin-left: 4px; }
.ico.flip { transform: rotate(180deg); }
.lines td.line-tools { flex-direction: row; align-items: center; justify-content: flex-end; }