:root{
  --bg:#eef0ef;
  --surface:#ffffff;
  --surface-2:#e4e7e5;
  --border:#d2d6d3;
  --ink:#12181a;
  --ink-muted:#5b6462;
  --ink-faint:#8b9391;
  --rail:#10161b;
  --rail-ink:#c7cdd0;
  --rail-ink-dim:#6f7a80;
  --accent:#93611c;
  --accent-ink:#ffffff;
  --accent-soft:#f1e4c8;
  --accent-soft-border:#d9c191;
  --danger:#a4291f;
  --danger-soft:#f6e2df;
  --success:#276a45;
  --success-soft:#dcefe2;
  --warning:#8a6416;
  --warning-soft:#f3e6c8;
  --info:#2a5c8a;
  --info-soft:#dde8f2;
  --focus:#2a68a8;
  --radius:7px;
  --shadow:0 1px 2px rgba(16,22,25,.06), 0 4px 14px rgba(16,22,25,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1113;
    --surface:#161b1e;
    --surface-2:#1e2427;
    --border:#2b3236;
    --ink:#eceeed;
    --ink-muted:#a2aaa8;
    --ink-faint:#6d7674;
    --rail:#0a0d0f;
    --rail-ink:#d7dbdc;
    --rail-ink-dim:#616a6d;
    --accent:#d7a851;
    --accent-ink:#191204;
    --accent-soft:#332711;
    --accent-soft-border:#5c471f;
    --danger:#e08a83;
    --danger-soft:#3a1f1c;
    --success:#7cc79b;
    --success-soft:#1c3327;
    --warning:#e0c084;
    --warning-soft:#3a2f14;
    --info:#8fbde8;
    --info-soft:#16283a;
    --focus:#6ba6df;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0d1113; --surface:#161b1e; --surface-2:#1e2427; --border:#2b3236;
  --ink:#eceeed; --ink-muted:#a2aaa8; --ink-faint:#6d7674;
  --rail:#0a0d0f; --rail-ink:#d7dbdc; --rail-ink-dim:#616a6d;
  --accent:#d7a851; --accent-ink:#191204; --accent-soft:#332711; --accent-soft-border:#5c471f;
  --danger:#e08a83; --danger-soft:#3a1f1c; --success:#7cc79b; --success-soft:#1c3327;
  --warning:#e0c084; --warning-soft:#3a2f14; --info:#8fbde8; --info-soft:#16283a; --focus:#6ba6df;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#eef0ef; --surface:#ffffff; --surface-2:#e4e7e5; --border:#d2d6d3;
  --ink:#12181a; --ink-muted:#5b6462; --ink-faint:#8b9391;
  --rail:#10161b; --rail-ink:#c7cdd0; --rail-ink-dim:#6f7a80;
  --accent:#93611c; --accent-ink:#ffffff; --accent-soft:#f1e4c8; --accent-soft-border:#d9c191;
  --danger:#a4291f; --danger-soft:#f6e2df; --success:#276a45; --success-soft:#dcefe2;
  --warning:#8a6416; --warning-soft:#f3e6c8; --info:#2a5c8a; --info-soft:#dde8f2; --focus:#2a68a8;
  --shadow:0 1px 2px rgba(16,22,25,.06), 0 4px 14px rgba(16,22,25,.05);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.display{
  font-family:'Bahnschrift SemiBold','Bahnschrift','Barlow Semi Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  letter-spacing:.01em;
}
.mono{
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,'Roboto Mono',monospace;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{text-wrap:balance;margin:0;}
a{color:inherit;}

.app{max-width:960px;margin:0 auto;padding:0 20px 80px;}
.app-wide{max-width:1180px;margin:0 auto;padding:0 20px 80px;}

/* ---------- Client masthead ---------- */
.masthead{
  padding:36px 20px 22px;
  max-width:960px;margin:0 auto;
  display:flex;flex-direction:column;gap:10px;
}
.kicker{
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.masthead h1{
  font-size:clamp(26px,4.4vw,38px);
  line-height:1.08;
}
.masthead p{
  margin:0;color:var(--ink-muted);max-width:62ch;font-size:15px;
}
.ref-row{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;
  font-size:12.5px;color:var(--ink-faint);
}
.ref-row b{color:var(--ink-muted);font-weight:600;}

/* ---------- Client progress rail ----------
   Reads as "how far along am I", not as tabs. Only the required steps are
   counted, so the four optional sections never look like unfinished work. */
.progressbar{
  position:sticky;top:0;z-index:20;
  background:var(--rail);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.progress-inner{max-width:960px;margin:0 auto;padding:11px 20px 12px;}

.progress-status{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:11px;
}
.progress-step{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);flex:0 0 auto;
}
.progress-name{
  font-size:12.5px;font-weight:600;color:var(--rail-ink);
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.progress-req{
  font-size:11.5px;color:var(--rail-ink-dim);flex:0 0 auto;white-space:nowrap;
}
.progress-req.is-ready{color:var(--accent);font-weight:600;}

.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
.step{position:relative;min-width:0;}

/* The connector sits behind the dots and fills in as you advance. */
.step::before{
  content:"";position:absolute;top:9px;left:50%;
  width:100%;height:2px;background:rgba(255,255,255,.11);
  transition:background .2s ease;
}
.step:last-child::before{display:none;}
.step.is-passed::before{background:var(--accent);}

.step-link{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;padding:0 2px;
}
.step-dot{
  position:relative;z-index:1;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--rail);border:2px solid rgba(255,255,255,.20);
  font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
  color:var(--rail-ink-dim);
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.step.is-done .step-dot{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
}
.step.is-current .step-dot{
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.step.is-current.is-done .step-dot{color:var(--accent-ink);}
.step-link:hover .step-dot{border-color:var(--rail-ink);}

.step-label{
  font-size:11px;line-height:1.25;text-align:center;
  color:var(--rail-ink-dim);letter-spacing:.02em;
}
.step.is-done .step-label,
.step.is-current .step-label{color:var(--rail-ink);}
.step.is-current .step-label{font-weight:600;}
.step-optional{
  display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--rail-ink-dim);opacity:.75;font-weight:400;
}
.step-count{
  font-family:ui-monospace,monospace;font-size:10px;
  background:rgba(255,255,255,.09);color:var(--rail-ink-dim);
  padding:0 5px;border-radius:20px;margin-left:4px;
}
.step.is-done .step-count{background:var(--accent-soft);color:var(--accent);}

/* On a phone the labels are dropped rather than scrolled out of sight -- the
   status line above already names the step you're on. */
@media (max-width:640px){
  .step-label{display:none;}
  .steps{padding:2px 0 1px;}
  .progress-req{display:none;}
}
@media (max-width:400px){
  .progress-name{font-size:12px;}
}

/* ---------- Staff top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--rail);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--rail-ink);
}
.topbar-inner{
  max-width:1180px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar-brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Bahnschrift SemiBold','Bahnschrift','Barlow Semi Condensed','Arial Narrow',sans-serif;
  font-weight:700;letter-spacing:.02em;font-size:15px;
  text-decoration:none;color:var(--rail-ink);
}
.topbar-brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.topbar-actions{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--rail-ink-dim);}
.topbar-actions a, .topbar-actions button{
  color:var(--rail-ink-dim);background:none;border:none;font:inherit;cursor:pointer;
  text-decoration:none;
}
.topbar-actions a:hover, .topbar-actions button:hover{color:var(--rail-ink);}

/* ---------- Sections / cards ---------- */
section.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 26px 28px;
  margin-top:22px;
  scroll-margin-top:64px;
}
.card-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.card-head h2{font-size:19px;}
.card-head .sub{font-size:12.5px;color:var(--ink-faint);}

.optional-toggle{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--ink-muted);
  cursor:pointer;user-select:none;
}
.switch{position:relative;width:36px;height:20px;flex:0 0 auto;}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;}
.switch .track{
  position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border);
  border-radius:20px;transition:background .15s ease, border-color .15s ease;
}
.switch .thumb{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--ink-faint);transition:transform .15s ease, background .15s ease;
}
.switch input:checked + .track{background:var(--accent-soft);border-color:var(--accent-soft-border);}
.switch input:checked + .track .thumb{transform:translateX(16px);background:var(--accent);}
.switch input:focus-visible + .track{outline:2px solid var(--focus);outline-offset:2px;}

/* ---------- Fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field label, .field-label{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);
}
.field .hint{font-size:12px;color:var(--ink-faint);font-weight:400;text-transform:none;letter-spacing:0;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],textarea,select{
  font:inherit;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;
  padding:9px 11px;width:100%;
}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%235b6462' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
  padding-right:32px;
}
input::placeholder,textarea::placeholder{color:var(--ink-faint);}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px;
}
textarea{resize:vertical;min-height:64px;font-family:inherit;}
input.invalid,select.invalid{border-color:var(--danger);background:var(--danger-soft);}
.error-msg{font-size:12px;color:var(--danger);display:none;}
.error-msg.show{display:block;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.stack{display:flex;flex-direction:column;gap:16px;}
@media (max-width:640px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
}

/* ---------- Ledger blocks (days) ---------- */
.day-block{
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface);
  margin-top:14px;
  overflow:hidden;
}
.day-block:first-child{margin-top:0;}
.day-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px 14px;
  flex-wrap:wrap;
  background:var(--surface-2);
  padding:9px 14px;
  border-bottom:1px solid var(--border);
}
.day-head .day-title{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);
  flex:0 0 auto;
}

/* Click the day header to fold a finished day away */
.day-toggle{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:0;
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.day-toggle .chev{
  font-size:10px;color:var(--ink-faint);
  transition:transform .15s ease;
}
.day-block.collapsed .day-toggle .chev{transform:rotate(-90deg);}
.day-block.collapsed .day-body{display:none;}
.day-summary{
  font-size:12px;color:var(--ink-faint);
  font-weight:400;letter-spacing:0;text-transform:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* The day's date, shown in the header and editable there, so a line inside
   the day never has to repeat it. */
.day-date-label{
  font-size:12px;font-weight:600;color:var(--accent);
  letter-spacing:0;text-transform:none;white-space:nowrap;flex:0 0 auto;
}
/* Keeps "Day 1" and its date together when the header has no toggle button
   to group them (the client's read-only quote). */
.day-head-left{display:flex;align-items:baseline;gap:10px;min-width:0;}
.day-date-label:empty{display:none;}
.day-head .day-date{
  width:auto;min-width:140px;padding:4px 8px;font-size:12.5px;
  background:var(--surface);
}
.day-hint{
  font-size:12.5px;color:var(--ink-faint);
  margin:0 0 14px;
}

.day-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.day-action{
  background:none;border:none;padding:2px;cursor:pointer;
  font:inherit;font-size:12px;color:var(--ink-faint);text-decoration:underline;
}
.day-action:hover{color:var(--accent);}

/* On narrow screens give the title+summary its own line so the collapsed
   summary isn't squeezed to nothing by the action links */
@media (max-width:560px){
  .day-toggle{flex:1 1 100%;}
  .day-actions{width:100%;justify-content:flex-end;}
}
.day-body{padding:14px;display:flex;flex-direction:column;gap:12px;}

/* Vehicles / Security groups stacked inside one day card */
.sub-group{display:flex;flex-direction:column;gap:8px;}
.sub-group + .sub-group{
  margin-top:4px;padding-top:14px;border-top:1px solid var(--border);
}
.sub-group-head{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);
}

.row-list{display:flex;flex-direction:column;gap:10px;}
/* No date column here -- the date belongs to the day, not to each line. */
.item-row{
  display:grid;
  grid-template-columns:1fr 1.4fr 110px 32px;
  gap:10px;align-items:end;
  padding-bottom:10px;
  border-bottom:1px dashed var(--border);
}
.item-row:last-child{border-bottom:none;padding-bottom:0;}
.item-row .field label{display:none;}
.col-label-row{
  display:grid;grid-template-columns:1fr 1.4fr 110px 32px;gap:10px;
  padding-bottom:2px;
}
.col-label-row span{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:760px){
  .item-row,.col-label-row{grid-template-columns:1fr;}
  .item-row{gap:8px;}
  .item-row .field label{display:block;}
  .col-label-row{display:none;}
}

.item-row-2{
  display:grid;grid-template-columns:1fr 1.6fr 32px;gap:10px;align-items:end;
  padding-bottom:10px;border-bottom:1px dashed var(--border);
}
.item-row-2:last-child{border-bottom:none;padding-bottom:0;}
.item-row-2 .field label{display:none;}
@media (max-width:640px){
  .item-row-2{grid-template-columns:1fr;}
  .item-row-2 .field label{display:block;}
}

/* Client-facing quote lines. No date column -- the day header carries it. */
.price-row{
  display:grid;
  grid-template-columns:1fr 1.6fr 90px 130px;
  gap:10px;align-items:center;
  padding:10px 0;
  border-bottom:1px dashed var(--border);
}
.price-row:last-child{border-bottom:none;}
.price-row .ro{font-size:13.5px;color:var(--ink);}
.price-row .ro.muted{color:var(--ink-faint);}
.price-col-label-row{
  display:grid;grid-template-columns:1fr 1.6fr 90px 130px;gap:10px;
  padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:2px;
}
.price-col-label-row span{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
/* Staff pricing rows: every request field editable, plus a rate column, so a
   revision can be made in place instead of rebuilding the quote. */
/* No date column -- the date lives on the day header above these rows. */
.staff-row{
  display:grid;
  grid-template-columns:1fr 1.3fr 78px 104px 76px 108px 32px;
  gap:9px;align-items:end;
  padding-bottom:10px;
  border-bottom:1px dashed var(--border);
}
.staff-row:last-child{border-bottom:none;padding-bottom:0;}
.staff-row .field label{display:none;}
.staff-col-labels{
  display:grid;grid-template-columns:1fr 1.3fr 78px 104px 76px 108px 32px;gap:9px;
  padding-bottom:2px;
}

/* Computed client rate -- read-only, so it reads as a figure not a field */
.line-rate{
  display:flex;align-items:center;justify-content:flex-end;
  height:44.5px;padding:0 4px;
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-weight:600;font-size:13.5px;
  color:var(--ink);
}
.line-rate.zero{color:var(--ink-faint);font-weight:400;}
@media (max-width:900px){
  .line-rate{height:auto;justify-content:flex-start;padding:2px 0;}
}

/* Cost and margin are ours only -- tint them so they read as internal */
.staff-row .internal input{
  background:var(--accent-soft);
  border-color:var(--accent-soft-border);
}
.staff-col-labels span{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:900px){
  .staff-row,.staff-col-labels{grid-template-columns:1fr;}
  .staff-row{gap:8px;}
  .staff-row .field label{display:block;}
  .staff-col-labels{display:none;}
}

.client-link-row{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;
}
.client-link-row input{
  flex:1;min-width:220px;
  font-family:ui-monospace,monospace;font-size:12.5px;
}

.rate-input{position:relative;}
.rate-input .cur{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:13px;pointer-events:none;
}
.rate-input input{padding-left:22px;text-align:right;font-family:ui-monospace,monospace;}
@media (max-width:760px){
  .price-row,.price-col-label-row{grid-template-columns:1fr;}
  .price-col-label-row{display:none;}
  .price-row{gap:6px;padding:12px 0;}
  .price-row .ro::before{content:attr(data-label) ": ";font-weight:700;color:var(--ink-faint);}
}

.row-remove{
  /* stretch so the button matches input height exactly on the desktop row layout,
     min-height keeps it tappable once the row stacks on narrow screens */
  align-self:stretch;
  width:32px;min-height:34px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:6px;
  color:var(--danger);cursor:pointer;font-size:16px;line-height:1;
}
.row-remove:hover{background:var(--danger-soft);}

.btn{
  font:inherit;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:6px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink);
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;
}
.btn:hover{border-color:var(--ink-faint);}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn-accent:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-remove-day{
  background:transparent;border:none;color:var(--ink-faint);cursor:pointer;
  font-size:12px;text-decoration:underline;padding:2px;
}
.btn-remove-day:hover{color:var(--danger);}
.btn-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

.plus{font-size:15px;line-height:1;}

/* ---------- Status pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-new{background:var(--accent-soft);color:var(--accent);}
.pill-quoting{background:var(--warning-soft);color:var(--warning);}
.pill-sent{background:var(--info-soft);color:var(--info);}
.pill-changes_requested{background:var(--danger-soft);color:var(--danger);}
.pill-approved{background:var(--success-soft);color:var(--success);}
.pill-signed{background:var(--success-soft);color:var(--success);}
.pill-declined{background:var(--surface-2);color:var(--ink-faint);}
.pill-cancelled{background:var(--surface-2);color:var(--ink-faint);}

/* Payment progress reads as a quieter companion to the lifecycle pill */
.pill-pay{border:1px solid var(--border);background:transparent;color:var(--ink-muted);}
.pill-pay.pill-deposit_received{border-color:var(--warning);color:var(--warning);}
.pill-pay.pill-paid_in_full{border-color:var(--success);color:var(--success);}

/* ---------- Narrative summaries on the client quote ----------
   Staff type these as prose, often over several lines. Without pre-wrap the
   line breaks collapse and it reads as one run-on block. */
.summary-block{
  border-left:2px solid var(--accent-soft-border);
  padding-left:15px;
  margin:0 0 18px;
}
.summary-block:last-child{margin-bottom:0;}
.summary-block .field-label{display:block;margin-bottom:6px;}
.summary-block p{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink);
  max-width:78ch;
}
.summary-stack{margin-bottom:22px;}
.summary-stack:empty{display:none;}

/* ---------- Review / summary boxes ---------- */
.summary-box{
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:16px 18px;white-space:pre-wrap;
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-size:12.5px;line-height:1.65;color:var(--ink);
  max-height:420px;overflow:auto;
}
/* Unmistakable when the summary has cost and margin in it. */
.summary-box.is-internal{
  background:color-mix(in srgb, var(--danger) 8%, var(--surface-2));
  border-color:var(--danger);
}
.note{font-size:12.5px;color:var(--ink-faint);}
.success-banner{
  background:color-mix(in srgb, var(--success) 14%, var(--surface));
  border:1px solid var(--success);color:var(--ink);
  border-radius:6px;padding:12px 14px;font-size:13px;margin-bottom:16px;
  display:none;
}
.success-banner.show{display:block;}
.warn-banner{
  background:color-mix(in srgb, var(--warning) 16%, var(--surface));
  border:1px solid var(--warning);color:var(--ink);
  border-radius:6px;padding:12px 14px;font-size:13px;margin-bottom:16px;
}

/* ---------- Auth card (login) ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
.auth-card{
  width:100%;max-width:380px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px 28px;
}
.auth-card .kicker{margin-bottom:8px;}
.auth-card h1{font-size:22px;margin-bottom:4px;}
.auth-card p.sub{color:var(--ink-muted);font-size:13.5px;margin:0 0 22px;}

/* ---------- Dashboard table ---------- */
.toolbar{
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:16px;
}
.toolbar .field{min-width:220px;}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);}
table.quotes-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px;}
table.quotes-table th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);
  position:sticky;top:0;
}
table.quotes-table td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.quotes-table tbody tr{cursor:pointer;transition:background .1s ease;}
table.quotes-table tbody tr:hover{background:var(--surface-2);}
table.quotes-table tbody tr:last-child td{border-bottom:none;}
.empty-state{padding:60px 20px;text-align:center;color:var(--ink-faint);}

footer{
  max-width:960px;margin:40px auto 0;padding:0 20px;
  font-size:12px;color:var(--ink-faint);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.footer-wide{max-width:1180px;}

@media print{
  .navbar,.topbar,.btn-row,footer,.optional-toggle,.no-print{display:none !important;}
  section.card{box-shadow:none;border:1px solid #999;}

  /* Print/PDF export of a client quote: force the light palette so it doesn't
     render as white-on-black, and keep each day intact across page breaks. */
  :root{
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f5f4; --border:#c8ccc9;
    --ink:#12181a; --ink-muted:#40484a; --ink-faint:#666e6c;
    --accent:#7a5015; --accent-soft:#f1e4c8; --accent-soft-border:#c2a973;
    --shadow:none;
  }
  body{background:#fff;font-size:12px;orphans:3;widows:3;}
  .app,.app-wide{padding:0;max-width:none;}
  section.card{
    margin-top:12px;padding:14px 16px;
    break-inside:auto;page-break-inside:auto;
  }

  /* Nothing tall is held together. A block that won't fit in the space left
     gets pushed whole to the next page, which strands most of a page as white
     space -- on a long quote that reads as a printing fault. Days, summaries
     and cards are all allowed to split; only small units that look broken
     mid-split are protected. */
  .day-block{
    border:2px solid #5b6462;
    break-inside:auto;page-break-inside:auto;
    margin-top:16px;
  }
  .day-block.collapsed .day-body{display:flex !important;}
  .summary-block,.sub-group{break-inside:auto;page-break-inside:auto;}

  /* The day header is the landmark someone uses to scan a printed quote, so
     on paper it is set larger and ruled harder than the screen needs. At the
     12px print body size the default 12px title had nothing to distinguish it
     from the line items underneath. */
  .day-head{
    background:#e7eae9;
    border-bottom:2px solid #5b6462;
    padding:10px 14px;
  }
  .day-head .day-title{
    font-size:16px;
    letter-spacing:.09em;
    color:#12181a;
  }
  .day-date-label{
    font-size:14px;
    font-weight:700;
    color:#6d4712;
  }
  .day-summary{
    font-size:12.5px;
    color:#40484a;
  }
  .sub-group-head{font-size:11.5px;letter-spacing:.09em;}

  /* Line items drop to the print body size. They were 13.5px -- within a
     pixel or two of the day header -- which is why a new day didn't announce
     itself. The gap is now 16 / 14 / 12 and reads as a real hierarchy. */
  .price-row .ro{font-size:12px;}

  /* Keep a heading with whatever follows it, so no label is left alone at the
     foot of a page. These groups are only a few lines tall, so the most they
     can ever push down is a few lines. */
  .card-head,
  .day-head,
  .sub-group-head,
  .price-col-label-row,
  .summary-block .field-label,
  .legal-section h4{
    break-after:avoid;page-break-after:avoid;
  }

  /* A single line item split across two pages is unreadable; these are all
     one or two lines tall, so protecting them costs nothing. */
  .price-row,
  .item-row,
  .item-row-2,
  .money-row,
  .fx-step{
    break-inside:avoid;page-break-inside:avoid;
  }

  /* Needs section.quote-total, not .quote-total: section.card above is more
     specific and would otherwise win, letting the headline total split across
     a page break. */
  section.quote-total{break-inside:avoid;page-break-inside:avoid;}

  /* On screen these scroll; on paper they must show everything rather than
     silently clipping at their max height. */
  .summary-box{max-height:none;overflow:visible;}
  .table-wrap,.pt-scroll,.row-list{overflow:visible;}

  a[href]:after{content:"";}
}

/* Contract lifecycle pills */
.pill-draft{background:var(--surface-2);color:var(--ink-muted);}
.pill-signed{background:var(--success-soft);color:var(--success);}
.pill-revision_requested{background:var(--danger-soft);color:var(--danger);}

/* Collapsible agreement -- long legal text folded away by default so it
   doesn't bury the schedule and pay the contractor actually needs to read */
.legal-toggle{
  display:flex;align-items:center;gap:8px;
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:var(--accent);font-size:13px;font-weight:600;
}
.legal-toggle .chev{font-size:10px;transition:transform .15s ease;}
.legal-body{margin-top:14px;}
.legal-body.collapsed{display:none;}
.legal-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg);}
.legal-section{margin-bottom:16px;}
.legal-section h4{
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-muted);margin:0 0 5px;
}
.legal-section p{
  margin:0;white-space:pre-wrap;font-size:13px;line-height:1.6;color:var(--ink-muted);
}

/* Contract schedule rows: date, scope, hours, pay, per diem */
.sched-row{
  display:grid;
  grid-template-columns:132px 1.3fr 92px 92px 104px 104px 32px;
  gap:9px;align-items:end;
  padding-bottom:10px;border-bottom:1px dashed var(--border);
}
.sched-row:last-child{border-bottom:none;padding-bottom:0;}
.sched-row .field label{display:none;}
.sched-col-labels{
  display:grid;grid-template-columns:132px 1.3fr 92px 92px 104px 104px 32px;gap:9px;
  padding-bottom:2px;
}
.sched-col-labels span{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:900px){
  .sched-row,.sched-col-labels{grid-template-columns:1fr;}
  .sched-row{gap:8px;}
  .sched-row .field label{display:block;}
  .sched-col-labels{display:none;}
}

/* Expense rows */
.exp-row{
  display:grid;grid-template-columns:1.4fr 110px 90px 90px 32px;
  gap:9px;align-items:end;
  padding-bottom:10px;border-bottom:1px dashed var(--border);
}
.exp-row:last-child{border-bottom:none;padding-bottom:0;}
.exp-row .field label{display:none;}
.exp-col-labels{display:grid;grid-template-columns:1.4fr 110px 90px 90px 32px;gap:9px;padding-bottom:2px;}
.exp-col-labels span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
@media (max-width:760px){
  .exp-row,.exp-col-labels{grid-template-columns:1fr;}
  .exp-col-labels{display:none;}
  .exp-row .field label{display:block;}
}

.totals-strip{
  display:flex;gap:34px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
}

/* ============ TEAM DASHBOARD ============ */

/* World clocks -- reads as an ops console strip */
.clock-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  margin-bottom:22px;
}
.clock{background:var(--rail);padding:14px 16px;}
.clock .zone{
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rail-ink-dim);margin-bottom:4px;
}
.clock .time{
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:23px;font-weight:600;color:var(--rail-ink);line-height:1.1;
}
.clock .day{font-size:11.5px;color:var(--rail-ink-dim);margin-top:2px;}
.clock.is-home .time{color:var(--accent);}

.dash-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start;}
@media (max-width:1000px){ .dash-grid{grid-template-columns:1fr;} }

/* Month calendar */
.cal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.cal-nav{display:flex;gap:6px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center;padding-bottom:4px;
}
.cal-day{
  min-height:74px;border:1px solid var(--border);border-radius:5px;
  background:var(--surface-2);padding:5px 6px;
  display:flex;flex-direction:column;gap:3px;
  cursor:pointer;transition:border-color .12s ease;
}
.cal-day:hover{border-color:var(--ink-faint);}
.cal-day.muted{opacity:.4;}
.cal-day.today{border-color:var(--accent);border-width:2px;padding:4px 5px;}
.cal-day.selected{background:var(--accent-soft);border-color:var(--accent);}
.cal-daynum{
  font-family:ui-monospace,monospace;font-size:11.5px;
  font-variant-numeric:tabular-nums;color:var(--ink-muted);
}
.cal-day.today .cal-daynum{color:var(--accent);font-weight:700;}
.cal-bar{
  font-size:10px;line-height:1.3;padding:2px 4px;border-radius:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cal-bar.signed{background:var(--success-soft);color:var(--success);}
.cal-bar.sent{background:var(--warning-soft);color:var(--warning);}
.cal-bar.other{background:var(--surface);color:var(--ink-muted);border:1px solid var(--border);}
.cal-bar.quote{background:var(--info-soft);color:var(--info);}
.cal-more{font-size:9.5px;color:var(--ink-faint);}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--ink-faint);}
.legend span{display:flex;align-items:center;gap:5px;}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* Upcoming list */
.up-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.up-item:last-child{border-bottom:none;}
.up-date{
  font-family:ui-monospace,monospace;font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--ink-faint);flex:0 0 60px;padding-top:2px;
}
.up-body{flex:1;min-width:0;}
.up-title{font-size:13.5px;font-weight:600;}
.up-sub{font-size:12px;color:var(--ink-faint);}

/* Team board */
.post{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 0;border-bottom:1px solid var(--border);
}
.post:last-child{border-bottom:none;}
.post.is-done .post-body{opacity:.5;text-decoration:line-through;}
.post-check{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  border:1px solid var(--border);border-radius:4px;background:var(--surface-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--success);line-height:1;padding:0;
}
.post-check:hover{border-color:var(--ink-faint);}
.post-body{flex:1;min-width:0;}
.post-text{white-space:pre-wrap;font-size:14px;}
.post-meta{font-size:11.5px;color:var(--ink-faint);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;}
.post-pin{
  background:none;border:none;cursor:pointer;padding:2px;font-size:12px;
  color:var(--ink-faint);
}
.post-pin.on{color:var(--accent);}
.post-del{background:none;border:none;cursor:pointer;padding:2px;font-size:11.5px;color:var(--ink-faint);}
.post-del:hover{color:var(--danger);}
.pinned-flag{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:1px 5px;border-radius:3px;
}

/* ============ TOOLS ============ */

.tool-card{
  display:block;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;
  transition:border-color .12s ease, transform .12s ease;
}
.tool-card:hover{border-color:var(--accent);transform:translateY(-1px);}
.tool-card h3{font-size:17px;margin-bottom:6px;}
.tool-card p{margin:0;font-size:13px;color:var(--ink-muted);}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.tool-tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  padding:2px 7px;border-radius:3px;margin-bottom:10px;
}

/* Platinum grid. Every dimension is driven by custom properties so the whole
   sheet can be scaled down to fit a screen instead of scrolling sideways. */
.pt-zoom{
  --ptf:12.5px;      /* cell font size      */
  --ptp:6px;         /* cell padding        */
  --ptd:74px;        /* day column width    */
  --ptrole:170px;
  --ptname:150px;
  --ptnote:230px;
  --ptneed:78px;
  --ptconf:120px;
}
.pt-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
table.pt-grid{border-collapse:collapse;font-size:var(--ptf);width:100%;}
table.pt-grid th, table.pt-grid td{
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:0;white-space:nowrap;
}
table.pt-grid thead th{
  background:var(--surface-2);
  font-size:calc(var(--ptf) - 2.5px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);padding:calc(var(--ptp) + 1px) var(--ptp);text-align:left;
  position:sticky;top:0;z-index:2;
}
table.pt-grid th.dayhead{text-align:center;min-width:var(--ptd);width:var(--ptd);}
table.pt-grid th.dayhead .dow{display:block;font-size:calc(var(--ptf) - 3.5px);color:var(--ink-faint);}
table.pt-grid th.dayhead .dnum{display:block;font-family:ui-monospace,monospace;
  font-size:calc(var(--ptf) - 1.5px);color:var(--ink-muted);letter-spacing:0;text-transform:none;}
table.pt-grid td input, table.pt-grid td select{
  border:none;background:transparent;border-radius:0;
  padding:var(--ptp) calc(var(--ptp) + 2px);width:100%;font-size:var(--ptf);
}
table.pt-grid td input:focus, table.pt-grid td select:focus{
  outline:2px solid var(--focus);outline-offset:-2px;background:var(--surface-2);
}
table.pt-grid td.num{width:var(--ptd);}
table.pt-grid td.num input{
  text-align:right;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;
  padding-left:2px;padding-right:4px;
}
table.pt-grid td.num input.has-value{background:var(--accent-soft);}
table.pt-grid td.rowtotal{
  text-align:right;padding:var(--ptp) calc(var(--ptp) + 4px);font-family:ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-weight:600;background:var(--surface-2);
}
table.pt-grid tr.is-off td{opacity:.45;}
table.pt-grid tfoot td{
  background:var(--surface-2);font-weight:700;padding:calc(var(--ptp) + 2px) calc(var(--ptp) + 4px);
  font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right;
}
table.pt-grid tfoot td.label{text-align:left;font-family:inherit;letter-spacing:.05em;
  text-transform:uppercase;font-size:calc(var(--ptf) - 2px);color:var(--ink-muted);}
.pt-role{min-width:var(--ptrole);width:var(--ptrole);}
.pt-name{min-width:var(--ptname);width:var(--ptname);}
.pt-need{min-width:var(--ptneed);width:var(--ptneed);}
.pt-conf{min-width:var(--ptconf);width:var(--ptconf);}
.pt-note{min-width:var(--ptnote);width:var(--ptnote);}
.pt-del{min-width:var(--ptdel);width:var(--ptdel);}

/* Notes are the widest optional column, so they can be folded away */
.pt-zoom.hide-notes .note-col{display:none;}

/* Full-bleed page for the sheet, so the width isn't capped at the usual 1180 */
.app-full{max-width:none;margin:0;padding:0 20px 80px;}

.pt-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
}
.pt-toolbar .field{margin:0;}
.pt-fitnote{font-size:12px;color:var(--ink-faint);margin-left:auto;}

.pt-section{margin-top:26px;}
.pt-section:first-of-type{margin-top:0;}
.pt-section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:9px;
}
.pt-section-head h3{
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);
}
.pt-section-total{
  font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:600;
}

/* Markup panel */
.markup-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media (max-width:820px){ .markup-grid{grid-template-columns:1fr;} }
.money-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.money-row:last-child{border-bottom:none;}
.money-row .lbl{font-size:12.5px;color:var(--ink-muted);}
.money-row .amt{
  font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:600;
}
.money-row.grand .lbl{font-size:13.5px;color:var(--ink);font-weight:600;}
.money-row.grand .amt{font-size:26px;color:var(--accent);}
.money-row.goal .amt{color:var(--ink-faint);font-weight:400;}

.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;}
.check-item{
  display:flex;align-items:center;gap:9px;font-size:13px;
  padding:7px 10px;border:1px solid var(--border);border-radius:5px;
  background:var(--surface-2);cursor:pointer;
}
.check-item.on{background:var(--success-soft);border-color:var(--success);color:var(--success);}
.check-item input{margin:0;}

/* ---------- Currency / VAT converter ---------- */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;}

/* A percent sign belongs after the number, not in front of it. */
.pct-input .cur{left:auto;right:11px;}
.pct-input input{padding-left:11px;padding-right:26px;}

/* The two answers, side by side: what it costs us, what the client pays. */
.fx-answers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:4px;}
@media (max-width:760px){ .fx-answers{grid-template-columns:1fr;} }
.fx-answer{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px 14px;display:flex;flex-direction:column;gap:2px;
}
.fx-answer.is-client{background:var(--accent-soft);border-color:var(--accent-soft-border);}
.fx-answer .fx-cap{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.fx-answer.is-client .fx-cap{color:var(--accent);}
.fx-answer .fx-big{
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.fx-answer.is-client .fx-big{color:var(--accent);}
.fx-answer .fx-sub{font-size:12px;color:var(--ink-muted);}
.fx-answer .btn{align-self:flex-start;margin-top:10px;}

/* Step-by-step so the number is auditable, not a black box. */
.fx-chain{display:flex;flex-direction:column;}
.fx-step{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.fx-step:last-child{border-bottom:none;}
.fx-step .lbl{color:var(--ink-muted);}
.fx-step .lbl b{color:var(--ink);font-weight:600;}
.fx-step .amt{
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;
}
.fx-step.is-rule{border-top:1px solid var(--border);}
.fx-step.is-muted .amt{color:var(--ink-faint);font-weight:400;}

.fx-table{width:100%;border-collapse:collapse;font-size:13px;}
.fx-table th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);padding:0 10px 8px 0;border-bottom:1px solid var(--border);white-space:nowrap;
}
.fx-table td{padding:8px 10px 8px 0;border-bottom:1px solid var(--border);vertical-align:middle;}
.fx-table tr:last-child td{border-bottom:none;}
.fx-table .num{
  text-align:right;font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fx-table th.num{text-align:right;}
.fx-table tr.is-goal td{background:var(--accent-soft);font-weight:600;}
.fx-table tfoot td{border-top:2px solid var(--border);border-bottom:none;font-weight:700;padding-top:10px;}

.fx-rate-line{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-faint);margin-top:8px;
}
.fx-flip{
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink-muted);
  border-radius:5px;padding:3px 9px;font:inherit;font-size:12px;cursor:pointer;
}
.fx-flip:hover{border-color:var(--accent);color:var(--accent);}