/* ==========================================================
   Ekstra — app design system
   Shared by /register and /dashboard.
   Tokens follow the studio's app surface (blue accent),
   not the marketing pages' ink-on-paper accent.
   ========================================================== */

:root{
  --paper:#FFFFFF; --paper-dim:#F3F1EA; --panel:#F5F3EC; --panel-2:#FCFCFB;
  --ink:#16150F; --ink-soft:#8B8579; --ink-mute:#A9A294;
  --line:#EAE6DB; --line-strong:#D9D3C4;

  --accent:#2F5FEA; --accent-soft:#E6ECFE; --accent-dim:#6E86E0;

  /* Status — validated light set. Always shipped with a label, never colour alone. */
  --good:#2E7D51; --good-soft:#E3F0E8;
  --warn:#BE8410; --warn-soft:#F8EEDA;
  --crit:#B3332B; --crit-soft:#F7E4E2;

  --radius-s:12px; --radius-m:20px; --radius-l:26px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(22,21,15,.04);
  --shadow-pop:0 22px 44px -26px rgba(22,21,15,.42);
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --paper:#1B1A17; --paper-dim:#141311; --panel:#242220; --panel-2:#1F1E1B;
    --ink:#EFEAE0; --ink-soft:#A69E8E; --ink-mute:#807869;
    --line:#3A362F; --line-strong:#4A453C;
    --accent:#5B82F0; --accent-soft:#232B44; --accent-dim:#6C8A96;
    --good:#35A07C; --good-soft:#1E2E27;
    --warn:#C08A12; --warn-soft:#332A15;
    --crit:#CF5044; --crit-soft:#36211F;
    --shadow-card:0 1px 2px rgba(0,0,0,.3);
    --shadow-pop:0 22px 44px -26px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1B1A17; --paper-dim:#141311; --panel:#242220; --panel-2:#1F1E1B;
  --ink:#EFEAE0; --ink-soft:#A69E8E; --ink-mute:#807869;
  --line:#3A362F; --line-strong:#4A453C;
  --accent:#5B82F0; --accent-soft:#232B44; --accent-dim:#6C8A96;
  --good:#35A07C; --good-soft:#1E2E27;
  --warn:#C08A12; --warn-soft:#332A15;
  --crit:#CF5044; --crit-soft:#36211F;
  --shadow-card:0 1px 2px rgba(0,0,0,.3);
  --shadow-pop:0 22px 44px -26px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
a,button{-webkit-tap-highlight-color:rgba(22,21,15,.08);}
button,input,select,textarea{font-family:inherit;}
svg{max-width:100%;}
.mono{font-family:var(--mono);}
::selection{background:var(--accent-soft);color:var(--ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.logo-mark{color:var(--ink);display:flex;align-items:center;text-decoration:none;}
.logo-mark svg{height:21px;width:79px;display:block;flex:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:13px 24px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:opacity .15s ease,transform .15s ease;min-height:46px;
}
.btn:hover{opacity:.86;}
.btn:active{transform:scale(.99);}
.btn:disabled{opacity:.38;cursor:not-allowed;}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-ghost{background:var(--panel);color:var(--ink);border-color:transparent;}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-sm{padding:9px 16px;font-size:13px;min-height:38px;}
.btn-block{width:100%;}
.btn-link{
  background:none;border:none;padding:0;color:var(--accent);
  font-size:13px;font-weight:500;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;min-height:0;
}

/* ---------- form fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;color:var(--ink-soft);font-weight:500;}
.field .req{color:var(--crit);}
.input{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius-s);font-size:15px;color:var(--ink);outline:none;
  transition:border-color .15s ease;
}
.input::placeholder{color:var(--ink-mute);}
.input:focus{border-color:var(--accent);}
.input[aria-invalid="true"]{border-color:var(--crit);}
.field-hint{font-size:12px;color:var(--ink-soft);line-height:1.45;}
.field-error{font-size:12px;color:var(--crit);display:none;align-items:center;gap:5px;}
.field-error.show{display:flex;}

.input-group{position:relative;display:flex;align-items:center;}
.input-group .input{padding-right:64px;}
.input-affix{
  position:absolute;right:6px;background:none;border:none;cursor:pointer;
  color:var(--ink-soft);font-size:12px;font-weight:600;padding:8px 10px;
  border-radius:var(--radius-s);min-height:36px;
}
.input-affix:hover{color:var(--ink);background:var(--paper-dim);}

.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--ink-soft);cursor:pointer;}
.checkbox input{
  appearance:none;width:19px;height:19px;flex:none;margin-top:1px;
  border:1px solid var(--line-strong);border-radius:5px;background:var(--panel);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.checkbox input:checked{background:var(--accent);border-color:var(--accent);}
.checkbox input:checked::after{
  content:"";display:block;width:5px;height:9px;margin:2px auto;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.checkbox a{color:var(--ink);text-underline-offset:2px;}

/* Password strength — a meter, so the track is a lighter step of the fill's ramp */
.strength{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.strength-track{height:4px;border-radius:2px;background:var(--line);overflow:hidden;}
.strength-fill{height:100%;width:0;border-radius:2px;background:var(--crit);transition:width .25s ease,background .25s ease;}
.strength-label{font-size:11.5px;color:var(--ink-soft);}
.strength[data-level="2"] .strength-fill{background:var(--warn);}
.strength[data-level="3"] .strength-fill{background:var(--accent);}
.strength[data-level="4"] .strength-fill{background:var(--good);}

.divider-or{display:flex;align-items:center;gap:14px;color:var(--ink-mute);font-size:12px;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- cards ---------- */
.card{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:20px;box-shadow:var(--shadow-card);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.card-title{margin:0;font-size:14px;font-weight:600;}
.card-sub{font-size:12.5px;color:var(--ink-soft);margin:2px 0 0;line-height:1.5;}

/* ---------- status badge (colour + label, never colour alone) ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--panel);color:var(--ink-soft);
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.badge-good{background:var(--good-soft);color:var(--good);}
.badge-warn{background:var(--warn-soft);color:var(--warn);}
.badge-crit{background:var(--crit-soft);color:var(--crit);}
.badge-accent{background:var(--accent-soft);color:var(--accent);}

/* ---------- stat tile ----------
   label · value · delta (signed, vs a named period) · optional sparkline.
   Value uses proportional figures — tabular-nums is for columns only. */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.stat{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:18px;box-shadow:var(--shadow-card);
}
.stat-label{font-size:12px;color:var(--ink-soft);margin-bottom:10px;}
.stat-value{font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;}
.stat-value .unit{font-size:14px;font-weight:500;color:var(--ink-soft);margin-left:3px;}
.stat-foot{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;color:var(--ink-soft);}
/* The arrow follows the number's sign; the colour carries whether that is good news. */
.stat-delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;}
.stat-delta.good{color:var(--good);}
.stat-delta.bad{color:var(--crit);}
.stat-delta.flat{color:var(--ink-soft);}
.stat-spark{margin-top:12px;height:30px;}
.stat-spark svg{width:100%;height:100%;display:block;overflow:visible;}

/* Hero figure — exactly one per view, >=48px, same sans as everything else */
.hero-figure{font-size:clamp(40px,5.4vw,54px);font-weight:600;letter-spacing:-0.03em;line-height:1;}
.hero-figure .unit{font-size:18px;font-weight:500;color:var(--ink-soft);margin-left:6px;letter-spacing:0;}

/* ---------- meter ---------- */
.meter{display:flex;flex-direction:column;gap:7px;}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-soft);}
.meter-head .val{font-family:var(--mono);color:var(--ink);}
.meter-track{height:6px;border-radius:3px;background:var(--accent-soft);overflow:hidden;}
.meter-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .4s ease;}
.meter[data-state="warn"] .meter-track{background:var(--warn-soft);}
.meter[data-state="warn"] .meter-fill{background:var(--warn);}
.meter[data-state="crit"] .meter-track{background:var(--crit-soft);}
.meter[data-state="crit"] .meter-fill{background:var(--crit);}
.meter[data-state="good"] .meter-track{background:var(--good-soft);}
.meter[data-state="good"] .meter-fill{background:var(--good);}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.data{width:100%;border-collapse:collapse;font-size:13px;}
table.data th{
  text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.05em;
  padding:0 14px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;padding-right:0;}
table.data th.num{text-align:right;padding-right:0;}

/* ---------- timeline ---------- */
.timeline{display:flex;flex-direction:column;}
.tl-item{display:grid;grid-template-columns:auto 1fr;gap:14px;}
.tl-rail{display:flex;flex-direction:column;align-items:center;gap:4px;}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);margin-top:5px;flex:none;}
.tl-item.is-done .tl-dot{background:var(--good);}
.tl-item.is-active .tl-dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.tl-line{flex:1;width:1px;background:var(--line);min-height:14px;}
.tl-item:last-child .tl-line{display:none;}
.tl-body{padding-bottom:18px;}
.tl-item:last-child .tl-body{padding-bottom:0;}
.tl-title{font-size:13.5px;font-weight:500;}
.tl-meta{font-size:12px;color:var(--ink-soft);margin-top:3px;}

/* ---------- checklist ---------- */
.checklist{display:flex;flex-direction:column;}
.check-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.check-item:last-child{border-bottom:none;}
.check-mark{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);
  flex:none;display:flex;align-items:center;justify-content:center;color:transparent;
}
.check-item.done .check-mark{background:var(--good);border-color:var(--good);color:#fff;}
.check-mark svg{width:11px;height:11px;}
.check-text{flex:1;font-size:13.5px;}
.check-item.done .check-text{color:var(--ink-soft);text-decoration:line-through;}

/* ---------- empty state ---------- */
.empty{
  border:1px dashed var(--line-strong);border-radius:var(--radius-m);
  padding:40px 24px;text-align:center;background:var(--panel);
}
.empty-icon{width:34px;height:34px;margin:0 auto 14px;color:var(--ink-mute);}
.empty h3{margin:0 0 6px;font-size:14px;font-weight:600;}
.empty p{margin:0 auto 18px;font-size:13px;color:var(--ink-soft);line-height:1.55;max-width:320px;}

/* ---------- avatar ---------- */
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;flex:none;letter-spacing:.02em;
}

/* ==========================================================
   Account interface components
   ========================================================== */

/* ---------- locked / disabled explainer ----------
   Never a greyed-out control on its own: the reason and the date ship with it. */
.locked-note{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--radius-s);
  background:var(--panel);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-soft);line-height:1.5;
}
.locked-note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-mute);}
.locked-note strong{color:var(--ink);font-weight:600;}
.is-locked{opacity:.55;pointer-events:none;}

/* ---------- named human ---------- */
.person{display:flex;align-items:center;gap:12px;}
.person-photo{
  width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--accent-soft);border:1px solid var(--line);
}
.person-photo svg{width:100%;height:100%;display:block;}
.person-photo.lg{width:54px;height:54px;}
.person-name{font-size:13.5px;font-weight:600;line-height:1.3;}
.person-role{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.person-sla{
  font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;margin-top:5px;
}
.person-sla svg{width:12px;height:12px;flex:none;}

/* ---------- build switcher ---------- */
.switcher{position:relative;}
.switcher-btn{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-m);
  background:var(--panel-2);cursor:pointer;text-align:left;min-height:56px;
}
.switcher-btn:hover{border-color:var(--line-strong);}
.switcher-thumb{
  width:44px;height:34px;border-radius:7px;overflow:hidden;flex:none;
  border:1px solid var(--line);background:var(--paper-dim);
}
.switcher-thumb svg{width:100%;height:100%;display:block;}
.switcher-text{min-width:0;flex:1;}
.switcher-addr{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.switcher-meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.switcher-btn .chev{width:15px;height:15px;color:var(--ink-soft);flex:none;}
.switcher-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop);padding:6px;display:none;
}
.switcher.open .switcher-menu{display:block;}
.switcher-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;
  border:none;background:none;border-radius:var(--radius-s);cursor:pointer;text-align:left;
}
.switcher-item:hover{background:var(--panel);}
.switcher-item[aria-selected="true"]{background:var(--accent-soft);}

/* ---------- stepped timeline (build status) ----------
   No percentage bar anywhere: the stage names carry the progress. */
.steps{display:flex;flex-direction:column;}
.step-row{display:grid;grid-template-columns:auto 1fr;gap:16px;}
.step-rail{display:flex;flex-direction:column;align-items:center;}
.step-node{
  width:26px;height:26px;border-radius:50%;flex:none;margin-top:1px;
  border:1.5px solid var(--line-strong);background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-mute);
}
.step-node svg{width:13px;height:13px;}
.step-line{flex:1;width:1.5px;background:var(--line);min-height:16px;}
.step-row:last-child .step-line{display:none;}
.step-body{padding-bottom:22px;min-width:0;}
.step-row:last-child .step-body{padding-bottom:0;}
.step-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.step-when{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}

.step-row.done .step-node{background:var(--good);border-color:var(--good);color:#fff;}
.step-row.done .step-name{color:var(--ink-soft);font-weight:500;}
.step-row.current .step-node{background:var(--accent);border-color:var(--accent);color:#fff;}
.step-row.current .step-body{padding-bottom:26px;}
.step-row.stalled .step-node{background:var(--warn);border-color:var(--warn);color:#fff;}
.step-row.upcoming .step-name{color:var(--ink-soft);font-weight:500;}

.step-detail{
  margin-top:14px;padding:16px;border-radius:var(--radius-m);
  background:var(--panel);border:1px solid var(--line);
}
.step-detail p{margin:0 0 12px;font-size:13px;color:var(--ink-soft);line-height:1.6;}
.step-detail p:last-child{margin-bottom:0;}
.step-detail.is-stalled{background:var(--warn-soft);border-color:transparent;}
.step-detail.is-stalled p{color:var(--ink);}
.stall-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--warn);margin-bottom:8px;}
.stall-head svg{width:15px;height:15px;flex:none;}

/* Date ranges, never a fake precise date until the step is locked */
.step-dates{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.date-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border-radius:var(--radius-pill);background:var(--panel-2);border:1px solid var(--line);
  font-size:12px;color:var(--ink-soft);white-space:nowrap;
}
.date-chip svg{width:12px;height:12px;flex:none;}
.date-chip .k{color:var(--ink-mute);}
.date-chip .v{font-family:var(--mono);color:var(--ink);}
.date-chip.locked{border-color:var(--good);color:var(--good);}
.date-chip.locked .v{color:var(--good);}

/* ---------- progress photos ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.photo{
  aspect-ratio:4/3;border-radius:var(--radius-s);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-dim);position:relative;cursor:pointer;
}
.photo svg{width:100%;height:100%;display:block;}
.photo-cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 9px 7px;
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent);
  color:#fff;font-size:10.5px;font-weight:500;
}

/* ---------- design cards (saved drafts) ---------- */
.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.design-card{
  border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;
  background:var(--panel-2);box-shadow:var(--shadow-card);display:flex;flex-direction:column;
}
.design-visual{aspect-ratio:4/3;background:var(--paper-dim);border-bottom:1px solid var(--line);}
.design-visual svg{width:100%;height:100%;display:block;}
.design-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:3px;flex:1;}
.design-name{font-size:14px;font-weight:600;}
.design-meta{font-size:12px;color:var(--ink-soft);}
.design-price{font-family:var(--mono);font-size:15px;margin-top:6px;}
.design-edited{font-size:11.5px;color:var(--ink-mute);margin-top:auto;padding-top:10px;}
.design-actions{display:flex;gap:7px;padding:0 15px 15px;}

/* ---------- order summary + money ----------
   Always real dollar amounts, never a percentage. */
.summary-spec{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;}
.spec-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;}
.spec-line .k{color:var(--ink-soft);}
.spec-line .v{font-weight:500;text-align:right;}
.money-head{display:flex;flex-wrap:wrap;gap:22px;padding:16px 0 4px;}
.money-block .k{font-size:12px;color:var(--ink-soft);margin-bottom:5px;}
.money-block .v{font-family:var(--mono);font-size:21px;font-variant-numeric:tabular-nums;}
.money-block.paid .v{color:var(--good);}

.milestones{display:flex;flex-direction:column;}
.ms-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.ms-row:last-child{border-bottom:none;}
.ms-node{
  width:20px;height:20px;border-radius:50%;flex:none;border:1.5px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:transparent;
}
.ms-row.paid .ms-node{background:var(--good);border-color:var(--good);color:#fff;}
.ms-row.due .ms-node{border-color:var(--accent);border-style:dashed;}
.ms-node svg{width:11px;height:11px;}
.ms-name{font-size:13.5px;font-weight:500;}
.ms-when{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.ms-amt{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;text-align:right;}
.ms-row.paid .ms-name{color:var(--ink-soft);}
.ms-row.paid .ms-amt{color:var(--good);}

/* ---------- documents ---------- */
.doc-list{display:flex;flex-direction:column;}
.doc-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.doc-row:last-child{border-bottom:none;}
.doc-icon{
  width:34px;height:34px;border-radius:9px;flex:none;background:var(--panel);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}
.doc-icon svg{width:16px;height:16px;}
.doc-name{font-size:13.5px;font-weight:500;}
.doc-type{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.doc-date{font-size:12px;color:var(--ink-soft);font-family:var(--mono);white-space:nowrap;}
.doc-dl{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;flex:none;
}
.doc-dl:hover{background:var(--panel);color:var(--ink);}
.doc-dl svg{width:15px;height:15px;}

/* ---------- message threads ---------- */
.thread-list{display:flex;flex-direction:column;}
.thread{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;
}
.thread:last-child{border-bottom:none;}
.thread:hover .thread-topic{color:var(--accent);}
.thread-topic{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.thread-snip{
  font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.thread-when{font-size:11.5px;color:var(--ink-mute);white-space:nowrap;padding-top:2px;}
.thread-unread{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
}

/* ---------- settings ---------- */
.set-section{padding:20px 0;border-bottom:1px solid var(--line);}
.set-section:first-child{padding-top:0;}
.set-section:last-child{border-bottom:none;padding-bottom:0;}
.set-head{font-size:13px;font-weight:600;margin:0 0 4px;}
.set-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 16px;line-height:1.5;}
.set-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.toggle-row:last-child{border-bottom:none;}
.toggle-row .tname{font-size:13.5px;font-weight:500;}
.toggle-row .tdesc{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.45;}
.switch{position:relative;width:44px;height:26px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.switch .track{
  position:absolute;inset:0;background:var(--line-strong);border-radius:13px;
  transition:background .2s;cursor:pointer;
}
.switch .track::after{
  content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .2s;
}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked + .track::after{transform:translateX(18px);}

.pay-card{
  display:flex;align-items:center;gap:13px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius-m);background:var(--panel);
}
.pay-brand{
  width:42px;height:28px;border-radius:5px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none;
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .summary-spec,.set-grid{grid-template-columns:1fr;}
  .photo-grid{grid-template-columns:repeat(2,1fr);}
  .design-grid{grid-template-columns:1fr 1fr;}
  .doc-row{grid-template-columns:auto 1fr auto;}
  .doc-date{display:none;}
  .money-head{gap:16px;}
}
@media (max-width:460px){
  .design-grid{grid-template-columns:1fr;}
  .photo-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- site plan (shared by /siteplan and the dashboard tab) ---------- */
.sp-modes{display:inline-flex;gap:2px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);margin-bottom:14px;}
.sp-mode{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);padding:7px 16px;border-radius:var(--radius-pill);cursor:pointer;}
.sp-mode.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-card);}
.sp-mode:disabled{opacity:.4;cursor:default;}
.sp-result{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start;}
@media (max-width:900px){.sp-result{grid-template-columns:1fr;}}
.sp-stage{border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:#FBFAF7;}
.sp-stage svg,.sp-stage img{display:block;width:100%;height:auto;}
.sp-legend{display:flex;gap:16px;flex-wrap:wrap;padding:11px 14px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-m) var(--radius-m);margin-top:-1px;background:var(--panel);font-size:12px;color:var(--ink-soft);}
.sp-legend span{display:inline-flex;align-items:center;gap:7px;}
.sp-legend i{width:11px;height:11px;border-radius:2px;display:block;border:1px solid rgba(0,0,0,.18);}
.sp-credit{font-size:11.5px;color:var(--ink-soft);margin:8px 0 0;}
.sp-facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;margin:0;}
.sp-facts div{background:var(--paper);padding:11px 14px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.sp-facts dt{font-size:12.5px;color:var(--ink-soft);margin:0;}
.sp-facts dd{margin:0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}
.sp-facts .verdict{display:block;}
.sp-facts .verdict.good{background:var(--good-soft);color:var(--good);}
.sp-facts .verdict.bad{background:var(--warn-soft);color:var(--warn);}
.sp-facts .verdict p{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft);}