/* 11Prep Detectives theme v2 (30 Oct 2026).
   The website's tactile look, laid over the app's existing styles: raised buttons that press down, rounder 2px-edged cards that lift on hover,
   taped paper exhibits, a bigger Zoom, and a taped sign-in card. Loaded after the page's own CSS, so it only overrides.
   To switch it off, remove the <link rel="stylesheet" href="/theme.css"> line from a page. No script depends on it. */

:root{
  --edge:#080C17;            /* underside of a raised button */
  --tape-edge:#B88C14;       /* underside of a yellow button */
  --lift:0 16px 30px rgba(0,0,0,.38);
}

/* ---------- Raised buttons ---------- */
.btn,.cta{
  border-radius:14px;
  box-shadow:0 4px 0 var(--edge);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn.primary,.cta{box-shadow:0 5px 0 var(--tape-edge)}
.btn.danger{box-shadow:0 4px 0 #8C2327}
.btn.sm{border-radius:12px;box-shadow:0 3px 0 var(--edge)}
.btn.primary.sm{box-shadow:0 3px 0 var(--tape-edge)}
.btn[disabled]{box-shadow:none}
.btn:not([disabled]):active,.cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.btn.primary:not([disabled]):active,.cta:active{box-shadow:0 1px 0 var(--tape-edge)}
@media (hover:hover){
  .btn:not([disabled]):hover,.cta:hover{filter:brightness(1.08)}
}

/* ---------- Fields ---------- */
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],select,textarea{
  border-radius:12px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease;
}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=date]:focus,input[type=number]:focus,select:focus,textarea:focus{
  border-color:var(--tape);box-shadow:0 0 0 3px rgba(255,201,51,.25);
}

/* ---------- Cards ---------- */
.agent,.suspect,.round,.ptcard,.stop-card{border-top-width:2px;border-right-width:2px;border-bottom-width:2px}
.agent,.suspect,.round{border-left-width:2px}
.agent,.suspect,.round,.ptcard,.stop-card{border-radius:16px}
.ptcard{box-shadow:0 10px 24px rgba(0,0,0,.22)}
.agent{box-shadow:0 10px 24px rgba(0,0,0,.22)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .stop-card,.round{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
  .stop:not(.locked) .stop-card:hover,.round:not([disabled]):hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:var(--hue,var(--tape))}
  .stop:not(.locked) .stop-card:hover{border-left-color:var(--hue,var(--tape))}
}

/* ---------- Taped paper exhibits ---------- */
.exhibit:not(.locked){margin-top:6px}
.exhibit:not(.locked)::before{
  content:"";position:absolute;top:-10px;left:50%;width:58px;height:17px;
  transform:translateX(-50%) rotate(-3deg);border-radius:2px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--tape) 0 7px,var(--ink) 7px 14px);opacity:.92;
  box-shadow:0 1px 0 rgba(0,0,0,.3);
}
.exhibits .exhibit:not(.locked):nth-child(odd){transform:rotate(-.4deg)}
.exhibits .exhibit:not(.locked):nth-child(even){transform:rotate(.4deg)}

/* ---------- Zoom ---------- */
.pipbox.home .pipsvg{width:118px}
.pipsvg{filter:drop-shadow(0 12px 14px rgba(0,0,0,.4))}
.pipbox.sm .pipsvg{filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.pipsay{box-shadow:0 3px 0 rgba(0,0,0,.35)}
/* Zoom on the sign-in and create-account screens */
.pipbox.auth{justify-content:center;max-width:430px;margin:4px auto 20px}
.pipbox.auth .pipsay{flex:1;max-width:260px}

/* ---------- Sign-in card ---------- */
.authbox{
  background:var(--night-2);border:2px solid var(--line);border-radius:18px;padding:26px 20px 20px;position:relative;
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}
.authbox::before{
  content:"";position:absolute;top:-11px;left:50%;width:72px;height:20px;
  transform:translateX(-50%) rotate(-2deg);border-radius:2px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--tape) 0 8px,var(--ink) 8px 16px);opacity:.95;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}

/* ---------- Gentle floating on the home Zoom, only for people who have not asked for less motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.cta,.stop-card,.round,input,select,textarea{transition:none}
}

/* ---------- Big screens: the parent area gets room for two columns (the child screens stay a phone-width column) ---------- */
@media (min-width:1000px){
  body:has(.ptgrid) .wrap,body:has(.ptgrid) header.bar,body:has(.ptgrid) .syncnote,body:has(.ptgrid) footer.legal{max-width:1120px}
}

/* ---------- Long drop-down lists must never push the page wider than a phone (the Goals form did) ---------- */
select,input,textarea{max-width:100%;box-sizing:border-box}
label:has(>select),label:has(>input),label:has(>textarea){display:block;max-width:100%;min-width:0}
select{text-overflow:ellipsis}
.field>*,.grid>*{min-width:0}
.field select,.field input,.field textarea{width:100%}

/* ---------- Touch screens: text links get a finger-sized hit area without changing the layout ---------- */
@media (hover:none),(pointer:coarse){
  .linkbtn{padding:10px 4px;margin:-10px -4px}
}

/* ---------- Print stays plain ---------- */
@media print{
  .exhibit::before,.authbox::before{display:none}
  .exhibits .exhibit{transform:none!important}
  .btn,.cta,.ptcard,.agent,.authbox{box-shadow:none!important}
}

/* ---------- Practice: parent "Set as practice" sheet and rows ---------- */
.psetrow{margin-top:10px}
.ptpset{border:2px dashed var(--line);border-radius:14px;padding:12px 14px;margin-top:10px;background:var(--night-2)}
.ptpset p{margin:0 0 8px}