/* ============================================================
   ClickAndSay Cosmic Design System — shared tokens + components.
   Source of truth: lp-cosmic.html (approved by Beri 2026-07-09).
   Recoloured 2026-10-14 to the ink/emerald/copper brand (media/home/).
   admin/login/portal no longer mount universe.js; manager.html still does.
   Dark-only by design.
   ============================================================ */

:root{
  --bg:#101d28; --bg-2:#0d1922; --panel:#172b35; --panel-2:#1c3440;
  --ink:#f4f0e7; --ink-2:#b4c2c5; --ink-3:#8a9da1;
  --cyan:#59c3a0; --cyan-2:#007f68; --cyan-deep:#006451; --violet:#c5784f;
  --line:rgba(244,240,231,.13); --line-2:rgba(244,240,231,.22);
  --glass:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --card-sh:0 24px 50px -28px rgba(4,12,18,.9), inset 0 1px 0 rgba(255,255,255,.05);
  --st-new-t:#8ab4ff; --st-new-b:rgba(59,130,246,.14); --st-new-l:rgba(59,130,246,.3);
  --st-prog-t:#f5c063; --st-prog-b:rgba(245,158,11,.14); --st-prog-l:rgba(245,158,11,.3);
  --st-wait-t:#d8c5a3; --st-wait-b:rgba(216,197,163,.14); --st-wait-l:rgba(216,197,163,.3);
  --st-done-t:#59c3a0; --st-done-b:rgba(89,195,160,.14); --st-done-l:rgba(89,195,160,.3);
  --err-t:#fca5a5; --err-b:rgba(239,68,68,.12);
  --maxw:1080px;
}

/* ---- base canvas ---- */
body.pp-cosmic{
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);  /* flat ink: the working interface stays flat (brand 2026-10-14) */
  line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.pp-cosmic ::selection{background:rgba(89,195,160,.30)}
#pp-stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pp-z{position:relative;z-index:1}  /* wrap page content so it sits above the canvas */

/* ---- readability halo for text over the star field (skip filled buttons) ---- */
.pp-z :is(h1,h2,h3,h4,p,li,td,th,dt,dd,label,small),
.pp-z .pp-halo{
  text-shadow:0 0 2px rgba(8,16,22,.92), 0 1px 3px rgba(8,16,22,.8), 0 0 20px rgba(8,16,22,.6);
}
.pp-z :is(.pp-btn,button,input,select,textarea){text-shadow:none}

/* ---- buttons ---- */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:12px 22px;transition:transform .16s ease-out,box-shadow .2s ease-out,background .16s ease-out,border-color .16s ease-out;white-space:nowrap;color:var(--ink);text-decoration:none}
.pp-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(89,195,160,.4)}
.pp-btn:active{transform:translateY(0) scale(.985)}
.pp-btn-primary{background:linear-gradient(135deg,var(--cyan-2),#007f68);color:#ffffff;box-shadow:0 0 0 1px rgba(89,195,160,.5),0 12px 34px -6px rgba(0,127,104,.5)}
.pp-btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(89,195,160,.7),0 16px 44px -6px rgba(0,127,104,.7)}
.pp-btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-2)}
.pp-btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(89,195,160,.5);transform:translateY(-1px)}
.pp-btn-danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);color:#fca5a5}
.pp-btn-sm{padding:9px 16px;font-size:13.5px}

/* ---- surfaces ---- */
.pp-card{background:var(--glass);border:1px solid var(--line);border-radius:16px;box-shadow:var(--card-sh);transition:transform .18s ease-out,box-shadow .2s ease-out,border-color .2s ease-out}
.pp-card:hover{border-color:rgba(89,195,160,.45)}
.pp-panel{background:var(--panel);border:1px solid rgba(89,195,160,.22);border-radius:14px;box-shadow:0 40px 90px -30px rgba(4,12,18,.9),0 0 60px -20px rgba(0,127,104,.3)}

/* ---- forms ---- */
.pp-input,.pp-cosmic input[type=text],.pp-cosmic input[type=email],.pp-cosmic input[type=password],.pp-cosmic input[type=tel],.pp-cosmic input[type=url],.pp-cosmic textarea,.pp-cosmic select{
  font:inherit;font-size:16px;/* 16px: iOS zooms into smaller inputs */color:var(--ink);background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);border-radius:8px;padding:11px 13px;transition:border-color .16s ease;
}
.pp-cosmic input:focus,.pp-cosmic textarea:focus,.pp-cosmic select:focus{outline:none;border-color:var(--cyan)}
.pp-cosmic input::placeholder,.pp-cosmic textarea::placeholder{color:var(--ink-3)}
.pp-label{font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:7px;display:block}

/* ---- status chips (ClickAndSay statuses) ---- */
.pp-chip{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px}
.pp-chip.new{color:var(--st-new-t);background:var(--st-new-b);border-color:var(--st-new-l)}
.pp-chip.prog{color:var(--st-prog-t);background:var(--st-prog-b);border-color:var(--st-prog-l)}
.pp-chip.wait{color:var(--st-wait-t);background:var(--st-wait-b);border-color:var(--st-wait-l)}
.pp-chip.done{color:var(--st-done-t);background:var(--st-done-b);border-color:var(--st-done-l)}

/* ---- fixed top nav ---- */
.pp-nav{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(16,29,40,.72);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(89,195,160,.12),0 10px 30px rgba(4,12,18,.5)}
.pp-nav-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:64px}
.pp-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;font-size:16px;color:#fff;text-decoration:none}
.pp-brand .mk{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;background:linear-gradient(135deg,var(--cyan-2),#007f68);border-radius:7px;color:#ffffff;box-shadow:0 0 16px rgba(0,127,104,.5)}
.pp-under-nav{padding-top:64px}

/* ---- modal ---- */
.pp-modal{position:fixed;inset:0;z-index:90;display:none;align-items:flex-start;justify-content:center;padding:76px 16px 40px;overflow-y:auto;background:rgba(8,16,22,.74);backdrop-filter:blur(6px)}
.pp-modal.open{display:flex}
.pp-modal-card{position:relative;width:100%;max-width:560px;background:var(--panel);border:1px solid rgba(89,195,160,.28);border-radius:16px;box-shadow:0 40px 90px -30px rgba(4,12,18,.9),0 0 60px -22px rgba(0,127,104,.35);padding:30px}

/* ---- misc ---- */
.pp-kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 20px rgba(89,195,160,.5)}
.pp-beam{height:1px;border:none;background:linear-gradient(90deg,transparent,rgba(89,195,160,.7),transparent);box-shadow:0 0 14px rgba(89,195,160,.55);opacity:.8;margin:0}
.pp-cosmic ::-webkit-scrollbar{width:11px;height:11px}
.pp-cosmic ::-webkit-scrollbar-track{background:var(--bg-2)}
.pp-cosmic ::-webkit-scrollbar-thumb{background:rgba(244,240,231,.22);border-radius:8px;border:2px solid var(--bg-2)}
.pp-cosmic ::-webkit-scrollbar-thumb:hover{background:rgba(89,195,160,.45)}