/* The desk (components/Desk): five house agents on one clock (deskfloor.js), the computer (Pilot OS), and the notes
   below. The live page's grammar: starfield head, panels on the stone surface. */

.dk {
  --up: var(--copper-300);
  --down: #c98a6e;
  background: var(--page) var(--glyph-dust);
  color: var(--text);
}
.dk-head {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 104px;
  padding-bottom: 16px;
  background: #0c0b0e;
}
.dk-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0c0b0e url(../assets/306197242faaf099017cb611d26796a4.png) center -170px / max(100%, 1100px) auto no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.dk-head-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.dk-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin: 0;
  text-wrap: balance;
}
.dk-tick { color: var(--accent); }
.dk-name { color: var(--text-3); }
.dk-lede {
  max-width: 760px;
  margin: 0;
  color: var(--text-2);
}
.dk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dk-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--text-2);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* the computer */
.dk-computer { display: grid; gap: 24px; padding-block: 32px 64px; }
.dk-computer-head { display: grid; gap: 8px; }
.dk-computer-head h2, .dk-computer-head p { margin: 0; }
.dk-computer-head p { color: var(--text-2); }
.dk-mon { position: relative; width: min(100%, 1184px); margin-inline: auto; aspect-ratio: 1184 / 1057; }

.dk-road { display: grid; gap: 20px; padding-block: 0 56px; }
.dk-road h2 { margin: 0; }
.dk-road-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: road; }
.dk-road-list li { display: grid; gap: 6px; align-content: start; padding: 18px; background: var(--surface); counter-increment: road; }
.dk-road-list b { color: var(--copper-400); font-weight: inherit; text-transform: uppercase; }
.dk-road-list b::before { content: counter(road) ". "; }
.dk-road-list p { margin: 0; color: var(--text-2); }
@media (max-width: 767px) { .dk-road-list { grid-template-columns: minmax(0, 1fr); } }
/* below the computer */
.dk-lower {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  gap: 12px;
  padding-block: 0 96px;
}
.dk-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  background: var(--surface);
}
.dk-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.dk-panel-head h2 { margin: 0; }
.is-up { color: var(--up); }
.is-down { color: var(--down); }
.dk-opt {
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: var(--surface-2);
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  clip-path: var(--px-notch);
}
.dk-opt:hover { background: var(--surface-hover); color: #fefaee; }
.dk-opt:focus-visible { outline: 2px solid var(--copper-300); outline-offset: -2px; }
.dk-opt.is-on { background: var(--accent); color: #0c0b0e; }
.dk-note-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
}

@media (max-width: 1100px) {
  .dk-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .dk-head { padding-top: 112px; }
  .dk-panel { padding: 16px; }
  .dk-computer-head h2 { font-size: var(--fs-h-md); }
}

/* ---------- the desk floor (js/deskfloor.js): five house agents, one year, one clock */
.dk-floor { padding-block: 24px 48px; }
.df-load { margin: 0; padding-block: 48px; color: var(--text-3); }
.df-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.df-play { min-width: 140px; text-align: center; }
.df-speeds { display: flex; gap: 4px; }
.df-date { margin: 0 0 0 auto; color: var(--glow, #ffdfa3); font-variant-numeric: tabular-nums; }
.df-scrub { position: relative; display: block; padding-bottom: 22px; margin-bottom: 18px; }
.df-scrub input { width: 100%; margin: 0; accent-color: #d6b47c; }
.df-months { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; font: 12px/1 var(--font-caption); color: var(--text-3); pointer-events: none; }
.df-months i { position: absolute; top: 4px; font-style: normal; translate: -50% 0; }
.df-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
/* the lanes slide to their place in the ranking (--at), one --lh apart (158 px; more when FIB carries Pilot's line) */
.df-lanes { --lh: 158px; position: relative; height: calc(var(--n) * var(--lh)); margin: 0; padding: 0; list-style: none; }
.df-lanes:has(.df-pilot) { --lh: 182px; }
.df-lane {
  position: absolute; left: 0; right: 0; top: calc(var(--at, 0) * var(--lh)); height: calc(var(--lh) - 8px);
  display: grid; grid-template-columns: 180px 180px minmax(0, 1fr) 190px; gap: 14px; align-items: center; padding-right: 16px;
  background: #171614; box-shadow: inset 0 0 0 1px #373128; transition: top .6s cubic-bezier(.2, .8, .2, 1);
}
.df-lane:has(.df-pos.is-open) { box-shadow: inset 0 0 0 1px #5a3f16, inset 4px 0 0 #d6b47c; }
/* the orb: a 180 px cell of 1 px art shown at 2x (the site's 2 px art pixel), cropped to 180 x 150 round the orb (180, 236) */
.df-fig { position: relative; width: 180px; height: 150px; overflow: hidden; padding: 0; border: 0; background: radial-gradient(48% 48% at 50% 52%, rgba(214, 180, 124, .16), transparent 70%); cursor: pointer; }
.df-fig:focus-visible { outline: 2px solid var(--copper-300); outline-offset: -2px; }
.df-art { position: absolute; left: -90px; top: -161px; width: calc(var(--n) * 360px); height: 360px; background-size: 100% 100%; image-rendering: pixelated; translate: calc(var(--f, 0) * -360px) 0; }
.df-who { display: grid; gap: 4px; min-width: 0; }
.df-who p { margin: 0; }
.df-rank { color: var(--copper-300); text-transform: uppercase; }
.df-name { color: var(--text); text-decoration: none; }
.df-name:hover { color: var(--glow, #ffdfa3); }
.df-mkt { color: var(--text-3); text-transform: uppercase; }
/* FIB's lane: Pilot's practice, a link to its page */
.df-pilot { color: var(--text-3); font: 11px/1.3 var(--font-caption); text-transform: uppercase; text-decoration: underline dotted; text-underline-offset: 2px; }
.df-pilot:hover { color: var(--glow, #ffdfa3); }
.df-mid { display: grid; gap: 8px; min-width: 0; }
.df-c { width: 100%; height: 76px; display: block; }
.df-line { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); }
.df-when { color: var(--copper-300); }
.df-nums { display: grid; gap: 2px; justify-items: end; text-align: right; }
.df-nums p { margin: 0; }
.df-eq { font: var(--fs-h-xs)/1 var(--font-heading); font-variant-numeric: tabular-nums; color: var(--text); }
.df-eqp { font-variant-numeric: tabular-nums; color: var(--text-3); }
.df-eqp.is-up { color: var(--up); }
.df-eqp.is-down { color: var(--down); }
.df-hold { color: var(--text-3); }
.df-pos { color: var(--text-3); }
.df-pos.is-open { color: var(--glow, #ffdfa3); }
/* the record: all five logbooks, newest first, on paper */
.df-record { padding: 14px 16px; background: #fefaee var(--binary-ivory); color: #0c0b0e; }
.df-record-h { margin: 0 0 8px; color: #8a6a36; text-transform: uppercase; }
.df-feed { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 13px/1.35 var(--font-body-alt); }
.df-feed li { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: 1px dashed #d9c5a3; }
.df-feed b { font-weight: 400; color: #8a6a36; }
.df-feed .df-k-take b { color: #5a3f16; }
.df-feed .df-k-skip span { color: #746e64; }
@media (max-width: 1180px) {
  .df-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* phones: the orb at 1x (the cell's own 1 px art) in a 84 px crop, the chart under the name. FIB's Pilot line
     doesn't fit a lane here; its name links to its page */
  .df-lanes, .df-lanes:has(.df-pilot) { --lh: 200px; }
  .df-pilot { display: none; }
  .df-lane { height: 192px; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 6px 10px; padding: 10px 12px 10px 0; align-items: start; }
  .df-fig { width: 84px; height: 84px; grid-row: 1; }
  .df-art { left: -48px; top: -76px; width: calc(var(--n) * 180px); height: 180px; translate: calc(var(--f, 0) * -180px) 0; }
  .df-mid { grid-column: 1 / -1; grid-row: 2; padding: 0 0 0 12px; }
  .df-c { height: 54px; }
  .df-date { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .df-lane { transition: none; } }
/* each lane's market, live from Lighter: the only number on a lane that isn't the simulation */
.df-now { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.df-now b { font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; }
.df-now i { width: 6px; height: 6px; background: #ffdfa3; animation: src-pulse 1.6s steps(2, jump-none) infinite; }
.df-now.is-na i { animation: none; background: #746e64; }
.df-now.is-na b { color: var(--text-3); }
.dk-stale:empty { display: none; }
.dk-stale { align-self: center; color: var(--copper-400); text-transform: uppercase; }
.dk-srcs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .df-now i { animation: none; } }

/* Pilot OS additions (pilotos.js; its base styles are in screen.css) */
/* Results: the agent's name is the button that loads it, so the rows work from the keyboard */
.os-rowbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.os-rowbtn:focus-visible { outline: 2px solid var(--copper-500); outline-offset: 1px; }
/* Logbook: the trade still open at the backtest's last bar */
.os-table tr.os-open td { background: #ffdfa3; }
/* Pilot's practice inside the dark crew card */
.os-card .os-sub, .os-card .os-plans span { color: #a3a199; }
.os-card .os-tab2 { color: #0c0b0e; }
.os-card .os-list b { font-weight: 400; color: #ffdfa3; }
.os-card .is-up { color: #e8c98f; }
.os-card .is-down { color: #a3a199; }
.os-load .os-go { margin-top: 8px; }