/* =====================================================================
   terminal.css — the workstation on your desk.

   Sitting down wakes a computer. The screen is an operating system: a
   wallpaper with icons, a taskbar welded to the bottom edge, a start
   menu, and windows you drag, stack, resize and close.

   THE ONE RULE THAT MAKES IT READ AS A DESKTOP: every surface is beveled
   with two tones, one pixel light on the top-left and one dark on the
   bottom-right, inverted the moment it is pressed or recessed. That is
   the entire signature, and it is why there is no border-radius, no blur
   and no soft shadow anywhere in this file. A rounded corner would undo
   the whole thing.

   AND THE PALETTE DOES NOT LEAVE THE BUILDING. The chrome is old
   workstation grey, but every window's client area is the same near
   black with one lit accent the rest of the site uses, because the
   client area is where the eye actually spends its time. Grey frame,
   black screen, lime figures, which is what trading software has always
   looked like.

   TYPE, and this is the one place the house rule inverts: the CHROME is
   set in a UI sans, because a desktop set in a monospace does not read
   as a desktop, it reads as a terminal emulator. Mono is for DATA, and
   all of the data is inside the windows.
   ===================================================================== */

:root {
  /* the workstation */
  --os-face: #c4c5bd;
  --os-lt:   #ffffff;
  --os-hi:   #e6e7e0;
  --os-dk:   #85867e;
  --os-sh:   #3d3e39;
  --os-ink:  #14150f;
  --os-dim:  #55564f;

  /* the title bar. Loxley Partners's colour lives in the chrome. */
  --ttl-a1: #101b0b;
  --ttl-a2: #33501c;
  --ttl-i1: #7c7d76;
  --ttl-i2: #a3a49c;

  /* the screen inside the frame */
  --os-crt: #080b09;

  --os-ui: -apple-system, "Segoe UI", Tahoma, "MS Sans Serif", system-ui, sans-serif;
}

#terminal[hidden] { display: none; }

#terminal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(6px, 2.4vw, 34px);
  background: radial-gradient(120% 90% at 50% 45%, rgba(6,9,7,.76), rgba(3,5,4,.96));
  opacity: 0; transition: opacity .22s ease;
}
#terminal.in { opacity: 1; }

/* ------------------------------------------------------------------ *
   the monitor
 * ------------------------------------------------------------------ */

/* A bezel, not a card. The screen is inset into a housing, which is why
   the outer edge is raised and the inner edge is sunk. */
.term-frame {
  position: relative;
  width: min(1240px, 100%);
  height: min(770px, 100%);
  display: flex; flex-direction: column;
  padding: 7px;
  background: #b9bab2;
  border: 1px solid;
  border-color: #e9eae3 #2b2c28 #2b2c28 #e9eae3;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), inset 1px 1px 0 #ffffff, inset -1px -1px 0 #7f8079;
  transform: scale(.99); transition: transform .22s ease;
  overflow: hidden;
}
#terminal.in .term-frame { transform: scale(1); }

/* the glass. scanlines and a vignette over the whole screen; they belong
   to the tube, so they sit above the OS and take no clicks. */
.term-frame::after {
  content: ""; position: absolute; inset: 7px; z-index: 40; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 44%, transparent 52%, rgba(0,0,0,.30) 84%, rgba(0,0,0,.52) 100%);
}

/* The screen inside the bezel. It is the positioning context for the
   self test, and it has to be a flex column or the OS inside it collapses
   to the height of its own taskbar - which is exactly what it did. */
.term-screen {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
#os { flex: 1 1 auto; min-height: 0; min-width: 0; }

/* ------------------------------------------------------------------ *
   the desktop
 * ------------------------------------------------------------------ */

.os {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  font: 12px/1.35 var(--os-ui);
  color: var(--os-ink);
  border: 1px solid;
  border-color: #6f7069 #e9eae3 #e9eae3 #6f7069;
  overflow: hidden;
}

.os-desk {
  position: relative; flex: 1 1 auto; min-height: 0;
  /* the wallpaper: a dark room with Loxley Partners's stripe motif, drawn in
     gradients so it costs nothing and scales to any tube. */
  background:
    repeating-linear-gradient(-45deg, rgba(205,183,136,.020) 0 2px, transparent 2px 9px),
    radial-gradient(120% 90% at 78% 12%, rgba(205,183,136,.055), transparent 60%),
    linear-gradient(#0c110d, #070a08);
  overflow: hidden;
}

/* ---- desktop icons ------------------------------------------------- */

.os-icons {
  list-style: none; margin: 0; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  position: absolute; inset: 0 auto 0 0; width: 96px; z-index: 1;
}
.os-icon button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 84px; padding: 6px 2px 5px;
  background: none; border: 1px dotted transparent; cursor: pointer;
  font: 11px var(--os-ui); color: #e8ece6;
}
.os-icon .ic {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: linear-gradient(#1d2a18, #0f150d);
  border: 1px solid; border-color: #47552f #050704 #050704 #47552f;
  color: #cfe0b6;
}
.os-icon .ic svg { width: 17px; height: 17px; fill: currentColor; }
.os-icon .ic .hi { fill: var(--accent); }
.os-icon .il {
  padding: 1px 4px; text-align: center; line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.os-icon button:hover .il { background: rgba(205,183,136,.16); }
.os-icon button:focus-visible { outline: 0; border-color: rgba(255,255,255,.7); }
.os-icon button:focus-visible .il { background: var(--accent); color: #10140a; text-shadow: none; }

/* ------------------------------------------------------------------ *
   windows
 * ------------------------------------------------------------------ */

.win {
  position: absolute; z-index: 10;
  display: flex; flex-direction: column;
  min-width: 260px; min-height: 150px;
  background: var(--os-face);
  padding: 2px;
  border: 1px solid;
  border-color: var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);
  box-shadow: inset 1px 1px 0 var(--os-hi), inset -1px -1px 0 var(--os-dk);
}
.win[hidden] { display: none; }
.win.dragging { will-change: left, top; }

.win-bar {
  flex: 0 0 auto; height: 21px;
  display: flex; align-items: center; gap: 5px; padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--ttl-i1), var(--ttl-i2));
  color: #e7e8e1; cursor: default; user-select: none; touch-action: none;
}
.win.on .win-bar {
  background: linear-gradient(90deg, var(--ttl-a1), var(--ttl-a2));
  color: #fff;
}
.win-ic { display: grid; place-items: center; width: 14px; height: 14px; color: #cfe0b6; }
.win-ic svg { width: 13px; height: 13px; fill: currentColor; }
.win-ic .hi { fill: var(--accent); }
.win.on .win-ic { color: var(--accent); }
.win-title {
  flex: 1 1 auto; min-width: 0; font: 700 11.5px var(--os-ui);
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-btns { display: flex; gap: 2px; flex: 0 0 auto; }
.wb {
  width: 17px; height: 15px; display: grid; place-items: center;
  background: var(--os-face); cursor: pointer;
  border: 1px solid;
  border-color: var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);
  box-shadow: inset 1px 1px 0 var(--os-hi), inset -1px -1px 0 var(--os-dk);
}
.wb:active {
  border-color: var(--os-dk) var(--os-lt) var(--os-lt) var(--os-dk);
  box-shadow: inset 1px 1px 0 var(--os-sh);
}
.wb s { display: block; background: var(--os-ink); text-decoration: none; }
.wb[data-act="min"] s { width: 7px; height: 2px; margin-top: 6px; }
.wb[data-act="max"] s {
  width: 8px; height: 7px; background: none;
  border: 1px solid var(--os-ink); border-top-width: 2px;
}
/* an X drawn in two gradients, so no glyph and no font dependency */
.wb-x s {
  width: 7px; height: 7px; background: none;
  background-image:
    linear-gradient(45deg, transparent 44%, var(--os-ink) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--os-ink) 44% 56%, transparent 56%);
}

.win-menu {
  flex: 0 0 auto; display: flex; gap: 12px; padding: 2px 6px 3px;
  font: 11px var(--os-ui); color: var(--os-dim);
}
.win-menu span { padding: 0 2px; }
.win-menu span:first-letter { text-decoration: underline; }

/* THE CLIENT AREA IS THE SCREEN. Sunk into the window, near black, and
   everything inside it is the site's own palette and the mono face. */
.win-body {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 12px 14px 14px;
  background: var(--os-crt);
  color: var(--ink);
  border: 1px solid;
  border-color: var(--os-dk) var(--os-lt) var(--os-lt) var(--os-dk);
  box-shadow: inset 1px 1px 0 var(--os-sh);
  scrollbar-width: thin; scrollbar-color: #6d7a5a #a9aaa2;
}
.win-body::-webkit-scrollbar { width: 15px; height: 15px; }
.win-body::-webkit-scrollbar-track { background: #a9aaa2; }
.win-body::-webkit-scrollbar-thumb {
  background: var(--os-face);
  border: 1px solid;
  border-color: var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);
}

.win-status {
  flex: 0 0 auto; display: flex; gap: 2px; padding: 2px 0 0;
  font: 11px var(--os-ui); color: var(--os-dim);
}
.win-status span {
  flex: 1 1 0; min-width: 0; padding: 1px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid;
  border-color: var(--os-dk) var(--os-lt) var(--os-lt) var(--os-dk);
}
/* the resize grip lives in this corner, so the last field gives it a
   lane rather than being drawn underneath it. */
.win-status span:last-child { flex: 0 0 auto; margin-right: 15px; }

.win-grip {
  position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px;
  cursor: nwse-resize; z-index: 2; touch-action: none;
  background:
    linear-gradient(135deg, transparent 46%, var(--os-lt) 46% 54%, transparent 54%),
    linear-gradient(135deg, transparent 66%, var(--os-lt) 66% 74%, transparent 74%);
}
.win.maxed .win-grip { display: none; }

/* ------------------------------------------------------------------ *
   the taskbar
 * ------------------------------------------------------------------ */

.os-bar {
  flex: 0 0 auto; height: 34px; z-index: 30;
  display: flex; align-items: center; gap: 4px; padding: 3px 4px;
  background: var(--os-face);
  border-top: 1px solid var(--os-lt);
  box-shadow: 0 -1px 0 var(--os-sh);
}

.os-start {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px 0 7px; cursor: pointer;
  font: 700 12px var(--os-ui); color: var(--os-ink);
  background: var(--os-face);
  border: 1px solid;
  border-color: var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);
  box-shadow: inset 1px 1px 0 var(--os-hi), inset -1px -1px 0 var(--os-dk);
}
.os-start.on, .os-start:active {
  border-color: var(--os-dk) var(--os-lt) var(--os-lt) var(--os-dk);
  box-shadow: inset 1px 1px 0 var(--os-sh);
}
/* the mark: the same three-bar stack the HUD card uses, in CSS */
.os-mark {
  width: 14px; height: 14px; flex: 0 0 auto;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 4px no-repeat,
    linear-gradient(#5d7a1f, #5d7a1f) 0 5px / 70% 4px no-repeat,
    linear-gradient(#33501c, #33501c) 0 10px / 40% 4px no-repeat;
}

.os-tasks {
  flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; overflow: hidden;
  padding-left: 4px; border-left: 1px solid var(--os-dk);
}
.os-task {
  flex: 0 1 168px; min-width: 44px; height: 26px;
  display: flex; align-items: center; gap: 5px; padding: 0 7px; cursor: pointer;
  font: 11.5px var(--os-ui); color: var(--os-ink);
  background: var(--os-face);
  border: 1px solid;
  border-color: var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);
  box-shadow: inset 1px 1px 0 var(--os-hi), inset -1px -1px 0 var(--os-dk);
}
.os-task span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-task .ic { flex: 0 0 auto; width: 13px; height: 13px; color: #2c3a1c; }
.os-task .ic svg { width: 13px; height: 13px; fill: currentColor; }
.os-task .ic .hi { fill: #5d7a1f; }
.os-task.on {
  font-weight: 700;
  border-color: var(--os-dk) var(--os-lt) var(--os-lt) var(--os-dk);
  box-shadow: inset 1px 1px 0 var(--os-sh);
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    var(--os-face);
}

.os-tray {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 8px;
  border: 1px solid;
  border-color: var(--os-dk) var(--os-lt) var(--os-lt) var(--os-dk);
}
.tray-cell {
  display: flex; align-items: baseline; gap: 5px; white-space: nowrap;
  font: 11px var(--os-ui);
}
.tray-cell b { font-weight: 400; color: var(--os-dim); }
.tray-cell i {
  font-style: normal; color: var(--os-ink);
  font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 10.5px;
}
.tray-clock i { min-width: 7ch; text-align: right; }
#term-src { text-transform: lowercase; }
#term-src.s-live    { color: #1d5b16; font-weight: 700; }
#term-src.s-demo,
#term-src.s-fixture { color: #8a4a06; font-weight: 700; }
#term-src.s-stale   { color: #8f1c0c; font-weight: 700; }
#term-src.s-off     { color: var(--os-dim); }

/* ------------------------------------------------------------------ *
   the start menu
 * ------------------------------------------------------------------ */

.os-menu {
  position: absolute; left: 4px; bottom: 34px; z-index: 35;
  display: flex; min-width: 262px;
  background: var(--os-face); padding: 3px;
  border: 1px solid;
  border-color: var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);
  box-shadow: inset 1px 1px 0 var(--os-hi), inset -1px -1px 0 var(--os-dk),
              3px 3px 0 rgba(0,0,0,.35);
}
.os-menu[hidden] { display: none; }
.menu-spine {
  flex: 0 0 26px; display: grid; place-items: center;
  background: linear-gradient(var(--ttl-a2), var(--ttl-a1));
}
.menu-spine span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 13px var(--os-ui); letter-spacing: .12em;
  color: var(--accent); padding: 8px 0;
}
.menu-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.menu-list button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 14px 6px 8px; cursor: pointer;
  background: none; border: 0; text-align: left;
  font: 12px var(--os-ui); color: var(--os-ink);
}
.menu-list button em {
  font-style: normal; margin-left: auto; padding-left: 12px;
  font-size: 10.5px; color: var(--os-dim);
}
.menu-list button:hover,
.menu-list button:focus-visible { outline: 0; background: var(--ttl-a2); color: #fff; }
.menu-list button:hover em, .menu-list button:focus-visible em { color: rgba(255,255,255,.75); }
.menu-list .mi { width: 18px; height: 18px; display: grid; place-items: center; color: #2c3a1c; }
.menu-list .mi svg { width: 15px; height: 15px; fill: currentColor; }
.menu-list .mi .hi { fill: #5d7a1f; }
.menu-list button:hover .mi, .menu-list button:focus-visible .mi { color: var(--accent); }
.menu-rule { height: 1px; margin: 3px 6px; background: var(--os-dk); box-shadow: 0 1px 0 var(--os-lt); }

/* ------------------------------------------------------------------ *
   the console
 * ------------------------------------------------------------------ */

.con { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.con-log {
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0;
  font: 11.5px/1.55 var(--mono); color: var(--dim);
  white-space: pre-wrap; word-break: break-word;
}
.con-log b { font-weight: 400; color: var(--ink); }
.con-log .ok   { color: var(--accent); }
.con-log .warn { color: var(--warn); }
.con-row { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding-top: 8px; }
.con-caret { font: 12px var(--mono); color: var(--accent); flex: 0 0 auto; }
#term-addr {
  flex: 1 1 auto; min-width: 0; font: 11.5px var(--mono); color: var(--ink);
  background: rgba(255,255,255,.05); padding: 5px 7px;
  border: 1px solid; border-color: #2c3128 #4b5245 #4b5245 #2c3128;
}
#term-addr::placeholder { color: var(--faint); }
#term-addr:focus { outline: 0; border-color: rgba(205,183,136,.55); }
#term-load {
  flex: 0 0 auto; cursor: pointer;
  font: 11px var(--os-ui); color: var(--os-ink); padding: 5px 12px;
  background: var(--os-face);
  border: 1px solid;
  border-color: var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);
  box-shadow: inset 1px 1px 0 var(--os-hi), inset -1px -1px 0 var(--os-dk);
}
#term-load:active {
  border-color: var(--os-dk) var(--os-lt) var(--os-lt) var(--os-dk);
  box-shadow: inset 1px 1px 0 var(--os-sh);
}

/* ------------------------------------------------------------------ *
   the power-on self test
 * ------------------------------------------------------------------ */

/* Not a splash. The machine counts its own hardware, says what it found,
   and hands over. It covers the desktop while it types and then clears,
   which is what a boot does. */
.term-boot {
  position: absolute; inset: 0; z-index: 45; margin: 0;
  padding: 20px 24px;
  background: #050704;
  font: 12.5px/1.62 var(--mono);
  color: #cfe0b6;
  white-space: pre-wrap;
  transition: opacity .34s ease, visibility 0s .34s;
}
.term-boot.done { opacity: 0; visibility: hidden; }
.term-boot::after {
  content: "\2588"; margin-left: 1px; color: var(--accent);
  animation: tcaret 1.02s steps(1) infinite;
}
.term-boot.done::after { animation: none; }
@keyframes tcaret { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }

/* ==================================================================== *
   THE CLIENT AREAS. Everything below draws INSIDE a window, in the
   site's own palette and the mono face. It is the same data design the
   panes always had; only the frame around them changed.
 * ==================================================================== */

.th {
  margin: 0 0 10px; font: 9.5px var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.th2 { margin-top: 16px; }

.thead {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 11px;
}
.teye {
  font: 9.5px var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.tsub {
  margin-left: auto; font: 9.5px var(--mono); letter-spacing: .1em;
  color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.tvoid { padding: 22px 0 0; max-width: 44ch; }
.tvh {
  display: block; font: 20px var(--mono); color: rgba(238,243,242,.74);
  letter-spacing: -.01em;
}
.tvoid .tsay { margin-top: 8px; }

/* ---- position ------------------------------------------------------ */

.tw {
  display: grid; align-content: start;
  gap: 18px 26px;
  grid-template-columns: minmax(0, 1.1fr) minmax(210px, .9fr);
}
.tmain, .tlad { min-width: 0; }

.tbigrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tbig {
  margin: 0; font-family: var(--mono); font-weight: 400;
  font-size: clamp(25px, 4.6vw, 38px); line-height: 1.05;
  letter-spacing: -.015em; color: var(--accent);
  text-shadow: 0 0 26px rgba(205,183,136,.28);
}
.tbig.off { color: rgba(238, 243, 242, .74); text-shadow: none; }
.tseat {
  margin-left: auto; font: 10px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums;
}

.twal {
  display: inline-block; margin-top: 7px;
  font: 11px var(--mono); letter-spacing: .02em; color: var(--dim);
  word-break: break-all;
}
.tkol {
  margin-left: 8px; font: 10px var(--mono); color: var(--accent);
  border: 1px solid rgba(205,183,136,.28); padding: 1px 6px; white-space: nowrap;
}

.tsay { margin: 10px 0 0; max-width: 46ch; font: 14px/1.5 var(--serif); color: var(--dim); }
.tsay.small { font-size: 12.5px; margin-top: 12px; color: var(--faint); }

.tprog { margin-top: 14px; }
.tprog-l {
  display: flex; align-items: baseline; gap: 10px;
  font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.tpct { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

.tbar {
  margin: 7px 0 12px; height: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid; border-color: #2c3128 #4b5245 #4b5245 #2c3128;
  overflow: hidden;
}
/* a progress bar drawn as blocks, the way the era drew them */
.tbar i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 9px);
  transition: width .5s ease;
}

.gk {
  display: block; font: 9.5px var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.twrow {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; border-top: 1px solid var(--line);
}
.twrow:first-of-type { border-top: 0; }
.twrow b {
  font: 17px var(--mono); font-weight: 400; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  min-width: 5.5ch; text-align: right;
}
.twrow i {
  font-style: normal; margin-left: auto; font: 10px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}

.cells {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  column-gap: 18px;
}
.cell { padding: 7px 0 8px; border-top: 1px solid var(--line); min-width: 0; }
.ck {
  display: block; font: 9px var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.cv {
  display: block; margin-top: 3px; font: 13px var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv.hot { color: var(--accent); }

/* ---- the ladder ---------------------------------------------------- */

.ladh, .rung {
  display: grid; align-items: center;
  grid-template-columns: 18px minmax(0, 1fr) minmax(30px, auto) minmax(28px, auto);
  gap: 0 9px;
}
.ladh {
  font: 9px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); padding-bottom: 5px;
}
.ladh .lw, .ladh .ln { text-align: right; }
.lad { list-style: none; margin: 0; padding: 0; }
.rung { position: relative; padding: 7px 0; }
.rung::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.rung:first-child::before { top: 50%; }
.rung:last-child::before  { bottom: 50%; }
.nod {
  position: relative; z-index: 1; justify-self: center;
  width: 5px; height: 5px; background: #0d110e; box-shadow: 0 0 0 1px var(--line);
}
.lt {
  font: 11px var(--mono); color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lw, .ln {
  font: 10px var(--mono); color: var(--faint);
  text-align: right; font-variant-numeric: tabular-nums;
}
.rung.done .nod { background: var(--dim); box-shadow: 0 0 0 1px var(--line); }
.rung.done .lt { color: var(--dim); }
.rung.nx .lt { color: var(--ink); }
.rung.nx .nod { box-shadow: 0 0 0 1px rgba(205,183,136,.45); }
.rung.me .nod {
  width: 9px; height: 9px; background: var(--accent);
  box-shadow: 0 0 0 1px rgba(205,183,136,.5), 0 0 14px rgba(205,183,136,.75);
}
.rung.me .lt { color: var(--accent); text-shadow: 0 0 14px rgba(205,183,136,.35); }
.rung.me .lw, .rung.me .ln { color: var(--ink); }
.lyou {
  margin-left: 7px; font: 8.5px var(--mono); font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: #10140a;
  background: var(--accent); padding: 1px 5px; vertical-align: 1px;
}
.tnote { margin: 12px 0 0; max-width: 46ch; font: 12.5px/1.5 var(--serif); color: var(--faint); }

/* ---- the seats around yours ---------------------------------------- */

.tnb { grid-column: 1 / -1; margin-top: 0; }
.nbl { list-style: none; margin: 0; padding: 0; }
.nb {
  display: grid; align-items: center;
  grid-template-columns: 3.5ch 3ch minmax(0, 1fr) auto;
  gap: 0 12px; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font: 11px var(--mono); font-variant-numeric: tabular-nums;
}
.nbs { color: var(--faint); text-align: right; }
.nba { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.nbh { color: var(--ink); text-align: right; }
.nb.nbme { background: rgba(205,183,136,.075); }
.nb.nbme .nba { color: var(--accent); }
.nbgap { margin: 7px 0 0; font: 12.5px/1.5 var(--serif); color: var(--faint); }

/* ---- book and payroll tables --------------------------------------- */

.btwrap { overflow-x: auto; }
.btab, .stab { border-collapse: collapse; font: 11px var(--mono); font-variant-numeric: tabular-nums; }
.btab { width: 100%; }
.stab { width: auto; min-width: 520px; max-width: 660px; }
.btab th, .stab th {
  position: sticky; top: -12px; z-index: 2;
  background: var(--os-crt);
  font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); text-align: left;
  padding: 0 10px 6px 0; border-bottom: 1px solid var(--line);
}
.btab td, .stab td {
  padding: 4px 10px 4px 0; border-bottom: 1px solid rgba(255,255,255,.055);
  color: var(--dim); white-space: nowrap;
}
.btab tr:hover td { background: rgba(205,183,136,.045); }

.bs { width: 3ch; color: var(--faint) !important; text-align: right; padding-right: 12px !important; }
.bk { width: 3ch; }
.ba { width: 40%; color: var(--ink) !important; }
.bt, .bp { text-align: right; }
.bp { color: var(--faint) !important; }

.rk {
  display: inline-block; min-width: 2ch; text-align: center;
  font: 9.5px var(--mono); letter-spacing: .06em; padding: 1px 3px;
  color: var(--accent); background: rgba(205,183,136,.10);
}
.rk.r-intern   { color: rgba(238,243,242,.34); background: rgba(255,255,255,.04); }
.rk.r-analyst  { color: rgba(205,183,136,.42); background: rgba(205,183,136,.05); }
.rk.r-assoc    { color: rgba(205,183,136,.56); background: rgba(205,183,136,.07); }
.rk.r-trader   { color: rgba(205,183,136,.70); background: rgba(205,183,136,.09); }
.rk.r-vp       { color: rgba(205,183,136,.82); background: rgba(205,183,136,.11); }
.rk.r-director { color: rgba(205,183,136,.92); background: rgba(205,183,136,.13); }
.rk.r-md       { color: var(--accent); background: rgba(205,183,136,.16); }
.rk.r-partner  { color: #10140a; background: var(--accent); box-shadow: 0 0 12px rgba(205,183,136,.5); }

.bkol { margin-left: 8px; font-size: 10px; color: var(--accent); opacity: .82; }

.bh { width: 24%; text-align: right; white-space: nowrap; }
.bh span { color: var(--ink); }
.trk {
  display: inline-block; vertical-align: middle;
  width: 62px; height: 9px; margin-left: 9px;
  background: rgba(255,255,255,.055);
  border: 1px solid; border-color: #2c3128 #4b5245 #4b5245 #2c3128;
  overflow: hidden;
}
.trk i { display: block; height: 100%; background: rgba(205,183,136,.40); }

.btab tr.bme td { background: rgba(205,183,136,.075); }
.btab tr.bme .ba { color: var(--accent) !important; }
.btab tr.bme:hover td { background: rgba(205,183,136,.10); }

/* ---- tape ---------------------------------------------------------- */

.tpl { list-style: none; margin: 0; padding: 0; }
.tp {
  display: grid; align-items: baseline;
  grid-template-columns: 3.5ch 9ch minmax(0, 1fr) auto;
  gap: 0 12px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font: 11px var(--mono);
}
.tpi { color: rgba(238,243,242,.28); font-variant-numeric: tabular-nums; }
.tpk { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tpt { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpa { color: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.tp.promoted .tpk, .tp.paid .tpk { color: var(--accent); }
.tp.promoted .tpt, .tp.paid .tpt { color: var(--ink); }
.tp.resigned .tpk { color: var(--bad); }
.tp.trade .tpk { color: rgba(238,243,242,.3); }
.tp.trade .tpt { color: var(--faint); }

/* ---- payroll ------------------------------------------------------- */

.ptl { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.ptk {
  font: 9.5px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}
.ptv {
  font: 38px var(--mono); line-height: 1.05; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  text-shadow: 0 0 26px rgba(205,183,136,.26);
}
.ptv em { font-style: normal; font-size: 15px; color: var(--dim); letter-spacing: .04em; }
.ptn { font: 12.5px/1.45 var(--serif); color: var(--faint); max-width: 62ch; margin-top: 3px; }

.sr { color: var(--ink) !important; }
.sn { text-align: right; width: 8ch; }
.sb { width: 1%; text-align: right; white-space: nowrap; }
.sb span { color: var(--ink); }
.sb .trk { width: 84px; }
.stab tr:first-child .sb .trk i { background: rgba(205,183,136,.55); }

.trules { list-style: none; margin: 12px 0 0; padding: 0; }
.trules li {
  display: grid; grid-template-columns: 3.5ch minmax(0, 1fr); gap: 0 12px;
  padding: 4px 0; border-top: 1px solid var(--line);
  font: 12px/1.4 var(--serif); color: var(--dim); max-width: 84ch;
}
.trules span { font: 9.5px var(--mono); letter-spacing: .12em; color: var(--faint); padding-top: 3px; }

/* ------------------------------------------------------------------ *
   the room behind, and the way in
 * ------------------------------------------------------------------ */

body.seated #nav, body.seated .you, body.seated .hint,
body.seated #stick, body.seated #jumpbtn { opacity: 0; pointer-events: none; transition: opacity .2s; }

#sithint[hidden] { display: none; }
#sithint {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  z-index: 21; font: 11px var(--mono); letter-spacing: .06em; color: var(--accent);
  background: var(--glass); border: 1px solid rgba(205,183,136,.34);
  border-radius: var(--r-ctl); padding: 7px 14px; backdrop-filter: blur(5px);
}

/* ------------------------------------------------------------------ *
   small screens
 * ------------------------------------------------------------------ */

/* A desktop with draggable windows is hostile on a phone, so it stops
   being one: every window goes full bleed and the taskbar is how you get
   between them, which is what a phone does anyway. The icons lie down
   across the top so the desktop is still a desktop. */
@media (max-width: 719px), (max-height: 460px) {
  .term-frame { padding: 4px; height: 100%; }
  .term-frame::after { inset: 4px; }
  .os-icons {
    inset: 0 0 auto 0; width: auto; flex-direction: row; gap: 0;
    padding: 5px 4px; overflow-x: auto;
    background: rgba(0,0,0,.34); border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .os-icon button { width: auto; flex-direction: row; gap: 6px; padding: 5px 8px; }
  .os-icon .ic { width: 20px; height: 20px; }
  .os-icon .ic svg { width: 12px; height: 12px; }
  .win { padding: 1px; }
  .win-menu { display: none; }
  .win-body { padding: 10px 11px 12px; }
  .win-status span:nth-child(2) { display: none; }
  .os-task { flex: 1 1 0; padding: 0 6px; }
  .os-task span:last-child { display: none; }
  .os-start span:last-child { display: none; }
  .os-start { padding: 0 8px; }
  .tray-cell:first-child { display: none; }
  .tw { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ptv { font-size: 30px; }
  .tp { grid-template-columns: 3.5ch minmax(0, 1fr) auto; }
  .tp .tpk { display: none; }
  .os-menu { left: 2px; right: 2px; min-width: 0; }
}

/* the measuring harness renders one pane with no desktop around it */
.tpane { padding: 14px 20px 20px; overflow: auto; }
.trail { display: none; }

@media (prefers-reduced-motion: reduce) {
  #terminal, .term-frame, .tbar i, .term-boot { transition: none; }
  .term-boot::after { animation: none; }
}

/* Machined housing, quiet phosphor, and a desktop with its own identity. */
.term-frame { background:#aeb0a7;padding:10px 10px 26px;border-radius:4px;box-shadow:0 25px 90px #000b,inset 0 2px 0 #edeee5,inset 0 -5px 0 #73776c; }
.term-frame::before { content:"F I R M   /   W O R K S T A T I O N                                         ●   11";position:absolute;bottom:7px;left:18px;right:18px;white-space:pre;font:8px var(--mono);color:#343a2d; }
.term-frame::after { inset:10px 10px 26px;opacity:.48; }
.os-desk { background:radial-gradient(ellipse at 85% 40%,#283226 0,transparent 65%),linear-gradient(145deg,#0e1916,#090e0c 75%); }
.os-signature { position:absolute;right:45px;bottom:46px;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;color:#a9bca0;opacity:.38; }
.os-wordmark { font:76px/.9 var(--serif);letter-spacing:-.06em;margin-bottom:18px; }
.os-signature>span:nth-child(2) { font:9px var(--mono);letter-spacing:.27em;border-top:1px solid #a9bca04d;padding-top:13px; }
.os-signature p { font:italic 13px var(--serif); }
.win { box-shadow:inset 1px 1px 0 var(--os-hi),inset -1px -1px 0 var(--os-dk),8px 10px 0 #0003; }
.win-bar { height:26px; }
.win-body { padding:16px 18px;background:linear-gradient(125deg,#101813,#090d0b 65%); }
.win-menu { align-items:center;gap:3px;padding:3px 5px; }
.win-menu button { color:#363a32;font:11px var(--os-ui);padding:2px 7px; }
.win-menu button:hover { background:#b0b5a6;color:#080d08; }
.win-appcode { margin-left:auto;font:8px var(--mono);letter-spacing:.08em;opacity:.7; }
.os-exit { flex-shrink:0;margin-left:4px;border:1px solid;border-color:var(--os-lt) var(--os-sh) var(--os-sh) var(--os-lt);padding:0 9px;font:11px var(--os-ui);color:var(--os-ink); }
.os-exit:hover { background:#dde0d4; }
.wb { width:21px;height:19px; }
.tbig { font-family:var(--serif);font-size:40px;letter-spacing:-.025em; }
.tbar { height:8px; }
.tbar i { background:var(--accent);box-shadow:0 0 16px #c6f13355; }
.rung { padding:8px 0; }.lt{font-size:11.5px;color:#a7b4a8}.tnote{color:#a0aba2}
.floor-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px; }
.floor-heading h2 { font:32px/1.1 var(--serif);font-weight:400;margin:8px 0 0;color:#e5ebd9; }
.floor-source { font:9px var(--mono);color:var(--warn);padding-top:4px; }
.floor-layout { display:grid;grid-template-columns:minmax(180px,.85fr) minmax(240px,1fr);gap:24px;padding-top:18px; }
.floor-plan { margin:0; }.floor-plan svg{width:100%;max-height:390px;display:block}
.map-shell { fill:#131e18;stroke:#95a58c;stroke-width:1.5; }.map-corridor{fill:#a4b99212}
.map-zone{fill:#82967a08;stroke:#a9ba961c;stroke-width:1}.map-wall{fill:none;stroke:#7e9272;stroke-width:1}
.map-seat{fill:#111a15;stroke:#819075;stroke-width:.6}.map-seat.filled{fill:#aabe92;stroke:#aabe92}.map-seat.selected{fill:var(--accent);stroke:white;stroke-width:2}
.map-entry{fill:none;stroke:var(--accent);stroke-width:2}.floor-plan text{fill:#afbe9f;font:8px monospace;letter-spacing:2px}
.floor-plan figcaption{display:flex;justify-content:center;align-items:center;gap:6px;font:8px var(--mono);color:var(--dim);margin-top:8px;flex-wrap:wrap}
.floor-plan figcaption i{width:6px;height:6px;background:#aabe92}.floor-plan figcaption .empty{background:none;border:1px solid #819075}.floor-plan figcaption .chosen{background:var(--accent)}
.floor-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font:8px var(--mono);color:var(--faint)}
.floor-controls button{font:10px var(--mono);padding:5px 0;color:var(--ink)}
.floor-zone{display:flex;gap:12px;padding:12px 0;width:100%;text-align:left;border-bottom:1px solid var(--line);align-items:flex-start}
.floor-zone>span{font:10px var(--mono);color:var(--accent);padding-top:3px}.floor-zone b{font:16px var(--serif);font-weight:400;color:var(--ink)}
.floor-zone p{font:12px/1.4 var(--serif);margin:4px 0 0;color:var(--dim)}.floor-zone i{margin-left:auto;font-style:normal;color:var(--faint)}
.floor-zone:hover,.floor-zone[aria-pressed=true]{background:#cdb7880c}.floor-roster{margin-top:18px;max-height:130px;overflow:auto}
.floor-person{display:flex;gap:12px;justify-content:space-between;width:100%;padding:6px 0;font:10px var(--mono);border-bottom:1px solid #ffffff0a;text-align:left;color:var(--ink)}
.floor-person span:nth-child(2){color:var(--dim);margin-left:auto}.floor-person b{color:var(--accent)}
.floor-app[data-zone=pit] .map-seat:not(.zone-pit),.floor-app[data-zone=execution] .map-seat:not(.zone-execution),.floor-app[data-zone=senior] .map-seat:not(.zone-senior),.floor-app[data-zone=partner] .map-seat:not(.zone-partner){opacity:.12}
.floor-app[data-zone=pit] .floor-person:not(.zone-pit),.floor-app[data-zone=execution] .floor-person:not(.zone-execution),.floor-app[data-zone=senior] .floor-person:not(.zone-senior),.floor-app[data-zone=partner] .floor-person:not(.zone-partner){display:none}
@media(max-width:719px),(max-height:460px){.term-frame{padding:4px;height:100%;border-radius:0}.term-frame::after{inset:4px}.term-frame::before{display:none}.os-signature{right:20px;bottom:30px}.os-wordmark{font-size:52px}.win-body{padding:12px}.os-exit{padding:0 6px;font-size:10px}.floor-layout{grid-template-columns:1fr;gap:14px}.floor-plan svg{max-height:300px}.floor-heading h2{font-size:26px}.floor-source{max-width:90px}.wb{width:27px;height:23px}.win-bar{height:29px}.os-icons{z-index:4}.win.maxed{top:42px!important;height:calc(100% - 42px)!important}}

.floor-actions { display:flex;gap:16px;margin-top:15px; }
.floor-actions button { font:10px var(--mono);color:var(--accent);padding:6px 0;border-bottom:1px solid #cdb78840; }
.floor-actions button:hover { color:#fff; }
.floor-roster { max-height:110px; }
.floor-layout { gap:28px; }
.floor-plan svg { max-height:400px; }
@media(max-width:719px),(max-height:460px){.floor-plan svg{max-height:290px}.floor-actions{gap:12px}.floor-layout{gap:18px}.floor-roster{max-height:180px}}

.book-search { display:flex;align-items:center;gap:12px;margin:15px 0 20px;font:10px var(--mono); }
.book-search label { color:var(--dim);white-space:nowrap; }.book-search input { min-width:0;flex:1;padding:8px 9px;background:#ffffff05;border:1px solid var(--line);font:11px var(--mono);color:var(--ink);caret-color:var(--accent); }
.book-search button { font:10px var(--mono);color:var(--dim);padding:7px; }.book-count{font:9px var(--mono);color:var(--dim)}
.book-wallet { font:inherit;padding:3px 0;text-decoration:underline;text-decoration-color:#cdb78840;text-underline-offset:4px;text-align:left; }
.book-wallet:hover { color:var(--accent); }.btab td{padding-top:6px;padding-bottom:6px}
@media(max-width:719px){.book-search{flex-wrap:wrap;gap:8px}.book-search label{flex-basis:100%}.book-search input{width:0}.floor-plan figcaption{font-size:9px}}

/* Window contents respond to their own width, including manually resized windows. */
.win-body { container-type:inline-size;container-name:program; }
.thead { flex-wrap:wrap;min-width:0; }.tsub { white-space:normal;overflow-wrap:anywhere; }.tbook{min-width:0}
.os.compact .os-icons { inset:0 0 auto;width:auto;flex-direction:row;gap:0;padding:5px 4px;overflow-x:auto;background:#080d0b;border-bottom:1px solid var(--line);z-index:4; }
.os.compact .os-icon button { width:auto;flex-direction:row;gap:6px;padding:5px 8px; }.os.compact .os-icon .ic{width:20px;height:20px}.os.compact .os-icon .ic svg{width:12px;height:12px}
.os.compact .win.maxed { top:42px!important;height:calc(100% - 42px)!important; }.os.compact .win-menu{display:none}
.os.compact .wb[data-act=max],.os.compact .win-grip{display:none}
.os.compact .os-task{flex:1 1 0;padding:0 6px}.os.compact .os-task span:last-child{display:none}.os.compact .tray-cell:first-child{display:none}
.position-actions { display:flex;flex-wrap:wrap;gap:14px;margin:14px 0; }.position-actions button{font:10px var(--mono);color:var(--accent);padding:5px 0;border-bottom:1px solid #cdb78840}
.floor-plan a{cursor:pointer}.floor-plan a:hover rect,.floor-plan a:focus rect{fill:var(--accent);stroke:white;stroke-width:2;outline:none}
@container program (max-width:600px){
 .tw{grid-template-columns:minmax(0,1fr);gap:20px}.floor-layout{grid-template-columns:1fr;gap:18px}.floor-plan svg{max-height:290px}
 .thead{gap:8px}.tsub{flex-basis:100%;text-align:left}.floor-heading h2{font-size:26px}.floor-source{max-width:100px}
 .book-search{flex-wrap:wrap;gap:8px}.book-search label{flex-basis:100%}.book-search input{width:0}
 .cells{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}.tp{grid-template-columns:3ch minmax(0,1fr) auto}.tp .tpk{display:none}
}
@container program (max-width:390px){
 .btab{table-layout:fixed}.btab th,.btab td{padding-right:6px;white-space:normal;overflow-wrap:anywhere}
 .btab .bs{width:25px}.btab .bk{width:25px}.btab .ba{width:auto}.btab .bh{width:64px}.btab .bt,.btab .bp{display:none}
 .btab .trk{display:none}.bkol{display:block;margin-left:0;overflow-wrap:anywhere}.book-wallet{font-size:10px}
 .floor-plan figcaption{font-size:9px}.floor-zone p{font-size:13px}.floor-controls>span{display:none}
}

.tvoid{position:relative;min-height:280px;display:flex;flex-direction:column;justify-content:center;padding:24px 8px;max-width:520px}
.void-mark{width:110px;height:82px;margin-bottom:22px}.void-mark svg{width:100%;height:100%;fill:none;stroke:#64745a;stroke-width:1}.void-mark .void-signal{stroke:var(--accent);stroke-width:3}
.void-status{font:9px var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--faint);margin-bottom:10px}.tvoid .tvh{font:32px/1.1 var(--serif);color:var(--ink)}.tvoid .tsay{max-width:44ch;font-size:14px;color:var(--dim)}
@container program(max-width:390px){.tvoid{padding:16px 0}.tvoid .tvh{font-size:28px}}

/* Keyboard navigation uses the same restrained workstation chrome. */
.os button:focus-visible { outline:1px dotted currentColor; outline-offset:-4px; }
.win:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.win-body :is(a, input, button):focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.wb:disabled { opacity:.38; cursor:default; }
.os-task:focus-visible { outline:1px dotted var(--os-ink); outline-offset:-4px; }
.os-notice[hidden] { display:none; }
.os-notice { position:absolute;z-index:100000;right:14px;bottom:46px;max-width:min(380px,calc(100% - 28px));padding:12px 16px;border:1px solid #657643;border-left:3px solid var(--accent);background:#141c12;color:#e1e6d8;font:11px/1.6 var(--mono);box-shadow:3px 3px 0 #0006;pointer-events:none; }
.win-menu button:disabled { opacity:.55;cursor:wait; }

.os-wordmark{font-size:clamp(34px,5vw,64px);letter-spacing:-.04em}.os-start{max-width:180px}.os-start>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.os-mark{background:none!important;box-shadow:none!important;width:20px!important;height:20px!important}.os-mark::before{content:'LP';font:700 17px Georgia;color:#394a35}.os-mark::after{display:none!important}.os.compact .os-start>span:last-child{display:none}.os.compact .os-start{min-width:32px}