/* The Laundering · Holodeck Coloring Placemat — shared styles (per-case files link this) */
:root{
  --bg:#07070a; --paper:#fdfbf2; --crayon-ink:#1a1a1a;
  --lcars-salmon:#e8927c; --lcars-amber:#f2b134; --lcars-mauve:#a98bc0; --lcars-blue:#7fb0d8;
  --display:"Saira Condensed",sans-serif; --mono:"JetBrains Mono",monospace; --hand:"Gochi Hand",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:#f4f1ea;font-family:var(--mono);min-height:100vh;padding:18px}
/* LCARS holodeck chrome */
.bay{max-width:1180px;margin:0 auto}
.bayhead{display:flex;gap:10px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap}
.bayhead .cap{background:var(--lcars-amber);color:#1a1208;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:10px 18px;border-radius:18px 4px 4px 18px;font-size:1.05rem;display:flex;align-items:center}
.bayhead .ttl{flex:1;min-width:220px;background:#15151b;border:1px solid #2a2a33;border-radius:4px;padding:8px 16px;display:flex;flex-direction:column;justify-content:center}
.bayhead .ttl b{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;color:var(--lcars-salmon);line-height:1}
.bayhead .ttl span{font-size:.7rem;color:#8a857c;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.bayhead .grid-pill{background:var(--lcars-mauve);color:#1a1208;border-radius:4px 18px 18px 4px;padding:10px 16px;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:.8rem;display:flex;align-items:center;letter-spacing:.06em;text-decoration:none}
.bayhead .grid-pill.bay-pill{border-radius:4px;background:var(--lcars-blue)}
/* toolbar */
.tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:#101016;border:1px solid #24242c;border-radius:10px;padding:12px 16px;margin-bottom:14px}
.crayons{display:flex;gap:7px;flex-wrap:wrap}
.crayon{width:30px;height:30px;border-radius:50%;border:2px solid #0006;cursor:pointer;position:relative;transition:transform .1s}
.crayon:hover{transform:translateY(-3px) scale(1.08)}
.crayon.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--lcars-amber);transform:translateY(-3px) scale(1.12)}
.tlabel{font-size:.66rem;color:#8a857c;letter-spacing:.14em;text-transform:uppercase;margin-right:2px;align-self:center}
.tbtn{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;font-weight:600;background:#22222b;color:#f4f1ea;border:1px solid #34343f;border-radius:6px;padding:7px 13px;cursor:pointer}
.tbtn:hover{background:var(--lcars-blue);color:#0a0a0c;border-color:var(--lcars-blue)}
.tbtn.eraser.sel{background:var(--lcars-blue);color:#0a0a0c}
.tbtn.share{background:var(--lcars-salmon);color:#1a1208;border-color:var(--lcars-salmon)}
.hint{font-size:.68rem;color:#a8a39a;margin-left:auto;max-width:320px;line-height:1.4}
/* the placemat */
.placemat{background:var(--paper);color:var(--crayon-ink);border-radius:10px;padding:22px;box-shadow:0 18px 50px #000a;position:relative}
.placemat::after{content:"";position:absolute;inset:9px;border:2px dashed #d9b24c;border-radius:6px;pointer-events:none}
.mat-head{text-align:center;margin-bottom:14px;position:relative;z-index:1}
.mat-head .kook{font-family:var(--hand);font-size:clamp(1.8rem,5vw,3rem);color:#c4422a;line-height:.95;transform:rotate(-1.2deg)}
.mat-head .sub{font-family:var(--hand);font-size:1.15rem;color:#2a6a8a;margin-top:2px}
.mat-head .rating{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#9a8f7a;margin-top:6px}
.mat-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;position:relative;z-index:1}
@media(max-width:760px){.mat-grid{grid-template-columns:1fr}}
.panelbox{border:2.5px solid #1a1a1a;border-radius:8px;background:#fff;overflow:hidden}
.panelbox > .cap{font-family:var(--hand);font-size:1rem;background:#1a1a1a;color:#fdfbf2;padding:3px 10px}
.strip{display:flex;flex-direction:column;gap:12px}
.strip .panelbox > .cap{font-size:.92rem}
.activities{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;position:relative;z-index:1}
@media(max-width:760px){.activities{grid-template-columns:1fr}}
.act{border:2.5px solid #1a1a1a;border-radius:8px;background:#fff;padding:10px 12px}
.act h4{font-family:var(--hand);font-size:1.15rem;color:#c4422a;margin-bottom:6px}
.act p,.act li{font-family:var(--mono);font-size:.72rem;line-height:1.5;color:#2a2a2a}
.act .swap{font-family:var(--hand);font-size:1.05rem}
.act .swap b{color:#c4422a;text-decoration:underline}
svg{display:block;width:100%;height:auto}
svg .ink{fill:#ffffff;stroke:#1a1a1a;stroke-width:2.4;cursor:crosshair}
svg .ink.lite{stroke-width:1.6}
svg .nofill{fill:none;stroke:#1a1a1a;stroke-width:2.4;pointer-events:none}
svg .star{fill:#1a1a1a;stroke:none;pointer-events:none}
svg text{font-family:"Gochi Hand",cursive;fill:#1a1a1a;pointer-events:none}
.bubble{fill:#fff;stroke:#1a1a1a;stroke-width:2.4;cursor:crosshair}
.foot{text-align:center;font-family:var(--mono);font-size:.62rem;color:#9a8f7a;letter-spacing:.1em;text-transform:uppercase;margin-top:14px;position:relative;z-index:1}
.foot a{color:#c4422a}
@media print{
  body{background:#fff;padding:0}
  .bayhead,.tools,#shareModal{display:none!important}
  .placemat{box-shadow:none;border:1px solid #ccc}
  svg .ink{cursor:default}
}
/* share modal */
#shareModal{position:fixed;inset:0;background:#000b;display:none;z-index:50;padding:20px;overflow:auto}
#shareModal.on{display:flex;align-items:flex-start;justify-content:center}
.sheet{background:#101016;border:1px solid #2a2a33;border-radius:12px;max-width:680px;width:100%;margin:auto;padding:20px}
.sheet h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--lcars-salmon);font-size:1.4rem;margin-bottom:4px}
.sheet .sub{font-size:.72rem;color:#8a857c;margin-bottom:14px;line-height:1.5}
.sheet img{width:100%;border-radius:8px;border:1px solid #2a2a33;background:#fff;display:block;margin-bottom:14px}
.sheet .row{display:flex;gap:8px;flex-wrap:wrap}
.sheet .row a,.sheet .row button{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:.78rem;border-radius:6px;padding:9px 13px;cursor:pointer;border:1px solid #34343f;background:#22222b;color:#f4f1ea;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.sheet .row a:hover,.sheet .row button:hover{background:var(--lcars-blue);color:#0a0a0c;border-color:var(--lcars-blue)}
.sheet .row .primary{background:var(--lcars-salmon);color:#1a1208;border-color:var(--lcars-salmon)}
.sheet .row .dl{background:var(--lcars-amber);color:#1a1208;border-color:var(--lcars-amber)}
.sheet .note2{font-size:.7rem;color:#a8a39a;margin:12px 0 4px;line-height:1.5}
.sheet .close{float:right;background:transparent;border:0;color:#8a857c;font-size:1.4rem;cursor:pointer;line-height:1}
.sheet .busy{font-family:var(--mono);font-size:.8rem;color:var(--lcars-amber);padding:30px;text-align:center}
/* bay index */
.baygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:6px}
.baycard{background:#101016;border:1px solid #24242c;border-radius:10px;overflow:hidden;text-decoration:none;color:#f4f1ea;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.baycard:hover{border-color:var(--lcars-salmon);transform:translateY(-3px)}
.baycard .thumb{background:var(--paper);padding:10px}
.baycard .meta{padding:12px 14px}
.baycard .meta b{font-family:var(--display);font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;color:var(--lcars-salmon);display:block;line-height:1.05}
.baycard .meta span{font-size:.7rem;color:#a8a39a;line-height:1.5;display:block;margin-top:5px}
.baycard .meta .tag{color:#8a857c;letter-spacing:.12em;text-transform:uppercase;font-size:.6rem;margin-top:8px}
.bayintro{font-size:.82rem;color:#a8a39a;line-height:1.6;max-width:720px;margin:2px 0 18px}