:root {
  --bg: #000;
  --s1: #0c0c0e;
  --s2: #151518;
  --s3: #1e1e22;
  --line: #2a2a30;
  --line2: #3a3a42;
  --text: #f3f3f5;
  --muted: #9b9ba6;
  --dim: #6b6b75;
  --red: #ff2d3d;
  --red-glow: rgba(255, 45, 61, .55);
  --gold: #e2b25c;
  --gold-glow: rgba(226, 178, 92, .6);
  --green: #4fd07a;
  --warn: #ffb020;
  --radius: 14px;
  --top-h: 60px;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); overflow-x: clip; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: var(--top-h); padding: 0 16px; padding-top: env(safe-area-inset-top);
  background: rgba(0,0,0,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.backbtn { width: 38px; height: 38px; margin-right: -6px; border-radius: 50%; border: 1px solid var(--line2); background: var(--s2); display: grid; place-items: center; padding: 0; flex: none; color: var(--text); }
.backbtn:hover { border-color: #fff; }
.backbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand { display: flex; flex-direction: column; line-height: 1; cursor: pointer; user-select: none; }
.brand-mark { font-weight: 300; font-size: 24px; letter-spacing: .18em; }
.brand-sub { font-size: 8.5px; letter-spacing: .62em; color: var(--muted); margin-top: 4px; }
.brand-sub.long { letter-spacing: .36em; }
.tabs { display: flex; gap: 4px; margin-left: 12px; }
.tabs button {
  background: none; border: 0; padding: 9px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); background: var(--s3); }
.who {
  margin-left: auto; background: var(--s2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 12px; letter-spacing: .08em; white-space: nowrap;
}
.pill { background: var(--red); color: #fff; border-radius: 999px; font-size: 10px; padding: 2px 7px; letter-spacing: 0; font-weight: 600; }
.offline { background: #3a0d12; color: #ffb3ba; font-size: 13px; padding: 8px 16px; text-align: center; }

main { padding: 16px; max-width: 1600px; margin: 0 auto; }
.view { display: none; }
.view.on { display: block; }

/* ---------- map tools ---------- */
.maptools { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.sectabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sectab {
  position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; font-size: 13px; letter-spacing: .12em; font-weight: 600; min-width: 48px;
}
.sectab small { display: block; font-weight: 400; font-size: 9.5px; letter-spacing: .06em; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.sectab.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 16px var(--red-glow); }
.sectab .dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #000; font-size: 10px; font-weight: 700; display: grid; place-items: center; letter-spacing: 0; }
.sectab .dot.red { background: var(--red); color: #fff; }
.find {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  background: var(--s1); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; height: 40px; min-width: 240px;
  color: var(--muted);
}
.find input { background: none; border: 0; outline: 0; flex: 1; height: 100%; font-size: 14px; color: var(--text); min-width: 0; }
.find.wide { margin-left: 0; width: 100%; max-width: 520px; }
.find:focus-within { border-color: var(--line2); }

.placing {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(255,45,61,.18), rgba(255,45,61,.05));
  border: 1px solid var(--red); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 14px;
}
.placing b { font-weight: 600; }
.placing .grow { flex: 1; }

/* ---------- map stage ---------- */
.mapwrap { position: relative; }
.viewport {
  position: relative; overflow: hidden; width: 100%; border-radius: var(--radius);
  background: #050505; border: 1px solid var(--line); margin: 0 auto;
}
.stage { position: absolute; }
.stage > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.hot {
  position: absolute; border-radius: 10px; border: 1.5px solid transparent; background: transparent;
  transition: box-shadow .2s, border-color .2s, background .2s, opacity .2s; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.hot:hover, .hot:focus-visible { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); outline: none; }
.hot.has { border-color: rgba(255,255,255,.14); }
.hot.sel { border-color: #fff; background: rgba(255,255,255,.08); }
.hot.suggest {
  border-color: var(--red); background: rgba(255,45,61,.12);
  animation: pulse 1.6s ease-in-out infinite;
}
.hot.match { border-color: var(--gold); background: rgba(226,178,92,.16); box-shadow: 0 0 24px var(--gold-glow), inset 0 0 18px rgba(226,178,92,.25); }
.hot.dim { opacity: .35; }
.placing-on .hot:not(.suggest):not(.nav) { border-color: rgba(255,255,255,.22); }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 10px var(--red-glow), inset 0 0 10px rgba(255,45,61,.2); }
  50% { box-shadow: 0 0 30px var(--red-glow), inset 0 0 22px rgba(255,45,61,.35); }
}
.hot .badge {
  position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #fff; color: #000; font-size: 11px; font-weight: 700; display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.hot.match .badge { background: var(--gold); }
.hot .badge.low { background: var(--red); color: #fff; }
.hot .tag {
  position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.78); border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; padding: 4px 9px; font-size: 11px; letter-spacing: .14em; white-space: nowrap; pointer-events: none;
}
.hot .zoomhint {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 4px 11px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s;
}
.hot:hover .zoomhint, .hot.suggest .zoomhint, .hot.match .zoomhint { opacity: 1; }
.hot.nav:hover { background: rgba(255,255,255,.04); }
.hot.nav .zoomhint { opacity: .85; }
.hot.strip { border-radius: 4px; }
.hot.strip.cur { border-color: transparent; }

/* panel drawn into the white box on each slide */
.panel {
  position: absolute; overflow: hidden; color: #111; display: flex; flex-direction: column;
  font-size: calc(var(--k, 1) * 14px); line-height: 1.25; background: #fff; border-radius: 2px;
}
.panel-head { padding: .7em .8em .45em; border-bottom: 1px solid #ddd; font-size: .78em; letter-spacing: .16em; text-transform: uppercase; color: #555; display: flex; justify-content: space-between; }
.panel-body { overflow: auto; padding: .35em .5em .6em; flex: 1; }
.panel-spot { width: 100%; text-align: left; border: 0; background: none; padding: .45em .35em; border-radius: .4em; color: #111; display: block; }
.panel-spot:hover { background: #f1f1f3; }
.panel-spot b { font-size: .74em; letter-spacing: .12em; font-weight: 700; display: block; margin-bottom: .15em; }
.panel-spot span { display: block; font-size: .86em; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-spot i { font-style: normal; color: #999; font-size: .8em; }
.panel-empty { color: #888; font-size: .85em; padding: .8em .4em; }

.zoombar {
  position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; gap: 8px; align-items: center;
}
.chipbtn {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.8); border: 1px solid var(--line2);
  border-radius: 999px; padding: 8px 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.chipbtn:hover { border-color: #fff; }
.zoomtitle { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; background: rgba(0,0,0,.8); border-radius: 999px; padding: 8px 14px; border: 1px solid var(--line); }

/* section list (below the map on phones, and for list-only spots) */
.seclist { margin-top: 14px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.seccard { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; text-align: left; width: 100%; }
.seccard:hover { border-color: var(--line2); }
.seccard .code { font-size: 12px; letter-spacing: .16em; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.seccard .code em { font-style: normal; color: var(--muted); font-weight: 400; letter-spacing: .04em; }
.seccard .lbl { color: var(--muted); font-size: 12px; margin-top: 2px; }
.seccard .items { margin-top: 8px; font-size: 13px; color: #d8d8de; display: grid; gap: 3px; }
.seccard .items .none { color: var(--dim); }
.seccard.match { border-color: var(--gold); box-shadow: 0 0 16px rgba(226,178,92,.25); }
.seccard.suggest { border-color: var(--red); box-shadow: 0 0 16px var(--red-glow); }

/* ---------- drawer ---------- */
.drawer {
  position: fixed; z-index: 50; right: 0; top: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--s1); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top);
}
.drawer.open { transform: none; box-shadow: -20px 0 60px rgba(0,0,0,.6); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 45; }
.dhead { padding: 18px 18px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; }
.dhead h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .12em; }
.dhead p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.dhead .x { margin-left: auto; }
.role { display: inline-block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--line2); border-radius: 999px; padding: 3px 8px; margin-top: 8px; color: var(--muted); }
.dbody { flex: 1; overflow: auto; padding: 12px 14px 20px; }
.dfoot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.iconbtn { background: none; border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--muted); padding: 0; }
.iconbtn:hover { color: var(--text); border-color: var(--line2); }

.stk { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.stk.zero { opacity: .55; }
.stk.flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { border-color: var(--gold); box-shadow: 0 0 18px var(--gold-glow); } 100% { border-color: var(--line); box-shadow: none; } }
.thumb { width: 46px; height: 46px; border-radius: 9px; background: var(--s3); display: grid; place-items: center; overflow: hidden; font-size: 17px; font-weight: 600; color: #000; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.stk .nm { font-size: 14px; font-weight: 500; line-height: 1.25; }
.stk .meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.stk .actions { display: flex; gap: 6px; margin-top: 8px; grid-column: 2 / 4; }
.smallbtn { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--muted); }
.smallbtn:hover { color: var(--text); border-color: var(--line2); }
.smallbtn.danger:hover { color: var(--red); border-color: var(--red); }
.fillbar { display: inline-block; width: 44px; height: 6px; background: var(--s3); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.fillbar i { display: block; height: 100%; background: var(--gold); }
.fillbar i.low { background: var(--red); }
.warn { color: var(--warn); }
.bad { color: var(--red); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.stepper button { background: var(--s3); border: 0; width: 34px; height: 34px; font-size: 18px; line-height: 1; }
.stepper button:active { background: var(--line2); }
.stepper input, .stepper span { width: 44px; text-align: center; background: none; border: 0; font-weight: 600; font-size: 15px; outline: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 11px 16px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  border: 1px solid transparent; background: #fff; color: #000;
}
.btn:hover { filter: brightness(.92); }
.btn.red { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn.ghost:hover { border-color: #fff; filter: none; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; border: 0;
  border-radius: 999px; padding: 14px 20px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(255,45,61,.45);
}
.fab svg { width: 20px; height: 20px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 16px; }
.modal-card {
  width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--s1); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px;
}
.mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mhead h2 { margin: 0; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.mhead .x { margin-left: auto; }
.choice { display: grid; gap: 10px; }
.choice button {
  display: flex; align-items: center; gap: 14px; text-align: left; background: var(--s2); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
}
.choice button:hover { border-color: var(--line2); }
.choice button svg { width: 26px; height: 26px; color: var(--red); }
.choice b { display: block; font-weight: 600; font-size: 15px; }
.choice span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.linkish { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 13px; padding: 6px 0; }

.form { display: grid; gap: 12px; }
.row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; outline: 0; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--line2); }
.field textarea { min-height: 60px; resize: vertical; }
.seg { display: inline-flex; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { background: none; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; color: var(--muted); }
.seg button.on { background: #fff; color: #000; font-weight: 600; }
.range { display: flex; align-items: center; gap: 12px; }
.range input[type=range] { flex: 1; accent-color: var(--gold); }
.range b { min-width: 46px; text-align: right; }
.photo-prev { display: flex; gap: 12px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.photo-prev img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.photo-prev .t { font-size: 13px; color: var(--muted); }
.matchbox { background: rgba(226,178,92,.08); border: 1px solid rgba(226,178,92,.4); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.matchbox .chips { margin-top: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--line2); }
.chip.on { background: #fff; color: #000; border-color: #fff; }
.chip.sug { border-color: var(--red); }
.chip .cdot { width: 8px; height: 8px; border-radius: 50%; }
.locline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.locval { font-weight: 600; letter-spacing: .1em; font-size: 14px; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.locval.empty { color: var(--dim); font-weight: 400; letter-spacing: 0; }
.hint { font-size: 12px; color: var(--muted); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--red); animation: spin .8s linear infinite; margin: 20px auto 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.center { text-align: center; }
.mfoot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

.shelfrow { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.shelfrow input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--red); }
.shelfrow .nmin { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0; font-size: 14px; width: 100%; outline: 0; }
.shelfrow .sub { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.shelfrow select { background: var(--s3); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 12px; }

/* ---------- inventory ---------- */
.viewhead { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.viewhead h1 { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }
.viewhead-actions { margin-left: auto; display: flex; gap: 8px; }
.filters { display: grid; gap: 10px; margin-bottom: 14px; }
.invlist { display: grid; gap: 8px; }
.inv { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; text-align: left; width: 100%; }
.inv:hover { border-color: var(--line2); }
.inv .nm { font-weight: 500; }
.inv .meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.inv .locs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.loc { font-size: 10.5px; letter-spacing: .1em; border: 1px solid var(--line2); border-radius: 6px; padding: 2px 6px; color: #cfcfd6; background: none; }
button.loc:hover { border-color: var(--gold); color: var(--gold); }
.inv .tot { text-align: right; }
.inv .tot b { font-size: 20px; font-weight: 600; display: block; }
.inv .tot span { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.status { display: inline-block; font-size: 10px; letter-spacing: .14em; font-weight: 700; border-radius: 999px; padding: 3px 8px; margin-top: 4px; }
.status.low { background: var(--red); color: #fff; }
.status.ok { background: rgba(79,208,122,.15); color: var(--green); }
.empty-state { color: var(--muted); text-align: center; padding: 40px 10px; font-size: 14px; }

/* ---------- restock ---------- */
.rgroup { margin-bottom: 22px; }
.rgroup h2 { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; }
.rgroup h2 .n { background: var(--s3); color: var(--text); border-radius: 999px; padding: 2px 8px; font-size: 11px; letter-spacing: 0; }
.ritem { display: flex; gap: 12px; align-items: center; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ritem .grow { flex: 1; min-width: 180px; }
.ritem .nm { font-weight: 500; }
.ritem .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ritem .arrow { color: var(--muted); }

/* ---------- log ---------- */
.log { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.log li { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.log .t { font-size: 14px; }
.log .w { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.log .w b { color: var(--text); font-weight: 500; }

.toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  background: #fff; color: #000; border-radius: 12px; padding: 11px 16px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  max-width: calc(100vw - 32px);
}

/* ---------- phones ---------- */
@media (max-width: 860px) {
  :root { --top-h: 56px; }
  .top { gap: 10px; padding: 0 12px; backdrop-filter: none; -webkit-backdrop-filter: none; background: #000; }
  .dfoot .btn { flex: 1; padding: 12px 10px; font-size: 12px; }
  .brand-mark { font-size: 20px; }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 35; justify-content: space-around;
    background: rgba(0,0,0,.95); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .tabs button { font-size: 10.5px; padding: 10px 8px; letter-spacing: .12em; }
  main { padding: 12px 12px 150px; }
  .fab { bottom: calc(74px + env(safe-area-inset-bottom)); right: 14px; padding: 13px 18px; }
  .toast { bottom: calc(140px + env(safe-area-inset-bottom)); }
  .maptools { gap: 8px; }
  .sectabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: none; }
  .sectabs::-webkit-scrollbar { display: none; }
  .sectab { flex: none; }
  .find { margin-left: 0; width: 100%; min-width: 0; }
  .drawer { top: auto; left: 0; width: 100%; max-height: 82dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .drawer.open { transform: none; }
  .modal { padding: 0; place-items: end stretch; }
  .modal-card { width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .row { grid-template-columns: 1fr; }
  .row.keep { grid-template-columns: 1fr 1fr; }
  .hot .tag { font-size: 9px; padding: 2px 6px; left: 4px; top: 4px; }
  .hot .badge { min-width: 18px; height: 18px; font-size: 10px; top: -6px; right: -6px; }
  .hot .zoomhint { font-size: 9px; padding: 3px 8px; }
  .who { padding: 6px 11px; font-size: 11px; }
}
.stage > .layer { position: absolute; inset: 0; }

/* ---------- how to ---------- */
.howto { display: grid; grid-template-columns: 250px minmax(260px, 340px) 1fr; gap: 22px; align-items: start; }
.lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: sticky; top: calc(var(--top-h) + 16px); }
.lessons button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 1px solid transparent; border-radius: 12px; padding: 9px 10px; color: var(--muted); font-size: 13.5px; }
.lessons button:hover { color: var(--text); background: var(--s1); }
.lessons button.on { color: var(--text); background: var(--s2); border-color: var(--line2); }
.lessons .num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.lessons button.on .num { background: var(--red); border-color: var(--red); color: #fff; }
.player { position: sticky; top: calc(var(--top-h) + 16px); }
.phone { border-radius: 30px; padding: 8px; background: #111; border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,45,61,.08); }
.phone video { display: block; width: 100%; aspect-ratio: 390 / 844; border-radius: 22px; background: #000; object-fit: cover; }
.lesson .kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.lesson h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 400; letter-spacing: .04em; }
.lesson .intro { color: var(--muted); margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.steps button { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; color: #d6d6dc; transition: border-color .25s, background .25s; }
.steps button:hover { border-color: var(--line2); }
.steps .sn { width: 24px; height: 24px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; margin-top: 1px; }
.steps li.cur button { border-color: var(--red); background: rgba(255,45,61,.08); color: var(--text); }
.steps li.cur .sn { background: var(--red); color: #fff; }
.lnav { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.lnav .btn.red { margin-left: auto; }
@media (max-width: 1100px) {
  .howto { grid-template-columns: minmax(240px, 320px) 1fr; }
  .lessons { grid-column: 1 / -1; position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .lessons::-webkit-scrollbar { display: none; }
  .lessons li { flex: none; }
  .lessons button { white-space: nowrap; border-color: var(--line); }
}
@media (max-width: 860px) {
  .howto { grid-template-columns: 1fr; gap: 16px; }
  .player { position: static; display: flex; justify-content: center; }
  .phone { width: min(300px, 78vw); }
  .lesson h2 { font-size: 22px; }
  .tabs button { font-size: 9.5px; letter-spacing: .08em; padding: 10px 4px; }
}

@media (max-width: 860px) {
  .howto .lesson { display: contents; }
  .howto .lessons { order: 0; }
  .howto .lhead { order: 1; }
  .howto .player { order: 2; }
  .howto .steps { order: 3; }
  .howto .lnav { order: 4; margin-top: 0; }
  .howto .lhead .intro { margin-bottom: 0; }
  .phone { width: min(230px, 60vw); border-radius: 24px; padding: 6px; }
  .phone video { border-radius: 18px; }
}

/* ---------- PIN gate ---------- */
.pingate { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; padding: 24px; }
.pinbox { text-align: center; width: min(320px, 100%); }
.pinbox .brand { align-items: center; margin-bottom: 26px; cursor: default; }
.pinbox .brand-mark { font-size: 40px; }
.pinbox .brand-sub { font-size: 11px; }
.pinmsg { color: var(--muted); margin: 0 0 18px; font-size: 15px; }
.pindots { display: flex; justify-content: center; gap: 16px; margin-bottom: 28px; }
.pindots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line2); transition: background .15s, border-color .15s; }
.pindots span.on { background: var(--red); border-color: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pinpad button { height: 68px; border-radius: 18px; background: var(--s2); border: 1px solid var(--line); font-size: 26px; font-weight: 300; }
.pinpad button:active { background: var(--s3); border-color: var(--red); }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: none; } 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }

/* ---------- notes in the white box ---------- */
button.panel { border: 0; padding: 0; text-align: left; cursor: pointer; color: #111; }
button.panel:hover .panel-head span:last-child { color: var(--red); }
.panel-head span:last-child { font-weight: 700; }
.note-text { white-space: pre-wrap; font-size: .9em; line-height: 1.4; color: #222; padding: .35em; }
.note-meta { font-size: .72em; color: #999; padding: .4em .35em 0; }
.notecard { border-color: var(--line2); background: #f4f4f6; color: #111; }
.notecard .code em { color: var(--red); font-weight: 600; }
.notecard .items, .notecard .note-text { color: #222; }
.notecard .none { color: #888; }

/* ---------- how to: click-through ---------- */
.howto { display: grid; grid-template-columns: 240px auto minmax(260px, 1fr); grid-template-areas: "list head head" "list shot side" "list shot nav"; gap: 14px 26px; align-items: start; }
.howto .lessons { grid-area: list; }
.howto .lessonpick { display: none; }
.howto .lhead { grid-area: head; }
.howto .lhead .intro { margin: 0; }
.howto .player { grid-area: shot; position: static; }
.howto .stepside { grid-area: side; }
.howto .lnav { grid-area: nav; margin-top: 0; }
.shot { display: block; padding: 6px; border-radius: 26px; background: #111; border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: zoom-in; }
.shot img, .shot video { display: block; height: min(68vh, 700px); width: auto; aspect-ratio: 540 / 1168; border-radius: 20px; background: #000; }
.stepcount { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.steptext { font-size: 20px; line-height: 1.45; margin: 10px 0 16px; }
.dots { display: flex; gap: 8px; margin-bottom: 10px; }
.dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--line2); }
.dots button.on { background: var(--red); width: 26px; border-radius: 5px; }
.shotzoom { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.shotzoom img, .shotzoom video { max-width: 100%; max-height: calc(100dvh - 60px); border-radius: 16px; }
.shotzoom span { color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) {
  .howto { grid-template-columns: auto 1fr; grid-template-areas: "list list" "head head" "shot side" "shot nav"; }
}
@media (max-width: 860px) {
  #view-howto .viewhead { display: none; }
  #view-howto { padding-bottom: 0; }
  .howto { grid-template-columns: 52% 1fr; grid-template-areas: "pick pick" "head head" "shot side" "nav nav"; gap: 10px 12px; }
  .howto .lessons { display: none; }
  .howto .lessonpick { display: flex; grid-area: pick; align-items: center; gap: 8px; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
  .howto .lessonpick span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .howto .lessonpick select { flex: 1; min-width: 0; background: none; border: 0; padding: 11px 0; font-size: 15px; outline: 0; }
  .howto .lhead .kicker, .howto .lhead .intro { display: none; }
  .howto .lhead h2 { font-size: 18px; margin: 0; }
  .howto .player { display: block; }
  .shot { padding: 4px; border-radius: 16px; }
  .shot img, .shot video { width: 100%; height: auto; max-height: calc(100dvh - 330px - env(safe-area-inset-bottom)); object-fit: contain; border-radius: 12px; }
  .steptext { font-size: 15px; line-height: 1.45; margin: 6px 0 12px; }
  .howto .lnav .btn { flex: 1; padding: 13px 10px; }
  .howto .lnav .btn.red { margin-left: 0; }
}
.howto .lhead .kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.howto .lhead h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 400; letter-spacing: .04em; }
.howto .lhead .intro { color: var(--muted); font-size: 15px; line-height: 1.5; }
.howto { grid-template-rows: auto auto 1fr; }
.howto .lnav { align-self: start; justify-content: flex-start; }
.howto .lnav .btn.red { margin-left: 0; min-width: 140px; }
@media (max-width: 860px) {
  .howto .lhead h2 { font-size: 18px; margin: 0; }
  .howto .lnav .btn.red { min-width: 0; }
}

.pinpad .pindel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 22px; }
.pinpad .pindel small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.photo-prev .t { flex: 1; }
.photo-prev .smallbtn { flex: none; }
.usephoto { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; color: var(--text); font-size: 13px; }
.usephoto input { margin-top: 2px; accent-color: var(--red); }
.linkbox { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.radio { display: flex; gap: 8px; align-items: center; margin-top: 8px; color: var(--text); }
.radio input { accent-color: var(--red); width: 18px; height: 18px; }
.field input:disabled, .field select:disabled { opacity: .55; }

/* ---------- help button + sheet ---------- */
.helpbtn { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line2); background: var(--s2); font-weight: 600; font-size: 16px; display: grid; place-items: center; padding: 0; }
.helpbtn:hover { border-color: #fff; }
.helpbtn + .who { margin-left: 8px; }
.helpsheet { position: fixed; inset: 0; z-index: 75; background: #000; overflow: auto; padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.helphead { display: flex; align-items: center; justify-content: space-between; max-width: 1600px; margin: 0 auto 12px; }
.helphead h1 { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }
.helpsheet .howto { max-width: 1600px; margin: 0 auto; }
body.helpon { overflow: hidden; }
body.helpon .fab { display: none; }
@media (max-width: 860px) {
  .helphead h1 { font-size: 13px; letter-spacing: .24em; }
  .helpsheet .shot img, .helpsheet .shot video { max-height: calc(100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .helpbtn { width: 32px; height: 32px; }
}

/* ---------- plan layout / homes ---------- */
.planbtn { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gold); background: none; color: var(--gold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.planbtn.on { background: var(--gold); color: #000; }
.planbar { border-color: var(--gold); background: linear-gradient(90deg, rgba(226,178,92,.18), rgba(226,178,92,.04)); }
.hot.planned { border-color: var(--gold); background: rgba(226,178,92,.10); }
.hot .badge.plan { background: var(--gold); color: #000; }
.hot.stray::after { content: ""; position: absolute; left: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px rgba(255,176,32,.8); border: 2px solid #000; }
.hometag { display: inline-block; margin-top: 5px; font-size: 11.5px; color: #000; background: var(--warn); border-radius: 6px; padding: 2px 7px; font-weight: 600; }
.smallbtn.homebtn { border-color: var(--warn); color: var(--warn); }
.dsub { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
.dsub:first-child { margin-top: 2px; }
.planrow { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 10px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.planrow.dim { grid-template-columns: 46px 1fr auto; opacity: .85; }
.planrow .nm { font-size: 14px; }
.planrow .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.planrow .stepper span { width: 40px; font-size: 13px; }
.planrole { border-color: var(--gold); color: var(--gold); }
.pickrow { display: grid; grid-template-columns: 22px 40px 1fr; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pickrow input { width: 20px; height: 20px; accent-color: var(--gold); }
.pickrow .thumb { width: 40px; height: 40px; }
.pickrow b { display: block; font-weight: 500; font-size: 14px; }
.pickrow small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.picklist { max-height: 52dvh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 0 6px; }
.homechip { display: inline-flex; align-items: center; gap: 6px; background: rgba(226,178,92,.14); border: 1px solid var(--gold); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px; }
.homechip button { background: none; border: 0; padding: 2px; color: var(--muted); display: grid; }
.homechip button svg { width: 14px; height: 14px; }
@media (max-width: 860px) {
  .planbtn { height: 36px; padding: 0 12px; font-size: 11px; }
  .maptools { flex-wrap: wrap; }
  .maptools .find { flex: 1; width: auto; }
}

/* ---------- per-bottle photos ---------- */
.thumb.zoomable { border: 0; padding: 0; position: relative; cursor: zoom-in; }
.thumb .mainph { position: absolute; left: 2px; bottom: 2px; font-style: normal; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.7); color: #ddd; border-radius: 4px; padding: 1px 4px; }
.minis { display: flex; gap: 6px; margin-top: 8px; }
.mini { position: relative; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); padding: 0; background: var(--s3); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 9px; background: rgba(0,0,0,.72); color: #fff; text-align: center; }
.invgroup { width: fit-content; }
.invgrp { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.invgrp span { font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--muted); font-weight: 400; }
.fixrow { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.fixwho b { display: block; font-weight: 500; }
.fixwho small { color: var(--muted); font-size: 12px; }
.fixcands { display: flex; gap: 8px; grid-column: 1 / -1; }
.fixbtns { grid-row: 1; grid-column: 2; }
.fixph { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; padding: 0; border: 2px solid var(--line2); background: var(--s3); }
.fixph.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.fixph img { width: 100%; height: 100%; object-fit: cover; }
.fixgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.fixloose { display: grid; gap: 6px; }
.fixloose img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line2); cursor: zoom-in; }
.fixloose select { background: var(--s2); border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-size: 12px; width: 100%; }
.fiximg { padding: 0; border: 0; background: none; }

/* ---------- spot rules ---------- */
.rulebox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--s2); border: 1px dashed var(--gold); border-radius: 12px; padding: 10px; margin-bottom: 6px; }
.rulechip { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: #000; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.rulechip button { background: none; border: 0; padding: 0; display: grid; color: #000; }
.rulechip button svg { width: 14px; height: 14px; }
.rulelist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rulemaker { display: grid; gap: 12px; background: var(--s2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.rulepreview { font-size: 13px; color: var(--muted); }
.rulepreview b { color: var(--text); }
.ruletag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 3px 8px; }
.planrow.byrule { grid-template-columns: 46px 1fr auto; }

/* ---------- map modes ---------- */
.mapmode { flex: none; }
.mapmode button { padding: 7px 12px; font-size: 12px; letter-spacing: .06em; }
.outline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.osec { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: calc(var(--top-h) + 10px); }
.osec.cur { border-color: var(--line2); }
.ohead { display: flex; align-items: baseline; gap: 8px; }
.ohead b { font-size: 15px; letter-spacing: .14em; font-weight: 600; }
.ohead .oname { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ohead .ounits { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ohead .smallbtn { padding: 3px 8px; font-size: 11px; }
.ogrid { display: flex; flex-direction: column; gap: 5px; height: 270px; }
.orow { display: flex; gap: 5px; min-height: 0; }
.ocell { position: relative; flex: 1; min-width: 0; min-height: 0; border: 1px solid var(--line2); background: var(--s2); border-radius: 8px; padding: 5px 6px; text-align: left; display: flex; flex-direction: column; justify-content: flex-start; overflow: visible; transition: box-shadow .2s, border-color .2s, background .2s, opacity .2s; }
.hot.ocell { border-color: var(--line2); }
.ocell .olbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocell .osub { font-size: 9.5px; color: var(--muted); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ocell.r-display { border-top: 2px solid rgba(226,178,92,.55); }
.ocell.r-cold, .ocell.r-rb { background: #0f1820; border-color: #24394a; }
.ocell.r-backstock { background: #141416; border-style: dashed; }
.ocell.r-equipment { background: transparent; border-style: dotted; opacity: .7; }
.ocell.r-equipment .olbl { color: var(--muted); }
.ocell:hover { border-color: rgba(255,255,255,.7); }
.ocell.has { background-image: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)); }
.ocell .badge { top: -7px; right: -7px; min-width: 19px; height: 19px; font-size: 10px; }
.ocell.sel { border-color: #fff; background: rgba(255,255,255,.1); }
.ocell.planned { border-color: var(--gold); background: rgba(226,178,92,.12); }
.ocell.suggest { border-color: var(--red); background: rgba(255,45,61,.14); animation: pulse 1.6s ease-in-out infinite; }
.ocell.match { border-color: var(--gold); background: rgba(226,178,92,.2); box-shadow: 0 0 16px var(--gold-glow); }
.ocell.dim { opacity: .3; }
.ocell.stray::after { left: -5px; top: -5px; width: 11px; height: 11px; }
.ofridge { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid #24394a; border-radius: 10px; background: #0a1016; padding: 4px; gap: 4px; }
.ofridge.sel { border-color: #fff; }
.ofrhead { position: relative; background: none; border: 0; color: #9cc8ef; font-size: 10.5px; letter-spacing: .14em; font-weight: 600; text-align: left; padding: 1px 3px; display: flex; gap: 6px; align-items: center; }
.ofrhead span:last-child { margin-left: auto; color: var(--muted); font-weight: 400; letter-spacing: .04em; }
.ofrhead .imark { position: static; }
.ofrbody { position: relative; flex: 1; min-height: 0; }
.oslot { position: absolute; padding: 2px; display: flex; }
.oslot .ocell { width: 100%; height: 100%; }
.onote { background: #f4f4f6; color: #222; border: 0; border-radius: 8px; padding: 7px 9px; font-size: 12px; text-align: left; line-height: 1.35; white-space: pre-wrap; max-height: 5.6em; overflow: hidden; }
.onote i { color: #888; font-style: normal; }
.osecissue { background: rgba(255,176,32,.12); border: 1px solid var(--warn); color: var(--warn); border-radius: 8px; padding: 6px 9px; font-size: 12px; text-align: left; }
@media (max-width: 1200px) { .outline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .outline { gap: 8px; }
  .osec { padding: 7px; gap: 6px; border-radius: 12px; }
  .ohead b { font-size: 13px; }
  .ohead .oname, .ohead .ounits { display: none; }
  .ohead .smallbtn { margin-left: auto; }
  .ogrid { height: 230px; gap: 4px; }
  .orow { gap: 4px; }
  .ocell { padding: 3px 4px; border-radius: 6px; }
  .ocell .olbl { font-size: 9.5px; letter-spacing: .03em; }
  .ocell .osub { display: none; }
  .ofrhead { font-size: 9px; }
  .onote { font-size: 11px; max-height: 4.2em; padding: 5px 7px; }
  .mapmode { order: -1; }
}
@media (max-width: 380px) { .ocell .olbl { font-size: 8.5px; } }

/* issue marks on the map */
.imark { position: absolute; left: -7px; bottom: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--warn); color: #000; font-weight: 800; font-size: 12px; display: grid; place-items: center; border: 2px solid #000; pointer-events: none; box-shadow: 0 0 10px rgba(255,176,32,.7); z-index: 2; }
.ofrhead .imark { width: 15px; height: 15px; font-size: 10px; border-width: 1px; }
.sectab .sissue { position: absolute; bottom: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--warn); color: #000; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid #000; }

/* ---------- reminders ---------- */
.pill.quiet { background: var(--s3); color: var(--text); }
.viewintro { margin: -6px 0 12px; }
.rem { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: start; background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.rem.k-fix { border-left-color: var(--warn); }
.rem.k-reminder { border-left-color: var(--gold); }
.rem.k-note { border-left-color: #9cc8ef; }
.rem.urgent { border-color: var(--red); border-left-color: var(--red); box-shadow: 0 0 14px rgba(255,45,61,.18); }
.rem.done { opacity: .6; }
.rem.done .rembody { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.rem.compact { background: var(--s2); grid-template-columns: 38px 1fr; }
.rem.compact .thumb, .rem.compact .remicon { width: 38px; height: 38px; }
.rem.compact .rembtns { grid-column: 2; flex-direction: row; }
.remicon { width: 46px; height: 46px; border-radius: 9px; background: var(--s3); display: grid; place-items: center; }
.remicon svg { width: 22px; height: 22px; }
.remicon.k-fix { color: var(--warn); }
.remicon.k-reminder { color: var(--gold); }
.remicon.k-note { color: #9cc8ef; }
.remmain { min-width: 0; }
.remtags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.rk { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--line2); color: var(--muted); }
.rk.k-fix { border-color: var(--warn); color: var(--warn); }
.rk.k-reminder { border-color: var(--gold); color: var(--gold); }
.rk.k-note { border-color: #9cc8ef; color: #9cc8ef; }
.rk.urgent { background: var(--red); border-color: var(--red); color: #fff; }
.rembody { font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.rem .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.rem .okc { color: var(--green); }
.rembtns { display: flex; flex-direction: column; gap: 6px; }
.smallbtn.okbtn { border-color: var(--green); color: var(--green); display: inline-flex; align-items: center; gap: 4px; }
.smallbtn.okbtn svg { width: 14px; height: 14px; }
.remadd { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: center; margin-top: 10px; padding: 9px; border-style: dashed; }
.remadd svg { width: 15px; height: 15px; }
.cdot.k-fix { background: var(--warn); }
.cdot.k-reminder { background: var(--gold); }
.cdot.k-note { background: #9cc8ef; }
.chip small { color: var(--muted); font-size: 11px; }
.chip.on small { color: #555; }
.remkinds { width: 100%; }
.remkinds button { flex: 1; }
.spotsel { flex: 1; min-width: 0; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.urgentbox { align-self: end; padding-bottom: 12px; font-size: 15px; }
.urgentbox input { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .rem { grid-template-columns: 40px 1fr; gap: 10px; }
  .rem .thumb, .remicon { width: 40px; height: 40px; }
  .rembtns { grid-column: 2; flex-direction: row; }
  .locline .spotsel { flex-basis: 100%; }
}

/* ---------- inventory filters ---------- */
.invfilters { display: grid; gap: 8px; }
.selrow { display: flex; gap: 8px; flex-wrap: wrap; }
.selbox { display: flex; align-items: center; gap: 8px; background: var(--s1); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.selbox span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.selbox select { background: none; border: 0; padding: 9px 0; font-size: 14px; outline: 0; max-width: 220px; }
.selbox select option, .selbox select optgroup { background: var(--s1); }
.chip.flag.on { background: var(--gold); border-color: var(--gold); color: #000; }
.invcount { font-size: 12px; color: var(--muted); }
.invcount .linkish { font-size: 12px; padding: 0; color: var(--gold); }
.loc.hit { border-color: var(--gold); color: var(--gold); }
.invnote { font-size: 12px; color: #cfcfd6; margin-top: 6px; border-left: 2px solid var(--line2); padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .selbox { flex: 1; min-width: 150px; }
  .selbox select { max-width: none; flex: 1; min-width: 0; }
  .tabs button { font-size: 8.8px; letter-spacing: .05em; padding: 10px 2px; }
  .tabs button .pill { padding: 1px 5px; font-size: 9px; }
}
.filters > *, .invfilters > * { min-width: 0; }
.selbox { min-width: 0; }
.selbox select { min-width: 0; width: 100%; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .selbox { flex: 1 1 100%; }
}
.inv > div, .rem > div, .invlist > * { min-width: 0; }
.ogrid { height: 320px; }
.oslot .osub { display: none; }
@media (max-width: 860px) { .ogrid { height: 250px; } }
.olbl .ltiny { display: none; }
@media (max-width: 860px) { .olbl .lfull { display: none; } .olbl .ltiny { display: inline; } }
.chipbtn.issuechip { border-color: var(--warn); color: var(--warn); font-weight: 700; }

/* ---------- supply list ---------- */
.gmcard { background: #f4f4f6; color: #111; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; border-left: 4px solid var(--red); }
.gmfrom { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.gmtitle { font-size: 16px; font-weight: 600; margin: 4px 0 2px; }
.gmcard .hint { color: #555; }
.gmhow { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: #333; }
.supstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-weight: 600; }
.stat span { font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.stat.ok b { color: var(--green); }
.stat.bad b { color: var(--red); }
.suptools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.supfind { margin: 6px 0 14px; }
.supsec { margin-bottom: 22px; scroll-margin-top: calc(var(--top-h) + 10px); }
.supsec h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin: 0 0 8px; }
.supsec h2 .n { background: var(--red); color: #fff; border-radius: 6px; padding: 1px 7px; letter-spacing: 0; font-size: 12px; }
.supsecstat { margin-left: auto; font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--muted); font-weight: 400; }
.gmtag { display: inline-block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--red); border: 1px solid rgba(255,45,61,.5); border-radius: 5px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
.gmnote { font-size: 12.5px; color: #cfcfd6; line-height: 1.45; background: var(--s1); border: 1px dashed var(--line2); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.suphdr, .sup { display: grid; grid-template-columns: minmax(200px, 1.5fr) 110px minmax(220px, 1.4fr) 100px; gap: 12px; align-items: start; }
.suphdr { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 0 12px 4px; }
.sup { background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.sup > * { min-width: 0; }
.sup.s-ready { border-left-color: var(--green); }
.sup.s-short { border-left-color: var(--red); }
.supname b { font-weight: 500; font-size: 14.5px; }
.supdetail { display: block; font-size: 13px; color: var(--gold); margin-top: 1px; }
.supsays { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.supneed small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.supneed b { font-size: 20px; font-weight: 600; }
.supneed small.how { letter-spacing: .02em; text-transform: none; color: var(--muted); font-size: 11px; margin-top: 2px; }
.havebig b { font-size: 20px; font-weight: 600; margin-right: 6px; }
.havebig small { font-size: 11px; color: var(--muted); }
.supq { font-size: 12px; color: #cfcfd6; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.suphave .locs { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; }
.supmatch { font-size: 12px; padding: 2px 0; text-align: left; }
.supcount { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.supcount .stepper input { width: 54px; }
.supcond { background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px; font-size: 13px; }
.supcond.c-good { border-color: var(--green); color: var(--green); }
.supcond.c-worn { border-color: var(--warn); color: var(--warn); }
.supcond.c-replace { border-color: var(--red); color: var(--red); }
.supseg button.on.s-ok { background: var(--green); color: #000; }
.supseg button.on.s-problem { background: var(--red); color: #fff; }
.supcheck { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; }
.supcheck.on { border-color: var(--green); color: var(--green); }
.supcheck svg { width: 14px; height: 14px; }
.supshort { text-align: right; }
.supshort b { font-size: 22px; display: block; line-height: 1.1; }
.supshort small { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; }
.okc { color: var(--green); display: inline-flex; gap: 4px; align-items: center; }
.okc svg { width: 15px; height: 15px; }
.supnoteline { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: -4px; }
.supnoteline .linkish { font-size: 12px; padding: 0; }
.supnote { font-size: 12.5px; color: var(--text); background: rgba(226,178,92,.1); border: 1px solid rgba(226,178,92,.4); border-radius: 8px; padding: 4px 8px; white-space: pre-wrap; }
.supcard { width: 100%; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; text-align: left; background: #f4f4f6; color: #111; border: 0; border-left: 4px solid var(--red); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.supcard span { color: #444; font-size: 13px; flex: 1; }
.supcard em { font-style: normal; font-weight: 700; color: var(--red); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 860px) {
  .supstats { grid-template-columns: repeat(2, 1fr); }
  .suphdr { display: none; }
  .sup { grid-template-columns: 1fr auto; gap: 8px 10px; }
  .supname { grid-column: 1 / -1; }
  .supneed { grid-column: 1; grid-row: 2; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .supneed small.how { display: inline; }
  .supshort { grid-column: 2; grid-row: 2; }
  .suphave { grid-column: 1 / -1; }
  .suptools .seg { width: 100%; }
  .suptools .seg button { flex: 1; padding: 8px 6px; font-size: 12px; }
  .tabs button { font-size: 8.2px; letter-spacing: .03em; padding: 10px 1px; }
}
.suphave .smallbtn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; } .suphave .smallbtn svg { width: 13px; height: 13px; }
.thumb img, .photo-prev img, .mini img, .fixloose img { cursor: zoom-in; }
.photozoom { touch-action: pinch-zoom; }
.photozoom img { max-width: 100%; max-height: calc(100dvh - 90px); object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.photozoom .zx { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; background: rgba(0,0,0,.6); color: #fff; }
.sectab.well { border-color: #2c3a44; }
.ocell.r-well { background: #13161b; border-color: #3b4a58; }
.osec.owell .ocell .osub { -webkit-line-clamp: 3; }

/* ---------- two sides of the bar ---------- */
.sideswitch { flex: none; }
.sideswitch button { position: relative; padding: 7px 12px; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.sideswitch button b { font-weight: 800; margin-left: 2px; }
.sideswitch button.on { background: var(--red); color: #fff; }
.sideswitch .dot { position: absolute; top: -7px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #000; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.sideswitch .dot.red { background: var(--red); color: #fff; }
.sideswitch .sissue { position: absolute; bottom: -6px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--warn); color: #000; font-size: 9px; font-weight: 800; display: grid; place-items: center; border: 2px solid #000; }
.acrossbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--line2); border-radius: 10px; padding: 7px 12px; font-size: 12px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; flex: none; }
.acrossbtn b { color: var(--text); letter-spacing: .12em; }
.acrossbtn svg { width: 15px; height: 15px; }
.acrossbtn:hover { border-color: #fff; color: var(--text); }
.acrossnone { align-self: center; font-size: 11px; color: var(--dim); white-space: nowrap; padding: 0 6px; flex: none; }
@media (max-width: 860px) {
  .mapmode { order: -2; }
  .sideswitch { order: -1; flex: 1; }
  .sideswitch button { flex: 1; padding: 7px 6px; font-size: 11px; }
}

/* ---------- panorama ---------- */
.pano { display: grid; gap: 10px; }
.panohead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.panohead .grow { flex: 1; min-width: 200px; }
.panoscroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #050505; padding: 10px 10px 12px; display: grid; gap: 12px; scrollbar-color: var(--line2) transparent; }
.panorow { display: flex; gap: 10px; align-items: stretch; width: max-content; }
.panolabel { position: sticky; left: 0; z-index: 4; flex: none; width: 108px; display: flex; flex-direction: column; justify-content: center; gap: 4px; background: rgba(5,5,5,.94); border-right: 1px solid var(--line); padding-right: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.panolabel b { color: var(--text); font-size: 13px; letter-spacing: .1em; }
.panolabel small { text-transform: none; letter-spacing: .02em; font-size: 11px; color: var(--dim); }
.panotrack { display: flex; gap: 6px; }
.ptile { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); flex: none; background: #000; }
.ptile.cur { border-color: var(--line2); }
.pstage { position: absolute; }
.pstage > img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ptlabel { position: absolute; left: 6px; top: 6px; z-index: 3; background: rgba(0,0,0,.78); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px 10px; font-size: 11px; color: #ddd; white-space: nowrap; }
.ptlabel b { color: #fff; letter-spacing: .1em; }
.pspot { overflow: visible; }
.pspot .ptag { position: absolute; left: 3px; top: 3px; font-size: 9.5px; letter-spacing: .06em; font-weight: 700; background: rgba(0,0,0,.72); border-radius: 5px; padding: 1px 5px; pointer-events: none; }
.hot.pspot { border-color: rgba(255,255,255,.18); }
.pfridge { position: absolute; }
.pfrhead { position: absolute !important; left: 0; top: -18px; height: 16px; border: 0 !important; background: rgba(0,0,0,.7) !important; border-radius: 4px; font-size: 9.5px; letter-spacing: .1em; font-weight: 700; color: #9cc8ef; padding: 0 6px; }
.pfrhead .imark { position: static; display: inline-grid; width: 13px; height: 13px; font-size: 9px; margin-left: 4px; border-width: 1px; }
.pfrbody { position: absolute; inset: 0; }
.pfrbody .pspot { margin: 0; box-sizing: border-box; }
.pchips { position: absolute; left: 3px; right: 3px; top: 20px; bottom: 3px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; overflow: hidden; }
.pchip { display: inline-block; max-width: 100%; font-size: 10px; line-height: 1.2; font-weight: 600; background: var(--gold); color: #000; border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pchip.loose { background: #fff; border: 1px dashed #000; }
.pchip.rule { background: rgba(226,178,92,.35); color: #fff; cursor: not-allowed; }
.pchip.more { background: rgba(0,0,0,.7); color: #fff; cursor: default; }
.pchip.dragging, .tchip.dragging, .lpiece.dragging { opacity: .35; }
.lifted { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.dragghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: .92; box-shadow: 0 10px 30px rgba(0,0,0,.7); }
body.isdragging, body.isdragging * { cursor: grabbing !important; user-select: none; }
.droptarget { outline: 3px solid var(--red) !important; outline-offset: -2px; background: rgba(255,45,61,.18) !important; }
.ptray { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.ptrayhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ptrayhead .find { margin-left: 0; min-width: 180px; height: 36px; }
.ptraylist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 130px; overflow-y: auto; }
.tchip { display: inline-flex; gap: 8px; align-items: center; background: var(--s2); border: 1px solid var(--line2); border-radius: 10px; padding: 4px 10px 4px 4px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; max-width: 240px; }
.tchip .thumb { width: 30px; height: 30px; font-size: 12px; pointer-events: none; }
.tchip b { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchip small { display: block; font-size: 10.5px; color: var(--muted); }
.tchip > span { min-width: 0; }
@media (max-width: 860px) {
  .panolabel { width: 74px; font-size: 9px; }
  .panolabel b { font-size: 11px; }
  .panolabel small { display: none; }
  .pchip { font-size: 9px; padding: 1px 4px; }
  .pspot .ptag { font-size: 8.5px; }
  .ptraylist { max-height: 150px; }
}

/* ---------- well layout plan ---------- */
.layoutsheet { z-index: 76; }
.layoutbody { max-width: 1600px; margin: 0 auto; display: grid; gap: 12px; }
.llane { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.lsec, .lpark { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.lsec { flex: 1 0 250px; }
.lsechead { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.lsechead b { color: var(--text); font-size: 14px; letter-spacing: .1em; margin-right: 4px; }
.lrow { display: flex; gap: 6px; min-height: 130px; align-items: stretch; }
.lpark .lrow { min-height: 90px; flex-wrap: wrap; }
.lpiece { position: relative; min-width: 70px; border: 1px solid var(--line2); background: var(--s2); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 3px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lpark .lpiece { flex: 0 0 140px !important; }
.lpiece b { font-size: 12px; letter-spacing: .08em; }
.lpiece span { font-size: 11.5px; color: #cfcfd6; line-height: 1.3; }
.lpiece em { font-style: normal; font-size: 10.5px; color: #000; background: var(--gold); border-radius: 4px; padding: 1px 5px; align-self: flex-start; margin-top: auto; }
.lpiece.r-cold { background: #0f1820; border-color: #24394a; }
.lpiece.r-well { background: #13161b; border-color: #3b4a58; }
.lpiece.r-equipment { border-style: dotted; }
.lpiece.r-backstock { border-style: dashed; background: #141416; }
.lpiece.moved { border: 2px solid var(--gold); }
.lpiece.new { border: 2px dashed var(--red); }
.lpiece .lx { position: absolute; top: 4px; right: 4px; background: none; border: 0; padding: 2px; color: var(--muted); display: grid; }
.lpiece .lx svg { width: 14px; height: 14px; }
.laddrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.laddrow input { flex: 1; min-width: 200px; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.lchanges { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.lnav { display: flex; gap: 8px; }
@media (max-width: 860px) {
  .lsec { flex-basis: 220px; }
  .lrow { min-height: 110px; }
  .lpiece { min-width: 58px; padding: 6px; }
}
.toast { pointer-events: none; }
.lsec { flex: 1 1 0; min-width: 200px; }
.lpiece { min-width: 52px; }
.lpiece span { overflow-wrap: anywhere; }

/* ---------- bottle status ---------- */
.stk .actions { flex-wrap: wrap; }
.bstat { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--line2); background: none; color: var(--muted); margin-right: 4px; }
button.bstat { cursor: pointer; }
.bstat.b-active { border-color: var(--green); color: var(--green); }
.bstat.b-backup { border-color: #9cc8ef; color: #9cc8ef; }
.bstat.b-consolidated { border-color: var(--gold); color: var(--gold); }
.bstat.b-discarded { border-color: var(--red); color: var(--red); }
.movedfrom { color: var(--dim) !important; }
.dimtxt { color: var(--dim); }
.countsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.countsum div { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.countsum b { display: block; font-size: 22px; font-weight: 600; }
.countsum span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.invstatus { flex-wrap: wrap; margin-bottom: 12px; }
.invstatus small { color: inherit; opacity: .6; font-size: 11px; }
.endrow { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.endrow > div { min-width: 0; }
.endrow .nm { font-weight: 500; }
.endrow .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.endbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bhist { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.passes { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.passes summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.passes summary::-webkit-details-marker { display: none; }
.passes summary::before { content: "▸"; color: var(--muted); }
.passes[open] summary::before { content: "▾"; }
.passes ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.passes li { display: flex; gap: 10px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.passes li.done { opacity: .75; }
.passes li .grow { flex: 1; min-width: 0; }
.passes li small { display: block; font-size: 12px; color: var(--muted); }
.passes .pn { width: 24px; height: 24px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.passes li.done .pn { background: var(--green); color: #000; }
.passbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: linear-gradient(90deg, rgba(79,208,122,.16), rgba(79,208,122,.04)); border: 1px solid var(--green); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.passbar .grow { flex: 1; min-width: 220px; }
.sc { display: inline-block; font-size: 10px; letter-spacing: .1em; font-weight: 800; border-radius: 6px; padding: 2px 7px; margin-bottom: 3px; }
.sc-have { background: rgba(79,208,122,.18); color: var(--green); }
.sc-low { background: rgba(255,176,32,.18); color: var(--warn); }
.sc-need { background: var(--red); color: #fff; }
.sc-none { background: var(--s3); color: var(--muted); }
.sup.c-low { border-left-color: var(--warn); }
.stat.warnc b { color: var(--warn); }
.supstats { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) {
  .countsum { grid-template-columns: repeat(2, 1fr); }
  .supstats { grid-template-columns: repeat(2, 1fr); }
  .endrow { grid-template-columns: 40px 1fr; }
  .endbtns { grid-column: 2; justify-content: flex-start; }
}

/* ---------- supply list, simplified ---------- */
.subhead { margin: 4px 0 0; }
.supbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.supchips { display: flex; gap: 6px; flex-wrap: wrap; }
.supchip { border: 1px solid var(--line2); background: var(--s1); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.supchip b { color: var(--text); margin-left: 3px; }
.supchip.sc-need { border-color: rgba(255,45,61,.6); }
.supchip.sc-low { border-color: rgba(255,176,32,.6); }
.supchip.sc-have { border-color: rgba(79,208,122,.5); }
.supchip.on { background: #fff; color: #000; border-color: #fff; }
.supchip.on b { color: #000; }
.supmodebtn { font-size: 12px; margin-left: auto; padding: 0; }
details.supsec { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; padding: 0 10px; }
details.supsec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 2px; flex-wrap: wrap; }
details.supsec > summary::-webkit-details-marker { display: none; }
details.supsec > summary::after { content: "▸"; color: var(--muted); margin-left: 4px; }
details.supsec[open] > summary::after { content: "▾"; }
details.supsec > summary .n { background: var(--s3); color: var(--text); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
details.supsec > summary .t { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
details.supsec > summary .supsecstat { margin-left: auto; font-size: 12px; color: var(--muted); }
details.supsec[open] { padding-bottom: 8px; }
details.supsec .gmnote { border: 0; background: none; padding: 0 2px 8px; font-size: 12px; color: var(--muted); margin: 0; }
details.supsec .sup { background: var(--s2); }
.supsays { font-size: 12px; color: var(--dim); margin-top: 2px; }
@media (max-width: 860px) {
  .supmodebtn { margin-left: 0; }
  details.supsec > summary .supsecstat { margin-left: 0; width: 100%; }
}

/* ---------- recount a section from photos ---------- */
.recountbtn { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--s1); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.recountbtn:hover { border-color: #fff; }
.ohead .smallbtn svg { width: 14px; height: 14px; vertical-align: -2px; }
.ptrecount { position: absolute; right: 6px; top: 6px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.78); display: grid; place-items: center; padding: 0; }
.ptrecount svg { width: 15px; height: 15px; }
.rcphotos { display: grid; gap: 8px; margin: 10px 0 14px; }
.rcphoto { display: flex; gap: 10px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.rcphoto .grow { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rcthumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.rchint { background: var(--s3); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; max-width: 100%; }
.spinner.sm { width: 22px; height: 22px; border-width: 2px; margin: 0; flex: none; }
.rcadd { grid-template-columns: 1fr 1fr; }
.rcbulk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.5); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; }
.rclist { max-height: 58dvh; overflow: auto; }
.rcrow { display: flex; gap: 10px; align-items: center; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.rcrow.off { opacity: .55; }
.rcrow input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--red); flex: none; }
.rcrow .grow { flex: 1; min-width: 0; }
.rcrow b { font-weight: 500; font-size: 14px; }
.rcrow small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rcrow select { background: var(--s3); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; font-size: 12px; }
.rcmv { display: inline-flex; gap: 4px; align-items: center; color: var(--text); margin-left: 4px; }
.rcmv input { width: 15px !important; height: 15px !important; }
.rctag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; border-radius: 6px; padding: 3px 7px; white-space: nowrap; flex: none; }
.rctag.same { color: var(--muted); border: 1px solid var(--line2); }
.rctag.chg { background: var(--gold); color: #000; }
.rctag.add { background: var(--green); color: #000; }
.rctag.gone { background: rgba(255,45,61,.2); color: #ff8a93; }
.rctag.newitem { background: var(--s3); color: var(--text); font-weight: 600; }
.stepper.sm button { width: 28px; height: 28px; font-size: 15px; }
.stepper.sm span { width: 30px; font-size: 13px; }
@media (max-width: 860px) {
  .recountbtn { height: 36px; padding: 0 10px; font-size: 11px; }
  .rcadd { grid-template-columns: 1fr; }
  .rcrow { flex-wrap: wrap; }
  .rcrow .grow { flex-basis: calc(100% - 40px); }
}
@media (max-width: 860px) {
  .maptools .find { flex: 1 1 100%; }
  details.supsec > summary::after { display: none; }
}
.panolabel { display: none; }
@media (max-width: 860px) {
  .sectabs { gap: 5px; }
  .sectab { min-width: 0; flex: 1 1 0; padding: 8px 4px; font-size: 12.5px; }
  .sectab small { display: none; }
}

/* recount is for phones and iPads */
html:not(.touch) [data-act="recount"] { display: none !important; }

/* ---------- live dot ---------- */
.livebtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--s2); font-size: 12px; font-weight: 600; color: var(--muted); }
.livebtn i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.livebtn.l-live i { background: var(--green); box-shadow: 0 0 0 0 rgba(79,208,122,.7); animation: livepulse 2s infinite; }
.livebtn.l-live span { color: var(--text); }
.livebtn.l-down i { background: var(--red); }
.livebtn.l-connecting i { background: var(--warn); }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(79,208,122,.7); } 70% { box-shadow: 0 0 0 8px rgba(79,208,122,0); } 100% { box-shadow: 0 0 0 0 rgba(79,208,122,0); } }
.livebtn + .helpbtn { margin-left: 8px; }
.livelist { display: grid; gap: 6px; }
.liveperson { display: flex; align-items: center; gap: 8px; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.liveperson i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.liveperson b { font-weight: 500; }
.liveperson small { color: var(--muted); }
.liveperson span { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ---------- menu ---------- */
#menuHead { display: grid; gap: 10px; margin-bottom: 16px; min-width: 0; }
#menuHead .seg { flex-wrap: wrap; width: fit-content; }
.menulegend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); }
.menulegend span { display: inline-flex; align-items: center; gap: 5px; }
.menulegend .ld { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.menulegend .ld.have { background: var(--green); }
.menulegend .ld.low { background: var(--warn); }
.menulegend .ld.missing { background: var(--red); }
.menulegend .ld.unknown { border: 1px dashed var(--muted); }
.scrollrow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0 -2px; }
.scrollrow::-webkit-scrollbar { display: none; }
.scrollrow .chip { flex: none; padding: 8px 14px; font-size: 13px; }
.moretools .pill.quiet, .sheetrow .pill.quiet { background: var(--s3); color: var(--gold); border: 1px solid rgba(226,178,92,.5); }
.actsheet { display: flex; flex-direction: column; gap: 8px; }
.actsheet .dsub { margin: 10px 2px 2px; }
.sheetrow { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); }
.sheetrow:hover { border-color: var(--line2); }
.sheetrow b { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.sheetrow small { font-size: 12px; color: var(--muted); }
.sheetnote { margin: 8px 2px 0; line-height: 1.45; }
#view-menu .viewhead, #view-inventory .viewhead, #view-supplies .viewhead, #view-restock .viewhead { flex-wrap: nowrap; }
.viewhead-actions .btn { padding: 8px 14px; }
.menusec { margin-bottom: 22px; }
.menusec h2 { font-size: 20px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; display: flex; flex-direction: column; gap: 2px; }
.menusec h2 small { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.menugroup h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 14px 2px 8px; font-weight: 700; }
.menugroup h3 span { letter-spacing: .04em; color: var(--text); font-size: 14px; }
.drinks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.drink { background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.drink.d-low { border-left-color: var(--warn); }
.drink.d-missing, .drink.d-unknown { border-left-color: var(--red); }
.drinkhead { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.drinkhead b { font-size: 16px; font-weight: 600; }
.dtag { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border: 1px solid var(--line2); color: var(--muted); border-radius: 5px; padding: 1px 5px; }
.dline { font-size: 12.5px; color: var(--muted); font-style: italic; }
.dline.small { font-style: normal; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ings { display: flex; gap: 5px; flex-wrap: wrap; }
.ings.inline { display: inline-flex; }
.ing { font-size: 12px; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line2); background: var(--s2); color: var(--text); }
button.ing { cursor: pointer; }
.ing-have { border-color: rgba(79,208,122,.6); color: #bff0cf; }
.ing-low { border-color: var(--warn); color: var(--warn); }
.ing-missing { border-color: var(--red); color: #ff8a93; background: rgba(255,45,61,.08); }
.ing-unknown { border-style: dashed; color: var(--muted); }
.drinkfoot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.dstatus { font-size: 12px; font-weight: 600; flex: 1; min-width: 120px; }
.dstatus.s-have { color: var(--green); }
.dstatus.s-low { color: var(--warn); }
.dstatus.s-missing, .dstatus.s-unknown { color: #ff8a93; }
.dst { display: inline-flex; gap: 4px; }
.dst span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; border-radius: 5px; padding: 2px 6px; }
.dst .ok { background: rgba(79,208,122,.18); color: var(--green); }
.dst .no { background: var(--s3); color: var(--dim); }
@media (max-width: 860px) { .drinks { grid-template-columns: 1fr; } }

/* ---------- supplies tabs + station kits ---------- */
.suptabs { flex-wrap: wrap; margin-bottom: 10px; }
.suptabnote { margin: 0 0 10px; }
.kitbar { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
.kitbar .hint { flex-basis: 100%; }
.kitgroup { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.kitgroup h3 { margin: 4px 2px 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.kithead, .kitrow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 2), 64px); gap: 6px; align-items: center; }
.kithead span { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); text-align: center; font-weight: 700; }
.kitrow { padding: 5px 0; border-top: 1px solid var(--line); }
.kitname b { font-weight: 500; font-size: 13.5px; }
.kitname small { display: block; font-size: 11.5px; color: var(--gold); }
.kitcell { border-radius: 8px; border: 1px solid var(--line2); background: var(--s2); padding: 6px 0; font-size: 13px; font-weight: 700; }
.kitcell.ok { border-color: rgba(79,208,122,.6); color: var(--green); }
.kitcell.part { border-color: var(--warn); color: var(--warn); }
.kitcell.no { border-color: rgba(255,45,61,.6); color: #ff8a93; }
.kitsrc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.kitsrc .smallbtn { margin-left: auto; }
@media (max-width: 860px) {
  .kithead, .kitrow { grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 2), 52px); }
  .livebtn { height: 30px; padding: 0 8px; }
}

/* ---------- stay fitted to the phone / iPad screen ---------- */
/* clip, not hidden: hidden turns the page into its own scroll box and breaks the sticky header and filter bars */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { touch-action: manipulation; overscroll-behavior-x: none; }
main, .view, .modal-card, .drawer { max-width: 100%; }
img, video { max-width: 100%; }
/* iPhones zoom in on any text box or dropdown under 16px; keep them at 16px on touch screens */
html.touch input, html.touch select, html.touch textarea { font-size: 16px !important; }
.viewhead h1, .viewhead > div { min-width: 0; }
.rcitem { display: block; max-width: 100%; width: 100%; background: var(--s3); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.rcwhich { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.rcwhich span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.rcwhich.ask span { color: var(--warn); }
.rcwhich select { background: var(--s3); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; font-size: 13px; max-width: 100%; }
.rcwhich.ask select { border-color: var(--warn); }
.rcrow.needpick { border-color: var(--warn); }
.rcbulk.ask { background: rgba(255,176,32,.14); }
.rctag.pick { background: var(--warn); color: #000; }

/* ---------- menu: recipes, editor, guest menu ---------- */
.menutools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.menutools .btn { padding: 9px 12px; font-size: 11.5px; }
.menudraft { background: rgba(226,178,92,.1); border: 1px solid rgba(226,178,92,.4); color: #f1d49c; border-radius: 12px; padding: 9px 12px; font-size: 13px; margin: 10px 0 4px; }
.drinkopen { all: unset; display: grid; gap: 4px; cursor: pointer; min-width: 0; }
.drinkopen:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.dphoto { width: 100%; height: 130px; object-fit: cover; border-radius: 9px; margin-bottom: 4px; }
.dprice { font-size: 12px; color: var(--gold); font-weight: 600; }
.dtag.draft { border-color: rgba(226,178,92,.6); color: var(--gold); }
.dhidden { opacity: .55; }
.dyield { font-size: 12.5px; color: var(--text); }
.dyield.lowy { color: var(--warn); }
.dyield.bad { color: #ff8a93; font-weight: 600; }
.drinkadd { border: 1px dashed var(--line2); background: none; border-radius: 12px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; font-size: 13px; }
.drinkadd:hover { color: var(--text); border-color: var(--muted); }
.draftnote { background: rgba(226,178,92,.1); border: 1px solid rgba(226,178,92,.4); color: #f1d49c; border-radius: 10px; padding: 8px 11px; font-size: 13px; margin-bottom: 12px; }
.rechead { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.recph { all: unset; cursor: zoom-in; display: block; }
.recph img { display: block; width: 100%; border-radius: 10px; object-fit: cover; }
.recph.hero img { aspect-ratio: 4/5; }
.recnoph { border: 1px dashed var(--line2); background: var(--s1); border-radius: 10px; color: var(--muted); display: grid; place-items: center; gap: 6px; padding: 18px 10px; font-size: 12px; text-align: center; aspect-ratio: 4/5; }
.recmeta { display: grid; gap: 6px; min-width: 0; }
.kv { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 13px; }
.kv span { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.kv b { font-weight: 500; }
.spec { display: grid; gap: 6px; }
.specrow { display: grid; grid-template-columns: 118px auto 1fr; gap: 10px; align-items: center; }
.specrow .amt { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.specrow .ing { justify-self: start; }
.specrow small { color: var(--muted); font-size: 12px; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.steps li { font-size: 14px; line-height: 1.45; }
.steps li::marker { color: var(--gold); font-weight: 700; }
.steps .stepph { margin-top: 6px; max-width: 220px; }
.steps .stepph img { border-radius: 8px; }
.recnotes { font-size: 13.5px; color: var(--muted); margin: 0; white-space: pre-wrap; }
.yieldbox { display: flex; gap: 8px; flex-wrap: wrap; }
.yieldbox > div { background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; display: grid; justify-items: center; min-width: 76px; }
.yieldbox b { font-size: 22px; font-weight: 600; }
.yieldbox small { color: var(--muted); font-size: 11px; }
.btn.danger { color: #ff8a93; border-color: rgba(255,45,61,.5); }
.edsec { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 8px; display: grid; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.grid2 > *, .grid3 > * { min-width: 0; }
.chks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--red); }
.specedit, .stepsedit { display: grid; gap: 8px; }
.specerow { display: grid; grid-template-columns: minmax(0,1.6fr) 74px minmax(0,1fr) minmax(0,1.4fr) auto; gap: 6px; align-items: center; }
.specerow input, .specerow select, .stepe textarea, .newing input, .newing select, .secerow input, .grperow input {
  background: var(--s2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; min-width: 0; width: 100%; outline: none;
}
.newing { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-left: 10px; border-left: 2px solid var(--gold); }
.rowbtns { display: inline-flex; gap: 4px; }
.iconbtn.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.iconbtn.sm svg { width: 14px; height: 14px; }
.stepe { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; }
.stepe > b { color: var(--gold); padding-top: 9px; text-align: right; }
.stepe textarea { resize: vertical; min-height: 44px; }
.stepebtns { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.stepebtns .smallbtn, .field .smallbtn { display: inline-flex; align-items: center; gap: 4px; justify-self: start; }
.stepebtns .smallbtn svg, .field .smallbtn svg { width: 14px; height: 14px; }
.stepthumb { display: inline-flex; align-items: center; gap: 6px; }
.stepthumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.batched { border-left: 2px solid var(--line2); padding-left: 12px; display: grid; gap: 10px; }
.secedit { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; display: grid; gap: 8px; }
.secerow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) auto auto; gap: 8px; align-items: center; }
.secerow input:first-child { font-weight: 600; }
.grperow { display: grid; grid-template-columns: minmax(0,1fr) 90px auto auto auto; gap: 8px; align-items: center; padding-left: 14px; }
.grperow .price { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.guestgrid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.qrbox { background: #fff; border-radius: 12px; padding: 10px; aspect-ratio: 1; display: grid; place-items: center; }
.qrbox svg { width: 100%; height: 100%; }
.qrbox .hint { color: #555; }
.guestacts { display: grid; gap: 8px; }
.guestacts .btn { text-decoration: none; }
.guesturl { font-size: 13px; color: var(--gold); word-break: break-all; }
@media (max-width: 640px) {
  .rechead { grid-template-columns: 1fr; }
  .recph.hero img, .recnoph { aspect-ratio: 16/10; }
  .specrow { grid-template-columns: 96px 1fr; }
  .specrow small { grid-column: 2; margin-top: -4px; }
  .grid3 { grid-template-columns: 1fr; }
  .specerow { grid-template-columns: 1fr 66px 1fr; }
  .specerow > input[data-k="note"] { grid-column: 1 / 3; }
  .newing { grid-template-columns: 1fr; }
  .stepe { grid-template-columns: 18px 1fr; }
  .stepebtns { grid-column: 2; justify-content: flex-start; }
  .secerow { grid-template-columns: 1fr auto auto; }
  .secerow input[data-k="note"] { grid-column: 1 / -1; grid-row: 2; }
  .grperow { grid-template-columns: 1fr 80px auto; padding-left: 8px; }
  .grperow .hint { display: none; }
  .guestgrid { grid-template-columns: 1fr; }
  .qrbox { max-width: 220px; }
  .menutools .btn { flex: 1 1 auto; }
}

/* ---------- printing the recipe book ---------- */
#printArea { display: none; }
@media print {
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing { background: #fff; color: #000; }
  body.printing #printArea { display: block; }
  .pbook { font-family: var(--font); color: #000; }
  .pcover { text-align: center; padding-top: 30vh; page-break-after: always; }
  .pcover h1 { font-weight: 300; letter-spacing: .3em; font-size: 48px; margin: 0 0 12px; }
  .pdrink { page-break-inside: avoid; border-bottom: 1px solid #ccc; padding: 16px 0; }
  .pdrink header { display: flex; justify-content: space-between; gap: 16px; }
  .pdrink header img { width: 150px; height: 150px; object-fit: cover; border-radius: 8px; }
  .pdrink h2 { margin: 2px 0; font-size: 22px; }
  .pdrink h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; margin: 12px 0 6px; }
  .pdrink small { color: #555; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
  .ptag { font-style: italic; color: #444; margin: 0; }
  .pdraft { color: #a06b00; font-size: 12px; margin: 4px 0 0; }
  .pmeta { font-size: 12.5px; margin: 8px 0; }
  .pbook .spec { gap: 3px; }
  .pbook .specrow { grid-template-columns: 130px auto 1fr; }
  .pbook .specrow small { color: #555; }
  .pbook .steps li { font-size: 12.5px; }
  .pbook .steps li::marker { color: #000; }
  .pbook .stepph img { max-width: 160px; }
  .pnotes { font-size: 12px; color: #444; }
}
.modal-card.wide { width: min(820px, 100%); }
.steps { list-style: decimal outside; padding-left: 26px !important; }
.steps li { display: list-item; }

/* ---------- Inventory tab: Stations · Restock · Items · Supplies ---------- */
.invnav { margin: -4px 0 14px; }
.invnav-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.invnav-seg button { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; display: grid; gap: 2px; justify-items: center; color: var(--muted); min-width: 0; }
.invnav-seg button b { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.invnav-seg button small { font-size: 11.5px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.invnav-seg button small.warn { color: var(--warn); }
.invnav-seg button.on { background: #fff; border-color: #fff; color: #000; }
.invnav-seg button.on small { color: #555; }
.invnav-seg button.on small.warn { color: #b25e00; }
.invacts { flex-wrap: wrap; }
@media (max-width: 860px) {
  .tabs button { font-size: 10.5px !important; letter-spacing: .1em !important; padding: 10px 6px !important; }
  .invnav-seg { gap: 4px; }
  .invnav-seg button { padding: 8px 2px; }
  .invnav-seg button b { font-size: 10.5px; letter-spacing: .08em; }
  .invnav-seg button small { font-size: 10.5px; }
  .invacts .btn { padding: 8px 10px; font-size: 10.5px; }
}

/* ---------- how-to: words in this lesson ---------- */
.howto .terms { grid-area: terms; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.howto .terms summary { cursor: pointer; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.terms dl, .wordcard dl { margin: 8px 0 4px; display: grid; gap: 8px; }
.terms dt, .wordcard dt { font-weight: 600; font-size: 13.5px; }
.terms dd, .wordcard dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: #cfcfd6; }
.howto { grid-template-areas: "list head head" "list shot side" "list shot nav" "list shot terms"; }
@media (max-width: 1100px) { .howto { grid-template-areas: "list list" "head head" "shot side" "shot nav" "shot terms"; } }
@media (max-width: 860px) {
  .howto { grid-template-areas: "pick pick" "head head" "shot side" "nav nav" "terms terms"; }
  .howto.first .lhead .intro { display: block; font-size: 13.5px; margin-top: 4px; }
  .howto .terms { margin-bottom: 20px; }
}
.wordsheet { position: fixed; inset: 0; z-index: 96; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 16px; }
.wordcard { width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--s1); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.howto { grid-template-rows: auto auto auto 1fr; }
.howto .terms { align-self: start; }
@media (max-width: 860px) { .howto { grid-template-rows: none; } }
.howto .terms summary { list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.howto .terms summary::-webkit-details-marker { display: none; }
.howto .terms summary::before { content: "+"; font-size: 15px; width: 12px; }
.howto .terms[open] summary::before { content: "−"; }
.howto .terms summary small { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400; }

/* ---------- how-to: Ask me ---------- */
.askme { margin: 0 0 18px; display: grid; gap: 10px; }
.askform { display: flex; gap: 8px; }
.askfield { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--s1); border: 1px solid var(--line2); border-radius: 14px; padding: 0 14px; min-width: 0; }
.askfield:focus-within { border-color: var(--gold); }
.askicon { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #000; font-weight: 700; display: grid; place-items: center; font-size: 14px; flex: none; }
.askfield input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 13px 0; font-size: 16px; }
.askform .btn { flex: none; }
.askex { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.askex > span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.askchip { background: var(--s1); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--text); }
.askchip:hover { border-color: var(--muted); }
.askans { background: var(--s1); border: 1px solid rgba(226,178,92,.45); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; }
.askans p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.askans.busy { display: flex; align-items: center; gap: 10px; color: var(--muted); border-color: var(--line); }
.askans.err { color: #f1d49c; font-size: 14px; }
.askans .smallbtn { justify-self: start; }
.askhint { font-size: 13px; color: var(--muted); }
.asklinks { display: grid; gap: 6px; }
.asklinks > small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.asklink { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; color: var(--text); }
.asklink:hover { border-color: var(--muted); }
.asklink .num { width: 24px; height: 24px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.asklink b { display: block; font-size: 14px; font-weight: 600; }
.asklink small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
@media (min-width: 861px) { .askme { max-width: 900px; } }

/* ---------- space switcher (header brand) ---------- */
.top .brand .brand-sub { white-space: nowrap; }
/* ---------- dashboard ---------- */
#view-home { max-width: 1180px; margin: 0 auto; }
.homehead { display: flex; align-items: flex-end; gap: 12px; margin: 6px 0 16px; }
.homehead .kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.homehead h1 { margin: 6px 0 0; font-size: 26px; font-weight: 300; letter-spacing: .04em; }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qbtn { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; color: var(--text); min-height: 72px; }
.qbtn:hover { border-color: var(--line2); background: var(--s2); }
.qbtn .qic { width: 40px; height: 40px; border-radius: 12px; background: var(--s3); display: grid; place-items: center; flex: none; }
.qbtn .qic svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qbtn .qtx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qbtn b { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.qbtn small { font-size: 12px; color: var(--muted); }
.qbtn small.warn { color: var(--warn); }
.homeh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 2px 10px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; }
.homeh small { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--muted); font-weight: 400; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); }
button.tile:hover { border-color: var(--red); box-shadow: 0 0 18px var(--red-glow); }
.tile .tcover { position: relative; aspect-ratio: 3 / 2; background: #050505; border-bottom: 1px solid var(--line); overflow: hidden; }
.tile .tcover img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
.tile .tcode { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.8); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px; font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.tile .there { position: absolute; right: 10px; top: 10px; background: var(--red); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.tile .tbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.tile .tname { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.tile .tsub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.tile .tstats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.tile .tstats b { color: var(--text); font-weight: 600; }
.tile .tstats .warn b, .tile .tstats .warn { color: var(--warn); }
.tile .tstats .bad b, .tile .tstats .bad { color: var(--red); }
.soonlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.soonlist .soon { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: 12px; opacity: .6;
  background: repeating-linear-gradient(135deg, #0a0a0c 0 10px, #0d0d10 10px 20px); }
.soonlist .soon b { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.soonlist .soon small { font-size: 11px; color: var(--muted); }
.soonhint { margin: 8px 2px 0; }
.homeneeds .rem { margin-bottom: 8px; }
.homeneeds .linkish { display: block; margin: 4px auto 0; }
/* space chips on Inventory and Reminders */
.spacechips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.spchips-label { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.chip.spchip { padding: 8px 14px; font-size: 13px; }
.rk.sp { border-color: #fff; color: #fff; }
#view-inventory.allmode .invnav, #view-inventory.allmode #invTop, #view-inventory.allmode .filters,
#view-inventory.allmode #invList, #view-inventory.allmode .invacts { display: none; }
.invall .filters, .invall #allFilters { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.invall .invcount { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spacetags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sptag { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 8px; }
.sptag b { color: var(--text); font-weight: 600; margin-left: 2px; }
.spgrp .linkish { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--text); text-decoration: none; padding: 0; }
.spgrp .linkish::after { content: " ›"; color: var(--muted); }
@media (max-width: 860px) {
  .homehead h1 { font-size: 22px; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brand-sub.long { letter-spacing: .2em; font-size: 8px; white-space: nowrap; }
  .top .who { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qbtn { padding: 12px 10px; gap: 10px; min-height: 64px; }
  .qbtn .qic { width: 34px; height: 34px; border-radius: 10px; }
  .qbtn b { font-size: 11.5px; letter-spacing: .12em; }
  .qbtn small { font-size: 11px; }
  .tiles { grid-template-columns: 1fr; }
  .soonlist { grid-template-columns: 1fr 1fr; }
  .tile .tcover { aspect-ratio: 2 / 1; }
  .tabs button { padding: 10px 3px !important; letter-spacing: .06em !important; font-size: 10px !important; }
}
@media (max-width: 300px) { .top .who { max-width: 84px; } .top { gap: 8px; } }
@media (max-width: 380px) { .backbtn { width: 34px; height: 34px; margin-right: -4px; } .backbtn:not([hidden]) ~ .brand .brand-sub.long { font-size: 7px; letter-spacing: .12em; } }
@media (max-width: 360px) { .qbtn .qic { display: none; } .qbtn b { letter-spacing: .08em; } .qbtn { min-height: 58px; } }
.top .helpbtn, .top .livebtn, .top .backbtn { flex: none; }
.top .who { min-width: 44px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) { .top { gap: 8px; } .top .livebtn { padding-left: 9px; padding-right: 9px; } .top .livebtn span { display: none; } }
.filtbtn .caret { font-size: 10px; color: inherit; opacity: .7; }
.filtpanel { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; }
.allcount { margin: 0 2px; }

/* ---------- how-to (v2): words first, then the step, then the clip as a reference ---------- */
.helpsheet { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.helpsheet[hidden] { display: none; }
.hwbar { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line); background: #000; }
.hwbar h1 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.hwaskbtn { margin-left: auto; padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; }
.hwaskbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.hwaskbtn[hidden] { display: none; }
.hwaskpane { flex: 1; overflow: auto; padding: 16px; max-width: 760px; width: 100%; margin: 0 auto; }
.hwaskpane > .hint { margin: 0 0 12px; font-size: 13px; }
.hw { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); max-width: 1500px; width: 100%; margin: 0 auto; }
.hw[hidden] { display: none; }
.hwlist { list-style: none; margin: 0; padding: 0 4px 0 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.hwlist button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; color: var(--muted); font-size: 13.5px; }
.hwlist button:hover { color: var(--text); background: var(--s1); }
.hwlist button.on { color: var(--text); background: var(--s2); border-color: var(--line2); }
.hwlist .num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.hwlist button.on .num { background: var(--red); border-color: var(--red); color: #fff; }
.hwmain { min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(280px, 560px) auto; grid-auto-rows: min-content; column-gap: 32px; row-gap: 14px; align-content: start; }
.hwmain > *:not(.hwshot) { grid-column: 1; }
.hwshot { grid-column: 2; grid-row: 1 / span 8; align-self: start; }
.hwpick { display: none; }
.hwhead .kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.hwhead h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 400; letter-spacing: .02em; }
.hwhead .intro { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.hwwords { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hwwords .wl { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-right: 2px; }
.wchip { background: none; border: 1px solid rgba(226,178,92,.45); color: #f1d49c; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; }
.wchip.on { background: var(--gold); border-color: var(--gold); color: #000; }
.wchip.all { border-style: dashed; color: var(--muted); border-color: var(--line2); }
.wdef { background: rgba(226,178,92,.08); border: 1px solid rgba(226,178,92,.35); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: #e9e3d6; }
.wdef { position: relative; }
.wdef b { display: block; color: var(--gold); font-size: 12px; letter-spacing: .08em; margin-bottom: 3px; padding-right: 28px; }
.wdefx { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; padding: 0; }
.wdefx svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.hwstep { background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.hwstep .steptext { font-size: 19px; line-height: 1.45; margin: 8px 0 12px; }
.hwstepfoot { display: flex; align-items: center; gap: 12px; }
.hwstepfoot .dots { margin: 0; }
.hwstepfoot .linkish { margin-left: auto; padding: 0; color: var(--gold); }
.hwnav { display: flex; gap: 10px; }
.hwnav .btn { padding: 12px 18px; }
.hwnav .btn.red { margin-left: auto; min-width: 140px; }
.hw .shot { display: block; padding: 6px; border-radius: 26px; background: #111; border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: zoom-in; }
.hw .shot video { display: block; height: min(calc(100dvh - 150px), 700px); width: auto; aspect-ratio: 540 / 1168; border-radius: 20px; background: #000; }
@media (max-width: 1100px) {
  .hw { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
  .hwstep .steptext { font-size: 17px; }
}
/* phone: one screen, no scrolling. The picture takes whatever height is left. */
@media (max-width: 860px) {
  .hwbar { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; gap: 10px; }
  .hw { display: flex; flex-direction: column; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 0; }
  .hwlist { display: none; }
  .hwmain { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
  .hwpick { display: flex; flex: none; align-items: center; gap: 8px; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
  .hwpick span { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .06em; }
  .hwpick select { flex: 1; min-width: 0; background: none; border: 0; padding: 10px 0; font-size: 15px; outline: 0; color: var(--text); }
  .hwhead { flex: none; }
  .hwhead .kicker { display: none; }
  .hwhead h2 { font-size: 19px; margin: 0; }
  .hwhead .intro { font-size: 13px; line-height: 1.4; margin-top: 3px; }
  .hwmain:not(.first) .hwhead .intro { display: none; }
  .hwwords { flex: none; }
  .wchip { padding: 4px 10px; font-size: 12px; }
  .wdef { flex: none; font-size: 12.5px; padding: 8px 10px; max-height: 22dvh; overflow: auto; }
  .hwstep { flex: none; padding: 10px 12px; border-radius: 14px; max-height: 34dvh; overflow: auto; }
  .hwstep .steptext { font-size: 15.5px; margin: 5px 0 8px; }
  .hwshot { flex: 1 1 auto; min-height: 90px; display: flex; justify-content: center; }
  .hw .shot { height: 100%; padding: 4px; border-radius: 16px; }
  .hw .shot video { height: 100%; max-height: none; width: auto; border-radius: 12px; }
  .hwnav { flex: none; }
  .hwnav .btn { flex: 1; padding: 13px 10px; }
  .hwnav .btn.red { margin-left: 0; min-width: 0; }
}
@media (max-width: 860px) and (max-height: 760px) {
  .hwhead .intro { display: none; }
  .hwmain.worded .hwshot { display: none; }
  .hwmain.worded .hwnav { margin-top: auto; }
}
@media (max-width: 860px) and (max-height: 760px) { .hwstep { max-height: 44dvh; } }

/* ---------- design pass (Sep 2026): fewer things competing on each screen ---------- */
/* buttons read as words, not shouting; headings and tabs keep the spaced capitals */
.btn { text-transform: none; letter-spacing: .01em; font-size: 14px; }
.fab { text-transform: none; letter-spacing: .02em; font-size: 14px; }
.planbtn, .recountbtn { text-transform: none; letter-spacing: .02em; font-size: 13px; }
/* tabs: words on a computer, icon + word on a phone */
.tabs .ti { display: none; }
.tabs .tab-more { display: none; }
.who .whoinit { display: none; }
/* map picker */
#view-maps { max-width: 1180px; margin: 0 auto; }
#view-maps .viewintro { margin: -6px 0 14px; }
.mapmore { display: none; }
/* notes on a section: quiet, not a white card */
.notecard { background: var(--s1); color: var(--text); border-color: var(--line); border-style: dashed; }
.notecard .items, .notecard .note-text { color: #cfcfd6; }
.notecard .none { color: var(--dim); }
/* one line of numbers instead of four boxes */
.sumline { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin: 0 2px 10px; }
.sumline b { color: var(--text); font-weight: 600; font-size: 15px; }
#view-inventory .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#view-inventory .filters > .find { flex: 1 1 100%; }
#view-inventory .invfilters { display: contents; }
#view-inventory .filtpanel, #view-inventory .allcount, #view-inventory .invfilters > .hint { flex: 1 1 100%; }
.filtbar { display: flex; }
#catChips:empty { display: none; }
/* space picker and reminder filters: one row you can swipe, not a wall of chips */
.spacechips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.spacechips::-webkit-scrollbar { display: none; }
.spacechips .chip { flex: none; }
.remrow { gap: 8px; align-items: center; margin-bottom: 12px; }
.remrow .seg { flex: none; }
.chips.nowrap { flex-wrap: nowrap; }
.chips.nowrap .chip { flex: none; }
#view-reminders .viewintro { display: none; }

@media (max-width: 860px) {
  /* bottom bar: 5 destinations, icon over a word */
  .tabs { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .tabs .tab-desk { display: none !important; }
  .tabs .tab-more { display: inline-flex; }
  .tabs button { flex: 1 1 0; flex-direction: column; gap: 3px; padding: 7px 0 !important; font-size: 10px !important; letter-spacing: .04em !important; text-transform: none; position: relative; border-radius: 12px; min-width: 0; }
  .tabs button .ti { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabs button .pill { position: absolute; top: 2px; left: calc(50% + 6px); padding: 1px 5px; font-size: 9.5px; }
  .tabs button.on { background: none; color: var(--text); }
  .tabs button.on .ti { stroke: var(--red); }
  .tabs .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: 0; }
  /* header: live is just a dot, the name is an initial */
  .top .livebtn { padding-left: 10px; padding-right: 10px; }
  .top .livebtn span { display: none; }
  .who .whofull { display: none; }
  .who .whoinit { display: inline; }
  .top .who { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; min-width: 0; max-width: none; }
  /* map tools: view + side on one row, sections, then search with a More button */
  .maptools { gap: 8px; }
  .maptools .mapmode, .maptools .sideswitch { order: -2; }
  .sideswitch .sl2 { display: none; }
  .maptools .find { flex: 1 1 0; order: 1; }
  .maptools .mapmore { display: grid; order: 2; flex: none; width: 40px; height: 40px; border-radius: 50%; }
  .maptools .mapmore svg { width: 20px; height: 20px; fill: currentColor; }
  .maptools .recountbtn { display: none !important; }
  .maptools .planbtn:not(.on) { display: none; }
  .maptools .planbtn.on { order: 3; }
  .spchips-label { display: none; }
}
@media (max-width: 860px) {
  .maptools .mapmode { flex: none; }
  .maptools .mapmode button { padding: 7px 10px; }
  .maptools .sideswitch { flex: 1 1 0; min-width: 0; width: auto; display: flex; }
  .maptools .sideswitch button { flex: 1; padding: 7px 6px; }
}
@media (max-width: 860px) {
  .maptools .sideswitch { flex: 1 1 150px; min-width: 150px; }
  .maptools .sideswitch button { font-size: 11.5px; letter-spacing: 0; padding: 7px 4px; }
}

/* reminders: the status tag carries the colour; the action button is plain and says what it does */
.rst { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; }
.rst svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.rst.st-fix { background: rgba(255,176,32,.16); color: var(--warn); border: 1px solid rgba(255,176,32,.55); }
.rst.st-hot { background: var(--red); color: #fff; border: 1px solid var(--red); }
.rst.st-reminder { background: rgba(226,178,92,.14); color: var(--gold); border: 1px solid rgba(226,178,92,.5); }
.rst.st-note { background: rgba(156,200,239,.12); color: #9cc8ef; border: 1px solid rgba(156,200,239,.45); }
.rst.st-done { background: rgba(79,208,122,.12); color: var(--green); border: 1px solid rgba(79,208,122,.45); }
.remtags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.smallbtn.markbtn { color: var(--text); border-color: var(--line2); font-weight: 600; padding: 6px 12px; white-space: nowrap; }
.smallbtn.markbtn:hover, .smallbtn.markbtn:active { border-color: var(--green); color: var(--green); }
.rembtns .smallbtn { font-size: 12.5px; }
.toast.withact { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.toastact { background: none; border: 0; color: var(--gold); font-weight: 700; font-size: 14px; padding: 4px 2px; text-decoration: underline; }

/* ---------- how-to: Watch the demo ---------- */
.hwwatch { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--s2); border: 1px solid var(--line2); border-radius: 14px; padding: 10px 12px; color: var(--text); }
.hwwatch:hover { border-color: var(--red); }
.hwwatch .wthumb { width: 44px; height: 60px; border-radius: 8px; overflow: hidden; flex: none; background: #000; border: 1px solid var(--line2); }
.hwwatch .wthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hwwatch .wtx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.hwwatch b { font-size: 15px; font-weight: 600; }
.hwwatch small { font-size: 12px; color: var(--muted); }
.hwwatch .wplay { width: 40px; height: 40px; border-radius: 50%; background: var(--red); display: grid; place-items: center; flex: none; box-shadow: 0 0 18px var(--red-glow); }
.hwwatch .wplay svg { width: 18px; height: 18px; color: #fff; margin-left: 2px; }
@media (max-width: 860px) {
  .hwshot { display: none !important; }
  .hwmain { justify-content: flex-start; }
  .hwmain .hwnav { margin-top: auto; }
  .hwstep { max-height: none; }
  .hwstep .steptext { font-size: 17px; }
}
.demo { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.demo[hidden] { display: none; }
.demo .dbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px 6px; }
.demo .dtitle { font-size: 14px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo .dprog { flex: none; display: flex; gap: 4px; padding: 4px 14px 10px; }
.demo .dprog i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.demo .dprog i b { display: block; height: 100%; width: 0; background: #fff; transition: width .25s linear; }
.demo .dstage { flex: 1; min-height: 0; position: relative; display: flex; justify-content: center; align-items: center; padding: 0 14px; }
.demo .dstage video { height: 100%; max-width: 100%; aspect-ratio: 540 / 1168; object-fit: contain; border-radius: 16px; background: #000; border: 1px solid var(--line2); }
.demo .dtap { position: absolute; inset: 0; background: none; border: 0; }
.demo .dpaused { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.demo .dpaused svg { width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 4px 20px rgba(0,0,0,.8)); }
.demo .dpaused[hidden], .demo .dend[hidden] { display: none; }
.demo .dend { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.9); padding: 20px; }
.demo .dendcard { display: flex; flex-direction: column; gap: 10px; width: min(340px, 100%); text-align: center; }
.demo .dendcard b { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.demo .dcap { flex: none; padding: 12px 18px 4px; max-width: 640px; width: 100%; margin: 0 auto; }
.demo .dstep { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.demo .dtext { margin: 6px 0 0; font-size: 17px; line-height: 1.45; max-height: 30dvh; overflow: auto; }
.demo .dctl { flex: none; display: flex; gap: 8px; padding: 10px 14px 12px; max-width: 640px; width: 100%; margin: 0 auto; }
.demo .dctl .btn { flex: 1; padding: 12px 8px; }
.demo .dctl .btn:disabled { opacity: .35; }
@media (min-width: 861px) { .demo .dtext { font-size: 20px; } }
@media (max-width: 860px) { .hwmain { overflow-y: auto; } }
/* the Watch the demo button is for phones; on a computer the clip already sits beside the words */
@media (min-width: 861px) { .hwwatch { display: none; } }
.inv .tot .awayq { display: block; font-size: 10.5px; color: var(--gold); letter-spacing: .02em; margin-top: 2px; white-space: nowrap; }
/* tasks Brittnay put on the map from MYNT Ops */
.rk.ops { border-color: #8ab4ff; color: #8ab4ff; }
/* MYNT Ops doors (sign in, inbox, Rasheed...) live under More, so More shows on computers too */
.tabs .tab-more { display: inline-flex; }
/* who's using the app: names that ask for their own PIN */
.chip .lock svg { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; stroke-width: 2.2; }
.whopin { margin: 6px auto 4px; }
.whopin .pinmsg { margin-top: 0; }
/* the section's white box: what's still open here */
.panel.openhere { text-align: left; }
.panel.openhere .panel-head span:last-child { color: var(--red); font-weight: 700; }
.panel.openhere .oh-row { padding: .4em .35em; }
.panel.openhere .oh-row b { display: flex; align-items: center; gap: .5em; margin-bottom: .2em; letter-spacing: 0; }
.panel.openhere .oh-row b .rst { font-size: .72em; padding: .1em .5em; }
.panel.openhere .oh-row b i { font-style: normal; font-size: .72em; letter-spacing: .1em; color: #777; margin-left: auto; }
.panel.openhere .oh-row span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.panel.openhere .oh-more, .panel.openhere .oh-note b { color: #555; font-size: .8em; }
.panel.openhere .oh-foot { display: flex; border-top: 1px solid #ddd; }
.panel.openhere .oh-foot button { flex: 1; background: none; border: 0; padding: .6em .4em; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: #111; }
.panel.openhere .oh-foot button + button { border-left: 1px solid #ddd; color: #666; }
.panel.openhere .oh-foot button:hover { color: var(--red); }
/* on a phone the same list sits above the spot cards */
.seccard.openhere { text-align: left; padding: 0; overflow: hidden; }
.seccard.openhere .panel-head { padding: 10px 12px 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.seccard.openhere .panel-head span:last-child { color: var(--red); font-weight: 700; }
.seccard.openhere .panel-body { padding: 4px 6px; }
.seccard.openhere .panel-spot { width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 6px; border-radius: 8px; display: block; }
.seccard.openhere .panel-spot b { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.seccard.openhere .panel-spot b i { font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--muted); margin-left: auto; }
.seccard.openhere .panel-spot span { font-size: 14px; color: var(--text); }
.seccard.openhere .panel-empty { color: var(--muted); font-size: 13px; padding: 10px 6px; }
.seccard.openhere .oh-foot { display: flex; border-top: 1px solid var(--line); }
.seccard.openhere .oh-foot button { flex: 1; background: none; border: 0; padding: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.seccard.openhere .oh-foot button + button { border-left: 1px solid var(--line); color: var(--muted); }
/* the four doors */
.pinbox.doors { width: min(360px, 100%); }
.doorlist { display: grid; gap: 10px; margin-top: 8px; }
.doorlist button { text-align: left; padding: 16px 18px; border-radius: 16px; background: var(--s2); border: 1px solid var(--line); color: var(--text); }
.doorlist button:hover { border-color: #fff; }
.doorlist b { display: block; font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.doorlist small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
/* Promotions and Owner: what Operations is working on */
#workBody { max-width: 760px; margin: 0 auto; }
.vwcard { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 10px 0; }
.vwcard b { display: block; font-size: 15px; font-weight: 600; margin: 8px 0 4px; }
.vwcard p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.vwtop { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; letter-spacing: .06em; }
.vwlvl { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font-weight: 700; }
.vwlvl.l1 { color: var(--red); border-color: rgba(255,45,61,.55); }
.vwlvl.l2 { color: var(--warn); border-color: rgba(255,176,32,.55); }
.vwdue, .vwwait { color: var(--muted); padding: 3px 0; }
.vwnote { font-size: 13px; color: var(--text); border-left: 2px solid var(--line2); padding: 2px 0 2px 10px; margin: 6px 0; }
.vwnote i { font-style: normal; color: var(--muted); margin-right: 4px; }
.vwcard .btn { margin-top: 8px; }

/* menu: make menus and groups from the Menu page, edit recipe and steps from the drink */
.sechead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sechead h2 { margin: 0; }
.secacts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.dsubrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dsubrow .linkish { font-size: 12px; letter-spacing: .02em; text-transform: none; display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.dsubrow .linkish svg { width: 14px; height: 14px; }
.stepsadd { width: 100%; margin: 14px 0 4px; }
.newplace { border: 1px dashed var(--line2); border-radius: 12px; padding: 10px 12px; margin: 4px 0 10px; display: grid; gap: 8px; }
.dhist { display: grid; gap: 6px; font-size: 13px; }
.dhist div { display: grid; gap: 1px; border-left: 2px solid var(--line2); padding-left: 8px; }
.dhist small { color: var(--muted); font-size: 11px; }
@media (max-width: 560px) { .sechead { flex-direction: column; } .secacts { justify-content: flex-start; } }
@media (max-width: 480px) {
  #view-menu .viewhead { flex-wrap: wrap; }
  #menuActs { margin-left: 0; width: 100%; }
  #menuActs .btn { flex: 1; justify-content: center; padding: 8px 8px; }
}

/* ---------- Learn ---------- */
#view-learn { max-width: 980px; margin: 0 auto; }
.lidcard { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--red); background: linear-gradient(135deg, rgba(255,45,61,.14), rgba(255,45,61,.03)); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
.lidcard b { display: block; font-size: 15px; letter-spacing: .02em; }
.lidcard small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.lidcard .btn { flex: none; }
.homel { margin-top: 4px; }
.lme { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; margin: -4px 2px 14px; }
.lme b { color: var(--text); font-weight: 600; }
.lcontinue { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; border: 1px solid var(--line2); background: var(--s2); border-radius: var(--radius); padding: 16px; margin-bottom: 8px; }
.lcontinue small { grid-column: 1; color: var(--gold); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.lcontinue b { grid-column: 1; font-size: 18px; font-weight: 500; }
.lcontinue .lbar { grid-column: 1; }
.lcontinue .btn { grid-column: 2; grid-row: 1 / span 3; }
.lcontinue.alldone { grid-template-columns: 1fr; }
.lcontinue.alldone small { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 13px; }
.lsess { margin: -6px 2px 10px; }
.lcourses, .lpeople { display: grid; gap: 8px; }
@media (min-width: 900px) { .lcourses { grid-template-columns: 1fr 1fr; } }
.lcourse { display: flex; gap: 12px; align-items: flex-start; text-align: left; border: 1px solid var(--line); background: var(--s1); border-radius: 12px; padding: 12px 14px; color: var(--text); width: 100%; }
.lcourse:hover { border-color: var(--line2); }
.lnum { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 12px; color: var(--muted); font-weight: 600; }
.lcourse.s-done .lnum, .lcourse.s-signed .lnum { background: var(--green); border-color: var(--green); color: #000; }
.lcourse.s-wait .lnum { border-color: var(--gold); color: var(--gold); }
.lcourse.s-going .lnum { border-color: var(--red); color: var(--red); }
.lcbody { display: grid; gap: 3px; min-width: 0; flex: 1; }
.lcbody b { font-size: 15px; font-weight: 600; }
.lcbody small { color: var(--muted); font-size: 13px; }
.lcmeta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--dim); letter-spacing: .04em; margin-top: 2px; }
.lstat { color: var(--muted); }
.s-done .lstat, .s-signed .lstat { color: var(--green); }
.s-wait .lstat { color: var(--gold); }
.lph { color: #000; background: var(--warn); border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.lbar { display: block; height: 4px; border-radius: 4px; background: var(--s3); overflow: hidden; margin-top: 6px; }
.lbar i { display: block; height: 100%; background: var(--red); border-radius: 4px; }
.lperson { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--s1); border-radius: 12px; padding: 10px 14px; color: var(--text); width: 100%; }
.lpname b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.lpname small { color: var(--muted); font-size: 12px; }
.lpstat { font-size: 12px; color: var(--muted); text-align: right; }
.lpstat.ok { color: var(--green); }
.lpstat.muted { color: var(--dim); }
.lperson .lbar { grid-column: 1 / -1; }
.lready { border: 1px solid var(--gold); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 8px; }
.lready > b { color: var(--gold); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.lreadyrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 13px; }
.lmods { display: grid; gap: 8px; }
.lmod { text-align: left; border: 1px solid var(--line); background: var(--s1); border-radius: 12px; padding: 12px 14px; color: var(--text); display: grid; gap: 2px; }
.lmod small { color: var(--muted); font-size: 12px; }
.ltrans { display: grid; gap: 6px; }
.ltrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 2px; }
.ltrow b { display: block; font-size: 14px; }
.ltrow small { color: var(--muted); font-size: 12px; }
.warnline { color: var(--warn) !important; }
.lplist { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.lbrow { display: flex; gap: 6px; align-items: center; }
.lbrow .sheetrow { flex: 1; }
.lbmod { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; display: grid; gap: 6px; }
.lbmodhead { display: flex; gap: 8px; align-items: center; }
.lbmodhead input { flex: 1; font-weight: 600; }
.lbslide { display: flex; gap: 6px; align-items: center; }
.lbsbtn { flex: 1; display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--s2); border-radius: 10px; padding: 8px 10px; color: var(--text); min-width: 0; }
.lbsbtn i { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); flex: none; }
.lbsbtn b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.lbopt { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.lbopt input[type=radio] { width: 20px; height: 20px; flex: none; }
.lbopt .seOpt { flex: 1; }

/* the lesson player: full screen, same on a phone and a big screen */
.lplayer { position: fixed; inset: 0; z-index: 58; background: #000; display: grid; grid-template-rows: auto auto 1fr auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
body.lpon { overflow: hidden; }
.lptop { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.lptitle { flex: 1; min-width: 0; display: grid; }
.lptitle b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lptitle small { color: var(--muted); font-size: 12px; }
.lpcount { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.lpbar { height: 3px; background: var(--s3); }
.lpbar i { display: block; height: 100%; background: var(--red); transition: width .25s; }
.lpslide { overflow: auto; padding: 22px 18px 28px; width: 100%; max-width: 860px; margin: 0 auto; box-sizing: border-box; }
.lpslide h2 { font-size: clamp(22px, 4.2vw, 40px); font-weight: 500; line-height: 1.15; margin: 4px 0 12px; letter-spacing: .01em; }
.lstext { font-size: clamp(16px, 2.2vw, 21px); line-height: 1.5; color: #ddd; margin: 0 0 14px; }
.lspts { margin: 6px 0 14px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.lspts li { font-size: clamp(15px, 2vw, 20px); line-height: 1.4; padding-left: 22px; position: relative; }
.lspts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.lscall { border-left: 3px solid var(--gold); background: rgba(226,178,92,.08); padding: 10px 14px; border-radius: 0 10px 10px 0; font-size: clamp(14px, 1.8vw, 18px); color: var(--text); margin: 8px 0 14px; }
.lseyebrow { color: var(--gold); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.lstitle { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; }
.lstitle h2 { font-size: clamp(30px, 6vw, 60px); letter-spacing: .02em; }
.lsdraft { background: var(--warn); color: #000; font-weight: 700; font-size: 12px; border-radius: 8px; padding: 6px 10px; margin-bottom: 12px; display: inline-block; }
.lsimg, .lsmap { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--s1); margin: 0 0 14px; position: relative; }
.lsimg img, .lsmap img { display: block; width: 100%; height: auto; max-height: 58vh; object-fit: contain; background: #050505; }
.lsmap span { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
.lshow { display: grid; gap: 14px; margin: 6px 0 16px; }
.lshow img { width: 100%; max-height: 44vh; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--s1); }
.lshow ol, .lssteps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.45; }
@media (min-width: 900px) { .lshow { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.lscheck { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.lscheck li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 10px 40px; position: relative; font-size: clamp(15px, 1.9vw, 19px); }
.lscheck li::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--line2); }
.lsopts { display: grid; gap: 10px; margin: 8px 0 14px; }
.lsopt { text-align: left; border: 1px solid var(--line2); background: var(--s1); color: var(--text); border-radius: 12px; padding: 14px 16px; font-size: clamp(15px, 2vw, 19px); line-height: 1.35; }
.lsopt:hover:not([disabled]) { border-color: var(--muted); }
.lsopt.right { border-color: var(--green); background: rgba(79,208,122,.12); }
.lsopt.wrong { border-color: var(--red); background: rgba(255,45,61,.1); }
.lsopt[disabled] { opacity: .45; }
.lswhy { border-radius: 12px; padding: 12px 14px; font-size: clamp(14px, 1.8vw, 18px); line-height: 1.45; margin-bottom: 14px; }
.lswhy.ok { background: rgba(79,208,122,.1); border: 1px solid rgba(79,208,122,.5); }
.lswhy.no { background: rgba(255,45,61,.08); border: 1px solid rgba(255,45,61,.45); }
.lsack { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--line2); background: var(--s1); color: var(--text); border-radius: 14px; padding: 16px 18px; font-size: clamp(16px, 2vw, 20px); margin-top: 10px; }
.lsack i { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--line2); display: grid; place-items: center; }
.lsack i svg { width: 18px; height: 18px; }
.lsack.on { border-color: var(--green); }
.lsack.on i { background: var(--green); border-color: var(--green); color: #000; }
.lpslide textarea { width: 100%; box-sizing: border-box; font-size: 16px; margin-bottom: 10px; }
.lsbadge { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #000; font-size: 38px; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.lpfoot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); justify-content: space-between; max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.lpfoot .btn { min-width: 110px; justify-content: center; }
.lpfoot .btn.red { flex: 1; max-width: 360px; margin-left: auto; }
.lpfoot .btn[disabled] { opacity: .4; }
.lpresume { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 41; display: flex; align-items: center; gap: 8px; background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.lpresume svg { width: 16px; height: 16px; }
@media (min-width: 761px) { .lpresume { bottom: 24px; } }
.lsnote { border: 1px dashed var(--warn); color: #e8d9b0; border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.45; margin-bottom: 14px; white-space: pre-wrap; }
.lsnote b { display: block; color: var(--warn); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.vwcard.mine { border-color: var(--red); }
.vwyou { padding: 3px 9px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; }
.vwkind { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-weight: 700; }
.vwmeta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 6px 0 10px; font-size: 13px; }
.vwmeta dt { color: var(--dim); }
.vwmeta dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.vwmeta .linkish { padding: 0; font-size: 13px; }
.vwmineh { color: var(--red); }
.lst { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.lst.st-placeholder { border-color: var(--warn); color: var(--warn); }
.lst.st-dee { border-color: #c77dff; color: #d9a8ff; }
.lst.st-rasheed { border-color: var(--gold); color: var(--gold); }
.lst.st-christine { border-color: #5fb3ff; color: #8cc8ff; }
.lst.st-ops { border-color: var(--red); color: #ff7a85; }
.lst.st-research { border-color: #4fd0c0; color: #7fe3d6; }
.lst.st-draft { border-color: var(--line2); color: var(--muted); }
.lst.st-review { border-color: #e8e8e8; color: #e8e8e8; }
.lst.st-approved, .lst.st-published { border-color: var(--green); color: var(--green); }
.lchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lsdraft { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: none; color: var(--muted); font-weight: 400; padding: 0; }
.lwaitsum { border: 1px dashed var(--line2); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; display: grid; gap: 6px; font-size: 12px; }
.lwaitsum b { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.lwaitsum > span { display: flex; flex-wrap: wrap; gap: 6px; }
.lspath { display: grid; gap: 10px; margin: 8px 0 16px; position: relative; }
.lspstep { border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 10px; padding: 10px 14px; }
.lspstep.done { border-left-color: var(--green); }
.lspstep b { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.lspstep span { color: var(--muted); font-size: 14px; }
.lspstep ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: clamp(14px, 1.8vw, 17px); }
.lspstep small { color: var(--dim); font-size: 11px; }
.vwpos { color: var(--dim); font-weight: 700; padding: 3px 0; font-variant-numeric: tabular-nums; }
.vwgrp { color: var(--muted); padding: 3px 0; }
.vwlive { margin-left: auto; font-size: 11px; color: var(--green); letter-spacing: .06em; }
.vwchips { margin: 0 0 10px; }

/* editing a slide in place */
.lpedbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px dashed var(--line2); max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.lpedbar .btn.sm { padding: 6px 10px; font-size: 12px; }
.lpedbar .danger { color: #ff7a85; }
.lplayer { grid-template-rows: auto auto auto 1fr auto; }
.lpslide.editing [contenteditable] { outline: 1px dashed var(--line2); outline-offset: 4px; border-radius: 6px; min-height: 1.2em; cursor: text; }
.lpslide.editing [contenteditable]:focus { outline: 2px solid var(--red); }
.lpslide.editing [contenteditable]:empty::before { content: attr(data-ph); color: var(--dim); }
.lpslide.editing .lspts li { margin-bottom: 4px; }
.lpslide.editing .lscall:empty, .lpslide.editing .lswhy:empty { min-height: 2em; }
.edimg { position: relative; }
.edimg .btn { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.8); }
.edopt { display: flex; gap: 10px; align-items: center; }
.edopt input { width: 20px; height: 20px; flex: none; }
.edopt span { flex: 1; }
.lstitle.withimg { min-height: 0; }
.signbox { width: min(360px, 100%); }
.signform { display: grid; gap: 10px; margin-top: 4px; }
.signform input, .signform select { font-size: 16px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s2); color: var(--text); width: 100%; box-sizing: border-box; }
.signform .btn { justify-content: center; padding: 13px; }
.signlinks { margin: 14px 0 0; }
.signlinks .linkish.dim { color: var(--dim); font-size: 12px; }
.signhi { font-size: 22px; margin: 0 0 6px; letter-spacing: .02em; }
.signhint { color: var(--dim); font-size: 12px; margin-top: 10px; }
.viewpick { display: grid; gap: 6px; }
.vpick { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.vpick input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.vpick b { display: block; font-size: 14px; }
.vpick small { color: var(--muted); font-size: 12px; }
.vpick:has(input:checked) { border-color: var(--red); }

/* the space chips, search and filters stay at the top while the list scrolls */
.stickhead { position: sticky; top: var(--top-h); z-index: 25; background: var(--bg); margin: 0 -16px; padding: 8px 16px 6px; border-bottom: 1px solid transparent; }
.stickhead.stuck { border-bottom-color: var(--line); box-shadow: 0 10px 18px -12px rgba(0,0,0,.9); }
#view-inventory:not(.allmode) .allhead { display: none; }
.stickhead .spacechips { margin-bottom: 8px; }
.stickhead .filters { margin-bottom: 0; }
.stickhead + #invTop:not(:empty) { margin-top: 10px; }
.vwaddbtn { margin-left: auto; }
.vwaddbtn + .vwlive { margin-left: 10px; }
.vwcard.sent { border-style: dashed; }
.signbig { width: 100%; justify-content: center; padding: 13px; margin-top: 10px; font-size: 14px; }
.signor { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 12px; margin: 16px 0 4px; }
.signor::before, .signor::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signdoors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.signdoors.col { grid-template-columns: 1fr; }
.signdoors .signbig { margin-top: 6px; }
.pronouns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; text-align: left; }
.prlabel { width: 100%; color: var(--muted); font-size: 12px; }
.prbox { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; background: var(--s2); }
.prbox input { width: 16px; height: 16px; margin: 0; }
.prbox:has(input:checked) { border-color: var(--red); }
.pronouns .prother { flex: 1; min-width: 90px; font-size: 14px !important; padding: 7px 12px !important; border-radius: 999px !important; }
.signform .prbox input { width: 16px; height: 16px; padding: 0; border-radius: 4px; }
.prbox input, .vpick input, .edopt input { accent-color: var(--red); }