:root{--forest:#0b3b2c;--forest-2:#14533d;--forest-deep:#062d21;--gold:#bd8c38;--gold-light:#dfc27f;--gold-soft:#f3e6c6;--gold-text:#7f5c1e;
--ivory:#f7f2e8;--paper:#fffdfa;--ink:#16231c;--muted:#637067;--line:rgba(11,59,44,.12);--line-strong:rgba(11,59,44,.2);
--ok:#256a49;--ok-bg:#e3f0e8;--due:#8c5f10;--due-bg:#f8edd6;--late:#a8432f;--late-bg:#f6e2dc;--info:#2d5f7a;--info-bg:#e1ecf2;
--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
--radius:14px;--shadow:0 1px 2px rgba(6,45,33,.04),0 12px 32px rgba(6,45,33,.06);
--fs-1:12px;--fs-2:13px;--fs-3:14px;--fs-4:16px;--fs-5:21px;--fs-6:30px;--s-1:4px;--s-2:6px;--s-3:8px;--s-4:12px;--s-5:18px;--s-6:28px;
--r-s:8px;--r-m:11px;--r-l:14px;--r-xl:20px;--bar-h:60px}
*{box-sizing:border-box}html,body{margin:0}html{scroll-padding-top:96px}
body{background:var(--ivory);color:var(--ink);font:14px/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--forest-2);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 5px rgba(223,194,127,.45)}
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 16px 16px;color:rgba(255,255,255,.78);
background:radial-gradient(120% 60% at 0% 0%,rgba(223,194,127,.12),transparent 60%),linear-gradient(180deg,var(--forest) 0%,var(--forest-deep) 100%)}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 20px;border-bottom:1px solid rgba(223,194,127,.16)}
.brand img{width:44px;height:44px;border-radius:50%}
.brand b{display:block;color:#fff;font:600 22px/1 var(--serif);letter-spacing:.02em}
.brand small{display:block;margin-top:6px;color:var(--gold-light);font-size:9px;font-weight:600;letter-spacing:.5em;text-transform:uppercase}
.nav{margin-top:16px;display:grid;gap:2px;align-content:start;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.nav h6{margin:16px 10px 6px;color:rgba(223,194,127,.62);font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a.on{background:linear-gradient(90deg,rgba(223,194,127,.16),rgba(223,194,127,.04));color:#fff;border-inline-start:3px solid var(--gold);padding-inline-start:9px}
.nav .count{margin-inline-start:auto;padding:1px 7px;border-radius:99px;background:rgba(223,194,127,.18);color:var(--gold-light);font-size:11px}
.main{min-width:0;padding:0 32px 48px}
.top{display:flex;align-items:center;gap:16px;min-height:76px;margin:0 -32px 8px;padding:10px 32px;border-bottom:1px solid var(--line);background:rgba(247,242,232,.9)}
.crumbs{font-size:11px;color:var(--muted);letter-spacing:.04em}.crumbs a:hover{color:var(--forest)}
.top h1{margin:2px 0 0;font:600 30px/1.05 var(--serif);color:var(--forest)}
.hero{position:relative;margin-top:18px;padding:28px 32px;border-radius:20px;color:#fff;
background:radial-gradient(90% 140% at 100% 0%,rgba(223,194,127,.28),transparent 55%),linear-gradient(120deg,var(--forest-2) 0%,var(--forest) 45%,var(--forest-deep) 100%);box-shadow:0 24px 60px rgba(6,45,33,.2)}
.hero .eyebrow{color:var(--gold-light);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
.hero h2{margin:10px 0 6px;font:500 36px/1.1 var(--serif)}.hero p{margin:0;max-width:640px;color:rgba(255,255,255,.76)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:18px}
.card{padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:14px}.card-h h3{margin:0;min-width:0;overflow-wrap:anywhere;font:600 21px/1.1 var(--serif);color:var(--forest)}
.card-h small{color:var(--muted);font-size:12px}.card-h a{margin-inline-start:auto;color:var(--gold);font-size:12px;font-weight:600}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.kpi .label{color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.kpi .value{margin-top:10px;font:600 36px/1 var(--serif);color:var(--forest)}.kpi .value small{font:500 14px var(--sans);color:var(--muted);margin-inline-start:4px}
.kpi .foot{margin-top:10px;font-size:12px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.due{background:var(--due-bg);color:var(--due)}.chip.info{background:var(--info-bg);color:var(--info)}
.chip.muted{background:#eef0ec;color:var(--muted)}.chip.gold{background:var(--gold-soft);color:var(--gold-text)}.chip.late{background:var(--late-bg);color:var(--late)}
.chip.gone{background:#eef0ec;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.kpi .value a{color:inherit}.kpi .value a:hover{color:var(--gold)}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:9px 10px;text-align:start;color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}tr:last-child td{border-bottom:0}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}td.nowrap,.nowrap{white-space:nowrap}
td a.row-link{color:var(--forest);font-weight:600}td a.row-link:hover{color:var(--gold)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
dl.facts{display:grid;grid-template-columns:minmax(0,max-content) 1fr;gap:7px 16px;margin:0}dl.facts dt{color:var(--muted);font-size:12px}dl.facts dd{margin:0;word-break:break-word}
.pre{white-space:pre-wrap}.muted{color:var(--muted)}.empty{padding:26px;text-align:center;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.note{margin-top:18px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.lang{margin-top:12px;font-size:12px;position:relative}.lang summary{cursor:pointer;color:var(--gold-light);font-weight:600;list-style:none}
.lang summary::-webkit-details-marker{display:none}.lang summary{display:inline-flex;align-items:center;gap:6px;max-width:100%}.lang summary .ic{flex:none}.lang ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
/* In the sidebar the menu opens UPWARDS as a panel, so a short window (laptop + taskbar) never clips the 12 languages. */
.side .lang ul{position:absolute;bottom:calc(100% + 8px);left:0;right:0;margin:0;padding:10px;border-radius:10px;background:var(--forest-deep);border:1px solid rgba(223,194,127,.35);box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:5}
.lang li a{display:inline-block;padding:3px 8px;border-radius:99px;border:1px solid rgba(223,194,127,.35);color:rgba(255,255,255,.85)}
.lang li a.on{background:var(--gold-soft);color:var(--gold-text);border-color:transparent}
.auth-card .lang{text-align:center}.auth-card .lang summary{color:var(--gold)}.auth-card .lang ul{justify-content:center}.auth-card .lang li a{color:var(--forest);border-color:var(--line-strong)}
html[lang="ar"],html[lang="th"],html[lang="ja"],html[lang="ko"],html[lang="zh-CN"]{--serif:var(--sans)}
/* B7.1 (owner, 2026-10-06, a screenshot: the accents of "chiều" and "nhất" beside the circumflex): Georgia has no precomposed Vietnamese letters (92 of the
   134 missing), so Chrome builds them from the base letter and a loose accent that lands beside the circumflex. A
   Vietnamese page takes serif faces that carry every Vietnamese letter: New York (Apple), Cambria and Times New Roman
   (Windows), Noto Serif (Android). */
html[lang="vi"]{--serif:"Cormorant Garamond",ui-serif,Cambria,"Times New Roman","Noto Serif",serif}
html[dir="rtl"] dl.facts dd,html[dir="rtl"] td,html[dir="rtl"] .card-h small{unicode-bidi:plaintext}
/* 2.9.1 R1-UX U15: in Arabic a Latin page title, card title or note keeps its own direction (its full stop stays at its end) */
html[dir="rtl"] .top h1,html[dir="rtl"] .card-h h3,html[dir="rtl"] .pre{unicode-bidi:plaintext}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(80% 60% at 50% 0%,rgba(223,194,127,.18),transparent 60%),var(--ivory)}
.auth-card{width:min(420px,100%);padding:30px 30px 26px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.auth-card .brand{border:0;padding:0 0 18px;justify-content:center}.auth-card .brand b{color:var(--forest)}.auth-card .brand small{color:var(--gold)}
.auth-card h1{margin:0 0 6px;font:600 28px/1.1 var(--serif);color:var(--forest);text-align:center}
.auth-card p{margin:0 0 18px;color:var(--muted);text-align:center;font-size:13px}
label.field{display:block;margin-bottom:14px;font-size:12px;font-weight:600;color:var(--forest)}
label.field input{display:block;width:100%;height:44px;margin-top:6px;padding:0 13px;border:1px solid var(--line-strong);border-radius:11px;background:#fff;font:15px var(--sans);color:var(--ink)}
input.code{letter-spacing:.4em;font-size:20px!important;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:11px;border:0;font:600 14px var(--sans);cursor:pointer}
.btn[hidden]{display:none}
[hidden]{display:none!important}
.btn-gold{width:100%;background:linear-gradient(180deg,#d3a653,var(--gold));color:var(--forest-deep)}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:saturate(.35);box-shadow:none}
.notice-err{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:var(--late-bg);color:var(--late);font-size:13px}
.notice-ok{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:var(--ok-bg);color:var(--ok);font-size:13px}
.main .notice-ok,.main .notice-err{margin:18px 0 0}
.notice-ok,.notice-err,.notice-due{min-width:0;overflow-wrap:anywhere}
label.field select{display:block;width:100%;height:44px;margin-top:6px;padding:0 10px;border:1px solid var(--line-strong);border-radius:11px;background:#fff;font:15px var(--sans);color:var(--ink)}
label.field select[multiple]{height:auto;min-height:150px;padding:8px 10px}
form.inline{display:inline-flex;align-items:center;gap:6px;margin:0 6px 4px 0;vertical-align:middle}
form.inline select{height:32px;padding:0 8px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font:13px var(--sans);color:var(--ink)}
form.inline.grace-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;max-width:100%;margin:12px 0 0}form.grace-form select,form.grace-form input{min-width:0;max-width:100%}fieldset.checks{border:0;padding:0;margin:12px 0;min-width:0;display:flex;flex-wrap:wrap;gap:6px 16px}fieldset.checks legend{width:100%;padding:0;margin:0 0 4px;font-weight:600;font-size:13px;color:var(--forest)}fieldset.checks label.check{margin:0;max-width:100%;overflow-wrap:anywhere}form.grace-form input{flex:1 1 160px;height:32px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;font:13px var(--sans)}
.btn-small{height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--forest);font-size:12px}
.btn-small:hover{border-color:var(--gold);color:var(--gold)}
.btn-danger{color:var(--late)}.btn-danger:hover{border-color:var(--late);background:var(--late-bg);color:var(--late)}
td.actions{white-space:nowrap}
label.field textarea{display:block;width:100%;margin-top:6px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:11px;background:#fff;font:14px/1.5 var(--sans);color:var(--ink);resize:vertical}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
input.cell{display:block;width:120px;max-width:100%;height:34px;padding:0 9px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font:14px var(--sans);text-align:end;font-variant-numeric:tabular-nums}
input.cell-text{width:100%;min-width:180px;margin-top:6px;text-align:start}
.auth-card.auth-wide{width:min(780px,100%)}
.doc-list{list-style:none;margin:0;padding:0}.doc-list li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.doc-list li:first-child{border-top:0}.doc-list li.muted{opacity:.65}.doc-list .doc-state{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}.auth-wide h1{text-align:start}.auth-wide .card{padding:16px 18px}.auth-wide .actions-row .btn-gold{width:auto}
label.check{display:inline-flex;align-items:center;gap:6px;margin:6px 8px 0 0;font-size:12px;font-weight:500;color:var(--ink)}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}.actions-row .btn-gold{width:auto}
.card details summary{list-style:none}.card details summary::-webkit-details-marker{display:none}.card details summary:before{content:"▸ "}.card details[open] summary:before{content:"▾ "}
html[dir="rtl"] .card details:not([open]):not(.round)>summary:before{content:"◂ "}
.switch{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}.switch a{color:var(--gold);font-weight:600}
/* M3.2 domestic: one row per transaction, a six-step progress bar, the per-round timeline */
.rn-badge,.round .rn{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 7px;border-radius:99px;background:var(--forest);color:#fff;font-weight:700;font-size:11px}
.filters .search{height:32px;min-width:240px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;font:13px var(--sans)}
.tx-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:2px 0 14px}.tx-meta div{display:flex;flex-direction:column;gap:2px}.tx-meta span{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.tx-meta b{font-size:16px;color:var(--forest)}
.stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.stepper li{padding:9px 11px;border-radius:10px;background:#eef0ec;color:var(--muted);font-size:12px;font-weight:600;line-height:1.3}
.stepper li small{display:block;font-weight:500;font-size:11px;margin-top:2px;opacity:.85}
.stepper li.done{background:var(--ok-bg);color:var(--ok)}.stepper li.current{background:var(--gold-soft);color:var(--gold-text);box-shadow:inset 0 0 0 1.5px var(--gold)}
.round{border-top:1px solid var(--line);padding:12px 0}.round:first-of-type{border-top:0;padding-top:2px}
.round>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;cursor:pointer}.round.current .rn{background:var(--gold);color:var(--forest-deep)}
.card details.round summary:before{content:none}.round>summary:after{content:"▸";margin-inline-start:auto;color:var(--muted)}.round[open]>summary:after{content:"▾"}
html[dir="rtl"] .round:not([open])>summary:after{content:"◂"}
.round-body{margin-top:10px;margin-inline-start:44px}.reason{margin:0 0 8px;padding:8px 12px;border-inline-start:3px solid var(--gold);background:var(--gold-soft);border-radius:6px;font-size:13px}
.changes{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#f6f3ec;font-size:12.5px}.changes ul{margin:4px 0 0;padding-inline-start:18px}
.events{list-style:none;margin:0;padding:0;padding-inline-start:16px;border-inline-start:2px solid var(--line-strong)}
.events li{position:relative;padding:3px 0 9px;padding-inline-start:12px;font-size:13px}.events li:before{content:"";position:absolute;inset-inline-start:-23px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--line-strong)}
.events li.ok:before{border-color:var(--ok);background:var(--ok-bg)}.events li.warn:before{border-color:var(--due);background:var(--due-bg)}.events li.fail:before{border-color:var(--late);background:var(--late-bg)}.events li.partner:before{border-color:var(--info);background:var(--info-bg)}
.events time{display:inline-block;min-width:118px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.events .who{color:var(--muted);font-size:12px}
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.file{display:inline-block;max-width:100%;overflow-wrap:anywhere;padding:3px 9px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font-size:12px}
.round-files{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px}.round-files .packet{margin-top:6px}
.notice-due{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--due-bg);color:var(--due);font-size:13px}
.todo-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 18px}.todo-group h4{margin:0 0 6px;font-size:13px}.todo-group ul{margin:0;padding-inline-start:18px;font-size:13px}.todo-group li{margin:3px 0}
.lines-table td{padding:4px 4px;vertical-align:top}.lines-table input,.lines-table select{width:100%;min-width:0;box-sizing:border-box;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}.lines-table .n input{text-align:right}
.src-card{display:flex;flex-direction:column;gap:6px}.src-card .ids{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.bi-table th{font-weight:normal}
.sync-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}.sync-line p{margin:0;flex:1 1 320px}.sync-line form{margin:0}.sync-line .btn[disabled]{opacity:.55;cursor:default}.sync-card .notice-due{margin:10px 0 0}
@media (max-width:900px){.stepper{grid-template-columns:repeat(2,minmax(0,1fr))}.tx-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.round-body{margin-inline-start:0}.filters .search{min-width:0;width:100%}}
/* B37 (U2, owner Q10): on a phone the sidebar gives way to the bottom bar of five and "More" (the rules of the frame at the end of the sheet);
   the top bar keeps the title, the bell and the account menu, which holds the sign-out and the language menu on every width. */
@media (max-width:900px){.app{grid-template-columns:minmax(0,1fr)}.top h1{font-size:24px}
.main{padding:0 16px 32px}.top{margin:0 -16px 8px;padding:10px 16px}[class*=span-]{grid-column:span 12}.fields{grid-template-columns:1fr}}
/* 2.9 history drawer (docs/APP_2_9_DESIGN.md §2): a card at the end of the page on a phone; a fixed bottom-right tab that
   opens into a right-edge panel on a desktop. Closed by default, remembered per user (decision D). Never printed. */
.audit{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow)}
.audit>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;cursor:pointer;list-style:none;font:600 15px var(--sans);color:var(--forest)}
.audit>summary::-webkit-details-marker{display:none}.audit>summary:before{content:"▸ ";color:var(--muted)}html[dir="rtl"] .audit:not([open])>summary:before{content:"◂ "}.audit[open]>summary:before{content:"▾ "}
.audit>summary .count{margin-inline-start:auto;padding:1px 8px;border-radius:99px;background:var(--gold-soft);color:var(--gold-text);font-size:11px}
.audit-body{padding:0 16px 16px}.audit-body .dom-timeline{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}.audit-body .round-body{margin-inline-start:0}
.audit-list{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line-strong)}
.audit-row{position:relative;padding:6px 0 10px;padding-inline-start:14px;font-size:13px}
.audit-row:before{content:"";position:absolute;inset-inline-start:-6px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--paper);border:2px solid var(--line-strong)}
.audit-row time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.audit-row p{margin:2px 0 0;overflow-wrap:anywhere}.audit-row .fact{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.audit-more{margin-top:10px}.audit-chip{display:none;text-decoration:none}
@media not all and (max-width:900px){.audit{position:fixed;inset-inline-end:16px;bottom:16px;z-index:20;margin:0;max-width:380px}
.audit[open]{top:92px;width:min(380px,30vw)}.audit[open]>.audit-body{max-height:calc(100vh - 170px);overflow:auto}
.app:has(.audit[open]) .main{padding-inline-end:calc(min(380px,30vw) + 32px)}}
@media (max-width:900px){.audit-chip{display:inline-flex}}
@media print{.audit,.audit-chip,.bottom-nav,.acct-menu{display:none}}
/* 2.9.1 customer communications (/comms): section tabs, the four numbered campaign steps, the audience picker, the mail preview. */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}.tabs a{padding:6px 13px;border-radius:99px;border:1px solid var(--line-strong);background:var(--paper);color:var(--forest);font-size:12px;font-weight:600}
.tabs a.on{background:var(--forest);border-color:var(--forest);color:#fff}.tabs a:hover{border-color:var(--gold)}
.steps{display:grid;gap:18px;margin-top:18px;counter-reset:step}
.step{position:relative;padding-inline-start:70px}.step:before{counter-increment:step;content:counter(step);position:absolute;inset-inline-start:22px;top:20px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--forest);color:#fff;font:700 14px var(--sans)}
.step.done:before{background:var(--gold);color:var(--forest-deep)}.step.off{opacity:.6}.step.off:before{background:#c9cec8}
.picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.checks{display:flex;flex-wrap:wrap;gap:2px 14px;margin:6px 0 12px}
.checks label.check{margin:4px 0}.checks small{color:var(--muted)}
.tally{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:6px;padding:14px 16px;border-radius:12px;background:var(--ivory);border:1px solid var(--line)}
.tally .big{font:600 34px/1 var(--serif);color:var(--forest)}.tally .big small{display:block;margin-top:4px;font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mail-frame{display:block;width:100%;height:760px;border:1px solid var(--line-strong);border-radius:12px;background:#efe9dc}
.occ{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.occ:first-child{border-top:0;padding-top:2px}
.occ .when{padding:7px 6px;border-radius:10px;background:var(--gold-soft);color:var(--gold-text);text-align:center;font-size:12px;font-weight:700;line-height:1.3}.occ .when small{display:block;font-weight:500}
.occ h4{margin:0 0 4px;font:600 16px/1.2 var(--sans);color:var(--forest)}.occ .tags{margin-top:4px}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px}.lib .card{display:flex;flex-direction:column;gap:8px}.lib .card h4{margin:0;font:600 17px/1.25 var(--serif);color:var(--forest)}
.lib .card .actions-row{margin-top:auto}
.fills{margin:4px 0 16px;padding:12px 16px 2px;border:1px solid var(--gold-light);border-radius:12px;background:var(--ivory)}.fills legend{padding:0 6px;font-size:12px;font-weight:700;color:var(--forest)}
.fill-h{margin:6px 0 8px;color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}label.field input.unfilled{border-color:var(--gold);background:var(--gold-soft)}
.step .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;filter:saturate(.4)}
@media (max-width:900px){.picker{grid-template-columns:1fr}.mail-frame{height:600px}.step{padding-inline-start:22px;padding-top:62px}.occ{grid-template-columns:78px minmax(0,1fr)}.occ>form,.occ>a.btn{grid-column:1 / -1}}
/* 2.9.1 R1-UX (U9, U13, U14): a decision sits under or beside the text it is about and wraps under it when the card is
   narrow — a long name, a translated button or a phone never pushes a button out of its card; notes are text areas, a
   rejection and a revocation open in their own disclosure. */
.regs li{flex-wrap:wrap}.regs .reg-info{flex:1 1 300px;min-width:0}.regs .reg-actions{flex:1 1 280px;min-width:0}.asg-main{flex:1 1 auto;min-width:0}
.decide{margin-top:8px}.decide label.field{margin-bottom:8px}
details.decide>summary{cursor:pointer;color:var(--muted);font-size:13px}details.decide[open]{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ivory)}
details.decide[open]>summary{margin-bottom:8px}
label.check.block{display:flex;align-items:flex-start;margin:4px 0 10px;line-height:1.45}label.check.block input{flex:0 0 auto;margin:2px 0 0}
.notice-err.in-card,.notice-ok.in-card,.notice-due.in-card{margin:0 0 12px}
.card a.row-link{color:var(--forest);font-weight:600}.card a.row-link:hover{color:var(--gold)}
.notice-ok a,.notice-err a,.notice-due a{font-weight:600;text-decoration:underline}
/* B5 (2026-10-05, owner report from a phone): every label, value, chip and date tile stays inside its own box. A wide value
   (a row of document chips) no longer squeezes the label column to nothing: the label column takes at most 42% and wraps,
   the value wraps in its own column, and on a phone the label sits above its value. Chips wrap like text when a long
   one meets a narrow card. tests/layout-overflow.test.mjs walks every page in a real browser. */
dl.facts{grid-template-columns:fit-content(42%) minmax(0,1fr)}dl.facts dt,dl.facts dd{min-width:0;overflow-wrap:anywhere}
.chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.occ{grid-template-columns:minmax(92px,max-content) minmax(0,1fr) auto}
@media (max-width:560px){dl.facts{grid-template-columns:minmax(0,1fr);row-gap:2px}dl.facts dd{margin-bottom:8px}}
@media (max-width:900px){.occ{grid-template-columns:minmax(78px,max-content) minmax(0,1fr)}}
/* A long document number, contract number, name or option text wraps instead of widening the page: the top bar and its
   title, the domestic summary figures, list rows, the card pages (sign-in, buyer and partner links) and every select. */
.top>div:first-child,.top>.histnav+div{min-width:0}.crumbs,.top h1{overflow-wrap:anywhere}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
.tx-meta div{min-width:0}.tx-meta b{overflow-wrap:anywhere}
.doc-list li{flex-wrap:wrap}.doc-list li>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.auth{grid-template-columns:minmax(0,1fr)}.auth-card{min-width:0;overflow-wrap:anywhere}
select{max-width:100%}
/* B6a (2026-10-05) bank screens: account cards; the coverage calendar as month cells that wrap (never a wide table);
   transactions as a table on a desktop and as cards on a phone (one HTML, the CSS picks); crops of scanned lines. */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.acct{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
.acct-h{display:flex;flex-wrap:wrap;gap:6px}.acct h4{margin:10px 0 2px;font:600 17px/1.25 var(--serif);color:var(--forest);overflow-wrap:anywhere}
.acct-bal{margin-top:10px}.acct-bal b{display:block;font:600 22px/1.15 var(--serif);color:var(--forest);overflow-wrap:anywhere}.acct-bal small{display:block}
.acct .tags{margin-top:8px}.acct .actions-row{margin-top:10px}
.cov-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 16px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}.cov-row:first-child{border-top:0;padding-top:0}
.cov-name{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.cov,.cov-legend{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}.cov-legend{margin-top:12px;gap:6px 10px}
.cov-cell{position:relative;display:inline-flex;flex-direction:column;align-items:center;min-width:46px;padding:4px 6px;border-radius:8px;background:#eef0ec;color:var(--muted);font-size:11px;line-height:1.25}
.cov-legend .cov-cell{flex-direction:row;gap:4px;min-width:0;max-width:100%}
.cov-cell b{font-size:13px}.cov-cell.LOCKED{background:var(--ok-bg);color:var(--ok)}.cov-cell.CHECKED{background:var(--info-bg);color:var(--info)}
.cov-cell.DRAFT,.cov-cell.PARTIAL{background:var(--due-bg);color:var(--due)}.cov-cell.MISSING{background:var(--late-bg);color:var(--late)}.cov-cell.CURRENT{background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bank-cards{display:none;list-style:none;margin:0;padding:0}
.tx{padding:10px 12px;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0;overflow-wrap:anywhere}
.tx-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}.tx .tags{margin-top:6px}
.amt{font-variant-numeric:tabular-nums;white-space:nowrap}.amt.in{color:var(--ok)}.amt.out{color:var(--late)}
@media (max-width:700px){.bank-table{display:none}.bank-cards{display:block}.cov-row{grid-template-columns:minmax(0,1fr)}}
/* B6a: /accounts as a table on a desktop and as cards on a phone */
.xacc-cards{display:none;list-style:none;margin:0;padding:0}
.xacc{padding:10px 12px;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0;overflow-wrap:anywhere}
.xacc-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px}.xacc>div+div{margin-top:4px}
@media (max-width:700px){.xacc-table{display:none}.xacc-cards{display:block}}
.crop{display:block;max-width:100%;height:auto;margin-bottom:8px;border:1px solid var(--line-strong);border-radius:8px;background:#fff}
.visual-list li{align-items:flex-start}.visual-main{flex:1 1 320px;min-width:0}.visual-act{flex:0 1 260px;min-width:0}
.check-list li{align-items:center}.check-list li>div{flex:1 1 160px;min-width:0}
.steps-list{margin:0;padding-inline-start:20px}.steps-list li{margin:0 0 8px}.code-box{margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--ivory);border:1px solid var(--line)}
/* B6b (2026-10-05) matching: a proposal shows its lines beside its documents (stacked on a phone); amounts keep to the
   row's end; the payment progress of a register contract as a bar. */
.proposal>p{margin:6px 0}.match-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px 18px;margin-top:8px}
.match-cols h4{margin:6px 0 2px;font:600 13px/1.3 var(--sans);color:var(--muted);overflow-wrap:anywhere}
.amt-col{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 1 auto}
@media (max-width:700px){.amt-col{align-items:flex-start}}
.proposal form.inline{display:flex;flex-wrap:wrap;margin:0}.proposal form.inline input{flex:1 1 180px;min-width:0;height:32px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;font:13px var(--sans)}
.tabs .count{margin-inline-start:4px;opacity:.75;font-weight:500}
.progress{height:8px;margin:10px 0 6px;border-radius:99px;background:#eef0ec;overflow:hidden}.progress span{display:block;height:100%;background:var(--ok)}
/* B6c (2026-10-06) treasury and CFO: the management note on every page; a month's cash flow as a card of rows (a grid that
   folds to one column on a phone); a closed or a balance-only month in the coverage calendar. */
.mgmt-note{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--info-bg);color:var(--info);font-size:13px;font-weight:600;overflow-wrap:anywhere}
.flow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px;margin-top:18px}.flow-grid .card{margin:0}
.flow-list{list-style:none;margin:0;padding:0}.flow-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.flow-list li:first-child{border-top:0}.flow-list li>span{min-width:0;overflow-wrap:anywhere}.flow-list li>b{margin-inline-start:auto}.flow-list .flow-head{font-weight:600}
.detail-list{margin:6px 0 0;padding-inline-start:18px;font-size:12px;color:var(--muted)}.detail-list li{margin:2px 0;overflow-wrap:anywhere}
.doc-list .detail-list li{display:list-item;padding:0;border-top:0}
.section-title{margin:28px 0 0;font:600 20px/1.3 var(--serif);color:var(--forest)}
.cov-cell.CLOSED{background:#e6e6e6;color:#5b5b5b}.cov-cell.BALANCE{background:var(--gold-soft);color:var(--gold-text)}
/* B7 (2026-10-06) warehouse: a lot code reads as one word; quantities in kg with pounds under them; the grades of a run as a
   grid of small labelled boxes (two to six a row, whatever the language); a ratio as a row with its bar, the figure taking at
   most 60% of the row so its label always shows, its details under it in a lighter line; the lot filter wraps on a phone. */
.lot-code{font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.qty{font-variant-numeric:tabular-nums;white-space:nowrap}
.qty small{display:block;color:var(--muted);font-size:11px}
.grade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,132px),1fr));gap:8px 12px;margin:6px 0 12px}
.grade-grid label.field{margin:0;display:flex;flex-direction:column;justify-content:flex-end}.grade-grid label.field input{height:38px}
.ratio-list{list-style:none;margin:0;padding:0}.ratio-list li{display:grid;grid-template-columns:minmax(0,1fr) fit-content(60%);gap:2px 12px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.ratio-list li:first-child{border-top:0}.ratio-list li>span{min-width:0;overflow-wrap:anywhere}.ratio-list li>b{min-width:0;text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ratio-list li>b small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.ratio-list .bar{grid-column:1 / -1;height:6px;border-radius:99px;background:#eef0ec;overflow:hidden}.ratio-list .bar i{display:block;height:100%;background:var(--gold)}
form.inline.inv-filter{display:flex;flex-wrap:wrap;margin:12px 0}.inv-filter select,.inv-filter input.search{min-width:0;max-width:100%}
.asof-field{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;font-size:13px;color:var(--muted)}.asof-field input{height:32px;padding:0 8px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font:13px var(--sans);color:var(--ink);min-width:0;max-width:100%}.asof-note{margin:0 0 10px}
.cust-manage{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}.cust-manage h4{margin:0 0 8px;font-size:14px}.merge-pick{list-style:none;margin:8px 0;padding:0}.merge-pick li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}.merge-pick li>div{min-width:0;overflow-wrap:anywhere}
/* B29 (2026-10-25) profit and loss: the period's two days and its button wrap on a phone; the presets as chips; a statement line under
   its heading set in; a seller's class form wraps under its name; the months' total row and the stock's total ruled off; on a phone the
   month table keeps the revenue and the profit before tax. */
form.pnl-range{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:0 0 6px}form.pnl-range label.field{margin:0;min-width:0;flex:1 1 150px;max-width:220px}form.pnl-range input{min-width:0;max-width:100%}
.pnl-presets{margin:6px 0 0}.pnl-presets a.chip{text-decoration:none}.card-h .pnl-csv,.card-h form.pnl-suggest{margin-inline-start:auto}
.pnl-list li.pnl-sub{padding-inline-start:16px;color:var(--muted)}.pnl-list .flow-head{font-size:14px}.pnl-kpis{margin-top:18px}
.pnl-kpis .value{font-size:clamp(19px,1.55vw,28px);line-height:1.15;min-width:0;overflow-wrap:anywhere}.pnl-kpis .card{min-width:0}.pnl-warn{margin-top:18px}.pnl-warn .doc-list li>span{min-width:0;overflow-wrap:anywhere}
form.inline.pnl-class{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;max-width:100%}form.pnl-class select{min-width:0;max-width:100%}
table.pnl-months tr.total td,.table-wrap tr.total td{border-top:2px solid var(--line-strong)}.pnl-stock li.pnl-total{border-top:2px solid var(--line-strong)}
table.pnl-months th,table.pnl-months td{padding:8px 6px}table.pnl-months th{white-space:normal;overflow-wrap:anywhere}table.pnl-months td.num{white-space:nowrap}
@media (max-width:1180px){table.pnl-months .pnl-opt{display:none}table.pnl-months td.nowrap{white-space:normal}}
@media (max-width:640px){table.pnl-months{font-size:12px}table.pnl-months th,table.pnl-months td{padding:6px 4px}}
.pnl-list li.pnl-sub2{padding-inline-start:32px;font-size:12.5px}.pnl-kpis a.chip,.card-h a.chip{text-decoration:none}
/* B33 (2026-10-30) the bank pages' period: the kind and its values wrap (one per row on a phone), the quick choices as chips, the period's
   figures of an account in a row of four that wraps, the pages of lines under the list. */
.b33-period{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:10px 0 6px}.b33-period label.b33-field{margin:0;min-width:0;flex:1 1 150px;max-width:220px}
.b33-period input,.b33-period select{min-width:0;max-width:100%;width:100%}.b33-presets{margin:6px 0 10px}.b33-presets a.chip{text-decoration:none}
dl.b33-figures{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0}dl.b33-figures>div{min-width:0}dl.b33-figures dt{font-size:12px;color:var(--muted)}dl.b33-figures dd{margin:0;white-space:nowrap}
ul.b33-notes{list-style:none;margin:6px 0 0;padding:0}ul.b33-notes li{margin:4px 0;overflow-wrap:anywhere}.b33-summary li>div{min-width:0}.b33-pager{align-items:center;margin-top:10px}
@media (max-width:640px){.b33-period label.b33-field{flex:1 1 100%;max-width:none}dl.b33-figures dd{white-space:normal;overflow-wrap:anywhere}}
li.pnl-seller>div{flex:1 1 100%;min-width:0}li.pnl-seller form.pnl-class{margin:6px 0 0;flex-wrap:nowrap}li.pnl-seller form.pnl-class select{flex:1 1 auto;width:0}details.pnl-inv .doc-list li>form.pnl-class{flex:1 1 100%}details.pnl-inv{margin:8px 0 0}details.pnl-inv>summary{cursor:pointer;font-size:13px}
details.pnl-inv .doc-list li{padding:6px 0}details.pnl-inv .doc-list li>div{min-width:0;overflow-wrap:anywhere}.pnl-refs .pnl-suggest-line{margin:4px 0;font-weight:600;overflow-wrap:anywhere}.pnl-refs form.inline{margin:4px 0 0}
.pnl-stock li.pnl-prod{border-top:1px solid var(--line-strong)}.pnl-stock li.pnl-lot{padding-inline-start:14px;font-size:13px}.pnl-stock li>div{min-width:0}.pnl-stock .lot-code{overflow-wrap:anywhere}.pnl-stock .chip{white-space:normal;max-width:100%;overflow-wrap:anywhere}
.pnl-marks{margin-top:18px}.pnl-marks .doc-list li>span{min-width:0;overflow-wrap:anywhere}form.pnl-cost .fields{flex-wrap:wrap}form.pnl-cost .rule{margin:2px 0 8px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}form.pnl-cost{min-width:0}form.pnl-stock-day{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end;margin:0}form.pnl-stock-day label.field{margin:0;flex:1 1 150px;max-width:220px}
.pnl-bank li.pnl-bank-line>div:first-child{flex:1 1 100%;min-width:0}.pnl-bank-text{overflow-wrap:anywhere;font-size:13px}form.pnl-bank-form{margin:6px 0 0;min-width:0}form.pnl-bank-form .fields{flex-wrap:wrap}form.pnl-bank-form label.field{flex:1 1 150px;min-width:0;max-width:260px}select.pnl-target{min-width:min(100%,160px);max-width:100%}
.pnl-cash li>div:first-child{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}.pnl-filed-list li>div{flex:1 1 100%;min-width:0}table.pnl-filed{font-size:13px}table.pnl-filed td,table.pnl-filed th{padding:4px 6px}details.pnl-filed-form{margin-top:10px}details.pnl-filed-form>summary{cursor:pointer}.spec-texts textarea{width:100%;min-width:0;font-size:13px;margin:4px 0}
td.q-line-edit{min-width:0}td.q-line-edit select,td.q-line-edit input.cell{min-width:120px;max-width:100%;margin:2px 0}td.q-line-edit .q-qty{display:flex;gap:4px;align-items:center}td.q-line-edit .q-qty input{width:96px;min-width:96px}td.q-line-edit .q-qty select{min-width:64px;width:72px}.q-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}.q-pick select,.q-pick input{min-width:0;max-width:100%}.q-pick input{flex:1 1 160px}.q-field{min-width:0}.q-field .q-pick select{flex:1 1 140px;width:auto}
.inv-lines{display:grid;gap:10px;margin:6px 0 14px}.inv-line{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
.inv-line .fields{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}.inv-line label.field{margin-bottom:8px}
/* B9 part B (owner, 2026-10-07, B3): in a table a role chip is one word (it never breaks letter by letter), the chips wrap chip
   by chip, the address cell wraps anywhere, the action buttons wrap under each other instead of being cut; the sign-in card
   gets its method tabs and the captcha (B36 A7: no lock countdown any more — a lock is told by e-mail only); the Security page its lists. */
td .chip{white-space:nowrap;overflow-wrap:normal}td .tags{min-width:0}td.actions{white-space:normal}td.actions form.inline{flex-wrap:wrap;margin:0 6px 6px 0}
.team-table td.addr{overflow-wrap:anywhere;min-width:120px}.team-table td.roles{min-width:150px}
.method-tabs{display:flex;gap:6px;margin:0 0 16px}.method-tabs a{flex:1 1 0;min-width:0;padding:9px 10px;border-radius:10px;border:1px solid var(--line-strong);text-align:center;font-size:13px;font-weight:600;color:var(--forest);overflow-wrap:anywhere}
.method-tabs a.on{background:var(--forest);border-color:var(--forest);color:#fff}
.captcha{display:block;width:100%;max-width:220px;height:auto;margin:6px 0 10px;border:1px solid var(--line-strong);border-radius:10px;background:#fff}
#two-factor-reminder{margin:0 0 12px}#two-factor-reminder a{color:inherit;font-weight:600;text-decoration:underline}
.qr{display:block;width:min(100%,232px);height:auto;margin:10px auto;border:1px solid var(--line);border-radius:10px;background:#fff}.qr svg{display:block;width:100%;height:auto}
.key-box{margin:6px 0 10px;padding:8px 10px;border-radius:8px;background:var(--ivory);border:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.08em;overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:6px 12px;margin:8px 0;padding:0;list-style:none}.codes li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.06em}
.sessions li{align-items:center}.sessions li>div{flex:1 1 220px;min-width:0}.switch .sep{margin:0 6px;color:var(--muted)}
/* B11 (owner order 2026-10-08): the tax screens — the period filter wraps on a phone; a pack's figures are label | amount rows
   whose labels wrap and whose amounts stay readable, one under the other on a phone. */
form.inline.tax-filter{display:flex;flex-wrap:wrap;margin:12px 0}.tax-filter select{min-width:0;max-width:100%}.tax-filter label.field{min-width:0;max-width:100%}
table.kv th{width:58%;white-space:normal;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
table.kv td{text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:560px){table.kv,table.kv tbody,table.kv tr{display:block}table.kv th,table.kv td{display:block;width:auto;padding:6px 0 0;border:0}table.kv td{padding:2px 0 8px;text-align:start;border-bottom:1px solid var(--line)}}
/* B19a (owner order 2026-10-15): back and forward in the top bar when the App runs from a phone's home screen (no browser bar there);
   the document page's share and download row. */
.histnav{display:none;align-items:center;gap:6px;flex:0 0 auto}
@media (display-mode: standalone){.histnav{display:flex}}
html.ld-standalone .histnav{display:flex}
.hist-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--forest);font:600 22px/1 var(--sans);cursor:pointer}
.hist-btn:active{background:var(--ivory)}.top>.histnav+div{flex:1 1 200px}
@media print{.histnav{display:none}}
.doc-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.doc-share .btn{min-width:0}
.share-link{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;overflow-wrap:anywhere}
/* B23a (owner order 2026-10-17): the bell of the top bar (unread notifications) and its list; the review card of a quotation. */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--forest)}
.bell:hover{border-color:var(--gold);color:var(--gold)}.bell svg{width:20px;height:20px;display:block}.bell.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(189,140,56,.14)}
.bell-count{position:absolute;top:-8px;inset-inline-end:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--late);color:#fff;font:700 11px/20px var(--sans);text-align:center}
.bell-list{list-style:none;margin:0;padding:0}.bell-item{border-top:1px solid var(--line)}.bell-item:first-child{border-top:0}
.bell-link{display:flex;align-items:flex-start;gap:12px;padding:12px 4px}.bell-link:hover{background:rgba(189,140,56,.06)}
.bell-dot{flex:0 0 8px;width:8px;height:8px;margin-top:7px;border-radius:50%;background:transparent}.bell-item.unread .bell-dot{background:var(--gold)}
.bell-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.bell-text b{color:var(--forest);font-weight:600}.bell-item:not(.unread) .bell-text b{font-weight:500}
.bell-text small{font-size:12px}.bell-go{flex:0 0 auto;color:var(--muted)}
.review-steps{list-style:none;margin:0;padding:0;padding-inline-start:16px;border-inline-start:2px solid var(--line-strong)}
.review-steps li{position:relative;padding:3px 0 10px;padding-inline-start:12px;font-size:13px;overflow-wrap:anywhere}
.review-steps li:before{content:"";position:absolute;inset-inline-start:-23px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--line-strong)}
.review-steps li.ok:before{border-color:var(--ok);background:var(--ok-bg)}.review-steps li.due:before{border-color:var(--due);background:var(--due-bg)}.review-steps li.gold:before{border-color:var(--gold);background:var(--gold-soft)}
/* B24: the timeline's ended steps (withdrawn, declined, rejected), the ended banner with its way on, the bell's tabs, day groups and done items */
.review-steps li.late:before{border-color:var(--late);background:var(--late-bg)}
.notice-due.ended p{margin:0 0 8px}.notice-due.ended .actions-row{margin:0;gap:8px;flex-wrap:wrap}
.bell-tabs{margin:0 0 12px}.bell-day{margin:14px 0 4px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.bell-item.done .bell-text b{color:var(--muted);font-weight:500}.bell-item.done .bell-text span{color:var(--muted)}.bell-done{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:99px;background:var(--ok-bg);color:var(--ok);font-size:11px;font-weight:600}
.wait-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.wait-list a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.wait-list a:hover{border-color:var(--gold)}
.wait-list b{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:99px;background:linear-gradient(180deg,#e2bf74,var(--gold));color:var(--forest-deep);font:700 13px/1 var(--sans)}.wait-list .due b{background:linear-gradient(180deg,#f3d2ad,#e2a56b)}
.review-steps time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.review-steps .quote-note{display:block;margin-top:4px;padding:6px 10px;border-inline-start:3px solid var(--due);background:var(--due-bg);border-radius:6px}
.next-step{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:12px 0 0;padding:12px 14px;border:1px solid rgba(189,140,56,.45);border-radius:12px;background:linear-gradient(90deg,var(--gold-soft),#fffaf0)}
.next-step p{margin:0;flex:1 1 260px;min-width:0;color:#5f451a;font-size:13px}.next-step form{margin:0}.next-step .btn-gold{width:auto}
/* B23b (owner order 2026-10-17: a home page "cao cấp, rõ ràng"): the hero says what waits (pills), the sections in their order of use, a finer KPI card;
   the quotation states strip and the list's tabs. */
.home-hero{padding:30px 34px 26px;overflow:hidden}
.home-hero:after{content:"";position:absolute;inset-inline-end:-70px;top:-70px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(223,194,127,.22);box-shadow:0 0 0 30px rgba(223,194,127,.05),0 0 0 66px rgba(223,194,127,.035);pointer-events:none}
.hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-pill{display:inline-flex;align-items:center;gap:10px;min-height:40px;max-width:100%;padding-block:6px;padding-inline:6px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(223,194,127,.38);color:#fff;font-size:13px;font-weight:500}
.hero-pill span{min-width:0;overflow-wrap:anywhere}
.hero-pill b{display:inline-grid;place-items:center;flex:0 0 auto;min-width:28px;height:28px;padding:0 8px;border-radius:99px;background:linear-gradient(180deg,#e2bf74,var(--gold));color:var(--forest-deep);font:700 13px/1 var(--sans)}
.hero-pill:hover{background:rgba(255,255,255,.14);border-color:var(--gold-light)}.hero-pill.due b{background:linear-gradient(180deg,#f3d2ad,#e2a56b)}
.hero-clear{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);font-size:13px}.hero-clear .ic{color:var(--gold-light)}
.home-section{margin-top:30px}.section-head{display:flex;align-items:center;gap:14px}
.section-head h2{margin:0;flex:0 1 auto;min-width:0;font:600 22px/1.15 var(--serif);color:var(--forest);letter-spacing:.01em;overflow-wrap:anywhere}
.section-head:after{content:"";flex:1 1 40px;height:1px;background:linear-gradient(90deg,rgba(189,140,56,.55),rgba(189,140,56,0))}
html[dir="rtl"] .section-head:after{background:linear-gradient(270deg,rgba(189,140,56,.55),rgba(189,140,56,0))}
.home-section .grid{margin-top:14px}
.home-section .card.kpi{border-top:3px solid rgba(189,140,56,.55);transition:box-shadow .2s ease,transform .2s ease}
.home-section .card.kpi:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(6,45,33,.05),0 18px 40px rgba(6,45,33,.09)}
.state-strip{display:flex;flex-wrap:wrap;gap:8px}.state-strip a{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:12px}
.state-strip a:hover{border-color:var(--gold)}.state-strip b{font:600 18px/1 var(--serif);color:var(--forest)}
.quote-tabs{margin:0 0 14px}
@media (max-width:560px){.home-hero{padding:22px 18px}.hero-pill{font-size:12px}.section-head h2{font-size:19px}}
@media (prefers-reduced-motion:reduce){.home-section .card.kpi{transition:none}.home-section .card.kpi:hover{transform:none}}
/* ---- B37 (U1): the utilities that replace the commonest inline styles; every icon is an inline SVG of icons.mjs ---- */
.u-mt-0{margin-top:0}.u-mt-6{margin-top:6px}.u-mt-8{margin-top:8px}.u-mt-10{margin-top:10px}.u-mt-12{margin-top:12px}.u-mt-14{margin-top:14px}.u-mt-18{margin-top:18px}
.u-mb-6{margin-bottom:6px}.u-mb-12{margin-bottom:12px}.u-m-0{margin:0}.u-span-full{grid-column:1/-1}.u-pointer{cursor:pointer}.u-wrap{overflow-wrap:anywhere}.u-fs-12{font-size:12px}
.u-center{text-align:center}.u-ms-auto{margin-inline-start:auto}.u-flex-wrap{flex-wrap:wrap}.u-items-end{align-items:flex-end}
.ic{display:inline-block;vertical-align:-.2em;flex:none}
/* ---- B37 (U2): the frame — a sticky top bar, the content capped at 1440 px on a wide screen, the icons of the menu, the account menu,
   the footer with the data note, and on a phone the bottom bar of five with "More" ---- */
.top{position:sticky;top:0;z-index:21;background:rgba(247,242,232,.9);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
.top>.brand{display:none}.top>.title{flex:1 1 200px;min-width:0}
@media (min-width:1600px){.main>:not(.top):not(.audit){max-width:1440px;margin-inline:auto}}
.nav a .ic{color:rgba(223,194,127,.72)}.nav a.on .ic,.nav a:hover .ic{color:var(--gold-light)}.nav a .ic-ext{margin-inline-start:auto;opacity:.7}
.acct-menu{position:relative;flex:none}
.acct-menu>summary{list-style:none;display:flex;align-items:center;cursor:pointer;padding:3px;border-radius:99px}
.acct-menu>summary::-webkit-details-marker{display:none}.acct-menu>summary:hover,.acct-menu[open]>summary{background:rgba(11,59,44,.08)}
.avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;background:linear-gradient(180deg,var(--forest-2),var(--forest-deep));color:var(--gold-light);font:600 16px/1 var(--serif);flex:none}
.acct-menu .panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:30;width:min(300px,calc(100vw - 32px));padding:14px;border:1px solid var(--line-strong);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--shadow);overflow-wrap:anywhere}
.acct-menu .panel b{display:block;font-size:13px;color:var(--ink)}.acct-menu .panel>span{display:block;font-size:11px;color:var(--muted)}
.acct-menu .panel .links{display:grid;gap:2px;margin:10px 0}.acct-menu .panel .links a{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--forest)}
.acct-menu .panel .links a:hover{background:rgba(11,59,44,.06)}
.acct-menu .lang{margin:0 0 10px}.acct-menu .lang summary{color:var(--forest)}.acct-menu .lang li a{color:var(--forest);border-color:var(--line-strong)}
.acct-menu .panel form{margin:0}.acct-menu .panel form button{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--forest);font:600 13px var(--sans);cursor:pointer}
.acct-menu .panel form button:hover{border-color:var(--gold);color:var(--gold-text)}
.app-foot{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:32px;padding:14px 0 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.bottom-nav{display:none}
/* the drawer has no box while "More" is closed: inside a closed details Chromium lays the content out with the details as the containing block
   of a fixed element (its content-visibility brings layout containment), so a geometry query would measure links outside the screen that are
   never painted */
.bottom-nav>details:not([open])>.drawer{display:none}
html.ld-standalone .top>.brand{display:none!important}@media (display-mode: standalone){.top>.brand{display:none!important}}
@media (max-width:900px){
  .side{display:none}
  .main{padding-bottom:calc(var(--bar-h) + 28px)}
  .top{min-height:60px;gap:10px;padding-top:8px;padding-bottom:8px}
  .top>.brand{display:flex;flex:none;padding:0;border:0}.top>.brand img{width:32px;height:32px}.top>.brand>div{display:none}
  .bottom-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:25;height:calc(var(--bar-h) + env(safe-area-inset-bottom));
    padding:0 0 env(safe-area-inset-bottom);background:var(--forest-deep);border-top:1px solid rgba(223,194,127,.25);box-shadow:0 -6px 20px rgba(6,45,33,.18)}
  .bottom-nav>a,.bottom-nav>details>summary{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:var(--bar-h);
    padding:5px 1px 4px;color:rgba(255,255,255,.76);font-size:10px;font-weight:600;letter-spacing:-.01em;line-height:1.15;text-align:center;list-style:none;cursor:pointer}
  .bottom-nav>details{min-width:0}.bottom-nav>details>summary::-webkit-details-marker{display:none}
  .bottom-nav .lbl{display:block;max-width:100%;overflow-wrap:anywhere}
  .bottom-nav>a.on,.bottom-nav>details>summary.on,.bottom-nav>details[open]>summary{color:var(--gold-light)}
  .bottom-nav>a.on:before{content:"";position:absolute;top:0;left:24%;right:24%;height:2px;border-radius:0 0 2px 2px;background:var(--gold)}
  .bottom-nav>a .count{position:absolute;top:4px;inset-inline-start:calc(100% / 2 + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--gold);color:var(--forest-deep);font-size:10px;line-height:16px}
  .bottom-nav .drawer{position:fixed;left:0;right:0;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));max-height:calc(100vh - var(--bar-h) - 72px);overflow:auto;padding:10px 16px 16px;
    background:var(--forest);color:rgba(255,255,255,.88);border-top:1px solid rgba(223,194,127,.3);border-radius:18px 18px 0 0;box-shadow:0 -14px 36px rgba(0,0,0,.35);text-align:start}
  .bottom-nav .drawer h6{margin:12px 6px 4px;color:rgba(223,194,127,.72);font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
  .bottom-nav .drawer a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 10px;border-radius:10px;font-size:14px;font-weight:500;overflow-wrap:anywhere}
  .bottom-nav .drawer a>span{min-width:0}.bottom-nav .drawer a.on{color:#fff;background:rgba(223,194,127,.14)}.bottom-nav .drawer .ic{color:var(--gold-light)}
  .bottom-nav .drawer .count{margin-inline-start:auto;padding:1px 7px;border-radius:99px;background:rgba(223,194,127,.18);color:var(--gold-light);font-size:11px}
  .bottom-nav .drawer .ic-ext{margin-inline-start:auto;opacity:.7}
}
@media print{.top{position:static}}
/* ---- B37 (U4): list tables — codes that never break letter by letter, a row hover, and on a phone the rows of the RFQ, quotation and
   customer lists drawn as cards whose cells carry their column's name (data-label) ---- */
tbody tr:hover>td{background:rgba(11,59,44,.025)}
/* a list's filter row on a phone: every select takes the row and shrinks with it (a long country name never widens the card) */
@media (max-width:640px){form.inline.filters{display:flex;width:100%}form.inline.filters select,form.inline.filters input.search{flex:1 1 160px;min-width:0;width:100%}}
.doc-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:nowrap}
@media (max-width:640px){
  table.cards,table.cards>tbody,table.cards>tbody>tr{display:block;width:100%}
  table.cards>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.cards>tbody>tr{margin:0 0 10px;padding:4px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
  table.cards>tbody>tr>td{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);column-gap:12px;align-items:start;padding:7px 0;border:0;border-bottom:1px solid var(--line);
    text-align:start;white-space:normal;min-width:0;overflow-wrap:anywhere}
  table.cards>tbody>tr>td:last-child{border-bottom:0}
  table.cards>tbody>tr>td::before{content:attr(data-label);grid-column:1;grid-row:1 / span 12;color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
  table.cards>tbody>tr>td:not([data-label]){grid-template-columns:minmax(0,1fr)}table.cards>tbody>tr>td:not([data-label])::before{display:none}
  table.cards>tbody>tr>td>*{min-width:0;max-width:100%}table.cards>tbody>tr:hover>td{background:none}
}
/* ---- B37 (U5): forms — sections with a numbered heading, the save bar that stays in view on a phone, the field errors, the select's own
   arrow (drawn by gradients: no picture is fetched), larger touch targets, and the busy button of a long request ---- */
fieldset.section{border:0;margin:0 0 18px;padding:0;min-width:0}form.stepped{counter-reset:section}
fieldset.section>legend{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0;font:600 var(--fs-4)/1.3 var(--serif);color:var(--forest)}
form.stepped fieldset.section>legend{counter-increment:section}form.stepped fieldset.section>legend:before{content:counter(section);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--forest);color:var(--gold-light);font:700 12px var(--sans)}
.save-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}.save-bar .btn-gold{width:auto}
@media (max-width:640px){.save-bar{position:sticky;bottom:calc(var(--bar-h) + 8px);z-index:5;margin:14px -4px 0;padding:10px 4px;background:rgba(255,253,250,.95);border-top:1px solid var(--line)}}
label.field.invalid input,label.field.invalid select,label.field.invalid textarea,label.field [aria-invalid="true"]{border-color:var(--late);box-shadow:0 0 0 3px var(--late-bg)}
.field-error{display:block;margin-top:4px;font-size:12px;font-weight:500;color:var(--late)}
label.field select:not([multiple]){-webkit-appearance:none;appearance:none;padding-inline-end:34px;background-color:#fff;background-repeat:no-repeat;background-size:6px 6px,6px 6px;
  background-image:linear-gradient(45deg,transparent calc(100% / 2),var(--forest) calc(100% / 2)),linear-gradient(135deg,var(--forest) calc(100% / 2),transparent calc(100% / 2));background-position:calc(100% - 20px) center,calc(100% - 14px) center}
html[dir="rtl"] label.field select:not([multiple]){background-position:14px center,20px center}
@media (pointer:coarse){.btn-small,.hist-btn{min-height:44px}form.inline select{min-height:44px}.method-tabs a{padding-top:12px;padding-bottom:12px}}
.btn.busy{opacity:.75;cursor:progress;pointer-events:none}.btn.busy:before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:ld-spin .8s linear infinite}
@keyframes ld-spin{to{transform:rotate(360deg)}}
/* ---- B37 (U6): the empty state (an icon, a serif title, the text, one action) and the confirmation that fades (never an alert) ---- */
.empty.empty-state{display:grid;justify-items:center;gap:8px;padding:30px 20px}
.empty-state .ic{color:var(--gold)}.empty-state h4{margin:0;font:600 var(--fs-5)/1.2 var(--serif);color:var(--forest)}.empty-state p{margin:0;max-width:44em;overflow-wrap:anywhere}.empty-state .btn{margin-top:6px}
.notice-ok[role="status"]{animation:ld-fade 7s ease forwards}.notice-ok[role="status"]:hover,.notice-ok[role="status"]:focus-within{animation-play-state:paused}
@keyframes ld-fade{0%,80%{opacity:1}100%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.notice-ok[role="status"],.btn.busy:before{animation:none}}
/* ---- B37 (U3): the home page's date line and its "today" tiles ---- */
.home-hero .date{color:var(--gold-light);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.today-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin-top:14px}
.today-tile{display:flex;align-items:center;gap:14px;min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--shadow)}
.today-tile:hover{border-color:var(--gold)}.today-tile .ic{width:28px;height:28px;color:var(--gold)}
.today-tile div{min-width:0}.today-tile b{display:block;font:600 30px/1 var(--serif);color:var(--forest)}.today-tile span{display:block;margin-top:4px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.today-tile.due b{color:var(--due)}
/* ---- B37 (U7): the customer page — a summary head, the tabs, the panels (every panel is drawn; the others are hidden) ---- */
.cust-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;margin-top:18px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--shadow)}
.cust-head .who{flex:1 1 320px;min-width:0}.cust-head h2{margin:0 0 6px;font:600 26px/1.15 var(--serif);color:var(--forest);overflow-wrap:anywhere}
.cust-head .facts-line{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--muted)}.cust-head .facts-line>span{min-width:0;overflow-wrap:anywhere}.cust-head .facts-line b{color:var(--ink);font-weight:600}
.cust-head .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;min-width:0}.cust-head .acts form{margin:0!important}.cust-head .acts .btn-gold{width:auto}.cust-head .acts .note{margin:6px 0 0;flex-basis:100%}
.tabs.cust-tabs{margin-top:16px}.tabs.cust-tabs a{display:inline-flex;align-items:center;gap:6px}
/* ---- B37 (U10): the sign-in page on a wide screen — the brand panel beside the card ---- */
.auth-brand{display:none}.auth-side{display:contents}
.remember-more{margin:12px 0 0;font-size:12px;color:var(--muted)}.remember-more summary{cursor:pointer;color:var(--forest);font-weight:600}.remember-more p{margin:6px 0 0;text-align:start}
@media (min-width:1024px){
  .auth.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);place-items:stretch;padding:0}
  .auth-brand{display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0;padding:56px clamp(32px,5vw,80px);color:#fff;
    background:radial-gradient(90% 140% at 100% 0%,rgba(223,194,127,.28),transparent 55%),linear-gradient(160deg,var(--forest-2),var(--forest-deep))}
  .auth-brand img{width:112px;height:112px;border-radius:999px;box-shadow:0 12px 32px rgba(0,0,0,.3)}
  .auth-brand .tag{margin:0;font:500 34px/1.15 var(--serif);max-width:14em;overflow-wrap:anywhere}
  .auth-brand ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;max-width:30em;color:rgba(255,255,255,.82)}
  .auth-brand li{display:flex;gap:10px;align-items:flex-start;min-width:0;overflow-wrap:anywhere}.auth-brand li .ic{color:var(--gold-light);margin-top:2px}
  .auth-side{display:grid;place-items:center;min-width:0;padding:24px}
}
/* ---- B37 (C3): the rules the staff pages carried in their own <style> block — the Partner chat and its library, the sample sets, the
   domestic editor and its panel (the upload pilot keeps its page-wide block; the documents keep theirs: they are kept as bytes) ---- */
.chat-tabs{display:flex;flex-wrap:wrap;gap:6px}.chat-tabs a{text-decoration:none}
.chat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.chat-row{min-width:0}.chat-row a{display:block;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;background:#fff;overflow-wrap:anywhere}
.chat-row.waiting a{border-color:var(--gold)}
.chat-row-top{display:flex;justify-content:space-between;gap:10px}.chat-row-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.chat-preview{margin:4px 0 0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chat-log{display:grid;gap:10px;margin:14px 0;max-height:60vh;overflow:auto;padding:4px}
.chat-msg{max-width:88%}.chat-msg.out{justify-self:end}.chat-meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}
.chat-bubble{margin-top:3px;padding:10px 12px;border-radius:12px;background:#f1f3ef;white-space:pre-wrap;word-break:break-word}
.chat-msg.out .chat-bubble{background:var(--ok-bg)}.chat-bubble.original{background:#fff;border:1px dashed var(--line-strong)}
.chat-original summary{cursor:pointer;font-size:12px;color:var(--muted)}
.chat-review{margin:10px 0;padding:10px 12px;border:1px solid var(--gold);border-radius:12px}
.chat-reply textarea{min-height:96px}.chat-reply .btn-gold{width:auto}
.chat-draft{margin-top:6px;white-space:pre-wrap}
.chat-close summary{cursor:pointer;color:var(--late);font-size:13px}.chat-check{display:flex;gap:6px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink)}
.chat-insert{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.chat-insert summary{cursor:pointer;font-weight:600}
.chat-insert h5{margin:12px 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px}.chat-chips .chip{text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-del{display:block;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow-wrap:anywhere}.chat-del p{margin:6px 0 0}
.chat-del .chat-row-top{flex-wrap:wrap;align-items:flex-start}.chat-del .chat-row-top b{flex:1 1 12em;min-width:0}.chat-del .chat-row-top .chip{flex:none;white-space:nowrap}
.chat-del .chat-row-top a{display:inline;min-width:0;padding:0;border:0;border-radius:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:2px}
.chat-deletion{overflow-wrap:anywhere}.chat-deletion form{margin-top:8px}.chat-decide .field{margin:8px 0 6px}.chat-delete select,.chat-delete input[name=note]{max-width:100%;min-width:0}
.chat-lib td{vertical-align:top}.chat-lib-text{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}
.chat-lib details{margin-top:6px}.chat-lib details form{margin-top:8px}
.sample-line{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;min-width:0}
.sample-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.sample-photos figure{margin:0;min-width:0}
.sample-photos img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.sample-photos figcaption{font-size:12px;overflow-wrap:anywhere}
.auth-card .sample-photos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.auth-card .sample-photos img{height:120px;border-color:#e3ddd0}
.dw-form .dw-section{margin:0 0 16px;border:1px solid var(--line);min-width:0}
.dw-form legend{padding:0 6px;font:600 15px var(--serif, var(--sans));color:var(--forest)}
.dw-form .fields{margin-top:8px}
.dw-form .dw-wide{grid-column:1/-1}
.dw-form small.dw-help{display:block;margin-top:4px;font-weight:400;text-transform:none;letter-spacing:0;font-size:12px}
.dw-form small.dw-legacy{display:block;font-weight:400;text-transform:none;letter-spacing:0}
.dw-choice{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:11px}
.dw-choice legend{font:600 12px var(--sans)!important}
.dw-choice label,.dw-check{display:flex;gap:8px;align-items:flex-start;margin:6px 0;font-size:14px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0}
.dw-item{margin:0 0 12px;padding:12px;border:1px dashed var(--line-strong);border-radius:12px}
.dw-actions{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 0;background:linear-gradient(transparent,var(--paper, #fbfaf6) calc(100% * .3))}
.dw-actions .btn-gold{width:auto}
@media (max-width:900px){.dw-actions{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}}
.dw-panel .dw-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dw-panel h4{margin:0 0 6px;font-size:14px;color:var(--forest)}
.dw-panel .dw-step{display:grid;gap:8px;max-width:560px}
.dw-panel .dw-step .btn{justify-self:start}
.dw-panel .dw-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0}
.dw-panel .dw-files{margin:6px 0 0;padding-left:18px}
.dw-panel .dw-more-list{margin-top:14px;display:grid;gap:8px}
.dw-panel details.dw-more{padding:8px 12px;border:1px solid var(--line);border-radius:10px}
.dw-panel details.dw-more summary{cursor:pointer;font-weight:600;color:var(--forest)}
.dw-panel .dw-why{margin:4px 0 0}