/* The departments route on a phone: what version D's catalogue screen needs
 * that site/phone-stack.css does not already declare.
 *
 * Ported from mocks/mobile/site/d/mobile-d.css (branch mobile-fable, 9cc2b41),
 * lines 318-345 - the axis and the legend - and from nothing else: the sheet,
 * the row and the beat are the kit's shared vocabulary and are not restated
 * here. Every rule is inside the phone breakpoint AND under the page's own
 * html[data-phone='stack'][data-phone-kit='on'], the same two gates
 * site/phone-stack.css stands behind, so the desk page cannot be reached by
 * anything in this file at any width.
 *
 * Two things this file has to answer that a mock never did.
 *
 * 1. THE LIGHT LAYER is not here, and not in the route's markup either - it is
 *    attached by site/departments/phone-departments.js when it builds the
 *    stack. The reason is measured, and it is the one thing about this screen
 *    that could not be written the obvious way; the note lives with the code
 *    that does it.
 *
 * 2. WHAT site/departments/orbit.css LEAKS. It declares .axis-disc,
 *    .axis-text, .axis-role, .axis-line, .legend-ring and .legend-name
 *    unscoped - for the desk figure, and for the compact grid it draws at
 *    560px and under - and those are D's own class names for the same things.
 *    The stylesheet is not fenced off at the link: tools/mobile.gate.json
 *    still measures that grid on this route (fifteen tiles, the drawn rings
 *    hidden, every label at 14px or more), and those checks read the desk
 *    <main> this screen only hides. So orbit.css loads at every width exactly
 *    as master loads it, and every property it sets on those six names is
 *    answered below - including the ones D never mentions, which are the ones
 *    that bite: .axis-line is `display: none` between 561px and 860px, and
 *    .axis-text is absolutely positioned there. */

/* Built or not, this screen renders at one width only - site/phone-kit.css's
 * own fence (`[data-phone-region] { display: none }`), for the same reason and
 * against the same measured event. A Playwright full-page screenshot resizes
 * the viewport to 1x1 for an instant before it captures: every
 * matchMedia('(max-width: 860px)') listener on the page fires with
 * matches=true at innerWidth 1, and every builder that mounts on that crossing
 * mounts - at 1440. Measured here 2026-09-04 on this route
 * (['resize', 1, 1], ['MQ', true, 1], ['resize', 1440, 900], ['MQ', false,
 * 1440]) and true of the kit's own bar, menu and footer on all thirty-eight
 * routes. Without this line the stack rendered unstyled across the desk page
 * in the 1440 shot. With it the desk page is what master serves, whatever a
 * capture does to the viewport on its way past. */
[data-phone-screen='departments'] { display: none; }

@media (max-width: 860px) {
  html[data-phone='stack'][data-phone-kit='on'] .stack[data-phone-screen='departments'] {
    display: block;
  }

  /* The desk catalogue stands down once the stack is standing, and not
     before: html[data-phone='stack'] is written by this route's own script
     and only at phone width, so this rule cannot match a page that has not
     built its stack. The orbit is not removed - it is the same DOM master
     serves, and it comes back at 861px. */
  html[data-phone='stack'][data-phone-kit='on'] body > main { display: none; }

  /* --- the chevron ------------------------------------------------------ */
  /* site/phone-kit.css declares it for [data-phone-region] - the chrome - and
     a sheet is not a region of the chrome. The mock declares it once for the
     page (mobile-d.css:113) and every arm's rows carry one. KIT-REQUESTed. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .icon-chevron {
    display: grid;
    color: var(--resurs-ink-muted);
    flex: none;
  }

  /* --- the axis --------------------------------------------------------- */
  /* The rayed sun of the mark on his star's gradient, the role beside it. A
     role, never a name: the figure the desk draws around a president becomes
     one panel at the head of the catalogue. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .axis {
    margin-top: var(--resurs-m-gap);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--resurs-radius-panel);
    background: var(--resurs-tint);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .axis-disc {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--resurs-sun-gradient);
    color: var(--resurs-sun-ink);
    box-shadow: inset 0 0 0 1px var(--resurs-sun-rim), var(--resurs-sun-seat);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .axis-disc .glyph {
    display: grid;
  }
  /* orbit.css sizes the glyph as a fraction of the disc it centres on the
     rings; D hands the kit a 26px icon and lets it be 26px. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .axis-disc .icon {
    width: auto;
    height: auto;
  }
  /* orbit.css hangs this caption under an absolutely-centred disc (and only
     un-hangs it at 560px and under, which leaves 561-860px broken). In the
     stack the axis is a row, so the caption is simply the second column. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .axis-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 0;
    width: auto;
    text-align: left;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .axis-role {
    display: block;
    font-size: var(--resurs-size-nav);
    font-weight: 500;
    letter-spacing: normal;
  }
  /* `display: none` in orbit.css's base rule: the desk figure has no room for
     the line and D's panel is built around it. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .axis-line {
    display: block;
    margin-top: 0;
    font-size: var(--resurs-size-small);
    line-height: 1.4;
    color: var(--resurs-ink-soft);
  }

  /* --- the legend ------------------------------------------------------- */
  /* Two rows, hairline over hairline, each naming a contour with its count
     and linking to the sheet that holds it. The swatch is the ring itself:
     the inner contour's circle is the smaller one, which is the only thing
     left of the drawn rings on a phone. The two sheets are the switch, so the
     desk's segmented control is dropped rather than folded. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend {
    margin-top: 14px;
    display: grid;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 4px 0;
    border-top: 1px solid var(--resurs-hairline);
    font-size: var(--resurs-size-small);
    color: var(--resurs-ink);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend li:last-child a {
    border-bottom: 1px solid var(--resurs-hairline);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend-ring {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend-ring[data-ring='a'] {
    width: 14px;
    height: 14px;
    margin-inline: 4px;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend .legend-name {
    flex: 1;
    min-width: 0;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend .count,
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend .unit {
    color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend .count {
    font-variant-numeric: tabular-nums;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend .icon-chevron {
    margin-left: 4px;
  }

  /* --- the count line under a contour's heading ------------------------- */
  /* The mock's own .group-head (mobile-d.css:298), which the main page's
     mosaic uses for the same line. Scoped to this screen rather than declared
     for the page: lane phone-main needs the identical rule, and two arms
     writing one unscoped class is how the 2026-09-03 ports birthed a content
     module twice. KIT-REQUESTed for the shared vocabulary. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: var(--resurs-size-small);
    color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .group-head .count {
    font-variant-numeric: tabular-nums;
  }
}

/* A narrow catalogue reads as one document. Without pinned panels, the
 * overlap beat has no reach purpose; use the same gap as heading-to-axis and
 * contour-heading-to-rows. Keep the tablet's picked stack unchanged. */
@media (max-width: 560px) {
  html[data-phone='stack'][data-phone-kit='on'] .stack[data-phone-screen='departments'] > .sheet {
    position: relative;
    top: auto;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: var(--resurs-m-gap);
    scroll-margin-top: var(--resurs-bar-height);
  }

  html[data-phone='stack'][data-phone-kit='on'] .stack[data-phone-screen='departments'] > .sheet + .sheet {
    padding-top: 0;
  }

  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend a {
    display: grid;
    grid-template-columns: var(--resurs-m-gap) minmax(0, 1fr) 2ch max-content var(--resurs-size-small);
    min-height: var(--resurs-m-row);
    height: var(--resurs-m-row);
  }

  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend .count {
    text-align: right;
  }

  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='departments'] .legend .icon-chevron {
    margin-left: 0;
  }
}