/* Crim Cloud · papercraft skin.
   Layout: one long green cutting mat (the fixed canvas) with every section's real HTML on cardstock cards.
   Loads after app.css and a11y.css; it overrides their colour tokens and styles every surface as paper. */

html[data-theme], html[data-theme="auto"], html[data-theme="dark"], html[data-theme="light"]{
  --mat:#1f5b44;
  --card:#f5edda; --card-2:#e9dec4; --card-edge:#cbbd9f; --paper:#fffaf0;
  --ink:#26211b; --ink-soft:#4f463b;
  --red:#b83a25; --red-edge:#7e2414; --teal:#1d7a6d; --teal-edge:#0f5148; --yellow:#f3c33f;
  --blue:#2f5cc0; --purple:#6f45b8; --pink:#b83d68; --green:#2f7330; --orange:#a8501a;
  /* tokens app.css and a11y.css read */
  --bg:#fffaf0; --bg-2:#efe6cf; --panel:#f5edda; --panel-2:#ebe1c8; --line:#8a7d68; --line-2:#6e624f; --rule:#d8cdb4;
  --fg:#26211b; --muted:#4f463b; --dim:#5d5346;
  --mint:#1d7a6d; --amber:#7a4a00; --ember:#9a3f12; --ok:#2f7330; --danger:#a8241a; --banana:#f3c33f; --on-accent:#fffaf0;
  --acc:#1d7a6d; --acc-2:#1d7a6d; --focus:#26211b; --focus-ring:#ffd23f;
  --f-display:"Fredoka",ui-rounded,"Segoe UI",system-ui,sans-serif; --f-body:var(--f-display);
  --f-mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace; --f-num:"Space Grotesk",system-ui,sans-serif;
  --r:4px; --fibre:none;
  color-scheme:light;
}
html[data-theme] body[data-sec="beta"]{--acc:#a8501a;--acc-2:#a8501a}
html,body{background:var(--mat)}
body{color:var(--fg);font-family:var(--f-body);font-size:1.0625rem;padding-bottom:0}
#mat{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0;pointer-events:none;transition:opacity .25s ease}
.wrap{position:relative;z-index:1;max-width:1320px}
html{scroll-behavior:smooth}
html[data-motion="reduce"]{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html:not([data-motion="full"]){scroll-behavior:auto}}

/* who sees what: signed-out visitors get the sign-in card plus the public sections */
body:not(.authed) .authed-only{display:none!important}
body:not(.locked) #s-gate{display:none}
body.locked .wrap,body.locked footer{visibility:visible}

/* ---------- cardstock ---------- */
.pc-card,.card,.row,.panel,.dm,.menu,.lobby,.li-paper{background-color:var(--card);background-image:var(--fibre);background-blend-mode:multiply}
.pc-card{position:relative;color:var(--ink);border-radius:4px;padding:0 26px 24px;width:min(560px,100%);
  box-shadow:0 1px 0 rgba(0,0,0,.14),0 3px 2px -1px rgba(30,20,10,.28),0 24px 32px -18px rgba(4,22,14,.8)}
/* glue tabs peeking out from behind the card */
.pc-card::before,.pc-card::after{content:"";position:absolute;top:48px;width:13px;height:50px;background:var(--card-2);border:1px dashed rgba(38,33,27,.3)}
.pc-card::before{left:-13px;clip-path:polygon(100% 0,100% 100%,0 82%,0 18%);border-right:0}
.pc-card::after{right:-13px;clip-path:polygon(0 0,100% 18%,100% 82%,0 100%);border-left:0}
.pc-strip{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 -26px 18px;padding:8px 26px;background:var(--sc,var(--teal));color:#fffaf0;
  font:700 .8125rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border-radius:4px 4px 0 0;border-bottom:2px dotted rgba(38,33,27,.38)}
.pc-card h1,.pc-card h2{font-family:var(--f-display);font-weight:700;line-height:1.06;letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance;color:var(--ink)}
.pc-card h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.pc-card h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
.pc-card h3{font-family:var(--f-display);font-size:1.25rem;margin:0 0 8px}
.pc-card p{max-width:64ch;font-size:1.125rem;margin:0 0 14px;color:var(--ink)}
.pc-card .dimtext{color:var(--ink-soft)}
.eyebrow{font:700 .8125rem/1.3 var(--f-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--ink-soft)!important;margin:0 0 8px}
.eyebrow::before{display:none!important}
.grad{background:none!important;color:var(--red)!important;-webkit-text-fill-color:currentColor;text-decoration:none!important;animation:none!important}
.hero .lede,.lede{color:var(--ink);font-size:1.1875rem}
.row-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:4px 0 16px}

/* ---------- sections on the mat ---------- */
#content:focus{outline:none}
.pc-sec{min-height:100vh;display:flex;align-items:center;padding-block:110px 70px}
.pc-sec.l{justify-content:flex-start}
.pc-sec.r{justify-content:flex-end}
.pc-sec.c{justify-content:center;align-items:flex-end}
.pc-sec.c > .pc-card{width:min(1080px,100%)}
.pc-sec.wide > .pc-card{width:min(760px,64%)}
#s-gate .pc-card{width:min(500px,100%)}
#s-gate .gate{display:contents}
#s-gate .gate[hidden]{display:none}
.gate-card h1{font-size:clamp(2.1rem,4vw,2.9rem);text-align:left}
.gate-card .sub{text-align:left;color:var(--ink);margin:0 0 18px}
.gate-card form{display:flex;flex-direction:column;gap:14px}
.gate-card .alt{color:var(--ink-soft);font-size:1rem}
.site-foot.pc-sec{min-height:80vh;margin:0;padding-inline:0;background:none;border:0}
.pc-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.plist{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.plist li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--paper);border:1px solid var(--card-edge);border-radius:4px;padding:10px 12px}
.plist .grow{flex:1;min-width:0}
.plist small{display:block;color:var(--ink-soft);font-size:1rem}
.plist .ttl{all:unset;cursor:pointer;font-weight:700;font-size:1.0625rem;color:var(--ink)}
.plist .ttl:hover{text-decoration:underline}
.plist .ttl:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 7px var(--focus-ring)}
.ptag{display:inline-block;font:700 .75rem/1 var(--f-mono);letter-spacing:.1em;padding:6px 8px;border-radius:2px;color:#fffaf0;background:var(--tc,var(--teal))}

/* ---------- nav: a printed card strip ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;margin:12px 0 0;padding:8px 14px;gap:10px 14px;border-radius:4px;border:0;border-bottom:2px dotted rgba(38,33,27,.3);
  background-color:var(--card)!important;background-image:var(--fibre)!important;background-blend-mode:multiply;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 2px 0 rgba(0,0,0,.18),0 16px 22px -14px rgba(4,22,14,.75)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--mat)}
.logo{font:700 1.375rem var(--f-display)!important;color:var(--ink)!important;letter-spacing:0!important;text-transform:none!important}
.logo span:last-child{background:none!important;-webkit-text-fill-color:currentColor}
.mark{background:var(--teal)!important;color:#fffaf0!important;box-shadow:none!important;border-radius:8px}
.secnav{display:flex;gap:2px;flex-wrap:wrap}
.secnav a{font:600 1.0625rem var(--f-display);color:var(--ink);text-decoration:none;padding:7px 8px;border-radius:3px;min-height:2.5rem;display:inline-flex;align-items:center}
.secnav a:hover{background:var(--card-2)}
.secnav a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.live{background:var(--paper);border-color:var(--line)}
.iconbtn{background:var(--paper)!important;border:2px solid var(--line)!important;color:var(--ink)!important}
.me > button{background:var(--paper)!important;border:2px solid var(--line)!important}
@media (max-width:1100px){.secnav{order:10;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.secnav a{white-space:nowrap}}

/* ---------- printed card tab buttons: lift on hover, crease on press ---------- */
.btn{--b:var(--paper);--e:var(--card-edge);font:600 1.0625rem/1.2 var(--f-display)!important;color:var(--ink)!important;background:var(--b)!important;border:0!important;border-radius:4px 4px 3px 3px!important;
  box-shadow:0 4px 0 var(--e),0 9px 12px -6px rgba(0,0,0,.45)!important;transition:transform .14s ease,box-shadow .14s ease!important;text-decoration:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--e),0 14px 16px -6px rgba(0,0,0,.45)!important}
.btn:active{transform:translateY(3px)!important;box-shadow:0 1px 0 var(--e),0 2px 4px rgba(0,0,0,.4)!important;background-image:linear-gradient(90deg,transparent 49.4%,rgba(0,0,0,.2) 50%,transparent 50.6%)!important}
.btn.primary{--b:var(--red);--e:var(--red-edge);color:#fffaf0!important}
body[data-sec="beta"] .btn.primary{--b:var(--orange);--e:#6e3210}
.btn.danger{--b:var(--paper);color:var(--danger)!important}
.btn.danger.armed{--b:var(--danger);--e:#6a140e;color:#fff!important}
.btn.ghost{--b:transparent;box-shadow:none!important}
.btn:disabled{opacity:.6}
.close{background:var(--paper)!important;border:2px solid var(--line)!important;color:var(--ink)!important}
:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px!important;box-shadow:0 0 0 7px var(--focus-ring)!important}

/* ---------- tabs, chips, fields ---------- */
.tabs{background:var(--bg-2)!important;border:2px solid var(--line)!important;margin:0 0 14px;display:inline-flex}
.tab{color:var(--ink)!important}
.tab[aria-selected="true"]{color:#fffaf0!important}
.pill{background:var(--ink)!important}
.chip{background:var(--paper)!important;border:2px solid var(--line)!important;color:var(--ink)!important;border-radius:3px!important}
.chip[aria-pressed="true"]{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
.search,.sort,.field input,.field textarea,.field select,.inp,.ask input,.dm-form textarea{background:var(--paper)!important;border:2px solid var(--line)!important;color:var(--ink)!important;border-radius:4px!important;box-shadow:inset 0 2px 0 rgba(0,0,0,.05)}
.search input{color:var(--ink)}
.authtabs,.seg{background:var(--bg-2)!important;border:2px solid var(--line)!important;border-radius:4px!important}
.authtabs button,.seg button{border-radius:3px!important;color:var(--ink)!important}
.authtabs button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--ink)!important;color:var(--paper)!important}
.pw button{background:var(--card-2)!important;color:var(--ink)!important}
.drop{background:var(--paper)!important}

/* ---------- posts: little printed cards on the big card ---------- */
.card,.row{border:1px solid var(--card-edge)!important;border-radius:4px!important;box-shadow:0 2px 0 rgba(0,0,0,.12),0 10px 14px -10px rgba(4,22,14,.6)!important;transition:transform .2s ease,box-shadow .2s ease!important}
.card:hover,.row:hover{transform:translateY(-3px) rotate(-.4deg)!important;box-shadow:0 3px 0 rgba(0,0,0,.12),0 16px 18px -10px rgba(4,22,14,.65)!important}
.gen{background:linear-gradient(135deg,hsl(var(--h) 55% 42%),hsl(calc(var(--h) + 40) 50% 28%))!important}
.gen::after{content:"";position:absolute;inset:8px;border:2px dashed rgba(255,250,240,.45);border-radius:3px}
.gen span{font-family:var(--f-display)!important}
.badge,.watch{background:var(--ink)!important;color:var(--paper)!important;border:0!important;border-radius:2px!important;font-family:var(--f-mono)!important}
.cnt{background:var(--paper)!important;border-color:var(--line)!important;color:var(--ink)!important}
.cnt.bn[aria-pressed="true"]{background:var(--yellow)!important;border-color:#b98c17!important;color:var(--ink)!important}
.status{background:var(--paper)!important}
.empty{background:var(--paper)!important;border:2px dashed var(--line)!important}
.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important}

/* lists inside cards */
.box,.lobby{background:var(--paper)!important;border:1px solid var(--card-edge)!important}
.lobby + .lobby{margin-top:10px}
.lobby .cd{color:var(--amber)!important}
.people .who small{color:var(--ink-soft)!important}

/* community panels */
.wgrid{margin:4px 0 8px}
.wi{background:var(--paper)!important;border:2px dashed var(--card-edge)!important;border-radius:4px!important;backdrop-filter:none!important}
.w.held .wi{border:2px solid var(--ink)!important;box-shadow:0 18px 26px -10px rgba(0,0,0,.45)!important;transform:rotate(-1.5deg)!important}
.w.landed .wi{border:2px solid var(--teal)!important}
.ws{padding:12px 14px!important;gap:6px!important}
.ws h3{font:700 .75rem/1.2 var(--f-mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)!important}
.big{font-family:var(--f-num)!important;font-size:2rem!important;color:var(--ink)}
.cdown{color:var(--blue)!important}
.drop-item{background:var(--card)!important;border:1px solid var(--card-edge)!important;min-height:2.5rem!important}
.wbar{background:var(--rule)!important}.wbar i{background:var(--teal)!important}

/* how it works */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:s}
.steps li{counter-increment:s;background:var(--paper);border:1px solid var(--card-edge);border-radius:4px;padding:14px 14px 12px;position:relative}
.steps li::before{content:counter(s);position:absolute;top:-12px;left:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);font:700 .9375rem var(--f-num);color:var(--ink);border:2px solid var(--ink)}
.steps h3{margin:6px 0 6px!important}
.steps h3::before{display:none!important}
.steps p{font-size:1.0625rem!important;margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* footer */
.site-foot .foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:22px;max-width:none}
.site-foot h2{font-size:1.25rem!important;margin:0 0 8px}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.site-foot a{color:var(--ink)!important;text-decoration:underline;min-height:2.25rem;display:inline-flex;align-items:center}
.foot-name{font-weight:700;font-size:1.25rem;margin:0 0 6px}
.foot-brand p{color:var(--ink-soft);margin:0 0 8px;font-size:1.0625rem}
.foot-top{margin:12px 0 0;padding-top:12px;border-top:2px dotted rgba(38,33,27,.3)}
@media (max-width:760px){.site-foot .foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- pop-ups: big paper sheets slid onto the mat ---------- */
.overlay{background:rgba(9,30,21,.62)!important;backdrop-filter:none!important}
.panel{border:0!important;border-radius:4px!important;box-shadow:0 2px 0 rgba(0,0,0,.2),0 40px 60px -20px rgba(0,0,0,.7)!important;border-top:10px solid var(--teal)!important;animation:sheetIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetIn{from{opacity:0;transform:translateY(40px) rotate(-1.2deg)}}
.dm{border-left:10px solid var(--purple)!important}
.dm-head,.dm-form{background:var(--card-2)!important}
.bub{background:var(--paper)!important;border-color:var(--card-edge)!important}
.bub.mine{background:var(--teal)!important;color:#fffaf0!important}
.conv.on{background:var(--card-2)!important;box-shadow:inset 4px 0 0 var(--purple)!important}
.toast{background:var(--ink)!important;color:var(--paper)!important;border-radius:4px!important;font-family:var(--f-display)!important}
.menu{border:2px solid var(--line)!important}
.menu button:hover,.prefs-menu label:hover{background:var(--card-2)!important}
.kv,.answer,.bug,.block{background:var(--paper)!important}

/* ---------- phones: the camera pulls in above each card ---------- */
@media (max-width:760px){
  .pc-sec{display:block;min-height:0;padding-block:46vh 24px}
  .pc-sec > .pc-card,.pc-sec.wide > .pc-card,.pc-sec.c > .pc-card{width:100%}
  #s-gate{padding-top:40vh}
  .pc-two{grid-template-columns:1fr}
  .pc-card{padding:0 18px 20px}
  .pc-strip{margin:0 -18px 14px;padding:7px 18px}
  .pc-card::before,.pc-card::after{display:none}
  .bar{margin-top:8px}
}
/* reduced motion: models arrive folded and the mat crossfades instead of sliding */
html[data-motion="reduce"] .btn,html[data-motion="reduce"] .card,html[data-motion="reduce"] .row{transition:none!important}
html[data-motion="reduce"] .panel{animation:none}
/* keep the printed nav on one strip at laptop widths */
@media (max-width:1420px){#liveBadge{display:none!important}.bar .postBtn-label{display:none}}
@media (min-width:1101px) and (max-width:1320px){.secnav a{font-size:1rem;padding:7px 6px}.bar{gap:8px 8px}}
@media (max-width:1320px){#meBtn .nm{display:none}}

/* ================= Halloween (switched on by assets/paper/season.js) ================= */
html[data-season="halloween"], html[data-season="halloween"][data-theme]{
  --mat:#2b2140;
  --red:#c2410c; --red-edge:#7c2d12; --orange:#9a3412;
  --teal:#6b3fa8; --teal-edge:#43246e; --purple:#6b3fa8; --green:#3f6212;
  --mint:#6b3fa8; --acc:#6b3fa8; --acc-2:#6b3fa8; --ok:#3f6212; --ember:#9a3412;
}
html[data-season="halloween"] body[data-sec="beta"]{--acc:#9a3412;--acc-2:#9a3412}
/* paper bunting hanging under the top bar */
html[data-season="halloween"] .bar::after{content:"";position:absolute;left:18px;right:18px;top:calc(100% - 2px);height:30px;pointer-events:none;
  background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="108" height="30" viewBox="0 0 108 30"%3E%3Cpath d="M0 2.5 Q54 6 108 2.5" stroke="%2326211b" stroke-width="1.5" fill="none"/%3E%3Cpath d="M4 3.5 L32 4.6 L18 26 Z" fill="%23e2621f"/%3E%3Cpath d="M40 4.8 L68 4.8 L54 27 Z" fill="%236b3fa8"/%3E%3Cpath d="M76 4.6 L104 3.5 L90 26 Z" fill="%23e2621f"/%3E%3Ccircle cx="18" cy="11" r="1.4" fill="%2326211b"/%3E%3Ccircle cx="54" cy="12" r="1.4" fill="%23fffaf0"/%3E%3C/svg%3E') repeat-x 0 0/108px 30px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
/* "Happy Halloween" sticker on the main cards */
.hw-sticker{display:none}
html[data-season="halloween"] .hw-sticker{display:block;position:absolute;top:-14px;right:96px;transform:rotate(4deg);padding:6px 12px 5px;
  background:#231a2c;color:#ffc94a;font:700 .875rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;border-radius:3px;
  box-shadow:0 2px 0 rgba(0,0,0,.25),0 8px 12px -6px rgba(0,0,0,.6);border:1px dashed rgba(255,201,74,.45)}
html[data-season="halloween"] #s-home .hw-sticker{top:-16px}
@media (max-width:760px){html[data-season="halloween"] .hw-sticker{right:84px;font-size:.8125rem}}