/* Beach at 1440: the three desktop frames, and the always-on wall.
 *
 * Third of the three stylesheets, loaded after `beach.css` and `screens.css` and
 * depending on both. The split is a real boundary — everything in here is a
 * layout that only exists above 900px, or the dedicated-screen variant — and it
 * is also what keeps each file under CLAUDE.md's 500-line rule.
 *
 * Nothing here is a second design. The markup is the phone's; the sidebar
 * arrives, the tab bar goes, and Today and the Queue open into the two-pane
 * layouts `D1` and `D2` draw. */

/* --- the desktop frames, D1 and D2 -------------------------------------- */

@media (min-width: 900px) {
  body { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }

  /* `C · Side`: 236 wide, brand at the top, status pinned to the bottom, and it
   * stays put while the page scrolls. This is the answer to the right column
   * dying a third of the way down — the design has a sidebar, and the first
   * pass had a floating card and 500px of empty page beside it. */
  .side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 16px 20px;
    background: var(--surface);
    border-right: 1px solid var(--line);
  }
  .side-top { display: grid; gap: 26px; }
  .side-brand { display: grid; gap: 2px; padding: 0 10px; }
  .side-nav { display: grid; gap: 3px; }
  .side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 500;
  }
  .side-link .ic { color: var(--muted); }
  .side-link.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .side-link.is-on .ic { color: var(--accent); }
  .side-status { display: grid; gap: 9px; padding: 12px; border-radius: 11px;
    background: var(--bg); border: 1px solid var(--line); }
  .status-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
  .status-note { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }

  /* A floating bar 16px off the bottom of a 1440 monitor is a phone control
   * stranded on a desk. The sidebar is the navigation here. */
  .tabs { display: none; }

  .shell {
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    min-height: 100vh;
    padding: 30px 36px 30px;
  }
  .top { padding: 0 0 4px; }
  .top h1 { font-size: 28px; letter-spacing: -0.029em; }
  .eyebrow { font-size: 13.5px; }
  .page { padding: 0; }

  /* D1. Two columns: the tracker fills the left, Up next and the rest hold a
   * 400px rail. The left card stretches the full height of the row, which is
   * what leaves no dead field under it. */
  .screen-today .page { grid-template-rows: auto 1fr; }
  .screen-today .top .mark { display: none; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: stretch; }
  /* Two children, two columns, one row. The rail packs from the top and the
   * tracker fills the height beside it — which is the whole answer to a right
   * column that stopped a third of the way down. */
  .col-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .screen-today .card-live {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px;
  }
  .screen-today .card-live .card-head { padding: 0 0 16px; }
  .card-upper { display: block; }
  .col-side > .section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    gap: 14px;
  }
  .screen-today .tracker-foot { display: grid; }
  .tracker { gap: 16px; }
  .tracker-line { grid-template-columns: 44px 9px 1fr; gap: 14px; }
  .tracker-headline { font-size: var(--t-subject); line-height: 1.5; }

  /* D2. A 394px list against a reading pane, both full height. */
  .screen-queue .shell { padding: 0; grid-template-rows: 1fr; }
  .screen-queue .page { grid-template-columns: 394px minmax(0, 1fr); gap: 0; padding: 0; }
  .queue-list {
    padding: 26px 18px 24px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    max-height: 100vh;
  }
  .queue-read {
    display: grid;
    align-content: space-between;
    gap: 18px;
    padding: 24px 32px;
    max-height: 100vh;
    overflow-y: auto;
  }
  .screen-queue .cards { gap: 0; }
  .screen-queue .cards > li { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .screen-queue .cards > li.is-selected { background: var(--accent-soft); }

  .screen-draft .page, .screen-voice .page { max-width: 780px; }
  /* Inside a pane of its own the action bar has a bottom to sit at, so it stops
   * being sticky: `position: static` is the desktop half of the phone rule. */
  .screen-draft .actions { position: static; background: none; padding-top: 6px; }
  .screen-log .page { max-width: 860px; }
}

/* --- always-on ---------------------------------------------------------- */

/* Left open on a dedicated screen and read from across a room, so everything
 * goes up a size and the chrome goes away. */
.screen-always-on .tabs { display: none; }
.screen-always-on { display: block; }
.screen-always-on .shell { padding: 0; min-height: 100vh; }
.screen-always-on .top { max-width: none; padding: 30px 40px 14px; }
.screen-always-on h1 { font-size: 40px; }
.screen-always-on .eyebrow { font-size: 17px; }
.screen-always-on .page { max-width: none; padding: 0 40px; }

.wall-clock {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.screen-always-on .tracker { gap: 26px; }
.screen-always-on .tracker-line { grid-template-columns: 96px 22px 1fr; gap: 22px; }
.screen-always-on .tracker-time { font-size: 22px; }
.screen-always-on .tracker-headline { font-size: 25px; font-weight: 500; line-height: 1.35; }
.screen-always-on .tracker-detail { font-size: 18px; }
.screen-always-on .tracker-dot { width: 11px; }
.screen-always-on .tracker-dot::before { width: 11px; height: 11px; top: 12px; }
.screen-always-on .tracker-line:not(:last-child) .tracker-dot::after {
  left: 5px;
  top: 29px;
  bottom: -32px;
}

.wall-foot {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px 30px;
  color: var(--faint);
  font-size: 16px;
}
.wall-foot a { color: var(--accent); font-weight: 600; }

/* Module 14's switch banner. On a desktop the sidebar's status card already
   carries the running state, so the banner only speaks up when there is
   something to say. The always-on wall renders no sidebar, so it keeps its
   banner in both positions — a wall in the corner of his office saying nothing
   about whether Beach is running would be the one screen that cannot answer
   the question it exists to answer. */
@media (min-width: 900px) {
  body:not(.screen-tracker) .halt-banner.is-running { display: none; }
}