/* The home page on the planner's tokens (prompt 47.1 Part 3; rebuilt by task 016;
   the approved composition restored by task 038).
   Every value is a variable from home/theme.css, which scripts/build-home.ts writes
   from src/ui/tokens.ts; the design lint reads this file.

   What this file describes is the owner's approved Home,
   docs/design/approved/home-v2.html (docs/design/approved/manifest.json): the
   1040px column, the public header, the hero with its meta row, the
   1.5fr/.8fr product section with its bordered side rail, the 78px steps, the
   160px catches, the trust row, About, the footer, and the 760 and 560
   breakpoints. The pack owns the anatomy; the tokens own the skin, and
   docs/design/content.json owns the words.

   One column of sections separated by a hairline: the hero with the only pair of
   actions, then what it does (with the baseline in its rail), what it catches,
   what it does with your tenant, and About. No cards, no grid of tiles, no pill:
   the hierarchy is type, space and a hairline. The header's text control, the
   three button weights and the footer link colour are the app's rules
   (src/ui/app.css) on the same tokens; home.test.ts holds them equal. */

* {
  box-sizing: border-box;
}
:root {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--primary-text);
  font-family: var(--font-sans);
  font-size: var(--t-3);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  line-height: var(--lh-heading);
  color: var(--primary-text);
}
p,
ul {
  margin: 0 0 12px;
  max-width: var(--measure);
}
ul {
  padding-left: 20px;
}
li {
  margin: 0 0 6px;
}
a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* A forced-colours mode paints no box-shadow, so the ring above is the whole
   focus indicator gone. This page never loads the app's stylesheet, so it
   carries the same outline fallback itself. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid;
    outline-offset: 1px;
  }
}

/* The small uppercase label the pack sets over every heading, hero included. */
.eyebrow {
  margin: 0 0 6px;
  font-size: var(--t-0);
  font-weight: var(--weight-strong);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--quiet-text);
  max-width: none;
}

/* The way into the product, where the pack puts it outside the hero: the header
   and the side rail. The arrow is the pack's affordance and is drawn, not
   written — the words on the page are content.json's. */
.enter::after {
  content: ' \2192';
}

/* ------------------------------------------------------------------ header
   The public header: the lockup left, the public links right. It is lighter
   than the planner's shell — no tabs, no Account, no signed-in state — and it
   sits in the same 1040px column as the page, so its hairline ends where the
   content does (docs/design/approved/home-v2.html `header`). */
header.app {
  width: 100%;
  max-width: calc(var(--w-home) + 2 * var(--pad));
  margin: 0 auto;
  min-height: var(--header);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
/* The lockup, the same one the planner's shell composes: the Threshold mark
   beside the live text IAMAI in IBM Plex Sans at the wordmark weight, with the
   brand's gap of 0.28 of the mark. No tagline (docs/brand/brand-manifest.json). */
header.app .wordmark {
  font-family: var(--font-sans);
  font-size: var(--t-4);
  font-weight: var(--weight-wordmark);
  color: var(--primary-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.005em;
}
header.app .wordmark svg {
  color: var(--brand-primary);
}
header.app .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* The public links: quiet text, the product entry in the accent. */
header.app .links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--t-1);
  flex-wrap: wrap;
}
header.app .links a {
  color: var(--secondary-text);
  text-decoration: none;
  white-space: nowrap;
}
header.app .links a:hover,
header.app .links a:focus-visible {
  text-decoration: underline;
}
header.app .links a.enter {
  color: var(--brand-primary);
}
/* The theme and Account controls: text in the header's colour, no button face. */
header.app .right .text-control {
  font: inherit;
  color: var(--secondary-text);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
header.app .right .text-control:hover,
header.app .right .text-control:focus-visible {
  color: var(--primary-text);
}

/* The column the approved Home pack sets: min(1040px, 100% - 40px)
   (docs/design/approved/home-v2.html, src/ui/tokens.ts ROUTE_WIDTHS.home). The
   header, the page and the footer share it, so every hairline on the page ends
   at the same edge. */
main.page {
  flex: 1;
  width: 100%;
  max-width: calc(var(--w-home) + 2 * var(--pad));
  padding: 0 var(--pad) 54px;
  margin: 0 auto;
  min-width: 0;
  /* `break-word`, not `anywhere`: a long URL still breaks rather than widening
     the page, and ordinary prose is never squeezed below a word (task 030). */
  overflow-wrap: break-word;
}
main.page a[href] {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- hero
   The pack's hero: the label, the display line, the lead, the two ways in, and
   a meta row of three claims short enough to be exactly true on their own. No
   box around any of it. */
.hero {
  padding: 76px 0 58px;
  max-width: 900px;
}
.hero h1 {
  font-size: var(--d-1);
  line-height: var(--lh-display);
  margin: 0 0 16px;
}
.hero .site-line {
  font-size: var(--t-lead-lg);
  color: var(--secondary-text);
  max-width: var(--measure-lead);
  margin: 0;
}
.hero .actions {
  margin: 24px 0 0;
}
.hero .meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 15px 0 0;
  max-width: none;
  color: var(--quiet-text);
  font-size: var(--t-1);
}

/* ---------------------------------------------------------------- sections
   A section: a hairline above it, its label, its heading, then its body. Four
   of these are the page; nothing here is a box. */
.band {
  border-top: 1px solid var(--line);
  padding: 42px 0;
}
.band h2 {
  font-size: var(--d-10);
  margin: 0 0 18px;
}
/* The product section's heading is a size down in the pack, and it sits inside
   the wider column rather than above both, so the rail's label starts level
   with it. */
.band-lead h2 {
  font-size: var(--d-13);
  margin: 0 0 10px;
}

/* -------------------------------------------------- what it does + the rail
   The pack's two-column relationship: the explanation, then a narrower rail
   holding the standard the plan is measured against. */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 36px;
  align-items: start;
}
/* The section's own lead paragraph, named rather than reached by position: the
   eyebrow above it and the rail beside it read at their own level. */
.product .lead {
  color: var(--secondary-text);
  margin: 0 0 10px;
  max-width: var(--measure);
}

/* Reads / Compares / Plans: the verb in its own column, the rest beside it. */
.steps {
  display: grid;
  gap: 13px;
  margin-top: 22px;
}
.step {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.step:first-child {
  padding-top: 0;
  border-top: 0;
}
.step b {
  color: var(--primary-text);
  font-weight: 500;
}
.step span {
  color: var(--secondary-text);
}

/* The rail: subordinate to the column beside it, separated by a border that
   moves from the left to the top when the two stack. */
.side {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.side .label {
  margin: 0;
  font-size: var(--t-0);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--quiet-text);
}
.side strong {
  display: block;
  margin: 6px 0 5px;
  font-size: var(--t-4);
  font-weight: 500;
  color: var(--primary-text);
}
.side p {
  font-size: var(--t-2);
  color: var(--secondary-text);
  margin: 0 0 10px;
}
.side p.small {
  margin-top: 18px;
  font-size: var(--t-1);
  color: var(--quiet-text);
}
.side p.small a {
  color: var(--brand-primary);
  text-decoration: none;
  white-space: nowrap;
}
.side p.small a:hover,
.side p.small a:focus-visible {
  text-decoration: underline;
}

/* ------------------------------------------------------------- the catches
   What kind of problem it is, then the example: two columns on a wide screen,
   stacked under 760. A hairline between rows, never a card. */
.catches {
  display: grid;
  gap: 12px;
  max-width: 860px;
}
.catch {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.catch:first-child {
  padding-top: 0;
  border-top: 0;
}
.catch b {
  color: var(--primary-text);
  font-weight: 500;
}
.catch span {
  color: var(--secondary-text);
}

/* --------------------------------------------------------------- the trust
   One row of three claims, each led by its own name. Specific enough to check:
   the third carries the source to read. */
.trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  color: var(--secondary-text);
  font-size: var(--t-2);
}
.trust span {
  flex: 1 1 280px;
}
.trust strong {
  color: var(--primary-text);
  font-weight: 500;
}
/* The full stop that closes the claim's name is punctuation, not a word: the
   words on the page are content.json's, so it is drawn here (the pack's
   `<strong>Read-only.</strong>`). */
.trust strong::after {
  content: '.';
}
.lnk {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- the about */
.about p {
  color: var(--secondary-text);
  max-width: var(--measure-lead);
  margin: 0;
}

.actions {
  margin: 16px 0 0;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  max-width: none;
}

/* The three button weights the app uses (src/ui/app.css): primary filled accent, secondary outlined accent, tertiary muted. */
.btn {
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-3);
  font-weight: 500;
  line-height: 1;
  height: var(--control);
  padding: 0 12px;
  border: 1px solid transparent;
  /* A control takes the control rung of the shape hierarchy, not the compact
     one (docs/brand/brand-manifest.json ui.radiusPx; every approved reference
     puts the control rung on the button face). */
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--secondary-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-primary);
  color: var(--on-brand);
  border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible {
  background: var(--brand-primary);
  color: var(--on-brand);
}
.btn-secondary {
  color: var(--brand-primary);
  background: transparent;
  border-color: var(--brand-primary);
}
.btn-secondary:hover,
.btn-secondary:active {
  color: var(--brand-primary);
  background: var(--brand-soft);
}
.btn-tertiary {
  color: var(--secondary-text);
  background: var(--secondary-surface);
  border-color: var(--strong-line);
}
.btn-tertiary:hover,
.btn-tertiary:active {
  color: var(--primary-text);
}

/* The approved dark controls (docs/design/approved/reference/: `.btn.primary`
   is `border-color:var(--brand-primary); background:var(--brand-soft);
   color:var(--brand-soft-text)`, and the plain `.btn` is a transparent face
   inside `var(--strong-line)` carrying `var(--primary-text)`).
   On the dark canvas a solid teal fill reads as a lit block; the approved
   treatment is the brand tint inside a brand edge, which sits at the same
   weight as everything around it. It is scoped to the dark theme on purpose:
   Mineral Teal's filled primary is approved as it stands and does not move
   because the dark palette did. Every value is a token, so this is the same
   palette under a different theme, not a second set of colours. */
:root[data-theme='dark'] .btn-primary {
  background: var(--brand-soft);
  color: var(--brand-soft-text);
  border-color: var(--brand-primary);
}
:root[data-theme='dark'] .btn-primary:hover,
:root[data-theme='dark'] .btn-primary:active,
:root[data-theme='dark'] .btn-primary:focus-visible {
  background: var(--brand-soft);
  color: var(--brand-soft-text);
}
:root[data-theme='dark'] .btn-secondary {
  color: var(--primary-text);
  background: transparent;
  border-color: var(--strong-line);
}
:root[data-theme='dark'] .btn-secondary:hover,
:root[data-theme='dark'] .btn-secondary:active {
  color: var(--primary-text);
  background: var(--brand-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .btn-primary {
    background: var(--brand-soft);
    color: var(--brand-soft-text);
    border-color: var(--brand-primary);
  }
  :root:not([data-theme]) .btn-primary:hover,
  :root:not([data-theme]) .btn-primary:active,
  :root:not([data-theme]) .btn-primary:focus-visible {
    background: var(--brand-soft);
    color: var(--brand-soft-text);
  }
  :root:not([data-theme]) .btn-secondary {
    color: var(--primary-text);
    background: transparent;
    border-color: var(--strong-line);
  }
  :root:not([data-theme]) .btn-secondary:hover,
  :root:not([data-theme]) .btn-secondary:active {
    color: var(--primary-text);
    background: var(--brand-soft);
  }
}

/* The footer the pack draws: the product's name on the left, the public links
   on the right, in the same column as the page above it. The link colour is the
   app's rule (src/ui/app.css). */
footer.app {
  width: 100%;
  max-width: calc(var(--w-home) + 2 * var(--pad));
  margin: 0 auto;
  padding: 22px var(--pad) 34px;
  border-top: 1px solid var(--line);
  color: var(--secondary-text);
  font-size: var(--t-1);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer.app a {
  color: var(--secondary-text);
}

/* ---------------------------------------------------------------- narrower
   The pack's own breakpoints. At 760 the product and its rail become one
   column, the rail's border moves to the top, and a catch stacks its label over
   its example. At 560 the gutters tighten, the hero gives back some of its
   space, and the first public link stands down — never the product entry. */
@media (max-width: 760px) {
  .hero h1 {
    font-size: var(--d-4);
  }
  .product {
    grid-template-columns: 1fr;
  }
  .side {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .catch {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media (max-width: 560px) {
  header.app,
  main.page,
  footer.app {
    padding-left: 12px;
    padding-right: 12px;
  }
  header.app {
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  header.app .right,
  header.app .links {
    gap: 14px;
  }
  header.app .links a:first-child {
    display: none;
  }
  .hero {
    padding: 54px 0 44px;
  }
  .hero h1 {
    font-size: var(--d-6);
  }
  .hero .site-line {
    font-size: var(--t-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
  }
}