/*
 * THE RECORD SURFACE — one reading column of sections, with the page's own
 * outline floating in a gutter beside it.
 *
 * THREE BOXES ON THE INLINE AXIS AND ONLY ONE OF THEM HAS CONTENT: the rail's
 * gutter, the reading column, and an EMPTY mirror of the gutter on the other
 * side, which is what keeps the column centred. ONE PAGE, ONE LEFT EDGE: every
 * band is a child of that one column box.
 *
 * WHICH FORM THE OUTLINE TAKES IS MEASURED, NOT QUERIED. The fork lives in
 * `record_page.tsx`'s `RAIL_DOCK_WIDTH`, and this sheet declares the measures it
 * is derived from. The column keeps its floor and the MIRROR is what shrinks.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-record-page {
    /* THE RAIL'S OWN MEASURE. `record_page.tsx` hands the same number to
       `SectionNav`, which draws the rail; this RESERVES the room for it. */
    --lotics-record-rail: 208px;

    /* The rail plus the region rung between it and the first word of the record
       — arithmetic over the scale, because the gutter is the rail's geometry
       rather than a rung. */
    --lotics-record-rail-gutter: calc(var(--lotics-record-rail) + var(--lotics-space-48));

    /* THE READING COLUMN'S CAP — a measure of text, not of the window. It caps
       the TITLE's line as much as a section's, because they are one box. */
    --lotics-record-column: 720px;

    /* THE COLUMN'S FLOOR — what it keeps before the mirror gives up its width,
       and half of what the rail's fork is derived from. A record's register at
       ITS floor: the counted ordinal's 28px gutter, three columns at
       `table_fit`'s `FLEX_READ_WIDTH`, and the register's 12px inset between the
       four slots. 28 + 600 + 36. */
    --lotics-record-column-floor: 664px;

    /* THE TITLE'S OWN MEASURE — twice `table_fit.ts`'s `FLEX_MIN_WIDTH`. A FLOOR
       on the identity and never a width: the row breaks when the identity and
       the acts stop fitting, with no width named for either case. */
    --lotics-record-title: 240px;

    /* Stated ONCE, because the drawn hero and the frame the header waits as are
       two rules on one number. */
    --lotics-record-hero: 480px;

    /* WHAT IS DRAWN OUTSIDE THE READING COLUMN, and so what the frame's clip has
       to hold: a washed row, by its bleed, and a FOCUSED FIELD, whose frame
       stands on the column's own edge (`record_facts.css`) and paints its ring
       outside it. Derived from the two, so neither can move alone. */
    --lotics-record-reach: max(var(--lotics-row-wash-bleed), var(--lotics-ring-width));

    display: block;
    min-width: 0;
    /*
     * ONE COLUMN EDGE FOR THE WHOLE PAGE, AND THE REACH STILL PAINTS: the reach
     * is OVERFLOW, paid as this frame's own inline padding and handed straight
     * back as an equal negative margin, so the clip's padding box grows by it
     * while every child's edge stays where it was (`page_content.css`).
     *
     * AND NOT `overflow-clip-margin`, WHICH TAKES NO DERIVED LENGTH: `max()`
     * over the two reaches is invalid at computed-value time and falls back to 0.
     *
     * `clip` on one axis leaves the other visible, so nothing here becomes a
     * scroller and the rail above can still stick to the page's own scroller.
     */
    overflow-x: clip;
    padding-inline: var(--lotics-record-reach);
    margin-inline: calc(var(--lotics-record-reach) * -1);
  }

  /* THE OUTLINE WHERE IT CANNOT BE A RAIL — pinned to the top of whatever
     scrolls the record, over its own ground so the sections pass UNDER it. */
  .lotics-record-page__bar {
    position: sticky;
    top: 0;
    z-index: var(--lotics-z-sticky-header);
    background-color: var(--background);
  }

  /* THE THREE BOXES. `center` pairs the reserved gutter with its mirror, whose
     middle is then the column's middle. */
  .lotics-record-page__frame {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    min-width: 0;
  }

  /* THE RAIL'S GUTTER, which never shrinks. `flex-start` is load-bearing:
     stretched to the column's height the box never moves, and a sticky box that
     never moves is a box that never sticks. */
  .lotics-record-page__rail {
    flex: 0 0 var(--lotics-record-rail-gutter);
    align-self: flex-start;
    position: sticky;
    top: var(--lotics-space-24);
  }

  /* THE MIRROR — nothing in it, and the box that gives way, so the record loses
     its symmetry before it loses a register column. */
  .lotics-record-page__mirror {
    flex: 0 1 var(--lotics-record-rail-gutter);
  }

  /* THE READING COLUMN, and every band of the page is a child of it — the whole
     mechanism behind one left edge. The beat between SECTIONS is
     `SectionStack`'s. */
  .lotics-record-page__column {
    /* Basis zero, so the rail's gutter and its mirror are paid first: given a
       basis of its own the column would shrink in proportion with the mirror and
       the two gutters would stop matching. */
    flex: 1 1 0;
    max-width: var(--lotics-record-column);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: var(--lotics-space-24);
  }

  /* THE FLOOR APPLIES ONLY BESIDE A RAIL. Below the fork the column IS the page
     and a floor on it would push a phone's 375 into a horizontal scroll. */
  .lotics-record-page__column[data-rail] {
    min-width: var(--lotics-record-column-floor);
  }

  /* Stretch, because the title's row is what owns the header's right edge. */
  .lotics-record-page__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    row-gap: var(--lotics-space-8);
  }

  /* THE TITLE'S ROW — a WRAPPING LINE over the title's own floor: the identity
     keeps `--lotics-record-title` and the acts are their own measure, so a lone
     verb rides the name's row and a run of named ones takes the next. */
  .lotics-record-page__title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    column-gap: var(--lotics-space-32);
    row-gap: var(--lotics-space-8);
  }

  /*
   * THE SUBJECT — its mark and its identity as ONE item of the row, which keeps
   * the two gaps apart: the ROW's is the distance to the acts, and a mark and
   * the name it marks take the identity rung.
   *
   * `baseline`, with the mark opting out below: the acts align to the TITLE, and
   * a flex container reports the baseline of its first baseline-sharing item, so
   * the summary has to be that item.
   */
  .lotics-record-page__subject {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex: 1 1 var(--lotics-record-title);
    min-width: 0;
    column-gap: var(--lotics-space-12);
  }

  .lotics-record-page__summary,
  .lotics-record-page__skeleton[data-block="summary"] {
    flex: 1;
    min-width: 0;
  }

  /* The auto margin is what puts the acts at the row's far edge whether it
     wrapped or not. */
  .lotics-record-page__acts,
  .lotics-record-page__skeleton[data-block="acts"] {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  /* Stretched it would be a 40px control the width of the column. */
  .lotics-record-page__back {
    align-self: flex-start;
  }

  /* THE RECORD'S MARK, on whichever of the header's two lines its SCALE belongs
     to. Shrink-to-fit either way: stretched it would be a 40px box the width of
     the column. */
  .lotics-record-page__mark {
    align-self: flex-start;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
  }

  /* ON THE NAME'S LINE, NOT ON THE IDENTITY'S BLOCK: the mark is the same rung
     as the title's own leading, so the two line boxes coincide when it starts
     where the block does. Centred on the block it drifts down past the
     qualifiers and the contact row. */
  .lotics-record-page__mark[data-display="mark"] {
    align-self: flex-start;
  }

  /* THE PICTURE AT MEDIA SCALE. The box is the picture's frame AND, empty, its
     absence — the neutral ground at the same measure, carrying no glyph and no
     words. `overflow: hidden` makes the corner the picture's own. */
  .lotics-record-page__mark[data-display="hero"] {
    width: min(100%, var(--lotics-record-hero));
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--lotics-radius-card);
    background: var(--muted);
  }

  /* THE JUMP, ON THE LINE IT BELONGS TO: a `Link` is a block by default, which
     inside a sentence puts every issue's jump on a second line. */
  .lotics-record-page__jump {
    display: inline-flex;
    vertical-align: baseline;
  }

  /* The boundary between the sections' run and the fence that ends it. */
  .lotics-record-page__main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-48);
  }

  /* Breathing room above a jumped-to section, and clear of the pinned bar, which
     is the one thing a jump can land underneath. */
  .lotics-record-page__section {
    scroll-margin-block-start: var(--lotics-space-24);
  }

  /* THE JUMP'S LANDING wears the kit's ring: the frame makes a heading
     focusable, and a box the kit focuses and does not paint gets the BROWSER's
     ring. */
  .lotics-record-page__heading:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: var(--lotics-ring-width);
    border-radius: var(--lotics-radius-control);
  }

  /* THE PAGE WAITING. Each block is the box whose content is coming, so the bars
     sit on the rhythm that content will — the same layout, drawn before the
     words arrive, which is what makes the arrival move no edge. */
  .lotics-record-page__skeleton {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  .lotics-record-page__skeleton[data-block="summary"] {
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-16);
  }

  /* THE PICTURE INSIDE THE FRAME THE HEADER SIZED, so one box states the hero's
     geometry. `cover` rather than `contain` — a 16:9 frame letterboxing a square
     photograph puts two grey bars beside the one thing on show. */
  .lotics-record-page__hero {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .lotics-record-page__skeleton[data-block="identity"] {
    flex: 1;
    min-width: 0;
  }

  /* The same `auto` margin the drawn metric takes. */
  .lotics-record-page__skeleton[data-block="figure"] {
    align-items: flex-end;
    flex-shrink: 0;
    margin-inline-start: auto;
    gap: var(--lotics-space-4);
  }

  /* The drawn acts' own row, so the identity column ends where it will end. */
  .lotics-record-page__skeleton[data-block="acts"] {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lotics-space-8);
  }

  /* The heading above is a real `SectionHeading`, which owns its own beat. */
  .lotics-record-page__skeleton[data-block="section"] {
    gap: var(--lotics-space-12);
  }
}