/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:      #140A10;   /* park at 1am — black with a plum bruise in it */
  --ink-2:    #1D1018;   /* panel */
  --ink-3:    #2A1723;   /* raised */
  --line:     #3A2430;
  --bone:     #EFE5D8;   /* parchment, the map you fold in your pocket */
  --bone-dim: #A2918C;
  --amber:    #F0921F;   /* sodium vapor light over the parking lot */
  --amber-lo: #6A4212;
  --fog:      #6FD0C0;   /* the teal of scare zone fog lights */
  --blood:    #B4262F;
  --gold:     #F5C542;

  /* One colour per attraction Kind. `kind_class` hands out `.is-<kind>`; every surface
     that wears the ticket-stub shape reads these and nothing else. A kind with no token
     falls back to the neutral --line / --fog treatment. */
  --kind-house:     var(--fog);
  --kind-house-lo:  #2C4E48;
  --kind-zone:      var(--amber);
  --kind-zone-lo:   var(--amber-lo);
  --kind-show:      #C79BE0;
  --kind-show-lo:   #4B3459;
  --kind-live:      #E8618C;
  --kind-live-lo:   #5A2537;

  --r: 4px;
  --pad: 16px;
  --maxw: 940px;

  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
/* The `hidden` attribute must win over layout rules like .pills{display:flex}. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(120% 60% at 50% -10%, #2A1522 0%, transparent 60%),
    var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:15px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  padding-bottom:96px;
  min-height:100vh;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
:focus-visible{ outline:2px solid var(--fog); outline-offset:2px; border-radius:2px; }
::selection{ background:var(--amber); color:var(--ink); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.hidden{ display:none !important; }

/* ============================================================
   MARQUEE HEADER
   ============================================================ */
.marquee{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#22111C, #170C13);
}
.marquee__in{
  max-width:var(--maxw); margin:0 auto; padding:10px var(--pad);
  display:flex; align-items:center; gap:14px;
}
.logo{
  font-family:var(--display); font-weight:900;
  font-size:34px; line-height:.82; letter-spacing:.01em;
  text-transform:uppercase; color:var(--bone);
  display:flex; align-items:baseline; gap:0;
}
.logo em{ color:var(--amber); font-style:normal; }
.logo .bulb{
  width:7px; height:7px; border-radius:50%; background:var(--amber);
  margin-left:7px; align-self:center;
  box-shadow:0 0 10px var(--amber);
  animation:flicker 4s infinite steps(1);
}
@keyframes flicker{
  0%,88%,100%{ opacity:1 } 90%{ opacity:.15 } 92%{ opacity:1 } 94%{ opacity:.3 } 96%{ opacity:1 }
}
.tagline{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim); margin-left:auto; text-align:right;
}

/* nav */
.tabs{
  display:flex; gap:0; border-bottom:1px solid var(--line);
  background:var(--ink); position:sticky; top:0; z-index:35;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none }
.tabs__in{ display:flex; max-width:var(--maxw); margin:0 auto; width:100%; padding:0 8px; }
.tab{
  flex:1 0 auto; padding:11px 14px 9px; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim); border-bottom:2px solid transparent; white-space:nowrap;
  text-align:center; text-decoration:none;
}
.tab[aria-selected="true"]{ color:var(--amber); border-bottom-color:var(--amber); }
.tab:hover{ color:var(--bone); }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.eyebrow{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-dim);
  display:flex; align-items:center; gap:10px; margin:26px 0 10px;
}
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--line); }

h2.big{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(30px,7vw,44px); line-height:.9; letter-spacing:.005em;
  margin:0 0 4px;
}

.panel{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--ink-3); color:var(--bone);
  font-weight:600; font-size:14px; text-decoration:none;
  transition:background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover{ border-color:var(--bone-dim); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--amber); color:#1A0E06; border-color:var(--amber); font-weight:700; }
.btn--primary:hover{ background:#FFA637; border-color:#FFA637; }
.btn--ghost{ background:transparent; }
.btn--danger{ color:#F09098; border-color:#5B2027; }
.btn--danger:hover{ background:#3A171C; border-color:var(--blood); }
.btn--sm{ padding:7px 11px; font-size:12.5px; }
.btn--block{ width:100%; }
.btn--big{ padding:16px; font-size:16px; }

.row{ display:flex; gap:8px; flex-wrap:wrap; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

label.f{ display:block; margin-bottom:12px; }
label.f > span{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:5px;
}
input[type=text],input[type=date],input[type=number],input[type=time],
input[type=password],input[type=email],select,textarea{
  width:100%; padding:10px 11px; background:var(--ink); color:var(--bone);
  border:1px solid var(--line); border-radius:var(--r); font-size:15px;
}
textarea{ resize:vertical; min-height:64px; font-size:14px; }
input:focus,select:focus,textarea:focus{ border-color:var(--fog); outline:none; }

input[type=checkbox],input[type=radio]{ accent-color:var(--amber); }

input[type=file]{ color:var(--bone-dim); font-size:13px; }
input[type=file]::file-selector-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:7px 11px; border-radius:var(--r); margin-right:10px;
  border:1px solid var(--line); background:var(--ink-3); color:var(--bone);
  font:inherit; font-weight:600; font-size:12.5px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
input[type=file]::file-selector-button:hover{ border-color:var(--bone-dim); }

.pills{ display:flex; flex-wrap:wrap; gap:6px; }
.pill{
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:12px; color:var(--bone-dim); background:var(--ink);
  text-decoration:none;
}
.pill:hover{ color:var(--bone); border-color:var(--bone-dim); }
.pill[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); color:#1A0E06; font-weight:700; }
.pill--fog[aria-pressed="true"],.pills--fog .pill[aria-pressed="true"]{ background:var(--fog); border-color:var(--fog); color:#08201C; }

.empty{
  border:1px dashed var(--line); border-radius:var(--r); padding:22px 16px;
  text-align:center; color:var(--bone-dim); font-size:14px;
}
.empty strong{ display:block; color:var(--bone); font-family:var(--display);
  font-size:22px; text-transform:uppercase; font-weight:700; margin-bottom:4px; letter-spacing:.02em;}

.warnbar{
  background:#3A2410; border-bottom:1px solid var(--amber-lo); color:#FFD9A1;
  font-size:12.5px; padding:8px var(--pad); text-align:center;
}
/* A write the server refused. Louder than the offline notice: offline is normal and
   recoverable, this is a stub the user has actually lost. */
.warnbar--bad{ background:#3E1218; border-bottom-color:#7A2233; color:#FFC2CC; }

/* ============================================================
   SIGNATURE: THE TICKET STUB
   ============================================================ */
.stub{
  display:flex; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:10px;
  position:relative;
}
.stub--live{ border-color:var(--amber); background:linear-gradient(180deg,#2E1A0C,#1F1218); }
/* Kind tint: a subtle wash and a coloured edge, never the whole card. */
.stub.is-house{ border-color:var(--kind-house-lo); background:linear-gradient(180deg,#1A1A1D,var(--ink-2)); }
.stub.is-zone{  border-color:var(--kind-zone-lo);  background:linear-gradient(180deg,#24170F,var(--ink-2)); }
.stub.is-show{  border-color:var(--kind-show-lo);  background:linear-gradient(180deg,#22161F,var(--ink-2)); }
.stub.is-live{  border-color:var(--kind-live-lo);  background:linear-gradient(180deg,#26141A,var(--ink-2)); }
.stub.is-house /* Facts are separated only between neighbours, whatever subset a kind shows. */
.stub__facts .fact + .fact::before{ content:'|'; color:var(--line); margin:0 6px; }
.stub__perf{ border-left-color:var(--kind-house-lo); }
.stub.is-zone  .stub__perf{ border-left-color:var(--kind-zone-lo); }
.stub.is-show  .stub__perf{ border-left-color:var(--kind-show-lo); }
.stub.is-live  .stub__perf{ border-left-color:var(--kind-live-lo); }
.stub.is-house .stub__meta{ color:var(--kind-house); }
.stub.is-zone  .stub__meta{ color:var(--kind-zone); }
.stub.is-show  .stub__meta{ color:var(--kind-show); }
.stub.is-live  .stub__meta{ color:var(--kind-live); }
.stub__body{ flex:1; padding:12px 14px; min-width:0; }
.stub__perf{
  position:relative; width:0; border-left:2px dashed var(--line); flex:0 0 auto;
}
.stub--live .stub__perf{ border-left-color:var(--amber-lo); }
.stub__perf::before,.stub__perf::after{
  content:''; position:absolute; left:-7px; width:12px; height:12px;
  border-radius:50%; background:var(--ink); border:1px solid var(--line);
}
.stub__perf::before{ top:-7px; }
.stub__perf::after{ bottom:-7px; }
.stub__tear{
  flex:0 0 92px; padding:12px 10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; text-align:center;
}
.stub__meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bone-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stub__name{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:25px; line-height:1; letter-spacing:.01em; margin:3px 0 5px;
  word-break:break-word;
}
.stub__facts{
  font-family:var(--mono); font-size:11.5px; color:var(--bone);
  display:flex; flex-wrap:wrap; gap:4px 9px;
}
.stub__facts b{ color:var(--amber); font-weight:700; }
.stub__note{
  font-size:13px; color:var(--bone-dim); margin-top:7px; font-style:italic;
  border-left:2px solid var(--line); padding-left:8px;
}
.stub__score{ font-family:var(--mono); font-size:19px; font-weight:700; color:var(--gold); line-height:1; }
.stub__scorelabel{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; color:var(--bone-dim); text-transform:uppercase; }
.stub__acts{ display:flex; gap:6px; margin-top:8px; }
.linkbtn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-dim); border-bottom:1px solid transparent; padding:2px 0;
}
.linkbtn:hover{ color:var(--amber); border-bottom-color:var(--amber); }
.linkbtn--danger:hover{ color:#F09098; border-bottom-color:#F09098; }

.clock{
  font-family:var(--mono); font-weight:700; font-size:44px; line-height:1;
  color:var(--amber); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.clock small{ font-size:14px; letter-spacing:.1em; color:var(--bone-dim); display:block; margin-top:2px; }

.stars{ font-size:14px; letter-spacing:1px; white-space:nowrap; }
.st{ position:relative; display:inline-block; color:#4A3A2A; }
.st__f{ position:absolute; left:0; top:0; overflow:hidden; color:var(--gold); white-space:nowrap; }
.stars--none{ color:#4A3A2A; }
.heart{ color:var(--blood); }

/* ============================================================
   TONIGHT
   ============================================================ */
.nightcard{
  border:1px solid var(--line); border-radius:var(--r); padding:14px;
  background:linear-gradient(135deg,#241320,#1A0E15);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.nightcard__date{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:30px; line-height:.9;
}
.nightcard__sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim); }

.tape{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-top:10px;
}
.tape > div{ background:var(--ink-2); padding:10px 6px; text-align:center; }
.tape b{
  display:block; font-family:var(--mono); font-weight:700; font-size:20px;
  color:var(--bone); font-variant-numeric:tabular-nums;
}
.tape span{ font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:8px; }
.acard{
  text-align:left; padding:12px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2); position:relative; transition:border-color .12s, background .12s;
}
.acard:hover{ border-color:var(--amber); background:var(--ink-3); }
.acard__type{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog); }
.acard__type.is-house{ color:var(--kind-house); }
.acard__type.is-zone{ color:var(--kind-zone); }
.acard__type.is-show{ color:var(--kind-show); }
.acard__type.is-live{ color:var(--kind-live); }
.acard__name{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:19px; line-height:1.02; margin-top:3px;
}
.acard__loc{ font-family:var(--mono); font-size:10px; color:var(--bone-dim); margin-top:4px; }
.acard__count{
  position:absolute; top:8px; right:8px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--amber); color:#1A0E06;
  font-family:var(--mono); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.acard__count.is-season{ background:var(--ink-3); color:var(--bone-dim); border:1px solid var(--line); }

/* ============================================================
   MODAL
   ============================================================ */
.scrim{
  position:fixed; inset:0; background:rgba(8,4,7,.82); z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter:blur(3px);
}
.sheet{
  background:var(--ink-2); border:1px solid var(--line); border-bottom:none;
  border-radius:10px 10px 0 0; width:100%; max-width:560px;
  max-height:92vh; overflow-y:auto; padding:16px 16px 24px;
  animation:rise .18s ease-out;
}
@keyframes rise{ from{ transform:translateY(22px); opacity:.4 } to{ transform:none; opacity:1 } }
.sheet__grab{ width:36px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 12px; }
.sheet h3{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:29px; line-height:.95; margin:0 0 2px;
}
.sheet__sub{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:16px; }

.starpick{ display:flex; align-items:center; gap:2px; }
.starpick__s{ position:relative; width:36px; height:36px; }
.starpick__h{
  position:absolute; top:0; width:50%; height:100%; z-index:2;
}
.starpick__h--l{ left:0 } .starpick__h--r{ right:0 }
.starpick__g{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:29px; color:#4A3A2A; pointer-events:none; line-height:1;
}
.starpick__g.on{ color:var(--gold); }
.starval{ font-family:var(--mono); font-weight:700; font-size:17px; color:var(--gold); margin-left:10px; }

/* ============================================================
   STATS
   ============================================================ */
.bigstats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.bigstats > div{ background:var(--ink-2); padding:14px 12px; }
.bigstats b{
  display:block; font-family:var(--mono); font-weight:700; font-size:29px;
  line-height:1; color:var(--amber); font-variant-numeric:tabular-nums;
}
.bigstats span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim); display:block; margin-top:6px; }

.bars{ display:flex; flex-direction:column; gap:7px; }
.bar{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.bar__label{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar__track{ grid-column:1/-1; height:9px; background:var(--ink-3); border-radius:2px; overflow:hidden; }
.bar__fill{ height:100%; background:var(--amber); border-radius:2px; }
.bar__fill.is-house{ background:var(--kind-house); }
.bar__fill.is-zone{ background:var(--kind-zone); }
.bar__fill.is-show{ background:var(--kind-show); }
.bar__fill.is-live{ background:var(--kind-live); }
.bar__val{ font-family:var(--mono); font-size:12px; color:var(--bone-dim); font-variant-numeric:tabular-nums; }

.hist{ display:flex; align-items:flex-end; gap:3px; height:110px; }
.hist__col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; height:100%; }
.hist__bar{ width:100%; background:var(--gold); border-radius:2px 2px 0 0; min-height:2px; }
.hist__bar.is-amber{ background:var(--amber); }
.hist__x{ font-family:var(--mono); font-size:8.5px; color:var(--bone-dim); }
.hist__n{ font-family:var(--mono); font-size:9.5px; color:var(--bone); }

table.lb{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.lb th{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-dim); text-align:right; padding:6px 5px; border-bottom:1px solid var(--line); font-weight:400;
}
table.lb th:first-child{ text-align:left; }
table.lb td{ padding:8px 5px; border-bottom:1px solid #26161F; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
table.lb td:first-child{ text-align:left; font-family:var(--body); }
table.lb tr:hover td{ background:#20121A; }
.tag{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fog); border:1px solid #2C4E48; padding:1px 4px; border-radius:2px; margin-left:6px;
}
.tag.is-house{ color:var(--kind-house); border-color:var(--kind-house-lo); }
.tag.is-zone{ color:var(--kind-zone); border-color:var(--kind-zone-lo); }
.tag.is-show{ color:var(--kind-show); border-color:var(--kind-show-lo); }
.tag.is-live{ color:var(--kind-live); border-color:var(--kind-live-lo); }
.scroll-x{ overflow-x:auto; }

.scatter{ width:100%; height:auto; display:block; }
.scatter text{ font-family:var(--mono); font-size:9px; fill:var(--bone-dim); }
.scatter .dot{ fill:var(--amber); }
.scatter .dot--zone{ fill:var(--fog); }
.scatter .grid-l{ stroke:var(--line); stroke-width:1; }
.legend{ font-family:var(--mono); font-size:10px; color:var(--bone-dim); display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; }

/* ============================================================
   LINEUP / DIARY
   ============================================================ */
.lineitem{
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid #26161F;
}
.lineitem__name{ font-family:var(--display); font-size:21px; font-weight:700; text-transform:uppercase; line-height:1; }
.lineitem--dim{ opacity:.45; }
/* An @username, wherever one is printed: always a link to that profile. */
.handle{ color:inherit; text-decoration:none; border-bottom:1px dotted var(--bone-dim); }
.handle:hover{ color:var(--amber); border-bottom-color:var(--amber); }
.lineitem__sub{ font-family:var(--mono); font-size:10px; color:var(--bone-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }

.nighthead{
  display:flex; align-items:baseline; gap:10px; margin:24px 0 10px; flex-wrap:wrap;
}
.nighthead h3{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:27px; margin:0; line-height:1;
}
.nighthead .m{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); }

.diary-jump{
  position:sticky; top:38px; z-index:30;
  display:flex; gap:6px; overflow-x:auto; margin:14px 0 4px; padding:8px 0;
  background:var(--ink); scrollbar-width:none;
}
.diary-jump::-webkit-scrollbar{ display:none; }
.diary-jump a{
  flex:0 0 auto; padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  color:var(--bone-dim); font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-decoration:none;
}
.diary-jump a:hover{ color:var(--amber); border-color:var(--amber); }
.diary-season{ scroll-margin-top:92px; }
.diary-season__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:28px 0 2px; padding-bottom:7px; border-bottom:1px solid var(--line);
}
.diary-season__head h2{
  margin:0; color:var(--amber); font-family:var(--display); font-size:34px;
  font-weight:900; line-height:1; letter-spacing:.02em;
}
.diary-season__head span{
  color:var(--bone-dim); font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; text-align:right;
}

.foot{
  margin:40px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--bone-dim); display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}

@media (max-width:520px){
  .stub__tear{ flex-basis:78px; }
  .stub__name{ font-size:22px; }
  .logo{ font-size:30px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   ADDITIONS BEYOND THE PROTOTYPE
   Everything above this line is the prototype's CSS, verbatim.
   ============================================================ */

/* auth + forms */
.formcard{ max-width:420px; margin:32px auto; }
.errorlist{ list-style:none; margin:6px 0 0; padding:0; color:#F09098; font-size:12.5px; }
.errorlist li{ margin-bottom:2px; }
.helptext{ display:block; color:var(--bone-dim); font-size:12px; margin-top:4px; }
.messages{ list-style:none; margin:12px 0 0; padding:0; }
.messages li{
  padding:9px 12px; border-radius:var(--r); font-size:13.5px; margin-bottom:6px;
  background:#20301F; border:1px solid #3B5A38; color:#CFE9CC;
}
.messages li.error{ background:#3A171C; border-color:#5B2027; color:#F09098; }
label.f > input[type=checkbox]{ width:auto; }
.radiolist{ display:flex; flex-direction:column; gap:8px; margin:2px 0 12px; }
.radiolist label{ display:flex; gap:8px; align-items:flex-start; font-size:14px; }
.radiolist input{ width:auto; margin-top:3px; }

/* profile + feed */
.persona{ display:flex; gap:14px; align-items:center; margin-top:24px; flex-wrap:wrap; }
.persona__av{
  width:60px; height:60px; border-radius:50%; background:var(--ink-3);
  border:1px solid var(--line); object-fit:cover; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:26px; color:var(--bone-dim);
}
.persona__name{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:32px; line-height:.95; }
.persona__meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim); margin-top:4px; }
.tierbadge{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 7px; border-radius:2px; border:1px solid var(--line); color:var(--bone-dim);
}
.tierbadge.is-friend{ color:var(--fog); border-color:#2C4E48; }
.tierbadge.is-follower{ color:var(--amber); border-color:var(--amber-lo); }
.gate{
  border:1px dashed var(--line); border-radius:var(--r); padding:16px;
  color:var(--bone-dim); font-size:13.5px; margin-top:14px;
}
.gate strong{ color:var(--bone); display:block; margin-bottom:3px; font-family:var(--display);
  text-transform:uppercase; font-size:17px; letter-spacing:.02em; }
.stub__who{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber); margin-bottom:2px; }

/* connection state */
body.is-offline .offline-only{ display:block; }
.offline-only{ display:none; }
body.is-offline .online-only{ opacity:.45; pointer-events:none; }
.pending{ opacity:.6; }

/* The quick follow-up: one question, one row, easy to wave away. */
.sheet--compact h3{ font-size:22px; }
.sheet--compact .sheet__sub{ margin-bottom:6px; }
/* Stars below the fold, for kinds that put them last. */
.fold{ margin:14px 0; }
.fold summary{ cursor:pointer; color:var(--bone-dim); font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-family:var(--mono); }
.fold[open] summary{ margin-bottom:8px; }
.pending .stub__meta::after{ content:' · not saved yet'; color:var(--amber); }

/* htmx */
.htmx-indicator{ opacity:0; transition:opacity .12s; }
.htmx-request .htmx-indicator{ opacity:1; }
.htmx-request.btn{ opacity:.6; pointer-events:none; }

/* ============================================================
   THE RANKING
   ============================================================ */
.rank{ list-style:none; margin:0; padding:0; }
.rank__row{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  cursor:grab;
}
.rank__row.is-dragging{ opacity:.5; }
.rank__row--new{ border-style:dashed; }
.rank__row.is-house{ border-left:3px solid var(--kind-house); }
.rank__row.is-zone{ border-left:3px solid var(--kind-zone); }
.rank__handle{ color:var(--bone-dim); font-size:18px; user-select:none; }
.rank__pos{ font-family:var(--display); font-size:26px; font-weight:700; width:34px; text-align:center; color:var(--amber); font-variant-numeric:tabular-nums; }
.rank__body{ flex:1; min-width:0; }
.rank__name{ font-family:var(--display); font-size:21px; font-weight:700; text-transform:uppercase; line-height:1; }
.rank__sub{ font-family:var(--mono); font-size:10px; color:var(--bone-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
.rank__note summary{ list-style:none; display:inline-block; margin-top:4px; font-size:12px; }
.rank__note summary::-webkit-details-marker{ display:none; }
.rank__moves{ display:flex; flex-direction:column; gap:4px; }
.rank__moves .btn{ padding:2px 8px; }
.move{ padding:1px 5px; border-radius:2px; border:1px solid var(--line); }
.move--up{ color:#8FE3B0; border-color:#2D5A3E; }
.move--down{ color:#F09098; border-color:#5A2A2E; }
.move--new{ color:var(--gold); border-color:#5A4A1A; }