/* Client Demo Hub
   Concept: a print proofing room. Clients review a "proof" of their app before it goes live,
   so the palette borrows paper, press ink and the blue of a printer's blueline proof. */
:root{
  --paper:#F3F2EE; --sheet:#FFFFFF; --sheet-2:#ECEBE6; --ink:#1B1F2A; --ink-2:#5B6170; --ink-3:#8E94A1;
  --rule:#DEDCD5; --blue:#2E55C4; --blue-ink:#FFFFFF; --blue-soft:#E7EDFB;
  --ok:#1F7A4D; --ok-soft:#DDF1E6; --warn:#8E5A00; --warn-soft:#FAEBCC; --bad:#B23A3A; --bad-soft:#F8E0E0;
  --scrim:rgba(20,24,33,.45); --shadow:0 1px 2px rgba(20,24,33,.06),0 12px 32px rgba(20,24,33,.10);
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --bar:52px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#121419; --sheet:#1A1D24; --sheet-2:#232731; --ink:#ECEEF2; --ink-2:#A3A9B6; --ink-3:#6C7280;
  --rule:#2D323D; --blue:#8CA9F5; --blue-ink:#0E1630; --blue-soft:#1F2A4A;
  --ok:#7AD3A0; --ok-soft:#173828; --warn:#EDBE62; --warn-soft:#3A2E14; --bad:#F29191; --bad-soft:#3E1D1D;
  --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#121419; --sheet:#1A1D24; --sheet-2:#232731; --ink:#ECEEF2; --ink-2:#A3A9B6; --ink-3:#6C7280;
  --rule:#2D323D; --blue:#8CA9F5; --blue-ink:#0E1630; --blue-soft:#1F2A4A;
  --ok:#7AD3A0; --ok-soft:#173828; --warn:#EDBE62; --warn-soft:#3A2E14; --bad:#F29191; --bad-soft:#3E1D1D;
  --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
img{max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--blue)}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.muted{color:var(--ink-2)}
.small{font-size:13px}
.mono{font-family:var(--f-mono)}
.eyebrow{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0}

/* buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--rule);background:var(--sheet);border-radius:10px;padding:10px 14px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--blue-ink)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{color:var(--ink);border-color:var(--rule)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:8px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{display:grid;gap:6px}
.field label,.lbl{font-size:13px;font-weight:600}
.in{width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);color:var(--ink)}
textarea.in{min-height:110px;resize:vertical}
.in:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.err{color:var(--bad);font-size:13.5px;margin:0}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.new{background:var(--blue-soft);color:var(--blue)}
.pill.seen{background:var(--warn-soft);color:var(--warn)}
.pill.done{background:var(--ok-soft);color:var(--ok)}
.pill.off{background:var(--sheet-2);color:var(--ink-2)}

/* proof card with printer's crop marks at the corners */
.proof{position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow)}
.proof::before,.proof::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none}
.proof::before{top:-10px;left:-10px;border-top:1.5px solid var(--ink-3);border-left:1.5px solid var(--ink-3)}
.proof::after{bottom:-10px;right:-10px;border-bottom:1.5px solid var(--ink-3);border-right:1.5px solid var(--ink-3)}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;background:var(--ink);color:var(--paper);border-radius:12px;padding:11px 16px;font-size:14px;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
@media (prefers-reduced-motion:no-preference){.toast{animation:rise .25s ease-out}@keyframes rise{from{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%,0);opacity:1}}}