/* OKAWA Access Telemetry — F1 pit-wall readout, executed in carbon-paper light. */
:root {
  --paper:#f1ede3;        /* warm carbon paper */
  --panel:#fbf9f3;
  --panel-2:#f6f2e8;
  --ink:#1b1916;
  --ink-2:#4a463d;
  --muted:#857f72;
  --hair:#e0d9c9;
  --hair-2:#ece6d8;
  /* access channels */
  --r:#5d6b75;            /* read  — slate, benign */
  --w:#1f6f8f;            /* write — teal-blue */
  --c:#3f7d54;            /* create — green */
  --d:#c4452f;            /* delete — danger red (reserved) */
  --ok:#3f7d54;
  --shadow:0 1px 0 rgba(0,0,0,.03), 0 8px 24px -16px rgba(40,30,10,.35);
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:
    radial-gradient(120% 80% at 100% -10%, #f7f3ea 0%, transparent 55%),
    var(--paper);
  color:var(--ink);
  font:14px/1.5 "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection { background:#e9c9b8; }

/* ---------- top bar ---------- */
.topbar {
  display:flex; align-items:center; gap:24px;
  padding:14px 26px; border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,#faf6ec,#f3efe4);
  position:sticky; top:0; z-index:40;
}
.brand {
  font-family:"Fraunces", serif; font-weight:900; font-size:19px; letter-spacing:.01em;
  display:flex; align-items:center; gap:11px; white-space:nowrap;
}
.brand em { font-style:italic; font-weight:400; color:var(--ink-2); font-size:18px; }
.brand .mark {
  width:13px; height:13px; border-radius:3px; transform:rotate(45deg);
  background:conic-gradient(from 45deg, var(--r), var(--w), var(--c), var(--d), var(--r));
  box-shadow:0 0 0 3px #fff inset;
}
.picker { position:relative; margin-left:6px; flex:0 0 300px; }
.picker input {
  width:100%; padding:9px 13px; border:1px solid var(--hair); border-radius:9px;
  background:#fff; font:13px/1 "IBM Plex Mono", monospace; color:var(--ink);
}
.picker input:focus { outline:none; border-color:var(--w); box-shadow:0 0 0 3px rgba(31,111,143,.12); }
.userdrop {
  position:absolute; top:42px; left:0; right:0; max-height:60vh; overflow:auto; z-index:50;
  background:#fff; border:1px solid var(--hair); border-radius:11px; box-shadow:var(--shadow); padding:5px;
}
.userdrop .u {
  display:flex; justify-content:space-between; gap:10px; padding:8px 11px; border-radius:7px; cursor:pointer;
}
.userdrop .u:hover, .userdrop .u.active { background:var(--panel-2); }
.userdrop .u .nm { font-weight:600; }
.userdrop .u .lg2 { font:11px/1.4 "IBM Plex Mono",monospace; color:var(--muted); }
.stamp { margin-left:auto; font:11px/1.3 "IBM Plex Mono",monospace; color:var(--muted); text-align:right; }

/* ---------- readout strip (the dash) ---------- */
.readout {
  display:grid; grid-template-columns:1.6fr repeat(5, 1fr); gap:1px;
  background:var(--hair); border-bottom:1px solid var(--hair);
}
.tile { background:var(--panel); padding:16px 20px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.tile.who { background:linear-gradient(180deg,#fbf7ee,#f4efe3); }
.tile .who-nm { font-family:"Fraunces",serif; font-weight:600; font-size:22px; line-height:1.05; }
.tile .who-sub { font:11px/1.4 "IBM Plex Mono",monospace; color:var(--muted); margin-top:2px; }
.tile .who-tags { margin-top:7px; display:flex; flex-wrap:wrap; gap:5px; }
.tile .k { font:10px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tile .v { font-family:"Fraunces",serif; font-weight:900; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; }
.tile .vsub { font:10px/1 "IBM Plex Mono",monospace; color:var(--muted); }
.tile.read .v  { color:var(--r); }
.tile.write .v { color:var(--w); }
.tile.create .v{ color:var(--c); }
.tile.delete   { background:linear-gradient(180deg,#fbeee9,#f7e6df); }
.tile.delete .v{ color:var(--d); }
.tile.delete .k{ color:var(--d); }
.tag {
  font:10px/1 "IBM Plex Mono",monospace; padding:4px 7px; border-radius:5px;
  background:var(--panel-2); border:1px solid var(--hair); color:var(--ink-2); letter-spacing:.02em;
}
.tag.admin { background:#f7e6df; border-color:#e9c9b8; color:var(--d); font-weight:600; }

/* ---------- controls ---------- */
.controls { display:flex; align-items:center; gap:14px; padding:11px 26px; border-bottom:1px solid var(--hair); position:sticky; top:57px; background:var(--paper); z-index:30; }
.controls input {
  width:240px; padding:8px 12px; border:1px solid var(--hair); border-radius:8px;
  background:#fff; font:12px/1 "IBM Plex Mono",monospace;
}
.controls input:focus { outline:none; border-color:var(--w); }
.chips { display:flex; gap:6px; }
.chip {
  font:11px/1 "IBM Plex Sans",sans-serif; font-weight:500; padding:7px 12px; border-radius:20px;
  border:1px solid var(--hair); background:#fff; color:var(--ink-2); cursor:pointer;
}
.chip.on { background:var(--ink); color:#fbf9f3; border-color:var(--ink); }
.chip-d.on { background:var(--d); border-color:var(--d); }
.spacer { flex:1; }
.legend { display:flex; align-items:center; gap:5px; }
.legend .lg { width:18px; height:18px; border-radius:4px; display:grid; place-items:center; font:11px/1 "IBM Plex Mono",monospace; font-weight:600; color:#fff; }
.legend .lg.r{ background:var(--r);} .legend .lg.w{ background:var(--w);} .legend .lg.c{ background:var(--c);} .legend .lg.d{ background:var(--d);}
.legend-txt { font:10px/1 "IBM Plex Mono",monospace; color:var(--muted); margin-left:4px; }
.ghost { font:11px/1 "IBM Plex Sans",sans-serif; padding:7px 12px; border:1px solid var(--hair); border-radius:8px; background:#fff; color:var(--ink-2); cursor:pointer; }
.ghost:hover { border-color:var(--ink-2); }

/* ---------- board ---------- */
.board { padding:18px 26px 80px; }
.empty { color:var(--muted); padding:60px 0; text-align:center; font:14px/1.6 "IBM Plex Mono",monospace; }
.mod { border:1px solid var(--hair); border-radius:12px; margin-bottom:10px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); animation:rise .35s both; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.mod-head {
  display:grid; grid-template-columns:18px 1fr auto auto; align-items:center; gap:14px;
  padding:13px 16px; cursor:pointer; user-select:none;
}
.mod-head:hover { background:var(--panel-2); }
.mod-rail { width:4px; height:30px; border-radius:3px; background:var(--hair); }
.mod.has-d .mod-rail { background:var(--d); }
.mod-title { font-family:"Fraunces",serif; font-weight:600; font-size:17px; display:flex; align-items:baseline; gap:10px; min-width:0; }
.mod-title .cnt { font:11px/1 "IBM Plex Mono",monospace; color:var(--muted); font-weight:400; }
.mod-roll { display:flex; gap:6px; font:11px/1 "IBM Plex Mono",monospace; }
.mod-roll b { display:inline-flex; gap:4px; align-items:center; padding:4px 7px; border-radius:6px; background:var(--panel-2); border:1px solid var(--hair-2); font-weight:500; color:var(--ink-2); }
.mod-roll b i { font-style:normal; width:14px; height:14px; border-radius:3px; display:grid; place-items:center; color:#fff; font-size:9px; font-weight:600; }
.mod-roll b.r i{ background:var(--r);} .mod-roll b.w i{ background:var(--w);} .mod-roll b.c i{ background:var(--c);} .mod-roll b.d i{ background:var(--d);}
.mod-roll b.zero { opacity:.32; }
.chev { width:18px; height:18px; color:var(--muted); transition:transform .2s; }
.mod.open .chev { transform:rotate(90deg); }

.mod-body { display:none; border-top:1px solid var(--hair-2); }
.mod.open .mod-body { display:block; }
.row {
  display:grid; grid-template-columns:1fr 124px; align-items:center; gap:14px;
  padding:8px 16px 8px 32px; border-top:1px solid var(--hair-2);
}
.row:first-child { border-top:none; }
.row:hover { background:var(--panel-2); }
.row .nm { font:12.5px/1.3 "IBM Plex Mono",monospace; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .tech { color:var(--muted); font-size:11px; }
.cells { display:grid; grid-template-columns:repeat(4,26px); gap:5px; }
.cell {
  width:26px; height:24px; border-radius:5px; display:grid; place-items:center;
  font:11px/1 "IBM Plex Mono",monospace; font-weight:600;
  border:1px solid var(--hair); color:var(--muted); background:#fff;
}
.cell.on.r { color:#fff; background:var(--r); border-color:var(--r); }
.cell.on.w { color:#fff; background:var(--w); border-color:var(--w); }
.cell.on.c { color:#fff; background:var(--c); border-color:var(--c); }
.cell.on.d { color:#fff; background:var(--d); border-color:var(--d); }
.cell.off { background:repeating-linear-gradient(45deg,#fff,#fff 4px,#f4f0e6 4px,#f4f0e6 5px); color:#cabfa9; }

@media (max-width:880px) {
  .readout { grid-template-columns:repeat(3,1fr); }
  .tile.who { grid-column:1 / -1; }
  .controls { flex-wrap:wrap; }
  .legend { display:none; }
  .picker { flex-basis:200px; }
}