/* ==========================================================================
   workley use cases — use-cases.css
   Additive layer over style.css, same contract as use.css. Implements
   docs/WORKLEY_USECASES_PAGE_BRIEF.md under the locked system
   (AI_LAB_BRAND_SYSTEM.md DARK · MONO · Geist/Geist Mono).
   Page identity: the ledger — ruled rows, mono tags, hairlines. The one
   designed inversion: in the gate diagram the HUMAN stages carry full ink.
   ========================================================================== */

/* 0 · Page-level polish (this page only; landing stays byte-locked) */
.intro-sub, .section-line, .cell-line, .refuse-line, .next-line { text-wrap: pretty; }
.footnote { max-width: 70ch; text-wrap: pretty; }

/* 0b · Intro — same instrument as the walkthrough's */
.intro {
  padding-top: calc(var(--nav-h) + clamp(72px, 11vh, 128px));
  padding-bottom: var(--pad-section);
}
.intro-eyebrow { margin-bottom: 28px; color: var(--ink-2); }  /* claim-bearing */
.intro-sub { margin-top: 28px; font-size: 1.0625rem; max-width: 58ch; }
.intro-meta {
  margin-top: 22px;
  font: 500 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);   /* carries the zero-external-requests claim */
  max-width: none;
}
.nb { white-space: nowrap; }

.nav-link[aria-current="page"] { color: var(--ink); }

/* 1 · FROM THE BRIEF — the ledger rows */
.loop {
  border-top: 1px solid var(--line);
  padding: clamp(24px, 4vw, 36px) 0;
}
.loop:last-of-type { border-bottom: 1px solid var(--line); }
.loop-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
}
.loop-num {
  font: 500 13px/1.65 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);   /* the brief's own line numbers — state-bearing */
}
.loop-name {
  font: 500 1.0625rem/1.5 var(--font-mono);
  color: var(--ink);
  margin: 0;
}
.loop-hours {
  font: 500 14px/1.65 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.loop-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 18px;
  padding-left: 72px;   /* 56px num column + 16px gap */
}
.cell-label {
  font: 500 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);   /* by hand / approved — the row's axis, state-bearing */
  margin-bottom: 10px;
}
.cell-line { color: var(--ink-2); max-width: 46ch; }

#brief-loops .fig-note { margin-top: 24px; }

/* 2 · THE CATALOG — four families, 2×2 */
.fam-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.fam {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(20px, 3vw, 28px);
  transition: border-color 0.18s ease;
}
@media (hover: hover) {
  .fam:hover { border-color: var(--line-2); }
}
.fam-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.fam-label {
  font: 500 12px/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.fam-surface {
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-2);   /* the grade disclosure — state-bearing */
  white-space: nowrap;
}
.fam-claim { margin-top: 14px; color: var(--ink-2); max-width: 60ch; }
.fam-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font: 400 14px/1.65 var(--font-mono);
}
.fam-list li {
  border-top: 1px solid var(--line);
  padding: 11px 0;
  color: var(--ink-2);
}

/* 2b · WHO IT FITS */
.fit-note { margin-top: clamp(24px, 4vw, 36px); color: var(--ink-2); max-width: 66ch; text-wrap: pretty; }

/* 3 · WHAT IT REFUSES — ruled rows, equal weight to the capabilities */
.refuse-list { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.refuse-row {
  display: grid;
  grid-template-columns: 56px 200px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.refuse-row:last-child { border-bottom: 1px solid var(--line); }
.refuse-mark {
  font: 400 14px/1.65 var(--font-mono);
  color: var(--ink-2);   /* a refusal is a claim, never decoration */
}
.refuse-term { font: 500 14px/1.65 var(--font-mono); color: var(--ink); }
.refuse-line { color: var(--ink-2); max-width: 56ch; }

/* 3b · The gate — landing pipeline inverted: human stages in full ink */
.gate-wrap { margin-top: clamp(40px, 6vw, 56px); margin-bottom: 0; }
.gate-pipe b { color: var(--ink); font-weight: 400; }
.gate-note {
  margin-top: 14px;
  font: 500 12px/1.5 var(--font-mono);
  color: var(--ink-2);   /* the gate claim — state-bearing */
}

/* 4 · NEXT */
.next-line { margin-top: 16px; color: var(--ink-2); max-width: 58ch; }
.next-row {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 5 · Responsive */
@media (max-width: 400px) {
  /* "work with workley" is too wide beside the chip and button at phone
     width — the page itself is the label there. */
  .nav-link[aria-current="page"] { display: none; }
}
@media (max-width: 900px) {
  .fam-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  /* "use cases" is 3ch wider than the label the siblings keep at this
     width ("use it") — reclaim the difference so the row fits 360px. */
  .nav-inner { gap: 6px; }
  .nav-right { gap: 4px; }
  .nav-btn { padding: 9px 5px; }
}
@media (max-width: 720px) {
  .loop-head { grid-template-columns: 32px minmax(0, 1fr); }
  .loop-hours { grid-column: 2; }
  .loop-cols { grid-template-columns: minmax(0, 1fr); padding-left: 0; margin-top: 20px; }
  .refuse-row { grid-template-columns: 32px minmax(0, 1fr); }
  .refuse-line { grid-column: 2; }
}