/* ================================================================
   The Dorm Ledger — reskinned on J.A.R.V.I.S. Design System v4
   Near-black + translucent-white glass · rose accent · categories
   carry the color (green stocked / orange low / red out).
   ================================================================ */
:root{
  --arc:#fb7185; --arc-bright:#f0899c; --arc-dim:#c4485a;
  --arc-glow:rgba(251,113,133,.10); --arc-glow-md:rgba(251,113,133,.18); --arc-glow-hi:rgba(251,113,133,.30);
  --bg-app:#0d0e12;
  --bg-surface:rgba(255,255,255,.07); --bg-surface-bd:rgba(255,255,255,.12);
  --bg-struct:rgba(255,255,255,.045); --bg-struct-bd:rgba(255,255,255,.10);
  --bg-solid:#15171d;
  --text-1:#f4f6fa; --text-2:#c2c8d2; --text-3:#868e9c;
  --divider:rgba(255,255,255,.10);
  --red:rgba(242,96,110,.14); --red-fg:#f2606e;
  --orange:rgba(246,182,75,.14); --orange-fg:#f6b64b;
  --green:rgba(127,221,158,.14); --green-fg:#7fdd9e;
  --cta:#fb7185; --cta-fg:#1a0709; --cta-hover:#f0899c;
  --sh-card:0 1px 3px rgba(0,0,0,.4); --sh-glow:0 8px 22px -8px rgba(251,113,133,.6);
  --ff-display:"Sora",-apple-system,system-ui,sans-serif;
  --ff-body:"Inter Tight",-apple-system,system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono","SF Mono","Fira Code",monospace;
  --r-sm:9px; --r-md:12px; --r-lg:14px; --r-xl:18px; --r-full:9999px;
  --t-fast:120ms ease; --t-mid:200ms ease;
}

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg-app); color:var(--text-1);
  font-family:var(--ff-body); font-size:15px; font-weight:500; line-height:1.5;
  -webkit-font-smoothing:antialiased; user-select:none; overflow:hidden;
}
/* Layered radial-gradient atmosphere (Jarvis signature) */
.scanlines{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 12% 6%,  rgba(251,113,133,.28), transparent 42%),
    radial-gradient(circle at 88% 96%, rgba(127,176,255,.22), transparent 46%),
    radial-gradient(circle at 60% 40%, rgba(251,113,133,.05), transparent 60%),
    var(--bg-app);
}
button,input,select,textarea{ font-family:inherit; }

.screen{ position:relative; z-index:1; height:100vh; display:flex; flex-direction:column; padding:0 clamp(16px,4vw,40px); }

/* ---- Masthead ---- */
.masthead{ text-align:center; padding:28px 0 20px; border-bottom:1px solid var(--divider); }
.eyebrow{
  font-family:var(--ff-mono); letter-spacing:.22em; text-transform:uppercase;
  font-size:11px; color:var(--arc-bright); opacity:.9; margin-bottom:12px;
}
h1{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(30px,5.5vw,50px); line-height:1; margin:0 0 8px; letter-spacing:-.02em;
  color:var(--text-1); text-shadow:0 0 24px rgba(251,113,133,.18);
}
.sub{ font-size:15px; color:var(--text-3); margin:0; }
.stats{ display:flex; justify-content:center; gap:clamp(18px,5vw,40px); margin-top:20px; }
.stats > div{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.stats b{ display:block; font-family:var(--ff-mono); font-size:26px; font-weight:600; color:var(--text-1); letter-spacing:0; margin-bottom:2px; }
#stat-out, #stat-drink{ } /* colored via JS-less: use nth handled below */
.mast-actions{ display:flex; justify-content:center; gap:12px; margin-top:20px; flex-wrap:wrap; }

/* Buttons (Jarvis .btn language) */
.ghost-btn{
  font-family:var(--ff-body); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--arc-bright); background:var(--arc-glow-md); border:1px solid var(--arc-dim);
  border-radius:var(--r-sm); padding:0 20px; min-height:48px; cursor:pointer;
  box-shadow:0 0 16px var(--arc-glow); transition:all var(--t-fast);
}
.ghost-btn:hover,.ghost-btn:active{ background:var(--arc-glow-hi); border-color:var(--arc); color:#fff; }
.event-select{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--text-2);
  background:var(--bg-struct); border:1px solid var(--bg-struct-bd); border-radius:var(--r-sm);
  padding:0 16px; min-height:48px;
}

.ledger-wrap{ flex:1; overflow-y:auto; padding-bottom:32px; }

/* ---- Pantry cards (Jarvis .card) ---- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px; padding:22px 0 0; align-content:start; }
.card{
  position:relative; background:var(--bg-surface); border:1px solid var(--bg-surface-bd);
  border-radius:var(--r-md); box-shadow:var(--sh-card); padding:18px;
  display:flex; flex-direction:column; gap:13px;
  opacity:0; animation:rowIn .5s ease forwards;
}
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; border-radius:var(--r-md) var(--r-md) 0 0; background:linear-gradient(90deg,transparent,var(--arc-dim),transparent); opacity:.5; }
.card.low::before{ background:linear-gradient(90deg,transparent,var(--orange-fg),transparent); }
.card.out::before{ background:linear-gradient(90deg,transparent,var(--red-fg),transparent); opacity:.8; }
.card .cat{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--arc-bright); }
.card .name{ font-family:var(--ff-display); font-size:22px; font-weight:600; line-height:1.05; color:var(--text-1); word-break:break-word; }
.card .meta{ display:flex; align-items:center; gap:9px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--green-fg); flex:none; box-shadow:0 0 8px rgba(127,221,158,.6); }
.dot.low{ background:var(--orange-fg); box-shadow:0 0 8px rgba(246,182,75,.6); }
.dot.out{ background:var(--red-fg); box-shadow:0 0 10px rgba(242,96,110,.7); }
.card .qty{ margin-left:auto; font-family:var(--ff-mono); font-size:16px; font-weight:600; color:var(--text-2); }

.card .actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.card .actions .wide{ grid-column:1 / -1; }
.btn{
  min-height:54px; border-radius:var(--r-sm); border:1px solid var(--bg-surface-bd);
  background:var(--bg-struct); color:var(--text-1);
  font-family:var(--ff-body); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:all var(--t-fast);
}
.btn:hover{ background:var(--arc-glow); border-color:var(--arc-dim); }
.btn:active{ transform:scale(.97); }
.btn.big{ font-family:var(--ff-mono); font-size:22px; letter-spacing:0; }
.btn.out{ background:var(--red); color:var(--red-fg); border-color:rgba(242,96,110,.3); }
.btn.out:hover{ background:rgba(242,96,110,.24); }
.btn.restock{ background:var(--green); color:var(--green-fg); border-color:rgba(127,221,158,.3); }
.btn.restock:hover{ background:rgba(127,221,158,.24); }

.empty{ text-align:center; color:var(--text-3); padding:64px 20px; font-size:14px; }
.empty code{ font-family:var(--ff-mono); color:var(--arc-bright); }

/* ---- PIN overlay ---- */
.overlay{ position:fixed; inset:0; z-index:40; background:rgba(10,11,15,.92); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.pinpad{ text-align:center; }
.pin-title{ font-family:var(--ff-display); font-weight:700; font-size:34px; color:var(--text-1); margin:6px 0 24px; text-shadow:0 0 24px rgba(251,113,133,.2); }
.pin-dots{ height:16px; margin-bottom:26px; display:flex; gap:14px; justify-content:center; }
.pin-dots i{ width:13px; height:13px; border-radius:50%; border:2px solid var(--text-3); transition:all var(--t-fast); }
.pin-dots i.on{ background:var(--arc); border-color:var(--arc); box-shadow:0 0 10px var(--arc-glow-hi); }
.pinpad.err .pin-dots i{ border-color:var(--red-fg); animation:shake .3s; }
.keys{ display:grid; grid-template-columns:repeat(3,84px); gap:16px; justify-content:center; }
.keys button{
  width:84px; height:84px; border-radius:var(--r-full); background:var(--bg-surface);
  color:var(--text-1); border:1px solid var(--bg-surface-bd); font-family:var(--ff-mono); font-size:28px; cursor:pointer;
  transition:all var(--t-fast);
}
.keys button:hover{ background:var(--arc-glow); border-color:var(--arc-dim); }
.keys button:active{ transform:scale(.94); }
.keys button.alt{ color:var(--arc-bright); font-size:24px; }
.link{ margin-top:24px; background:none; border:none; color:var(--text-3); font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-decoration:underline; cursor:pointer; }

/* ---- Guest ledger ---- */
.col-heads,.guest-row{ display:grid; grid-template-columns:44px 1.5fr 1fr 84px 84px 120px; gap:12px; align-items:center; }
.col-heads{ padding:22px 12px 10px; font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--arc-bright); opacity:.8; }
.col-heads span:not(.l){ text-align:center; }
.rows{ display:flex; flex-direction:column; }
.guest-row{
  padding:13px 12px; border-bottom:1px solid var(--divider);
  opacity:0; animation:rowIn .45s ease forwards; transition:background var(--t-fast);
}
.guest-row.arrived{ background:var(--green); }
.delete-btn{ background:none; border:none; color:var(--text-3); font-size:24px; line-height:1; cursor:pointer; transition:all var(--t-fast); }
.delete-btn:hover,.delete-btn:active{ color:var(--red-fg); transform:scale(1.15); }
.gname{ font-family:var(--ff-display); font-size:19px; font-weight:600; color:var(--text-1); word-break:break-word; }
.gbuild{ font-family:var(--ff-body); font-size:13px; color:var(--text-3); }
.gbuild.unknown{ opacity:.45; }
.gname[contenteditable],.gbuild[contenteditable]{ cursor:text; border-radius:6px; padding:2px 6px; margin:-2px -6px; outline:1px dashed transparent; transition:all var(--t-fast); }
.gname[contenteditable]:focus,.gbuild[contenteditable]:focus{ outline:1px dashed var(--arc-dim); background:var(--arc-glow); }
.gname:empty::before,.gbuild:empty::before{ content:attr(data-placeholder); opacity:.4; }

.tcell{ display:flex; justify-content:center; }
.toggle{
  position:relative; width:70px; height:36px; border-radius:var(--r-full);
  border:1px solid var(--bg-surface-bd); background:var(--bg-struct); cursor:pointer; padding:0;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.04em; overflow:hidden; transition:all var(--t-mid);
}
.toggle .knob{ position:absolute; top:2px; left:2px; width:30px; height:30px; border-radius:50%; background:var(--text-3); transition:transform .3s cubic-bezier(.5,1.6,.4,1),background .3s; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.toggle .label{ display:block; width:100%; text-align:center; }
.toggle[data-state=off] .label{ padding-left:14px; color:var(--text-3); }
.toggle[data-state=on] .label{ padding-right:14px; color:var(--green-fg); }
.toggle[data-state=on]{ border-color:rgba(127,221,158,.4); background:var(--green); }
.toggle[data-state=on] .knob{ transform:translateX(34px); background:var(--green-fg); }

.checkin{ min-height:50px; width:100%; border-radius:var(--r-sm); border:1px solid var(--bg-surface-bd); background:var(--bg-struct); color:var(--text-2); font-family:var(--ff-body); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all var(--t-fast); }
.checkin:hover{ background:var(--arc-glow); border-color:var(--arc-dim); color:var(--text-1); }
.guest-row.arrived .checkin{ background:var(--green); color:var(--green-fg); border-color:rgba(127,221,158,.4); }

.add-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:22px 12px 0; }
.add-row input[type=text]{ background:var(--bg-struct); border:1px solid var(--bg-struct-bd); border-radius:var(--r-sm); color:var(--text-1); font-family:var(--ff-body); font-size:15px; padding:12px 14px; min-height:50px; }
#add-name{ flex:1 1 200px; } #add-building{ flex:1 1 160px; }
.add-row input::placeholder{ color:var(--text-3); }
.add-row input:focus{ outline:none; border-color:var(--arc-dim); box-shadow:0 0 0 3px var(--arc-glow); }
.mini-toggle{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--arc-bright); display:flex; align-items:center; gap:8px; }
.mini-toggle input{ width:22px; height:22px; accent-color:var(--arc); }
.add-row button{ background:var(--cta); color:var(--cta-fg); border:none; border-radius:var(--r-sm); padding:0 22px; min-height:50px; font-family:var(--ff-body); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; box-shadow:var(--sh-glow); transition:all var(--t-fast); }
.add-row button:hover{ background:var(--cta-hover); }
.add-row button:active{ transform:scale(.97); }

.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:60; background:var(--bg-solid); color:var(--text-1); border:1px solid var(--bg-surface-bd); border-radius:var(--r-md); padding:12px 22px; font-family:var(--ff-mono); font-size:13px; box-shadow:var(--sh-card); }

@keyframes rowIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }

@media (max-width:640px){
  .col-heads{ display:none; }
  .guest-row{ grid-template-columns:44px 1fr 1fr; row-gap:12px; }
  .guest-row .gname{ grid-column:2 / -1; }
  .guest-row .gbuild{ grid-column:2 / -1; }
  .tcell,.checkin-cell{ justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }