/* LOCKED FEATURES — shown, not hidden.
   © 2026 Perry Idyll.

   Perry's call, 2026-09-03: an artist or a venue on the free plan should be able
   to SEE what the paid plans do, greyed out with a quiet word over it, rather
   than find a control that looks live and then apologises. The old behaviour was
   worse than hiding it — the Studio's pricing controls were fully tappable on
   free and the server refused with a 402, which is exactly the shrug INVARIANT
   0ad exists to prevent.

   THIS IS ITS OWN FILE because the two Studios are the only pages with locks and
   NEITHER of them loads app.css — they are self-contained pages with their own
   inline styles. Putting these rules in app.css looked obviously right, and did
   nothing at all: the greying never reached either Studio. Caught by measuring
   computed styles in a browser, not by reading the diff.

   TWO STATES, and the difference is honesty:
     .lock          built, and a higher plan turns it on. Tappable — it opens the
                    plans.
     .lock.soon     designed and NOT built (NOT_BUILT in _plan.mjs,
                    VENUE_NOT_BUILT in _venues.mjs). Greyed on every plan
                    INCLUDING Pro, and not tappable, because there is nothing
                    behind it to open. Perry is comped to Pro; without this he
                    would be shown four dead ends as if they were his.

   THE VEIL IS ALWAYS DARK, deliberately. It was written when both Studios were
   fixed-dark pages; they now carry a `:root[data-theme=light]` block each and
   follow the phone (theme.js), but the veil keeps its dark gradient in both
   themes: a veil that lightened itself washed out the greyed content behind it,
   and a dark scrim over a light card still reads as "not yet" without a word.
   Everything ELSE in this file takes its colours from the Studio's tokens, with
   a dark fallback for any token a Studio does not define.

   The veil sits ON TOP rather than replacing the content, so the real thing stays
   visible at real size. `pointer-events` is the lock; the opacity is only how it
   looks, and a lock that is only opacity is not a lock. */
html{touch-action:manipulation}
.lock{position:relative;isolation:isolate}
.lock>.lockin{opacity:.32;filter:saturate(.2);pointer-events:none;user-select:none}
.lockveil{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  border-radius:var(--r-sm,14px);
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.62));
  cursor:pointer;border:0;width:100%;padding:0;margin:0;
  font:inherit;color:inherit;text-align:center}
.lock.soon>.lockveil{cursor:default}
/* A pill, sized by its own text. It is `b` on a `button`, so the font has to be
   restated — a button does not inherit one. */
.lockveil b{display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  background:var(--surface,#1C1C1E);color:var(--ink,#F5F5F7);
  box-shadow:var(--sh-1,0 2px 8px rgba(0,0,0,.5));
  border:.5px solid var(--hair-2,rgba(255,255,255,.16));
  border-radius:var(--pill,999px);padding:7px 14px;white-space:nowrap}
.lockveil b svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto}
.lockveil b i{font-style:normal;color:var(--accent-2,#FF5650)}   /* the Upgrade word on an artist's plan pill */
.lock.soon .lockveil b{color:var(--muted,#98989D)}

/* THE REASON GOES UNDER THE LOCK, NOT INSIDE IT.
   It started inside the veil and was unreadable: a single row of chips is only
   ~43px tall, so the caption either overflowed the greyed box or was clipped to
   "Coming soo". Outside it, one line always fits and always reads. */
.lockwhy{font-size:12px;color:var(--muted,#98989D);margin:9px 0 0;padding:0 18px;
  line-height:1.35}

/* BUTTON TIERS AND THE CHIP RECIPE, copied from app.css for the same reason the
   lock rules live here: the Studios never load app.css. Keep the two in step.
   The Studios have no `.btn` base, so each tier is complete on its own here;
   on a public page the same class composes with .btn and only restates fill.
     .btn-pri   commit — gradient pill.
     .btn-ink   next step / neutral primary. Ink on paper, inverts in the dark.
     .btn-grey  secondary ("Show all").
     .btn-text  tertiary ("Not yet"). Words only.
   Tokens the Studios lack (--sh-accent, --bg-2) get a literal fallback — except
   --accent-ink, which the Venue Studio never defines: a literal there would be
   one theme's pink on both grounds (the dark pink on a light card measured
   about 2.2:1), so .btn-text falls back to the page's own --accent, which
   both Studios restate per theme. */
.btn-pri,.btn-ink,.btn-grey,.btn-text{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;padding:15px 22px;
  border:0;border-radius:var(--pill,999px);cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--spring,cubic-bezier(.34,1.4,.64,1)),box-shadow .22s var(--ease,ease)}
.btn-pri:active,.btn-ink:active,.btn-grey:active,.btn-text:active{transform:scale(.965)}
.btn-pri:disabled,.btn-ink:disabled,.btn-grey:disabled,.btn-text:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.btn-pri{background:var(--grad,linear-gradient(135deg,#FF375F,#FF6B45));color:#fff;
  box-shadow:var(--sh-accent,0 6px 20px rgba(255,55,95,.32))}
.btn-ink{background:var(--ink,#F5F5F7);color:var(--bg,#000);box-shadow:var(--sh-1,0 2px 8px rgba(0,0,0,.5))}
.btn-grey{background:color-mix(in srgb,var(--ink,#F5F5F7) 9%,var(--surface,#1C1C1E));color:var(--ink,#F5F5F7)}
.btn-text{background:none;color:var(--accent-ink,var(--accent,#FF375F));padding:12px 14px}
.btn-block{width:100%}

/* The chip recipe is a hairline AND a soft shadow — the pill above (.lockveil b)
   found it first. Each Studio already sizes its own .chip and fills .chip.on
   with the gradient, and this file loads after those rules, so it adds ONLY the
   hairline and leaves size, weight and the on-fill to the page. The hairline
   goes clear under the gradient fill rather than drawing a grey edge on it. */
.chip{border:.5px solid var(--hair-2,rgba(255,255,255,.16))}
.chip.on{border-color:transparent}

/* THE BOTTOM TAB BAR, one recipe for both Studios — fixed, where a thumb already
   is. Each Studio used to carry a sticky pill under its header whose height had
   to be MEASURED (fitTabs / --headh) so the blurred header would not sit over
   it; a fixed bar has no header to clear. 56px plus the home-indicator inset,
   and each Studio's body reserves exactly that at the bottom (and lifts its
   toast above it) — so the height is a contract, not a style: change it here
   and both pages' last card slides under the bar.
   z-index 55: above each Studio's header (30) and page, under its sheet
   backdrop (.bg 60), so a sheet still dims it.
   THE FACELIFT, 2026-09-12. The founder asked for a face lift on the flat black
   strip with its tinted pill: black in the dark with a subtle futuristic sheen,
   an orange border around the selected tab, and a bar that feels 3D. So the bar
   is now a slab: graphite
   into true black top to bottom (a flat #000 merged with the black page and
   read as one more card), a hairline of light along its top edge, a deeper
   lift shadow above it, and a faint diagonal sheen — a pseudo-element over the
   whole bar, pointer-events off, with the tab row (.in) stacked above it so
   nothing sits between a thumb and a button. The light theme speaks the same
   language on a clean surface: white into off-white, a darker hairline, a
   softer shadow. Both Studios draw the same bar, on purpose: it is one product.
   The selected tab's pill — the pseudo-element behind icon and label, inset
   from the button so five tabs still read at 375px while the hit area stays
   the full fifth of the bar — wears the brand-gradient ring (the "View on
   map" outline, drawn by ::after below; the pink accent already marks Live) and reads RAISED: a lit
   inner top edge, a shaded inner bottom, an orange tint that fades downward,
   and a soft orange glow beneath. Its icon and label lift a pixel (padding on
   the button, so the pill itself stays put). Unselected tabs stay quiet —
   muted, no ring, the icon embossed a hair in the dark — so the one that is on
   is the only thing with any depth. The ring is a pseudo-element under the
   content (isolation + z-index:-1), so its fill never sits over the icon;
   the Live tab's pink still wins for colour because the ring lives on ::before.
   THE SECOND PASS (the founder, 2026-09-12, from the phone): a thin line across
   the top that is felt rather than seen (1px, as Airbnb's bar has), the icon and
   label nudged down (they sat high over the home-indicator space, 3px of top
   padding and a 56px bar), the labels 13px instead of 10.5, a hair less room
   between the tabs, and the Live icon's outer arcs no longer clipped at the
   viewBox edge (overflow:visible on the svg — the arcs reach x=0 and x=24 and a
   2.3px stroke crossed the box). */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;justify-content:center;
  height:calc(56px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);
  background:linear-gradient(180deg,#141417,#000 72%);
  border-top:1px solid rgba(255,255,255,.2);
  box-shadow:0 -10px 32px rgba(0,0,0,.6)}
.tabbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.07) 0%,transparent 42%,transparent 68%,rgba(255,255,255,.04) 100%)}
:root[data-theme=light] .tabbar{background:linear-gradient(180deg,#FFFFFF,#F2F2F5);
  border-top-color:rgba(0,0,0,.14);box-shadow:0 -8px 28px rgba(0,0,0,.10)}
:root[data-theme=light] .tabbar::before{background:linear-gradient(105deg,rgba(255,255,255,.9) 0%,transparent 42%,transparent 68%,rgba(0,0,0,.025) 100%)}
.tabbar .in{position:relative;z-index:1;display:flex;width:100%;max-width:var(--maxw,600px)}
.tabbar button{position:relative;isolation:isolate;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;height:56px;padding:3px 1px 0;
  font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:var(--muted,#98989D);
  background:none;border:0;cursor:pointer;white-space:nowrap;
  transition:color .2s var(--ease,ease),transform .2s var(--spring,cubic-bezier(.34,1.4,.64,1))}
.tabbar button:active{transform:scale(.92)}
.tabbar button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;   /* a little smaller (the founder, 2026-09-14) */
  stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
:root[data-theme=light] .tabbar button svg{filter:none}
.tabbar button::before{content:"";position:absolute;z-index:-1;left:4px;right:4px;top:4px;bottom:4px;
  border-radius:var(--pill,999px);box-shadow:inset 0 0 0 1.5px transparent;
  transition:box-shadow .2s var(--ease,ease),background .2s var(--ease,ease)}
.tabbar button.on{color:var(--ink,#F5F5F7);padding-bottom:2px}  /* the 1px lift */
.tabbar button.on svg{stroke-width:2.3;filter:none}
.tabbar button.on::before{
  background:linear-gradient(180deg,rgba(255,86,80,.26),rgba(255,86,80,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -3px 6px rgba(0,0,0,.35),0 3px 12px rgba(255,86,80,.3)}
:root[data-theme=light] .tabbar button.on::before{
  background:linear-gradient(180deg,rgba(255,86,80,.18),rgba(255,86,80,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -3px 6px rgba(0,0,0,.07),0 3px 12px rgba(255,86,80,.22)}
/* the ring itself: the same band as every ring on the site (the founder, 2026-09-13),
   inset to the pill's own edges, behind icon and label with the pill */
.tabbar button.on::after{content:"";position:absolute;z-index:-1;left:4px;right:4px;top:4px;bottom:4px;
  border-radius:var(--pill,999px);padding:1.5px;background:var(--grad,linear-gradient(135deg,#FF375F,#FF6B45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* The Menu sheet's rows — Profile / Settings / plan / Sign out in the Artist
   Studio; Food & drink / Settings / plan / Sign out in the Venue Studio. */
.menurow{display:flex;align-items:center;gap:12px;width:100%;padding:15px 2px;
  border-top:.5px solid var(--hair,rgba(255,255,255,.09));
  font-family:inherit;font-size:16.5px;font-weight:600;letter-spacing:-.014em;text-align:left;
  background:none;border-left:0;border-right:0;border-bottom:0;color:inherit;cursor:pointer}
.menurow:first-of-type{border-top:none}
.menurow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round;flex:0 0 auto;color:var(--muted,#98989D)}
.menurow .m{flex:1;min-width:0}
.menurow .m span{display:block;font-size:12.5px;font-weight:500;color:var(--muted,#98989D);margin-top:1px}
.menurow .chev{color:var(--faint,#68686D);font-size:18px;flex:0 0 auto}
.menurow.out{color:var(--accent,#FF375F)}
.menurow.out svg{color:var(--accent,#FF375F)}