/* Models page. Loaded after site.css and built only from its tokens: the page head with its contents
   list, the search model ladder, the prompt recipes, and the closing address. Section heads, the tools
   index, the CTA row, the address block and the footer all come from site.css unchanged. Type follows
   the system tokens: --font-display / --font-text for names and prose, --font-mono for numerals, tool ids
   and anything you would type; no italics, emphasis is weight and colour. */

/* ------------------------------------------------------------------ page head */
.hero--page .hero__grid { row-gap: 4px; }
.hero--page h1 { font-size: clamp(2.75rem, 1.2rem + 4.6vw, 5rem); max-width: none; }

/* On this page: a hairline-ruled contents list that rests on the horizon rule */
.contents > .label { display: block; padding-bottom: 12px; }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline;
  min-height: 48px; padding: 12px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.contents .num { font-size: .8125rem; }
.contents .mono { padding-left: 16px; font-weight: 400; }   /* the mono face has one weight; never fake a bolder one */
.contents a:hover { color: var(--accent); }
.contents a:focus-visible { outline-offset: -2px; }
.contents.enter { animation-delay: 240ms; }

/* ------------------------------------------------------------------ the ladder
   Phones stack the three tiers, fastest first, with each extended thinking model hanging off its
   standard sibling. From 640px each tier is a row with the two siblings side by side under column
   labels. From 900px the tiers become columns, their discs are stops on one speed scale, and
   Standard / Extended thinking become rows labelled in the margin: across for depth, down for thinking. */
.ladder { --stop: 22px; margin-top: clamp(26px, 3.6vw, 48px); }
.ladder__how { max-width: 34ch; margin-bottom: 22px; }
.ladder__axis, .ladder__key { display: none; }
.ladder__tiers { list-style: none; margin: 0; padding: 0; }

.tier__head {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 0;
  border-top: 1px solid var(--rule-strong);
}
.tier__hint { margin-left: auto; }
/* The disc grows with the tier's depth; the default tier's disc keeps its glow */
.tier__disc {
  flex: none; width: var(--disc); height: var(--disc); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--venus-1) 0%, var(--venus-2) 48%, var(--venus-3) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.tier--1 { --disc: 10px; }
.tier--2 { --disc: 14px; }
.tier--3 { --disc: 18px; }
.tier--2 .tier__disc { box-shadow: 0 0 0 4px var(--glow); }

.model { padding: 16px 0 22px; border-top: 1px solid var(--rule); min-width: 0; }
.model h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.12; letter-spacing: -.022em; }
.model__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.model__flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--accent); transform: translateY(-2px);
}
.model__flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
/* The note is the model's character in one line; the use is what to send it */
.model__note { margin-top: 6px; font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.model__use { margin-top: 6px; max-width: 46ch; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; text-wrap: pretty; }
/* The default is marked twice: its flag, and the accent rule it sits under */
.model--default { border-top-color: var(--accent); }
/* Phones: the sibling hangs off its standard model on a hairline elbow */
.model--ext { position: relative; padding: 0 0 24px 30px; border-top: 0; }
.model--ext::before {
  content: ""; position: absolute; left: 8px; top: -12px; width: 14px; height: 26px;
  border-left: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); border-bottom-left-radius: 8px;
}

/* ------------------------------------------------------------------ recipes
   Each recipe is the tool's name and id and, beside it, the parts of a good prompt as hairline slots
   joined by + (or by an arrow where the order matters), then a tip and real examples set in mono,
   because those are what you would type. On phones the slots stack and the joiners hang in the
   numeral gutter; from 640px they run on one line and wrap like a formula. */
.recipes { list-style: none; margin: clamp(26px, 3.6vw, 48px) 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.recipe {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline;
  padding: 20px 0 24px; border-top: 1px solid var(--rule);
  scroll-margin-top: 16px;
}
.recipe > .num { grid-column: 1; grid-row: 1; font-size: .8125rem; }
.recipe__title { grid-column: 2; grid-row: 1; min-width: 0; }
.recipe__title h3 { font-size: clamp(1.375rem, 1.25rem + .4vw, 1.5rem); line-height: 1.15; letter-spacing: -.02em; }
.recipe__title .mono { display: block; margin-top: 4px; }
.recipe__body { grid-column: 2; grid-row: 2; min-width: 0; margin-top: 16px; }

.slots { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: 6px; }
.slots li {
  position: relative; max-width: 100%;
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-2);
  font-size: .9375rem; font-weight: 400; line-height: 1.4; color: var(--ink);
}
.slots li + li::before {
  content: "+"; content: "+" / "";
  position: absolute; left: -26px; top: 50%; width: 20px; transform: translateY(-50%);
  text-align: center; font-family: var(--font-mono); font-size: .875rem; line-height: 1; color: var(--accent);
}
.slots--then li + li::before { content: "→"; content: "→" / ""; }
.recipe__tip { margin-top: 12px; max-width: 62ch; color: var(--ink-2); font-size: .975rem; line-height: 1.55; text-wrap: pretty; }
.recipe__eg { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.recipe__eg .label { flex-basis: 100%; }
.recipe__eg q { font-family: var(--font-mono); font-size: .875rem; line-height: 1.5; color: var(--ink); }

/* ------------------------------------------------------------------ the closing address */
#connect .address { margin-top: clamp(26px, 3.6vw, 44px); border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------------ breakpoints */
@media (min-width: 640px) {
  .ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .ladder__how { grid-column: 1 / -1; }
  .ladder__key { display: block; padding-bottom: 10px; }
  .ladder__key--std { grid-column: 1; }
  .ladder__key--ext { grid-column: 2; }
  .ladder__tiers { grid-column: 1 / -1; }
  .tier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .tier__head { grid-column: 1 / -1; }
  .model--ext { padding: 16px 0 22px; border-top: 1px solid var(--rule); }
  .model--ext::before { content: none; }

  .slots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
  .slots li + li { margin-left: 30px; }
  .slots li + li::before { left: -25px; }
  .recipe__eg .label { flex-basis: auto; margin-right: 2px; }
}

@media (min-width: 900px) {
  .ladder {
    grid-template-columns: var(--col) repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    column-gap: var(--gap);
  }
  .ladder__how { grid-column: 1; grid-row: 1 / 3; margin: 0; align-self: start; }
  .ladder__axis { display: flex; justify-content: space-between; align-items: flex-end; grid-column: 2 / -1; grid-row: 1; padding-bottom: 12px; }
  .ladder__key { grid-column: 1; padding: 20px 0 0; border-top: 1px solid var(--rule); }
  .ladder__key--std { grid-row: 3; }
  .ladder__key--ext { grid-row: 4; border-bottom: 1px solid var(--rule); }
  .ladder__tiers {
    position: relative;
    grid-column: 2 / -1; grid-row: 2 / 5;
    display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  }
  /* The scale: one hairline through the three stops, graduated underneath, arrowed at the deep end */
  .ladder__tiers::before {
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--stop) / 2); height: 6px; pointer-events: none;
    background:
      linear-gradient(var(--rule-strong), var(--rule-strong)) left top / 100% 1px no-repeat,
      repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 24px) left top / calc(100% - 14px) 6px no-repeat;
  }
  .ladder__tiers::after {
    content: ""; position: absolute; right: 1px; top: calc(var(--stop) / 2 - 3px); width: 7px; height: 7px;
    border-top: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong);
    transform: rotate(45deg);
  }
  .tier { grid-row: 1 / -1; grid-template-columns: none; grid-template-rows: subgrid; }
  .tier--1 { --disc: 12px; }
  .tier--2 { --disc: 17px; }
  .tier--3 { --disc: 22px; }
  .tier__head { position: relative; grid-column: auto; min-height: 0; padding: calc(var(--stop) + 16px) 0 14px; border-top: 0; }
  .tier__disc { position: absolute; left: 0; top: calc((var(--stop) - var(--disc)) / 2); z-index: 1; box-shadow: 0 0 0 6px var(--bg); }
  .tier--2 .tier__disc { box-shadow: 0 0 0 5px var(--glow), 0 0 0 7px var(--bg); }
  .tier__hint { display: none; }
  .model { padding: 20px 0 28px; }
  .model--ext { padding: 20px 0 28px; border-bottom: 1px solid var(--rule); }

  .recipe { grid-template-columns: 44px calc(var(--col) - 44px) var(--gap) minmax(0, 1fr); padding: 24px 0 28px; }
  .recipe__body { grid-column: 4; grid-row: 1; margin-top: 0; }

  #connect .address { grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap); align-items: center; }
  #connect .address__label { flex-direction: column; gap: 4px; white-space: normal; }
}