/* ==========================================================================
   My Mother Said — design system + page styles

   Hand-written, no build step, no dependencies, no webfonts. Everything here
   is a file the server serves, so it satisfies `style-src 'self'`: no inline
   <style>, no style="" attributes, no external requests.

   THE SYSTEM, IN ONE PARAGRAPH
     One warm neutral ramp carries every surface, border and string of text;
     one deep pine-teal accent carries emphasis, selection, focus and the
     single filled action taken on the screen. Red is reserved for status
     (an error, a destructive control) and is never decoration. Surfaces are
     flat and bordered by a hairline; exactly one surface is allowed to sit
     above the page, and that surface is the answer. Type is one tightened
     scale in two weights; the generated rewrite is the largest thing on the
     screen and the app's own name is deliberately smaller than it.

   DIRECTION
     "Ember": warm bone ground, white cards, one deep pine-teal. The type has
     one named second role — the VOICE face (--font-voice): the product's own
     output text, i.e. the generated line on the result card and the same
     lines listed in the history. Nothing the visitor operates or reads as
     chrome uses it; every label, control and meta line is the UI sans.

   THE SCALES (one of each, nothing ad hoc)
     spacing  --space-1 4 --space-2 8 --space-3 12 --space-4 16 --space-5 20
              --space-6 24 --space-8 32 --space-10 40 --space-12 48
              --space-14 56 --space-18 72      (every margin, padding and gap)
     type     12 13 15 17 17→20 (app name) 28→40 (the answer), two weights
     radii    --radius-control (controls) --radius-card (cards) --radius-pill
     motion   120 / 180 / 260 ms, ease-out, entrances once, nothing loops
     elevation  --shadow-2, owned by the result card alone
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light dark;

  /* --- the neutral ramp: every warm grey the product is allowed to use --- */
  --n-0: #ffffff;   /* cards, fields, the page's raised surface */
  --n-25: #fbfaf8;
  --n-50: #f5f4f1;  /* the page: warm bone, enough depth for a white card to read */
  --n-100: #f0eeea; /* transient recess only: hover and quiet fills, never a standing panel */
  --n-200: #d9d5cc; /* decorative hairline: a card edge and a divider */
  --n-300: #cfccc3;
  --n-400: #a5a29a;
  --n-500: #6b6a63; /* muted ink: 5.4:1 on a card, 4.9:1 on the page */
  --n-600: #56544e; /* secondary ink, 7.4:1 on a card */
  --n-900: #20201d; /* ink, 15.9:1 on a card */

  /* --- the accent: one hue, action + selection + focus --- */
  /* The tint is the accent's own hue at high lightness and low chroma, so the
     selected state reads as a quieter version of the same colour rather than
     a second one. There is no third surface between --page and --surface. */
  --a-25: #e8f4f2;
  --a-50: #daeeea;
  --a-100: #c3e3dd;
  --a-500: #0f766e;  /* 5.5:1 with white */
  --a-600: #115e59;  /* 7.0:1 with white */
  --a-700: #0d4f4a;  /* 8.4:1 with white */
  --a-900: #0b4f47;  /* 10.8:1 on --a-50 */

  /* --- surfaces and ink --- */
  --page: var(--n-50);
  --surface: var(--n-0);
  --surface-recess: var(--n-100);
  --field: var(--n-0);
  --ink: var(--n-900);
  --ink-muted: var(--n-500);
  --ink-secondary: var(--n-600);
  --border: var(--n-200);        /* decorative hairlines */
  --border-strong: #8a8880;      /* control outlines: 3.6:1 on a card, 3.3:1 on the recess */
  --accent: var(--a-500);
  --accent-hover: var(--a-600);
  --accent-press: var(--a-700);
  --accent-tint: var(--a-25);    /* the faintest tint: focus glow, chosen rows */
  --accent-tint-strong: var(--a-50);
  --accent-tint-ink: var(--a-900);
  --accent-line: var(--a-100);   /* accent hairline: the answer's edge, the reading's rule */
  --on-accent: #ffffff;
  --focus: var(--a-600);

  /* --- semantic: status only, never decoration --- */
  --danger: #b42318;
  --danger-tint: #fef3f2;
  --danger-ink: #912018;

  /* --- type: one scale --- */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* the voice face: the product's own output text, and nothing else */
  --font-voice: ui-serif, Georgia, "Times New Roman", Times, serif;
  --fs-xs: 0.75rem;      /* 12  hints, meta, counter, the plain-HTTP caveat */
  --fs-sm: 0.8125rem;    /* 13  tagline, secondary controls, reading, info list */
  --fs-base: 0.9375rem;  /* 15  body, controls, history lines, choice subtitles */
  --fs-lg: 1.0625rem;    /* 17  the two headline actions */
  --fs-xl: clamp(1.0625rem, 2.4vw, 1.25rem);   /* the app's name: 17 -> 20 */
  --fs-hero: clamp(1.75rem, 5.2vw, 2.5rem);    /* the answer: 28 -> 40 */
  --fw-normal: 400;
  --fw-semibold: 600;
  --tracking-tight: -0.017em;
  --tracking-hero: -0.006em;   /* a serif needs far less tightening than a sans */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-body: 1.55;
  --leading-hero: 1.24;

  /* --- spacing: one 4/8px scale, every margin, padding and gap --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;

  /* --- shape: three radii, each with a job --- */
  --radius-control: 10px;  /* anything the visitor operates or types into */
  --radius-card: 16px;     /* anything that groups content on the page */
  --radius-pill: 999px;    /* round markers only: dots and ticks */
  --shadow-2: 0 18px 44px -26px rgba(32, 32, 29, 0.4), 0 2px 8px -4px rgba(32, 32, 29, 0.12);
  --shadow-overlay: 0 6px 20px -12px rgba(32, 32, 29, 0.3);

  /* --- motion: 100-500ms, ease-out, nothing loops --- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- layout --- */
  --measure: 40rem;    /* ~70 characters at 15px: the reading column */
  --tap: 44px;
  --tap-lg: 52px;
}

/* Dark counterpart of the same system: the ramp inverts, the accent lightens
   so it can carry dark ink, and nothing else changes. */
@media (prefers-color-scheme: dark) {
  :root {
    --n-0: #1c1c17;
    --n-25: #191914;
    --n-50: #14140f;
    --n-100: #232320;
    --n-200: #34332e;
    --n-300: #45443e;
    --n-400: #6b6a63;
    --n-500: #b3b0a6;
    --n-600: #d5d2c9;
    --n-900: #f2f0ea;

    --a-25: #16332e;
    --a-50: #123a35;
    --a-100: #2c6a61;
    --a-500: #5eead4;
    --a-600: #8ff2e1;
    --a-700: #ccfbf1;
    --a-900: #b8f0e5;

    --on-accent: #06201d;        /* dark ink on the light accent: 12.5:1 */
    --border-strong: #7f7d74;    /* control outlines: 3.6:1 on --n-0 */
    --focus: #99f6e4;

    --danger: #fda4a4;
    --danger-tint: #2c1416;
    --danger-ink: #fecaca;

    --shadow-2: 0 18px 44px -26px rgba(0, 0, 0, 0.9), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
    --shadow-overlay: 0 6px 20px -12px rgba(0, 0, 0, 0.7);
  }
}

/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }

/* The app shows and hides whole regions with the `hidden` attribute (the
   result card, the history panel, the candidate list, the tone reading, and
   the collapsed composer). A display rule on those regions would otherwise
   beat the user agent's `[hidden] { display: none }`. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* The column is centred by the grid rather than by `margin: auto`, so every
     rendered margin on the page is a declared spacing value. */
  display: grid;
  justify-items: center;
  background: var(--page);
  color: var(--ink);
  font: var(--fs-base) / var(--leading-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  padding: var(--space-6) var(--space-4) var(--space-14);
}

.skip {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  z-index: 10;
  min-height: var(--tap);
  padding: var(--space-3);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-overlay);
  font-size: var(--fs-sm);
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip:focus { transform: translateY(0); }

h1, h2, p, ul, fieldset, legend { margin: 0; }
/* the UA stylesheet gives legend and fieldset their own inline padding */
fieldset, legend { padding: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- header -- */
.app-header { margin: 0 0 var(--space-6); }
/* Deliberately smaller than the answer: the app's output is the loudest type
   on the page, the app's own name is not. */
.app-header h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.tagline {
  margin-top: var(--space-1);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------- surfaces -- */
/* One container language: a flat white surface with a hairline border and one
   radius. Nothing but the answer carries a shadow. */
.composer,
.panel {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

/* -------------------------------------------------------------- composer -- */
.composer {
  display: grid;
  /* One column, and a definite one: with an `auto` track a single long item can
     size the column past the page and widen the document (measured: the status
     line's own unwrapped width, 28px of overflow at 390x844). `minmax(0, 1fr)`
     fills the same width and can never exceed it, which is what lets the status
     line cap itself against a real, resolvable 100%. (kanban t_aff96f9a) */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  /* The composer sits above the answer it feeds (index.html), so it carries the
     gap that keeps the collapsed line off the card below it. */
  margin-bottom: var(--space-4);
}

/* Collapsed: the card chrome goes with the machinery. A single line of summary
   does not deserve a panel of its own — two stacked surfaces would make the
   answer and the line above it compete — so the collapsed composer is a bare
   row and the answer stays the loudest thing on the screen. The 1px border
   stays (transparent) so nothing shifts when the composer opens or closes. */
.composer.is-collapsed {
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.field { min-width: 0; }

label, legend {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
/* the label of the field the whole page is about sits above its box */
.field > label { margin-bottom: var(--space-2); }
.field-foot {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
/* The counter's line carries two facts now: the count and, where there is a
   keyboard, the submit shortcut (kanban t_0d2b8f93, P9). It is one flex line,
   so the hint beside the counter costs the page no height at all — the row is
   the height of the single line box it already was. */
.field-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
/* The counter belongs to the field's own padding: its right edge lines up with
   the text inside the message box, so it reads as attached to the field rather
   than floating loose under it. `margin-left: auto` is what holds it at the end
   of the line whether or not the hint is rendered beside it. */
.counter {
  margin-left: auto;
  margin-right: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
/* The submit shortcut (kanban t_0d2b8f93, P9): app.js has submitted on
   Ctrl/Cmd+Enter all along and nothing on the page said so. It shares the
   counter's line and its meta type step — a hint that out-weighed the count
   beside it would read as a control — and mirrors the counter's 12px inset, so
   it looks attached to the message box's own text rather than to the card.

   It is not rendered at all below 48rem: a phone has no Ctrl key, so the hint
   there would be instructions for a key that does not exist, and hiding it
   costs the fold nothing because the line is already there for the counter.
   `nowrap` keeps the row one line where it is shown; at 48rem the field is
   542px wide and this is about 120px of it. */
.shortcut-hint {
  display: none;
  margin-left: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

#input {
  display: block;
  width: 100%;
  /* four line boxes plus the field's own padding and border, so any text that
     does not fit is cut at a line break rather than through the middle of a
     line. The +26px is 2 x --space-3 of padding plus the 1px border twice; it
     is a size, not a spacing value. */
  min-height: calc(4 * var(--leading-body) * var(--fs-base) + 26px);
  padding: var(--space-3);
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  resize: none;
  overflow-wrap: anywhere;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
#input:hover { border-color: var(--ink-muted); }
#input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}
#input::placeholder { color: var(--ink-muted); opacity: 1; }

/* The reading of the typed text: a quiet aside beside the answer, not a second
   one. It sits inside the result card (it used to be inside #field, which the
   payoff state hides, so it was generated and never shown), and stays visibly
   subordinate to the hero: the meta type step, muted ink, no card chrome. */
.reading {
  padding-left: var(--space-2);
  border-left: 2px solid var(--accent-line);
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------ the empty-state example -- */
/* The placeholder shows the input on its own; this is the other half of the
   pitch — one quiet, labelled example of the transformation, so the first
   screen shows what comes back and not only what goes in. It is marked as an
   example ("For example:") and carries none of the result card's chrome, so it
   can never be mistaken for output the visitor has just generated.

   It is a caption on the field, so it sits at the meta step and not at body
   size: if it grew loud enough to compete with the payoff it would be a second
   hero, and the payoff is the loudest thing on this page by design. It lives
   inside .field-foot, whose own 8px gap sets it below the counter, so it adds
   one type step and no new spacing value. */
.example {
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
/* The two halves are set as their own lines rather than left to wrap: the
   blunt sentence reads whole, then the kinder one, instead of breaking through
   the middle of a phrase. */
.example-line { display: block; }
.example-label {
  /* smaller than the lines it introduces, so the marker stays subordinate to
     the example itself: a label that out-weighed its own content would read as
     a fifth section heading rather than an annotation */
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
/* the arrow is a cue, not a word: kept in the muted ink and in the UI face (it
   is chrome, not the product's own words), and out of the accessibility tree */
.example-arrow {
  font-family: var(--font-ui);
  color: var(--ink-muted);
}
/* the kinder line wears the voice face — the product's one named second role
   for its own output text — so the example reads as the same kind of object as
   the answer it stands in for */
.example-after {
  font-family: var(--font-voice);
  color: var(--ink);
}

/* The example's blunt half is a control (kanban t_f3b71faf, P4): the tap fills
   the message box with that sentence. It has to occupy the same line, at the
   same weight, as the plain text it replaced, so the base button rule above is
   reset all the way down: no fill, no hairline, no radius, no 44px minimum
   height, and no hover wash (the base rule's `button:hover` would otherwise
   paint one, at a higher specificity than a bare class).

   It is the size of the words it replaces, and that is deliberate: a button is
   an atomic inline box in Chrome, so vertical padding on it *does* grow the
   line it sits in — 4px a side pushed #submit from 635.4 to 643.4 at 360x640
   in this harness, straight through the 4.6px fold margin. So the padding is
   zero and the tap target is the text's own box (~18px), which is exactly what
   the inert text occupied before. Horizontal padding is out for the same
   reason it would move the words.

   It is a control people are meant to find, so it carries the one affordance
   that costs no height: a dotted underline in the hairline ink. The quotation
   marks are decoration and are drawn here rather than typed into the control's
   own text, which is what the message box is filled with. */
button.example-before {
  display: inline;
  min-height: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  gap: 0;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
button.example-before::before { content: "\201C"; }
button.example-before::after { content: "\201D"; }
button.example-before:hover:not(:disabled),
button.example-before:active:not(:disabled) {
  color: var(--ink);
  text-decoration-style: solid;
  background: none;
}

/* The example's way back (kanban t_635a2dc4, review t_1b8efd27 D4). It is a
   secondary control like every other non-primary one (see the secondary rule
   below), so it brings its own 44px minimum height and its own hairline: the
   visitor has just lost a sentence and the way back should read as a real
   control rather than as a caption. It sits in .field-foot's own grid, which
   stretches its children, so it hugs its word instead of filling the row.

   It is `hidden` in every other state -- which is what keeps it off the
   360x640 fold, measured on this field in section N of the browser harness --
   because nothing else in the composer can take a step back over the box's own
   text. */
#undo-input { justify-self: start; }

/* ------------------------------------------------- the collapsed composer -- */
/* After a run the whole composer reduces to this one line. app.js puts the
   `hidden` attribute on the field, the mode, the action, the options and the
   disclosure, so they leave the layout AND the accessibility tree; the
   message box keeps its text and comes back when Edit is pressed. */
.summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
/* Hug the text rather than filling the row: a short summary and its Edit button
   then sit together at the left, instead of being pinned to opposite edges with
   a dead gap between them at desktop widths. Long text still shrinks and is cut
   (fitSummary in app.js cuts it on a word boundary). */
.summary-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* the visitor's own words, in the page's ink: a value that is there, not the
     grey of a hint that is not */
  color: var(--ink);
  font-size: var(--fs-sm);
}
.summary button {
  flex: none;
}

/* ------------------------------------------------------------ mode choices -- */
.mode-field { border: 0; padding: 0; min-width: 0; }
.mode-field legend { margin-bottom: var(--space-2); }
.choices { display: grid; gap: var(--space-2); }

.choice {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--tap);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* Selection is drawn in the accent's own colour: its edge, its dot, and a tint
   that is the accent's own hue at high lightness and low chroma — a quieter
   version of the same teal, never a second colour. */
.choice:has(input:checked) {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.choice:hover:not(:has(input:checked)) { border-color: var(--ink-muted); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The radio itself is the card's whole hit area: it stays in the tab order and
   keeps its native keyboard behaviour, while the visible dot stands in for it.
   Sized to the card, so the smallest touch target on the page stays 44px. */
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  /* drawn as nothing at all: the card is the hit area and the dot is the mark */
  appearance: none;
  border-radius: var(--radius-pill);
}
.choice input:focus-visible { outline: none; }
.choice .dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.choice:has(input:checked) .dot { border-color: var(--accent); }
.choice .dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.choice:has(input:checked) .dot::after { transform: scale(1); }

.choice-body { min-width: 0; overflow-wrap: anywhere; }
.choice-body strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
/* Both subtitles reserve two lines, so the two cards are the same height
   whether the shorter caption wraps or not. */
.choice-body small {
  display: block;
  min-height: calc(2 * var(--leading-snug) * var(--fs-sm));
  margin-top: var(--space-1);
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  line-height: var(--leading-snug);
}

/* -------------------------------------------------------- tone and length -- */
/* Grouped by proximity, exactly like the Mode block: a tighter gap between the
   two rows than between sections, and no surface of their own. The page has ONE
   container language (white cards with a hairline), and a third surface value
   is never introduced. app.js hides the group (and each row) in Wildcard Mode,
   so nothing inert is left on screen. */
.options {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.option-row { display: grid; gap: var(--space-1); min-width: 0; }

.select { position: relative; display: block; }
.select select {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-10) 0 var(--space-3);
  font: inherit;
  font-weight: var(--fw-normal);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.select:hover select { border-color: var(--ink-muted); }
.select select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-strong); }
/* the chevron: two borders, no image, no icon font */
.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink-secondary);
  border-bottom: 2px solid var(--ink-secondary);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

/* --------------------------------------------------------------- buttons -- */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-weight: var(--fw-normal);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
button:hover:not(:disabled) { background: var(--surface-recess); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* the one filled accent button on the page */
.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: var(--fw-semibold);
}
.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.primary:active:not(:disabled) { background: var(--accent-press); border-color: var(--accent-press); }

/* the composer's action: full width, thumb-reachable, on screen at first paint */
#submit {
  width: 100%;
  min-height: var(--tap-lg);
  font-size: var(--fs-lg);
}

/* THE FREE WAY FORWARD, when Mom Mode cannot answer (kanban t_ba18d061; review
   t_78ddca7d proposal #2, kanban t_c3f3da5f).

   The one route that still works in that state is local, so it is offered as a
   control rather than as advice: it hugs its own label, the way the card's
   secondary buttons do, and the sentence under it is the honest half -- a
   Wildcard draw is local, nothing is sent, and it is not a rewrite of what the
   visitor typed.

   It is written directly under the message box (index.html), inside the field,
   so it is spaced off the box by the field's own step rather than by the
   composer's row gap -- the same 8px .field-foot takes above itself. It stands
   above the counter and the example because it is the second thing on the page:
   the paused visitor's one working route, measured at 320x568 at 784.3-897.3
   when it stood below the submit, 216px below a 568px fold. `hidden` keeps it
   off the first screen entirely until it is offered. */
.fallback {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}
.field > .fallback { margin-top: var(--space-2); }

/* The offer is the anchor the failure's landing aims at whenever it is the
   first line of the pair (app.js, revealFailure -- it is written above the
   status line now), so it carries the same small reservation the status line
   does, and lands just under the top edge rather than flush against it. */
.fallback button { scroll-margin-top: var(--space-4); }

/* THE SECONDARY RULE, stated once and applied in one place.

   Every control that is not the screen's single filled primary is the same
   object wherever it sits: a --surface fill, a 1px --border-strong hairline,
   --radius-control, --fs-sm ink, the inherited 44px minimum height, and the
   same hover. Padding and type do not vary with position — Edit in the
   collapsed row is the same object as Try Again in the card. Exactly one
   control is filled per view: Copy owns the payoff state, Rewrite it owns the
   editor state. The one destructive control (Clear history) keeps this shape
   and differs only in colour, so it reads as dangerous rather than as the
   smallest, weakest thing on the page. */
.actions button:not(#copy),
.summary button,
#undo-input,
#clear-history {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

/* busy: the form carries aria-busy, the button holds its weight and says it is
   working, and the status line (aria-live) carries the sentence. Nothing
   animates in a loop. */
#composer[aria-busy="true"] #submit:disabled { opacity: 1; }
#composer[aria-busy="true"] #submit::after { content: " \2026"; }

/* -------------------------------------------------------------- the ⓘ ---- */
/* One quiet disclosure at the foot of the form. The glyph is drawn with a
   border and a letter, so there is no icon font and no extra request. */
.info {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.info-toggle {
  /* a full-width quiet row: the caret sits with its label at the left, and the
     whole row is still the hit area */
  width: 100%;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border-color: transparent;
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
}
.info-toggle:hover:not(:disabled) { background: var(--surface-recess); color: var(--ink); }
.info-toggle[aria-expanded="true"] {
  background: var(--page);
  color: var(--ink);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.info-label { display: inline-flex; align-items: center; gap: var(--space-2); }
/* a caret that flips, so it reads as a disclosure and not as a label */
.info-toggle::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.info-toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
.info-mark {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.info-panel {
  padding: var(--space-3) var(--space-4);
  background: var(--page);
  /* flush with the trigger above it, so the two read as one disclosure */
  border-radius: 0 0 var(--radius-control) var(--radius-control);
}
.info-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-4);
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
}
.info-list strong { color: var(--ink); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------- status -- */
/* The confirmation is never an overlay (kanban t_aff96f9a, review t_b179fa87
   D1): it is a line of whichever row is on the page, so it can only push what
   is below it, and app.js moves the one element between them -- the composer's
   own grid in the editor, the card's action row in the payoff state
   (setCollapsed). It used to be pinned 16px above the bottom edge of the
   viewport, which is exactly the band the payoff's action row is landed on
   (`block: 'end'` puts the row's bottom edge on the fold): on the live URL it
   was painted across the "2 more ways to say it" button at 390x844 (~4,275px^2
   of it), 360x640 (~4,637px^2) and 320x568, and across the Tone select in the
   paused state. Measured after this change, over three viewports and every
   state the app can reach (the long and short payoff, the paused page, a
   failure in the editor, a failure with a card up, the local pick taken from
   the card, an option tapped from the list): zero intersections.

   The chip's look is unchanged: an inverse chip and nothing else on the page is
   drawn that way: the fill is the page's ink (or, for a problem, the one red)
   and the label is the surface colour, so it stands off a bone page at 14.9:1
   and off a white card at 16.3:1 without borrowing the elevation token that
   belongs to the answer. A tinted chip was measured first and rejected:
   --accent-tint against the page is 1.02:1 and --danger-tint is 1.01:1, i.e.
   invisible. The label is not accent ink either, because accent ink at 13px is
   how this page draws a link and a passive message must not look like one.

   app.js keeps it empty until something has actually happened, and an empty
   line of a grid or a row costs it nothing (`:empty`). */
/* The chip caps itself against the width it is given (100% of whichever row it
   is a line of), and both containers that hold it have a definite single column
   (styles.css above), so that percentage resolves instead of feeding a track
   that is being sized from this very item. (kanban t_aff96f9a) */
.status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* shrink to the message, then cap: this is a chip, not a panel */
  width: max-content;
  max-width: 100%;
  /* centred on its own line: `margin-inline` covers both containers (a grid
     item and a flex item), where `justify-self` would only cover one */
  margin-inline: auto;
  /* The landing a failure's own sentence gets in the composer (app.js,
     revealFailure): the sentence is the first line of the row that is on the
     page and the control that answers it is the row's last, so the landing
     takes the sentence to the top of the screen with the offer below it. The
     reservation is what keeps the line clear of the very top edge instead of
     flush against it, and it is deliberately small: the message box sits above
     it, and the pair below it -- measured 429.4px from this line's top to the
     offer's bottom at 390x844 and at 360x640, 447.6px at 320x568 -- has to fit
     in what is left of the smallest screen the app is measured at. It is inert
     in the card's action row, where no scroll aims at this line.
     (kanban t_4887185e) */
  scroll-margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* One mark for every kind of message; currentColor keeps it legible on either
   fill, and only the fill says whether this is a confirmation or a problem. */
.status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.status.error { background: var(--danger); color: var(--on-accent); }
.status:empty { display: none; }

/* -------------------------------------------------- result card: the hero -- */
/* The only surface above the page, and the only one edged in the accent: the
   page reads "here is your answer, and here is the machinery". */
.result-card {
  display: grid;
  /* A definite single column, for the same reason the composer has one: the
     action row's own last line is the status line, and an `auto` track would let
     its unwrapped width size the column past the page (kanban t_aff96f9a). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  /* Where the landing puts the card. It reserves room for the collapsed
     composer's own row (its 44px control plus a gap), because that row is the
     cause sitting just above this card: landing flush would scroll the line the
     visitor typed off the top of the screen, and Edit with it. 44 + 24 also
     absorbs the sub-pixel target of scrollIntoView. */
  scroll-margin-top: calc(var(--tap) + var(--space-6));
}

/* the label on the answer: quiet furniture, sentence case, no letter-spacing
   theatre — the payoff below it is the loud thing */
.result-card h2 {
  /* hug the label: a full-width box here would draw a full-width focus ring
     around one word when the heading takes focus after a submit */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
}
/* The heading is focused programmatically on every result so screen readers
   land on it. A ring that hugs the eyebrow reads as deliberate; the global
   3px rectangle across the whole card read as a stray outline. */
#result-heading:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}
.result-card h2::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
/* A Tone name is one unit. The heading may break only at the space between the
   mode prefix and the Tone -- the two spans app.js builds when a result names a
   Tone -- and never inside either piece, so the longest published label
   ("Passive-Aggressive Sweet") lands whole on its own line at phone widths
   instead of splitting the name and orphaning its last word. The break is the
   intended presentation for a label too long for one line; the shorter labels
   still fit on one (kanban t_7b5dd8f8). */
.result-card h2 .heading-mode,
.result-card h2 .heading-tone {
  white-space: nowrap;
}
/* A CSS wrap alone would leave the heading's box at the full column width and
   draw the focus ring with ~48px of empty space beside the two-line Tone. Once
   app.js has measured that the Tone wrapped (fitHeading), the Tone becomes its
   own block line: it leaves the inline flow, so the heading's box shrinks to
   the widest of the two lines and the ring hugs it, exactly as it does for a
   one-line label. */
.result-card h2 .heading-text.is-stacked .heading-tone {
  display: block;
}

/* the generated rewrite: the loudest type on the page, in the voice face */
.result {
  min-width: 0;
  font-family: var(--font-voice);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--ink);
  text-wrap: pretty;
  /* a 160-character token with no spaces must not push the page sideways */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The moment of arrival: each new result gets its own transition.

   The movement is on the result text, not on the card, and deliberately so:
   `focusResult()` measures the card and calls scrollIntoView in the frame the
   card is shown, so a transform on the card itself would move the very box the
   landing is computed from and the page would land a few pixels out. A
   transform on a child cannot affect the card's rect, and a vertical offset
   cannot widen the page either, so the overflow check stays honest.

   Entrances only, once, 260ms, ease-out; prefers-reduced-motion removes them. */
@keyframes card-arrive {
  from { opacity: 0.001; }
  to { opacity: 1; }
}
@keyframes line-arrive {
  from { opacity: 0.001; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.result-card.arriving { animation: card-arrive var(--dur-slow) var(--ease-out) both; }
.result-card.arriving .result { animation: line-arrive var(--dur-slow) var(--ease-out) both; }

/* The list's own landing, for the one control that goes there: the count on the
   action row (kanban t_966d6228) scrolls this block to the top of the screen, so
   it reserves the room the card reserves for itself (see .result-card) rather
   than landing its hint flush under the phone's own chrome. */
.candidates {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  scroll-margin-top: calc(var(--tap) + var(--space-6));
}
.candidate-list { display: grid; gap: var(--space-2); min-width: 0; }
/* Options are controls, not decoration: they carry the same control edge as
   every other control (--border-strong, 3.6:1 on a card; --border is reserved
   for decorative hairlines). On a touch screen there is no hover wash, so that
   edge is the option's only affordance (kanban t_ced0f8c5). */
.candidate {
  justify-content: flex-start;
  align-items: flex-start;   /* the tick belongs to the first line, not the middle one */
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: var(--space-3);
  color: var(--ink-secondary);
  background: var(--surface);
  border-color: var(--border-strong);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
/* A permanent leading gutter: the tick is drawn on the option currently shown,
   but every option reserves its width, so the text does not jump sideways when
   the mark moves to another row. */
.candidate::before {
  content: "";
  flex: none;
  width: 1em;
  text-align: center;
  font-weight: var(--fw-semibold);
}
.candidate:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-recess);
}
/* chosen: the accent's edge and ink, on the same white surface as the rest.
   The mark and the tint carry the state; the type weight deliberately does NOT
   change, because a different weight can re-wrap the text and every row would
   change height, which is the movement this state exists to avoid
   (kanban t_ced0f8c5). */
.candidate.chosen {
  color: var(--accent-tint-ink);
  background: var(--accent-tint);
  border-color: var(--accent);
}
/* The tick is decoration: it is drawn, but the empty alternative text keeps it
   out of the option's accessible name, which stays its visible text. The first
   declaration is the fallback for a browser that does not support alternative
   text for content, where the bare glyph is the best that can be done. */
.candidate.chosen::before { content: "\2713"; content: "\2713" / ""; }

/* The payoff's action row -- and where its landing puts it. When the answer is
   long enough to push the row off the screen, app.js lands the row with
   `scrollIntoView({ block: 'end' })`, which puts the row's bottom edge ON the
   fold. On a phone that edge is the band the phone's own chrome lives in, which
   is not reliably usable space: measured after a fresh press at 390x844,
   360x640 and 320x568 the row's bottom landed at 844.0 / 640.3 / 567.8 against
   folds of 844 / 640 / 568 -- zero slack, by construction. The card's own
   landing has always reserved `--tap + --space-6` at the top for exactly this
   reason (its scroll-margin-top above) and so has the option list, so the row
   reserves `--tap + --space-2` at the bottom: the row ends 52px clear of the
   fold, and the count button that used to sit on its edge sits clear of it too.
   A reservation is a landing offset, not layout, and app.js's decision to land
   at all is unchanged -- a row already on screen still moves nothing (kanban
   t_ced0f8c5). (kanban t_51e71190, review t_b179fa87 proposal #3) */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  scroll-margin-bottom: calc(var(--tap) + var(--space-2));
}
/* Copy is the payoff action once a result exists, so on a phone it takes the
   full width and the filled treatment; the rest are secondary and sit beside
   each other at their own size (see the secondary rule). A control's own label
   never breaks inside the button: if the row is too narrow the buttons wrap
   onto a second row instead. */
.actions #copy { flex: 1 1 100%; min-height: var(--tap-lg); font-size: var(--fs-lg); }
.actions button:not(#copy) { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
/* Undo only exists when there is something to step back to. A dimmed dead
   control would read as broken, so an impossible action is not rendered. */
#undo[disabled] { display: none; }

/* Once there is a result, Copy is the one filled accent button on the page and
   the composer's action steps back to a plain secondary for the reader who has
   reopened the editor with Edit. */
body:has(#result-card:not([hidden])) #submit {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-strong);
  font-weight: var(--fw-normal);
}
body:has(#result-card:not([hidden])) #submit:hover:not(:disabled),
body:has(#result-card:not([hidden])) #submit:active:not(:disabled) {
  background: var(--surface-recess);
  border-color: var(--ink-muted);
  color: var(--ink);
}

/* --------------------------------------------------------------- history -- */
.panel { margin-top: var(--space-4); }
.panel h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
.panel > .hint { margin-top: var(--space-1); }

.hint {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}
.hint strong { font-weight: var(--fw-semibold); color: var(--ink-secondary); }

.history-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.history-item {
  min-width: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.history-item:first-child { border-top: 0; }
.history-item p { min-width: 0; overflow-wrap: anywhere; }
.history-meta {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
/* the listed lines are the product's own words, so they wear the voice face */
.history-item p + p {
  margin-top: var(--space-1);
  font-family: var(--font-voice);
  font-size: var(--fs-base);
  line-height: var(--leading-snug);
}
/* The one destructive control on the page: it wears the same shape as every
   other secondary (see the secondary rule above), so it is no longer the
   smallest thing on screen, and differs only in colour — a danger hairline and
   danger ink — so it reads as dangerous rather than as a disabled button. It
   also asks before it acts: the first press arms it (app.js), the second
   clears, and the note under it says exactly what clearing costs. */
#clear-history {
  margin-top: var(--space-2);
  background: transparent;
  border-color: var(--danger);
  color: var(--danger-ink);
}
#clear-history:hover:not(:disabled),
#clear-history:focus-visible,
#clear-history.armed {
  background: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger-ink);
}
.clear-note {
  margin-top: var(--space-1);
  color: var(--danger-ink);
}

/* ---------------------------------------------------------------- footer -- */
/* The product claim, then — smaller and at lower contrast — the one honest
   caveat about this deployment, kept out of the pitch. */
.foot {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
}
.foot p { overflow-wrap: anywhere; }
.foot-small {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* ----------------------------------------------------- narrow screens ----- */
/* kanban t_9d52f5db, review t_78ddca7d proposal #4. On the smallest phone still
   in use the ordinary empty state hid the page's primary action. Measured on
   the published bytes (ce3c545, 320x568, empty): #mode-field was 215.4px tall
   (386.0-601.4), #submit sat at 621.4-673.7 -- 105.7px below the 568px fold --
   and #tone-row at 693.7-761.9. At 360x640 the same button had 4.6px of slack
   (#submit 583.1-635.4), so nothing here may spend that margin.

   Route, and the numbers that decided it. The proposal's first step -- the two
   choices side by side -- is not enough on its own: at 123px a card leaves a
   67px text column under a dot and 12px of padding, the Wildcard caption wraps
   to six lines and "Wildcard" / "non-sequitur" break mid-word (measured), the
   pair is 185.6px tall against the stack's 187.3px, and #submit moves 1.7px.
   So the proposal's own fallback is taken too -- the chooser's padding and the
   caption's type step -- and the phone gets the tighter vertical rhythm a
   568px screen needs. Measured at 320x568: #mode-field 215.4 -> 139.7px,
   #submit 621.4-673.7 -> 505.7-558.0 (10.0px inside the fold), #tone-row
   693.7-761.9 -> 570.0-638.2, the document 1088 -> 952px. Everything on the
   page moves up; nothing moves down; no control changed size; both captions
   still say exactly what they said before. */
@media (max-width: 33.999rem) {
  .choices { grid-template-columns: 1fr 1fr; }
  /* The narrow column: the card's 12px padding and its 12px dot gap buy 12px of
     text column, and the composer's own tighter padding 4 more (67 -> 83px),
     while the caption moves to the meta step -- the step this page already uses
     for exactly this kind of line. */
  .choice { padding: var(--space-2); gap: var(--space-2); }
  /* A compact card is a label and one caption, not prose: its two lines are set
     at 1.2 rather than the body's 1.55, which is 10.5px on a two-line 15px
     label and 9.6px on a four-line 12px caption. */
  .choice-body strong { line-height: var(--leading-tight); }
  .choice-body small { font-size: var(--fs-xs); line-height: var(--leading-tight); }
  /* The chooser's own heading sits a step closer to the cards it names. */
  .mode-field legend { margin-bottom: var(--space-1); }
  /* The composer's rhythm on a phone: 12px between its blocks and 12px of
     padding, where a wide screen has 20 and 16. */
  .composer { gap: var(--space-3); padding: var(--space-3); }
  /* The field's two micro-lines -- the count and the example under it -- sit a
     step closer together for the same reason. */
  .field-foot { gap: var(--space-1); }
  /* The page's own outer rhythm is a step tighter for the same reason. */
  .wrap { padding-top: var(--space-4); }
  .app-header { margin-bottom: var(--space-4); }
}

/* ----------------------------------------------------- wider screens ------ */
@media (min-width: 34rem) {
  .choices { grid-template-columns: 1fr 1fr; }
  .options { grid-template-columns: 1fr 1fr; }
  #input { resize: vertical; }
}

@media (min-width: 48rem) {
  .wrap { padding: var(--space-10) var(--space-6) var(--space-18); }
  .app-header { margin-bottom: var(--space-8); }
  .composer { padding: var(--space-6); gap: var(--space-6); }
  .composer.is-collapsed { padding: 0; }
  .result-card { padding: var(--space-6); }
  .panel { padding: var(--space-5) var(--space-6); }
  /* A wide screen is where a hardware keyboard is: the submit shortcut is shown
     from here up, and nowhere below (kanban t_0d2b8f93, P9). */
  .shortcut-hint { display: inline; }
}

/* Desktop (>=1024px): the column is wide enough that a full-bleed hero button
   reads as a banner rather than as a control. The primary takes a sensible
   maximum width, and because the secondaries no longer stretch either, the
   whole action field sits in one calm left-aligned row. */
@media (min-width: 64rem) {
  .actions #copy {
    flex: 0 1 auto;
    min-width: 10rem;
    max-width: 16rem;
    padding-inline: var(--space-6);
  }
  /* The same screen's other primary is the same object. #submit is a grid item
     of the composer (styles.css:621 gives it width: 100% for thumb-reach), so at
     this width it would otherwise stretch the full 542px column and read as a
     banner while the Copy beside it is capped (kanban t_87e3b535, P8). Same
     16rem ceiling, and it starts at the column's left edge like every other
     field above it. Phone widths are untouched: below 64rem the full-bleed
     button is genuine thumb-reachability. Width only -- the button's 52.3px
     height, and so the 360x640 fold, is unchanged. */
  #submit {
    max-width: 16rem;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* "Give me an example": a quiet text button under the message box. */
.random-example {
  margin-top: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}