/* ==========================================================================
   home.css: Dashboard (WS-1). The boot screen, then the sections: #desk, #modules,
   #receipts, #fills, #order. Shared pieces (panels, buttons, cards, chrome, .seps,
   the .next ticket) live in base.css.
   Order: Sections, then Media queries (mobile first).
   ========================================================================== */

/* ----- Boot screen (first Home visit per tab session) ------------------------ */
.boot-screen { display: none; }
.is-booting .boot-screen, .boot-screen.is-out {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
}
/* Failsafe: the screen hides itself even if no script ever runs */
.is-booting .boot-screen { animation: boot-hide 0s 2.5s forwards; }
.boot-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: var(--sp-4);
  padding: var(--pad-panel);
  background: var(--scanlines), var(--c-void);
}
.boot-mark {
  font-family: var(--f-mono-112);
  font-stretch: 112.5%;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
.boot-status { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-text-2); }
/* The hint shows only once main.js runs: before that, no key or tap handler exists */
.boot-hint { position: absolute; left: 0; right: 0; bottom: var(--sp-6); text-align: center; visibility: hidden; }
.motion-ready .boot-hint { visibility: visible; }
.bh-tap { display: none; }
.is-booting .boot-mark, .is-booting .boot-status { opacity: 0; }
/* The fold line: 1 px of amber at the center of the screen */
.boot-screen::after {
  content: "";
  position: absolute;
  inset: calc(50% - 0.5px) 0 auto;
  height: 1px;
  background: var(--c-amber);
  box-shadow: 0 0 12px var(--c-glow);
  opacity: 0;
}
.boot-screen.is-folding::after { opacity: 1; }
@keyframes boot-hide { to { visibility: hidden; } }

/* ----- #desk: P01 session, P02 review flow, P03 market watch, P04 feeds ----- */
/* P01 session */
.session { display: flex; flex-direction: column; gap: var(--sp-7); }
.session-top { display: grid; gap: var(--sp-4); }
.prompt { display: flex; gap: var(--sp-2); }
.prompt-sign { color: var(--c-amber); }
/* The name and "Egypt · English / Arabic" are two .seps items: one line, or the name above the rest */
.operator { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-text-2); }
.op-name { color: var(--c-text); font-weight: 500; }
.avatar { position: relative; flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: 2px; }
.avatar img { width: 100%; height: 100%; filter: grayscale(1) contrast(1.15); }
.avatar::after { content: ""; position: absolute; inset: 0; background: var(--scanlines); }
.session-main { display: grid; gap: var(--sp-5); }
.session-main .btn-row { margin-top: var(--sp-2); }

/* P02 review flow: the canvas fills the panel body edge to edge */
.p-flow .panel-body { display: flex; padding: 0; }
.chart { position: relative; flex: 1 1 auto; min-height: 13.75rem; }
.chart canvas, .chart-static { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart canvas { cursor: crosshair; }
.chart.is-live .chart-static { display: none; }
.chart::after { content: ""; position: absolute; inset: 0; background: var(--scanlines); pointer-events: none; }

/* P03 market watch: 2 x 2 plus a full RPT row on phones, one line per symbol on the desk */
.p-watch .panel-body { padding: 0; }
.mw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  background: var(--c-line);
}
.mw-row {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--pad-panel);
  background: var(--c-panel);
}
.mw-row:last-child { grid-column: 1 / -1; }
.mw-code { color: var(--c-text-3); }
.mw-val {
  font-family: var(--f-mono-112);
  font-stretch: 112.5%;
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.mw-val .i-star { display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.06em; vertical-align: 0.02em; }
.mw-label { color: var(--c-text-2); text-wrap: balance; }
.ws-on .mw-label {
  animation: rise-in var(--dur-3) var(--ease-settle) both;
  animation-delay: calc(var(--ws-delay, 0ms) + 200ms + var(--k, 0) * 60ms);
}

/* P04 feeds; the social proof line is the panel foot */
.feed-list { display: grid; gap: var(--sp-4); list-style: none; }
.feed { display: grid; gap: var(--sp-1); color: var(--c-text); text-decoration: none; }
.feed-name { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 500; transition: color var(--dur-2) var(--ease-snap); }
.feed-ext { width: 0.75rem; height: 0.75rem; color: var(--c-text-3); }
.feed:hover .feed-name, .feed:hover .feed-ext { color: var(--c-amber); }
.feed-meta { color: var(--c-text-2); }
.feed-meta .i-star { display: inline-block; width: 0.7rem; height: 0.7rem; vertical-align: -0.08em; }

/* ----- #modules: the services watchlist ------------------------------------ */
.watch-head { display: none; }
.watch { list-style: none; }
.watch-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  padding: var(--sp-5) var(--pad-panel);
  border-top: 1px solid var(--c-line);
  transition: background-color var(--dur-2) var(--ease-snap), box-shadow var(--dur-2) var(--ease-snap);
}
.watch-row:first-child { border-top: 0; }
.w-code { grid-row: 1 / span 2; padding-top: 0.3em; color: var(--c-text-3); transition: color var(--dur-2) var(--ease-snap); }
.w-name, .w-build, .w-stack, .w-more { grid-column: 2; }
.w-name a { color: var(--c-text); text-decoration: none; transition: color var(--dur-2) var(--ease-snap); }
.w-name a::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the system, like a watchlist row */
.w-build { color: var(--c-text-2); text-wrap: pretty; }
.w-more { color: var(--c-text-2); }

/* ----- #receipts: execution report ------------------------------------------ */
.ex { list-style: none; }
.ex-row { position: relative; display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--pad-panel); }
/* The hairline between rows draws left to right as the row reveals */
.ex-row + .ex-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--c-line);
  transform-origin: 0 50%;
  transition: transform var(--dur-4) var(--ease-settle);
  transition-delay: var(--rd, 0ms);
}
.js .ex-row.reveal:not(.is-in)::before { transform: scaleX(0); }
.ex-claim { display: grid; gap: var(--sp-2); }
.ex-claim .copy { color: var(--c-text-2); }
.ex-receipt { padding-left: var(--sp-4); border-left: 2px solid var(--c-amber); }
.ex-row.reveal .ex-receipt { transition: opacity var(--dur-4) var(--ease-settle); transition-delay: calc(var(--rd, 0ms) + 120ms); }
.js .ex-row.reveal:not(.is-in) .ex-receipt { opacity: 0; }
/* Same 2.5 s failsafe as .reveal: without main.js the receipts and the hairlines still show */
.js:not(.motion-ready) .ex-row.reveal .ex-receipt,
.js:not(.motion-ready) .ex-row.reveal::before { animation: show 0s 2.5s forwards; }

/* ----- #fills: three block trades; the head carries the link to the full log ----- */
.slips { display: grid; }
.fills-more { display: flex; margin-top: var(--sp-2); }
.fills-more .btn { flex: 1; } /* full width below 480, like every button row */

/* ----- Media queries -------------------------------------------------------- */
@media (pointer: coarse) {
  .bh-keys { display: none; }
  .bh-tap { display: inline; }
}

@media (min-width: 30em) {
  .fills-more .btn { flex: none; }
}

@media (min-width: 48em) {
  .chart { min-height: 18.75rem; }

  .feed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ex-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-6); align-items: start; }
  .ex-code, .ex-claim { grid-column: 1; }
  .ex-receipt { grid-column: 2; grid-row: 1 / span 2; border-left-width: 1px; border-left-color: var(--c-line); padding-left: var(--sp-6); }
}

@media (min-width: 64em) {
  /* The desk fills the first screen: 7 + 5, P01 spans two rows, P04 runs across.
     Row 1 keeps at least 20rem, so the chart (the proof of the concept) never becomes the smallest panel.
     Capped at 52rem: on tall screens the h1 keeps its place under the operator line, and the next section shows. */
  .desk {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: minmax(20rem, 1fr) auto auto;
    min-height: min(calc(100svh - var(--topbar-h) - var(--tape-h)), 52rem);
  }
  .p-session { grid-column: 1; grid-row: 1 / span 2; }
  .p-flow { grid-column: 2; grid-row: 1; }
  .p-watch { grid-column: 2; grid-row: 2; }
  .p-feeds { grid-column: 1 / -1; grid-row: 3; }
  /* P01 sets the height of rows 1 and 2, so its gaps stay tight: the desk fits 1440 x 900 whole,
     and the RPT row clears the tape at 1280 x 720. margin-top: auto adds air where the screen has it. */
  .session { gap: var(--sp-5); }
  .session-main { margin-top: auto; }
  /* The h1 also follows the screen height (72 px needs 900 px), so a short laptop keeps the orders on screen */
  .session-main h1 { font-size: min(var(--fs-h1), 8svh); }
  .session-main .btn-row { margin-top: 0; }
  .chart { min-height: 12.5rem; }

  /* On the desk the h1 is the one focal point: the values step down to a quieter size and weight */
  .mw { grid-template-columns: minmax(0, 1fr); }
  .mw-row {
    grid-template-columns: 3rem auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--sp-4);
    padding-block: var(--sp-2);
  }
  .mw-row:last-child { grid-column: auto; }
  .mw-val { min-width: 3em; font-size: clamp(2rem, 1.25rem + 1.5vw, 2.75rem); font-weight: 600; text-align: right; }

  /* The two feeds follow the 7 + 5 columns of the desk, so the Upwork feed starts under the chart */
  .feeds { padding: 0; }
  .feed-list { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; }
  .feed-list li { padding: var(--sp-5) var(--pad-panel); }
  .feed-list li + li { border-left: 1px solid var(--c-line); }

  .watch-head, .watch-row {
    grid-template-columns: 5rem minmax(12rem, 1.2fr) minmax(0, 2fr) minmax(12rem, 1fr);
    column-gap: var(--sp-5);
  }
  .watch-head { display: grid; padding: var(--sp-2) var(--pad-panel); border-bottom: 1px solid var(--c-line); color: var(--c-text-3); }
  .watch-row { align-items: baseline; row-gap: 0; padding-block: var(--sp-4); }
  .w-code { grid-column: 1; grid-row: 1; padding-top: 0; }
  .w-name { grid-column: 2; grid-row: 1; }
  .w-build { grid-column: 3; grid-row: 1; }
  .w-stack { grid-column: 4; grid-row: 1; align-self: center; }
  /* One line per detail (6.1): the line spans three columns, so the 68ch .copy measure does not apply */
  .w-more { grid-column: 2 / 5; grid-row: 2; max-width: none; margin-top: var(--sp-2); }

  .ex-row { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: var(--sp-5); }
  .ex-code { grid-column: 1 / span 2; grid-row: 1; padding-top: 0.35em; }
  .ex-claim { grid-column: 3 / span 4; grid-row: 1; }
  .ex-receipt { grid-column: 7 / span 6; grid-row: 1; }

  /* The link to the full log sits at the right of the head, level with the lede */
  .fills-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-6); }
  .fills-head .sh-code { grid-column: 1 / -1; }
  .fills-head .fills-more { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin-top: 0; }

  .slips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fill-slip + .fill-slip { border-left: 1px solid var(--c-line); }
}

/* Short laptop screens (1366 x 657, or 1280 x 800 at 125%): P01 and the market watch tighten,
   so the two orders and the RPT row stay above the fixed tape */
@media (min-width: 64em) and (max-height: 45em) {
  .desk { grid-template-rows: minmax(16rem, 1fr) auto auto; }
  .session { gap: var(--sp-4); padding-block: var(--sp-4); }
  .session-main { gap: var(--sp-4); }
  .session-main .lede { font-size: 1.1875rem; }
  .mw-row { padding-block: var(--sp-1); }
  .mw-val { font-size: 2rem; }
}

/* Services: on hover devices from 1024 a row expands under the pointer or focus (pure CSS).
   The first row stays open when no row is active, so the list height never changes. */
@media (hover: hover) {
  .watch-row:hover .w-name a { color: var(--c-amber); }
}

@media (min-width: 64em) and (hover: hover) {
  .watch-row { min-height: 3.25rem; }
  .watch-row .w-more { height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: opacity var(--dur-2) var(--ease-snap); }
  .watch-row:is(:hover, :focus-within),
  .watch:not(:has(.watch-row:is(:hover, :focus-within))) .watch-row:first-child {
    background: var(--c-amber-wash);
    box-shadow: inset 2px 0 0 var(--c-amber);
  }
  .watch-row:is(:hover, :focus-within) .w-more,
  .watch:not(:has(.watch-row:is(:hover, :focus-within))) .watch-row:first-child .w-more {
    height: auto;
    margin-top: var(--sp-2);
    opacity: 1;
  }
  .watch-row:is(:hover, :focus-within) .w-code,
  .watch:not(:has(.watch-row:is(:hover, :focus-within))) .watch-row:first-child .w-code { color: var(--c-amber); }
}