/* ===== CAIN exorcist sheet — shared tokens & components (integrator-owned) ===== */
@font-face { font-family:'Courier Prime'; src:url('assets/fonts/courier-prime-latin-400-normal.woff2') format('woff2'); font-weight:400; }
@font-face { font-family:'Courier Prime'; src:url('assets/fonts/courier-prime-latin-700-normal.woff2') format('woff2'); font-weight:700; }
@font-face { font-family:'Permanent Marker'; src:url('assets/fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Special Elite'; src:url('assets/fonts/special-elite-latin-400-normal.woff2') format('woff2'); }

:root {
  --f-type:'Courier Prime', 'Courier New', monospace;
  --f-brush:'Permanent Marker', cursive;
  --f-hand:'Special Elite', 'Courier Prime', monospace;
  --ink:#1a1a1a;
  --hand-ink:#26241f;      /* user-entered text */
  --dot:17px;
}

html { background:#141414; }
body { margin:0; padding:34px 0 60px; font-family:var(--f-type); color:var(--ink);
       display:flex; flex-direction:column; align-items:center; gap:42px; }

.sheet { width:850px; height:1100px; position:relative; background:#fdfdfc;
         box-shadow:0 10px 40px rgba(0,0,0,.6); overflow:clip; flex:none; }
/* overflow:clip (not hidden): a hidden box is still a scroll container, and focus /
   scrollIntoView can silently scroll it, shifting the whole sheet's content. */
.sheet * { box-sizing:border-box; }
.sheet img { user-select:none; -webkit-user-drag:none; pointer-events:none; }
/* decorative art must never intercept clicks meant for the widgets under/over it */
/* the printed page: one render of the official sheet, under every overlay */
.sheet .page-art { position:absolute; left:0; top:0; width:100%; height:100%; }
.sheet .a { position:absolute; }

/* ---- editable fields ---- */
.ce { font-family:var(--f-hand); color:var(--hand-ink); outline:none; cursor:text;
      background:transparent; min-height:1em; }
.ce.line { display:inline-block; white-space:nowrap; overflow:hidden; }
.ce.area { display:block; white-space:pre-wrap; overflow:auto; line-height:1.45; border-radius:12px;
          overflow-wrap:anywhere; scrollbar-width:thin; }
.ce:hover, .ac[data-ac]:hover { background-color:rgba(120,90,20,.055); }
.ce:focus, .ac[data-ac]:focus { background-color:rgba(120,90,20,.09); box-shadow:0 0 0 1px rgba(120,90,20,.18); }
.ce:empty:not(:focus)::before { content:attr(data-ph); color:rgba(0,0,0,.22);
      font-family:var(--f-hand); }

/* ---- dots / ticks (JS fills) ---- */
.dot, .tick { display:inline-block; width:var(--dot); height:var(--dot);
      border:1.6px solid #2c2c2c; cursor:pointer; position:relative; flex:none; }
.dot { border-radius:50%; }
.dot.on { background:#141414; }          /* filled bubble = plain black */
.tick { border-radius:2px; }
.dot.bare, .tick.bare { border-color:transparent; }   /* for circles baked into bg art */
.dot.dashed { border-style:dashed; }
.dotrow { display:flex; gap:7px; align-items:center; }
/* rows with data-xs: each dot sits on its own printed circle (app.js sets left) */
.dotrow[data-xs] { display:block; left:0; width:0; height:var(--dot); }
.dotrow[data-xs] .dot { position:absolute; top:0; }
.dot:hover, .tick:hover { box-shadow:0 0 0 3px rgba(200,26,16,.14); }

/* sin boxes: always a white disc drawn over the printed one, so the white around a
   filled box is the same as around an empty one; a crossed-out box (right-click)
   gets a red X and can't be filled */
.sindot, .sindot.on { z-index:2; background:#fff; }
.sindot.on::after { content:""; position:absolute; inset:13%; border-radius:50%; background:#141414; }
.sindot.crossed { cursor:default; }
.sindot.crossed::after { content:none; }

/* ===== integrator widgets (appended after shared.css) ===== */

/* toolbar */
#toolbar { position:fixed; top:14px; right:16px; z-index:60; display:flex; gap:8px; }
#toolbar button { font-family:var(--f-type); font-weight:700; font-size:11px; letter-spacing:.12em;
  color:#ddd; background:#242424; border:1px solid #4a4a4a; padding:6px 12px; cursor:pointer; }
#toolbar button:hover { background:#3a3a3a; color:#fff; border-color:#777; }

/* ID photo zone */
.photo-zone { cursor:pointer; background-size:cover; background-position:center; }
.photo-zone:not(.has-photo):hover { outline:2px dashed rgba(184,22,12,.55); outline-offset:-4px; }
.photo-zone:not(.has-photo):hover::after { content:"AFFIX PHOTO"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); font-family:var(--f-type); font-weight:700; font-size:11px;
  letter-spacing:.14em; color:#8c130b; background:rgba(253,253,250,.85); padding:3px 7px; }
.photo-zone.has-photo:hover { outline:2px solid rgba(184,22,12,.4); outline-offset:-3px; }

/* CAT */
.cat-hot { cursor:pointer; position:absolute; }
.cat-hot:hover { background:rgba(184,22,12,.07); border-radius:8px; }
#idcat { display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; }
#idcat:hover { background:rgba(184,22,12,.07); }
#idcat.set, #idcat.set:hover { background:#2f2b2b; }
#idcat:focus-within { box-shadow:0 0 0 2px rgba(184,22,12,.35); }
/* the native select sits invisibly over the circle, so a click opens the drop-down */
#idcat-pick { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-family:var(--f-type); font-size:14px; }

/* autocomplete chip + name styling */
#ac-chip { display:none; position:absolute; z-index:70; background:#1d1d1d; color:#eee;
  font-family:var(--f-type); font-size:13px; padding:4px 9px; border:1px solid #555;
  box-shadow:0 4px 14px rgba(0,0,0,.5); cursor:pointer; white-space:nowrap; }
#ac-chip b { letter-spacing:.06em; }
#ac-chip span { color:#888; margin-left:8px; font-size:10px; }

.ac.ac-art:not(:focus) { color:transparent !important; background-image:var(--art); background-position:left center;
  background-size:contain; background-repeat:no-repeat;
  background-origin:content-box; }

/* execution talisman + slashes (adapted from talismans.html).
   The whole horizontal paper strip (#exec-hit) is the talisman: click anywhere on it to
   carve a slash at that spot; the printed circle (#exec-talisman) shows the slash count. */
#exec-hit { cursor:pointer; z-index:6; }
#exec-hit:hover { background:rgba(200,26,16,.05); }
#exec-talisman { position:absolute; border-radius:50%; z-index:6; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-brush); font-size:17px; color:#b8160c; }
.slashes { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:visible; }
svg.slash { position:absolute; overflow:visible; will-change:transform; }
svg.slash.fresh { animation:slashflash .45s cubic-bezier(.2,.6,.3,1); }
@keyframes slashflash {
  0%   { filter:brightness(2.1) saturate(1.4) drop-shadow(0 0 8px rgba(255,60,30,.9)); }
  100% { filter:brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255,60,30,0)); }
}
.cut { animation:shake .26s cubic-bezier(.25,.5,.3,1); }
@keyframes shake {
  0% { transform:translate(0,0); } 12% { transform:translate(-5px,3px) rotate(-1.2deg); }
  32% { transform:translate(4px,-2px) rotate(.9deg); } 55% { transform:translate(-2px,1px) rotate(-.45deg); }
  78% { transform:translate(1px,-1px) rotate(.2deg); } 100% { transform:translate(0,0); }
}
@media (prefers-reduced-motion:reduce) { .cut, svg.slash.fresh { animation:none; } }

/* footer disclaimer */
#site-footer { color:#666; font-family:var(--f-type); font-size:11px; letter-spacing:.05em;
  text-align:center; line-height:1.7; }
#site-footer a { color:#999; }

/* ===== print: each .sheet becomes one full-bleed US-letter page ===== */
@page { size: letter; margin: 0; }
@media print {
  html, body { background:#fff; }
  /* block, not flex: browsers don't fragment flex containers, so page breaks
     between sheets only work once body flows normally */
  body { display:block; padding:0; }
  /* 850x1100 is exactly the 8.5x11 ratio; zoom (which, unlike transform, rescales
     layout too) maps the sheet 1:1 onto the page box at 96dpi (816x1056) */
  .sheet { zoom:0.96; box-shadow:none; break-after:page;
           -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .sheet:last-of-type { break-after:auto; }
  #toolbar, #site-footer, #ac-chip { display:none !important; }
}