/* Papercam. System fonts only: a privacy app should not call third-party font hosts. */
:root{
  --paper:#F2F3F1; --paper-2:#FFFFFF; --ink:#1B1F24; --muted:#5E6670; --rule:#D6DAD8;
  --accent:#2F55C9; --accent-ink:#FFFFFF;
  --stage:#0F1216; --stage-2:#1A1F25; --stage-ink:#E8EBEE; --stage-muted:#9AA3AD; --stage-rule:#2C333B;
  --danger:#D2493F; --ok:#4CB782; --warn:#E0A650;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#14171B; --paper-2:#1C2026; --ink:#E7EAED; --muted:#9AA3AD; --rule:#2C333B; --accent:#7E9BF0; --accent-ink:#0F1216; }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:16px/1.5 var(--sans);background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
button{font:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.linkbtn{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:0;font-weight:600}

/* ---------- home ---------- */
.home{min-height:100%;display:grid;align-items:center;padding:max(32px,env(safe-area-inset-top)) 20px max(32px,env(safe-area-inset-bottom))}
.home-inner{max-width:620px;margin:0 auto;display:grid;gap:22px}
.eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.home h1{font:400 clamp(40px,8vw,64px)/1.02 var(--serif);margin:0;letter-spacing:-.015em;text-wrap:balance}
.home h1 em{color:var(--accent)}
.lede{margin:0;font-size:18px;color:var(--muted);max-width:56ch}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.join{display:grid;gap:6px}
.join label{font-size:14px;color:var(--muted)}
.join-row{display:flex;gap:8px}
.join input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);font:15px var(--mono)}
.facts{list-style:none;margin:8px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);display:grid;gap:10px;color:var(--muted);font-size:15px}
.facts b{color:var(--ink)}

/* ---------- call room (always dark: it's a camera stage) ---------- */
.room{position:fixed;inset:0;display:grid;grid-template-rows:1fr auto;background:var(--stage);color:var(--stage-ink)}
.stage{position:relative;overflow:hidden;min-height:0}
#remote{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--stage)}
.room.setup #remote{visibility:hidden}

.topbar{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.chip{font:600 12px/1 var(--sans);padding:7px 10px;border-radius:99px;background:rgba(15,18,22,.72);color:var(--stage-ink);border:1px solid var(--stage-rule);backdrop-filter:blur(6px)}
.chip.ok{color:var(--ok)} .chip.warn{color:var(--warn)} .chip.bad{color:var(--danger)}

.waiting{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(560px,calc(100% - 32px));display:grid;gap:10px;justify-items:center;text-align:center;padding:18px;border-radius:14px;background:rgba(26,31,37,.92);border:1px solid var(--stage-rule);z-index:3}
.waiting-title{margin:0;font:400 24px/1.2 var(--serif)}
.waiting-sub{margin:0;color:var(--stage-muted);font-size:14px;max-width:46ch}
.share{display:flex;gap:8px;width:100%}
.share input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--stage-rule);background:var(--stage);color:var(--stage-ink);font:13px var(--mono)}
.room .btn{background:var(--stage-2);color:var(--stage-ink);border-color:var(--stage-rule)}
.room .btn.primary{background:#7E9BF0;border-color:#7E9BF0;color:#0F1216}

/* self view: big during setup / editing, picture-in-picture during the call */
.self{position:absolute;z-index:2;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 8px 30px rgba(0,0,0,.45);touch-action:none}
.self canvas{display:block;width:100%;height:auto}
#overlay{position:absolute;inset:0;width:100%;height:100%}
.self.mirrored canvas{transform:scaleX(-1)}
.self-label{position:absolute;left:8px;bottom:8px;font:600 11px/1 var(--sans);padding:5px 7px;border-radius:6px;background:rgba(15,18,22,.7);color:var(--stage-ink)}
.cam-off{position:absolute;inset:0;display:grid;place-items:center;background:#000;color:var(--stage-muted);font-size:14px}
.room.incall .self{right:12px;bottom:12px;width:clamp(120px,24vw,260px)}
.room.setup .self,.room.editing .self{left:50%;top:calc(56px + env(safe-area-inset-top));transform:translateX(-50%);width:auto}
.room.setup .self canvas#out,.room.editing .self canvas#out{width:auto;height:auto;max-width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 340px)}
.room.editing .self{z-index:4;cursor:crosshair}
.room.editing .waiting{display:none}
.edit-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;z-index:5;padding:10px 14px;border-radius:10px;background:rgba(26,31,37,.95);border:1px solid var(--stage-rule);font-size:14px;text-align:center;width:max-content;max-width:calc(100% - 32px)}
.err{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;margin:0;max-width:min(480px,calc(100% - 32px));padding:16px;border-radius:12px;background:#2A1A1A;border:1px solid #5A2A28;color:#F2C9C5;font-size:15px}

.bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--stage-2);border-top:1px solid var(--stage-rule)}
.bar-group{display:flex;gap:8px;align-items:center}
.seg{display:flex;border:1px solid var(--stage-rule);border-radius:10px;overflow:hidden;max-width:100%}
.seg button{border:0;background:transparent;color:var(--stage-ink);padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;border-right:1px solid var(--stage-rule)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:#7E9BF0;color:#0F1216}
.seg button.reveal[aria-pressed="true"]{background:var(--warn)}
.seg button.confirm{background:rgba(224,166,80,.2);color:var(--warn)}
.ctl{border:1px solid var(--stage-rule);background:transparent;color:var(--stage-ink);padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.ctl[aria-pressed="false"]{background:#3A2422;border-color:#5A2A28;color:#F2C9C5}
.ctl:disabled{opacity:.4;cursor:not-allowed}
.ctl.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.swatches{display:flex;gap:6px}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--stage-rule);padding:0;cursor:pointer}
.sw[aria-pressed="true"]{border-color:#7E9BF0}
.room.setup .ctl.danger{display:none}

@media (max-width:560px){
  .seg button{padding:9px 9px;font-size:13px}
  .bar{gap:8px}
  .room.incall .self{width:30vw}
}

/* ---------- studio ---------- */
.studio{position:fixed;inset:0;background:#000;display:grid;place-items:center;overflow:hidden}
#studioOut{width:100%;height:100%;object-fit:contain;display:block}
#studioOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}   /* pinned from the first paint, so it never jumps into place */
.studio-panel{position:absolute;top:16px;left:16px;width:min(360px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;display:grid;gap:12px;padding:16px;border-radius:14px;background:rgba(26,31,37,.95);border:1px solid var(--stage-rule);color:var(--stage-ink)}
.studio-head{display:flex;justify-content:space-between;align-items:center}
.small{margin:0;font-size:13px;color:var(--stage-muted)}
.steps{padding-left:18px;display:grid;gap:6px}
.steps code{font:12px var(--mono);color:var(--stage-ink);word-break:break-all}
.studio .err{position:static;transform:none}
.studio.editing{cursor:crosshair}

@media (prefers-reduced-motion:no-preference){ .self{transition:width .25s ease} }
@media (max-width:560px){ .room.incall .self-label{display:none} }

/* style (clarity) panel */
.style-panel{position:absolute;top:calc(52px + env(safe-area-inset-top));right:12px;z-index:6;width:min(300px,calc(100% - 24px));display:grid;gap:10px;padding:14px;border-radius:12px;background:rgba(26,31,37,.96);border:1px solid var(--stage-rule);color:var(--stage-ink);font-size:14px}
.style-panel .field,#studioStyle .field{display:grid;gap:4px}
.style-panel .row,#studioStyle .row{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.style-panel .val,#studioStyle .val{font:12px var(--mono);color:var(--stage-muted);font-variant-numeric:tabular-nums}
.style-panel input[type=range],#studioStyle input[type=range]{width:100%;accent-color:#7E9BF0}
.scale{display:flex;justify-content:space-between;font-size:12px;color:var(--stage-muted);margin-top:-6px}
.style-panel details,#studioStyle details{display:grid;gap:8px}
.style-panel summary,#studioStyle summary{cursor:pointer;color:var(--stage-muted);font-size:13px;margin-bottom:6px}
.style-panel details[open] .field,#studioStyle details[open] .field{margin-bottom:8px}
#studioStyle{display:grid;gap:10px;font-size:14px}
.ctl[aria-expanded="true"]{background:#7E9BF0;border-color:#7E9BF0;color:#0F1216}

.qseg{width:fit-content}
.qseg button{padding:7px 14px}
.qseg button[aria-pressed="true"]{background:#7E9BF0;color:#0F1216}

.camsel{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--stage-rule);background:var(--stage);color:var(--stage-ink);font:14px var(--sans)}
.style-panel label,#studioStyle label{font-weight:600}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.toast{position:fixed;left:50%;top:calc(56px + env(safe-area-inset-top));transform:translateX(-50%);z-index:20;max-width:min(520px,calc(100% - 32px));padding:12px 16px;border-radius:10px;background:#2B2A1E;border:1px solid #5A5228;color:#F2E6BF;font:14px/1.4 var(--sans);box-shadow:0 8px 30px rgba(0,0,0,.4)}

.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.looks button{border:1px solid var(--stage-rule);background:transparent;color:var(--stage-ink);padding:8px 6px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.looks button[aria-pressed="true"]{background:#7E9BF0;border-color:#7E9BF0;color:#0F1216}
.swatches.muted{opacity:.35}

/* enhance panel */
.style-panel{max-height:calc(100% - 70px);overflow:auto}
.subhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--stage-rule);font-weight:700}
.subhead .val{font:12px var(--sans);color:var(--stage-muted);text-align:right}
.subhead .val.bad{color:var(--warn)}
.check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--stage-ink)}
.check input{accent-color:#7E9BF0;width:16px;height:16px}
.lipsw .sw{width:24px;height:24px}
#studioEnhance{display:grid;gap:10px;font-size:14px;margin-top:8px}
#studioEnhance .field{display:grid;gap:4px}
#studioEnhance .row{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
#studioEnhance .val{font:12px var(--mono);color:var(--stage-muted)}
#studioEnhance input[type=range]{width:100%;accent-color:#7E9BF0}
.studio-enh summary{cursor:pointer;font-weight:700}

/* ---------- plans: Go Pro, free limits ---------- */
.plan-line{margin:0;font-size:14px;color:var(--muted)}
.pro-chip{pointer-events:auto;cursor:pointer;color:#F2D27A;border-color:#5A4D28}
.pro-chip.is-pro{color:var(--ok);border-color:var(--stage-rule);cursor:default}
.pro-badge{font:700 11px/1 var(--sans);padding:4px 7px;border-radius:99px;background:#3A3220;color:#F2D27A;vertical-align:middle}
.looks button small{font-size:10px;font-weight:700;color:#F2D27A;margin-left:3px}
.looks button.locked{opacity:.72}
.limit-bar{position:absolute;top:calc(52px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
  max-width:calc(100% - 24px);padding:9px 14px;border-radius:10px;background:#2B2A1E;border:1px solid #5A5228;color:#F2E6BF;font-size:14px}
.limit-bar.urgent{background:#3A1F1C;border-color:#6A2E24;color:#F3BDB2}
.pro-sheet{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(8,10,13,.72)}
.pro-card{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:12px;padding:22px;border-radius:16px;
  background:var(--stage-2);border:1px solid var(--stage-rule);color:var(--stage-ink)}
.pro-card h2{margin:0;font:400 26px/1.15 var(--serif)}
.pro-why{margin:0;color:var(--stage-ink);font-size:15px}
.pro-list{margin:0;padding-left:18px;display:grid;gap:5px;color:var(--stage-muted);font-size:14px}
.pro-list b{color:var(--stage-ink)}
.pro-card .join label{color:var(--stage-muted)}
.pro-card .join input{background:var(--stage);border-color:var(--stage-rule);color:var(--stage-ink)}
.pro-card .btn{background:var(--stage);color:var(--stage-ink);border-color:var(--stage-rule)}
.pro-card .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pro-msg{margin:0;font-size:14px;min-height:1em}
.pro-msg.ok{color:var(--ok)} .pro-msg.bad{color:var(--danger)}
.pro-card .linkbtn{justify-self:start;color:var(--stage-muted);font-size:14px}

.seg button small.pro-tag,.ctl small.pro-tag{font-size:10px;font-weight:700;color:#F2D27A;margin-left:3px}
.seg button.locked{opacity:.8}
.pro-signed{margin:0;font-size:14px;color:var(--stage-ink)}
.pro-card .small-link{font-size:13px;justify-self:start}
.pro-card #siEmail{padding:10px 12px;border-radius:10px;border:1px solid var(--stage-rule);background:var(--stage);color:var(--stage-ink);font:15px var(--sans)}