/* Xrero Connect - owner console + client portal.
   White + teal, calm, large readable type. Logical properties everywhere so Arabic (RTL) and
   English (LTR) share one stylesheet. No external resources: the font is bundled. */

@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/static/fonts/cairo-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}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/static/fonts/cairo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/static/fonts/cairo-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --brand:#0B6E7F; --brand-2:#04728A; --brand-ink:#075564; --brand-50:#EEF7F8; --brand-100:#D6EDF0; --brand-200:#B3DDE3;
  --ink:#10262E; --ink-2:#4A6069; --ink-3:#71858D; --line:#E2EAED; --line-2:#CFDCE0;
  --bg:#F5F8F9; --card:#FFFFFF;
  --ok:#14794A; --ok-bg:#E8F6EE; --warn:#8F5B00; --warn-bg:#FFF5DD; --bad:#B42318; --bad-bg:#FDECEA; --idle:#5C6E75; --idle-bg:#EEF2F3;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,38,46,.05),0 6px 20px rgba(16,38,46,.05);
  --focus:0 0 0 3px rgba(11,110,127,.32);
  --font:"Cairo","Segoe UI","Tahoma",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,"Courier New",monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--font);min-height:100vh;display:flex;flex-direction:column}
img,svg{max-width:100%}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-ink)}
h1,h2,h3,h4{line-height:1.35;margin:0 0 .5em;color:var(--ink)}
h1{font-size:28px;font-weight:800;letter-spacing:-.01em}
h2{font-size:21px;font-weight:700}
h3{font-size:18px;font-weight:700}
p{margin:0 0 .9em}
small,.small{font-size:14px}
code,.mono{font-family:var(--mono);font-size:.92em;direction:ltr;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
hr{border:0;border-block-start:1px solid var(--line);margin:24px 0}

/* -- top bar ------------------------------------------------------------------------------- */
.topbar{background:var(--card);border-block-end:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .inner{max-width:1180px;margin:0 auto;padding:0 20px;height:66px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:19px;white-space:nowrap}
.brand .mark{width:34px;height:34px;flex:none}
.brand .sub{font-weight:600;color:var(--brand);font-size:15px;padding-inline-start:10px;border-inline-start:1px solid var(--line-2)}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:12px;flex:1}
.nav a{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:15.5px;white-space:nowrap}
.nav a:hover{background:var(--brand-50);color:var(--brand-ink)}
.nav a.on{background:var(--brand-50);color:var(--brand)}
.topbar .end{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;background:var(--card)}
.lang-switch:hover{border-color:var(--brand);color:var(--brand)}
.linkbtn{background:none;border:0;padding:8px 12px;font:inherit;font-size:15px;font-weight:600;color:var(--ink-2);cursor:pointer;border-radius:999px}
.linkbtn:hover{background:var(--idle-bg);color:var(--ink)}
form.inline{display:inline}
.menu{display:none;position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;font-weight:700;font-size:15px}
.menu>summary::-webkit-details-marker{display:none}
.menu .panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;min-width:230px;display:flex;flex-direction:column}
.menu .panel a,.menu .panel button{padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;text-align:start;font-size:16px}
.menu .panel a.on{background:var(--brand-50);color:var(--brand)}
@media (max-width:980px){.nav,.topbar .end .logout{display:none}.menu{display:block}.brand .sub{display:none}}

/* -- page ---------------------------------------------------------------------------------- */
main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:32px 20px 56px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-block-end:24px}
.page-head h1{margin:0}
.page-head p{margin:4px 0 0}
.eyebrow{font-size:14px;font-weight:700;color:var(--brand);letter-spacing:.02em;margin-block-end:4px}
.crumbs{font-size:15px;margin-block-end:8px;color:var(--ink-2)}
.crumbs a{text-decoration:none}
footer.foot{color:var(--ink-3);font-size:14px;text-align:center;padding:20px 16px 28px}
.narrow{max-width:780px;margin-inline:auto}
.xnarrow{max-width:480px;margin-inline:auto}

/* -- cards, grids -------------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-block-end:20px}
.card.flat{box-shadow:none}
.card.soft{background:var(--brand-50);border-color:var(--brand-100);box-shadow:none}
.card>h2:first-child,.card>h3:first-child{margin-block-start:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block-end:14px}
.card-head h2,.card-head h3{margin:0}
.grid{display:grid;gap:20px;align-items:start}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.side{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:900px){.grid.two,.grid.three,.grid.side{grid-template-columns:minmax(0,1fr)}}
.stack>*+*{margin-block-start:12px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.spacer{flex:1}

/* -- KPI tiles ------------------------------------------------------------------------------ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-block-end:20px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.tile .n{display:block;font-size:34px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.tile .l{color:var(--ink-2);font-weight:600;font-size:15px}
.tile.ok .n{color:var(--ok)}.tile.bad .n{color:var(--bad)}.tile.accent .n{color:var(--brand)}
.tile.accent{background:linear-gradient(160deg,#fff 30%,var(--brand-50))}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--idle-bg);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.chip b{font-variant-numeric:tabular-nums}
a.chip:hover{background:var(--brand-100)}
.chip.on{background:var(--brand);color:#fff}

/* -- badges ---------------------------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:7px;padding:3px 12px 3px 11px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.6;white-space:nowrap;background:var(--idle-bg);color:var(--idle);vertical-align:middle}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.info{background:var(--brand-50);color:var(--brand)}
.badge.plain::before{display:none}

/* -- buttons --------------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--radius-sm);border:1.5px solid var(--brand);background:var(--brand);color:#fff;font:700 16.5px/1.2 var(--font);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.btn.secondary{background:var(--card);color:var(--brand);border-color:var(--brand-200)}
.btn.secondary:hover{background:var(--brand-50);border-color:var(--brand)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--idle-bg);color:var(--ink)}
.btn.quiet{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn.quiet:hover{border-color:var(--ink-3)}
.btn.lg{min-height:56px;padding:0 30px;font-size:18px}
.btn.sm{min-height:38px;padding:0 14px;font-size:15px}
.btn.block{width:100%}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn .ico{width:20px;height:20px;flex:none}
.btn.copied{background:var(--ok);border-color:var(--ok);color:#fff}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions form{margin:0}
.wizard-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:28px;padding-block-start:22px;border-block-start:1px solid var(--line)}
.wizard-nav .primary{margin-inline-start:auto}
@media (max-width:560px){.wizard-nav{flex-direction:column-reverse;align-items:stretch}.wizard-nav .primary{margin-inline-start:0}.wizard-nav .btn{width:100%}}

/* -- forms --------------------------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px}
.form-grid .full{grid-column:1/-1}
@media (max-width:700px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.field{margin-block-end:18px}
.field>label,.label{display:block;font-weight:700;font-size:15.5px;margin-block-end:6px;color:var(--ink)}
.field .opt{font-weight:500;color:var(--ink-3);font-size:14px}
.hint{display:block;font-size:14.5px;color:var(--ink-2);margin-block-start:6px;line-height:1.55}
.ferr{display:none;font-size:14.5px;color:var(--bad);font-weight:600;margin-block-start:6px}
.field.invalid .ferr,.ferr.show{display:block}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=number],input[type=date],input[type=search],input:not([type]),select,textarea{
  width:100%;font:400 17px/1.5 var(--font);color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 14px;min-height:50px;transition:border-color .15s,box-shadow .15s}
textarea{min-height:auto;line-height:1.7;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.field.invalid input,.field.invalid select{border-color:var(--bad);background:#fffafa}
input[readonly],textarea[readonly]{background:#FAFCFC}
input[type=file]{font:inherit;font-size:16px;width:100%;padding:14px;border:2px dashed var(--brand-200);border-radius:var(--radius);background:var(--brand-50);cursor:pointer}
input[type=file]::file-selector-button{font:700 15px var(--font);background:var(--card);color:var(--brand);border:1.5px solid var(--brand-200);border-radius:8px;padding:8px 16px;margin-inline-end:14px;cursor:pointer}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-size:6px 6px;background-repeat:no-repeat;background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;padding-inline-end:40px}
[dir=rtl] select{background-position:22px 50%,16px 50%}
.search{position:relative}
.search input{padding-inline-start:46px}
.search .ico{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-3);pointer-events:none}
fieldset{border:0;padding:0;margin:0 0 8px}
legend{font-weight:800;font-size:17px;margin-block-end:12px;padding:0}
details.more{border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 18px;margin-block:8px 18px;background:#fbfdfd}
details.more>summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--brand)}
details.more[open]>summary{margin-block-end:8px}
.secret-field{display:flex;gap:10px;align-items:center}
.secret-field input{flex:1}
.mask{font-family:var(--mono);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate;background:var(--idle-bg);padding:3px 10px;border-radius:8px;font-size:15px}

/* choice cards (radio) */
.choices{display:grid;gap:12px}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .box{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1.5px solid var(--line-2);border-radius:var(--radius);background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.choice .box:hover{border-color:var(--brand-200)}
.choice input:checked+.box{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand) inset}
.choice input:focus-visible+.box{box-shadow:var(--focus)}
.choice .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:none;margin-block-start:3px;display:grid;place-items:center}
.choice input:checked+.box .dot{border-color:var(--brand)}
.choice input:checked+.box .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand)}
.choice .t{font-weight:700;font-size:17px;display:block}
.choice .d{font-size:14.5px;color:var(--ink-2);display:block;line-height:1.55}
.choice .meta{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.choice-group{margin-block-end:22px}
.choice-group h3{font-size:15px;color:var(--ink-2);text-transform:none;margin-block-end:10px;font-weight:800}
.seg{display:inline-flex;border:1.5px solid var(--line-2);border-radius:12px;overflow:hidden;background:#fff}
.seg label{position:relative}
.seg input{position:absolute;opacity:0}
.seg span{display:block;padding:12px 20px;font-weight:700;cursor:pointer;border-inline-end:1px solid var(--line)}
.seg label:last-child span{border-inline-end:0}
.seg input:checked+span{background:var(--brand);color:#fff}
.seg input:focus-visible+span{box-shadow:var(--focus) inset}

/* -- alerts / notices ---------------------------------------------------------------------- */
.notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--brand-100);background:var(--brand-50);margin-block-end:18px}
.notice .ico{width:24px;height:24px;flex:none;color:var(--brand);margin-block-start:2px}
.notice p:last-child{margin:0}
.notice.ok{background:var(--ok-bg);border-color:#c5e8d4}.notice.ok .ico{color:var(--ok)}
.notice.warn{background:var(--warn-bg);border-color:#f3dfa8}.notice.warn .ico{color:var(--warn)}
.notice.bad{background:var(--bad-bg);border-color:#f5c9c4}.notice.bad .ico{color:var(--bad)}
.notice strong{display:block;margin-block-end:2px}
.alert-list{list-style:none;margin:0;padding:0}
.alert-list li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-block-end:1px solid var(--line)}
.alert-list li:last-child{border-block-end:0}
.alert-list .sev{width:10px;height:10px;border-radius:50%;flex:none;margin-block-start:10px;background:var(--brand)}
.alert-list .critical .sev{background:var(--bad)}.alert-list .warning .sev{background:#D99A06}
.alert-list .count{margin-inline-start:auto;font-weight:800;font-variant-numeric:tabular-nums}

/* -- empty state ----------------------------------------------------------------------------- */
.empty{text-align:center;padding:40px 20px}
.empty .art{width:86px;height:86px;margin:0 auto 14px;color:var(--brand)}
.empty h3{margin-block-end:6px}
.empty p{color:var(--ink-2);max-width:460px;margin-inline:auto}

/* -- tables -------------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:13px 16px;text-align:start;vertical-align:middle;border-block-end:1px solid var(--line)}
th{font-size:14px;font-weight:800;color:var(--ink-2);background:#F8FBFB;white-space:nowrap}
tr:last-child td{border-block-end:0}
tbody tr:hover td{background:#FAFCFD}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
td a.rowlink{font-weight:700;text-decoration:none}
td a.rowlink:hover{text-decoration:underline}
@media (max-width:700px){
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{padding:12px 16px;border-block-end:1px solid var(--line)}
  table.stack tr:last-child{border-block-end:0}
  table.stack td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:16px;text-align:end}
  table.stack td::before{content:attr(data-label);font-weight:700;color:var(--ink-2);font-size:14px;text-align:start}
  table.stack td.num{text-align:end}
  table.stack td.lead{font-size:17px}
  table.stack td.lead::before{display:none}
  /* a stacked LTR cell (dates, numbers) keeps the page's label/value order; the value itself stays LTR */
  [dir=rtl] table.stack td.ltr{direction:rtl}
}
dl.facts{display:grid;grid-template-columns:minmax(140px,max-content) 1fr;gap:10px 24px;margin:0}
dl.facts dt{color:var(--ink-2);font-weight:600}
dl.facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
@media (max-width:560px){dl.facts{grid-template-columns:1fr}dl.facts dt{margin-block-start:8px}}

/* -- tabs ---------------------------------------------------------------------------------- */
.tabs{display:flex;gap:4px;overflow-x:auto;border-block-end:1px solid var(--line);margin-block-end:24px;scrollbar-width:thin}
.tabs a{padding:12px 16px;text-decoration:none;color:var(--ink-2);font-weight:700;white-space:nowrap;border-block-end:3px solid transparent;margin-block-end:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--brand);border-block-end-color:var(--brand)}
.tabs .n{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;background:var(--idle-bg);font-size:13px;text-align:center;margin-inline-start:6px}

/* -- wizard ------------------------------------------------------------------------------- */
.wizard{max-width:820px;margin-inline:auto}
.wizard-top{margin-block-end:18px}
.wizard-top .who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-2);font-weight:600;font-size:15.5px;margin-block-end:12px}
.wizard-top .who a{text-decoration:none}
.progress{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.progress a{display:block;text-decoration:none;color:var(--ink-3);font-size:13px;font-weight:700;text-align:center}
.progress a::before{content:"";display:block;height:8px;border-radius:999px;background:var(--line);margin-block-end:7px}
.progress a.done::before{background:var(--brand-200)}
.progress a.done{color:var(--brand)}
.progress a.current::before{background:var(--brand)}
.progress a.current{color:var(--ink)}
.progress-text{display:none;font-weight:700;color:var(--ink-2);font-size:15px;margin-block-start:8px}
@media (max-width:700px){.progress a{font-size:0}.progress a::before{margin:0}.progress-text{display:block}}
.wizard .card.main{padding:32px}
@media (max-width:560px){.wizard .card.main,.card{padding:20px}main{padding:22px 16px 48px}h1{font-size:24px}}
.step-title{display:flex;gap:14px;align-items:flex-start;margin-block-end:22px}
.step-title .num{width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;font-size:20px;display:grid;place-items:center;flex:none}
.step-title h1{font-size:25px;margin:0}
.step-title p{margin:4px 0 0;color:var(--ink-2)}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.checklist .ck{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--idle-bg);color:var(--ink-3)}
.checklist .ck svg{width:16px;height:16px}
.checklist li.yes .ck{background:var(--ok);color:#fff}
.checklist li.no .ck{background:var(--warn-bg);color:var(--warn)}
.steps-list{counter-reset:s;list-style:none;margin:0;padding:0}
.steps-list li{counter-increment:s;position:relative;padding-inline-start:44px;margin-block-end:14px;min-height:30px}
.steps-list li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--brand-50);color:var(--brand);font-weight:800;display:grid;place-items:center;font-size:15px}
.kv{display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:15px}
.kv span+span::before{content:"·";margin-inline-end:8px;color:var(--ink-3)}

/* setup progress list on the client page */
.setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.setup-steps a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.setup-steps a:hover{background:var(--brand-50)}
.setup-steps .ck{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--idle-bg);color:var(--ink-3);font-size:13px;font-weight:800;flex:none}
.setup-steps .done .ck{background:var(--ok);color:#fff}
.setup-steps .next .ck{background:var(--brand);color:#fff}
.setup-steps .next{font-weight:800}
.meter{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;background:var(--brand);border-radius:999px}

/* -- copy blocks --------------------------------------------------------------------------- */
.copybox{border:1.5px solid var(--brand-200);border-radius:var(--radius);background:#fff;overflow:hidden}
.copybox .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--brand-50);border-block-end:1px solid var(--brand-100);font-weight:800}
.copybox textarea{border:0;border-radius:0;min-height:230px;field-sizing:content;font-size:16px;background:#fff;box-shadow:none}
.copybox textarea:focus{box-shadow:none}
.linkbox{display:flex;gap:10px;align-items:stretch}
.linkbox input{font-family:var(--mono);font-size:15px;direction:ltr;text-align:left}
@media (max-width:560px){.linkbox{flex-direction:column}}
.code{font:800 34px/1.2 var(--mono);letter-spacing:.18em;direction:ltr;unicode-bidi:isolate;background:var(--brand-50);border:2px dashed var(--brand-200);border-radius:var(--radius);padding:18px 24px;text-align:center;color:var(--brand-ink);margin:0 0 14px}

/* -- result card (htmx) -------------------------------------------------------------------- */
.result{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--radius);border:1.5px solid var(--line);background:#fff;margin-block:16px}
.result>.ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.result>.ic svg{width:22px;height:22px}
.result.ok{border-color:#bfe3cf;background:var(--ok-bg)}.result.ok>.ic{background:var(--ok);color:#fff}
.result.bad{border-color:#f2c3bd;background:var(--bad-bg)}.result.bad>.ic{background:var(--bad);color:#fff}
.result.wait{border-color:var(--brand-100);background:var(--brand-50)}.result.wait>.ic{background:var(--brand);color:#fff}
.result h3{margin:0 0 4px;font-size:17px}
.result p{margin:0}
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
.btn.secondary .spinner,.btn.quiet .spinner{border-color:var(--brand-100);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--brand);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){.spinner,.pulse{animation:none}}

/* -- score ring (readiness) ------------------------------------------------------------- */
.score{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.ring{--p:0;width:130px;height:130px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(closest-side,#fff 76%,transparent 77% 100%),conic-gradient(var(--c,var(--brand)) calc(var(--p)*1%),var(--line) 0)}
.ring b{font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr}
.ring.low{--c:var(--bad)}.ring.mid{--c:#D99A06}.ring.high{--c:var(--ok)}
.gaps{list-style:none;margin:0;padding:0}
.gaps li{display:flex;gap:12px;padding:12px 0;border-block-end:1px solid var(--line);align-items:flex-start}
.gaps li:last-child{border:0}
.gaps .sev{flex:none;margin-block-start:3px}

/* -- timeline (document history) -------------------------------------------------------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding-inline-start:34px;padding-block-end:18px}
.timeline li::before{content:"";position:absolute;inset-inline-start:7px;top:8px;bottom:-8px;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{position:absolute;inset-inline-start:0;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--brand-200)}
.timeline li.ok .dot{border-color:var(--ok)}.timeline li.bad .dot{border-color:var(--bad)}.timeline li.last .dot{background:var(--brand);border-color:var(--brand)}
.timeline .when{font-size:14px;color:var(--ink-3)}
.timeline .what{font-weight:700}
.timeline .detail{font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}
.totals{margin-inline-start:auto;min-width:280px}
.totals div{display:flex;justify-content:space-between;gap:24px;padding:6px 0}
.totals .grand{border-block-start:2px solid var(--ink);margin-block-start:6px;padding-block-start:10px;font-weight:800;font-size:19px}

/* -- catalog -------------------------------------------------------------------------------- */
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-block-end:28px}
.sys{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px}
.sys .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sys .name{font-weight:800;font-size:17px;line-height:1.4}
.sys .vendor{font-size:14px;color:var(--ink-3)}
.sys .how{font-size:15px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.sys .how svg{width:18px;height:18px;color:var(--brand);flex:none}
.family-title{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.family-title .count{font-size:14px;color:var(--ink-3);font-weight:700}

/* -- auth pages ----------------------------------------------------------------------------- */
body.auth{background:linear-gradient(180deg,var(--brand-50),var(--bg) 340px)}
body.auth main{display:flex;align-items:flex-start;justify-content:center;padding-block-start:56px}
.auth-card{width:100%;max-width:460px}
.auth-card .card{padding:32px}
.auth-card .lead{font-size:17px;color:var(--ink-2)}
.pw-meter{display:flex;gap:6px;margin-block-start:8px}
.pw-meter i{flex:1;height:6px;border-radius:999px;background:var(--line)}
.pw-meter.s1 i:nth-child(-n+1){background:var(--bad)}
.pw-meter.s2 i:nth-child(-n+2){background:#D99A06}
.pw-meter.s3 i:nth-child(-n+3){background:var(--ok)}
.pw-meter.s4 i{background:var(--ok)}

/* -- portal --------------------------------------------------------------------------------- */
body.portal .topbar .inner{max-width:860px}
body.portal main{max-width:860px}
.portal-hero{padding:8px 0 20px}
.portal-hero h1{font-size:30px;margin-block-end:6px}
.task{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);margin-block-end:20px;overflow:hidden}
.task>.head{display:flex;gap:14px;align-items:center;padding:20px 24px;border-block-end:1px solid var(--line);background:linear-gradient(180deg,#fff,#FAFDFD)}
.task>.head .num{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.task>.head h2{margin:0;font-size:19px}
.task>.body{padding:22px 24px}
.task.done>.head .num{background:var(--ok)}
.trust{display:flex;gap:10px;align-items:center;color:var(--ink-2);font-size:15px}
.trust svg{width:20px;height:20px;color:var(--brand);flex:none}
.big-ok{width:84px;height:84px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:0 auto 18px}
.big-ok svg{width:44px;height:44px}

/* -- print (readiness report, documents) ------------------------------------------------- */
@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:12.5pt;display:block}
  .topbar,.no-print,.tabs,.wizard-nav,.btn,footer.foot,.menu{display:none!important}
  main{padding:0;max-width:none}
  .card,.tile,.table-wrap{box-shadow:none;border-color:#cfd8dc;break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .print-only{display:block!important}
  table{font-size:10.5pt}
  th{background:#f2f5f6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ring,.badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.print-only{display:none}
[dir=rtl] .flip{transform:scaleX(-1)}
.mt-1{margin-block-start:8px}.mt-2{margin-block-start:16px}.mt-3{margin-block-start:24px}.mt-4{margin-block-start:36px}
.mb-0{margin-block-end:0}.mb-1{margin-block-end:8px}.mb-2{margin-block-end:16px}
.sr-only:focus{position:fixed;inset-inline-start:12px;top:12px;width:auto;height:auto;clip:auto;margin:0;padding:10px 16px;background:#fff;border-radius:10px;box-shadow:var(--shadow);z-index:50}
progress.meter{appearance:none;-webkit-appearance:none;width:100%;height:10px;border:0;border-radius:999px;background:var(--line);overflow:hidden}
progress.meter::-webkit-progress-bar{background:var(--line);border-radius:999px}
progress.meter::-webkit-progress-value{background:var(--brand);border-radius:999px}
progress.meter::-moz-progress-bar{background:var(--brand);border-radius:999px}
.ring-svg{width:132px;height:132px;flex:none}
.ring-svg .track{stroke:var(--line)}
.ring-svg .val{stroke:var(--brand);transition:stroke-dasharray .6s}
.ring-svg.low .val{stroke:var(--bad)}.ring-svg.mid .val{stroke:#D99A06}.ring-svg.high .val{stroke:var(--ok)}
.ring-svg text{font:800 30px var(--font);fill:var(--ink)}
svg.ico{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
h2 svg.ico,h3 svg.ico{color:var(--brand);margin-inline-end:4px}
.empty svg.art{display:block;width:72px;height:72px;margin:0 auto 14px;color:var(--brand);stroke-width:1.5;background:var(--brand-50);border-radius:50%;padding:16px}
.stack-0{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice .how{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-block-start:4px}
.choice .how svg{color:var(--brand)}
.choice .needs{display:none;margin-block-start:10px;padding:12px 14px;background:#fff;border:1px solid var(--brand-100);border-radius:10px;font-size:15px}
.choice .needs ul{margin:6px 0 0;padding-inline-start:20px}
.choice input:checked+.box .needs{display:block}
.busy-indicator{display:none}
form.busy .busy-indicator{display:inline-block}
form.busy button[type=submit]{opacity:.8;pointer-events:none}
.btn.secondary .busy-indicator{border-color:var(--brand-100);border-top-color:var(--brand)}

@media (max-width:560px){.btn{white-space:normal;text-align:center;line-height:1.35;padding-block:10px}.btn.lg{padding-inline:20px}}
.tax-table select{min-width:190px}
.tax-table .w-rate{width:84px;min-width:84px}
.tax-table td.why{min-width:190px}
.tax-table .exempt{margin-block-start:8px;min-width:190px}
.tax-table td{vertical-align:top}
.card-head>div{min-width:0}
.card-head h2,.card-head h3{overflow-wrap:anywhere}

details.section>summary{cursor:pointer;list-style:none}
details.section>summary::-webkit-details-marker{display:none}
details.section>summary h2::after{content:" +";color:var(--brand)}
details.section[open]>summary h2::after{content:" ‘2"}
.big-ok svg.ico{width:44px;height:44px}
.btn.copied,.btn.copied .label,.btn.copied svg{color:#fff}

/* -- review fixes: warning result, tick boxes, planned systems, phone layout ------------------ */
.result.warn{border-color:#f3dfa8;background:var(--warn-bg)}.result.warn>.ic{background:var(--warn);color:#fff}
label.check{display:flex;gap:10px;align-items:flex-start;margin-block:12px;cursor:pointer;line-height:1.5}
label.check input{width:20px;height:20px;flex:none;margin-block-start:3px;accent-color:var(--brand)}
.choice.off{opacity:.62;cursor:not-allowed}
.choice.off .box{background:var(--idle-bg)}
.opt.need{color:var(--warn)}
@media (max-width:700px){
  /* step 2: the Continue bar stays in reach while scrolling a long list */
  .wizard-nav.sticky-mobile{position:sticky;bottom:0;z-index:5;background:#fff;margin-inline:-16px;padding:12px 16px;
    border-block-start:1px solid var(--line);box-shadow:0 -6px 16px rgba(20,33,43,.06)}
  .choice .how,.choice .d.how{font-size:14px}
  /* tax codes: one card per code, the exemption list under the category, never off-screen */
  .tax-table select,.tax-table .exempt{min-width:0;width:100%}
  .tax-table td.cat{flex-direction:column;align-items:stretch;text-align:start}
  .tax-table td.cat::before{margin-block-end:4px}
  .tax-table td.why{min-width:0;flex-direction:column;align-items:stretch;text-align:start}
  .table-wrap.tax-wrap{overflow-x:visible}
}
.warn-text{color:var(--warn)}
/* core v2 + database setup (20 Oct 2026) */
.ok-text{color:var(--ok)}.error-text{color:var(--bad)}
.company-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:6px}
.company-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.company-list li form{margin-inline-start:auto}
.db-settings fieldset{border:0;padding:0;margin-inline:0}
.db-settings legend{font-weight:700;margin-bottom:6px}
.agent-results h4,.doc-panel h4{margin:12px 0 6px;font-size:15px}
.task-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.task-list li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-inline-start:4px solid var(--warn);border-radius:10px;background:var(--warn-bg)}
.task-list li.done{border-inline-start-color:var(--ok);background:var(--ok-bg)}
.task-list li form{margin-inline-start:auto}
.task-list .what{flex:1 1 220px;min-width:0}
.exposure{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0}
.exposure .tile{min-height:0}
.vendor-note{display:block;margin-top:4px;color:var(--warn)}
.fix-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.fix-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.check-steps{margin:6px 0 10px;padding-inline-start:20px}
.check-steps li{margin-bottom:4px}
.official{font-weight:700}
.agent-results,.db-settings,.doc-panel{overflow-wrap:anywhere}
.tile.warn .n{color:var(--warn)}
.choice .box>.stack-0{min-width:0;flex:1 1 auto}.choice .t,.choice .d{overflow-wrap:anywhere}

/* in-page confirmation (hub.js data-confirm) - replaces window.confirm, which some web views dismiss silently */
.confirm-dialog{border:0;border-radius:var(--radius);box-shadow:0 24px 60px rgba(16,38,46,.28);padding:26px 26px 22px;width:min(440px,calc(100vw - 32px));color:var(--ink);background:var(--card);font:400 17px/1.6 var(--font)}
.confirm-dialog::backdrop{background:rgba(16,38,46,.45)}
.confirm-dialog p{margin:0 0 20px;font-weight:600}
.confirm-dialog .actions{display:flex;gap:10px;flex-wrap:wrap}
.confirm-dialog .actions .btn{flex:1 1 150px}