/* ============================================================
   1337 — PLAYTEST page additions
   Extends the shared cameo.name style.css tokens (--bg, --bg-raised,
   --green, --green-dim, --green-hi, --line) — do not duplicate
   style.css itself. This file only adds the components style.css
   doesn't already cover: accordions, tables, checkboxes, the slot
   grid, the consent gate, and the calendar embed.
   Load AFTER style.css.
   ============================================================ */

:root{ color-scheme: dark; }

/* ---------- badge ---------- */
.playtest-badge{
  display:inline-block;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--green-hi);
  border:1px solid var(--line);
  padding:4px 10px;
  margin:8px 0 18px;
}

/* ---------- sub-headline under a fieldset legend ---------- */
.box-lede{
  font-family:'VT323', monospace;
  font-size:20px;
  color:var(--green-hi);
  letter-spacing:.5px;
  margin:0 0 14px;
}

/* ---------- two-column grid (covenant / bring-someone) ---------- */
.grid2{ display:grid; gap:20px; margin:0 0 20px; }
@media(min-width:640px){ .grid2{ grid-template-columns:1fr 1fr; } }
.grid2 > div{ border:1px solid var(--line); background:var(--bg-raised); padding:14px 16px; }
.grid2 h3{ font-family:'VT323',monospace; font-size:20px; color:var(--green-hi); margin:0 0 8px; letter-spacing:1px; }
.grid2 .apply-list li{ font-size:14px; }

/* ---------- slot grid ---------- */
.run{ margin:0 0 26px; }
.run-date{
  font-family:'VT323',monospace; font-size:21px; color:var(--green-hi);
  margin:0 0 2px; letter-spacing:.5px;
}
.run-meta{ font-size:12px; color:var(--green-dim); margin:0 0 10px; }
ul.slots{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
}
ul.slots li{
  border:1px solid var(--line); background:var(--bg-raised);
  padding:8px 10px; font-size:14px; color:var(--green-hi);
}
ul.slots li .s-home{ font-weight:bold; display:block; }
ul.slots li .s-local{ display:block; font-size:11px; color:var(--green-dim); margin-top:3px; }
ul.slots li.passed{ border-style:dashed; background:transparent; color:var(--green-dim); }
ul.slots li.passed .s-home{ font-weight:normal; text-decoration:line-through; }
.run-note{
  margin:16px 0 0; padding:12px 14px;
  border-left:3px solid var(--green-hi); background:var(--bg-raised);
  font-size:14px;
}
.run-note[hidden]{ display:none; }
.tzbox{
  font-size:13px; color:var(--green-dim);
  background:var(--bg-raised); border:1px solid var(--line);
  padding:8px 12px; display:inline-block; margin-top:16px;
}

/* ---------- SIMPLE accordions ---------- */
.simple{ margin:0 0 24px; }
details.disc{ border:1px solid var(--line); background:var(--bg-raised); margin-bottom:10px; }
details.disc[open]{ border-color:var(--green-dim); }
details.disc > summary{
  cursor:pointer; list-style:none; padding:12px 14px;
  display:flex; gap:10px; align-items:baseline;
  font-weight:bold; color:var(--green-hi);
}
details.disc > summary::-webkit-details-marker{ display:none; }
details.disc > summary::after{
  content:"+"; margin-left:auto; color:var(--green-hi); font-weight:bold;
}
details.disc[open] > summary::after{ content:"\2013"; }
details.disc > summary:focus-visible{ outline:2px solid var(--green-hi); outline-offset:-2px; }
details.disc > summary .letter{
  font-size:12px; color:var(--bg); background:var(--green-hi);
  width:22px; height:22px; display:inline-grid; place-items:center;
  flex:0 0 auto; font-weight:bold;
}
details.disc > summary .sum{
  font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--green-dim); font-weight:normal; display:block; margin-top:3px;
}
.disc-body{ padding:0 14px 16px; border-top:1px dashed var(--line); margin-top:-1px; padding-top:14px; }
.disc-body p{ margin:0 0 14px; }
.disc-body p:last-child{ margin-bottom:0; }
.disc-body ul{ margin:0 0 14px; padding-left:20px; }
.disc-body li{ margin-bottom:6px; }

/* sensory table */
table.sens{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px; }
table.sens th, table.sens td{ text-align:left; padding:8px 8px 8px 0; border-bottom:1px dashed var(--line); vertical-align:top; }
table.sens th{ font-weight:bold; width:170px; color:var(--green-hi); }
table.sens caption{ text-align:left; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--green-dim); padding-bottom:8px; }
@media(max-width:480px){
  table.sens th, table.sens td{ display:block; width:auto; padding-right:0; }
  table.sens th{ border-bottom:0; padding-bottom:2px; }
}
.lvl{ font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:2px 6px; border:1px solid currentColor; white-space:nowrap; }
.lvl-none{ color:var(--green); }
.lvl-low{ color:var(--green); }
.lvl-med{ color:var(--green-hi); }
.lvl-high{ color:#ff6a6a; }

/* spectrum */
.spectrum{ list-style:none; margin:0 0 16px; padding:0; border-left:2px solid var(--line); }
.spectrum li{ padding:8px 0 8px 14px; color:var(--green-dim); }
.spectrum li.is-this{ color:var(--green-hi); font-weight:bold; box-shadow:-2px 0 0 0 var(--green-hi); }
.spectrum li .tag{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--green-hi); display:block; font-weight:normal; margin-top:2px; }

/* pullquote / blurb */
.pullquote{
  margin:24px 0; padding:12px 0 12px 18px; border-left:3px solid var(--green-hi);
  font-style:italic; color:var(--green-hi); max-width:520px;
}
.pullquote .attr{ display:block; margin-top:8px; font-style:normal; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--green-dim); }
.blurb{ background:var(--bg-raised); border:1px dashed var(--line); padding:14px 16px; margin:0 0 14px; font-style:italic; }
.blurb p{ margin:0; }

/* ---------- consent gate ---------- */
.gate{ background:var(--bg-raised); border:1px solid var(--line); padding:20px; }
.gate fieldset{ border:0; margin:0; padding:0; }
.gate legend{ padding:0; margin:0 0 14px; font-family:'VT323', monospace; font-size:20px; color:var(--green-hi); letter-spacing:1px; }
.check{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; cursor:pointer; }
.check + .check{ border-top:1px dashed var(--line); }
.check input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:18px; height:18px; margin:2px 0 0;
  border:1px solid var(--green-dim); background:var(--bg);
  cursor:pointer; position:relative;
}
.check input:checked{ background:var(--green-hi); border-color:var(--green-hi); }
.check input:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px; border:solid var(--bg); border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.check input:focus-visible{ outline:2px solid var(--green-hi); outline-offset:2px; }
.check span{ font-size:14px; }
.gatenote{ margin-top:14px; font-size:13px; color:var(--green-dim); }

/* buttons */
.btn{
  display:inline-block; margin-top:16px;
  font-family:'Share Tech Mono', monospace; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  background:transparent; color:var(--green-hi); border:1px solid var(--green-hi);
  padding:12px 20px; cursor:pointer; text-decoration:none;
}
.btn:hover:not(:disabled){ background:var(--green-hi); color:var(--bg); }
.btn:focus-visible{ outline:2px solid var(--green-hi); outline-offset:3px; }
.btn:disabled{ background:transparent; color:var(--green-dim); border-color:var(--line); cursor:not-allowed; }
.btn-quiet{ border-color:var(--line); margin-top:8px; }
.btn-quiet:hover:not(:disabled){ background:transparent; color:#fff; border-color:var(--green-hi); }

/* calendar embed */
#calendar[hidden]{ display:none; }
.calframe{ min-height:420px; border:1px solid var(--line); background:var(--bg-raised); overflow:hidden; margin-top:24px; }
.calframe iframe{ display:block; }
.calloading{ padding:40px 20px; text-align:center; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--green-dim); }

/* misc */
.fine{ font-size:13px; color:var(--green-dim); }
audio{ width:100%; margin:6px 0 14px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:18px; top:8px; z-index:99; background:var(--green-hi); color:var(--bg); padding:8px 12px; font-family:'Share Tech Mono',monospace; font-size:13px; }