/* ==========================================================================
   WAX v2 look.
   Section 1 - fonts: self-hosted, OFL, see public/fonts/CHECKSUMS.sha256.
   Section 2 - BASE: docs/design/wax-v2-base.css verbatim (sha256 ac18a55b…),
               except the demo-only rules the owner excluded: body.mirror
               (RTL is implemented for real in section 3), body.bare,
               .topbar .demo and .note.
   Section 3 - L1 ADDITIONS: only rules the existing screens genuinely need
               (the classic markup is transformed, not rewritten), the
               accessibility and responsive behaviour the brief requires,
               real RTL, and print.
   Loaded ONLY by resources/views/v2/layouts/app.blade.php and the v2 login
   page. Never by classic screens, never by print templates.
   ========================================================================== */

/* ---------- 1. fonts ------------------------------------------------------ */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/Sora-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/Figtree-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/NotoSansArabic-variable-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB; }

/* ---------- 2. BASE = docs/design/wax-v2-base.css --------------------------- */
/* WAX v2 look: colors sampled from the logo (near-black #181818, gold #E4A854, white). Self-host fonts Sora, Figtree, Noto Sans Arabic as woff2. */
:root{box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); --ink:#181818; --ink-2:#2B2B29; --muted:#6C6B66; --faint:#9A988F; --gold:#E4A854; --gold-ink:#855A12; --hot:#181818; --warn:#855A12; --ink-3:#9A988F; --wax-accent:#E4A854; --gold-tint:#FBF1DE; --gold-line:#F0D9AE; --paper:#FFFFFF; --canvas:#F4F3EF; --line:#E4E2DA; --line-2:#EEEDE7; --shadow:0 1px 0 rgba(24,24,24,.04), 0 12px 32px -22px rgba(24,24,24,.35);}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*, *::before, *::after{box-sizing:inherit;margin:0}
html, body{height:100%}
body{background:var(--canvas);color:var(--ink);font:15px/1.5 "Figtree","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.num{font-family:"Sora","Figtree",sans-serif;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.015em}
.ku{font-family:"Noto Sans Arabic","Figtree",sans-serif;unicode-bidi:isolate}
.gold{color:var(--gold-ink)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.frame{display:flex;min-height:100%}
.side{width:236px;flex:none;background:var(--ink);color:#D9D7CE;position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 0 24px}
.brand{padding:0 22px 18px;border-bottom:1px solid #2E2E2B;margin-bottom:8px}
.brand b{font-family:"Sora",sans-serif;font-weight:800;font-size:25px;letter-spacing:.04em;color:#fff}
.brand b i{font-style:normal;color:var(--gold)}
.brand span{display:block;font-size:9.5px;letter-spacing:.14em;color:#8C8A82;margin-top:3px}
.side nav a{display:flex;align-items:center;gap:10px;padding:7px 22px;font-size:14px;color:#BDBBB2;cursor:pointer;border-left:3px solid transparent}
.side nav a:hover{color:#fff;background:#222220}
.side nav a.on{color:#fff;background:#242421;border-left-color:var(--gold);font-weight:600}
.side nav .g{display:block;font-size:10.5px;letter-spacing:.12em;color:#77756D;padding:16px 22px 5px}
.side nav a .n{margin-left:auto;font-size:11px;font-weight:700;background:var(--gold);color:var(--ink);border-radius:99px;padding:1px 7px}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--paper);border-bottom:1px solid var(--line);padding:10px clamp(16px,3vw,40px)}
.topbar .sp{flex:1}
.topbar select{background:var(--paper);border:1px solid var(--ink);color:var(--ink);border-radius:6px;padding:7px 10px;font:600 13px "Figtree";max-width:210px}
.lang{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:6px 10px;font:700 12px "Figtree";cursor:pointer}
.lang.on{background:var(--ink);color:#fff;border-color:var(--ink)}
main{padding:26px clamp(16px,3vw,40px) 80px;max-width:1500px;width:100%}
.ph{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.ph h1{font-family:"Sora",sans-serif;font-weight:650;font-size:27px;letter-spacing:-.02em}
.ph .who{font-size:13px;color:var(--faint)}
.tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--paper)}
.tag.real{background:var(--gold-tint);border-color:var(--gold-line);color:var(--gold-ink)}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--muted);margin:2px 0 20px}
.btn{display:inline-block;font:700 13px/1 "Figtree",sans-serif;padding:10px 15px;border-radius:6px;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-decoration:none}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff}
.btn.line{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn.soft{background:transparent;color:var(--muted);border-color:var(--line)}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn:hover:not(:disabled){filter:brightness(.94)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.chip{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--gold-tint);color:var(--gold-ink);border:1px solid var(--gold-line);white-space:nowrap}
.chip.hot{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.chip.mut{background:var(--canvas);color:var(--muted);border-color:var(--line)}
.chip.ok{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.hero{background:var(--ink);color:#fff;border-radius:8px;border-top:4px solid var(--gold);padding:24px clamp(18px,2.6vw,34px) 20px;margin-bottom:22px;box-shadow:var(--shadow)}
.hero .cells{display:grid;grid-template-columns:1.2fr 1.2fr 1fr .8fr;gap:0}
.hero .cell{padding:0 24px;border-left:1px solid #2F2F2C}
.hero .cell:first-child{padding-left:0;border-left:0}
.hero .lab{font-size:12.5px;color:#A9A79D;margin-bottom:6px}
.hero .val{font-family:"Sora",sans-serif;font-weight:700;font-size:clamp(23px,2.6vw,34px);letter-spacing:-.02em;line-height:1.08;font-variant-numeric:tabular-nums}
.hero .val.g{color:var(--gold)}
.hero .s{font-size:12.5px;color:#8F8D84;margin-top:6px}
.hero .foot{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:13px;border-top:1px solid #2F2F2C;font-size:12.5px;color:#A9A79D}
.hero .seg{flex:1;display:flex;height:7px;border-radius:99px;overflow:hidden;background:#2A2A27}
.hero .seg i{display:block;height:100%}
.hero .foot b{color:var(--gold)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px 20px;box-shadow:var(--shadow)}
.card .ch{font-family:"Sora",sans-serif;font-weight:600;font-size:15px;margin-bottom:10px}
.sec{margin:0 0 24px}
.sec>h2{font-family:"Sora",sans-serif;font-weight:600;font-size:16.5px;display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.sec>h2 small{font-family:"Figtree";font-weight:500;font-size:12.5px;color:var(--faint)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line-2);color:var(--muted)}
.kv:last-child{border:0}
.kv b{color:var(--ink);font-weight:650;text-align:right}
.banner{background:var(--gold-tint);border:1px solid var(--gold-line);border-left:4px solid var(--gold);border-radius:6px;padding:11px 15px;font-size:14px;margin-bottom:18px}
.banner b{color:var(--gold-ink)}
.hint{font-size:12.5px;color:var(--faint);margin-top:5px}
.bar{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold)}
.stat4{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px}
.stat4 .num{font-size:21px;font-weight:650}
.act .row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.act .row:last-child{border:0}
.act .m{font-size:14.5px;flex:1}
.act .m b{font-family:"Sora";font-weight:650}
.tw{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.t th{font-size:12px;font-weight:700;color:var(--muted);text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);background:#FAF9F6;white-space:nowrap}
table.t td{padding:11px 15px;border-bottom:1px solid var(--line-2);vertical-align:baseline}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover td{background:var(--gold-tint)}
table.t tr.click{cursor:pointer}
table.t .r{text-align:right;white-space:nowrap}
table.t tfoot td{background:#FAF9F6;font-weight:700;font-size:13px;border-top:1px solid var(--line)}
.sub{display:block;font-size:12px;color:var(--faint);font-weight:400}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.form.one{grid-template-columns:1fr}
.form .wide{grid-column:1/-1}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.fld input, .fld select, .fld textarea{width:100%;background:var(--paper);border:1px solid #CFCDC4;color:var(--ink);border-radius:6px;padding:9px 11px;font:14.5px "Figtree"}
.fld input:focus, .fld select:focus{border-color:var(--ink);outline:2px solid var(--gold-line)}
.formfoot{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
@media (max-width:700px){.form{grid-template-columns:1fr}}
.empty{border:1.5px dashed #D6D3C9;border-radius:8px;padding:28px 20px;text-align:center;background:var(--paper)}
.empty h3{font-family:"Sora";font-weight:600;font-size:16px;margin-bottom:4px}
.empty p{color:var(--muted);font-size:14px;max-width:48ch;margin:0 auto 12px}
.checks label{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:14px;border-bottom:1px solid var(--line-2);cursor:pointer}
.checks input{accent-color:var(--ink);margin-top:3px}
.loginbox{max-width:390px;margin:6vh auto;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:8px;padding:34px 30px;text-align:center;box-shadow:var(--shadow)}
.loginbox .brand2{font-family:"Sora";font-weight:800;font-size:42px;letter-spacing:.04em}
.loginbox .brand2 i{font-style:normal;color:var(--gold)}
@media (max-width:900px){.side{display:none} .hero .cells{grid-template-columns:1fr 1fr;gap:16px 0} .hero .cell{padding:0 14px} .hero .cell:nth-child(odd){padding-left:0;border-left:0} .topbar{gap:8px} .topbar .sp{display:none} .topbar select{max-width:150px} .ph h1{font-size:22px} .ph .acts{margin-left:0;width:100%}}
.safegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.sg{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:8px;padding:14px 16px;box-shadow:var(--shadow)}
.sg[data-go]{cursor:pointer}
.sg[data-go]:hover{border-color:var(--ink);border-top-color:var(--gold)}
.sg .sn{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.sg .sas{display:grid;gap:6px}
.sg .sa small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:0}
.sg .sa .num{font-size:20px;font-weight:650}
/* L1.1: the TOTAL card prints the rate as a small line under the big total; small.num keeps the LTR isolation of .num without its size */
.sg .sa small.num{font-size:11.5px;font-weight:400;color:var(--muted);margin-top:4px}

/* ---------- 3. L1 ADDITIONS ------------------------------------------------ */
/* Each rule here exists because an existing screen needs it, because the
   brief requires it (RTL, 390px, focus, reduced motion, print), or because
   the base has no rule for it. Nothing here restyles a base selector. */

/* 3a. figures and Kurdish text, as the base intends, plus bidi isolation */
.num{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] body, html[dir="rtl"] body{font-family:"Noto Sans Arabic","Figtree","Segoe UI",system-ui,sans-serif}
.ku{direction:rtl}

/* 3b. accessibility: skip link, visually hidden, reduced motion */
.skip{position:absolute;inset-inline-start:8px;top:-40px;background:var(--gold);color:var(--ink);padding:6px 10px;border-radius:6px;z-index:50;font-weight:700}
.skip:focus{top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.side{transition:none} *{scroll-behavior:auto!important}}

/* 3c. the shell pieces the base does not name: logo, footer, topbar items, drawer */
.side .brand img{height:40px;width:auto;background:#fff;border-radius:6px;padding:3px;display:block;margin-bottom:8px}
.side nav a svg{width:17px;height:17px;flex:none;opacity:.8}
.side nav a.on svg{opacity:1}
.side nav a{text-decoration:none}
.side nav a .n.warn{background:var(--gold-tint);color:var(--gold-ink)}
.side .sidefoot{margin-top:auto;padding:14px 22px 0;border-top:1px solid #2E2E2B;font-size:12px;color:#8C8A82}
.side .sidefoot a{color:#BDBBB2}
.topbar .title{font-family:"Sora",sans-serif;font-weight:600;font-size:18px}
.topbar .rate{font-size:12px;color:var(--muted);white-space:nowrap}
.topbar .user{font-size:13px;color:var(--ink-2)} .topbar .user small{color:var(--faint)}
.topbar .langs{display:flex;gap:4px}
.topbar .due{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font:700 12px "Sora",sans-serif;text-decoration:none;background:var(--ink);color:var(--gold)}
.topbar .due.warn{background:var(--gold);color:var(--ink)}
.topbar .menu{display:none;width:36px;height:36px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.topbar form{display:inline}
/* L1.3: from 901px up the top bar stays on ONE line: the title shrinks with an ellipsis, the account
   controls never wrap. Below that the base's mobile rules (max-width:900px) apply unchanged. */
@media (min-width:901px){
  .topbar{flex-wrap:nowrap;gap:10px}
  .topbar .title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .sp{flex:0 0 0}
  .topbar .rate,.topbar .user,.topbar .langs,.topbar .due,.topbar form,.topbar .btn{flex:0 0 auto;white-space:nowrap}
}
/* The base hides the sidebar under 900px and offers nothing in its place;
   real screens need navigation on a phone, so the sidebar becomes a drawer
   opened by the topbar menu button (public/js/v2.js). */
.scrim{display:none}
@media (max-width:900px){
  .side{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:min(84vw,300px);z-index:40;transform:translateX(-104%);transition:transform .25s ease}
  [dir="rtl"] .side{inset:0 0 0 auto;transform:translateX(104%)}
  .frame.nav-open .side{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(24,24,24,.55);z-index:30}
  .frame.nav-open .scrim{display:block}
  .topbar .menu{display:inline-flex}
  .topbar .rate,.topbar .user small{display:none}
}
@media (max-width:520px){.hero .cells{grid-template-columns:1fr} .hero .cell{padding:0;border-left:0} .ph h1{font-size:20px} main{padding-left:16px;padding-right:16px}}

/* 3d. the generated screens: labels/inputs outside a .fld, headers, tones, utilities */
.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.in, input.in, select.in, textarea.in{width:100%;background:var(--paper);border:1px solid #CFCDC4;color:var(--ink);border-radius:6px;padding:9px 11px;font:14.5px "Figtree";font-family:"Figtree","Noto Sans Arabic","Segoe UI",system-ui,sans-serif;min-width:0}
[dir="rtl"] .in, [dir="rtl"] input.in, [dir="rtl"] select.in, [dir="rtl"] textarea.in{font-family:"Noto Sans Arabic","Figtree","Segoe UI",system-ui,sans-serif}
.in:focus{border-color:var(--ink);outline:2px solid var(--gold-line)}
.in.sm{width:auto;padding:6px 9px;font-size:13px}
.in.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:13px}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ink)}
input[type="color"].in{padding:2px;height:38px}
textarea.in{min-height:120px;resize:vertical}
/* L1.3: a textarea that classic styles monospace (the Terms & Agreement template) must still show
   Arabic-script text connected: the Noto Sans Arabic stack, normal letter-spacing, each paragraph
   in its own direction (plaintext), a readable line-height. The stored value is untouched. */
textarea.in.mono{font-family:"Figtree","Noto Sans Arabic","Segoe UI",system-ui,sans-serif;font-size:14.5px;letter-spacing:normal;line-height:1.7;unicode-bidi:plaintext;text-align:start}
[dir="rtl"] textarea.in.mono{font-family:"Noto Sans Arabic","Figtree","Segoe UI",system-ui,sans-serif}
/* L1.3: the logo preview under the Logo field, sized as classic sizes it (h-12 mt-2 border rounded p-1). */
input[type="file"].in + img{display:block;height:48px;max-height:80px;width:auto;margin-top:8px;padding:4px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px 20px;box-shadow:var(--shadow);max-width:860px}
.form-card.narrow{max-width:560px}
.form-card.form{display:grid}      /* a classic form that is both the card and the grid */
.card-h{font-family:"Sora",sans-serif;font-weight:600;font-size:14px;padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.ch{font-family:"Sora",sans-serif;font-weight:600;font-size:15px;margin-bottom:10px}
.lab{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.s{font-size:12.5px;color:var(--faint);margin-top:6px}
.h2{font-family:"Sora",sans-serif;font-weight:650;font-size:19px}
.err{color:var(--gold-ink);font-weight:700;font-size:12.5px;margin-top:4px}
.mut{color:var(--muted)} .b{font-weight:650}
.gold-ink{color:var(--gold-ink)} .hot-ink{color:var(--gold-ink);font-weight:700} .ok-ink{color:var(--gold-ink);font-weight:700} .warn-ink{color:var(--gold-ink)}
.hot-bg{background:var(--ink);color:var(--gold);border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:700} .hot-bg.on-fill{color:var(--gold)}
.warn-bg{background:var(--gold);color:var(--ink);border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:700}
.ok-bg{background:var(--ink);color:var(--gold);border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:700} .ok-bg.on-fill{color:var(--gold)}
.info-bg{background:var(--ink-2);color:#fff;border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:700}
.gold-bg{background:var(--gold);color:var(--ink)} .paper-bg{background:var(--paper)} .on-fill{color:var(--ink)}
button.hot-bg,a.hot-bg,button.warn-bg,a.warn-bg,button.ok-bg,a.ok-bg{display:inline-block;padding:10px 15px;border:0;border-radius:6px;font:700 13px/1 "Figtree",sans-serif;cursor:pointer;text-decoration:none}
.warn-line{border:1px solid var(--gold)!important;color:var(--gold-ink)} .hot-line{border:1px solid var(--ink)!important;color:var(--gold-ink);font-weight:700} .ok-line{border:1px solid var(--ink)!important;color:var(--gold-ink)}
.chip.info{background:var(--paper);color:var(--ink-2);border-color:var(--line)}
.btn.hot{background:var(--ink);color:var(--gold)} .btn.wide{width:100%;text-align:center}
.lnk{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px} .lnk.mut{color:var(--muted)} .lnk.hot{color:var(--gold-ink);font-weight:700}
/* L1.2 notices: told apart without colour. Success = the base gold banner with a leading check mark;
   error = 2px ink border, the ink left edge and a leading "!" in an ink circle. The glyphs are CSS
   pseudo-elements with empty alternative text (content: "x" / ""), so assistive technology ignores
   them; a plain content:"x" comes first so a browser without the "/ alt" form still shows the glyph; the role attributes on the markup carry the meaning. Flex rows put the glyph at the inline
   start, so RTL mirrors it without a separate rule. */
.banner.ok,.banner.err,.banner.hot{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.banner.ok::before{content:"\2713";content:"\2713" / "";flex:0 0 auto;font:700 16px/1.3 "Sora",sans-serif;color:var(--gold-ink)}
.banner.err,.banner.hot{background:var(--gold-tint);border:2px solid var(--ink);border-left-width:4px;color:var(--gold-ink);font-weight:600}
.banner.err::before,.banner.hot::before,p.err::before{content:"!";content:"!" / "";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--gold);font:700 13px/1 "Sora",sans-serif}
p.err{display:flex;align-items:center;gap:6px} p.err::before{width:16px;height:16px;font-size:11px}
.banner.gold{color:var(--gold-ink)} .banner.gold .lnk{margin-inline-start:8px;font-weight:700}
.banner ul{margin:0;padding-inline-start:18px}
.banner.ok .btn,.banner.err .btn{margin-inline-start:auto}
table.t .c{text-align:center}
table.t td.empty,table.t .empty{border:0;background:transparent;text-align:center;color:var(--faint);padding:28px 15px;border-radius:0}
table.t tr.hot td{background:var(--gold-tint);font-weight:700} table.t tr.warn td{background:var(--gold-tint)} table.t tr.ok td{background:var(--gold-tint)} table.t tr.mut td{color:var(--faint)}
table.t .lnk{color:var(--gold-ink)}
table.t td.b{font-weight:650}
.kv dt,.kv .k{color:var(--muted)} .kv dd,.kv .v{color:var(--ink);font-weight:650;text-align:end;margin:0}
.kv-list>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.kv-list>div:last-child{border:0}
.hero .val.hot{color:var(--gold)} .hero .val.ok{color:#fff}
.hero .cell.ring-warn{border-left:3px solid var(--gold);padding-left:20px} .hero .cell.ring-hot{border-left:3px solid var(--gold);padding-left:20px}
.hero .chip{background:#2A2A27;color:var(--gold);border-color:#2F2F2C} .hero .chip.ok{color:var(--gold)} .hero .chip.hot{color:var(--gold)} .hero .chip.mut{color:#A9A79D}
.act{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:0 18px;box-shadow:var(--shadow)}
.act .row{border-left:4px solid var(--gold);padding-left:14px;margin-left:-18px}
.act .row.hot{border-left-color:var(--gold)}
.act .row .amt{font-family:"Sora",sans-serif;font-weight:700;font-size:19px;min-width:7em}
.sec>h2 .lnk{margin-inline-start:auto;font-size:12.5px;font-weight:500}
.sec>h2 form{margin-inline-start:auto;font-weight:400}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.between,.between{justify-content:space-between} .row.end{align-items:flex-end} .jend{justify-content:flex-end} .grow{flex:1 1 auto;min-width:0} .wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.grid7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.span2{grid-column:span 2} .span3{grid-column:span 3}
.mt{margin-top:14px} .mb{margin-bottom:14px} .ms{margin-inline-start:8px} .ms-auto{margin-inline-start:auto}
.wide{width:100%} .inline{display:inline} .hidden{display:none}
.money{line-height:1.25} .money.sm{font-size:13px} .money .mut{font-size:.9em}
.pager{margin-top:14px;font-size:13px} .pager nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pager a,.pager span[aria-current]{padding:5px 10px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--muted);background:var(--paper)}
.pager span[aria-current] span{color:var(--gold-ink);font-weight:700} .pager svg{width:16px;height:16px} .pager p{margin:0;color:var(--faint)}
.chart{position:relative} .dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.bar i.ok{background:var(--gold)}
.card a.card{text-decoration:none;color:inherit}
a.card{text-decoration:none;color:inherit;display:block}
/* dynamic classic tokens the due screen builds at runtime (text-{tone}-700), and three list/spacing utilities */
/* a table the generator had to wrap inside an existing card: no second border */
.card>.tw,.paper-bg>.tw,.form-card>.tw{border:0;border-radius:0;box-shadow:none;background:transparent}
.text-rose-700{color:var(--gold-ink);font-weight:700} .text-amber-700{color:var(--gold-ink)} .list-disc{list-style:disc;padding-inline-start:18px} .ms-3,.ms-5{margin-inline-start:12px} .break-all{word-break:break-all}
code,.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
details summary{cursor:pointer;color:var(--gold-ink)}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
img{max-width:100%}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.grid2,.grid3,.grid4,.grid5,.grid6{grid-template-columns:1fr} .span2,.span3{grid-column:auto} .act .row{flex-wrap:wrap} .act .row .amt{min-width:0}}

/* 3e. real RTL (the base's body.mirror demo hack is not used) */
[dir="rtl"] .side nav a{border-left:0;border-right:3px solid transparent}
[dir="rtl"] .side nav a.on{border-right-color:var(--gold)}
[dir="rtl"] .side nav a .n{margin-left:0;margin-right:auto}
[dir="rtl"] table.t th,[dir="rtl"] table.t td{text-align:right}
[dir="rtl"] table.t .r{text-align:left}
[dir="rtl"] .ph .acts{margin-left:0;margin-right:auto}
[dir="rtl"] .kv b{text-align:left}
[dir="rtl"] .hero .cell{border-left:0;border-right:1px solid #2F2F2C}
[dir="rtl"] .hero .cell:first-child{border-right:0}
[dir="rtl"] .hero .cell.ring-warn,[dir="rtl"] .hero .cell.ring-hot{border-left:0;border-right-width:3px;padding-left:24px;padding-right:20px}
[dir="rtl"] .banner{border-left:1px solid var(--gold-line);border-right:4px solid var(--gold)}
[dir="rtl"] .banner.err,[dir="rtl"] .banner.hot{border-left-width:2px;border-right-width:4px}
[dir="rtl"] .act .row{border-left:0;border-right:4px solid var(--gold);padding-left:0;padding-right:14px;margin-left:0;margin-right:-18px}
[dir="rtl"] .act .row.hot{border-right-color:var(--gold)}
[dir="rtl"] .rtl-flip{transform:scaleX(-1)}

/* 3f. print: the browser prints the page without the chrome */
@media print{
  .no-print,.side,.topbar,.skip,.scrim{display:none!important}
  .frame{display:block} body{background:#fff}
  main{padding:0;max-width:none}
  .card,.tw,.form-card,.hero,.act,.sg{box-shadow:none}
  .hero{color:#000;background:#fff;border:1px solid #ccc} .hero .lab,.hero .s{color:#444} .hero .val.g{color:#000}
}
/* S2: a submit control disabled by the one-submit guard reads as waiting, whatever its class */
form[data-single-submit] button:disabled,form[data-single-submit] input[type=submit]:disabled{opacity:.38;cursor:progress}
/* S2.1: the advisory line under a safe select when it disagrees with the method */
p[data-safe-warning]{margin:4px 0 0;padding:3px 8px;border-radius:4px;background:var(--gold-tint)} p[data-safe-warning][hidden]{display:none}
/* Contract items (2026-10-06): the lines sold, on the form and the contract page; printed with the page. */
.items-table th{white-space:nowrap}.items-table td .in{min-width:5rem}.items-table .btn.sm{padding:.1rem .5rem;line-height:1.4}
@media print{.items-print{break-inside:avoid}.items-table thead{display:table-header-group}.items-table tr{break-inside:avoid}}
/* Extra items (2026-10-08): the item lines of a change order on the contract page, the form block and the printed addendum's signature strip. */
.co-items-table{margin-top:.35rem;font-size:.85em}.co-items-table th{white-space:nowrap}.co-items .items-table td .in{min-width:5rem}.co-items .hint{margin:.15rem 0 .4rem}
.co-addendum{margin:.8rem 1rem 1rem}.co-addendum .ch{margin-bottom:.2rem}.co-sign td{width:33%;padding-top:2.2rem;vertical-align:bottom;text-align:center}.co-sign-line{border-top:1px solid #000;margin:0 .6rem .3rem}
@media print{.co-items-table thead{display:table-header-group}.co-items-table tr,.co-addendum{break-inside:avoid}}