/*
 * Cinewide's tokens (docs/UI-AUDIT.md, 2.1): the one file the site, the extension and the
 * dashboard each take into their own build. Dark first; the popup, the welcome page, the
 * dashboard and the site follow the system into light (2026-10-25, mockups E, F and G): the light
 * values are the overrides at the end. The on-video layer and the emails stay dark.
 *
 * A test reads this file and checks every pair of text and ground the components use
 * against WCAG AA in both themes (brand/brand.test.mjs). A colour is changed here and nowhere
 * else: a test fails on a colour written in another style of those surfaces.
 */
:root {
  color-scheme: dark;

  /* Colour */
  --cw-bg: #08090b;
  --cw-raised: #121418;
  /* Lines that only divide: never the only edge of a control. */
  --cw-line: #23262d;
  --cw-text: #f3efe6;
  /* Quieter text, and the edge of a field. */
  --cw-text-2: #9a9da6;
  /* The one accent, with black text on it. */
  --cw-accent: #ffb547;
  --cw-on-accent: #000000;
  /* Destructive actions only. */
  --cw-danger: #ff5f57;
  --cw-on-danger: #000000;
  /* The screen of a frame: the black of a picture's bars. */
  --cw-screen: #000000;
  /* The edge of a control (U9 stage 3): a field, a list, an outlined button, a switch. It
     reads at 3 to 1 on the page, on a raised surface and on a hover, and stays quieter than
     the secondary text, which was the edge before. */
  --cw-edge: #666a73;
  /* The popup's look of U10 (the PO's mockup): a small outlined button's edge ("Use", "Try free
     for 7 days", a key's group), the quieter edge of a list and of Adjust's square, and the
     hairline between the rows of a card. Greys, as the others. */
  --cw-edge-outline: #2f333b;
  --cw-edge-quiet: #262a31;
  --cw-hairline: #1c1f25;
  /* The working surfaces refined (U10, mockups B, C and D; 2026-10-25): the popup's and the
     Adjust panel's ground; the raised square of Adjust and the dev badge; the quiet lines
     (a row's second line, a section's note); the small capitals of a section's label, the
     mockup's #6f737c lifted to pass AA on the ground; the dot between two words; and a key's
     ink in Settings. Greys, as the others. */
  --cw-ground: #0a0b0d;
  --cw-tile: #16181d;
  --cw-text-3: #8b8f98;
  --cw-label: #767a83;
  --cw-dot: #4a4e56;
  --cw-key-ink: #d9d5cc;

  /* The roles the light theme tells apart (2026-10-25): one colour in dark, two in light. Each
     dark value is the one its uses had, so that dark stays as it was to the pixel. */
  /* Amber words and links, and amber shapes: a switch that is on, a status dot, the chosen
     tile's icon, the focus ring. The main button keeps --cw-accent in both. */
  --cw-accent-ink: #ffb547;
  --cw-accent-ink-active: #f0a338;
  --cw-accent-mark: #ffb547;
  --cw-accent-mark-hover: #ffc46e;
  --cw-accent-mark-active: #f0a338;
  /* Red words: a destructive link or button outlined, never a fill. */
  --cw-danger-ink: #ff5f57;
  /* The words and icon of a tile or segment that is not on, under the pointer. */
  --cw-hover-ink: #d9d5cc;
  /* An icon button on the ground under the pointer. */
  --cw-hover-ground: #1a1d22;
  /* The track of the mode row, and the sunk track of Settings' segments. */
  --cw-track: #121418;
  --cw-track-sunk: #0a0b0d;
  /* The tile or segment that is on, its lift and its weight. */
  --cw-chosen: #23262d;
  --cw-chosen-lift: none;
  --cw-chosen-weight: 500;
  /* A select that shows its value. */
  --cw-field: #1a1d22;
  /* A card's ring, and Adjust's square and ring. */
  --cw-card-ring: none;
  --cw-adjust: #16181d;
  --cw-adjust-ring: none;
  /* The popup's switch: its track when off, its thumb off and on; the dashboard's thumb on. */
  --cw-switch-off: #23262d;
  --cw-thumb-off: #8b8f98;
  --cw-thumb-on: #0a0b0d;
  --cw-on-mark: #000000;
  /* A key's box outside the popup's main button. */
  --cw-key-edge: #23262d;
  /* A press on a quiet control: a faint tint of the ink. */
  --cw-faint: rgb(255 255 255 / 0.04);
  /* What floats over a page: a toast, a menu. */
  --cw-float-shadow: 0 6px 24px rgb(0 0 0 / 0.5);
  /* The site's header over the page as it scrolls. */
  --cw-veil: rgb(8 9 11 / 0.94);

  /* The same in both themes: a screen is dark, and so is what is drawn on it or on amber. */
  /* The lines and quiet ink of a drawn screen, its faint stripes and its trimmed bars, and the
     tinted scrims over a picture with white on them. */
  --cw-screen-ink: #9a9da6;
  --cw-screen-line: #23262d;
  --cw-screen-stripe: rgb(255 255 255 / 0.035);
  --cw-screen-trim: rgb(8 9 11 / 0.66);
  --cw-scrim: rgb(0 0 0 / 0.6);
  --cw-scrim-strong: rgb(0 0 0 / 0.8);
  --cw-scrim-soft: rgb(0 0 0 / 0.75);
  --cw-on-scrim: #ffffff;
  /* The site's screens and its night cards (the round "Landing", 2026-11-01): a screen's bezel
     and its stand, and the card of the launch offer and of the last way in, with its words. */
  --cw-bezel: #16181d;
  --cw-stand: #2a2e35;
  --cw-night: #121418;
  --cw-on-night: #f3efe6;
  /* On the amber button: a key's ink and box, the press's inner ring, and its glow on the site. */
  --cw-on-accent-ink: #0a0b0d;
  --cw-on-accent-edge: rgb(0 0 0 / 0.55);
  --cw-accent-glow: rgb(255 181 71 / 0.45);
  /* The picture of the dashboard's thanks: dusk, with the amber sun fading to nothing. */
  --cw-accent-clear: rgb(255 181 71 / 0);
  /* Pro's column in the site's table of the plans: the page warmed by the accent. */
  --cw-accent-tint: #1d1a14;
  --cw-dusk-high: #1d2a3f;
  --cw-dusk-mid: #3a3346;
  --cw-dusk-low: #6b4a35;
  /* The welcome page's drawing of Chrome's toolbar, in Chrome's own greys. */
  --cw-chrome-pill: #202124;
  --cw-chrome-edge: #3c4043;
  --cw-chrome-ink: #e8eaed;
  --cw-chrome-quiet: #9a9da6;

  /* States, the same on every control (U9 stage 3). */
  /* Under the pointer: a quiet control's fill. */
  --cw-hover: #1a1d22;
  /* The one that is on: a mode pressed, an item chosen. */
  --cw-selected: #23262d;
  /* The amber button under the pointer, and pressed down. */
  --cw-accent-hover: #ffc46e;
  --cw-accent-active: #f0a338;
  /* What is not available, still read. */
  --cw-disabled-opacity: 0.55;
  --cw-focus-offset: 2px;

  /* Type */
  --cw-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cw-display-width: 125;
  --cw-display-weight: 800;
  --cw-display-tracking: -0.02em;
  --cw-body-width: 100;
  --cw-body-weight: 400;
  --cw-strong-weight: 600;
  /* The scale, from small print to the first screen's line. */
  --cw-size-xs: 0.75rem;
  --cw-size-s: 0.875rem;
  --cw-size-m: 1rem;
  --cw-size-l: 1.25rem;
  --cw-size-xl: 1.75rem;
  --cw-size-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --cw-size-3xl: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
  --cw-leading: 1.5;
  --cw-leading-tight: 1.05;
  /* The scale of the surfaces people work in, the popup and the dashboard (U9 stage 3): few
     sizes, each with its own line height. The popup takes 11, 12, 13, 16 and 20 (its text, the
     product owner, 2026-10-19: 13 for body lines, 12 secondary, 11 at least); the dashboard
     its body at 14. */
  --cw-ui-min: 11px;
  --cw-ui-min-line: 14px;
  --cw-ui-secondary: 12px;
  --cw-ui-secondary-line: 16px;
  --cw-ui-body-s: 13px;
  --cw-ui-body-s-line: 18px;
  --cw-ui-body: 14px;
  --cw-ui-body-line: 20px;
  --cw-ui-lead: 16px;
  --cw-ui-lead-line: 22px;
  --cw-ui-title: 20px;
  --cw-ui-title-line: 24px;
  /* Small capitals of a section's label, and small text on the dark ground. */
  --cw-tracking-label: 0.04em;
  --cw-tracking-small: 0.01em;

  /* Space and shape */
  --cw-space-1: 0.25rem;
  --cw-space-2: 0.5rem;
  --cw-space-3: 0.75rem;
  --cw-space-4: 1rem;
  --cw-space-5: 1.5rem;
  --cw-space-6: 2rem;
  --cw-space-7: 3rem;
  --cw-space-8: 4.5rem;
  /* The space between things, by what they are to each other (U9 stage 3): two that read
     together, the parts of one group, and one group from the next. Always a step of the
     scale above. */
  --cw-gap-pair: var(--cw-space-2);
  --cw-gap-inside: var(--cw-space-3);
  --cw-gap-group: var(--cw-space-4);
  /* Three corners, stepping down as they nest: a container, a control, a tag. */
  --cw-radius-s: 4px;
  --cw-radius: 6px;
  --cw-radius-l: 10px;
  /* Three heights of control: the one large button, a field and its button, a small one. */
  --cw-control-l: 56px;
  --cw-control-l-compact: 48px;
  --cw-control-m: 40px;
  --cw-control-s: 32px;
  /* Icons: one stroke, two sizes, in words and on their own. */
  --cw-icon-s: 16px;
  --cw-icon-m: 20px;
  --cw-icon-stroke: 1.75;
  /* The corner marks: their arm and their stroke. */
  --cw-mark: 14px;
  --cw-mark-stroke: 2px;
  --cw-focus: 2px;

  /* Motion (docs/MOTION.md, 2026-10-19): the hero's bars slide out in 600 ms; everything else
     is quicker and quieter. Leaving uses the fast time with ease-in. */
  --cw-motion: 600ms;
  --cw-motion-hero: 600ms;
  --cw-motion-fast: 120ms;
  --cw-motion-base: 180ms;
  --cw-motion-slow: 240ms;
  --cw-motion-push: 220ms;
  --cw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* The one curve of everything that moves in the popup and the dashboard (2026-10-21). */
  --cw-ease-move: cubic-bezier(0.2, 0, 0, 1);
}

/* The light theme (2026-10-25, the owner's mockups E, F and G: docs/ui/u10-mockup/9 to 11). Only
   colours change: sizes, spaces and type are the same. The small screen, the main button, the
   on-video layer and the emails do not change. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --cw-bg: #f4f3ef;
    --cw-ground: #f4f3ef;
    --cw-raised: #ffffff;
    --cw-line: #ebe9e4;
    --cw-hairline: #ebe9e4;
    --cw-text: #16181d;
    --cw-text-2: #5f636b;
    --cw-text-3: #5f636b;
    --cw-label: #5f636b;
    --cw-dot: #c9c6bf;
    --cw-key-ink: #3b3e45;
    --cw-tile: #ebe9e4;
    /* A field's edge and a control's edge at 3 to 1 on the page, a card, a hover and a track;
       an outlined button's edge and a select's, quiet as the mockups draw them. */
    --cw-edge: #7d8189;
    --cw-edge-outline: #d6d3cc;
    --cw-edge-quiet: #dedbd3;
    --cw-hover: #f6f4ef;
    --cw-selected: #e7e4dd;

    --cw-accent-ink: #9a5400;
    --cw-accent-ink-active: #7a4300;
    --cw-accent-mark: #c27000;
    --cw-accent-mark-hover: #ad6400;
    --cw-accent-mark-active: #9a5400;
    --cw-danger-ink: #b93228;
    --cw-hover-ink: #16181d;
    --cw-hover-ground: #ebe9e4;
    --cw-track: #ebe9e4;
    --cw-track-sunk: #ebe9e4;
    --cw-chosen: #ffffff;
    --cw-chosen-lift: 0 1px 2px rgb(22 24 29 / 0.12);
    --cw-chosen-weight: 600;
    --cw-field: #f4f3ef;
    --cw-card-ring: 0 0 0 1px #e7e4dd;
    --cw-adjust: #ffffff;
    --cw-adjust-ring: 0 0 0 1px #e2dfd8;
    --cw-switch-off: #d6d3cc;
    --cw-thumb-off: #ffffff;
    --cw-thumb-on: #ffffff;
    --cw-on-mark: #ffffff;
    --cw-key-edge: #d6d3cc;
    --cw-faint: rgb(22 24 29 / 0.05);
    --cw-float-shadow: 0 6px 24px rgb(22 24 29 / 0.12);
    --cw-veil: rgb(244 243 239 / 0.94);
    --cw-chrome-pill: #f1f3f4;
    --cw-chrome-edge: #dadce0;
    --cw-chrome-ink: #3c4043;
    --cw-chrome-quiet: #5f6368;
    --cw-accent-tint: #fff6e6;
  }
}

/*
 * The font and the type (docs/UI-AUDIT.md, 2.2). A build puts this after tokens.css, and
 * the font at fonts/archivo.woff2 beside the stylesheet it makes.
 */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

html {
  background: var(--cw-bg);
  color: var(--cw-text);
  font-family: var(--cw-font);
  font-size: 100%;
  font-weight: var(--cw-body-weight);
  font-stretch: 100%;
  line-height: var(--cw-leading);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cw-bg);
  /* Chrome gives a page of an extension its own font and size on the body: the brand's
     are set here, where they are not inherited past it. */
  font-family: var(--cw-font);
  font-size: 1rem;
}

/* Display: wide, heavy and tight. */
.cw-display {
  font-stretch: 125%;
  font-weight: var(--cw-display-weight);
  letter-spacing: var(--cw-display-tracking);
  line-height: var(--cw-leading-tight);
  text-wrap: balance;
}

strong,
b {
  font-weight: var(--cw-strong-weight);
}

/* Figures that line up: ratios, prices, dates. */
.cw-tabular {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--cw-accent-ink);
  text-underline-offset: 0.18em;
}

/* Focus always shows: the accent, apart from what it rings. */
:focus-visible {
  outline: var(--cw-focus) solid var(--cw-accent-mark);
  outline-offset: 2px;
}

/* A ring is the keyboard's: none until the keys that move focus were used, and none while the
   last move was a pointer, whatever key is pressed after a click (the owner's review of
   2026-10-21; the page keeps `data-modality`). A focus a script gave before either, Back's
   when Settings opens, draws none (the PO, 2026-11-01). A page that keeps no `data-modality`,
   which runs no script, keeps Chrome's own ring for the keyboard (R94). */
:root[data-modality]:not([data-modality='keyboard']) :focus-visible {
  outline: none;
}

::selection {
  background: var(--cw-accent);
  color: var(--cw-on-accent);
}

/* Read by a screen reader, and not drawn. */
.cw-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Cinewide's components (docs/UI-AUDIT.md, 2.3 to 2.4): classes, so that the site's HTML,
 * the extension's DOM and the dashboard's React draw the same markup. A build puts this
 * after tokens.css and base.css. The markup each expects is written above it.
 */

/* ---- The gate ---------------------------------------------------------------------------
 *
 * A 21:9 screen, a picture on it, and the bars around the picture, which slide away.
 *
 *   <figure class="cw-gate cw-gate--opens">
 *     <div class="cw-gate__screen">
 *       <img class="cw-gate__picture" src="…" alt="" />
 *       <span class="cw-gate__bar cw-gate__bar--top"></span>   (and --bottom, --left, --right)
 *     </div>
 *     <span class="cw-ratio cw-gate__label">
 *       <span class="cw-ratio__from">16 : 9</span><span class="cw-ratio__to">2.39 : 1</span>
 *     </span>
 *   </figure>
 *
 * Drawn after: the picture as the screen shows it once Smart has run, and the bars gone.
 * Before: `data-state="before"` on the gate, or a `.cw-gate-switch` checkbox before it that
 * is not checked. `cw-gate--opens` plays the one motion as the page loads.
 *
 * The numbers are of the page's own example, worked out from the engine's (`fit.ts`): a
 * 2.39 : 1 film inside a 16:9 video, on a 21:9 screen. After, the picture is as wide as the
 * screen, 21 / 2.39 / 9 = 97.6 % of its height. Before, it is as wide as the 16:9 video,
 * 16 / 21 = 76.2 % of the screen; the side bars are the rest of the width, and the bars
 * above and below the rest of the height, (100 - 97.6 × 0.762) / 2 = 12.8 %.
 */
.cw-gate {
  --cw-picture-w: 100%;
  --cw-picture-h: 97.63%;
  --cw-from: 0.7619;
  --cw-bar-x: 11.905%;
  --cw-bar-y: 12.81%;
  --cw-gate-delay: 500ms;
  position: relative;
  margin: 0;
}

.cw-gate__screen {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--cw-screen);
  border-radius: 2px;
}

.cw-gate__picture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw-picture-w);
  height: var(--cw-picture-h);
  object-fit: cover;
  display: block;
  transform: translate(-50%, -50%);
  transition: transform var(--cw-motion) var(--cw-ease-out);
}

/* A bar: black, with one edge of light on the side of the picture. */
.cw-gate__bar {
  position: absolute;
  background: var(--cw-screen);
  transition: transform var(--cw-motion) var(--cw-ease-out);
}

.cw-gate__bar--top,
.cw-gate__bar--bottom {
  left: 0;
  right: 0;
  height: var(--cw-bar-y);
}

.cw-gate__bar--left,
.cw-gate__bar--right {
  top: 0;
  bottom: 0;
  width: var(--cw-bar-x);
}

.cw-gate__bar--top {
  top: 0;
  box-shadow: inset 0 -1px 0 var(--cw-screen-line);
  transform: translateY(-100%);
}

.cw-gate__bar--bottom {
  bottom: 0;
  box-shadow: inset 0 1px 0 var(--cw-screen-line);
  transform: translateY(100%);
}

.cw-gate__bar--left {
  left: 0;
  box-shadow: inset -1px 0 0 var(--cw-screen-line);
  transform: translateX(-100%);
}

.cw-gate__bar--right {
  right: 0;
  box-shadow: inset 1px 0 0 var(--cw-screen-line);
  transform: translateX(100%);
}

.cw-gate__label {
  position: absolute;
  top: var(--cw-space-3);
  right: var(--cw-space-3);
}

/* Before: the picture as small as it was, and the bars in place. */
.cw-gate[data-state='before'] .cw-gate__picture,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-gate__picture {
  transform: translate(-50%, -50%) scale(var(--cw-from));
}

.cw-gate[data-state='before'] .cw-gate__bar,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-gate__bar {
  transform: none;
}

.cw-gate[data-state='before'] .cw-ratio__from,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-ratio__from {
  opacity: 1;
}

.cw-gate[data-state='before'] .cw-ratio__to,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-ratio__to {
  opacity: 0;
}

/* The one motion, as the page loads: from before to after. */
@keyframes cw-gate-picture {
  from {
    transform: translate(-50%, -50%) scale(var(--cw-from));
  }
}

@keyframes cw-gate-bar {
  from {
    transform: none;
  }
}

/* The label holds its first words until the bars are gone, then changes: no motion. */
@keyframes cw-gate-hold-shown {
  from,
  to {
    opacity: 1;
  }
}

@keyframes cw-gate-hold-hidden {
  from,
  to {
    opacity: 0;
  }
}

.cw-gate--opens .cw-gate__picture {
  animation: cw-gate-picture var(--cw-motion) var(--cw-ease-out) var(--cw-gate-delay) backwards;
}

.cw-gate--opens .cw-gate__bar {
  animation: cw-gate-bar var(--cw-motion) var(--cw-ease-out) var(--cw-gate-delay) backwards;
}

.cw-gate--opens .cw-ratio__from {
  animation: cw-gate-hold-shown calc(var(--cw-gate-delay) + var(--cw-motion)) step-end backwards;
}

.cw-gate--opens .cw-ratio__to {
  animation: cw-gate-hold-hidden calc(var(--cw-gate-delay) + var(--cw-motion)) step-end backwards;
}

/* ---- The ratio label ------------------------------------------------------------------
 *
 *   <span class="cw-ratio">2.39 : 1</span>
 *   <span class="cw-ratio"><span class="cw-ratio__from">16 : 9</span><span class="cw-ratio__to">2.39 : 1</span></span>
 */
.cw-ratio {
  display: inline-grid;
  align-items: center;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  background: var(--cw-bg);
  color: var(--cw-text);
  font-size: var(--cw-size-s);
  font-stretch: 125%;
  font-weight: var(--cw-strong-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
}

.cw-ratio__from,
.cw-ratio__to {
  grid-area: 1 / 1;
  transition: opacity 0s linear var(--cw-motion);
}

.cw-ratio__from {
  opacity: 0;
}

/* ---- Corner marks ---------------------------------------------------------------------
 *
 * The two corners of the icon, in the accent: on a gate, or on any box with `cw-corners`.
 */
.cw-corners,
.cw-gate {
  position: relative;
}

.cw-corners::before,
.cw-corners::after,
.cw-gate::before,
.cw-gate::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: var(--cw-mark);
  height: var(--cw-mark);
  border: 0 solid var(--cw-accent);
  pointer-events: none;
}

/* A corner mark on the page is an amber shape (in light, the darker amber); on a screen it stays
   the brand's amber. */
.cw-corners::before,
.cw-corners::after {
  border-color: var(--cw-accent-mark);
}

.cw-corners::before,
.cw-gate::before {
  top: calc(-1 * var(--cw-mark-stroke) - 4px);
  left: calc(-1 * var(--cw-mark-stroke) - 4px);
  border-top-width: var(--cw-mark-stroke);
  border-left-width: var(--cw-mark-stroke);
}

.cw-corners::after,
.cw-gate::after {
  right: calc(-1 * var(--cw-mark-stroke) - 4px);
  bottom: calc(-1 * var(--cw-mark-stroke) - 4px);
  border-right-width: var(--cw-mark-stroke);
  border-bottom-width: var(--cw-mark-stroke);
}

/* ---- Keycaps --------------------------------------------------------------------------
 *
 *   <span class="cw-keys"><kbd class="cw-key">Alt</kbd><kbd class="cw-key">Shift</kbd><kbd class="cw-key">S</kbd></span>
 */
.cw-keys {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25em;
  vertical-align: middle;
}

.cw-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  padding: 0.15em 0.5em 0.2em;
  border: 1px solid var(--cw-key-edge);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: var(--cw-raised);
  color: var(--cw-text);
  font-family: var(--cw-font);
  font-size: 0.8em;
  font-weight: var(--cw-strong-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

/* On an amber button the keycaps are drawn in black. */
.cw-button--primary .cw-key {
  border-color: var(--cw-on-accent-edge);
  background: transparent;
  color: var(--cw-on-accent);
}

/* ---- Buttons ----------------------------------------------------------------------------
 *
 *   <button class="cw-button cw-button--primary">…</button>   the one thing to press
 *   <button class="cw-button cw-button--secondary">…</button>
 *   <a class="cw-button cw-button--outline">…</a>          beside a primary action
 *   <button class="cw-button cw-button--danger">…</button>    destructive actions only
 *   <button class="cw-icon-button" aria-label="…"><svg …/></button>
 *   <div class="cw-segmented" role="group" aria-label="…">
 *     <button class="cw-segmented__item" aria-pressed="true">…</button> …
 *   </div>
 */
.cw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cw-space-2);
  min-height: 44px;
  padding: 0 var(--cw-space-5);
  border: 1px solid transparent;
  border-radius: var(--cw-radius);
  font: inherit;
  font-weight: var(--cw-strong-weight);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.cw-button--primary {
  background: var(--cw-accent);
  color: var(--cw-on-accent);
}

.cw-button--primary:hover {
  background: var(--cw-accent-hover);
}

.cw-button--secondary {
  background: var(--cw-raised);
  /* Its edge reads at 3:1 at least on the page and on a raised surface (U9, A1): the line
     colour is never a control's only edge. */
  border-color: var(--cw-text-2);
  color: var(--cw-text);
}

.cw-button--secondary:hover {
  border-color: var(--cw-text);
}

/* Beside a primary action: the same button, drawn by its edge alone. */
.cw-button--outline {
  background: transparent;
  border-color: var(--cw-text-2);
  color: var(--cw-text);
}

.cw-button--outline:hover {
  border-color: var(--cw-text);
}

.cw-button--danger {
  background: var(--cw-danger);
  color: var(--cw-on-danger);
}

/* The one large button: Smart. */
.cw-button--large {
  min-height: 56px;
  font-size: var(--cw-size-l);
  font-stretch: 125%;
  font-weight: var(--cw-display-weight);
  letter-spacing: var(--cw-display-tracking);
}

.cw-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.cw-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--cw-radius);
  background: transparent;
  color: var(--cw-text-2);
  cursor: pointer;
}

.cw-icon-button:hover {
  background: var(--cw-raised);
  color: var(--cw-text);
}

.cw-icon-button svg {
  width: 20px;
  height: 20px;
}

.cw-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: calc(var(--cw-radius) + 3px);
  background: var(--cw-track);
}

.cw-segmented__item {
  flex: 1 1 0;
  min-height: 38px;
  padding: 0 var(--cw-space-4);
  border: 0;
  border-radius: var(--cw-radius);
  background: transparent;
  color: var(--cw-text-2);
  font: inherit;
  font-weight: var(--cw-strong-weight);
  cursor: pointer;
}

.cw-segmented__item:hover {
  color: var(--cw-text);
}

.cw-segmented__item[aria-pressed='true'] {
  background: var(--cw-chosen);
  color: var(--cw-text);
  box-shadow: inset 0 -2px 0 var(--cw-accent-mark);
}

/* ---- The toast ------------------------------------------------------------------------
 *
 * What Cinewide says on the video, in one line, with the ratio where there is one.
 *
 *   <div class="cw-toast" role="status"><span class="cw-toast__mark"></span>Bars removed<span class="cw-ratio">2.39 : 1</span></div>
 */
.cw-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-space-3);
  padding: var(--cw-space-2) var(--cw-space-2) var(--cw-space-2) var(--cw-space-4);
  border-radius: var(--cw-radius-l);
  background: var(--cw-raised);
  color: var(--cw-text);
  font-size: var(--cw-size-s);
  font-weight: var(--cw-strong-weight);
  line-height: 1.3;
  box-shadow: var(--cw-float-shadow);
}

/* A corner of the icon, small, before the words. */
.cw-toast__mark {
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--cw-accent-mark);
  border-left: 2px solid var(--cw-accent-mark);
  flex: none;
}

.cw-toast .cw-ratio {
  background: var(--cw-bg);
}

/* ---- The store's state: a label with an amber dot, not a button -------------------------- */
.cw-status {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-space-2);
  color: var(--cw-text-2);
  font-size: var(--cw-size-s);
  font-weight: var(--cw-strong-weight);
}

.cw-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cw-accent-mark);
  flex: none;
}

/* ---- No motion where the viewer asks for none: the after state shows ----------------- */
@media (prefers-reduced-motion: reduce) {
  .cw-gate *,
  .cw-ratio__from,
  .cw-ratio__to {
    animation: none !important;
    transition: none !important;
  }
}

/* The dashboard, in the round "The Gate" (docs/UI-AUDIT.md, U4). The build puts the brand's
   tokens, type and parts (brand/) before this file: what is here is the page's own layout,
   on those tokens. Dark or light as the system is (2026-10-25), from the tokens alone. */
* {
  box-sizing: border-box;
}

body {
  color: var(--cw-text);
  font-size: var(--cw-size-m);
}

/* The test build's banner (QA-LOG A4): only the test dashboard has it. */
.test-build {
  margin: 0;
  padding: var(--cw-space-2) var(--cw-space-5);
  background: var(--cw-accent);
  color: var(--cw-on-accent);
  font-weight: 600;
  text-align: center;
}

/* ---- The top bar: the name; who is signed in, signing out, the other language ---------- */
.top,
main {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: var(--cw-space-5);
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cw-space-3) var(--cw-space-5);
  padding-block: var(--cw-space-4);
  border-bottom: 1px solid var(--cw-line);
}

.name {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-space-2);
  font-size: var(--cw-size-l);
  font-stretch: 125%;
  font-weight: var(--cw-display-weight);
  letter-spacing: var(--cw-display-tracking);
}

.name img {
  display: block;
  border-radius: 5px;
}

.top__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cw-space-2) var(--cw-space-4);
  min-width: 0;
  font-size: var(--cw-size-s);
}

/* The address, whole: on a phone it takes a line of its own rather than lose its end. */
.who {
  min-width: 0;
  color: var(--cw-text-2);
  overflow-wrap: anywhere;
}

.top a,
.top button.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

h1 {
  margin: var(--cw-space-6) 0 var(--cw-space-4);
  color: var(--cw-text-2);
  font-size: var(--cw-size-m);
  font-weight: var(--cw-strong-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--cw-space-3);
  overflow-wrap: anywhere;
}

.muted {
  color: var(--cw-text-2);
  font-size: var(--cw-size-s);
}

.problem {
  color: var(--cw-danger-ink);
  font-size: var(--cw-size-s);
}

/* ---- The plan band: the plan, large, and its one next action ---------------------------- */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cw-space-5);
  margin: 0 0 var(--cw-space-6);
  padding: var(--cw-space-6);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-l);
  background: var(--cw-raised);
}

/* The corners stand inside the band and the card, so that nothing reaches past their
   edge; they are quiet until Pro is held, then the accent's. */
.band::before,
.card--pro::before {
  top: var(--cw-space-2);
  left: var(--cw-space-2);
}

.band::after,
.card--pro::after {
  right: var(--cw-space-2);
  bottom: var(--cw-space-2);
}

.band::before,
.band::after {
  border-color: var(--cw-text-2);
  transition: border-color var(--cw-motion) var(--cw-ease-out);
}

.band--pro::before,
.band--pro::after {
  border-color: var(--cw-accent-mark);
}

.band__words {
  flex: 1 1 18rem;
  min-width: 0;
}

.band__name {
  margin: 0 0 var(--cw-space-2);
  font-size: var(--cw-size-2xl);
}

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

/* ---- Cards ------------------------------------------------------------------------------ */
.card {
  margin: 0 0 var(--cw-space-5);
  padding: var(--cw-space-5);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-l);
  background: var(--cw-raised);
}

.card__title {
  margin: 0 0 var(--cw-space-4);
  font-size: var(--cw-size-l);
  font-weight: var(--cw-strong-weight);
}

/* A secondary button is drawn by an edge of the quieter text, 3:1 and more on any ground,
   and no fill of its own: the line alone is never a control's only edge (U9, A1). */
.cw-button--secondary {
  background: transparent;
  border-color: var(--cw-text-2);
  transition: border-color var(--cw-motion-fast, 120ms) ease-in;
}

.cw-button--secondary:hover {
  border-color: var(--cw-text);
}

/* "Get Pro": the largest card while Pro is not held. */
.card--pro {
  padding: var(--cw-space-6);
  border-color: var(--cw-text-2);
}

.card--pro .card__title {
  color: var(--cw-accent-ink);
  font-size: var(--cw-size-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pro-lead {
  margin: 0 0 var(--cw-space-5);
  font-size: var(--cw-size-xl);
}

.pro-points {
  display: grid;
  gap: var(--cw-space-3);
  margin: 0 0 var(--cw-space-5);
  padding: 0;
  list-style: none;
}

.pro-points li {
  position: relative;
  padding: 0 0 0 var(--cw-space-5);
  border-top: 0;
}

/* Each line's mark: the icon's corner, in the accent. */
.pro-points li::before {
  content: '';
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 0.6em;
  height: 0.6em;
  border-top: 2px solid var(--cw-accent-mark);
  border-left: 2px solid var(--cw-accent-mark);
}

.buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cw-space-3) var(--cw-space-4);
  margin: 0 0 var(--cw-space-4);
}

.price {
  font-size: var(--cw-size-l);
  font-weight: var(--cw-strong-weight);
}

/* Where the buttons to buy would be, from a build that sells nothing yet (F6). */
.buy-soon {
  margin: 0;
  font-weight: var(--cw-strong-weight);
}

/* The thank-you: the gate's one motion, on a picture the stylesheet draws. */
.thanks .cw-gate {
  max-width: 360px;
  margin: 0 0 var(--cw-space-4);
}

.thanks__picture {
  background:
    radial-gradient(ellipse at 70% 80%, var(--cw-accent) 0%, var(--cw-accent-clear) 55%),
    linear-gradient(180deg, var(--cw-dusk-high) 0%, var(--cw-dusk-mid) 55%, var(--cw-dusk-low) 100%);
}

/* ---- Your data: sync, the site choices and the presets, one list ------------------------- */
.group {
  padding-top: var(--cw-space-4);
  border-top: 1px solid var(--cw-line);
}

.group + .group,
.card__title + .group {
  margin-top: var(--cw-space-4);
}

.card__title + .group {
  padding-top: 0;
  border-top: 0;
}

h3 {
  margin: 0 0 var(--cw-space-3);
  color: var(--cw-text-2);
  /* 13 px at least, an eyebrow that is read (U9, A24). */
  font-size: 0.8125rem;
  font-weight: var(--cw-strong-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

ul {
  margin: 0 0 var(--cw-space-3);
  padding: 0;
  list-style: none;
}

li {
  padding: var(--cw-space-3) 0;
  border-top: 1px solid var(--cw-line);
}

li:first-child {
  border-top: 0;
}

.line {
  display: flex;
  align-items: center;
  gap: var(--cw-space-3);
  margin: 0 0 var(--cw-space-2);
  min-width: 0;
}

.line .item {
  margin: 0;
}

.item {
  font-weight: var(--cw-strong-weight);
}

/* A line's mark: a site's first letter, or a preset's corners, drawn here. */
.mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius);
  background: var(--cw-bg);
  color: var(--cw-text);
  font-size: var(--cw-size-s);
  font-stretch: 125%;
  font-weight: var(--cw-display-weight);
}

.mark--preset {
  color: var(--cw-accent-ink);
}

.what {
  margin: var(--cw-space-2) 0 0;
}

.as-of {
  margin-bottom: var(--cw-space-2);
}

#per-title {
  margin: var(--cw-space-4) 0 0;
  padding-top: var(--cw-space-4);
  border-top: 1px solid var(--cw-line);
}

/* ---- Account: the provider's pages, the export, deleting -------------------------------- */
.row-block {
  padding-block: var(--cw-space-4);
  border-top: 1px solid var(--cw-line);
}

.card__title + .row-block {
  padding-top: 0;
  border-top: 0;
}

.row-block:last-child {
  padding-bottom: 0;
}

/* The way into deleting the account: the destructive red by its edge; the red fill is only
   the button that confirms (U9, A23). */
.cw-button--danger.delete {
  background: transparent;
  border: 1px solid var(--cw-danger-ink);
  color: var(--cw-danger-ink);
}

/* A line's delete: the icon alone, a ghost with no box, red on hover and focus, the height
   of the select beside it, 44 px for a finger (the owner's review of 2026-10-21; U9, A21). */
.cw-icon-button.remove {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--cw-text-2);
}

.cw-icon-button.remove:hover,
.cw-icon-button.remove:focus-visible {
  color: var(--cw-danger-ink);
}

/* ---- Your data's rows: one line each ----------------------------------------------------- */
.line--row {
  margin-bottom: 0;
}

.row-line {
  display: flex;
  align-items: center;
  gap: var(--cw-space-2);
  min-width: 0;
}

/* A site: the letter and the name, which gives way with an ellipsis, then the choice at a
   fixed width and the delete, to the right, the two the same height. */
.row-line .item {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row-line .press {
  flex: none;
  width: 160px;
  min-height: 44px;
  padding: 0 var(--cw-space-2);
}

/* A preset's name: a field that reads as text until it is hovered or focused. It gives way
   before the line beside it does. */
.row-line .name-field {
  flex: 1 4 140px;
  min-width: 72px;
  min-height: 44px;
  /* Its words in the middle of its 44 px, on the line of its meta and bin (PR #77, the PO's 4):
     this rule outranked the field's own padding, and the name sat at the top. */
  padding: 11px var(--cw-space-2);
  border: 1px solid transparent;
  background: transparent;
  font-weight: var(--cw-strong-weight);
}

/* A field of one row that grows to its words, where the browser sizes it (Chrome); elsewhere
   the page sets its height. */
textarea.name-field {
  field-sizing: content;
  resize: none;
  overflow: hidden;
  padding-block: 11px;
  font: inherit;
  font-weight: var(--cw-strong-weight);
  line-height: 1.35;
  color: inherit;
  overflow-wrap: anywhere;
}

.row-line .name-field:hover {
  border-color: var(--cw-line);
}

.row-line .name-field:focus {
  border-color: var(--cw-text-2);
  background: var(--cw-bg);
}

.row-line .what {
  flex: 0 1 auto;
  min-width: 48px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row-line .save {
  flex: none;
  min-height: 44px;
  padding: 0 var(--cw-space-3);
}

.cw-icon-button.remove svg {
  width: 16px;
  height: 16px;
}

/* A phone, below 480 px (the PO's review of 2026-10-23, 5): nothing of a name is cut. A
   site takes two lines, the letter and the whole name on the first, the choice (as wide as
   the line less the bin) and the bin on the second. A preset keeps its bin at the end of its
   first line, its name wrapping beside it, and its line under the name. */
@media (max-width: 479.98px) {
  .row-line--site {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    row-gap: var(--cw-space-2);
  }

  .row-line--site .item {
    grid-column: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .row-line--site {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .row-line--site .item {
    grid-column: 2 / 5;
  }

  /* The switch, with its name, on a line of its own under the choice: neither the site's
     name nor the choice's words give way to it. A finger's 44 px to press (R84), of which
     the line keeps 32: the 6 px above and below fall into the gaps around it. */
  .row-line--site .auto-switch {
    grid-row: 3;
    grid-column: 1 / 5;
    justify-self: start;
    min-height: 44px;
    margin-block: -6px;
  }

  .row-line--site .press-box {
    grid-row: 2;
    grid-column: 1 / 4;
    min-width: 0;
  }

  .row-line--site .press {
    width: 100%;
    min-width: 0;
  }

  .row-line--site .remove {
    grid-row: 2;
    grid-column: 4;
  }

  form.row-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      'mark name save bin'
      '. what what what';
    align-items: center;
    column-gap: var(--cw-space-2);
    row-gap: 0;
  }

  form.row-line .mark {
    grid-area: mark;
  }

  form.row-line .name-field {
    grid-area: name;
    min-width: 0;
  }

  form.row-line .what {
    grid-area: what;
    padding-inline: var(--cw-space-2);
    white-space: normal;
  }

  form.row-line .save {
    grid-area: save;
  }

  form.row-line .remove {
    grid-area: bin;
  }
}

/* The address under "Account", where the top bar has no room for it (a phone). */
.narrow-only {
  display: none;
}

/* ---- Forms -------------------------------------------------------------------------------- */
form {
  display: grid;
  gap: var(--cw-space-2);
}

label {
  color: var(--cw-text-2);
  font-size: var(--cw-size-s);
}

/* Deleting the account, the popup's step (the owner, 2026-10-31, 3): the title, what goes, what
   becomes of a purchase, what stays. */
#delete-form p {
  margin: 0;
}

#delete-form .delete-title {
  font-weight: var(--cw-strong-weight);
}

#delete-form .delete-list {
  margin: 2px 0 0;
  padding-left: 20px;
  list-style: disc;
  color: var(--cw-text-2);
}

/* A list of three short lines with their bullets, not the page's rows of items. */
#delete-form .delete-list li {
  display: list-item;
  padding: 0;
  border: 0;
}

#delete-pro,
#delete-subscription,
#delete-no-pro,
#delete-form .delete-stays {
  color: var(--cw-text-2);
}

input,
select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--cw-space-3);
  border: 1px solid var(--cw-text-2);
  border-radius: var(--cw-radius);
  background: var(--cw-bg);
  color: var(--cw-text);
  font: inherit;
}

/* The list's own chevron, drawn here (the owner's retest of PR #77, 6): the browser's arrow
   sat off centre. Vertically centred, 12 px from the right; the words keep clear of it. */
select {
  appearance: none;
  padding-right: calc(12px + 10px + var(--cw-space-2));
  /* Two strokes of the text's colour, drawn by gradients: nothing is fetched (build.test). */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cw-text) 50%),
    linear-gradient(135deg, var(--cw-text) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    right calc(12px + 5px) center,
    right 12px center;
  background-size: 5px 5px;
  cursor: pointer;
}

.row-line .press {
  padding-right: calc(12px + 10px + var(--cw-space-2));
}

/* ---- Auto Apply in Your data (the owner's retest of PR #77, 5) ---------------------------- */
/* A site's switch, beside its choice, as the popup's: 36 x 20, the accent when on. */
.auto-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--cw-space-2);
  min-height: 44px;
  cursor: pointer;
}

input.switch {
  flex: none;
  appearance: none;
  position: relative;
  width: 36px;
  min-height: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cw-text-2);
  border-radius: 999px;
  background: var(--cw-bg);
  cursor: pointer;
}

input.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cw-text-2);
  transition: transform var(--cw-motion-fast) var(--cw-ease-out);
}

input.switch:checked {
  border-color: var(--cw-accent-mark);
  background: var(--cw-accent-mark);
}

input.switch:checked::after {
  background: var(--cw-on-mark);
  transform: translateX(16px);
}

input.switch:focus-visible {
  outline: 2px solid var(--cw-accent-mark);
  outline-offset: 2px;
}

/* "Pro", beside what the account does not hold. */
.badge.pro-tag {
  margin-left: 0;
}

/* Where Auto Apply runs: its name, and the popup's two choices as segments. */
.runs-on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cw-space-2) var(--cw-space-3);
  margin-top: var(--cw-space-3);
  color: var(--cw-text);
}

.segments {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: 2px;
  border: 1px solid var(--cw-text-2);
  border-radius: var(--cw-radius);
}

.segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--cw-space-3);
  border-radius: calc(var(--cw-radius) - 2px);
  color: var(--cw-text-2);
  font-size: var(--cw-size-s);
  font-weight: var(--cw-strong-weight);
  cursor: pointer;
}

/* Disabled too (Free reads it and changes nothing): the rule for every disabled control, later
   in the sheet and as specific as `.segment > input`, would show the two radios at 0.55 over the
   words (the owner, 2026-10-31, shot 3). */
/* The radio is what a finger presses: 2 px into the frame's padding above and below, 44 px
   in all (R84), while the segment drawn stays 40. */
.segment > input,
.segment > input:disabled {
  appearance: none;
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  min-height: 0;
  height: calc(100% + 4px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Under the pointer, one not chosen only brightens its words; pressed down, a faint white. Never
   the look of the one chosen (the owner, PR #81: the popup's rule for every segmented control). */
.segment:not(:has(input:checked)):hover {
  color: var(--cw-hover-ink);
}

.segment:not(:has(input:checked)):active {
  background: var(--cw-faint);
}

.segment:has(input:checked) {
  background: var(--cw-chosen);
  box-shadow: var(--cw-chosen-lift);
  color: var(--cw-text);
}

.segment:has(input:focus-visible) {
  outline: 2px solid var(--cw-accent-mark);
  outline-offset: 2px;
}

.segment:has(input:disabled) {
  opacity: 0.55;
  cursor: default;
}

/* Where the two segments do not fit on one line: a list of the same two, as wide as the line. */
.runs-on--list select {
  flex: 1 1 100%;
}

/* The switches' column, named over it: right-aligned on the switch, the bin's width and a gap
   in from the row's end. On a phone, the name beside each switch instead. */
.auto-head {
  margin: 0 0 calc(-1 * var(--cw-space-2));
  color: var(--cw-text-2);
  font-size: var(--cw-size-xs);
  font-weight: var(--cw-strong-weight);
  text-align: right;
}

.auto-head--rows {
  margin-right: calc(44px + 16px + 2 * var(--cw-space-2));
}

.auto-switch__name {
  display: none;
  color: var(--cw-text-2);
  font-size: var(--cw-size-s);
}

.line .auto-switch {
  margin-left: auto;
}

@media (max-width: 479.98px) {
  .auto-head {
    display: none;
  }

  .auto-switch__name {
    display: inline;
  }
}

/* A row's own save (the owner's retest of PR #77, 1): a 16 px slot beside the switch, there
   whether or not it turns; inside the choice, left of its chevron. */
.row-saving {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--cw-text-2);
}

.press-box {
  position: relative;
  display: inline-flex;
  flex: none;
}

.press-saving {
  position: absolute;
  top: 50%;
  right: calc(12px + 10px + var(--cw-space-2));
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--cw-text-2);
  pointer-events: none;
}

.row-saving .icon,
.press-saving .icon {
  width: 14px;
  height: 14px;
}

.row-problem {
  margin: var(--cw-space-1) 0 0;
}

/* "Show all (N)" under a list of more than six rows. */
.show-all {
  justify-self: start;
  margin-top: var(--cw-space-2);
}

/* ---- Back to top, as the site's (U9; the owner's retest of PR #77, 6) -------------------- */
.top:focus {
  outline: none;
}

.totop {
  position: fixed;
  right: max(var(--cw-space-4), env(safe-area-inset-right));
  bottom: max(var(--cw-space-4), env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cw-text-2);
  border-radius: 50%;
  background: var(--cw-raised);
  color: var(--cw-text);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--cw-motion-fast) ease-in,
    visibility 0s linear var(--cw-motion-fast);
}

.totop[hidden] {
  display: none;
}

.totop--shown {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--cw-motion-base) var(--cw-ease-out),
    visibility 0s;
}

.totop:hover {
  border-color: var(--cw-text);
  color: var(--cw-accent-ink);
}

.totop .icon {
  width: 20px;
  height: 20px;
}

/* The sign-in's own buttons: the accent for the one that goes on. */
button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cw-space-2);
  min-height: 44px;
  padding: 0 var(--cw-space-5);
  border: 0;
  border-radius: var(--cw-radius);
  background: var(--cw-accent);
  color: var(--cw-on-accent);
  font: inherit;
  font-weight: var(--cw-strong-weight);
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  opacity: 0.55;
  cursor: default;
}

/* A site's choice, and a preset's name with "Save" and "Delete": the field has a line, the
   buttons the next. */
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cw-space-2);
  align-items: center;
}

.row label {
  grid-column: 1 / -1;
}

form.row {
  grid-template-columns: 1fr auto;
}

form.row input {
  grid-column: 1 / -1;
}

.ask p {
  margin-bottom: var(--cw-space-2);
}

.ask .row,
.row.two {
  grid-template-columns: 1fr 1fr;
}

details {
  margin: 0 0 var(--cw-space-3);
}

summary {
  color: var(--cw-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

details p {
  margin: var(--cw-space-2) 0 0;
}

/* The way to the trial: the secondary button, as in the popup's card (U9, A22). */
summary.cw-button {
  color: var(--cw-text);
  text-decoration: none;
  list-style: none;
}

summary.cw-button::-webkit-details-marker {
  display: none;
}

details[open] > p {
  animation: cw-arrive var(--cw-motion-base, 180ms) var(--cw-ease-out) both;
}

/* An action in words: amber and underlined, as tall as a finger needs (U9, A20 and A23). */
button.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cw-accent-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cw-space-1) var(--cw-space-5);
  margin: var(--cw-space-1) 0 0;
}

/* The sign-in's form, on its own: a card of its own. */
#email-form,
#code-form {
  padding: var(--cw-space-5);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-l);
  background: var(--cw-raised);
}

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

noscript p {
  max-width: 760px;
  margin: var(--cw-space-5) auto;
  padding: 0 var(--cw-space-5);
}

/* A phone: the top bar in one row, the name, "Sign out" and the other language, with the
   address said under "Account" (U9, A25); the buttons of a card as wide as it, and the two
   answers to deleting one above the other. */
@media (max-width: 560px) {
  .top {
    flex-wrap: nowrap;
    gap: var(--cw-space-3);
  }

  .top__end {
    flex-wrap: nowrap;
    gap: var(--cw-space-4);
  }

  #signed-in-as {
    display: none;
  }

  .narrow-only {
    display: block;
  }

  #delete-form .row.two {
    grid-template-columns: 1fr;
  }

  .top,
  main {
    padding-inline: var(--cw-space-4);
  }

  .band,
  .card--pro {
    padding: var(--cw-space-5);
  }

  .buy-row .cw-button,
  .cw-button--danger.delete {
    width: 100%;
  }

  .buy-row .cw-button--large {
    font-size: var(--cw-size-m);
  }
}

/* A small tag: "Pro" beside what the account does not hold. */
.badge {
  display: inline-block;
  margin-left: var(--cw-space-2);
  padding: 0 var(--cw-space-2);
  border: 1px solid var(--cw-accent-ink);
  border-radius: 999px;
  color: var(--cw-accent-ink);
  font-size: var(--cw-size-xs);
  line-height: 1.6;
  white-space: nowrap;
}

/* ---- Waiting on the server: skeletons (U9, A19) ------------------------------------------
   A bar in the line colour stands where a line of words will be, inside an element of that
   line's own type, so that the box is as tall as it will be; two bars in one element wrap
   to two lines, as a long sentence does. Its shimmer is of opacity
   alone, and none under reduced motion. */
.skeleton {
  display: inline-block;
  height: 0.7em;
  border-radius: 3px;
  background: var(--cw-line);
  vertical-align: middle;
  animation: cw-shimmer 1.6s var(--cw-ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) infinite;
}

.skeleton--s {
  width: 30%;
}

.skeleton--m {
  width: 55%;
}

.skeleton--l {
  width: 85%;
}

.skeleton--narrow-only {
  display: none;
}

@media (max-width: 560px) {
  .skeleton--narrow-only {
    display: inline-block;
  }
}

@keyframes cw-shimmer {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

/* ---- Motion (docs/MOTION.md) -------------------------------------------------------------
   The tokens are the brand's (brand/tokens.css); the values after each name are the same
   ones, for a build made before the brand has them. Only opacity and transform move, and a
   line's height through its grid rows. Nothing waits for a motion: what is drawn is there at
   once to read and to press. */

/* A view, and a part that comes in (a form, the question, what the server said): a cut.
   Words never fade (the owner's review of 2026-10-21; docs/MOTION.md). */
.view,
.arrive {
  animation: none;
}

/* A line, an error or a question: by its height, from nothing to its own, its words there
   at once. */
.fold {
  display: grid;
  grid-template-rows: 1fr;
  animation: cw-fold var(--cw-motion-fast, 120ms) var(--cw-ease-move, cubic-bezier(0.2, 0, 0, 1))
    both;
}

.fold__inner {
  min-height: 0;
  overflow: hidden;
}

@keyframes cw-fold {
  from {
    grid-template-rows: 0fr;
  }

  to {
    grid-template-rows: 1fr;
  }
}

/* A busy button: the spinner beside its label, a turn in 800 ms. */
.icon {
  flex: none;
}

.spin {
  animation: cw-spin 800ms linear infinite;
}

@keyframes cw-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The link that leaves: its icon after the words. */
#payment-open .icon {
  color: var(--cw-text-2);
}

/* Reduced motion: opacity alone, quickly; nothing rises, grows or turns, no shimmer, and
   the busy label is alone. */
@media (prefers-reduced-motion: reduce) {
  .totop {
    transition:
      opacity var(--cw-motion-fast) linear,
      visibility 0s linear var(--cw-motion-fast);
  }

  .totop--shown {
    transition:
      opacity var(--cw-motion-fast) linear,
      visibility 0s;
  }

  input.switch::after {
    transition: none;
  }
  .view,
  .arrive,
  details[open] > p {
    animation: cw-fade var(--cw-motion-fast, 120ms) linear both;
  }

  .fold {
    animation: cw-fade var(--cw-motion-fast, 120ms) linear both;
  }

  .skeleton {
    animation: none;
  }

  .spin {
    display: none;
  }

  .cw-button--secondary {
    transition: none;
  }
}

@keyframes cw-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}