/* That 70s Roleplay — admin console. Page ground is flat black by request.
   Concept: the face of a 1970s hi-fi receiver. A dashboard IS a control
   surface, so the era's own control surfaces are the honest reference:
   a wood case, a recessed brushed plate, engraved nameplates, VU meters
   with tick marks, and backlit bezel lamps instead of flat status dots.
   Surfaces differ BY ROLE — raised plate, sunken well, engraved label —
   rather than one rounded card stamped on every block.
   Type is large throughout: this is read at high magnification. */
:root{
  --tan:#C9A46A; --tan-light:#E6CFA0; --tan-dark:#8A6A3C;
  --stitch:#F0D9A8; --panel:#241A10; --panel2:#2E2216;
  --cream:#F4E8CF; --muted:#C9B48F; --accent:#D97D2E;
  --line:#3d2c1a;
  --wood:#3A2616; --well:#140C06; --plate:#241910;
  --ok:#6FA860; --warn:#D9A62E; --bad:#C4553B;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--cream); background:#000;
  font:17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px 64px}

/* ---------- leather header: logo CENTRED, controls right ---------- */
.header{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* spacer | logo | nav */
  align-items:center;
  gap:14px;
  padding:18px 24px;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,.28), transparent 50%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(25deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px),
    linear-gradient(160deg,#b98f5b 0%,#a67a48 45%,#8e6538 100%);
}
.header::before{content:"";position:absolute;inset:3px;border:2px dashed var(--stitch);border-radius:8px;opacity:.9;pointer-events:none}
.header::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(60,35,10,.55);pointer-events:none}
.logo{grid-column:2;justify-self:center;width:clamp(110px,16vw,168px);height:auto;
  position:relative;z-index:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}

/* the period device: a warm graduated band closing the header.
   Unequal widths on purpose — an evenly divided 5-way split reads as a
   generated swatch row, a racing stripe set does not. Every segment is
   light enough to hold against the wood. */
.stripe{height:12px;display:flex;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.stripe i{display:block}
.stripe i:nth-child(1){flex:3;background:#F0D9A8}
.stripe i:nth-child(2){flex:2;background:#E6CFA0}
.stripe i:nth-child(3){flex:5;background:#C9A46A}
.stripe i:nth-child(4){flex:2;background:#D97D2E}
.stripe i:nth-child(5){flex:4;background:#A67A48}

.nav{grid-column:3;justify-self:end;display:flex;gap:10px;position:relative;z-index:1;align-items:center;flex-wrap:wrap}
.header .out{display:flex;align-items:center;gap:10px;padding:11px 17px;border-radius:7px;
  border:1px solid #6d5026;color:#2a1b0d;font-weight:800;text-decoration:none;
  background:linear-gradient(180deg,#d0a874,#ab8049);
  box-shadow:0 2px 0 #6d5026, inset 0 1px 0 rgba(255,240,215,.5)}
.header .out:hover{background:linear-gradient(180deg,#dcb684,#b98f5b)}
.header .out:active{transform:translateY(2px);box-shadow:0 0 0 #6d5026}

/* ---------- engraved nameplate, replaces icon+title rows ---------- */
.plate{display:inline-flex;align-items:center;gap:11px;margin:38px 0 15px;padding:9px 18px;
  border-radius:4px;background:linear-gradient(180deg,#1b120a,#2a1d11);
  border:1px solid #4a3520;box-shadow:inset 0 1px 0 rgba(255,225,180,.13),0 2px 5px rgba(0,0,0,.5);
  font:700 14px Inter,sans-serif;letter-spacing:4px;text-transform:uppercase;color:var(--tan-light)}
.plate i{color:var(--accent);font-size:15px}

/* ---------- the receiver face: one instrument cluster, not four cards ---------- */
.console{
  border-radius:10px;padding:6px;
  background:linear-gradient(180deg,#4a3320,#2f2013);
  box-shadow:0 12px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,225,180,.22);
}
.face{
  border-radius:7px;padding:26px 8px;display:flex;flex-wrap:wrap;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg,#2b1e12,#1d1309);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.75);
}
.read{flex:1 1 190px;padding:0 26px;text-align:center;border-right:1px solid rgba(255,220,175,.10)}
.read:last-child{border-right:0}
.read .k{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.read .k i{color:var(--tan-dark)}
/* readout glows like a warm VFD, which is the period-correct display */
.read .v{margin-top:12px;font-size:44px;font-weight:800;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(217,125,46,.45)}
.read .v small{font-size:20px;color:var(--tan-dark);font-weight:600;text-shadow:none}

.lamp-txt{font:800 25px Inter,sans-serif;letter-spacing:1px;margin-top:12px;
  display:flex;align-items:center;justify-content:center;gap:11px}
.lamp-txt.on{color:#9BD08A}
.lamp-txt.off{color:#E9A08E}

/* ---------- sunken wells hold instruments and readouts ---------- */
.well{border-radius:8px;padding:22px;background:var(--well);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.8), 0 1px 0 rgba(255,225,180,.07);
  border:1px solid #120b05}
.cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:start}

/* VU meters: ticked scale, not a plain rounded progress bar */
.met + .met{margin-top:22px}
.met .top{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;margin-bottom:9px}
.met .top b{color:var(--accent);font-variant-numeric:tabular-nums;font-size:19px}
.met .top .sub{font-size:13px;color:var(--muted)}
.track{position:relative;height:20px;border-radius:3px;background:#0b0704;
  border:1px solid #000;box-shadow:inset 0 2px 6px rgba(0,0,0,.9);overflow:hidden}
.bar{height:100%;background:linear-gradient(180deg,#e0b878,var(--tan) 45%,#9a7439);
  box-shadow:0 0 14px rgba(201,164,106,.5);transition:width .5s}
.bar.warn{background:linear-gradient(180deg,#f0cf7a,var(--warn) 45%,#8a6a24)}
.bar.bad{background:linear-gradient(180deg,#e58f76,var(--bad) 45%,#7d3325)}
/* tick marks ride over the needle so the scale is readable at any level */
.track::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 1px, transparent 1px 24px)}

/* ---------- backlit bezel lamps, not flat dots ---------- */
.lamps{display:flex;flex-direction:column;gap:14px}
.lamp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-radius:6px;background:linear-gradient(180deg,#241810,#1a1109);
  border:1px solid #3a2818}
.lamp-row .l{display:flex;align-items:center;gap:14px;min-width:0}
.lamp-row .l > i{color:var(--tan-dark);width:24px;text-align:center;font-size:18px}
.lamp-row .lab{font-weight:700;font-size:17px}
.lamp-row .sub{font-size:13px;color:var(--muted)}
.lamp{width:20px;height:20px;border-radius:50%;flex:none;
  border:2px solid #0f0a05;box-shadow:inset 0 1px 2px rgba(255,255,255,.25)}
.lamp.on{background:radial-gradient(circle at 35% 30%,#c9f0b4,#5d9a4e);
  box-shadow:0 0 14px rgba(111,168,96,.85), inset 0 1px 2px rgba(255,255,255,.5)}
.lamp.off{background:radial-gradient(circle at 35% 30%,#6a3126,#341813)}

/* ---------- chunky physical buttons ---------- */
.links{display:flex;gap:16px;flex-wrap:wrap}
.links a{display:flex;align-items:center;gap:12px;padding:17px 26px;border-radius:7px;
  border:1px solid #6d5026;color:#2a1b0d;text-decoration:none;font-weight:800;font-size:17px;
  background:linear-gradient(180deg,#d0a874,#ab8049);
  box-shadow:0 3px 0 #63481f, inset 0 1px 0 rgba(255,240,215,.5)}
.links a:hover{background:linear-gradient(180deg,#dcb684,#b98f5b)}
.links a:active{transform:translateY(3px);box-shadow:0 0 0 #63481f}
.links a i{color:#4a3210;font-size:19px}

/* ---------- the log is a screen behind glass ---------- */
pre.log{margin:0;padding:20px;border-radius:6px;background:#0a0604;border:1px solid #000;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.9);
  max-height:440px;overflow:auto;font:14px/1.65 ui-monospace,"SF Mono",Menlo,monospace;
  color:#C9A46A;white-space:pre-wrap;word-break:break-word;text-shadow:0 0 7px rgba(201,164,106,.28)}

.empty{color:var(--muted);padding:6px 2px;font-size:17px}
.foot{margin-top:38px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ===========================================================================
   Tablet and phone. The dashboard is used on a phone at the server and on a
   tablet on the couch, so everything collapses to one column and every control
   stays at a real touch size.
   =========================================================================== */

/* touch targets: nothing tappable smaller than ~44px */
@media (pointer:coarse){
  .header .out, .links a, button, .newbtn, button.sm, .tab{ min-height:44px }
  button.sm{ padding:11px 16px }
}

/* ---- tablet ---- */
@media (max-width:900px){
  .wrap{padding:0 16px 48px}
  .read{flex-basis:50%;border-right:0}
  .read:nth-child(odd){border-right:1px solid rgba(255,220,175,.10)}
  .cols{grid-template-columns:1fr}
  .g4,.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .new{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* ---- phone ---- */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 14px 44px}

  /* header stacks: logo on top, controls under it, both centred */
  .header{grid-template-columns:1fr;justify-items:center;padding:16px 14px;gap:12px}
  .logo{grid-column:1;width:clamp(120px,42vw,180px)}
  .nav{grid-column:1;justify-self:center;justify-content:center;width:100%}
  .header .out{flex:1 1 auto;justify-content:center;font-size:15px;padding:12px 14px}

  .plate{margin:26px 0 12px;letter-spacing:2.5px;font-size:13px}

  /* instrument cluster: two readouts per row instead of four */
  .face{padding:16px 4px}
  .read{flex-basis:50%;padding:10px 8px;border-right:0}
  .read .v{font-size:30px}
  .read .k{font-size:11px;letter-spacing:2px}

  .met .top{flex-wrap:wrap;gap:4px}
  .lamp-row{padding:12px 13px}
  .lamp-row .lab{font-size:16px}

  .links{flex-direction:column}
  .links a{justify-content:center}

  pre.log{font-size:12.5px;padding:14px;max-height:340px}
  .foot{flex-direction:column;gap:6px}

  /* file browser rows stack */
  .frow{flex-direction:column;align-items:stretch;gap:10px}
  .frow .r{justify-content:flex-end}
  .pathbar{gap:10px}
  .crumbs{font-size:15px}

  /* people rows stack, and each control goes full width */
  .urow{flex-direction:column;align-items:stretch}
  .acts{flex-direction:column;align-items:stretch}
  .acts form{width:100%}
  .acts input,.acts select{flex:1;width:100%}
  .acts button.sm{width:100%}
  .arow{grid-template-columns:1fr 1fr;gap:4px}

  /* task board */
  .tabs{gap:8px}
  .tab{flex:1 1 46%;text-align:center;padding:12px 10px;font-size:14px}
  .filters{gap:10px}
  .filters input{min-width:0;flex:1 1 100%}
  .filters select{flex:1 1 100%}
  .new{grid-template-columns:1fr}
  .task .top{flex-direction:column;gap:8px}
  .task .ttl{font-size:17px}
  .acts button.sm{flex:1 1 46%}
}

/* nothing may push the page sideways */
body{overflow-x:hidden}
table, pre, .track{max-width:100%}