/* ============================================================
   Visit Ledger
   Chrome stays deliberately neutral: the only saturated colour on
   screen belongs to the user's own groups, so it always means
   something. Palette, type and layout tokens all live here.
   ============================================================ */

:root{
  /* --- neutrals : warm greige paper, picked not inherited --- */
  --ground:#F3F1EC;
  --surface:#FBFAF7;
  --surface-2:#EAE7E0;
  --sunk:#ECE9E2;
  --ink:#1E1C19;
  --ink-2:#67625A;
  --ink-3:#948E84;
  --line:#DFDBD2;
  --line-soft:#E8E5DD;

  /* --- semantics, kept away from the group hues --- */
  --ok:#4E7A46;
  --attention:#A8722A;
  --attention-soft:#F3E9D6;

  /* --- the eight group hues, light theme --- */
  --g0:#B4553F; --g0s:#F4E3DE;
  --g1:#A2761C; --g1s:#F3E9D2;
  --g2:#63793A; --g2s:#E7EDDA;
  --g3:#1F7A72; --g3s:#DBEDEA;
  --g4:#35688F; --g4s:#DFE9F1;
  --g5:#5A5A96; --g5s:#E4E4F0;
  --g6:#8E4570; --g6s:#F2E0EA;
  --g7:#5F6461; --g7s:#E4E6E4;
  --on-g:#FFFFFF;

  --shadow:0 1px 2px rgba(30,28,25,.05), 0 8px 24px -14px rgba(30,28,25,.26);
  --shadow-lift:0 2px 4px rgba(30,28,25,.07), 0 18px 40px -20px rgba(30,28,25,.34);

  --serif:Cambria,Charter,"Bitstream Charter","Sitka Text","Iowan Old Style",Georgia,serif;
  --sans:Corbel,Optima,"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;

  --r:14px; --r-sm:9px; --r-pill:999px;
  --gap:16px;
  --shell:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#171613; --surface:#201F1B; --surface-2:#2B2A25; --sunk:#1C1B17;
    --ink:#EDEAE2; --ink-2:#A19A8E; --ink-3:#7A746A;
    --line:#34322C; --line-soft:#2A2823;
    --ok:#8FBE7E; --attention:#DCAE4A; --attention-soft:#2F2718;
    --g0:#E59078; --g0s:#3A2620;
    --g1:#DCAE4A; --g1s:#352B15;
    --g2:#A8C071; --g2s:#262D18;
    --g3:#5DBFB4; --g3s:#14312E;
    --g4:#7FB2D6; --g4s:#1A2A38;
    --g5:#9B9BD4; --g5s:#26263C;
    --g6:#D486B4; --g6s:#33202C;
    --g7:#A3AAA5; --g7s:#262A28;
    --on-g:#171613;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 20px 44px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#171613; --surface:#201F1B; --surface-2:#2B2A25; --sunk:#1C1B17;
  --ink:#EDEAE2; --ink-2:#A19A8E; --ink-3:#7A746A;
  --line:#34322C; --line-soft:#2A2823;
  --ok:#8FBE7E; --attention:#DCAE4A; --attention-soft:#2F2718;
  --g0:#E59078; --g0s:#3A2620;
  --g1:#DCAE4A; --g1s:#352B15;
  --g2:#A8C071; --g2s:#262D18;
  --g3:#5DBFB4; --g3s:#14312E;
  --g4:#7FB2D6; --g4s:#1A2A38;
  --g5:#9B9BD4; --g5s:#26263C;
  --g6:#D486B4; --g6s:#33202C;
  --g7:#A3AAA5; --g7s:#262A28;
  --on-g:#171613;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 20px 44px -22px rgba(0,0,0,.9);
}

/* one class per hue, so every component just reads var(--g) */
.g0{--g:var(--g0); --gs:var(--g0s)}
.g1{--g:var(--g1); --gs:var(--g1s)}
.g2{--g:var(--g2); --gs:var(--g2s)}
.g3{--g:var(--g3); --gs:var(--g3s)}
.g4{--g:var(--g4); --gs:var(--g4s)}
.g5{--g:var(--g5); --gs:var(--g5s)}
.g6{--g:var(--g6); --gs:var(--g6s)}
.g7{--g:var(--g7); --gs:var(--g7s)}
.gx{--g:var(--ink-3); --gs:var(--sunk)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:600; text-wrap:balance; letter-spacing:-.005em}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}

/* ---------------- shell ---------------- */
.shell{max-width:var(--shell); margin:0 auto; padding:0 16px 112px}
@media (min-width:761px){ .shell{padding-bottom:48px} }

.top{position:sticky; top:0; z-index:30; background:var(--ground); border-bottom:1px solid var(--line-soft)}
.top-in{max-width:var(--shell); margin:0 auto; padding:13px 16px 11px; display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:baseline; gap:9px; min-width:0}
.brand h1{font-size:19px; white-space:nowrap; letter-spacing:-.015em}
.brand .home{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:26ch;
}
@media (max-width:560px){ .brand .home{display:none} }
.top .spacer{flex:1}

.iconbtn{
  background:transparent; border:1px solid var(--line); border-radius:var(--r-pill);
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer; color:var(--ink-2); flex:none;
}
.iconbtn:hover{background:var(--surface); color:var(--ink)}
.iconbtn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--surface); border-top:1px solid var(--line);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.nav button{
  background:none; border:0; cursor:pointer; padding:7px 2px 5px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border-radius:var(--r-sm);
}
.nav button svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.nav button[aria-current="page"]{color:var(--ink)}
.nav button[aria-current="page"] svg{stroke-width:1.9}
@media (min-width:761px){
  .nav{
    position:static; display:inline-flex; gap:2px; background:var(--sunk);
    border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; margin-left:auto;
  }
  .nav button{flex-direction:row; gap:7px; padding:7px 15px; border-radius:var(--r-pill); font-size:11px}
  .nav button svg{width:15px; height:15px}
  .nav button[aria-current="page"]{background:var(--surface); box-shadow:var(--shadow)}
}

/* ---------------- generic ---------------- */
.view{padding-top:20px; display:flex; flex-direction:column; gap:22px}
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  box-shadow:var(--shadow); padding:18px;
}
.card.flat{box-shadow:none}
.sec-head{display:flex; align-items:baseline; gap:10px; margin-bottom:13px; flex-wrap:wrap}
.sec-head .rule{flex:1; height:1px; background:var(--line); align-self:center; min-width:12px}
.eyebrow{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.grid2{display:grid; gap:var(--gap)}
@media (min-width:761px){ .grid2{grid-template-columns:1fr 1fr} }
.stack{display:flex; flex-direction:column; gap:var(--gap)}
.wrap-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--ink); color:var(--ground); border:1px solid var(--ink);
  border-radius:var(--r-pill); padding:9px 16px; font-size:14px; font-weight:600;
  cursor:pointer; transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--sunk); opacity:1}
.btn.sm{padding:6px 12px; font-size:13px}
.btn.danger{background:transparent; border-color:var(--g0); color:var(--g0)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn[disabled]{opacity:.4; cursor:not-allowed}

.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  padding:3px 10px; font-size:11.5px; font-weight:600; border:1px solid transparent; white-space:nowrap;
}
.chip.tint{background:var(--gs); color:var(--g)}
.chip.neutral{background:var(--sunk); color:var(--ink-2); border-color:var(--line-soft)}
.chip.warn{background:var(--attention-soft); color:var(--attention)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}

.empty{text-align:center; padding:32px 18px; border:1px dashed var(--line); border-radius:var(--r); background:var(--sunk)}
.empty h3{font-size:18px; margin-bottom:6px}
.empty p{color:var(--ink-2); font-size:14px; max-width:44ch; margin:0 auto 16px}
.empty .wrap-row{justify-content:center}

/* ---------------- forms ---------------- */
.field{display:flex; flex-direction:column; gap:5px}
.field > span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.field .hint{font-size:12px; color:var(--ink-3); letter-spacing:0; text-transform:none; font-weight:400}
input[type=text],input[type=date],input[type=number],select,textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 11px; width:100%; font-size:15px;
}
textarea{resize:vertical; min-height:70px; line-height:1.45}
input[type=number]{font-family:var(--mono); font-variant-numeric:tabular-nums}
input[type=checkbox]{accent-color:var(--ink); width:18px; height:18px}
.form-grid{display:grid; gap:13px; grid-template-columns:1fr}
@media (min-width:520px){ .form-grid.two{grid-template-columns:1fr 1fr} }

dialog{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink);
  padding:0; width:min(580px, calc(100vw - 24px)); box-shadow:var(--shadow-lift);
  max-height:min(88vh, 820px); overflow:auto;
}
dialog::backdrop{background:rgba(20,18,14,.5)}
.dlg-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px 12px;
  border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--surface); z-index:2;
}
.dlg-head h2{font-size:18px; flex:1}
.dlg-body{padding:18px; display:flex; flex-direction:column; gap:14px}
.dlg-foot{display:flex; gap:8px; justify-content:flex-end; padding:0 18px 18px; flex-wrap:wrap; align-items:center}

/* colour picker */
.swatches{display:flex; gap:7px; flex-wrap:wrap}
.swatches label{cursor:pointer}
.swatches input{position:absolute; opacity:0; pointer-events:none}
.swatches i{
  display:block; width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--g); border:2px solid transparent; box-shadow:inset 0 0 0 2px var(--surface);
}
.swatches input:checked + i{border-color:var(--ink)}
.swatches input:focus-visible + i{outline:2px solid var(--ink); outline-offset:2px}

/* ---------------- the ledger : signature device ---------------- */
.ledger{display:flex; flex-direction:column; gap:11px}
.led-row{display:grid; grid-template-columns:minmax(94px,1.1fr) 2.6fr 52px; gap:12px; align-items:center}
.led-name{display:flex; flex-direction:column; min-width:0}
.led-name b{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--g)}
.led-name small{font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.led-track{position:relative; height:22px; background:var(--sunk); border-radius:var(--r-sm); overflow:hidden}
.led-track .zero{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--ink-3); opacity:.55; transform:translateX(-.5px); z-index:1}
.led-track .bar{position:absolute; top:4px; bottom:4px; background:var(--g); border-radius:3px; min-width:2px; transition:left .4s ease, width .4s ease}
.led-val{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; text-align:right; font-weight:600}
.led-val.behind{color:var(--attention)}
.led-val.ahead{color:var(--ink-3)}
.led-val.level{color:var(--ok)}
.led-axis{
  display:grid; grid-template-columns:minmax(94px,1.1fr) 2.6fr 52px; gap:12px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:2px;
}
.led-axis .ends{display:flex; justify-content:space-between}
/* narrow screens: give the names room before the bars */
@media (max-width:560px){
  .led-row,.led-axis{grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr) 44px; gap:9px}
}
.verdict{font-family:var(--serif); font-size:17px; line-height:1.4; text-wrap:balance; margin-top:16px}
.verdict b{font-weight:600}

/* ---------------- rows ---------------- */
.rows{display:flex; flex-direction:column}
.row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row .grow{flex:1; min-width:0}
.row .title{font-weight:600; font-size:15px; overflow-wrap:anywhere}
.row .sub{font-size:12.5px; color:var(--ink-2); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.linkrow{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:none; border:0; padding:14px 0; cursor:pointer; border-bottom:1px solid var(--line-soft); color:inherit;
}
.linkrow:last-child{border-bottom:0}
.linkrow:hover .title{text-decoration:underline; text-underline-offset:3px}
.stripe{width:4px; align-self:stretch; border-radius:var(--r-pill); background:var(--line); flex:none; min-height:38px; overflow:hidden; display:flex; flex-direction:column}
.stripe i{flex:1; background:var(--g)}
.chev{color:var(--ink-3); flex:none; display:grid; place-items:center}
.chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.x{background:none; border:0; cursor:pointer; color:var(--ink-3); padding:5px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none}
.x:hover{color:var(--g0); background:var(--sunk)}
.x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.kind{flex:none; width:20px; display:grid; place-items:center; color:var(--ink-3)}
.kind svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- trip detail ---------------- */
.trip-head{display:flex; flex-direction:column; gap:14px}
.trip-title{display:flex; align-items:flex-start; gap:12px}
.trip-title h2{font-size:25px; flex:1; line-height:1.15}
.route{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; color:var(--ink-2);
  padding:11px 13px; background:var(--sunk); border-radius:var(--r-sm); border:1px solid var(--line-soft);
}
.route b{color:var(--ink); font-weight:600}
.route .arrow{color:var(--ink-3)}
.tabs{display:flex; gap:3px; background:var(--sunk); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px}
.tabs button{
  flex:1; background:none; border:0; cursor:pointer; padding:8px 6px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

.day{border-bottom:1px solid var(--line-soft); padding:13px 0 13px 12px; border-left:3px solid var(--g); margin-left:-0px}
.day:last-child{border-bottom:0}
.day-head{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.day-date{display:flex; align-items:baseline; gap:7px; min-width:86px}
.day-date .d{font-family:var(--mono); font-size:19px; font-weight:600; letter-spacing:-.04em}
.day-date .w{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.day select.where{width:auto; min-width:130px; max-width:210px; padding:5px 9px; font-size:13px; font-weight:600; color:var(--g); background:var(--gs); border-color:transparent}
.day-items{display:flex; flex-direction:column; margin-top:8px; padding-left:11px; border-left:2px solid var(--line-soft)}
.day-item{display:flex; gap:10px; align-items:baseline; padding:5px 0; font-size:14px}
.day-item .t{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); min-width:44px; flex:none}
.day-item .txt{flex:1; overflow-wrap:anywhere}
.add-item{display:flex; gap:7px; margin-top:8px; padding-left:11px}
.add-item input[type=text]{flex:1}
.add-item input.time{max-width:78px; font-family:var(--mono)}
.leg{
  margin-top:9px; margin-left:11px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--attention-soft); font-size:13px; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.leg select,.leg input{width:auto; background:transparent; border-color:rgba(128,110,70,.35); padding:4px 8px; font-size:13px}
.leg input{max-width:130px}

/* ---------------- budget ---------------- */
.totals{display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden}
.tot{background:var(--surface); padding:13px 14px; display:flex; flex-direction:column; gap:2px}
.tot .k{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.tot .v{font-family:var(--mono); font-size:20px; font-weight:600; letter-spacing:-.03em}
.tot .v.tint{color:var(--g)}
.tot .sub{font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}
.bars{display:flex; flex-direction:column; gap:9px; margin-top:16px}
.bar-row{display:grid; grid-template-columns:minmax(92px,1fr) 2.4fr auto; gap:11px; align-items:center; font-size:13px}
.bar-track{height:8px; border-radius:var(--r-pill); background:var(--sunk); overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:var(--r-pill); background:var(--ink-2)}
.bar-fill.tint{background:var(--g)}
.bar-row .amt{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums}

/* ---------------- checklist ---------------- */
.check-group{margin-bottom:18px}
.check-group:last-child{margin-bottom:0}
.check-item{display:flex; align-items:flex-start; gap:11px; padding:7px 0; font-size:15px}
.check-item label{flex:1; cursor:pointer; overflow-wrap:anywhere}
.check-item input:checked + label{color:var(--ink-3); text-decoration:line-through}
.progress{height:6px; border-radius:var(--r-pill); background:var(--sunk); overflow:hidden; margin-top:10px}
.progress i{display:block; height:100%; background:var(--ok); border-radius:var(--r-pill); transition:width .35s ease}

/* ---------------- calendar ---------------- */
.year-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:16px}
.month h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-family:var(--sans); font-weight:700; margin-bottom:7px}
.month table{border-collapse:collapse; width:100%; font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums}
.month th{color:var(--ink-3); font-weight:500; font-size:9.5px; padding-bottom:3px}
.month td{text-align:center; padding:0}
.month td i{display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:5px; font-style:normal; color:var(--ink-2)}
.month td i.on{background:var(--g); color:var(--on-g)}
.month td i.travel{background:var(--attention-soft); color:var(--attention); font-weight:700}
.month td i.today{outline:1.5px solid var(--ink); outline-offset:-1.5px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:14px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.swatch{width:11px; height:11px; border-radius:3px; background:var(--g)}
.year-nav{display:flex; align-items:center; gap:10px}
.year-nav .y{font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:-.03em; min-width:64px; text-align:center}

/* ---------------- groups ---------------- */
.grp-card{position:relative; padding-left:22px}
.grp-card::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--g)}
.grp-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.grp-top h2{font-size:20px; color:var(--g)}
.grp-top .who{font-size:13px; color:var(--ink-2); margin-top:2px}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden; margin-bottom:16px}
.stat{background:var(--surface); padding:11px 12px}
.stat .k{font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:700; display:block; margin-bottom:3px}
.stat .v{font-family:var(--mono); font-size:16px; font-weight:600; letter-spacing:-.02em; display:block}
.stat .v small{font-family:var(--sans); font-size:11px; font-weight:400; color:var(--ink-3); letter-spacing:0}
.gap-line{display:grid; grid-template-columns:minmax(88px,1fr) 2fr auto; gap:11px; align-items:center; font-size:13px}
.gap-track{height:9px; background:var(--sunk); border-radius:var(--r-pill); overflow:hidden}
.gap-track i{display:block; height:100%; background:var(--g); border-radius:var(--r-pill)}

/* ---------------- setup ---------------- */
.setup{max-width:640px; margin:0 auto; padding:30px 0 60px; display:flex; flex-direction:column; gap:22px}
.setup .lead{font-family:var(--serif); font-size:26px; line-height:1.25; text-wrap:balance}
.setup .sub{color:var(--ink-2); font-size:15px; max-width:52ch}
.steps{display:flex; gap:8px; align-items:center; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.steps i{width:22px; height:1px; background:var(--line)}
.grp-edit{display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--sunk); position:relative}
.grp-edit .hd{display:flex; align-items:center; gap:10px}
.grp-edit .hd .eyebrow{flex:1}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom));
  background:var(--ink); color:var(--ground); padding:10px 18px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:600; z-index:80; box-shadow:var(--shadow-lift);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(-4px)}
@media (min-width:761px){ .toast{bottom:28px} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}