/* Parlour TV boards: the pages behind the TVs. Built to be tapped on a store iPad. */
:root {
  --cream: #fff8ef;
  --cream-2: #fbeee0;
  --ink: #2b1d1a;
  --ink-2: #5a4640;
  --muted: #8a766e;
  --line: #eadccd;
  --card: #fff;
  --cyan: #5fd3e6;
  --cyan-d: #138fa3;
  --good: #2f9e5b;
  --bad: #d0453f;
  --sold: #c9533f;
  --pints: #d9861c;
  --scoops: #3c8f63;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(43,29,26,.06), 0 6px 20px rgba(43,29,26,.06);
  --display: 'Fredoka', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 'Nunito', system-ui, sans-serif; color: var(--ink); background: var(--cream); }
body.no-scroll { overflow: hidden; }
a { color: var(--cyan-d); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0 0 .3em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
h2 { font-size: 1.25rem; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.empty { color: var(--muted); font-style: italic; margin: .4em 0; }
ul.plain { list-style: none; padding: 0; margin: .5em 0 0; }
ul.plain li { padding: .45em 0; border-top: 1px solid var(--line); }

/* buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border: 0; cursor: pointer;
  background: var(--ink); color: #fff; font: 700 1rem 'Nunito', sans-serif; padding: .7em 1.3em; border-radius: 999px;
  min-height: 44px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.btn:hover { text-decoration: none; filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.small { padding: .4em .9em; min-height: 36px; font-size: .92rem; }
.btn.big { width: 100%; font-size: 1.1rem; min-height: 52px; }
.linkish { background: none; border: 0; padding: .3em .2em; color: var(--cyan-d); font: inherit; font-weight: 700; cursor: pointer; }
.linkish.danger, .danger { color: var(--bad); }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.iconbtn:disabled { opacity: .3; cursor: default; }
.iconbtn.remove { color: var(--bad); }
input, select, textarea { font: inherit; color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .55em .75em; min-height: 44px; width: 100%; }
textarea { resize: vertical; min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan-d); box-shadow: 0 0 0 3px rgba(95,211,230,.3); }
label { display: flex; flex-direction: column; gap: .25em; font-weight: 700; font-size: .92rem; }
label.check { flex-direction: row; align-items: center; gap: .5em; font-weight: 600; min-height: 44px; }
label.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--cyan-d); }
.row { display: flex; gap: .75em; align-items: flex-end; }
.row.wrap { flex-wrap: wrap; }
.row.tight { gap: .5em; align-items: center; }
.row.tight label { flex-direction: row; align-items: center; gap: .5em; }
.row.tight select { width: auto; }
.row .grow { flex: 1 1 200px; }
.stack { display: grid; gap: 1em; }
form.inline { display: inline; }

/* page shell */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1em; padding: .6em max(16px, env(safe-area-inset-left));
  background: var(--ink); color: #fff; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6em; color: #fff; font: 600 1.15rem var(--display); }
.brand:hover { text-decoration: none; }
.brand small { display: block; font: 700 .7rem 'Nunito', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.tabs { display: flex; gap: .25em; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { color: #f3e6da; padding: .55em .9em; border-radius: 999px; white-space: nowrap; font-weight: 700; }
.tabs a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.tabs a.on { background: var(--cyan); color: var(--ink); }
.who { display: flex; align-items: center; gap: .8em; margin-left: auto; font-size: .9rem; }
.who span { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.who small { color: #cdb9ab; }
.who a, .who .linkish { color: var(--cyan); }
.who form { margin: 0; }
.role-store .who span { display: none; }

.main { max-width: 1200px; margin: 0 auto; padding: 22px 16px 80px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; flex-wrap: wrap; margin-bottom: 16px; }
.page-head p { margin: 0; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.card.narrow { max-width: 460px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .6em; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
details.card > summary { cursor: pointer; font-weight: 700; min-height: 28px; }
details.card[open] > summary { margin-bottom: .8em; }
.flash { padding: .8em 1em; border-radius: 12px; margin-bottom: 16px; font-weight: 700; background: #e3f5ea; color: #1d6b3d; }
.flash.err { background: #fbe4e2; color: #9d2b25; }

.seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; box-shadow: var(--shadow); gap: 2px; flex-wrap: wrap; }
.seg a, .seg button { border: 0; background: none; font: 700 .95rem 'Nunito', sans-serif; color: var(--ink-2); padding: .55em 1.1em; border-radius: 999px;
  cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.seg a:hover { text-decoration: none; background: var(--cream); }
.seg .on { background: var(--ink); color: #fff; }
.seg .on:hover { background: var(--ink); }

.g { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: 50%;
  background: var(--ink); color: #fff; font: 600 .72rem/1 var(--display); vertical-align: .12em; }
.tag { display: inline-block; font: 700 .72rem/1 'Nunito', sans-serif; padding: .35em .6em; border-radius: 999px; background: var(--cream-2); color: var(--ink-2); vertical-align: .15em; margin: 0 .15em .15em 0; }
.tag.sold_out { background: #fbe1dc; color: #9d2b25; }
.tag.pints_only { background: #fde9cf; color: #8a520c; }
.tag.scoops_only { background: #dff1e5; color: #22663f; }
.tag.available { background: #e5f6f9; color: #0f6b7a; }

/* toast */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); background: var(--ink); color: #fff;
  padding: .8em 1.3em; border-radius: 999px; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.25); transition: transform .2s ease, opacity .2s ease, visibility 0s .2s; z-index: 100; max-width: calc(100vw - 32px); text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .2s ease, opacity .2s ease; }
.toast.bad { background: var(--bad); }

/* sign in */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 400px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 32px 26px; text-align: center; }
.login .stack { text-align: left; margin-top: 1.2em; }
.login h1 { margin-top: .3em; }

/* ---------- store flavours (iPad) ---------- */
.store { display: grid; gap: 16px; }
.lane .card-head { border-bottom: 1px solid var(--line); padding-bottom: .5em; }
.frows { list-style: none; margin: 0; padding: 0; }
.frow { display: grid; grid-template-columns: minmax(150px, 1fr) auto; align-items: center; gap: .6em 1em; padding: .6em 0; border-bottom: 1px solid var(--line); transition: opacity .15s; }
.frow:last-child { border-bottom: 0; }
.frow.saving { opacity: .6; }
.fname { font: 600 1.2rem var(--display); }
.frow.sold_out .fname { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.status { display: grid; grid-template-columns: repeat(4, minmax(88px, 1fr)); gap: 6px; }
.st { border: 2px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 14px; min-height: 52px; padding: .3em .5em;
  font: 800 .98rem 'Nunito', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.st[aria-pressed="true"] { color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.st.available[aria-pressed="true"] { background: var(--cyan-d); }
.st.sold_out[aria-pressed="true"] { background: var(--sold); }
.st.pints_only[aria-pressed="true"] { background: var(--pints); }
.st.scoops_only[aria-pressed="true"] { background: var(--scoops); }
.st:active { transform: scale(.97); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: .55em .9em; min-height: 52px; font: 700 1rem 'Nunito', sans-serif;
  color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; touch-action: manipulation; }
.chip-toggle small { font-weight: 800; color: var(--cyan-d); font-size: .78rem; }
.chip-toggle.on { background: #fbe1dc; border-color: var(--sold); }
.chip-toggle.on small { color: var(--sold); }
@media (max-width: 720px) {
  .frow { grid-template-columns: 1fr; }
  .status { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- TV boards ---------- */
.boards-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.boards { display: grid; gap: 16px; transition: opacity .15s; }
.boards.busy { opacity: .75; }
.blist { list-style: none; margin: 0 0 .8em; padding: 0; }
.bitem { display: flex; align-items: center; gap: .6em; padding: .45em .3em; border-bottom: 1px solid var(--line); background: #fff; }
.bitem:last-child { border-bottom: 0; }
.bitem.dragging { background: #e5f6f9; box-shadow: 0 6px 20px rgba(0,0,0,.15); border-radius: 12px; position: relative; z-index: 2; }
.grip { cursor: grab; color: #b9a69b; font-size: 1.2rem; padding: .3em .35em; touch-action: none; user-select: none; -webkit-user-select: none; letter-spacing: -.25em; }
.bname { flex: 1; font: 600 1.1rem var(--display); }
.btools { display: flex; gap: 6px; }
.add-btn { width: 100%; background: var(--cyan); color: var(--ink); min-height: 50px; font-size: 1.05rem; }
.lane.vegan .add-btn { background: #c9ee6a; }
.preview { position: sticky; top: 80px; }
.preview-frame { aspect-ratio: 27 / 16; border-radius: 12px; overflow: hidden; background: #1b1b1b; }
.preview-frame iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.copy form { margin-top: .4em; }
.copy select { width: auto; }
@media (max-width: 980px) {
  .boards-wrap { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
}

/* picker: a full-screen sheet with every flavour as a big button */
.picker { position: fixed; inset: 0; z-index: 50; background: rgba(43,29,26,.5); display: flex; align-items: stretch; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px; }
.sheet { background: var(--cream); width: 100%; max-width: 1100px; border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 18px 20px 10px; }
.sheet-head h2 { margin: 0; font-size: 1.5rem; }
.sheet-head .btn { min-width: 110px; }
.sheet-tools { display: flex; gap: 10px; padding: 0 20px 12px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.sheet-tools input { flex: 1 1 260px; font-size: 1.1rem; min-height: 50px; }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px 24px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tile { text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 16px; padding: .8em .9em; min-height: 76px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: .2em; font: inherit; color: var(--ink); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tile b { font: 600 1.12rem var(--display); }
.tile small { color: var(--muted); font-weight: 700; font-size: .8rem; }
.tile:active { transform: scale(.98); }
.tile.here { background: var(--cyan-d); border-color: var(--cyan-d); color: #fff; }
.tile.here small { color: #d8f6fb; }
.tile.here .g { background: #fff; color: var(--ink); }
.tile.elsewhere { border-style: dashed; }
.tile.elsewhere small { color: var(--pints); }
.tile.saving { opacity: .5; }
.tile.new { cursor: default; border-style: dashed; border-color: var(--cyan-d); gap: .5em; grid-column: 1 / -1; }
.tile.new .btn { align-self: flex-start; }
.tile.new label { flex-direction: row; align-items: center; gap: .5em; }
.tile.new select { width: auto; }

/* ---------- all flavours ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.filter-bar input { flex: 1 1 260px; }
.flav-list { display: grid; gap: 8px; margin-bottom: 16px; }
.flav-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) 130px 150px auto minmax(120px, 1fr) auto; gap: 8px; align-items: center;
  background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow); }
.flav-row .where { line-height: 1.6; }
.flav-row .acts { display: flex; gap: 6px; align-items: center; }
@media (max-width: 900px) {
  .flav-row { grid-template-columns: 1fr 1fr; }
  .flav-row > input[name="name"], .flav-row .where { grid-column: 1 / -1; }
}

/* ---------- prices ---------- */
.price-row { display: grid; grid-template-columns: 44px minmax(140px, 1fr) 90px 150px 140px minmax(140px, 1.2fr) auto; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; }
.price-row .acts { display: flex; gap: 6px; align-items: center; }
.icon-preview { width: 44px; height: 44px; border-radius: 10px; background: #231c1b; display: flex; align-items: center; justify-content: center; }
.icon-preview svg, .icon-preview .ico { width: 34px; height: 34px; }
@media (max-width: 1000px) {
  .price-row { grid-template-columns: 44px 1fr 90px; }
  .price-row > select, .price-row > textarea, .price-row .acts { grid-column: 2 / -1; }
}

/* ---------- TV setup ---------- */
.tv-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: .6em; }
.tv-link { background: var(--cream); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: .2em; }
.tv-link b { font: 600 1.15rem var(--display); }
.tv-link .url { font-weight: 800; word-break: break-all; font-size: .95rem; }
.tv-link .linkish { align-self: flex-start; padding-left: 0; }
@media (max-width: 760px) { .tv-links { grid-template-columns: 1fr; } }

/* ---------- accounts ---------- */
.acct-list { display: grid; gap: 4px; }
.acct { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding: .7em 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.acct:last-child { border-bottom: 0; }
.acct.off { opacity: .55; }
.acct-main { display: flex; flex-direction: column; }
.acct-main b { font: 600 1.1rem var(--display); }
.acct-tools > summary { cursor: pointer; font-weight: 700; color: var(--cyan-d); list-style: none; padding: .4em 0; }
.acct-tools[open] { flex-basis: 100%; background: var(--cream); border-radius: 12px; padding: 10px 12px; display: grid; gap: 10px; }
.acct-tools .row { align-items: center; }

/* TV setup: sold-out look choices, each with a tiny chalkboard sample */
.sold-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sold-opt { flex-direction: column; align-items: stretch; gap: .5em; border: 2px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer; font-weight: 700; }
.sold-opt.on { border-color: var(--cyan-d); box-shadow: 0 0 0 3px rgba(95,211,230,.3); }
.sold-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sold-demo { background: #231c1b; color: #fff; border-radius: 10px; padding: 14px; display: flex; align-items: center; justify-content: center; gap: .5em;
  font: 1.6rem 'Neucha', 'Patrick Hand', cursive; text-transform: uppercase; letter-spacing: .02em; }
.sold-demo .stk { font: 600 .55rem/1 'Fredoka', sans-serif; background: #f1d9a6; color: #1a1a1a; padding: .3em .5em; border-radius: 3px; transform: rotate(-2deg); text-align: center; }
.sold-demo.gray .nm, .sold-demo.strike .nm { color: #7d7574; }
.sold-demo.strike .nm { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #9a9291; }
@media (max-width: 760px) { .sold-styles { grid-template-columns: 1fr; } }

/* store colour dot next to a store's name */
.store-dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-right: .35em; vertical-align: .06em; box-shadow: 0 0 0 3px rgba(255,255,255,.9); }

/* "Mark Mango sold out at Downtown?" sheet */
.confirm-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(43,29,26,.5); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
@media (min-width: 700px) { .confirm-wrap { align-items: center; } }
.confirm { width: 100%; max-width: 440px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border-top: 10px solid var(--store); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.cf-store { background: var(--store); color: #fff; font: 600 1.6rem var(--display); text-align: center; padding: 8px 16px 14px; letter-spacing: .02em; text-transform: uppercase; }
.confirm p { font-size: 1.15rem; text-align: center; margin: 18px 20px; }
.cf-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 0 18px; }
.cf-btns .btn { min-height: 52px; font-size: 1.05rem; }
.cf-yes { background: var(--store); }

/* releases */
.flash.warn { background: #fdf0d8; color: #7a4a06; }
.versions { display: grid; gap: 10px; margin-bottom: 10px; }
.version { border: 2px solid var(--line); border-radius: 14px; padding: 12px; }
.version.on { border-color: var(--cyan-d); }
.vhead { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; margin-bottom: .3em; }
.vhead b { font: 600 1.15rem var(--display); }
.tv-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tv-pin { background: var(--cream); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: .4em; border: 2px solid transparent; }
.tv-pin.pinned { border-color: var(--pints); background: #fff6e8; }
.tv-pin b { font: 600 1.1rem var(--display); }
@media (max-width: 760px) { .tv-pins { grid-template-columns: 1fr; } }
.bg-pins { margin-top: 10px; }
.bg-pins select { width: auto; flex: 1; }
label.check.big-check { font-size: 1.05rem; font-weight: 700; }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.month { background: var(--cream); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: .35em; border: 2px solid transparent; }
.month.custom { border-color: var(--pints); }
.month img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: #231c1b; }
.month b { font: 600 1rem var(--display); }
.month .row { flex-wrap: wrap; }
.month-rows { display: grid; gap: 12px; }
.month-row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: start; }
.month-row .mname { font: 600 1.05rem var(--display); padding-top: 8px; }
.month-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 8px; }
@media (max-width: 600px) { .month-row { grid-template-columns: 1fr; } }