/* wide.css — the horizontal layout for laptops and tablets.
   (Drew, 2026-08-26: "a horizontal format for all pages".)

   ADDITIVE BY CONSTRUCTION, exactly like the three-pane builder. Every rule in
   this file lives inside `@media (min-width: 900px)`. Below that width nothing
   here applies and the app renders precisely as it did — which is the only
   way to add a second layout to a phone-first app without re-testing every
   phone screen.

   WHY 900px AND NOT 768. An iPad in portrait is 768 CSS px and is still a
   comfortable single column; it is landscape (1024) where the phone layout
   starts to look stranded. 900 puts the switch between the two, so a portrait
   tablet keeps the layout it suits and a landscape one gets the rail.

   THE THREE THINGS IT CHANGES:
     1. The bottom nav becomes a LEFT RAIL. A fixed bar across the bottom of a
        27-inch monitor is a phone habit, and it wastes the axis there is most
        of.
     2. Page content gets a max-width. Body text spanning 1800px is unreadable
        (the measure runs past 200 characters), and it is the single change
        that makes the app stop looking like a stretched phone.
     3. Two-up rows where a surface is genuinely a pair of lists.

   THE ACCENT STAYS AN EDGE. The active tab is marked by an accent bar, which
   simply moves from the top edge to the left edge — 5b's rule is that the
   accent is a fill, a border or a bar and never text, and that holds in both
   orientations. */

@media (min-width: 900px) {
  :root { --rail-w: 80px; }

  /* ── 1 · the nav becomes a rail ─────────────────────────────────────── */
  /* THE RAIL STARTS BELOW THE BRAND BAR. `.nav` / `.client-nav` is
     `position:sticky; top:0` spanning the full width, and the rail is fixed
     at the same z-index — so with the rail at top:0 it painted OVER the left
     end of that bar, which is exactly where the gym logo and name live. On a
     white-label product that hid the one piece of branding the whole theming
     system exists to show. Found by rendering the real shell; the first
     harness left the brand bar out and could not see it. */
  .bottom-nav {
    top: var(--nav-h); bottom: 0; right: auto;
    width: var(--rail-w, 200px); height: auto;
    flex-direction: column; align-items: stretch;
    justify-content: flex-start;
    padding-top: var(--sp-6); padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 0; border-right: 1px solid var(--green-border);
    overflow-y: auto;
  }
  /* SLENDER (Drew, 2026-09-07: "as slender as possible for more view
     space"). The rail was 200px with the label beside the icon; it is 80px
     now with the label UNDER the icon — the phone nav's own grammar, turned
     on its side — which keeps every tab readable without a tooltip and gives
     the page 120px back. */
  .cnav-btn {
    flex: none; flex-direction: column; justify-content: center;
    gap: 4px; padding: 0 var(--sp-2);
    min-height: 60px; text-align: center; font-size: 0.6rem; letter-spacing: .04em;
  }
  /* The bar moves from the top edge to the leading edge. Same grammar. */
  .cnav-btn.active { box-shadow: inset 3px 0 0 var(--accent); }
  .cnav-btn > svg { width: 20px; height: 20px; flex: none; }
  /* Rendered: at right:12px the badge sat half under the rail's own edge. */
  .cnav-badge { position: absolute; top: 6px; right: 16px; margin: 0; }
  .cnav-btn { position: relative; }

  /* The brand bar spans the full width above the rail and must win the
     stack: same z-index would leave it to DOM order, and the rail comes
     later in the shell. */
  .nav, .client-nav { z-index: calc(var(--z-nav) + 1); }

  /* ── 2 · pages sit beside the rail, with a real measure ──────────────── */
  /* FULL WIDTH (Drew, 2026-09-07: "expand columns to cover full width of
     available window space"). The 68rem page measure of 2026-08-26 is gone;
     the LIST caps below (46rem on rows and sections) stay, because a row
     whose button sits a foot from its label is a different problem from a
     page that stops short of the window, and only the second was asked
     about. Working surfaces — the builder, the planner, a thread — take all
     of it. */
  .page, .cpage {
    margin-left: var(--rail-w, 200px);
    padding: var(--sp-7) var(--sp-7) var(--sp-8);
    max-width: none;
  }
  /* --bottom-h padding existed to clear a bar that is no longer at the bottom. */
  #trainerApp .page { padding-bottom: var(--sp-8); }

  /* ── MESSAGES beside the rail (Drew, 2026-09-07) ─────────────────────── */
  /* The composer is `position:fixed; left:0; bottom:var(--bottom-h)`, which
     is right on a phone and wrong beside a rail: its left 200px sat UNDER
     the nav (the attach buttons and the start of the text field were
     unreachable) and it floated a nav's height above the bottom of a screen
     whose nav is no longer down there. The thread page also inherited the
     page gutter, so the conversation stopped short of the window. Both
     shells share these classes, so the client's Messages page is fixed by
     the same rule. */
  /* `#trainerApp .page` above sets a padding-bottom at (1,1,0); the thread
     page's own id rule is (1,0,0) and would lose, leaving the composer 34px
     above the window edge. Measured. */
  #trainerApp #page-thread, #page-thread, #cpage-messages, #page-review { padding: 0; }
  /* Fixed against the VIEWPORT, as on a phone, from the rail's edge to the
     window's. (A first probe measured it at 152px, twice the rail: it was
     read mid-fadeIn, while `.page.active`'s transform was still the
     containing block — the A–Z rail lesson, in a harness. The animation
     ends in 200ms and the transform with it.) */
  .thread-composer { left: var(--rail-w, 200px); right: 0; bottom: 0; }
  .thread-body { padding-bottom: 170px; }
  .thread-dd-menu { left: 13px; right: auto; min-width: 320px; }

  /* A header can run horizontally once there is room for it to. */
  .page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-5); flex-wrap: wrap;
  }

  /* ── 3 · surfaces that are genuinely a pair ──────────────────────────── */
  /* Availability: the stats strip and the format picker read as one control
     bar rather than two stacked sections. */
  .bk-sec:first-child { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: end; }
  .bk-sec:first-child .section-label { grid-column: 1 / -1; }

  /* NOT the availability sheet's day blocks — they live in a 420px card no
     matter how wide the screen is, so anything two-up here overflowed it.
     That split is a CONTAINER query in trainer.css instead. */

  /* ── GYM BRANDING: preview beside the controls ───────────────────────── */
  /* The preview is `position:sticky` and roughly 400px tall, so pinned above
     the controls it left them a narrow strip to scroll in and scrolling them
     ran them under it (Drew, 2026-08-26: "the window for the options is too
     small and partially hides behind the preview").

     Pinning it was a deliberate call in 2026-08-18 — a change had to be
     visible without scrolling — and that reasoning is right on a phone, where
     there is only one column to have. Given two, the preview simply moves
     beside the controls: still always visible, and no longer standing on
     them. The narrow layout is untouched. */
  .appearance-studio {
    display: grid; grid-template-columns: 320px minmax(0, 1fr);
    gap: 0 var(--sp-6); align-items: start;
  }
  /* TWO children, not six. A grid item spanning several rows distributes its
     height across them, so with the preview spanning the whole column each
     control row grew and the first field sat 359px below its own tabs. Row 1
     alone was no better — row 1 then simply became 400px tall. The controls
     are wrapped in .as-controls (js/org.js) so the grid has exactly two
     children and nothing can stretch anything. */
  .as-preview-top {
    align-self: start; top: calc(var(--nav-h) + var(--sp-4));
    border-bottom: 0; padding-bottom: 0;
  }
  /* The branding editor is a working surface, not prose — it gets the room. */
  .appearance-studio { max-width: none; }

  /* Class and slot rows keep their single column — they are lists, and a list
     in two columns is harder to scan, not easier.

     BUT A LIST NEEDS A MEASURE TOO. A page max-width stops the PAGE spanning
     a monitor; it does nothing for a row whose label sits at the left edge and
     whose button sits a foot away at the right. That gap is the same
     stretched-phone tell the measure exists to remove, so rows get their own
     narrower measure — wide enough for a long name, tight enough that the
     action still belongs to the thing it acts on. */
  /* Cap the SECTION, not the row. Capping rows alone left each section's
     label and its accent rule running the full 1024px while the rows beneath
     stopped at 736 — the rule overhung its own content, which looks like a
     mistake because it is one. One measure on the container makes the label,
     the rule and the rows agree. */
  .grp-sec, .bk-sec, .bkw-day, .setup-box { max-width: 46rem; }
  /* Cards and rows that are not inside one of those sections. */
  .grp-card, .cbook-row { max-width: 46rem; }

  /* THE CAP IS GONE (Drew, 2026-09-08: thirteen screens where "the + button
     is not full width"). It was written while the PAGE was capped at 68rem,
     where 46rem read as a button rather than a banner. With the page running
     the full window (item 15) it read as a button that had stopped a third of
     the way across, under content that had not — which is worse than either
     end of the original argument. An add control follows its container now,
     and the containers that need a measure have one. */

  /* Stacked sheet actions sit side by side once there is room, at their own
     width rather than spanning the page. A 1000px-wide ARCHIVE CLASS reads as
     a section, not a button. */
  .sheet-btn-col { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sheet-btn-col > .rc-btn { width: auto; min-width: 11rem; }
}

/* A tablet in landscape is 1024; give the rail a little more room from there
   so the labels never truncate at the larger text size. */
@media (min-width: 1200px) {
  /* The rail is icon-over-label at every width now; nothing to widen. */
  :root { --rail-w: 80px; }

  /* Twelve typeface specimens go three-up where the section cap gives them
     room — two-up at 46rem leaves buttons wider than their longest name
     needs. Both pickers, same number, so the two screens stay siblings. */
  .font-picker, .as-fonts { grid-template-columns: repeat(3, 1fr); }
}