/* ════════════════════════════════════════════════════════════════════════
   css/work-software-register.css — S.03, "The firm's own systems", ONLY.
   service.tnaado.ca · /work/software · loaded AFTER css/work-software.css.

   WHY A THIRD SHEET RATHER THAN EDITS TO THE SECOND. css/work-software.css
   is the whole page — the app carousel, the client-build strip and this
   register share it, and three other agents are live in this repo today.
   Everything below is scoped to .sysreg, a class that exists on four
   elements on one page, so this file cannot reach anything else and can be
   deleted in one line if the pass is rejected.

   THE DEFECT IT ANSWERS. Ethan: "its to flat any reader will just egt
   overhelmed". Measured before the pass, at 1440: the section ran 2901px,
   the four family headers were typographically identical, and nineteen rows
   carried the same 15px name, the same 13px sentence and the same red OPEN.
   Grouping had already been done and had not fixed it. Nineteen EQUAL things
   read as a wall whether or not they sit in four boxes — the defect is
   undifferentiated volume, and the fix has to be unequal weight.

   TOKENS ONLY. Every colour, family, easing and rule weight below is a
   variable declared in css/work.css :root, and the two geometries that are
   not — the 2.25rem × 2px family tick and the h3 type step on a lead — are
   both lifted verbatim from rules already in css/work.css (.eyebrow__rule
   and the h3 clamp) rather than invented here.

   NOTHING HERE HIDES CONTENT. There is no display:none on a text run, no
   content-visibility, no max-height clip and no hidden="until-found" — see
   the note in css/work-software.css for why that attribute is a trap inside
   a <details>. With script off the register paints in full.
   ════════════════════════════════════════════════════════════════════════ */

/* ── THE ARGUMENT COLUMN ──────────────────────────────────────────────────
   The register was a single 1040px-wide stack, which is where most of the
   flatness actually lives: a row's name sits at x=0 and its affordance at
   x=1040, with 500px of nothing between them, nineteen times. That reads as
   a spreadsheet with the gridlines turned off.

   So each family becomes two columns: a narrow left column carrying the
   family name and the one line that says what the family IS, and a wider
   right column carrying the systems. The reader meets the argument for a
   family before its evidence, at every family, without a single extra word
   of chrome — the gloss simply moves out of the vertical flow.

   It is also the asymmetry the page was missing. A marginal note beside a
   column of evidence is an editorial layout; a full-width stack of equal
   rows is a table. Below 1000px it collapses to one column in source order,
   which is already the correct reading order. */

.sysreg { margin-top: 2.75rem; }
.sysreg:first-of-type { margin-top: 2rem; }

@media (min-width: 1000px) {
  .sysreg {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 4.5vw, 4rem);
    align-items: start;
  }
  /* The gloss must sit HARD UNDER its family name, not opposite the middle of
     the lead. Measured on the first build of this sheet: putting the gloss in
     grid-row 2 dropped it 120px below the header, because row 2 could not
     start until the lead in column 2 had finished row 1. So the lead SPANS
     rows 1 and 2 and the list takes row 3 — the marginal column then reads as
     one block of header-plus-gloss, which is what it is. */
  .sysreg > .sysfam__hd   { grid-column: 1; grid-row: 1; }
  .sysreg > .sysreg__gloss{ grid-column: 1; grid-row: 2; }
  .sysreg > .sysd--lead   { grid-column: 2; grid-row: 1 / span 2; }
  .sysreg > .sysfam__list { grid-column: 2; grid-row: 3; }
  /* The workshop has no lead and no list — one run of prose across column 2. */
  .sysreg > .sysreg__run  { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── THE FAMILY HEAD, AND WHERE THE ACCENT WENT ───────────────────────────
   Before: every family header drew a 1040px border-bottom in --red and every
   row printed OPEN in --red-ink. That is eighteen red marks in one section,
   which is not an accent, it is a second body colour — and because they were
   spread evenly the eye had nowhere to land.

   After: the family rule goes to the neutral hairline and the red becomes a
   2.25rem tick before the family name — the same geometry as .eyebrow__rule
   in css/work.css, so it reads as the site's existing mark rather than a new
   one. Three ticks, three lead labels, six red marks, each one structural. */

.sysreg > .sysfam__hd,
.sysfam--demo > .sysfam__hd {
  border-bottom-color: var(--hair-ink);
  gap: .75rem;
  margin-bottom: .6rem;
  padding-bottom: .6rem;
}
/* "How they work" is the last block in S.03 and it is NOT part of the register,
   but it is a .sysfam and it kept the old full-width red rule. Left alone it
   became the only 1136px red line in the section — which read as a louder
   heading than the three families carrying the argument, an inversion this
   pass caused and has to clear up. It takes the same tick and the same
   hairline; it is a peer, not a headline. Its rows are untouched. */
.sysfam__tick {
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--red);
  flex: 0 0 auto;
  align-self: center;
}
.sysreg > .sysfam__hd .sysfam__name { letter-spacing: .1em; }

/* The one line that says what the family is. Deliberately quiet: it sets up
   the evidence, it is not the evidence. */
.sysreg__gloss {
  margin: 0 0 1.5rem;
  max-width: 34ch;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--dim-ink);
}
@media (min-width: 1000px) {
  .sysreg__gloss { margin-bottom: 0; }
}

/* ── THE LEAD SYSTEM ──────────────────────────────────────────────────────
   One per family, and the whole point of the pass. Ethan named them: the CMS
   the newsroom files through, the register every camera is booked out of,
   the ledger invoices come off. They step up to the h3 scale already in
   css/work.css — h2 2.125rem, lead 1.4375rem, row .9375rem — so the section
   has three type sizes doing three jobs instead of one doing all of them.

   Its affordance drops to its own line, left-aligned under the sentence,
   instead of floating at the far right. On the row that matters most, the
   promise sits where the eye already is. */

.sysd--lead > .sysd__sum {
  grid-template-columns: minmax(0, 1fr);
  padding: .2rem 0 1.75rem;
}
.sysd--lead .sysd__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.9vw, 1.4375rem);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--bone);
}
.sysd--lead .sysd__what {
  margin-top: .55rem;
  max-width: 48ch;
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--bone-2);
}
.sysreg .sysd--lead .sysd__open {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: start;
  margin-top: .9rem;
  font-size: .6875rem;
  color: var(--red-ink);
}

/* THE LEAD THAT CANNOT OPEN. Mainframe Central Billing has two real captures
   and both publish the firm's own revenue and payroll, so neither can go on
   a page a client reads. Left as a silent flat row among openable ones it
   read as a component that failed; stated plainly it is the most credible
   sentence in the section. Mono and rule-marked so it reads as an annotation
   on the record rather than as more product copy. */
.sysd__nb {
  grid-column: 1;
  grid-row: 3;
  margin: .95rem 0 0;
  padding-left: .85rem;
  border-left: 1px solid var(--hair-ink);
  max-width: 58ch;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.85;
  color: var(--dim-ink);
}

/* ── THE SUPPORTING ROWS ──────────────────────────────────────────────────
   Unchanged in kind — still a <details> with a name, a sentence and a
   chevron — and changed in two ways that cost no height.

   1. THE LABEL IS THE SCREEN, NOT THE WORD "OPEN". Fourteen rows promised
      "OPEN" and none of them said what for. The label is now the capture's
      own subject — Review queue, Earnings, Inventory — lifted from the
      captions those panels carry. Every capture inside an open panel keeps
      its own caption; the row prints the lead screen's name only. A closed
      row carries three facts: what the system is, what it does, and what you
      will be shown.
      It is no longer aria-hidden either: <details> announces expanded state
      on its own, but it cannot announce what is inside.

   2. IT IS NO LONGER RED. --dim-ink is 9.4:1 on ink and reads perfectly as
      an affordance next to a chevron; it just stops competing with the three
      rows that matter. */

.sysreg .sysd__open {
  color: var(--dim-ink);
  align-self: center;
}
.sysreg .sysfam__list > li:last-child { border-bottom: 0; }
.sysreg .sysd__sum { padding: .8rem 0; gap: .35rem 1.5rem; }

@media (hover: hover) and (pointer: fine) {
  .sysreg .sysd__sum:hover .sysd__open { color: var(--bone); }
}

/* ── THE WORKSHOP ─────────────────────────────────────────────────────────
   Four systems with no product capture, no customer and nothing a buyer can
   test: Vault and Workflow, TNAADO Command, Command Central, Applied AI
   Research. As four full-weight rows they spent four blocks of height saying
   the firm has internal tooling, and each one sat under a chevron with
   nothing behind it.

   They are now one run of prose. Every name survives, every claim survives,
   and the paragraph says the thing four separate rows could not: that these
   are grouped because none of them ships. It carries no tick, so it is the
   one family on the section with no red on it at all — which is the honest
   weighting. This is the "shorter rather than restructured" answer, applied
   to the four rows where it is true instead of to the section. */

.sysreg--shop { margin-top: 3rem; }
.sysreg--shop > .sysfam__hd { border-bottom-color: var(--hair-ink); }
.sysreg--shop .sysfam__name { color: var(--dim-ink); }
.sysreg__run {
  margin: 0;
  max-width: 66ch;
  font-size: .8125rem;
  line-height: 1.85;
  color: var(--dim-ink);
}
.sysreg__run b { font-weight: 500; color: var(--bone-2); }

/* ── MOTION ───────────────────────────────────────────────────────────────
   Nothing new is animated here. The only transition this sheet introduces is
   the hover colour above, and it is dropped with the rest. */
@media (prefers-reduced-motion: reduce) {
  .sysreg .sysd__open { transition: none; }
}


/* ── NARROW, AND THE RULE THAT HAD TO BE REVERSED ─────────────────────────
   css/work-software.css hides the affordance label entirely below 560px:

       @media (max-width: 560px) { .sysd__open .sysd__word { display: none } }

   That was the right call when the label read "Open", which a chevron already
   says. It is the wrong call now that the label IS the value — "Publishing
   queue", "Earnings", "Inventory" — because 390px is exactly the width where
   a reader most needs to know what a row opens onto before spending a tap on
   it. Measured before this override: every label computed display:none at 390
   and the register showed twelve bare chevrons.

   Restored WITHOUT buying height. The label moves onto the name's own line
   rather than onto a line of its own, and the sentence below it is released
   to span both columns — at 390 that widens the description from 318px to the
   full 350px, which wins back roughly as many lines as the longer names cost.
   The whole summary stays the hit area, so the target is the row, not the
   label. */
@media (max-width: 560px) {
  .sysreg .sysd__open .sysd__word { display: inline; }
  .sysreg .sysfam__list .sysd__open {
    grid-row: 1;
    align-self: baseline;
    font-size: .625rem;
    letter-spacing: .05em;
  }
  .sysreg .sysfam__list .sysd__what { grid-column: 1 / -1; grid-row: 2; }
  .sysreg .sysd__sum { padding: .8rem 0; gap: .3rem .6rem; }
  /* The lead keeps its label on its own line — there are three of them, and
     on the rows that carry the section the promise should not be a footnote
     tucked beside the name. */
  .sysreg .sysd--lead .sysd__open { font-size: .6875rem; letter-spacing: .08em; }

  /* The stacked column pays for the argument in height, so the rhythm tightens
     to pay some of it back. Spacing only — no sentence is dropped on mobile
     that a 1440 reader gets. */
  .sysreg { margin-top: 2.25rem; }
  .sysreg--shop { margin-top: 2.5rem; }
  .sysreg__gloss { margin-bottom: 1.1rem; }
  .sysd--lead > .sysd__sum { padding-bottom: 1.25rem; }
  .sysd__nb { line-height: 1.7; margin-top: .8rem; }
}


/* ── PHONE: THE GLOSS COLLAPSES ──────────────────────────────────────────
   MEASURED REGRESSION, fixed rather than shipped. The restructure took the
   register from 2901px to 2806px at 1440 — but on a phone it went the WRONG
   WAY, 2418px to 2670px (+10.4%), because above 1000px each family gloss sits
   in its own marginal column and costs nothing, while below that it stacks and
   pays full height three times over.

   Ethan's complaint was that these pages overwhelm a reader, and a phone is
   where that bites hardest — so a change that improves desktop and worsens
   mobile has only half solved it.

   The gloss is scaffolding: it sets up the evidence, it is not the evidence.
   The family NAME already says "Decision queues" and the rows under it prove
   it, so on a narrow screen the sentence is the cheapest thing in the section
   to lose. It stays in the DOM for screen readers and for the JS-vs-no-JS text
   diff, which the whole site must keep passing — it is visually collapsed, not
   removed. */
@media (max-width: 34rem) {
  .sysreg__gloss {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }
}