/* ===========================================================================
   The look, as the design drew it.

   This is the design's own stylesheet with its `:root` removed: the tokens come
   from `tokens.css`, lifted out of `src/styles/tokens.css`, so the page and the
   program cannot drift apart and the dark face is the app's rather than an
   approximation of it.

   The rules at the foot are its `style-hover` and `style-active` attributes,
   which a prototype writes inline because the medium has nowhere else to put
   them. Six hovers and four presses, each now said once.
   =========================================================================== */
:root[data-theme="dark"]{
  --bg:#14171b; --surface:#1b1f24; --surface-alt:#20252b; --surface-raised:#242a31;
  --border:#2c323a; --border-soft:#262c33; --text:#e7e7e4;
  --accent:#7ca7d1; --accent-hover:#94b9dd; --accent-soft:#22344a; --accent-contrast:#0e1620;
  --math-accent:#6fbfa9; --math-soft:#1c332e; --ok:#79c396; --warn:#d9b271;
  --paper:#1e2329; --paper-shadow:0 1px 2px rgba(0,0,0,0.4), 0 18px 40px -12px rgba(0,0,0,0.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 8px 24px rgba(0,0,0,0.4);
  --selection:color-mix(in srgb, #7ea6d4 30%, transparent);
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;transition:background-color var(--dur-slow) var(--ease-out)}
/* A link is drawn the way the app draws one (`.doc-link`): the accent, and a
   thin underline held back to 45% until the pointer arrives. Bare `color` left
   the download links looking like unstyled HTML — the underline is the loudest
   thing about a default link, and it was untouched. */
/* The bar's and the footer's links are chrome, not prose: they carry their own
   hover and must not be underlined. */
header a, footer a, [data-tbh] a { text-decoration: none; }
::selection{background:var(--selection)}
:root[data-theming] body *{transition:background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out)}
@keyframes caret-blink{50%{background:transparent}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes icon-turn{from{opacity:0;transform:rotate(-120deg) scale(0.5)}to{opacity:1;transform:none}}
@keyframes completion-dot{0%,70%,100%{transform:none;opacity:0.45}35%{transform:translateY(-3px);opacity:1}}
@keyframes math-ask-dot{0%,60%,100%{opacity:0.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes math-ask-breathe{0%,100%{border-color:var(--border)}50%{border-color:color-mix(in srgb, var(--accent) 55%, var(--border))}}
[data-ask-dots] i{width:3px;height:3px;border-radius:50%;background:var(--accent);animation:math-ask-dot 1.1s ease-in-out infinite}
[data-ask-dots] i:nth-child(2){animation-delay:0.14s}
[data-ask-dots] i:nth-child(3){animation-delay:0.28s}
[data-ask-box][data-working="1"]{animation:math-ask-breathe 1.8s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){[data-ask-box][data-working="1"],[data-ask-dots] i{animation:none}}
[data-tbh]{box-sizing:border-box}
@media (max-width: 1080px){[data-pillar-grid]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width: 560px){[data-pillar-grid]{grid-template-columns:minmax(0,1fr) !important}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}}

/* **A feature card is a door.** Asked for: every claim on the front page should
   take you to where the documentation backs it up. The card was a `div` and is
   an `<a>` now — `color` is set inline so it keeps the card's own tone rather
   than the tone of a link in a sentence, which is what the rest of this page
   means by a link. The arrow says it is one without adding a word. */
.f-card { position: relative; }
/* On the first child rather than the card, so the card's own `::after` is free
   for the light (`controls.css`); positioned against the card all the same. */
.f-card > :first-child::after {
  content: "\2192";
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  font-size: 13px;
  color: var(--text-faint);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.f-card:hover > :first-child::after, .f-card:focus-visible > :first-child::after { opacity: 1; transform: none; }
.f-card:dir(rtl) > :first-child::after { content: "\2190"; transform: translateX(3px); }
.f-card:dir(rtl):hover > :first-child::after { transform: none; }

/* **Rows of little demonstration pieces wrap on a small phone.**
   Several rows on the front page are a run of fixed-size swatches, a key cap or
   an arrow, and a sentence beside them — laid out for a column that is wider
   than a 320px phone gives. They did not make the *page* scroll sideways, so
   the responsive check said nothing; they simply hung over the edge of the card
   they were in, which is what a reader sees. Reported from a phone.

   Below 400px they wrap and the sentence may shrink. Nothing above that width
   changes, so the layout everybody else sees is the layout that was tuned. */
@media (max-width: 400px) {
  [data-reveal] > div[style*="display: flex"],
  section > div[style*="display: flex"] { flex-wrap: wrap; }
  /* **Nothing has a minimum below 400px.** A flex or grid item refuses by
     default to shrink under its own content, which is right on a desktop and is
     exactly what made these cards hang over their parents on a phone. An
     explicit `width` still wins, so the little fixed swatches stay the size
     they were drawn. */
  [data-reveal], [data-reveal] *, section > div, section > div * { min-width: 0 !important; }
  /* **A key cap is one word and never two lines.** `min-width: 0` above lets
     everything shrink, and a small mono badge — `Tab`, `rtl`, `ltr` — then
     wrapped inside its own border, which is unreadable and looks broken.
     Reported from a phone. They are short by nature, so nothing is lost by
     refusing to break them. */
  [data-g="tab"], [data-d="hebadge"], [data-d="enbadge"], kbd,
  [style*="var(--font-mono)"][style*="border"] {
    white-space: nowrap;
    /* And `flex: none`, or the blanket `min-width: 0` above lets the row squeeze
       it to narrower than the word it holds — which with `nowrap` is a word
       hanging out of its own border rather than a word on two lines. A cap is
       three characters; the sentence beside it is what should give. */
    flex: none;
  }
  /* **What each part needs, stacked.** Two columns of *label* and *requirement*
     need the label column to be as wide as its longest label, and the longest
     one is wider than a 320px phone. Each pair takes its own two lines instead. */
  [data-req-grid] { grid-template-columns: minmax(0, 1fr) !important; gap: 2px 0 !important; }
  [data-req-grid] > span:nth-child(even) { margin-bottom: 8px; }
}

/**
 * **A pill that says a feature belongs to a plan.**
 *
 * Four things on this page cost money to run for each writer — documents kept
 * in the cloud, a copy sent to somebody, a paper written in together, a link
 * that only reads — and the rule this project set itself is that such a thing
 * is *called part of a plan in the place it is used*, rather than discovered
 * later. The editor is not one of them and never will be.
 *
 * **Not on the writing help**, deliberately: the assistant, the diagram from a
 * description and the second proofreading pass all run on a model on your own
 * machine, which is what the app sets up by default. What a plan buys there is
 * a model we host instead. A pill on those would say they cost money, and they
 * do not.
 *
 * **The pill is a sibling of the card, not a child of it**, because the card is
 * itself a link and an anchor may not contain an anchor. The slot is the grid
 * item; the card fills it and the pill lies over its corner.
 */
.f-slot {
  position: relative;
  display: grid;
}
.f-plan {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 1;
  /* A round badge, because its whole content is one character. */
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.f-plan:hover,
.f-plan:focus-visible {
  color: var(--surface);
  background: var(--accent);
}
/* The card's own title must not run under the pill. */
.f-slot .f-card > div:first-child {
  /* One character's worth. The badge said "Paid feature" first and wanted
     ninety-six pixels of every title; a `$` is the same statement in a corner,
     and the legend above the grid is where the words live. */
  padding-inline-end: 34px;
}

/* **The legend's pill is a sample, not a control.** It shows the reader what the
   badge on a card means before they meet one, so it must look exactly like the
   real thing and do nothing at all. */
.f-legend-pill {
  position: static;
  display: inline-block;
  margin: 0 2px;
  pointer-events: none;
  vertical-align: baseline;
}