/* PRODUCT LAYER (2026-10-10). Phramed's own screens on the marketing site's system.

   Loaded by /login and /studio ONLY, after their own styles, so it wins at equal specificity.
   Client-facing pages (galleries, booking, consent, event pages) never load it: those wear the
   photographer's brand through phramed.css and must not turn into Phramed's.

   What carries over from site.css: Archivo and IBM Plex Mono, the warm paper and true ink, square
   corners, 1px rules and hard offset shadows. What deliberately does NOT: the all-caps mono
   buttons and the poster-size type. A tool someone works in for an hour needs calmer controls than
   a page they skim once, so buttons stay sentence case and mono is kept to small labels. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  src:url(/fonts/archivo-var-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plexmono-400-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/plexmono-500-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plexmono-600-latin.woff2) format("woff2")}

:root{
  --disp:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp-weight:800;
  --r-1:2px;--r-2:3px;--r-3:4px;--r-4:5px;
}
/* Light values from site.css. Dark mode keeps phramed.css's own dark tokens. */
:root:not([data-theme="dark"]){
  --paper:#f1f0eb;--paper-2:#e6e4dd;--card:#f8f7f3;--surface:#f8f7f3;--surface-2:#e6e4dd;
  --ink:#111111;--muted:#4d4b46;--faint:#6a675f;
  --line:rgba(17,17,17,.14);--line-2:rgba(17,17,17,.3);
}
/* The two shadow weights. --slab is the quiet one every container gets: a paper-colored offset that
   reads as a sheet sitting on the desk. --hard is reserved for the one thing on a screen that
   matters most, the same ink offset the marketing buttons use. */
:root{--slab:4px 4px 0 var(--paper-2);--hard:4px 4px 0 var(--ink)}

/* ---------- type ---------- */
body{font-family:var(--body);font-stretch:100%}
.topbar .ph1{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;font-size:1.3rem}
.navsec,.tile .tl,.field label,.atn-count,.pgl,.soon-tag,.prem,.nav-badge,.side .storage .st-top{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.navsec{font-size:.66rem;color:var(--muted)}
.tile .tl,.field label{font-size:.68rem}
.atn-count{font-size:.66rem}
.tile .tv{font-family:var(--disp);font-weight:700}

/* ---------- frame: sidebar and topbar ruled like the marketing nav ---------- */
.side{background:var(--paper);border-right:1px solid var(--ink)}
.side .logo .wm{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:1.15rem}
.topbar{border-bottom:1px solid var(--ink)}
.nav a{border-radius:var(--r-2)}
.nav a.on{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--accent)}
:root[data-theme="dark"] .nav a.on{color:#111}

/* ---------- containers: square, ruled, sitting on a slab ---------- */
.atn,.card,.tile,.gcard,.panel,.bcard,.pl-card,.pl-state,.fx-card,.fx-base,.ct-side,#ctBody,.cr-panel,
.ev-new,.ev-ready,.ev-match,.ev-cp-new,.ev-tagger,.gd-sec,.ed-empty,.storage,.drop,.cw-inner,
.qn-send,.qn-q,.qn-status,.qn-answers{
  border-radius:var(--r-3);border:1px solid var(--line-2);box-shadow:var(--slab)}
/* The work queue is the point of Overview, so it gets the ink offset and nothing else does. */
#atnPanel,#firstRun{border-color:var(--ink);box-shadow:var(--hard)}
.pcell{border-radius:var(--r-2)}
.drop{border-style:dashed;box-shadow:none}

/* ---------- controls ---------- */
.btn{border-radius:var(--r-2);font-family:var(--body);font-weight:600;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .2s,color .2s}
.btn-primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--accent);filter:none}
.btn-primary:hover{filter:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--accent)}
.btn-primary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--accent)}
:root[data-theme="dark"] .btn-primary{color:#111}
.btn-ghost{background:var(--card);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--card);border-color:var(--ink)}
.btn-ghost:active{transform:scale(.97)}
.field input,.field select,.field textarea,input[type=text],input[type=email],input[type=password],
input[type=tel],input[type=number],input[type=time],input[type=date],select,textarea{border-radius:var(--r-2)}
.field input:focus,.field select:focus,.field textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--ink);box-shadow:3px 3px 0 var(--accent);outline:none}

/* ---------- login / signup: the seam between the site and the app ---------- */
body.auth{background:var(--paper)}
body.auth .card{border-radius:0;border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--card)}
body.auth .logo{justify-content:flex-start;gap:.55rem}
body.auth .logo::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink)}
body.auth .logo .wordmark{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em}
body.auth h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;text-align:left;font-size:1.65rem;line-height:1.05}
body.auth .sub{text-align:left}
body.auth label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;font-weight:500}
body.auth input{border-radius:var(--r-2);border-color:var(--line-2);background:var(--paper)}
body.auth input:focus{border-color:var(--ink);box-shadow:3px 3px 0 var(--accent)}
body.auth .btn{border-radius:0;background:var(--ink);color:var(--paper);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--accent);filter:none}
body.auth .btn:hover{filter:none;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--accent)}
body.auth .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--accent)}
body.auth .toggle,body.auth .legal,body.auth .err{text-align:left}
body.auth .toggle button,body.auth .forgot button{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
body.auth .back{border-radius:0;border:1px solid var(--ink);background:var(--card);color:var(--ink);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;padding:.55rem .75rem;box-shadow:3px 3px 0 var(--ink)}
body.auth .back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* ---------- sidebar wordmark: same dot + caps as the marketing nav ---------- */
.side .logo{border-bottom:1px solid var(--ink);font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.side .logo .dot{background:var(--ink)}

/* ---------- demo banner: a ruled strip, not a pink pill ---------- */
.demo-banner{border-radius:0;border:1px solid var(--ink);background:var(--card);box-shadow:var(--slab)}
.demo-banner a,.demo-banner .link{border-radius:var(--r-2);background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--accent)}
:root[data-theme="dark"] .demo-banner a:not(.db-out),:root[data-theme="dark"] .demo-banner .link:not(.db-out){color:#111}
.demo-banner .db-out{background:none;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.menu-btn{border-radius:var(--r-2);border:1px solid var(--ink);color:var(--ink);background:var(--card)}