/* AGRIPPARIUM · cockpit · split.css
   amber-on-obsidian, same lab the rest of the work lives in.
   Uncle wanted one stylesheet "to keep it simple." It IS one stylesheet,
   Uncle. You were accidentally right. Don't let it go to your head. */

:root{
  --bg:        #0b0a08;   /* obsidian */
  --bg-2:      #141109;   /* panel */
  --bg-3:      #1c1710;   /* raised */
  --line:      #2a2114;   /* hairline */
  --amber:     #e8a23d;   /* primary */
  --amber-dim: #9a6f2a;
  --ink:       #e6ddca;   /* body text */
  --ink-dim:   #8a8068;
  --ok:        #6fcf76;
  --run:       #e8c23d;
  --warn:      #e87d3d;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", system-ui, sans-serif;
  --tab-h: 30px;
  --bar-h: 38px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:
    radial-gradient(120% 80% at 50% -10%, #161009 0%, var(--bg) 55%) fixed,
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;                 /* the panes scroll, not the page */
  -webkit-font-smoothing:antialiased;
}

/* faint scanline texture — cheap, no image, respects reduced-motion below */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(232,162,61,.025) 0 1px, transparent 1px 3px);
  opacity:.5;
}

/* ---- top bar ---- */
.bar{
  position:relative; z-index:2;
  height:var(--bar-h); display:flex; align-items:center; gap:18px;
  padding:0 16px; background:var(--bg-2); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
}
.brand{ color:var(--amber); font-weight:700; }
.brand .dot{ color:var(--amber-dim); margin:0 4px; }
.refrain{ color:var(--ink-dim); }
.refrain b{ color:var(--amber); font-weight:700; }
.clock{ margin-left:auto; color:var(--ink-dim); }

/* ---- the split grid ---- */
.split{
  position:relative; z-index:1;
  height:calc(100% - var(--bar-h));
  display:grid;
  grid-template-rows: var(--top) 8px minmax(0,1fr);  /* top / divider / bottom */
}
.split.dragging{ cursor:row-resize; user-select:none; }
.split.dragging .screen{ pointer-events:none; }   /* iframe can't steal the drag */

.pane{ position:relative; min-height:0; display:flex; flex-direction:column;
  background:var(--bg-2); overflow:hidden; }

/* pane tab strip */
.pane-tab{
  height:var(--tab-h); flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:0 12px; background:var(--bg-3); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-dim);
}
.pane-tab .tab-label{ color:var(--ink); }
.tab-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.tab-dot.ok{ background:var(--ok); box-shadow:0 0 7px var(--ok); }
.tab-dot.run{ background:var(--run); box-shadow:0 0 7px var(--run); animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }
.tab-spacer{ flex:1; }
.tab-hint{ color:var(--amber-dim); }
kbd{ font-family:var(--mono); background:#000; border:1px solid var(--line);
  border-radius:3px; padding:0 5px; color:var(--amber); font-size:10px; }

/* ---- TOP: device stage ---- */
.device-stage{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:14px; overflow:auto;
}
.phone{
  --w:300px; --h:600px;
  width:var(--w); height:var(--h); max-height:100%;
  background:#000; border:2px solid #2c2418; border-radius:30px;
  box-shadow:0 0 0 2px #0d0a06, 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px #1a150d;
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  transition:width .25s ease, height .25s ease;
}
.phone.land{ --w:600px; --h:300px; }   /* `rotate` swaps these */
.phone-notch{ height:18px; display:flex; align-items:center; justify-content:center; }
.phone-notch .cam{ width:36px; height:5px; border-radius:4px; background:#1a150d; }
.phone-status{
  height:16px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; font-family:var(--mono); font-size:9px; color:var(--ink-dim); letter-spacing:.05em;
}
.phone-status .status-right{ display:flex; gap:6px; align-items:center; }
.phone-status .sig{ letter-spacing:-2px; color:var(--ink); }
.phone-screen{ flex:1; min-height:0; position:relative; background:#0e0c08; }
.screen{ width:100%; height:100%; border:0; display:block; background:#0e0c08; }
.screen-veil{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(11,10,8,.86); backdrop-filter:blur(1px);
  font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:.1em;
  text-align:center; padding:16px;
}
.phone-nav{
  height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-around;
  background:#0a0806; border-top:1px solid #1a150d;
}
.nav-btn{ color:var(--ink-dim); font-size:14px; cursor:pointer; width:48px; text-align:center;
  user-select:none; transition:color .15s; }
.nav-btn:hover{ color:var(--amber); }
.nav-btn.home{ font-size:10px; }

/* ---- DIVIDER ---- */
.divider{
  background:var(--bg-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  cursor:row-resize; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:3; outline:none;
}
.divider:hover, .divider:focus-visible{ background:#241c11; }
.divider:focus-visible{ box-shadow:0 0 0 2px var(--amber-dim) inset; }
.divider .grip{ width:46px; height:3px; border-radius:2px; background:var(--amber-dim); opacity:.6; }
.divider:hover .grip, .divider:focus-visible .grip{ opacity:1; background:var(--amber); }

/* ---- BOTTOM: terminal ---- */
.pane-bottom{ background:#080705; }
.term{
  flex:1; min-height:0; overflow-y:auto; padding:10px 12px;
  font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
.term .line{ display:block; }
.term .sys{ color:var(--ink-dim); }
.term .amber{ color:var(--amber); }
.term .ok{ color:var(--ok); }
.term .warn{ color:var(--warn); }
.term .echo .pr{ color:var(--amber-dim); }
.term .echo .ct{ color:var(--ink); }
.term a{ color:var(--amber); }

.term-input-row{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--line); background:#0a0806; padding:8px 12px;
}
.prompt{ font-family:var(--mono); font-size:12.5px; color:var(--amber); flex:0 0 auto; }
.cmd{
  flex:1; background:transparent; border:0; outline:none;
  font-family:var(--mono); font-size:12.5px; color:var(--ink); caret-color:var(--amber);
}

/* respect people who don't want motion. the pulse + transitions stand down. */
@media (prefers-reduced-motion: reduce){
  .tab-dot.run{ animation:none; }
  .phone{ transition:none; }
  body::before{ display:none; }
}

/* narrow screens: shrink the phone so it doesn't shove the stage */
@media (max-width:560px){
  .phone{ --w:230px; --h:470px; }
  .phone.land{ --w:460px; --h:230px; }
  .refrain{ display:none; }   /* Dad: "too much writing up there." fair. */
}