/* ══════════════════════════════════════════════════════════════════════════
   Blink & Blush — shared portal theme
   Palette: deep teal · aqua · white · pink · hot pink

   Loaded by outward.html and account.html. Both portals reference only these
   variables, so a future palette change is one file, not two rewrites.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Teal ── */
  --teal-900:#14343C; --teal-800:#1B5563; --teal-700:#2E7D8C;
  --teal-500:#57B4C4; --teal-300:#8FD6E2; --teal-100:#D6F0F5; --teal-50:#EFF8FA;

  /* ── Pink ── */
  --pink-700:#C93B78; --pink-600:#D94586; --pink-500:#EC5F9C;
  --pink-300:#F8AECD; --pink-100:#FDE9F1; --pink-50:#FEF5F9;

  --white:#FFFFFF;

  /* ── Semantic roles — components use these, never the raw ramps ── */
  --brand:      var(--pink-500);
  --brand-dark: var(--pink-700);
  --accent:     var(--teal-700);
  --accent-lt:  var(--teal-500);

  --bg:      var(--teal-50);
  --surface: var(--white);
  --soft:    var(--pink-100);
  --line:    #D3E7EC;

  --ink:   var(--teal-900);
  --muted: #5C8792;

  --ok:#0E7A5F;    --okbg:#E3F6F0;
  --err:#C42B5C;   --errbg:#FDECF1;
  --warn:#B26A00;  --warnbg:#FFF6E5;

  --r:14px;
  --shadow:0 2px 12px rgba(20,52,60,.07);
  --shadow-lg:0 10px 32px rgba(20,52,60,.12);
  --grad: linear-gradient(135deg, var(--teal-500) 0%, var(--pink-500) 100%);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Soft aqua wash with a pink bloom — echoes the reference photograph
     without costing an image request. */
  background:
    radial-gradient(1100px 480px at 82% -8%, rgba(248,174,205,.30), transparent 62%),
    radial-gradient(900px 460px at 6% 4%, rgba(143,214,226,.34), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* ── Header ── */
header{
  background:var(--grad);color:#fff;padding:13px 18px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
  box-shadow:var(--shadow);
}
header h1{margin:0;font-size:16px;font-weight:800;letter-spacing:.4px}
header h1 span{color:var(--teal-100)}
header .who,header #who{margin-left:auto;font-size:13px;color:rgba(255,255,255,.9)}

/* ── Tabs ── */
nav{
  display:flex;gap:4px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:0 10px;overflow-x:auto;
  position:sticky;top:51px;z-index:19;
}
nav button{
  border:0;background:0;padding:14px 16px;font-size:14px;font-weight:700;
  color:var(--muted);cursor:pointer;white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .18s,border-color .18s;
}
nav button:hover{color:var(--accent)}
nav button.on{color:var(--brand-dark);border-bottom-color:var(--brand)}

main{padding:18px;max-width:1100px;margin:0 auto}

/* ── Cards ── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:15px;box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 14px;font-size:14px;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;color:var(--accent);
}

/* ── Forms ── */
label{
  display:block;font-size:11px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;
}
input,select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;background:var(--surface);color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--pink-100);
}
.row{display:grid;gap:13px;margin-bottom:13px}
@media(min-width:680px){
  .row.c2{grid-template-columns:repeat(2,1fr)}
  .row.c3{grid-template-columns:repeat(3,1fr)}
  .row.c4{grid-template-columns:repeat(4,1fr)}
}

/* ── Buttons ── */
button.b{
  background:var(--brand);color:#fff;border:0;border-radius:10px;
  padding:12px 22px;font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 2px 8px rgba(236,95,156,.28);transition:transform .12s,box-shadow .18s,background .18s;
}
button.b:hover:not(:disabled){background:var(--brand-dark);box-shadow:0 4px 14px rgba(236,95,156,.36)}
button.b:active:not(:disabled){transform:translateY(1px)}
button.b:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
button.g{background:var(--surface);color:var(--accent);border:1.5px solid var(--line);box-shadow:none}
button.g:hover:not(:disabled){background:var(--teal-50);border-color:var(--accent-lt)}

/* ── Messages ── */
.msg{padding:12px 14px;border-radius:10px;margin:11px 0;font-size:14px;font-weight:600;border-left:4px solid}
.msg.ok{background:var(--okbg);color:var(--ok);border-color:var(--ok)}
.msg.err{background:var(--errbg);color:var(--err);border-color:var(--err)}
.msg.warn{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--accent);padding:10px 7px;border-bottom:2px solid var(--teal-100);
  background:var(--teal-50);
}
td{padding:10px 7px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--pink-50)}
.n,.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,"Courier New",monospace;font-size:13px}

/* ── Stat tiles ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
/* A thin gradient rule reads as intentional; a coloured card body does not. */
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.stat b{display:block;font-size:26px;line-height:1.15;font-weight:800;color:var(--teal-800)}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}

/* ── Pills ── */
.pill{display:inline-block;padding:3px 11px;border-radius:99px;font-size:11px;font-weight:800}
.pill.in{background:var(--okbg);color:var(--ok)}
.pill.out{background:var(--pink-100);color:var(--brand-dark)}
.pill.ret{background:var(--warnbg);color:var(--warn)}

.pos{color:var(--ok);font-weight:700}
.neg{color:var(--err);font-weight:700}
.hide{display:none}
.hint{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}

/* ── Scan box: the one control staff use all day ── */
#scanInput{
  font-size:23px;padding:18px;text-align:center;letter-spacing:1.5px;
  font-family:ui-monospace,"Courier New",monospace;text-transform:uppercase;
  border:2px dashed var(--accent-lt);background:var(--teal-50);
}
#scanInput:focus{border-style:solid;border-color:var(--brand);background:var(--white)}

.scanlog{max-height:320px;overflow-y:auto;margin-top:14px}
.scanlog div{padding:9px 12px;border-radius:9px;margin-bottom:6px;font-size:13px;font-weight:600;
             border-left:4px solid;animation:slide .2s ease}
.scanlog .s-ok{background:var(--okbg);color:var(--ok);border-color:var(--ok)}
.scanlog .s-no{background:var(--errbg);color:var(--err);border-color:var(--err)}
@keyframes slide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.itm{display:grid;grid-template-columns:2.2fr .6fr .8fr .7fr .6fr auto;gap:8px;
     margin-bottom:8px;align-items:end}
@media(max-width:679px){.itm{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}