/* ============================================================================
   ShowUP — "Tuff" design system
   The single source of truth for every mockup in mockups-v2/.
   Spec: branding/design-direction.md   Type: branding/typography-v2.md

   Rules encoded here, not left to each screen:
     · hairlines, never card edges          · radius ~0, curves must mean something
     · one accent (amber); live/mint are signals, not accents
     · mono is instrumentation, never prose · density carries hierarchy
     · dark only, deliberately
   ========================================================================= */

:root{
  --stage:#0A0807; --ground:#100C0A; --surface:#191411; --rule:#2C221C;
  --ink:#F0EAE2; --body:#D9D2C9; --muted:#A2968C; --dim:#8A7D73;
  --amber:#F6B23C; --cta-ink:#241802; --live:#D42D24; --mint:#7BE0A8;

  --display:"Montserrat",system-ui,sans-serif;
  --text:"Noto Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0; padding:38px 20px 90px; background:var(--stage); color:var(--ink);
  font-family:var(--text); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1160px; margin:0 auto; }

/* ---------- page furniture ---------- */
.caption{ margin:0 0 26px; max-width:74ch; }
.caption h1{
  font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.02em;
  text-transform:uppercase; margin:0 0 7px;
}
.caption h1 .id{ color:var(--amber); }
.caption p{ margin:0; color:var(--muted); font-size:14px; }
.caption b{ color:var(--ink); font-weight:600; }

.note{
  margin:30px 0 0; padding-top:18px; border-top:1px solid var(--rule);
  color:var(--muted); font-size:13px; max-width:78ch;
}
.note b{ color:var(--ink); font-weight:600; }
.note code{ font-family:var(--mono); font-size:.88em; color:var(--amber); }

.gallery{ display:flex; flex-wrap:wrap; gap:44px 34px; align-items:flex-start; }

/* ---------- device ---------- */
.device{
  width:392px; flex:0 0 auto; background:var(--ground);
  border:1px solid var(--rule); overflow:hidden; position:relative;
}
.status{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px 6px; font-family:var(--mono); font-size:10px;
  font-weight:700; color:var(--dim); letter-spacing:.06em;
}
.pad{ padding:16px 16px 20px; }
.pad-t0{ padding-top:0; }

/* top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px 12px; border-bottom:1px solid var(--rule);
}
.brand{ font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.02em; text-transform:uppercase; }
.brand em{ font-style:normal; color:var(--amber); }
.back{
  width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--rule); background:transparent; color:var(--ink); font-size:14px; cursor:pointer;
}
.topttl{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.01em;
  text-transform:uppercase; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topact{ display:flex; gap:7px; align-items:center; }

/* tab bar — mono labels, no emoji, no icon chips */
.tabbar{
  display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.13em; text-align:center;
}
.tabbar span{ padding:11px 2px 12px; color:var(--dim); }
.tabbar span.on{ color:var(--amber); box-shadow:inset 0 2px 0 var(--amber); }
.tabbar span.add{ color:var(--ink); }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:9.5px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.h-xl{ font-family:var(--display); font-weight:800; font-size:29px; line-height:.98;
  letter-spacing:-.035em; text-transform:uppercase; margin:0 0 14px; text-wrap:balance; }
.h-l{ font-family:var(--display); font-weight:800; font-size:21px; line-height:1.02;
  letter-spacing:-.03em; text-transform:uppercase; margin:0 0 10px; }
.h-s{ font-family:var(--display); font-weight:800; font-size:15px; line-height:1.1;
  letter-spacing:-.02em; text-transform:uppercase; margin:0; }
.prose{ font-size:13.5px; line-height:1.62; color:var(--body); margin:0 0 18px; max-width:60ch; }
.prose b{ color:var(--ink); font-weight:600; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.amber{ color:var(--amber); } .muted{ color:var(--muted); } .dim{ color:var(--dim); }
.mint{ color:var(--mint); }

.sect{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:18px 0 9px; border-bottom:1px solid var(--rule); margin-bottom:2px; }
.sect .more{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber); }

/* ---------- venue line ---------- */
.venue{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:7px; }
.venue .vf{ color:var(--muted); }
.venue.alias{ color:var(--muted); }

/* ---------- facts table ---------- */
.facts{ border-top:1px solid var(--rule); margin-bottom:18px; }
.fact{ display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--rule); }
.fact .k{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim); }
.fact .v{ font-size:13.5px; font-weight:600; }
.fact .v small{ display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:2px; }
.fact .v a{ color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(246,178,60,.35); }
.fact .go{ color:var(--dim); font-size:14px; }

/* ---------- hero ---------- */
.hero{ position:relative; height:210px; background:#0C0908; overflow:hidden; }
.hero.tall{ height:250px; }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,12,10,.15) 0%,rgba(16,12,10,.55) 55%,var(--ground) 100%); }
.heroslot{ position:absolute; top:12px; right:12px; z-index:3; font-family:var(--mono);
  font-size:8.5px; font-weight:700; letter-spacing:.16em; color:var(--dim);
  border:1px solid var(--rule); padding:3px 6px; background:rgba(10,8,7,.7); }
.heronav{ position:absolute; top:12px; left:12px; z-index:3; display:flex; gap:7px; }
.heronav .back{ background:rgba(10,8,7,.66); }

/* LIVE ribbon — the one dimensional element. Depth earned by a physical metaphor. */
.ribbon{
  position:absolute; left:0; bottom:18px; z-index:3; display:flex; align-items:center; gap:8px;
  padding:7px 24px 7px 13px; color:#fff; font-family:var(--mono);
  font-size:10px; font-weight:800; letter-spacing:.16em;
  background:linear-gradient(180deg,#E8453A 0%,var(--live) 30%,#9E1D16 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.34),0 9px 18px -9px rgba(0,0,0,.85);
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}
.ribbon::before{ content:""; position:absolute; left:0; top:100%; width:11px; height:11px;
  background:#6E1410; clip-path:polygon(0 0,100% 0,0 100%); }
.ribbon i{ width:6px; height:6px; background:#fff; border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.22); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
@media (prefers-reduced-motion:reduce){ .ribbon i{ animation:none; } }

/* ---------- the ticket stub: THE loud moment ---------- */
.stub{ border:1px solid var(--amber); position:relative; padding:13px 15px 14px;
  background:linear-gradient(180deg,rgba(246,178,60,.07),rgba(246,178,60,.02)); }
/* half-circles: flat side borderless so the arc terminates on the card's own border */
.stub::before,.stub::after{ content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:9px; height:18px; background:var(--ground); border:1px solid var(--amber); }
.stub::before{ left:-1px; border-left:0; border-radius:0 9px 9px 0; }
.stub::after{ right:-1px; border-right:0; border-radius:9px 0 0 9px; }
.stub .top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.stub .lbl{ font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); }
.stub .state{ font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--mint); }
.stub .digits{ display:flex; align-items:center; gap:12px; }
.stub .num{ font-family:var(--mono); font-size:25px; font-weight:800; letter-spacing:.06em;
  line-height:1; font-variant-numeric:tabular-nums; }
.stub .foot{ font-size:10.5px; color:var(--muted); margin-top:8px; }
.qr{ background:var(--ink); padding:4px; flex:0 0 auto; }
.qr canvas{ display:block; image-rendering:pixelated; }

/* ---------- controls ---------- */
.btnrow{ display:grid; grid-template-columns:44px 1fr; gap:8px; margin-top:14px; }
.btn{ font-family:var(--display); font-weight:800; font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase; padding:13px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-p{ background:var(--amber); color:var(--cta-ink); }
.btn-g{ background:transparent; color:var(--ink); border:1px solid var(--rule); }
.btn-w{ width:100%; }
.btn .n{ font-family:var(--mono); font-size:10.5px; background:rgba(36,24,2,.18); padding:2px 6px; }
.icbtn{ border:1px solid var(--rule); background:transparent; color:var(--ink);
  display:grid; place-items:center; font-size:15px; cursor:pointer; }
.btn:focus-visible,.icbtn:focus-visible,.back:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 9px; border:1px solid var(--rule); color:var(--muted); }
.chip.on{ border-color:var(--amber); color:var(--amber); }

/* ---------- feed card: photo-led ----------
   The feed IS photography. Type sits over the image, meta sits under it.
   The image is the loud moment on a list screen — nothing else competes. */
.ecard{ border-bottom:1px solid var(--rule); padding-bottom:15px; margin-bottom:16px; }
.ecard:last-child{ border-bottom:0; }
.shot{ position:relative; height:196px; background:#0C0908; overflow:hidden; margin:0 -16px 0; }
.shot canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Scrim starts late — the photo is the product, so it gets most of the frame.
   Only enough darkness at the bottom to hold the title. */
.shot::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,12,10,0) 46%,rgba(16,12,10,.62) 82%,var(--ground) 100%); }
.shot .over{ position:absolute; left:16px; right:16px; bottom:10px; z-index:2; }
.shot .slot{ position:absolute; top:10px; right:14px; z-index:3; font-family:var(--mono);
  font-size:8px; font-weight:700; letter-spacing:.16em; color:var(--dim);
  border:1px solid var(--rule); padding:2px 5px; background:rgba(10,8,7,.7); }
.shot .tagl{ position:absolute; top:10px; left:14px; z-index:3; font-family:var(--mono);
  font-size:8px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:rgba(10,8,7,.72); border:1px solid var(--rule); padding:3px 7px; }
.ecard .meta{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--dim); margin-top:9px; }
/* friends line — amber marks it without becoming a box */
.friends{ display:flex; align-items:center; gap:9px; margin-top:11px;
  border-left:2px solid var(--amber); padding-left:10px; }
.friends .tx{ font-size:12.5px; color:var(--muted); line-height:1.35; }
.friends .tx b{ color:var(--ink); font-weight:700; }
.countonly{ font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  color:var(--dim); margin-top:11px; }

/* small photo for list rows */
.thumb{ width:56px; height:56px; flex:0 0 auto; background:#0C0908; overflow:hidden; position:relative; }
.thumb canvas{ width:100%; height:100%; display:block; }

/* ---------- list rows ---------- */
.rows{ border-top:1px solid var(--rule); }
.row{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--rule); }
.row .ttl{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.02em;
  text-transform:uppercase; line-height:1.15; }
.row .sub{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.row .sub .mono{ color:var(--dim); }
.row .go{ color:var(--dim); font-size:14px; }

/* avatars */
.avs{ display:flex; }
.av{ width:22px; height:22px; border-radius:50%; border:2px solid var(--ground); margin-left:-7px;
  display:grid; place-items:center; font-size:9px; font-weight:700; color:var(--cta-ink); }
.av:first-child{ margin-left:0; }
.av.lg{ width:34px; height:34px; font-size:13px; }
.av.xl{ width:56px; height:56px; font-size:21px; border-width:0; }
.av.g{ background:var(--muted); } .av.a{ background:var(--amber); } .av.d{ background:#C9A227; }

/* going line */
.going{ display:flex; align-items:center; gap:8px; padding-top:11px; margin-top:13px;
  border-top:1px solid var(--rule); font-size:12px; color:var(--muted); }
.going b{ color:var(--ink); font-weight:600; }

/* ---------- forms ---------- */
.field{ margin-bottom:13px; }
.field .lab{ font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); display:block; margin-bottom:5px; }
.input{ width:100%; background:var(--surface); border:1px solid var(--rule); color:var(--ink);
  font-family:var(--text); font-size:13.5px; padding:11px 12px; }
.input.ph{ color:var(--dim); }
textarea.input{ min-height:66px; resize:vertical; }

.opt{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--rule); }
.opt .t{ font-size:13.5px; font-weight:600; }
.opt .d{ font-size:11.5px; color:var(--muted); margin-top:2px; max-width:44ch; }
.sw{ width:38px; height:21px; border:1px solid var(--rule); background:var(--surface); position:relative; flex:0 0 auto; }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; background:var(--dim); }
.sw.on{ border-color:var(--amber); background:rgba(246,178,60,.16); }
.sw.on::after{ left:auto; right:2px; background:var(--amber); }

/* selectable card (privacy, visibility) */
.pick{ border:1px solid var(--rule); padding:13px 14px; margin-bottom:9px; }
.pick.on{ border-color:var(--amber); background:rgba(246,178,60,.05); }
.pick .ph{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pick .pt{ font-family:var(--display); font-weight:800; font-size:14px; letter-spacing:-.01em; text-transform:uppercase; }
.pick .pd{ font-size:12px; color:var(--muted); margin-top:5px; }
.pick .badge{ font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); padding:2px 6px; }

/* notice strip */
.strip{ border-left:2px solid var(--amber); padding:9px 0 9px 11px; margin:12px 0;
  font-size:12px; color:var(--body); background:rgba(246,178,60,.045); }
.strip b{ color:var(--ink); font-weight:600; }
.strip.warn{ border-left-color:var(--live); background:rgba(212,45,36,.06); }

/* keypad */
.pad-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); }
.key{ background:var(--ground); padding:13px 0 11px; text-align:center; cursor:pointer;
  font-family:var(--mono); font-size:19px; font-weight:700; }
.key small{ display:block; font-size:7.5px; letter-spacing:.14em; color:var(--dim); margin-top:2px; }
.key.sub{ font-size:15px; color:var(--muted); }

/* result / recent (door) */
.result{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  border:1px solid var(--mint); background:rgba(123,224,168,.07); padding:11px 12px; }
.result.bad{ border-color:var(--live); background:rgba(212,45,36,.08); }
.result .badge{ font-family:var(--mono); font-size:8.5px; font-weight:800; letter-spacing:.14em; color:var(--mint); }
.result.bad .badge{ color:#FF8378; }
.result .big{ font-size:20px; color:var(--mint); }
.result.bad .big{ color:#FF8378; }

/* counter */
.counter{ display:flex; align-items:baseline; gap:8px; }
.counter .big{ font-family:var(--mono); font-size:31px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; }

/* chat */
.msg{ display:grid; grid-template-columns:auto 1fr; gap:9px; margin-bottom:14px; }
.msg .who{ font-size:11px; color:var(--muted); margin-bottom:3px; }
.msg .who b{ color:var(--ink); font-weight:600; }
.msg .who .tag{ font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule); padding:1px 4px; color:var(--dim); margin-left:4px; }
.msg .txt{ font-size:13px; line-height:1.5; color:var(--body); }
.msg.me{ grid-template-columns:1fr; text-align:right; }
.msg.me .txt{ border-right:2px solid var(--amber); padding-right:10px; }
.sysline{ text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin:12px 0 16px; }

/* day divider */
.day{ display:flex; align-items:baseline; gap:9px; padding:16px 0 8px; }
.day .d1{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:-.01em; text-transform:uppercase; }
.day .d2{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--dim); }
.day .ln{ flex:1; height:1px; background:var(--rule); }

/* stars */
.stars{ font-size:12px; color:var(--amber); letter-spacing:.12em; }