/* ===========================================================================
   Briefcase — product teardown page.

   Shares tokens.css with the tool, unchanged, so the essay and the thing it
   describes read as one product. Role tokens only — never a raw ramp value —
   which is the same rule the tool's stylesheet follows.

   This page is a long-form essay: no cards, no widgets, no hero image. Every
   size, space and color below comes from the token file; the only additions
   are two roles the core system does not name (a kicker color and a list
   marker), mapped once here.
   =========================================================================== */

@import './tokens.css';

/* Two roles the portable core does not name. Mapped here once per scheme
   and used by role below, so dark mode keeps working for free. On a
   near-black page the light steps are far too dark to read as an accent. */
:root {
  --kicker-text: var(--primary-600); /* section eyebrows */
  --marker: var(--primary-500); /* list markers, decision rule */
}

@media (prefers-color-scheme: dark) {
  :root {
    --kicker-text: var(--primary-300);
    --marker: var(--primary-400);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--size-16);
  line-height: var(--lh-16);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--text-heading);
  margin: 0;
}

h1 {
  font-size: var(--size-39);
  line-height: var(--lh-39);
  letter-spacing: var(--ls-39);
  font-weight: var(--w-39);
}

h2 {
  font-size: var(--size-31);
  line-height: var(--lh-31);
  letter-spacing: var(--ls-31);
  font-weight: var(--w-31);
}

h3 {
  font-size: var(--size-20);
  line-height: var(--lh-20);
  letter-spacing: var(--ls-20);
  font-weight: var(--w-20);
  margin-top: var(--space-32);
}

h4 {
  font-size: var(--size-16);
  line-height: var(--lh-16);
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-16);
  max-width: var(--measure-16);
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 1px var(--space-4);
  border-radius: var(--radius);
}

strong {
  color: var(--text-heading);
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--fill);
  color: var(--on-fill);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius);
  z-index: 100;
}

.skip:focus {
  left: var(--space-16);
  top: var(--space-16);
}

/* ---------- shell ---------- */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-24);
}

.topbar {
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--size-13);
  line-height: var(--lh-13);
  letter-spacing: var(--ls-13);
}

.topbar .wrap {
  display: flex;
  gap: var(--space-16);
  justify-content: flex-end;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.layout {
  display: block;
}

@media (min-width: 1000px) {
  .layout {
    display: grid;
    grid-template-columns: 214px minmax(0, 1fr);
    gap: var(--space-48);
    align-items: start;
  }
}

/* ---------- hero ---------- */

.hero {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-48) 0;
}

.eyebrow {
  font-size: var(--size-13);
  line-height: var(--lh-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kicker-text);
  margin: 0 0 var(--space-12);
}

.hero h1 {
  max-width: 24ch;
}

.lede {
  font-size: var(--size-20);
  line-height: var(--lh-20);
  letter-spacing: var(--ls-20);
  color: var(--text-body);
  max-width: var(--measure-20);
  margin: var(--space-16) 0 var(--space-24);
}

.byline {
  font-size: var(--size-13);
  line-height: var(--lh-13);
  color: var(--text-muted);
  margin: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius);
  font-size: var(--size-16);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.btn-primary {
  background: var(--fill);
  color: var(--on-fill);
  border-color: var(--fill-border);
}

.btn-primary:hover {
  background: var(--fill-hover);
  color: var(--on-fill);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-heading);
  border-color: var(--border-default);
}

.btn-secondary:hover {
  background: var(--neutral-fill-hover);
  border-color: var(--border-strong);
  color: var(--text-heading);
}

/* ---------- facts strip ----------
   Four numbers under the hero, so a reader who scans and leaves still takes
   the shape of the argument with them. Same component as the sibling
   project, so the two heroes read as one family. */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-32);
}

.fact {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
}

.fact-value {
  font-size: var(--size-25);
  line-height: var(--lh-25);
  letter-spacing: var(--ls-25);
  font-weight: var(--w-25);
  color: var(--text-heading);
  display: block;
}

.fact-label {
  font-size: var(--size-13);
  line-height: var(--lh-13);
  color: var(--text-muted);
  margin-top: var(--space-4);
  display: block;
}

/* ---------- contents rail ---------- */

.toc {
  padding-top: var(--space-32);
}

.toc-title {
  font-size: var(--size-13);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--space-12);
}

.toc ol {
  margin: 0;
  list-style: none;
  padding-left: 0;
  font-size: var(--size-13);
  line-height: var(--lh-13);
}

.toc li {
  margin-bottom: var(--space-8);
}

@media (min-width: 1000px) {
  .toc {
    position: sticky;
    top: var(--space-32);
    padding-top: var(--space-64);
  }

  .toc ol {
    list-style: none;
    padding: 0;
    border-left: 1px solid var(--border-subtle);
  }

  .toc li {
    margin: 0;
  }

  .toc a {
    display: block;
    padding: var(--space-8) var(--space-12);
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
  }

  .toc a:hover {
    color: var(--text-body);
  }

  .toc a.active {
    color: var(--link);
    border-left-color: var(--fill);
    font-weight: 600;
  }
}

/* ---------- sections ---------- */

main {
  padding-bottom: var(--space-96);
}

section {
  padding-top: var(--space-64);
  scroll-margin-top: var(--space-24);
}

section > h2 {
  max-width: var(--measure-25);
}

section > h2 + p {
  margin-top: var(--space-16);
}

.section-kicker {
  font-size: var(--size-13);
  line-height: var(--lh-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
}

ul,
ol {
  max-width: var(--measure-16);
  padding-left: var(--space-24);
}

li {
  margin-bottom: var(--space-8);
}

.jtbd {
  margin: var(--space-24) 0;
  padding: var(--space-16) var(--space-24);
  border-left: 3px solid var(--marker);
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--size-20);
  line-height: var(--lh-20);
  letter-spacing: var(--ls-20);
  color: var(--text-heading);
  max-width: var(--measure-20);
}

.jtbd p {
  margin: 0;
  max-width: none;
}

.jtbd .jtbd-label {
  display: block;
  font-size: var(--size-13);
  line-height: var(--lh-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

/* ---------- callouts ---------- */

.callout {
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-24);
  margin: var(--space-24) 0;
  max-width: var(--measure-16);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout h4 {
  margin-bottom: var(--space-8);
}

.callout-notice {
  background: var(--notice-tint);
  border-color: var(--notice-line);
}

.callout-notice h4 {
  color: var(--notice-text);
}

.callout-info {
  background: var(--info-tint);
  border-color: var(--info-line);
}

.callout-info h4 {
  color: var(--info-text);
}

.callout-warning {
  background: var(--warning-tint);
  border-color: var(--warning-line);
}

.callout-warning h4 {
  color: var(--warning-text);
}

.callout-success {
  background: var(--success-tint);
  border-color: var(--success-line);
}

.callout-success h4 {
  color: var(--success-text);
}

/* A claim pulled out of the prose. Not a quotation — the essay's own
   load-bearing sentence, set larger so it can be found again on a re-read. */
.pullquote {
  margin: var(--space-32) 0;
  padding-left: var(--space-24);
  border-left: 3px solid var(--marker);
  max-width: var(--measure-20);
  font-size: var(--size-20);
  line-height: var(--lh-20);
  letter-spacing: var(--ls-20);
  color: var(--text-heading);
  font-weight: 600;
}

.pullquote p {
  margin: 0;
  max-width: none;
}

/* ---------- TL;DR ---------- */

.tldr ul {
  list-style: none;
  padding: 0;
  max-width: var(--measure-16);
}

.tldr li {
  position: relative;
  padding-left: var(--space-32);
  margin-bottom: var(--space-16);
}

.tldr li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marker);
}

/* ---------- decisions ---------- */

.decision {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--marker);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  margin: var(--space-24) 0;
}

.decision > h3 {
  margin-top: 0;
  margin-bottom: var(--space-12);
  max-width: var(--measure-25);
}

.decision > p:last-child {
  margin-bottom: 0;
}

.decision-num {
  font-size: var(--size-13);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-4);
}

.decision-risk {
  font-size: var(--size-13);
  line-height: var(--lh-13);
  color: var(--text-muted);
  margin: 0 0 var(--space-12);
}

.tradeoff {
  list-style: none;
  padding: 0;
  margin: var(--space-16) 0 0;
  max-width: var(--measure-16);
}

.tradeoff li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

.tradeoff .k {
  font-size: var(--size-13);
  line-height: var(--lh-16);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- tables ---------- */

.table-scroll {
  overflow-x: auto;
  margin: var(--space-24) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: var(--size-13);
  line-height: var(--lh-16);
}

th,
td {
  text-align: left;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

thead th {
  background: var(--surface-sunken);
  color: var(--text-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--size-13);
  white-space: nowrap;
}

tbody th {
  color: var(--text-heading);
  font-weight: 600;
}

tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: none;
}

td.num {
  white-space: nowrap;
}

caption {
  caption-side: bottom;
  text-align: left;
  padding: var(--space-12) var(--space-16);
  font-size: var(--size-13);
  line-height: var(--lh-16);
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}

/* The positioning matrix reads as a grid of verdicts, so the cell values are
   short words. Color is never the only signal: the word is the signal. */
.yes {
  color: var(--success-text);
  font-weight: 600;
}

.no {
  color: var(--error-text);
  font-weight: 600;
}

.partial {
  color: var(--warning-text);
  font-weight: 600;
}

.unclear {
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- evidence ---------- */

.evidence {
  list-style: none;
  padding: 0;
  max-width: var(--measure-16);
}

.evidence li {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}

.evidence li:last-child {
  border-bottom: none;
}

.evidence .src {
  color: var(--text-heading);
  font-weight: 600;
}

.evidence .yr {
  color: var(--text-muted);
  font-size: var(--size-13);
}

/* Marks a roadmap row that has since been built, so the RICE score can be
   read as the estimate it was rather than as a plan. */
.shipped {
  display: inline-block;
  margin-left: var(--space-8);
  padding: 1px var(--space-8);
  border: 1px solid var(--success-line);
  border-radius: var(--radius);
  background: var(--success-tint);
  color: var(--success-text);
  font-size: var(--size-13);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

blockquote {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-16);
  border-left: 2px solid var(--border-default);
  color: var(--text-body);
  font-style: italic;
}

blockquote p {
  margin: 0;
}

/* ---------- ERRC grid ---------- */

.errc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-16);
  margin: var(--space-24) 0;
}

.errc-cell {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-24);
}

.errc-cell h4 {
  margin-bottom: var(--space-8);
}

.errc-cell ul {
  padding-left: var(--space-16);
  margin: 0;
  font-size: var(--size-13);
  line-height: var(--lh-16);
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-32) 0 var(--space-64);
  font-size: var(--size-13);
  line-height: var(--lh-16);
  color: var(--text-muted);
}

footer p {
  max-width: var(--measure-16);
}

footer a {
  color: var(--link);
}

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  .wrap {
    padding: 0 var(--space-16);
  }

  .hero {
    padding: var(--space-32) 0;
  }

  h1 {
    font-size: var(--size-31);
    line-height: var(--lh-31);
    letter-spacing: var(--ls-31);
  }

  h2 {
    font-size: var(--size-25);
    line-height: var(--lh-25);
    letter-spacing: var(--ls-25);
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- TL;DR: the whole page in five sentences ---------- */
.brief {
  margin: var(--space-32) 0 0;
  padding: var(--space-24);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--fill);
  border-radius: var(--radius-lg);
}

.brief h2 {
  margin-top: var(--space-4);
}

.brief-definition {
  color: var(--text-muted);
  font-size: var(--size-13);
  line-height: var(--lh-13);
  margin: 0 0 var(--space-12);
}

.brief-body {
  font-size: var(--size-20);
  line-height: var(--lh-20);
  letter-spacing: var(--ls-20);
  color: var(--text-heading);
  margin: 0;
  max-width: var(--measure-20);
}

@media (max-width: 720px) {
  .brief {
    padding: var(--space-16);
  }

  .brief-body {
    font-size: var(--size-16);
    line-height: var(--lh-16);
  }
}