/* ============================================================
   Signed-in shell — dashboard & admin
   ============================================================ */

.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); }

.topbar {
  background: var(--ink); color: var(--on-dark);
  border-bottom: 1px solid var(--rule-dark);
  position: sticky; top: 0; z-index: 90;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-gold) 20%, var(--rule-gold) 80%, transparent);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 1rem; }
.topbar__right { display: flex; align-items: center; gap: .85rem; }
.who { text-align: right; line-height: 1.35; }
.who strong { display: block; font-size: .875rem; color: var(--on-dark); font-weight: 600; }
.who span { display: block; font-size: .7rem; color: rgba(252,249,240,.56); font-family: var(--mono); }
/* The avatar is built for a pale card, so on the topbar it needs the dark
   treatment: the initials fallback would otherwise be near-black on
   near-black, and the ring would vanish entirely. */
.topbar .avatar { border-color: var(--rule-gold); }
.topbar .avatar--none { background: rgba(240,220,168,.16); color: var(--gold-lit); }
/* The tabs bar sticks directly beneath the topbar, so this height and the
   `top` offset on .tabs must change at the same breakpoint or they overlap. */
@media (max-width: 720px) {
  .who { display: none; }
  .topbar__in { height: 58px; }
  .topbar__right { gap: .45rem; }
}

.tabs {
  background: var(--forest); border-bottom: 1px solid var(--rule-dark);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  position: sticky; top: 66px; z-index: 89;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__in { display: flex; gap: .4rem; padding: .65rem 0; }
/* The same treatment on the dashboard and the admin panel, so a person who
   learns the shape on one page recognises it on the others. The selected tab
   is filled rather than underlined; a fill survives being scrolled sideways
   on a phone, where a 2px underline at the edge of the screen does not. */
.tab {
  background: rgba(252,249,240,.05);
  border: 1px solid rgba(240,220,168,.16);
  border-radius: 100px; cursor: pointer;
  font-family: var(--body); font-size: .82rem; font-weight: 600;
  color: rgba(252,249,240,.72); padding: .5rem .95rem;
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover {
  color: var(--gold-lit);
  background: rgba(192,138,46,.16);
  border-color: var(--rule-gold);
}
.tab[aria-selected="true"] {
  color: #2A1A03;
  background: linear-gradient(178deg, var(--gold-lit), var(--gold));
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,244,214,.55);
}
.tab[aria-selected="true"]:hover {
  background: linear-gradient(178deg, var(--gold-pale), var(--gold-lit));
  color: #2A1A03;
}
.tab:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 2px; }

.tab__badge[hidden] { display: none; }
.tab__badge {
  display: inline-block; background: var(--kumkum); color: #FFFFFF;
  font-family: var(--mono); font-size: .62rem; padding: .08rem .38rem;
  border-radius: 100px; margin-left: .4rem; vertical-align: middle;
}
@media (max-width: 720px) {
  .tabs {
    top: 58px;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
            mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .tab { padding: .5rem .85rem; font-size: .8rem; }
  .tabs__in { padding: .55rem 0; }
}

.page { flex: 1; padding: 2.5rem 0 5rem; }
.panel[hidden] { display: none; }

.page__head { margin-bottom: 2rem; }
.page__head h1 { font-size: 1.9rem; margin-bottom: .4rem; letter-spacing: -.035em; }
.page__head p { color: var(--text-3); font-size: .93rem; margin: 0; line-height: 1.6; }
@media (max-width: 720px) {
  .page { padding: 1.75rem 0 3.5rem; }
  .page__head { margin-bottom: 1.4rem; }
  .page__head h1 { font-size: 1.55rem; }
}

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 1.1rem; margin-bottom: 2rem; }
.stat {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 1.3rem 1.35rem; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat__k {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: .55rem;
}
.stat__v {
  font-family: var(--mono); font-size: 1.72rem; color: var(--figure);
  font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1.1;
}
.stat__n { font-size: .74rem; color: var(--text-3); margin-top: .4rem; line-height: 1.45; }
.stat--gold {
  background: radial-gradient(400px 200px at 88% 0%, rgba(192,138,46,.2), transparent 62%),
    linear-gradient(168deg, var(--forest), var(--ink));
  border-color: var(--rule-gold);
}
.stat--gold .stat__k { color: rgba(240,220,168,.6); }
.stat--gold .stat__v { color: var(--gold-lit); text-shadow: 0 0 24px rgba(232,190,104,.22); }
.stat--gold .stat__n { color: rgba(252,249,240,.52); }

/* Two up on a phone beats one very wide card per row. */
@media (max-width: 680px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1.5rem; }
  .stat { padding: .95rem 1rem; border-radius: var(--r); }
  .stat__v { font-size: 1.28rem; }
  .stat__k { font-size: .58rem; letter-spacing: .13em; margin-bottom: .4rem; }
  .stat__n { font-size: .68rem; }
}
@media (max-width: 380px) { .stats { grid-template-columns: 1fr; } }

/* ============================================================
   THE PASSBOOK — signature element
   ============================================================ */
.passbook {
  background: var(--surface);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.75rem;
}

/* Stitched spine down the top edge */
.passbook__spine {
  background: radial-gradient(600px 260px at 88% 0%, rgba(192,138,46,.16), transparent 64%),
    linear-gradient(168deg, var(--forest) 0%, var(--ink) 100%);
  color: var(--on-dark);
  padding: 1.6rem 1.75rem;
  position: relative;
}
.passbook__spine::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 9px, transparent 9px 17px);
  opacity: .5;
}
.pb__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pb__plan { font-family: var(--display); font-size: 1.45rem; color: var(--on-dark); letter-spacing: -.03em; }
.pb__ref {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  color: rgba(240,220,168,.68); margin-top: .35rem;
}
.pb__figures { display: flex; gap: 2.4rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pb__fig dt {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(240,220,168,.58); margin-bottom: .3rem;
}
.pb__fig dd {
  margin: 0; font-family: var(--mono); font-size: 1.36rem; color: var(--on-dark);
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
}
.pb__fig dd.up { color: var(--gold-lit); text-shadow: 0 0 22px rgba(232,190,104,.24); }

.pb__actions {
  padding: 1rem 1.75rem; background: var(--paper-2);
  border-bottom: 1px solid var(--rule); display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.pb__actions .spacer { flex: 1; }
.pb__meta { font-size: .78rem; color: var(--text-3); }

/* Ruled ledger rows */
.pb__ledger { padding: 0; }
.pb__ledger table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.pb__ledger thead th {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); font-weight: 600;
  text-align: left; padding: .8rem 1.75rem; border-bottom: 1px solid var(--rule);
  background: rgba(229,219,194,.26); white-space: nowrap;
}
.pb__ledger thead th.right { text-align: right; }
.pb__ledger tbody td {
  padding: .88rem 1.75rem;
  border-bottom: 1px solid var(--rule-2);
  font-variant-numeric: tabular-nums;
}
.pb__ledger tbody td.right { text-align: right; }
.pb__ledger tbody tr:nth-child(even) { background: rgba(229,219,194,.15); }
.pb__ledger tbody tr:last-child td { border-bottom: 0; }
.pb__month { font-family: var(--mono); font-weight: 600; color: var(--figure); letter-spacing: -.01em; }
.pb__credit { font-family: var(--mono); font-weight: 600; color: var(--leaf); letter-spacing: -.02em; }
.pb__rate {
  font-family: var(--mono); display: inline-block;
  background: var(--gold-pale); color: var(--gold-deep);
  padding: .14rem .48rem; border-radius: 3px; font-size: .78rem; font-weight: 600;
  border: 1px solid rgba(192,138,46,.2);
}
.pb__working { font-family: var(--mono); font-size: .74rem; color: var(--text-4); }

.pb__pending {
  margin: 0; padding: .9rem 1.75rem;
  background: rgba(192,138,46,.08); border-bottom: 1px solid var(--rule);
  font-size: .83rem; color: var(--gold-deep);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

@media (max-width: 720px) {
  .passbook__spine { padding: 1.25rem 1.15rem; }
  .pb__plan { font-size: 1.25rem; }
  .pb__figures { gap: 1.4rem; margin-top: 1.15rem; }
  .pb__fig dd { font-size: 1.15rem; }
  .pb__actions { padding: .85rem 1.15rem; }
  .pb__actions .btn { flex: 1 1 auto; }
  .pb__ledger thead th,
  .pb__ledger tbody td { padding-left: 1.15rem; padding-right: 1.15rem; }
  .pb__pending { padding: .85rem 1.15rem; }
}

/* ---------- Plan picker cards inside the app ---------- */
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1.2rem; }
.pick__card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem; cursor: pointer; text-align: left; font-family: var(--body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.pick__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.pick__card:hover { border-color: var(--rule-gold); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pick__card:hover::before { transform: scaleX(1); }
.pick__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The stage someone chose on the rate board before signing up. It reuses the
   hover state's gold bar, held open. Two classes, so it is not undone by the
   :hover rule above the way a single-class modifier would be. */
.pick__card.pick__card--picked { border-color: var(--rule-gold); box-shadow: var(--shadow-md); }
.pick__card.pick__card--picked::before { transform: scaleX(1); }
.pick__name { font-family: var(--display); font-size: 1.26rem; margin-bottom: .25rem; letter-spacing: -.028em; }
.pick__rate {
  font-family: var(--mono); font-size: 1.65rem; color: var(--figure);
  font-variant-numeric: tabular-nums; letter-spacing: -.045em; margin: .65rem 0 .15rem;
}
.pick__rate.none { font-size: .85rem; color: var(--text-4); letter-spacing: 0; }
.pick__lab {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 1rem;
}
.pick__range {
  font-family: var(--mono); font-size: .78rem; color: var(--text-2);
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--rule); line-height: 1.6;
}

/* ---------- Payment box ---------- */
.paybox {
  background: linear-gradient(168deg, var(--paper-2), rgba(244,237,219,.55));
  border: 1px dashed var(--paper-3);
  border-radius: var(--r); padding: 1.15rem 1.25rem; font-size: .85rem;
}
.paybox dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.1rem; margin: .7rem 0 0; }
.paybox dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.paybox dd { margin: 0; font-family: var(--mono); font-size: .84rem; word-break: break-word; }
@media (max-width: 480px) {
  .paybox dl { grid-template-columns: 1fr; gap: .15rem; }
  .paybox dd { margin-bottom: .55rem; }
}

/* ---------- Admin extras ---------- */
/* minmax(0, …) rather than a bare fr. A grid track's automatic minimum is its
   min-content width, so one wide table inside a card pushes its whole column
   past the share it was given and spills over the card's edge. Pinning the
   minimum to 0 lets the track hold its proportion and hands the overflow to
   .table-wrap, which is built to scroll it. */
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } }

/* A wider first column, for a split whose left side is a table and whose right
   side is a short list. An even 1.35/1 leaves the table's last column jammed
   against the card edge while the list beside it sits half empty. */
.split--wide { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .split--wide { grid-template-columns: minmax(0, 1fr); } }

/* A flush card body has no padding of its own, so the first and last cells of
   a table inside it end up hard against the card's border. Give those two
   columns the breathing room the card would otherwise have provided. */
.card__body--flush table.data th:first-child,
.card__body--flush table.data td:first-child { padding-left: 1.4rem; }
.card__body--flush table.data th:last-child,
.card__body--flush table.data td:last-child { padding-right: 1.4rem; }

.declare-row {
  display: grid; grid-template-columns: 1.4fr 108px auto; gap: .9rem;
  align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--rule);
}
.declare-row:last-child { border-bottom: 0; }
.declare-row__name { font-family: var(--display); font-size: 1.05rem; letter-spacing: -.025em; }
.declare-row__meta { font-family: var(--mono); font-size: .7rem; color: var(--text-3); margin-top: .15rem; }
.declare-row__cost {
  font-family: var(--mono); font-size: .8rem; color: var(--text-3);
  text-align: right; min-width: 112px; letter-spacing: -.02em;
}
@media (max-width: 600px) {
  .declare-row { grid-template-columns: 1fr 96px; gap: .7rem; }
  .declare-row__cost { grid-column: 1/-1; text-align: left; min-width: 0; }
}

.toolbar { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.3rem; }
.toolbar .input { max-width: 280px; }
@media (max-width: 560px) { .toolbar .input { max-width: none; flex: 1 1 100%; } }

.seg {
  display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; background: var(--surface);
}
.seg button {
  background: var(--surface); border: none; cursor: pointer; font-family: var(--body);
  font-size: .8rem; font-weight: 600; padding: .58rem .95rem; color: var(--text-3);
  border-right: 1px solid var(--rule);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: rgba(192,138,46,.07); }
.seg button[aria-pressed="true"] { background: var(--forest); color: var(--on-dark); }
@media (hover: none) { .seg button { min-height: 42px; } }

.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--gold-deep); font-weight: 600; font-family: var(--body); font-size: inherit;
}
.linkish:hover { text-decoration: underline; }

/* ---------- Refer & earn ---------- */
/* The code is meant to be read out over a phone, so it is set large with
   wide tracking rather than as body text. */
.refcode {
  font-family: var(--mono); font-size: 1.55rem; font-weight: 600;
  letter-spacing: .16em; color: var(--figure);
  background: linear-gradient(178deg, var(--paper-2), rgba(244,237,219,.5));
  border: 1px dashed var(--paper-3); border-radius: var(--r);
  padding: 1.05rem 1.1rem; text-align: center;
  box-shadow: inset 0 2px 5px rgba(7,20,17,.06), inset 0 -1px 0 var(--lift);
  word-break: break-all;
}
@media (max-width: 480px) { .refcode { font-size: 1.2rem; letter-spacing: .12em; } }

.refer-steps { margin: 0; padding-left: 1.15rem; }
.refer-steps li {
  font-size: .88rem; color: var(--text-2);
  line-height: 1.6; margin-bottom: .55rem; padding-left: .2rem;
}
.refer-steps li::marker { color: var(--gold); font-family: var(--mono); font-weight: 600; }

/* ---------- Staff gate ----------
   The browser's own [hidden] rule is display:none at the lowest possible
   priority, so any element that sets display — .shell sets flex — ignores it.
   Without this the admin panel would render for anyone who typed the URL. */
[hidden] { display: none !important; }

.gate {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 2rem 1.25rem; background: var(--paper);
  /* The vanishing point the card tilts against. On the container rather than
     the card, so the card's own children are not flattened. */
  perspective: 1500px;
}
.gate__checking {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin: 0;
}
/* A stack of shadows rather than one blur: each layer is roughly twice the
   distance and half the opacity of the last, which is how a real object sits
   above a surface. The two inset lines are the object's own edges — light
   catching the top, the bottom in its own shade. */
.gate__card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 2rem 1.8rem;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  box-shadow:
    inset 0 1px 0 var(--lift),
    inset 0 -1px 0 rgba(7,20,17,.05),
    0 1px 2px rgba(7,20,17,.05),
    0 5px 10px rgba(7,20,17,.05),
    0 14px 28px rgba(7,20,17,.07),
    0 30px 58px rgba(7,20,17,.09),
    0 60px 100px rgba(7,20,17,.07);
}
/* A gold hairline along the top edge, the same trick the landing nav uses. */
.gate__card::before {
  content: ''; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-gold) 22%, var(--rule-gold) 78%, transparent);
}
/* Obsidian has its own shadow scale for a reason: a drop shadow on a near
   black ground does almost nothing, so the depth has to come from the card
   being lighter than the page and from harder edges. */
[data-theme="dark"] .gate__card {
  box-shadow:
    inset 0 1px 0 var(--lift),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.5),
    0 14px 34px rgba(0,0,0,.55),
    0 44px 84px rgba(0,0,0,.5);
}
/* While the pointer is driving the tilt the card must track it exactly; a
   transition here would lag a frame behind the cursor. Two classes beat one,
   so this wins over the rule above without needing !important. */
.gate__card.is-tilting { transition: none; }
.gate__brand {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--rule);
}
/* The brand mark is built for the dark topbar, so it needs the page colours here. */
.gate__brand .brand__mark { color: var(--text); font-size: 1.05rem; }
.gate__brand .brand__mark em { color: var(--gold-text); font-style: normal; }
.gate__brand .brand__hall {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-text);
  border: 1px solid var(--rule-gold); border-radius: 100px; padding: .2rem .5rem;
}
.gate__title { font-size: 1.5rem; margin: 0 0 .4rem; letter-spacing: -.03em; color: var(--text); }
.gate__sub { font-size: .88rem; color: var(--text-3); margin: 0 0 1.5rem; line-height: 1.55; }
.gate__alt {
  margin: 1.2rem 0 0; text-align: center;
  font-size: .8rem; color: var(--text-3);
}
.gate__alt a { color: var(--gold-text); text-decoration: none; }
.gate__alt a:hover { text-decoration: underline; }
@media (max-width: 420px) { .gate__card { padding: 1.6rem 1.3rem; } }
.gate--check { flex-direction: column; gap: .9rem; text-align: center; }
.gate__stuck {
  max-width: 30rem; margin: 0; font-size: .86rem; line-height: 1.6;
  color: var(--text-3);
}