/* Pack n Hike — same look as the prototype: one working column, trail-marker orange as the only accent. */
:root{
  --bg:#f3f4f1; --surface:#fcfcfb; --sunken:#eaece7; --ink:#17201c; --ink-2:#4c5650; --muted:#7f8781; --line:#dcdfd9; --line-2:#c9cdc6;
  --accent:#e2560b; --accent-ink:#ffffff; --accent-soft:#fbe3d4; --good:#0a8a0a; --bad:#c43535;
  --c-blue:#2a78d6; --c-orange:#eb6834; --c-aqua:#1baf7a; --c-yellow:#eda100; --c-magenta:#e87ba4; --c-green:#008300; --c-violet:#4a3aa7; --c-red:#e34948; --c-slate:#8a877e; --c-sky:#3bb4e8; --c-teal:#14b5b0; --c-lime:#8cc63e; --c-sand:#d9a86c;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:6px; --shadow:0 1px 2px rgb(20 30 25 / .06),0 4px 16px rgb(20 30 25 / .06);
  --logo-ink:#1F3530;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111513; --surface:#191d1b; --sunken:#202522; --ink:#eef1ed; --ink-2:#bec5bf; --muted:#8b928c; --line:#2b312d; --line-2:#3a413c;
  --accent:#f26a1f; --accent-ink:#140a04; --accent-soft:#3a2214; --good:#3fbf3f; --bad:#e66767;
  --c-blue:#3987e5; --c-orange:#d95926; --c-aqua:#199e70; --c-yellow:#c98500; --c-magenta:#d55181; --c-green:#1f9a1f; --c-violet:#9085e9; --c-red:#e66767; --c-slate:#9b988f; --c-sky:#4cc0ee; --c-teal:#1fb3ad; --c-lime:#94c84a; --c-sand:#c99a60;
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 6px 20px rgb(0 0 0 / .3); --logo-ink:#e3e9e5; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111513; --surface:#191d1b; --sunken:#202522; --ink:#eef1ed; --ink-2:#bec5bf; --muted:#8b928c; --line:#2b312d; --line-2:#3a413c;
  --accent:#f26a1f; --accent-ink:#140a04; --accent-soft:#3a2214; --good:#3fbf3f; --bad:#e66767;
  --c-blue:#3987e5; --c-orange:#d95926; --c-aqua:#199e70; --c-yellow:#c98500; --c-magenta:#d55181; --c-green:#1f9a1f; --c-violet:#9085e9; --c-red:#e66767; --c-slate:#9b988f; --c-sky:#4cc0ee; --c-teal:#1fb3ad; --c-lime:#94c84a; --c-sand:#c99a60;
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 6px 20px rgb(0 0 0 / .3); --logo-ink:#e3e9e5; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;margin:0;text-wrap:balance}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:1080px;margin:0 auto;padding-inline:16px;display:flex;align-items:center;gap:16px;min-height:56px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.marker{width:50px;height:22px;display:block;flex:none;overflow:visible}
.brand span{color:var(--logo-ink)}
.tabs{display:flex;gap:2px;margin-right:auto}
.tab{padding:8px 12px;font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-radius:var(--r)}
.tab:hover{background:var(--sunken)}
.tab[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent);border-radius:0}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.who form{margin:0}
@media (max-width:600px){
  .top-in{gap:8px}
  .brand span{display:none}
  .tab{padding:8px 9px}
  .who .name{display:none}
}

main{max-width:1080px;margin:0 auto;padding:20px 16px 40px}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);padding:7px 12px;border-radius:var(--r);font-weight:500;font-size:14px;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--sunken)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:4px 9px;font-size:13px}
.btn svg{width:14px;height:14px;flex:none}
.icon-btn{border:0;background:none;width:32px;height:32px;border-radius:var(--r);display:inline-grid;place-items:center;color:var(--muted);flex:none}
.icon-btn:hover{background:var(--sunken);color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);padding:7px 10px;min-width:0;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1 1 220px;width:auto}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:6px 11px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer}
.seg label+input+label{border-left:1px solid var(--line-2)}
.seg input:checked+label{background:var(--ink);color:var(--surface)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:-2px}
.check-label{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:var(--ink-2)}
.check-label input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.eyebrow{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:22px}
.pagehead h1{font-size:34px;line-height:1}
.pagehead .eyebrow{margin-bottom:4px}
.pagehead h1 + .sub{margin-top:8px}
.pagehead .sub + .sub{margin-top:4px}
.sub{color:var(--ink-2);font-size:14px}
.hint{font-size:13px;color:var(--muted)}
.empty{padding:28px 16px;text-align:center;color:var(--ink-2)}

/* group blocks */
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
.ghead{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--line)}
.swatch{width:12px;height:12px;border-radius:2px;flex:none;background:var(--c-slate)}
.ghead h2{font-size:20px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcount{color:var(--muted);font-size:13px;white-space:nowrap}
.gbody:empty::before{content:"No items";display:block;padding:10px 12px;color:var(--muted);font-size:13px}
.gfoot{padding:6px 8px;border-top:1px solid var(--line)}

.row{display:grid;grid-template-columns:22px minmax(0,1fr) auto 5.5em;gap:4px 10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.gbody .row:last-child{border-bottom:0}
.row{cursor:pointer}
.row-link{text-decoration:none}
.row:hover{background:color-mix(in srgb,var(--sunken) 55%,transparent)}
.handle{cursor:grab;color:var(--muted);display:grid;place-items:center;touch-action:none;width:22px;height:28px}
.handle svg{width:14px;height:14px}
.sortable-off .handle{visibility:hidden}
.iname{font-weight:500;overflow-wrap:anywhere}
.imeta{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.idesc{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:3px;background:var(--sunken);color:var(--ink-2);vertical-align:1px;white-space:nowrap}
.chip.wish{background:var(--accent-soft);color:var(--accent)}
.chip.warn{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.wt{text-align:right;justify-self:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.wt b{font-weight:600}
.qty{color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right}
.archived .iname{color:var(--muted);text-decoration:line-through}
.sortable-ghost{opacity:.35;background:var(--accent-soft)}
.sortable-drag{box-shadow:var(--shadow)}
@media (max-width:600px){
  .row{grid-template-columns:22px minmax(0,1fr) 4.6em;padding:8px 10px 8px 6px}
  .row .qty{display:none}
}

/* dialog (forms) */
dialog.modal{border:0;padding:0;background:var(--surface);color:var(--ink);border-radius:8px;box-shadow:var(--shadow);width:calc(100% - 32px);max-width:620px;max-height:calc(100dvh - 32px)}
dialog.modal::backdrop{background:rgb(10 15 12 / .45)}
#modal-body{outline:none;padding:18px;display:flex;flex-direction:column;gap:14px}
#modal-body h2{font-size:26px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:500;color:var(--ink-2)}
.form .full{grid-column:1/-1}
.form .hint{font-weight:400;font-size:12px}
.form .inline{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-height:36px}
.form .inline input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.form textarea{resize:vertical;min-height:80px}
.form .err{color:var(--bad);font-size:12px;font-weight:500}
.form [aria-invalid="true"]{border-color:var(--bad)}
.mfoot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.mfoot .left{margin-right:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mfoot form{margin:0}
dialog .mfoot{position:sticky;bottom:0;background:var(--surface);margin:0 -18px -18px;padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.colours{display:flex;gap:6px;flex-wrap:wrap}
.colours input{position:absolute;opacity:0;pointer-events:none}
.colours label{width:30px;height:30px;border-radius:4px;border:2px solid transparent;cursor:pointer}
.colours input:checked+label{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--surface)}
.colours input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.form-page{max-width:620px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px}
@media (max-width:600px){ .form{grid-template-columns:minmax(0,1fr)} }

/* auth pages */
.auth{max-width:400px;margin:6vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:16px}
.auth h1{font-size:32px}
.auth .form{grid-template-columns:minmax(0,1fr)}
.auth .btn.primary{width:100%;padding:10px}
.alert{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border-radius:var(--r);padding:9px 12px;font-size:14px}

/* colours by name */
.c-blue{background:var(--c-blue)} .c-red{background:var(--c-red)} .c-yellow{background:var(--c-yellow)}
.c-aqua{background:var(--c-aqua)} .c-violet{background:var(--c-violet)} .c-magenta{background:var(--c-magenta)}
.c-green{background:var(--c-green)} .c-orange{background:var(--c-orange)} .c-slate{background:var(--c-slate)}
.c-sky{background:var(--c-sky)} .c-teal{background:var(--c-teal)} .c-lime{background:var(--c-lime)} .c-sand{background:var(--c-sand)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--surface);padding:9px 14px;border-radius:6px;font-size:14px;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.htmx-request.loading-dim{opacity:.6;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- trips ---------- */
.back{display:inline-block;font-size:14px;color:var(--ink-2);text-decoration:none;margin-bottom:6px}
.back:hover{color:var(--accent)}
.head-acts{display:flex;gap:8px;flex-wrap:wrap}
.trip-notes{margin-top:4px;max-width:60ch}
.notice{background:color-mix(in srgb,var(--c-yellow) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--c-yellow) 40%,transparent);border-radius:var(--r);padding:8px 12px;font-size:14px;margin:0 0 14px}
.list-hint{margin:4px 0 10px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.card h2{font-size:22px}
.card h2 a{text-decoration:none}
.card h2 a:hover{color:var(--accent)}
.card .figs{display:flex;gap:18px}
.card .figs div{display:flex;flex-direction:column}
.card .figs b{font-family:var(--f-display);font-size:24px;font-weight:700;line-height:1.1}
.card .acts{display:flex;gap:6px;margin-top:auto}
.minibar{display:flex;height:6px;gap:2px;border-radius:3px;overflow:hidden}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.stat{background:var(--surface);padding:12px 14px}
.stat .k{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--f-display);font-weight:700;font-size:32px;line-height:1.05}
.stat .v small{font-size:18px;font-weight:600;color:var(--ink-2);margin-left:2px}
.stat .n{font-size:12.5px;color:var(--ink-2)}
.stat.hero .v{color:var(--accent)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* charts */
.panels{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
@media (max-width:760px){.panels{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
.panel h3{font-size:18px;margin-bottom:10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 8px}
.panel h3 .eyebrow{font-size:12px}
.bar{display:flex;height:22px;gap:2px;margin-bottom:12px}
.bar span{min-width:2px}
.bar span:first-child{border-radius:4px 0 0 4px}.bar span:last-child{border-radius:0 4px 4px 0}
.bar span:only-child{border-radius:4px}
.bar span:hover,.tile:hover{filter:brightness(1.1)}
.legend{display:grid;grid-template-columns:12px minmax(0,1fr) auto 3.6em;gap:5px 10px;align-items:center;font-size:14px}
.legend .lname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .gw,.legend .pct{text-align:right}.legend .pct{color:var(--ink-2)}
.heavy{display:grid;grid-template-columns:minmax(0,1fr) 5em;gap:6px 10px;font-size:14px;align-items:center}
.heavy .hn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heavy .hw{text-align:right}
.heavy .hb{grid-column:1/-1;height:4px;border-radius:0 2px 2px 0;margin-top:-4px}
.treemap{position:relative;height:320px;border-radius:4px;overflow:hidden}
.tile{position:absolute;box-sizing:border-box;border:1px solid var(--surface);background:color-mix(in srgb,var(--tc) 28%,var(--surface));box-shadow:inset 3px 0 0 var(--tc);padding:4px 6px 4px 8px;overflow:hidden;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.2}
.tile b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile span{color:var(--ink-2);white-space:nowrap}
.bigfig{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.15;margin:0 0 8px}
.curve{display:block;width:100%;height:auto}
.curve .grid{stroke:var(--line);stroke-width:1}
.curve .axis{fill:var(--muted);font-size:12px;font-family:var(--f-body)}
.curve .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.curve .area{fill:var(--accent);opacity:.1}
.curve .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
@media (max-width:600px){.treemap{height:260px}.curve .axis{font-size:22px}}
.tooltip{position:fixed;z-index:80;pointer-events:none;background:var(--ink);color:var(--surface);font-size:13px;padding:5px 8px;border-radius:4px;white-space:nowrap;box-shadow:var(--shadow)}

/* switches (buttons, so they work without JavaScript) */
.switch-btn{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:left}
.switch-btn .track{position:relative;width:36px;height:20px;border-radius:999px;background:var(--line-2);flex:none;transition:background .15s}
.switch-btn .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s}
.switch-btn[aria-checked="true"] .track{background:var(--accent)}
.switch-btn[aria-checked="true"] .track::after{transform:translateX(16px)}
.ghead form,.trow form{margin:0;display:inline-flex}
.gtot{font-family:var(--f-display);font-weight:600;font-size:18px;white-space:nowrap;margin-right:4px}
.group.off .gbody{opacity:.45}
.group.off .gtot{text-decoration:line-through;color:var(--muted)}

/* trip rows */
.trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto 5.6em;grid-template-areas:"sw name ctl wt";gap:4px 10px;align-items:center;padding:7px 8px 7px 12px;border-bottom:1px solid var(--line)}
.gbody .trow:last-child{border-bottom:0}
.t-switch{grid-area:sw}.t-name{grid-area:name;min-width:0}.t-ctl{grid-area:ctl;display:flex;align-items:center;gap:6px}.trow .wt{grid-area:wt}
.t-name .iname,.t-name .imeta{display:block}
.trow.off .t-name,.trow.off .wt{opacity:.45}
.trow.off .iname{text-decoration:line-through}
.wt small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.stepper button{border:0;background:none;width:28px;height:28px;color:var(--ink-2);font-size:16px;line-height:1}
.stepper button:hover:not([disabled]){background:var(--sunken)}
.stepper button[disabled]{opacity:.35;cursor:default}
.stepper span{min-width:22px;text-align:center;font-size:14px}
.clsbtn{border:1px solid var(--line-2);background:none;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;color:var(--muted);min-width:96px}
.clsbtn.worn{color:var(--c-violet);border-color:currentColor}
.clsbtn.consumable{color:var(--ink);border-color:var(--c-yellow);background:color-mix(in srgb,var(--c-yellow) 14%,transparent)}
.clsbtn.overridden{border-style:dashed}
@media (max-width:600px){
  .trow{grid-template-columns:auto minmax(0,1fr) 5em;grid-template-areas:"sw name wt" ". ctl ctl";padding-left:10px}
  .t-ctl{justify-content:flex-start}
}

/* share panel */
.share{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.share-toggle{margin:0}
.share-link{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.share-link input{flex:1 1 260px;width:auto;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.share-link form{margin:0}
.share-note{margin:0}

/* add-gear picker */
.pick-search{margin-top:-4px}
.pick{display:flex;flex-direction:column;gap:12px}
.pick-group{border:0;padding:0;margin:0}
.pick-group legend{font-family:var(--f-display);font-weight:600;font-size:16px;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.pick-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.pick-row input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.pick-row .pn{min-width:0;font-weight:500}.pick-row .imeta{display:block;font-weight:400}
.pick-row.done{opacity:.55;cursor:default}
.pick-row:hover:not(.done){background:var(--sunken)}

/* public shared page */
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto 5.6em;gap:4px 10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.gbody .srow:last-child{border-bottom:0}
.srow .iname,.srow .imeta{display:block}
.charts-section{margin-top:22px}
.charts-section:empty{display:none}

/* plan / checklist switch */
.mode-tabs a{padding:6px 12px;font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center}
.mode-tabs a+a{border-left:1px solid var(--line-2)}
.mode-tabs a[aria-current="page"]{background:var(--ink);color:var(--surface)}

/* checklist */
.check-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px}
.check-progress{flex:1 1 220px}
.progress{height:8px;border-radius:4px;background:var(--sunken);overflow:hidden;margin-top:4px}
.progress span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .2s}
.all-packed{background:color-mix(in srgb,var(--good) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--good) 35%,transparent);color:var(--ink);border-radius:var(--r);padding:10px 12px;margin:0 0 14px;font-weight:500}
.crow-form{margin:0;border-bottom:1px solid var(--line)}
.gbody .crow-form:last-child{border-bottom:0}
.crow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:11px 12px;min-height:52px}
.crow:hover{background:color-mix(in srgb,var(--sunken) 55%,transparent)}
.cbox{width:22px;height:22px;border:2px solid var(--line-2);border-radius:5px;display:grid;place-items:center;background:var(--surface)}
.crow[aria-checked="true"] .cbox{background:var(--accent);border-color:var(--accent)}
.crow[aria-checked="true"] .cbox::after{content:"";width:6px;height:11px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.cname{min-width:0}.cname .iname,.cname .imeta{display:block}
.cqty{color:var(--ink-2);font-weight:600}
.crow-form.done .iname{text-decoration:line-through;color:var(--muted)}
.check-group.complete .ghead h2{color:var(--muted)}
.hide-done .crow-form.done,.hide-done .check-group.complete{display:none}

/* compare */
.compare-pick{gap:8px}
.pick-trip{display:inline-flex;align-items:center;gap:6px;flex:1 1 220px}
.pick-trip select{flex:1}
.tag{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;background:var(--ink);color:var(--surface);font-family:var(--f-display);font-weight:700;font-size:13px;flex:none;vertical-align:1px}
.verdict{font-size:17px;margin:0 0 14px;max-width:70ch}
.lighter{color:var(--good)}.heavier{color:var(--bad)}
.dv-axis,.dv-row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) minmax(0,1fr) 6em;gap:0 10px;align-items:center}
.dv-axis{font-size:12px;color:var(--muted);margin-bottom:4px}
.dv-axis span:nth-child(2){text-align:right;padding-right:6px}.dv-axis span:nth-child(3){padding-left:6px}
.dv-row{padding:4px 0;font-size:14px}
.dv-name{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dv-neg,.dv-pos{height:18px;display:flex}
.dv-neg{justify-content:flex-end;border-right:1px solid var(--ink-2)}
.dv-neg i{border-radius:4px 0 0 4px}.dv-pos i{border-radius:0 4px 4px 0}
.dv-neg i,.dv-pos i{display:block;height:100%}
.dv-val{text-align:right}
.table-wrap{overflow-x:auto;padding:0}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.cmp th:first-child{text-align:left;font-weight:500;white-space:normal;min-width:10em}
.cmp thead th{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink-2);vertical-align:bottom}
.cmp tr.sum th,.cmp tr.sum td{font-weight:700}
.cmp tr.meta td,.cmp tr.meta th{color:var(--ink-2)}
.cmp tr.sec td{background:var(--sunken);font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-align:left}
.cmp tr.sec .hint{text-transform:none;letter-spacing:0;font-family:var(--f-body);font-weight:400}
.cmp .swatch{display:inline-block;margin-right:8px;vertical-align:0}
.cmp .why{display:block;font-size:12px;color:var(--muted);font-weight:400}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
@media (max-width:600px){
  .dv-axis,.dv-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 5em;gap:2px 6px}
  .dv-axis span:first-child,.dv-axis span:last-child{display:none}
  .dv-name{grid-column:1/-1;font-size:13px}
  .cmp th,.cmp td{padding:7px 8px}
  .cmp th:first-child{min-width:8em}
}
.card .acts form{display:inline-flex}
.cmp .tshort{display:none}
@media (max-width:600px){
  .cmp .tname{display:none}
  .cmp .tshort{display:inline}
  .cmp th,.cmp td{padding:7px 6px;font-size:13px}
  .cmp th:first-child{min-width:0;padding-left:10px}
}

/* small dropdown menu (details/summary: works without JavaScript) */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"▾";font-size:11px;margin-left:2px;color:var(--muted)}
.menu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:220px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:4px}
.menu-list a{display:flex;flex-direction:column;padding:8px 10px;border-radius:4px;text-decoration:none;font-size:14px;font-weight:500}
.menu-list a:hover{background:var(--sunken)}
.menu-list .hint{font-weight:400;font-size:12px}
@media (max-width:600px){.menu-list{right:auto;left:0}}

/* display menu (theme + compact) */
.display-menu .menu-list{right:0;left:auto;min-width:230px;padding:10px;display:flex;flex-direction:column;gap:8px}
.display-menu summary::after{content:none}
.menu-label{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.theme-seg{display:flex}
.theme-seg label{flex:1;text-align:center}
.display-list .hint{margin-top:-4px}
.compact-toggle{font-size:14px;padding-top:6px;border-top:1px solid var(--line);margin-top:2px}
@media (max-width:600px){.display-menu .menu-list{right:-8px}}

/* compact view: one line per item, tighter spacing */
.compact .row{padding:4px 12px;gap:2px 10px}
.compact .row .idesc{display:none}
.compact .row .iname,.compact .t-name .iname,.compact .srow .iname{display:inline}
.compact .row .imeta,.compact .t-name .imeta,.compact .srow .imeta{display:inline;margin-left:6px;font-size:12px;color:var(--muted)}
.compact .handle{height:22px}
.compact .ghead{padding-top:5px;padding-bottom:5px}
.compact .ghead h2{font-size:17px}
.compact .group{margin-bottom:8px}
.compact .trow{padding-top:3px;padding-bottom:3px}
.compact .stepper button{height:24px;width:24px}
.compact .clsbtn{padding:2px 6px;min-width:84px}
.compact .icon-btn{height:26px;width:26px}
.compact .srow{padding-top:4px;padding-bottom:4px}
.compact .crow{min-height:40px;padding-top:6px;padding-bottom:6px}
.compact .crow .imeta{display:none}
.compact .wt small{display:inline;margin-left:4px}
.compact .stat{padding:8px 12px}
.compact .stat .v{font-size:26px}
.compact .stat .n{display:none}
.compact .list-hint{display:none}
.icon-btn-spacer{width:32px;flex:none}
.compact .icon-btn-spacer{width:26px}

/* add/remove gear picker */
.pick-row.on-trip{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.pick-row.removing{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pick-row.removing .pn{text-decoration:line-through;color:var(--muted)}
.chip.on-chip{background:var(--accent-soft);color:var(--accent)}
.pick-row .wt small{display:block;font-size:12px;font-weight:500}
.swap-row input{accent-color:var(--accent);width:18px;height:18px;margin:0}

/* import */
.import-form{display:flex;flex-direction:column;gap:16px;margin-bottom:14px;max-width:720px}
.file-pick{display:flex;flex-direction:column;gap:6px}
.file-pick input{font-size:14px}
.import-mode{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.import-mode legend{margin-bottom:6px}
.radio-card{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;cursor:pointer}
.radio-card input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--accent)}
.radio-card .hint{display:block;margin-top:2px}
.radio-card:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 40%,transparent)}
.confirm-replace{padding-left:2px}
.import-result{margin-bottom:14px;max-width:720px;border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.import-result ul,.import-help ul{margin:0 0 12px;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.import-help{max-width:720px}
.import-help ul{margin:0}

/* phone header: brand mark, three tabs, display button and log out must fit in 360px */
@media (max-width:600px){
  .top-in{gap:4px;padding-inline:12px}
  .tabs{gap:0}
  .tab{padding:8px 7px;font-size:16px;letter-spacing:.02em}
  .who{gap:0}
  .who .btn.sm{padding:4px 6px}
}
@media (max-width:374px){
  .tab{padding:8px 5px;font-size:15px}
  .marker{width:18px;height:17px}
}
.wt small.lighter{color:var(--good)}
.wt small.heavier{color:var(--bad)}

/* ---------- one-line view (html.dense, always together with .compact) ---------- */
.col-brand,.col-type,.col-heads{display:none}
.dense .col-brand,.dense .col-type{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink-2)}
.dense .row .imeta,.dense .t-name .imeta,.dense .srow .imeta{display:none}
.dense .iname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dense .iname .chip{font-size:10px;padding:0 4px}
.dense .row{grid-template-columns:22px minmax(0,1fr) minmax(0,9rem) minmax(0,10rem) 3rem 5.5rem;padding-top:3px;padding-bottom:3px}
.dense .row > span:nth-child(2){min-width:0;overflow:hidden}
.dense .trow{grid-template-columns:auto minmax(0,1fr) minmax(0,8rem) minmax(0,9rem) auto 5.6rem;grid-template-areas:"sw name brand type ctl wt";padding-top:2px;padding-bottom:2px}
.dense .trow .col-brand{grid-area:brand}.dense .trow .col-type{grid-area:type}
.dense .trow .switch-btn .track{width:30px;height:16px}
.dense .trow .switch-btn .track::after{width:12px;height:12px}
.dense .trow .switch-btn[aria-checked="true"] .track::after{transform:translateX(14px)}
.dense .wt small{display:none}
.dense .srow{grid-template-columns:minmax(0,1fr) minmax(0,9rem) minmax(0,10rem) 3rem 5.6rem;padding-top:3px;padding-bottom:3px}
/* column headings at the top of each group */
.dense .col-heads{display:grid;gap:0 10px;padding:3px 12px;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.06rem;text-transform:uppercase;color:var(--muted)}
.dense .col-heads span:nth-last-child(-n+2){text-align:right}
.dense .col-heads{grid-template-columns:22px minmax(0,1fr) minmax(0,9rem) minmax(0,10rem) 3rem 5.5rem}
.dense .trip-heads{grid-template-columns:auto minmax(0,1fr) minmax(0,8rem) minmax(0,9rem) auto 5.6rem;padding-left:12px;padding-right:8px}
.dense .trip-heads span:first-child{width:30px}
.dense .trip-heads span:nth-child(5){width:var(--ctl-w,0)}
.dense .share-heads{grid-template-columns:minmax(0,1fr) minmax(0,9rem) minmax(0,10rem) 3rem 5.6rem}
.dense .group.off .col-heads{opacity:.45}
/* phones: no room for columns, so one line means name and weight only */
@media (max-width:760px){
  .dense .col-brand,.dense .col-type,.dense .col-heads{display:none}
  .dense .row{grid-template-columns:22px minmax(0,1fr) 3rem 5rem}
  .dense .srow{grid-template-columns:minmax(0,1fr) 3rem 5rem}
  .dense .trow{grid-template-columns:auto minmax(0,1fr) auto 4.8rem;grid-template-areas:"sw name ctl wt";gap:2px 6px}
  .dense .t-ctl{gap:2px}
  .dense .t-ctl .clsbtn{min-width:0;width:26px;overflow:hidden;color:transparent;position:relative;padding:2px 0}
  .dense .t-ctl .clsbtn::after{content:attr(data-short);position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
  .dense .t-ctl .clsbtn.worn::after{color:var(--c-violet)}
  .dense .t-ctl .clsbtn.consumable::after{color:var(--ink)}
  .dense .stepper button{width:22px}
  .dense .stepper span{min-width:16px}
  .dense .icon-btn,.dense .icon-btn-spacer{width:24px}
}
@media (min-width:761px){
  .dense{--ctl-w:232px}
  .dense .t-ctl{width:var(--ctl-w);justify-content:flex-end}
}

/* account menu in the top bar */
.user-menu{margin-left:auto}
.user-menu summary{list-style:none}
.user-menu summary::after{content:none}
.user-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r);color:var(--ink-2);font-size:14px;cursor:pointer}
.user-btn:hover{background:var(--sunken);color:var(--ink)}
.user-btn svg{width:18px;height:18px;flex:none}
.user-menu .menu-list{right:0;left:auto;min-width:250px}
.menu-link{display:flex;flex-direction:column;padding:6px 8px;margin:-4px -4px 2px;border-radius:4px;text-decoration:none;font-size:14px;font-weight:600;border-bottom:1px solid var(--line)}
.menu-link:hover{background:var(--sunken)}
.menu-link .hint{font-weight:400;font-size:12px}
.menu-logout{margin:4px 0 0;padding-top:8px;border-top:1px solid var(--line)}
.menu-logout .btn{width:100%}
@media (max-width:600px){.user-btn .name{display:none}.user-menu .menu-list{right:-8px}}

/* account page */
.account{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:760px){.account{grid-template-columns:minmax(0,1fr)}}
.form.one{grid-template-columns:minmax(0,1fr)}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.acct-row:last-child{border-bottom:0}
.acct-row .hint{display:block}
.acct-row form{margin:0}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.danger-zone details summary{list-style:none;display:inline-flex}
.danger-zone details summary::-webkit-details-marker{display:none}
.btn.danger-solid{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600}
.notice.ok{background:color-mix(in srgb,var(--good) 12%,var(--surface));border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.mfoot .hint.left{margin-right:auto}
.dense .row .imeta,.dense .row .idesc{display:none!important}
.dense .t-name{overflow:hidden}
.dense .t-name .iname,.dense .srow .iname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){
  .dense .stepper{border:0}
  .dense .stepper button{display:none}
  .dense .stepper span{min-width:0;font-size:13px;color:var(--ink-2)}
  .dense .stepper span::before{content:"×"}
  .dense .t-ctl a.icon-btn,.dense .t-ctl .icon-btn-spacer{display:none}
}

/* trip item: tap the name to open the item sheet */
.t-name{cursor:pointer;position:relative;border-radius:4px}
.t-name:hover .iname{color:var(--accent)}
.t-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.t-more{display:none;width:14px;height:14px;color:var(--muted);position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media (max-width:760px){
  .t-name{padding-right:16px}
  .t-more{display:block}
}
/* item sheet */
.line-sheet{display:flex;flex-direction:column;gap:16px}
.sheet-row{display:flex;flex-direction:column;gap:6px}
.big-stepper{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;width:max-content}
.big-stepper button{border:0;background:var(--sunken);width:52px;height:48px;font-size:24px;line-height:1;color:var(--ink)}
.big-stepper button:active{background:var(--line-2)}
.big-stepper input{width:80px;border:0;border-radius:0;text-align:center;font-size:20px;font-weight:600;-moz-appearance:textfield}
.big-stepper input::-webkit-inner-spin-button,.big-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.class-seg{display:flex;max-width:420px}
.class-seg label{flex:1;text-align:center;padding:10px 8px;font-size:14px}
.sheet-switch{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:15px}
.sheet-switch .hint{display:block;font-weight:400}
.sheet-switch input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin:0}
.sheet-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:10px;font-size:15px}
.sheet-total b{font-family:var(--f-display);font-size:24px}
.t-name,.row,.crow{-webkit-tap-highlight-color:transparent}

/* phones: trip rows are just switch, name and weight; everything else is in the item sheet */
.phone-only{display:none}
@media (max-width:760px){
  .phone-only{display:inline-block}
  .wt small.phone-only{display:block}
  .trow,.dense .trow{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sw name wt";gap:2px 10px;padding:8px 8px 8px 10px}
  .compact .trow{padding-top:5px;padding-bottom:5px}
  .dense .trow{padding-top:3px;padding-bottom:3px}
  .trow .t-ctl,.trow .col-brand,.trow .col-type{display:none!important}
  .trow .wt{min-width:4.5em}
  .chip.cls-worn{background:color-mix(in srgb,var(--c-violet) 16%,transparent);color:var(--c-violet)}
  .chip.cls-consumable{background:color-mix(in srgb,var(--c-yellow) 22%,transparent);color:var(--ink)}
}

/* ---------- account menu ---------- */
.user-menu{margin-left:auto;position:relative}
.user-btn{display:inline-flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:999px;border:1px solid transparent;color:var(--ink-2);font-size:14px;font-weight:500;cursor:pointer;list-style:none}
.user-btn::-webkit-details-marker{display:none}
.user-btn:hover,.user-menu[open] .user-btn{background:var(--sunken);border-color:var(--line)}
.user-btn .chev{width:14px;height:14px;color:var(--muted);transition:transform .15s}
.user-menu[open] .user-btn .chev{transform:rotate(180deg)}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.02em;flex:none}
.avatar.lg{width:40px;height:40px;font-size:17px}

.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:300px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 4px rgb(0 0 0 / .06),0 12px 32px rgb(0 0 0 / .14);padding:6px;display:flex;flex-direction:column}
.acct-head{display:flex;align-items:center;gap:12px;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.who-text{display:flex;flex-direction:column;min-width:0}
.who-text b{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-text span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.acct-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;text-align:left;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}
.acct-item:hover,.acct-item:focus-visible{background:var(--sunken);outline:none}
.acct-item > svg{width:18px;height:18px;color:var(--ink-2);flex:none}
.acct-item > span{flex:1;display:flex;flex-direction:column;min-width:0}
.acct-item small{font-size:12px;font-weight:400;color:var(--muted)}
.acct-item .go{width:14px;height:14px;color:var(--muted)}

.acct-section{padding:10px 10px 4px;border-top:1px solid var(--line);margin-top:6px}
.acct-section + .acct-section{border-top:0;margin-top:0;padding-top:6px}
.acct-label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.pill-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;background:var(--sunken);border-radius:9px}
.pill-seg input{position:absolute;opacity:0;pointer-events:none}
.pill-seg label{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border-radius:7px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.pill-seg label svg{width:14px;height:14px;flex:none}
.pill-seg label:hover{color:var(--ink)}
.pill-seg input:checked + label{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12),0 0 0 1px var(--line)}
.pill-seg input:focus-visible + label{outline:2px solid var(--accent);outline-offset:1px}

.acct-logout{margin:8px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.acct-logout .acct-item{color:var(--ink-2)}
.acct-logout .acct-item:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.acct-logout .acct-item:hover svg{color:var(--bad)}

@media (max-width:600px){
  .user-btn{padding:3px;gap:0}
  .user-btn .name,.user-btn .chev{display:none}
  .acct-menu{right:-4px}
}
/* phones, one line: the qty column is hidden on the gear list, so don't leave a gap for it */
@media (max-width:600px){
  .dense .row{grid-template-columns:22px minmax(0,1fr) 5.5rem}
  .dense .row .wt{justify-self:end}
}

/* ---------- trips (and shared trips): Compact = two tight lines like Gear; One line = name · brand · type ---------- */
.compact .t-name .iname,.compact .srow .iname{display:block}
.compact .t-name .imeta,.compact .srow .imeta{display:block;margin-left:0}
.compact .trow{padding-top:4px;padding-bottom:4px}

.dense .t-name,.dense .srow > div:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dense .t-name .iname,.dense .srow .iname{display:inline;overflow:visible}
.dense .t-name .imeta,.dense .srow .imeta{display:inline;margin-left:6px;font-size:12px;color:var(--muted)}
.dense .trow .col-brand,.dense .trow .col-type,.dense .trip-heads,
.dense .srow .col-brand,.dense .srow .col-type,.dense .share-heads{display:none!important}
.dense .trow{grid-template-columns:auto minmax(0,1fr) auto 5.6rem;grid-template-areas:"sw name ctl wt";padding-top:3px;padding-bottom:3px}
.dense .srow{grid-template-columns:minmax(0,1fr) 3rem 5.6rem}
@media (min-width:761px){ .dense .t-ctl{width:auto} }
@media (max-width:760px){
  .dense .trow{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sw name wt"}
  .dense .srow{grid-template-columns:minmax(0,1fr) 3rem 5rem}
}
@media (max-width:760px){ .dense .wt small,.dense .wt small.phone-only{display:none} }
@media (min-width:761px){ .phone-only{display:none!important} }

/* Option B on phones: a count badge before the weight, small class tags, nothing under the weight */
.qty-badge{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--sunken);border-radius:999px;padding:1px 8px;line-height:1.4}
@media (max-width:760px){
  .trow .wt{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
  .trow .wt b{min-width:3.4em;text-align:right}
  .trow .wt small,.trow .wt small.desktop-only{display:none!important}
  .trow .qty-badge.phone-only{display:inline-block}
  .t-name{padding-right:0}
  .t-name .chip.phone-only{font-size:10px;padding:1px 5px;letter-spacing:.04em;vertical-align:1px}
}
@media (min-width:761px){ .compact .trow .wt small{display:block;margin-left:0} .dense .trow .wt small{display:none} }

/* phones, one line: drop the brand (type stays) */
@media (max-width:760px){ .dense .m-brand{display:none} }

/* phones: bigger, better-spaced header tabs (full bar height, 48px targets) */
@media (max-width:600px){
  .top-in{min-height:52px;gap:6px}
  .tabs{gap:2px;align-self:stretch}
  .tab{display:flex;align-items:center;min-height:52px;padding:0 11px;font-size:17px;letter-spacing:.03em}
  .tab[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent)}
  .tab:active{background:var(--sunken)}
  .user-btn{padding:6px}
  .avatar{width:34px;height:34px}
}
@media (max-width:374px){
  .tab{padding:0 7px;font-size:16px}
}

/* trip page: one More menu for edit, duplicate, export, delete */
.head-acts{position:relative;align-items:center}
.trip-menu{position:static}
.trip-menu summary{list-style:none}
.trip-menu summary::-webkit-details-marker{display:none}
.trip-menu summary::after{content:none}
.more-btn svg{width:16px;height:16px}
.trip-menu[open] .more-btn{background:var(--sunken);border-color:var(--ink)}
.trip-menu-panel{right:0;top:calc(100% + 6px);width:270px}
.menu-form{margin:0}
.menu-sep{height:1px;background:var(--line);margin:6px 4px}
.menu-group{padding:2px 10px 0;margin:0}
.acct-item.danger-item{color:var(--bad)}
.acct-item.danger-item > svg{color:var(--bad)}
.acct-item.danger-item:hover{background:color-mix(in srgb,var(--bad) 8%,transparent)}
@media (max-width:600px){
  .pagehead .head-acts{width:100%;flex-wrap:nowrap}
  .head-acts .mode-tabs{margin-right:auto}
  .head-acts .btn,.head-acts .mode-tabs{min-height:44px}
  .head-acts .mode-tabs a{padding:0 14px}
  .more-btn{width:44px;padding:0}
  .more-btn .more-label{display:none}
  .more-btn svg{width:20px;height:20px}
}

/* footer */
@media print{.site-foot{display:none}}

/* admin */
.admin-table .cmp td,.admin-table .cmp tbody th{vertical-align:top}
.admin-table .why{white-space:nowrap}
.admin-table .cmp th[scope=row]{min-width:12em}
.admin-table .u-name{font-weight:600}
.admin-table .u-name .chip{vertical-align:1px}
.sort-link{color:inherit;text-decoration:none;white-space:nowrap}
.sort-link:hover{color:var(--accent)}
.sort-link.on{color:var(--ink)}
.admin-table .muted{color:var(--muted)}
@media (max-width:760px){
  .admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-table .cmp th[scope=row]{position:sticky;left:0;background:var(--surface);z-index:1;min-width:9.5em;max-width:11em;box-shadow:1px 0 0 var(--line)}
  .admin-table .cmp thead th:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
  .admin-table th[scope=row] .why{overflow:hidden;text-overflow:ellipsis;max-width:9.5em}
}
.invite-panel{margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.invite-panel .sub{margin:0}
.invite-head{display:flex;align-items:center;gap:10px}
.invite-head h3{margin:0}
.chip.ok-chip{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.invite-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin:0}
.invite-field{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;max-width:340px}
.invite-acts{display:flex;flex-wrap:wrap;gap:8px}
.invite-link{max-width:620px}
.invite-panel .hint{margin:-4px 0 0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.invite-form{flex-direction:column;align-items:stretch}
.mode-pick{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mode-pick legend{padding:0;margin-bottom:6px}
.mode-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--surface)}
.mode-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.mode-opt input{accent-color:var(--accent);margin:3px 0 0;width:16px;height:16px;flex:none}
.mode-opt b{display:block;font-weight:600}
.mode-opt small{display:block;font-size:12.5px;color:var(--ink-2)}
.invite-field .hint{font-size:12.5px}
@media (max-width:600px){ .mode-pick{grid-template-columns:1fr} .invite-field{max-width:none} }
.invite-form .invite-field{flex:none}

/* One line on phones: type after the name on Gear (as on Trips); account menu can hide it */
@media (max-width:760px){
  html.dense .row > span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.dense .row .iname{display:inline!important}
  html.dense .row .imeta{display:inline!important;margin-left:6px;font-size:12px;color:var(--muted)}
  html.dense.no-phone-type .row .imeta,
  html.dense.no-phone-type .t-name .imeta,
  html.dense.no-phone-type .srow .imeta{display:none!important}
}
.acct-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px 6px;cursor:pointer;font-size:14px;font-weight:500}
.acct-toggle small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.acct-toggle input{accent-color:var(--accent);width:20px;height:20px;margin:0;flex:none}
@media (min-width:761px){ .acct-toggle.phone-only{display:none!important} }

/* logo on the login, sign-up and link-gone pages */
.auth-logo{max-width:400px;margin:5vh auto 0;display:flex;justify-content:center}
.auth-logo svg{width:220px;height:auto;display:block}
.auth-logo + .auth{margin-top:20px}
@media (max-width:600px){ .marker{width:42px;height:19px} .auth-logo svg{width:180px} }
body:has(.auth-logo) header.top{display:none}
@media (max-width:600px){ body.public .brand span{display:inline} }

/* footer: ringed planet between two lines, hand-lettered name (as on oberto.co.nz) */
.site-foot{max-width:1080px;margin:0 auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--muted)}
.foot-mark{display:flex;align-items:center;justify-content:center;gap:16px}
.foot-mark::before,.foot-mark::after{content:"";width:160px;height:1px;background:var(--line-2)}
@media (max-width:600px){ .foot-mark::before,.foot-mark::after{width:96px} }
.foot-mark svg{width:60px;height:30px;display:block}
.foot-name{margin:6px 0 0;font-family:"Patrick Hand","Comic Sans MS",var(--f-body);font-size:15px;letter-spacing:.35em;padding-left:.35em}
.foot-ver{margin:2px 0 0;font-size:11.5px;letter-spacing:.04em;opacity:.85}
.db-notice{display:flex;gap:12px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.db-notice .hint{display:block;font-size:13px}
.db-notice ul{margin:6px 0 0;padding-left:18px;font-size:13.5px}
.db-notice form{margin:0}

/* ---------- admin tabs ---------- */
.admin-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs a{flex:none;padding:10px 12px;font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.admin-tabs a:hover{color:var(--ink)}
.admin-tabs a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.sec-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.tbl-title{padding:12px 12px 0;margin:0}

/* users: actions */
.acts-col{text-align:right!important;white-space:nowrap}
.u-acts{display:flex;gap:6px;justify-content:flex-end;align-items:flex-start}
.u-acts form{margin:0}
.del-user summary{list-style:none;cursor:pointer}
.del-user summary::-webkit-details-marker{display:none}
.del-user[open] summary{background:var(--sunken)}
.del-user form{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:10px;border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line));border-radius:var(--r);background:var(--surface);white-space:normal;text-align:left;width:240px;font-size:12.5px;color:var(--ink-2)}
.del-user input{width:100%;margin-top:4px}
.admin-table tr.is-suspended th,.admin-table tr.is-suspended td:not(.acts-col){opacity:.6}

/* activity feed */
.feed{padding:4px 16px 12px}
.feed-day{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.feed-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line)}
.feed-row:last-child{border-bottom:0}
.feed-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);align-self:center}
.ev-join .feed-dot{background:var(--good)}.ev-gear .feed-dot{background:var(--c-blue)}.ev-trip .feed-dot{background:var(--accent)}
.ev-share .feed-dot{background:var(--c-violet)}.ev-admin .feed-dot{background:var(--bad)}
.feed-time{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* gear stats */
.board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.board h3{margin-bottom:6px}
.board-list{list-style:none;margin:0;padding:0}
.board-list li{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.board-list li:last-child{border-bottom:0}
.b-rank{color:var(--muted);font-size:13px;text-align:right}
.b-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.b-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.b-bar{height:4px;background:var(--sunken);border-radius:2px;overflow:hidden}
.b-bar span{display:block;height:100%;background:var(--accent);border-radius:2px}
.b-num{text-align:right;font-size:13px;color:var(--ink-2);white-space:nowrap}
.b-num b{color:var(--ink);font-size:14px}
.b-num small{display:block;font-size:11.5px;color:var(--muted)}

/* security */
.cmp.mini th,.cmp.mini td{padding:6px 8px;font-size:13px}
.cmp.mini th{font-weight:400;word-break:break-all}
.sec-login_blocked td,.sec-signup_blocked td,.sec-signup_trap td,.sec-login_suspended td{color:var(--bad)}

/* site */
.ann-panel,.backup-panel,.health-panel{margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.ann-panel .sub,.backup-panel .sub,.backup-panel .hint{margin:0}
.ann-form{display:flex;flex-direction:column;gap:8px;margin:0}
.ann-form textarea{width:100%;max-width:640px;resize:vertical;font:inherit}
.checks{list-style:none;margin:0;padding:0}
.check{display:grid;grid-template-columns:22px minmax(8rem,14rem) minmax(0,1fr);gap:2px 10px;padding:7px 0;border-bottom:1px solid var(--line);align-items:baseline}
.check:last-child{border-bottom:0}
.ck-icon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;align-self:center}
.check.ok .ck-icon{background:var(--good)}.check.warn .ck-icon{background:var(--c-yellow)}.check.bad .ck-icon{background:var(--bad)}
.ck-label{font-weight:500}
.ck-value{color:var(--ink-2)}
.ck-hint{grid-column:2 / -1;font-size:12.5px;color:var(--muted)}
.tables-detail summary{cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.tables-detail .cmp{max-width:360px;margin-top:6px}

/* announcement banner */
.announce{display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 14px;margin-bottom:16px;border-radius:var(--r);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
.announce > svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:2px}
.announce p{margin:0;flex:1;min-width:0}
.announce .icon-btn{flex:none}

/* change log */
.changes{display:flex;flex-direction:column;gap:14px;max-width:760px}
.change h2{font-size:22px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.change h2 .hint{margin-left:auto;font-family:var(--f-body);font-weight:400;font-size:13px}
.change ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.foot-ver a{color:inherit;text-decoration:none}
.foot-ver a:hover{color:var(--accent);text-decoration:underline}

@media (max-width:760px){
  .board-grid{grid-template-columns:1fr}
  .sec-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sec-stats .stat .v{font-size:26px}
  .check{grid-template-columns:22px minmax(0,1fr) auto}
  .ck-value{text-align:right}
  .ck-hint{grid-column:2 / -1}
  .del-user form{width:210px}
}
.compact .admin-stats .stat .n{display:block}
.cmp.left th,.cmp.left td{text-align:left}
.gtot .gworn{display:block;font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--c-violet);text-align:right;line-height:1.1}
@media (min-width:761px){ .dense .gtot .gworn{display:inline;margin-left:6px} }

/* shared page: sign-up / log-in, as a card or a quiet line (Admin → Site) */
.share-cta{margin:28px auto 0;max-width:520px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.share-cta .cta-mark{width:64px;height:29px;display:block}
.share-cta h2{margin:4px 0 0;font-size:24px}
.share-cta p{margin:0;color:var(--ink-2)}
.share-cta .hint{font-size:12.5px;color:var(--muted)}
.cta-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.cta-acts .btn{min-height:42px;padding-inline:18px}
.share-cta-line{margin:20px auto 0;text-align:center;font-size:13.5px;color:var(--muted);max-width:520px}
.share-cta-line a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.share-cta-line a:hover{color:var(--accent);text-decoration-color:currentColor}
.share-cta-line .cta-note{font-size:12.5px}
.sharebox-panel{margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.sharebox-panel .hint{margin:0}
.curve{overflow:visible}

/* trip items: quiet tick (groups keep the switch). Small grey box, orange tick; dashed when left out. */
.tick-btn{border:0;background:none;padding:0;width:30px;height:30px;display:grid;place-items:center;border-radius:6px;cursor:pointer;color:inherit}
.tick-btn:hover .tick{border-color:var(--ink-2)}
.tick-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tick{position:relative;width:16px;height:16px;border:1.25px solid var(--line-2);border-radius:4px;box-sizing:border-box;display:block}
.tick-btn[aria-checked="true"] .tick::before{content:"";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tick-btn[aria-checked="false"] .tick{border-style:dashed}
@media (max-width:760px){ .tick-btn{width:40px;height:40px;margin:-6px -8px -6px -8px} }
@media (min-width:761px){ .dense .tick-btn{width:24px;height:24px} }
.switch-btn .track,.switch-btn .track::after{transition-duration:.1s}
.figs .fig-unit{font-size:.6em;font-weight:600;color:var(--muted);margin-left:2px}
.units-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){ .units-pick{grid-template-columns:1fr} }
.form .mode-opt{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--ink)}
.form .mode-opt b{font-weight:600}

/* iOS zooms into any form field under 16px. Keep fields at 16px on phones and touch screens
   (zoom itself stays allowed, for anyone who needs it). */
@media (max-width:760px), (pointer:coarse){
  html input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
  html select, html textarea{font-size:16px!important}
}
.srow .qty{text-align:right;color:var(--ink-2)}
.srow .qty:empty{display:block;min-width:0}
@media (max-width:760px){ .dense .srow{grid-template-columns:minmax(0,1fr) auto 5rem!important} }

/* Completed trips */
.done-chip{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);text-transform:none;letter-spacing:0;font-size:12px;padding:2px 8px 2px 6px;border-radius:999px}
.done-chip svg{width:12px;height:12px;flex:none}
.done-chip .num{font-weight:600}
/* no tick column on a completed trip: the name takes its place */
.trow.locked .t-name{grid-column:1 / span 2}
.group.locked .trip-heads span:first-child{display:none}
.group.locked .trip-heads span:nth-child(2){grid-column:1 / span 2}
.trow.locked .t-name{cursor:default}
.trow.locked .t-ctl{justify-content:flex-end}
.locked-qty{min-width:28px;text-align:right;color:var(--muted);font-size:13px}
.clsbtn.static{display:inline-block;text-align:center;cursor:default}
.crow:disabled{cursor:default;color:inherit;opacity:1}
.crow:disabled:hover{background:none}
.complete-warn{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--c-yellow) 14%,transparent);border:1px solid color-mix(in srgb,var(--c-yellow) 45%,transparent);font-size:14px;line-height:1.45}
.trow.locked .t-name:hover .iname{color:inherit}

/* Public home page */
.guest-nav{margin-left:auto;display:flex;gap:8px}
.btn.lg{padding:11px 20px;font-size:16px;min-height:46px}
.home{max-width:1080px;margin:0 auto;padding:8px 0 24px}
.home-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:40px 0 48px}
.home-hero h1{font-size:clamp(38px,6vw,60px);line-height:.98;margin:8px 0 16px}
.home-lead{font-size:18px;line-height:1.5;color:var(--ink-2);margin:0 0 24px;max-width:36em}
.home-acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.home-demo{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 18px 40px -24px rgba(0,0,0,.28)}
.home-demo-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.home-demo-head b{font-family:var(--f-display);font-size:22px}
.home-demo-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.home-demo-figs b{display:block;font-family:var(--f-display);font-size:28px;line-height:1.1}
.home-demo-figs div:first-child b{color:var(--accent)}
.home-demo-figs small{font-size:15px;color:var(--muted);margin-left:2px}
.home-demo .minibar{height:8px;margin-bottom:12px}
.home-demo-rows{list-style:none;margin:0;padding:0}
.home-demo-rows li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-weight:500}
.home-demo-rows b{margin-left:auto;font-weight:600}
.home-demo-rows .off{color:var(--muted)}
.home-demo-rows .off b{color:var(--good);font-weight:500}
.home-section{padding:36px 0;border-top:1px solid var(--line)}
.home-section h2,.home-end h2{font-size:30px;margin-bottom:20px}
.home-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.home-steps li{counter-increment:s;line-height:1.5;color:var(--ink-2)}
.home-steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--f-display);font-weight:700;font-size:18px;margin-bottom:10px}
.home-steps b{color:var(--ink)}
.home-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
.home-feature h3{font-size:20px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.home-feature h3 svg{width:16px;height:16px;color:var(--accent);flex:none}
.home-feature p{margin:0;line-height:1.5;color:var(--ink-2)}
.home-faq{display:grid;gap:8px;max-width:760px}
.home-faq details{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:0 16px}
.home-faq summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:16px}
.home-faq p{margin:0 0 16px;line-height:1.55;color:var(--ink-2)}
.home-end{text-align:center;padding:44px 20px;margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.home-end p{color:var(--ink-2);margin:-8px auto 20px;max-width:40em;line-height:1.5}
.home-end .home-tagline{font-family:var(--f-display);font-weight:600;font-size:20px;color:var(--ink);margin:0 0 20px}
.home-lead b{color:var(--ink);font-weight:600}
.home-lead + .home-lead{font-size:16px;margin-top:-12px}
.home-free{display:flex;align-items:flex-start;gap:8px;margin:0 0 18px;font-weight:500;color:var(--ink)}
.home-free svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:2px}
.home-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-steps li b{display:block;margin-bottom:4px;font-size:16px}
.home-faq p + p{margin-top:-6px}
@media (max-width:980px){.home-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .home-hero{grid-template-columns:1fr;gap:28px;padding:20px 0 32px}
  .home-steps,.home-features{grid-template-columns:1fr;gap:18px}
  .home-lead{font-size:17px}
}
@media (max-width:420px){ .guest-nav .btn.ghost{display:none} .home-demo-figs b{font-size:23px} }

/* Item description on a shared trip (when the owner switches it on) */
.srow .sdesc{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;white-space:pre-line}
/* Shared rows: "1 × 3 nights" sits under the weight on desktop; phones show only the ×3 badge (it overlapped before) */
.compact .srow .wt small{display:block;margin-left:0}
@media (max-width:760px){ .srow .wt small{display:none!important} }

/* Admin → Email */
.mail-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:12px 0 8px}
.mail-form label{display:flex;flex-direction:column;gap:4px;font-weight:500;flex:1 1 260px;max-width:420px}
.mail-form input{padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit}
.mail-result.ok{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.mail-result.ok h3{color:var(--good)}
.mail-result.bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.mail-result.bad h3{color:var(--bad)}
.mail-log summary{cursor:pointer;font-size:13px;color:var(--ink-2);margin-top:8px}
.mail-log pre,.mail-config{font-size:12px;line-height:1.5;background:var(--sunken);border-radius:6px;padding:10px 12px;overflow-x:auto;margin:8px 0 0;white-space:pre}
.mail-settings{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:10px 0 0}
.mail-settings dt{color:var(--muted)}
.mail-settings dd{margin:0;overflow-wrap:anywhere}
.mail-page > section.panel + section.panel{margin-top:14px}

/* Share panel: header row, folding body, options in two columns */
.share-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:34px}
.share-head .share-toggle{flex:1 1 auto;min-width:0}
.share-head-acts{display:flex;gap:6px;margin-left:auto}
.share-expand svg{width:14px;height:14px;transition:transform .15s}
.share.open .share-expand svg{transform:rotate(180deg)}
.share-body{display:flex;flex-direction:column;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.share-body[hidden],.share-summary[hidden]{display:none}
.share-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px}
.share-col{display:flex;flex-direction:column;gap:8px}
.share-col .eyebrow{font-size:12px;margin-bottom:-2px}
.share-col .switch-btn > span:last-child{display:flex;flex-direction:column;line-height:1.25}
.share-col .switch-btn small{font-size:12px;color:var(--muted);font-weight:400}
.share-summary{margin:-4px 0 2px;font-size:12.5px}
.share-trip-desc{margin:10px 0 0;max-width:46em;line-height:1.5;color:var(--ink-2)}
@media (max-width:640px){
  .share-opts{grid-template-columns:1fr;gap:14px}
  .share-head{flex-wrap:nowrap}
  .share-head .share-toggle .hint{display:block}
  .share-head-acts .share-expand{padding-inline:8px}
  .share-head-acts .share-expand-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .share-link input{flex-basis:100%}
}
@media (max-width:760px){ .share-head-acts .desktop-only{display:none} }

/* Admin → Activity filters */
.feed-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.feed-chips{display:flex;flex-wrap:wrap;gap:6px}
.feed-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;text-decoration:none;user-select:none}
.feed-chip input{position:absolute;opacity:0;pointer-events:none}
.feed-chip .num{font-size:12px;color:var(--muted);font-weight:500}
.feed-chip:hover{border-color:var(--ink-2)}
.feed-chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.feed-chip.on .num{color:inherit;opacity:.7}
.feed-chip.none:not(.on){opacity:.55}
.feed-chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.feed-person select{padding:5px 28px 5px 10px;border:1px solid var(--line-2);border-radius:999px;background-color:var(--surface);color:var(--ink);font:inherit;font-size:13.5px}
.ev-login .feed-dot{background:var(--c-sky)}

/* Admin → Users: countries */
.country-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-2px 0 14px}
.country-line .eyebrow{margin-right:2px}
.country-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px}
.country-pill b{font-weight:600;color:var(--ink-2)}
.country-cell{white-space:nowrap}
.admin-table .cmp td.country-cell,.admin-table .cmp th.country-col{text-align:left}

/* Admin → Email: activity alerts */
.alerts-form fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:14px}
.alerts-form fieldset:disabled{opacity:.55}
.alerts-on,.alerts-type{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.alerts-on input,.alerts-type input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.alerts-on span,.alerts-type span{display:flex;flex-direction:column;line-height:1.3}
.alerts-on small,.alerts-type small{font-size:12.5px;color:var(--muted)}
.alerts-email{display:flex;flex-direction:column;gap:4px;font-weight:500;max-width:420px}
.alerts-email input{padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit}
.alerts-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;padding:12px 0 2px;border-top:1px solid var(--line)}
@media (max-width:640px){ .alerts-types{grid-template-columns:1fr} }
.pw-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pw-forgot{font-size:13px;font-weight:400}
.ref-line{color:var(--accent)}

/* Public demo (/demo): the real app with sample data */
.demo-chip{flex:none;margin-left:-8px}
.demo-avatar{display:grid;place-items:center;background:var(--sunken);color:var(--ink-2)}
.demo-avatar svg{width:60%;height:60%}
.demo-signup{flex:none;margin-left:auto}
.demo-signup + .user-menu{margin-left:0}
.demo-menu-note{margin:0;padding:6px 12px 8px;max-width:17rem;line-height:1.35}
.home-demo-link{display:block;margin-top:12px;font-weight:600;color:var(--accent);text-decoration:none}
.home-demo-link:hover{text-decoration:underline}
.demo-nudge{position:fixed;z-index:30;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow),0 10px 30px -10px rgb(0 0 0 / .25);padding:10px 8px 10px 14px;animation:nudge-in .25s ease-out}
.demo-nudge p{margin:0;flex:1;font-size:14px;line-height:1.35;color:var(--ink-2)}
.demo-nudge b{color:var(--ink)}
.demo-nudge .btn{flex:none}
@keyframes nudge-in{from{opacity:0;transform:translate(-50%,10px)}}
@media (max-width:600px){.demo-chip,.demo-signup{display:none}}
@media (max-width:420px){.demo-nudge{flex-wrap:wrap}.demo-nudge p{flex-basis:calc(100% - 40px)}.demo-nudge .btn{flex:1}}

/* Admin → Demo */
.demo-switch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.demo-switch p{margin:4px 0 0}
.funnel{display:grid;gap:8px;margin:4px 0 2px}
.funnel-row{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) 7.5rem;gap:10px;align-items:center;font-size:14px}
.funnel-row .bar{height:12px;background:var(--sunken);border-radius:3px;overflow:hidden}
.funnel-row .bar span{display:block;height:100%;background:var(--accent);border-radius:3px;min-width:2px}
.funnel-row .bar span.zero{min-width:0}
.funnel-row b{font-weight:600}
.funnel-row .pct{text-align:right;color:var(--ink-2)}
.funnel-row .pct small{color:var(--muted)}
@media (max-width:600px){.funnel-row{grid-template-columns:minmax(0,1fr) 6.5rem}.funnel-row .bar{grid-column:1 / -1;order:3}}
.demo-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:760px){.demo-panels{grid-template-columns:minmax(0,1fr)}}
.period-pick{margin:0 0 14px}
.demo-panels .panel.table-wrap,.demo-months.table-wrap{padding:14px}
.demo-panels .cmp th:first-child,.demo-months .cmp th:first-child{min-width:9em;overflow-wrap:normal}
.demo-months .cmp tbody th{white-space:nowrap}
@media (max-width:600px){.home-steps-4{grid-template-columns:1fr}}
.missing-acts{display:flex;gap:8px;flex-wrap:wrap}
.missing-acts .btn{min-height:42px;padding-inline:16px}
a.auth-logo{text-decoration:none;color:inherit}
a.auth-logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

/* Trip card colour bar: grows a little under the pointer; each segment's label uses the chart tooltips ([data-tip]) */
.card .minibar{transition:height .12s ease;cursor:default}
.card .minibar:hover{height:10px}
.card .minibar span{transition:opacity .12s}
.card .minibar:hover span:not(:hover){opacity:.55}
@media (hover:none){ .card .minibar{height:10px} }