/* ============================================================================
   Vision Cleaning · office
   Same palette, same fonts, same tokens as the public site, so the back office
   and the website read as ONE product. That is the entire pitch: Squeegee can
   run his round, but it can never be his website.

   Light, not dark. Aqua Glaze went dark; this is a phone held up at a house in
   daylight, and a bright high-contrast screen wins outdoors. It also keeps the
   office visibly continuous with the site.

   Mobile first. Desktop is the SAME column, centred. There is no second app.
   No oklch anywhere: it blanks the page on pre-Chrome-111.
   ============================================================================ */

:root{
  /* straight from the site's contract */
  --cyan:#01B6E3;
  --cyan-d:#0090CF;
  --brand:#005F95;
  --sky:#C5DFF8;
  --kraft:#B6977B;
  --kraft-lt:#EFE6DA;
  --kraft-md:#E0CFB9;
  --ink:#072235;
  --ink-2:#0E3A55;
  --navy:#0B3C63;
  --mist:#EAF3FB;
  --paper:#FFFFFF;
  --line:#D7E5F1;
  --muted:#42627C;
  --kraft-tx:#6B5844;

  /* office-only states, chosen against --paper and --ink for AA */
  --good:#1E7A42;
  --good-lt:#E8F7EE;
  --good-bd:#B7E3C6;
  --warn:#9A5B00;
  --warn-lt:#FFF3E0;
  --warn-bd:#F2D9AE;
  --bad:#B3261E;
  --bad-lt:#FDECEA;
  --bad-bd:#F3C6C2;

  --shadow-s:0 1px 2px rgba(7,34,53,.08), 0 2px 6px rgba(7,34,53,.06);
  --shadow-m:0 2px 6px rgba(7,34,53,.07), 0 12px 28px rgba(7,34,53,.10);
  --shadow-l:0 4px 12px rgba(7,34,53,.08), 0 24px 60px rgba(7,34,53,.14);

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;
  --pad:16px;
  --nav:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.7,0,.3,1);
  --ff-d:"Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ff-b:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-b);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--mist);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px));
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:var(--ff-d);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
button{font:inherit;color:inherit}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the one column, on every screen size */
.col{width:100%;max-width:520px;margin-inline:auto;padding-inline:var(--pad)}

/* ============================ APP BAR ============================ */
.appbar{
  position:sticky;top:0;z-index:40;
  background:var(--ink);color:#fff;
  padding-top:env(safe-area-inset-top,0px);
}
.appbar-in{display:flex;align-items:center;gap:10px;height:56px}
.ab-brand{display:flex;align-items:center;gap:8px;min-width:0;margin-right:auto;
  color:#fff;text-decoration:none}
.ab-brand:hover .ab-name{color:var(--cyan)}
.ab-brand img{width:28px;height:28px;flex:none}
.ab-name{font-family:var(--ff-d);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-sub{display:block;font-family:var(--ff-b);font-weight:400;font-size:.7rem;color:#9FBFD4;letter-spacing:0}
.ab-btn{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:0;border-radius:12px;cursor:pointer;
}
.ab-btn svg{width:20px;height:20px;fill:#fff}
.ab-btn:active{background:rgba(255,255,255,.2)}

/* the demo strip: honest, small, and never in the way */
.demostrip{
  background:var(--kraft-lt);border-bottom:1px solid var(--kraft-md);
  color:var(--kraft-tx);font-size:.78rem;line-height:1.35;
}
.demostrip .col{display:flex;align-items:center;gap:8px;padding-block:7px}
.demostrip svg{width:14px;height:14px;fill:var(--kraft-tx);flex:none}
.demostrip b{color:#4E4132}

/* ============================ VIEWS ============================ */
.view{padding-block:14px 26px;animation:vin .22s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.view{animation:none}}

.sechead{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px}
.sechead-t{font-size:1.06rem}
.sechead-n{font-size:.82rem;color:var(--muted);margin-left:auto;white-space:nowrap}

/* ============================ THE DAY LINE ============================ */
.dayline{
  background:var(--ink);color:#fff;border-radius:var(--r-l);
  padding:16px 18px 18px;box-shadow:var(--shadow-m);
}
.dayline-d{font-family:var(--ff-d);font-weight:700;font-size:1.36rem;letter-spacing:-.02em}
.dayline-s{color:#B7D2E4;font-size:.9rem;margin-top:2px}
.dayline-n{display:flex;gap:1px;background:rgba(255,255,255,.14);border-radius:var(--r-m);overflow:hidden;margin-top:14px}
.dayline-n div{flex:1;background:var(--ink);padding:10px 8px;text-align:center}
.dayline-n b{display:block;font-family:var(--ff-d);font-size:1.2rem;color:var(--cyan);line-height:1.1}
.dayline-n span{display:block;font-size:.72rem;color:#A9C4D6;margin-top:1px}
.dayline-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.16);margin-top:14px;overflow:hidden}
.dayline-bar i{display:block;height:100%;width:100%;background:var(--cyan);border-radius:3px;
  transform-origin:left center;transform:scaleX(0);transition:transform .5s var(--ease)}
@media(prefers-reduced-motion:reduce){.dayline-bar i{transition:none}}

/* ============================ THE WEDGE CARD ============================ */
/* The brightest thing on the screen, on purpose. This card IS the argument. */
.wedge{
  background:linear-gradient(150deg,#E6F8FE,#D3EEFA 62%,#C5DFF8);
  border:1.5px solid #7FD6EF;
  border-radius:var(--r-l);
  padding:15px 15px 14px;
  box-shadow:0 2px 6px rgba(1,182,227,.14), 0 14px 30px rgba(0,95,149,.12);
  margin-top:14px;
}
.wedge-h{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.wedge-h svg{width:17px;height:17px;fill:var(--brand);flex:none}
.wedge-t{font-family:var(--ff-d);font-weight:700;font-size:1.04rem;letter-spacing:-.01em;color:var(--ink)}
.wedge-s{font-size:.83rem;color:var(--ink-2);margin-bottom:11px}
.enq{
  background:#fff;border:1px solid #BBD6EA;border-radius:var(--r-m);
  padding:12px 13px;margin-top:9px;
}
.enq-top{display:flex;align-items:baseline;gap:8px}
.enq-n{font-family:var(--ff-d);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.enq-p{margin-left:auto;font-family:var(--ff-d);font-weight:700;font-size:1.08rem;color:var(--brand)}
.enq-a{font-size:.87rem;color:var(--muted);margin-top:1px}
.enq-w{font-size:.83rem;margin-top:2px}
.enq-q{
  display:flex;gap:7px;align-items:flex-start;
  margin-top:9px;padding:8px 10px;border-radius:var(--r-s);
  font-size:.82rem;line-height:1.4;
}
.enq-q svg{width:14px;height:14px;flex:none;margin-top:2px}
.enq-q.great{background:var(--good-lt);border:1px solid var(--good-bd);color:#215C3B}
.enq-q.great svg{fill:var(--good)}
.enq-q.ok{background:var(--mist);border:1px solid #C9DEEF;color:var(--ink-2)}
.enq-q.ok svg{fill:var(--brand)}
.enq-q.far{background:var(--warn-lt);border:1px solid var(--warn-bd);color:#6C4300}
.enq-q.far svg{fill:var(--warn)}
.enq-when{font-size:.76rem;color:var(--muted);margin-top:8px}
.enq-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ============================ NEXT STOP ============================ */
/* The house he is driving to has no competition on the screen. */
.next{
  background:#fff;border:1.5px solid var(--brand);border-radius:var(--r-l);
  box-shadow:var(--shadow-m);overflow:hidden;margin-top:14px;
}
.next-h{
  background:var(--brand);color:#fff;
  padding:8px 15px;font-size:.78rem;font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.next-h svg{width:14px;height:14px;fill:var(--cyan)}
.next-b{padding:15px}
.next-addr{font-family:var(--ff-d);font-weight:700;font-size:1.6rem;line-height:1.1;letter-spacing:-.025em}
.next-name{font-size:.95rem;color:var(--muted);margin-top:3px}
.next-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.next-price{font-family:var(--ff-d);font-weight:700;font-size:1.5rem;color:var(--brand);letter-spacing:-.02em}
.next-note{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--warn-lt);border:1px solid var(--warn-bd);color:#6C4300;
  border-radius:var(--r-s);padding:9px 11px;margin-top:11px;font-size:.86rem;line-height:1.4;
}
.next-note svg{width:15px;height:15px;fill:var(--warn);flex:none;margin-top:1px}
.next-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.next-acts .b-tick{grid-column:1 / -1}

/* the tick: one tap, 60px, no confirm */
.b-tick{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;border:0;border-radius:var(--r-m);cursor:pointer;
  background:var(--good);color:#fff;
  font-family:var(--ff-d);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;
  box-shadow:0 5px 16px rgba(30,122,66,.28);
  transition:transform .12s var(--ease),background .15s;
}
.b-tick svg{width:24px;height:24px;fill:#fff}
.b-tick:active{transform:scale(.985);background:#186635}

/* ============================ ROWS ============================ */
.rows{display:flex;flex-direction:column;gap:8px}
.row{
  display:flex;align-items:stretch;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);overflow:hidden;
}
.row-main{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  padding:11px 12px;background:none;border:0;text-align:left;cursor:pointer;
}
.row-top{display:flex;align-items:baseline;gap:8px}
.row-name{font-family:var(--ff-d);font-weight:700;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-right{margin-left:auto;font-family:var(--ff-d);font-weight:700;font-size:1rem;color:var(--brand);white-space:nowrap}
.row-addr{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.row.done{opacity:.62}
.row.done .row-name{text-decoration:line-through;text-decoration-color:var(--muted)}
.row-act{
  flex:none;width:62px;display:grid;place-items:center;
  background:var(--good-lt);border:0;border-left:1px solid var(--good-bd);cursor:pointer;
}
.row-act svg{width:23px;height:23px;fill:var(--good)}
.row-act:active{background:var(--good-bd)}
.row-act.undo{background:var(--mist);border-left-color:var(--line)}
.row-act.undo svg{fill:var(--muted);width:19px;height:19px}
.row-n{
  flex:none;width:30px;display:grid;place-items:center;
  background:var(--mist);border-right:1px solid var(--line);
  font-family:var(--ff-d);font-weight:700;font-size:.82rem;color:var(--muted);
}

.chip{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:999px;
  font-size:.72rem;font-weight:600;line-height:1.5;
  background:var(--mist);color:var(--ink-2);border:1px solid var(--line);
}
.chip-good{background:var(--good-lt);color:#215C3B;border-color:var(--good-bd)}
.chip-warn{background:var(--warn-lt);color:#6C4300;border-color:var(--warn-bd)}
.chip-bad{background:var(--bad-lt);color:#8C1D18;border-color:var(--bad-bd)}
.chip-brand{background:var(--sky);color:var(--brand);border-color:#AECBE8}
.chip-kraft{background:var(--kraft-lt);color:var(--kraft-tx);border-color:var(--kraft-md)}

/* ============================ BUTTONS ============================ */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 16px;border:0;border-radius:var(--r-m);cursor:pointer;
  font-family:var(--ff-d);font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  transition:transform .12s var(--ease),background .15s,border-color .15s;
  text-decoration:none;
}
.b svg{width:17px;height:17px;fill:currentColor;flex:none}
.b:active{transform:translateY(1px)}
.b:disabled{opacity:.45;cursor:default}
.b-p{background:var(--brand);color:#fff}
.b-p:hover{background:#00507e}
.b-a{background:var(--cyan);color:#04283f}
.b-a:hover{background:#00a6d1}
.b-g{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.b-g:hover{border-color:var(--brand);color:var(--brand)}
.b-good{background:var(--good);color:#fff}
.b-wa{background:#E4F7EA;color:#1a6b36;border:1.5px solid #B7E3C6}
.b-wa svg{fill:#1E9E45}
.b-danger{background:var(--bad-lt);color:#8C1D18;border:1.5px solid var(--bad-bd)}
.b-wide{width:100%}
.b-sm{min-height:40px;padding:0 13px;font-size:.9rem}
.brow{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.brow2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}

/* ============================ CARDS ============================ */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:15px;box-shadow:var(--shadow-s);
}
.card + .card{margin-top:10px}
.card-t{font-family:var(--ff-d);font-weight:700;font-size:1.04rem;letter-spacing:-.01em;margin-bottom:4px}
.card-p{font-size:.89rem;color:var(--muted);line-height:1.45}
.card-kraft{background:var(--kraft-lt);border-color:var(--kraft-md)}
.card-kraft .card-p{color:var(--kraft-tx)}
.card-warn{background:var(--warn-lt);border-color:var(--warn-bd)}
.card-warn .card-p{color:#6C4300}
.card-good{background:var(--good-lt);border-color:var(--good-bd)}
.card-good .card-p{color:#215C3B}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stats.c3{grid-template-columns:repeat(3,1fr)}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:12px 13px;box-shadow:var(--shadow-s)}
.stat-v{font-family:var(--ff-d);font-weight:700;font-size:1.5rem;letter-spacing:-.025em;line-height:1.05}
.stat-l{font-size:.78rem;color:var(--muted);margin-top:2px;line-height:1.3}
.stat-good .stat-v{color:var(--good)}
.stat-bad .stat-v{color:var(--bad)}
.stat-brand .stat-v{color:var(--brand)}

.empty{text-align:center;padding:30px 18px;background:#fff;border:1px dashed var(--line);border-radius:var(--r-l)}
.empty-t{font-family:var(--ff-d);font-weight:700;font-size:1.06rem;margin-bottom:5px}
.empty-p{font-size:.9rem;color:var(--muted);max-width:34ch;margin:0 auto 14px}

/* ============================ SHEET ============================ */
.sh-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sh-scrim{position:absolute;inset:0;background:rgba(7,34,53,.46);opacity:0;transition:opacity .26s}
.sh-wrap.on .sh-scrim{opacity:1}
.sh-panel{
  position:relative;width:100%;max-width:520px;
  max-height:88dvh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-l);
  transform:translateY(100%);transition:transform .3s var(--ease-io);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.sh-wrap.on .sh-panel{transform:none}
.sh-grab{width:38px;height:4px;border-radius:3px;background:var(--line);margin:9px auto 0;flex:none}
.sh-head{display:flex;align-items:center;gap:10px;padding:10px var(--pad) 8px;flex:none}
.sh-title{font-size:1.16rem;flex:1;min-width:0}
.sh-x{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--mist);border:0;border-radius:11px;cursor:pointer}
.sh-x svg{width:18px;height:18px;fill:var(--ink)}
.sh-body{padding:2px var(--pad) 22px;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* a sheet opened from a sheet: the parent waits underneath rather than dying */
.sh-wrap.under{pointer-events:none}
.sh-wrap.under .sh-panel{transform:translateY(14px) scale(.97);opacity:.55}
.sh-wrap.under .sh-scrim{opacity:0}
.sh-wrap.tall .sh-panel{max-height:94dvh}
@media(prefers-reduced-motion:reduce){
  .sh-panel,.sh-scrim{transition:none}
  .sh-panel{transform:none}
  .sh-wrap.under .sh-panel{transform:none}
}

/* ============================ BOTTOM NAV ============================ */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -4px 20px rgba(7,34,53,.09);
}
.nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav);background:#fff;color:var(--muted);text-decoration:none;
  font-size:.72rem;font-weight:600;position:relative;
}
.nav a svg{width:21px;height:21px;fill:var(--muted)}
.nav a[aria-current="page"]{color:var(--brand);background:var(--mist)}
.nav a[aria-current="page"] svg{fill:var(--brand)}
.nav .badge{
  position:absolute;top:8px;left:calc(50% + 7px);
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--cyan);color:#04283f;
  font-size:.66rem;font-weight:700;line-height:17px;text-align:center;
}

/* ============================ TOAST + UNDO ============================ */
#toast{
  position:fixed;left:50%;bottom:calc(var(--nav) + 14px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,14px);z-index:80;
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:999px;
  padding:11px 8px 11px 18px;font-size:.88rem;font-weight:500;
  box-shadow:var(--shadow-l);opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s var(--ease);
  max-width:calc(100vw - 28px);
}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-a{
  background:rgba(255,255,255,.14);border:0;border-radius:999px;
  color:var(--cyan);font-family:var(--ff-d);font-weight:700;font-size:.86rem;
  padding:7px 14px;cursor:pointer;flex:none;
}
.undorow{
  display:flex;align-items:center;gap:10px;
  background:var(--mist);border:1px solid var(--line);border-radius:var(--r-m);
  padding:9px 10px 9px 13px;font-size:.86rem;color:var(--muted);
}
.undorow-t{flex:1;min-width:0}
.undorow-b{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  min-height:38px;padding:0 13px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;color:var(--brand);font-family:var(--ff-d);font-weight:700;font-size:.86rem;cursor:pointer;
}
.undorow-b svg{width:15px;height:15px;fill:var(--brand)}

/* ============================ FORMS ============================ */
label.f{display:block;margin-bottom:13px}
label.f > span{display:block;font-family:var(--ff-d);font-weight:700;font-size:.92rem;margin-bottom:6px}
input[type=text],input[type=tel],input[type=number],select,textarea{
  width:100%;min-height:48px;padding:12px 13px;
  border:1.5px solid var(--line);border-radius:var(--r-s);
  font:400 1rem/1.4 var(--ff-b);color:var(--ink);background:#fff;
}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,182,227,.26)}
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill span{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;
  background:#fff;font-weight:600;font-size:.92rem;
}
.pill input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.pill input:focus-visible + span{outline:3px solid var(--cyan);outline-offset:2px}

/* the day picker used everywhere something needs a day */
.daypick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:4px 0 6px}
.dp{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-height:64px;justify-content:center;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-s);cursor:pointer;
}
.dp:hover{border-color:var(--brand)}
.dp-d{font-family:var(--ff-d);font-weight:700;font-size:.9rem}
.dp-n{font-size:.72rem;color:var(--muted)}
.dp-c{font-size:.66rem;color:var(--brand);font-weight:600}

/* ============================ MESSAGE PREVIEW ============================ */
.msgprev{
  background:var(--mist);border:1px solid var(--line);border-left:none;
  border-radius:var(--r-m);padding:14px 15px;font-size:.95rem;line-height:1.5;
}
.demoline{
  display:flex;align-items:center;gap:7px;margin-top:10px;
  font-size:.8rem;color:var(--kraft-tx);
}
.demoline svg{width:14px;height:14px;fill:var(--kraft);flex:none}

/* ============================ MENU ============================ */
.menu{display:flex;flex-direction:column;gap:2px}
.menu button{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:8px 10px;
  background:none;border:0;border-radius:var(--r-s);
  text-align:left;cursor:pointer;font-size:.98rem;font-weight:500;width:100%;
}
.menu button:hover{background:var(--mist)}
.menu button svg{width:19px;height:19px;fill:var(--brand);flex:none}
.menu button i{display:block;font-style:normal;font-size:.78rem;color:var(--muted);font-weight:400}
.menu hr{border:0;border-top:1px solid var(--line);margin:7px 0}

/* ============================ DESKTOP ============================ */
/* The same column, centred, with a little air. Never a second app. */
@media(min-width:860px){
  :root{--pad:20px}
  body{background:var(--mist);padding-bottom:0}
  .shellwrap{
    max-width:560px;margin:0 auto;min-height:100dvh;
    background:var(--mist);
    box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(7,34,53,.13);
  }
  .nav{
    position:sticky;max-width:560px;margin:0 auto;
    left:auto;right:auto;
  }
  body{padding-bottom:0}
}

/* ============================ FOOTER ============================ */
.offoot{
  padding:22px var(--pad) 26px;text-align:center;
  font-size:.78rem;color:var(--muted);line-height:1.6;
}
.offoot a{color:var(--brand)}