/* TrovoPilot website. All styles live here, not in the pages, because the Content-Security-Policy allows only this site's own style files.

   THE COLOURS (Mike chose them on 2026-10-11, about 9:36 PM: "Today's colors"). They are the colours of today's public trovopilot.com, read
   from the live site on 2026-10-11 as a visitor, in light and in dark (exact computed colours), plus a few complementary colours for things
   today's site has no colour for (Mike: "we would probably have to use some new complementary colors"). Light is the default; dark follows
   the visitor's device (prefers-color-scheme) unless they chose with the switch in the footer (0.4.0, see below the colours). Where each one came from:
     from today's site, light: page and cards #ffffff with a #e5e7eb border; alternate sections #fafafa; headlines #0a0a0a; body text #111827;
       grey text #4b5563; buttons blue-800 #193cb8 with white text; icon tiles #dbeafe with blue-800 ink; footer links #79716b.
     from today's site, dark: page #0a0a0a; cards #292524 with a #3e3b3a border; alternate sections #131111; headlines #f5f5f5; body text #ffffff;
       grey text #9ca3af; buttons blue-800 #193cb8 with white text; blue text #50a2ff (blue-400); icon tiles #252b44; footer links #a6a09b;
       the blue-500 #2b7fff of its "Most Popular" badge.
     new, measured against the background they sit on (light / dark; the two answer lines sit in the sign-up card, so their dark numbers are on the card):
       button hover        #1e3a8a (10.36:1 with white) / #1d4ed8 (6.70:1)
       button outline      dark only: #2b7fff, so blue-800 buttons stand out on #0a0a0a (5.26:1; 4.03:1 on cards)
       "Thanks" line       #047857 (5.48:1) / #34d399 (7.89:1)
       "bad email" line    #b91c1c (6.47:1) / #f87171 (5.48:1)
       PLACEHOLDER tag     #92400e on #fef3c7 (6.37:1) / #fbbf24 on #3b2a07 (8.27:1)   (the three pages whose words are still to come; the other pages have approved words)
       links, focus ring   #193cb8 (8.82:1) / #50a2ff (7.50:1; blue-800 text on the dark page would be only 2.24:1)
   Every text colour is 4.5:1 or more against its background. The record of the preview Mike chose from is docs/mockups/theme-today.css. */
:root {
  --bg: #ffffff; --panel: #ffffff; --text: #0a0a0a; --muted: #4b5563; --line: #e5e7eb;
  --accent: #193cb8; --accent-ink: #ffffff; --bad: #b91c1c; --draft: #92400e; --draft-bg: #fef3c7;
  --body: #111827; --section: #fafafa; --link: #193cb8; --ok: #047857; --hover: #1e3a8a;
  --tile: #dbeafe; --tile-ink: #193cb8; --foot: #79716b; --edge: transparent;
  /* The "wide" content width (the header and the hero band on the home page) and the side padding every page keeps. The reading column is 40rem. */
  --wide: 76rem; --gutter: 1rem;
  color-scheme: light;
}
/* The dark palette is written twice, with exactly the same colours (test/theme-switch.test.js parses this file and fails if the two copies differ):
   - for a visitor whose device is in dark mode, unless they have chosen light with the switch in the footer (public/theme.js puts data-theme="light" on <html>);
   - for a visitor who has chosen dark with the switch (data-theme="dark"), whatever the device says.
   A visitor who never chose has no data-theme, and the device's own setting rules. Light is the default above.
   color-scheme (light above, dark in both dark blocks) makes the browser's own parts - the page's scrollbar, form controls that have no colours of their own - follow the palette too;
   every control the site draws already has explicit colours, so nothing else changes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a; --panel: #292524; --text: #f5f5f5; --muted: #9ca3af; --line: #3e3b3a;
    --accent: #193cb8; --accent-ink: #ffffff; --bad: #f87171; --draft: #fbbf24; --draft-bg: #3b2a07;
    --body: #ffffff; --section: #131111; --link: #50a2ff; --ok: #34d399; --hover: #1d4ed8;
    --tile: #252b44; --tile-ink: #50a2ff; --foot: #a6a09b; --edge: #2b7fff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0a; --panel: #292524; --text: #f5f5f5; --muted: #9ca3af; --line: #3e3b3a;
  --accent: #193cb8; --accent-ink: #ffffff; --bad: #f87171; --draft: #fbbf24; --draft-bg: #3b2a07;
  --body: #ffffff; --section: #131111; --link: #50a2ff; --ok: #34d399; --hover: #1d4ed8;
  --tile: #252b44; --tile-ink: #50a2ff; --foot: #a6a09b; --edge: #2b7fff;
  color-scheme: dark;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
/* Every page keeps room for the scroll bar, long or short, so the header (logo and Sign in) never shifts between pages on a computer. */
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--body); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.page { max-width: 40rem; margin: 0 auto; padding: 0 var(--gutter) 2rem; }
/* The header runs in the wide width on all six pages, so the logo and Sign in sit in the same place on every page (and, on the home page, the logo and
   the headline under it share one left edge on a wide screen). The content below the header stays in the 40rem reading column. */
.page-wide { max-width: var(--wide); }

/* The icon is a white square; the thin border keeps its edge visible on the light page, and it reads as a tile in dark mode. */
header.site { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
/* The icon and the name are one link to the home page (Mike, 2026-10-11 8:03 PM). It looks like the name, not like a link; underlined on hover. */
.home { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; border-radius: 8px; }
.home:hover .name { text-decoration: underline; }
.home:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
.mark { width: 2rem; height: 2rem; border-radius: 7px; border: 1px solid var(--line); display: block; }
.name { font-weight: 700; font-size: 1.2rem; }
/* The tagline under the name (Mike, 2026-10-12, as on today's trovopilot.com since 2026-10-11 11:26 PM): "trovo — Italian: ‘I find’", small, italic and quiet, on every
   page. It does not wrap (but see the media query below), so it sets the width of the brand box; the header stays one row down to a 320 px phone (measured in a real browser: test/header-browser.test.js). */
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.tagline { font-size: .75rem; font-style: italic; letter-spacing: .025em; color: var(--muted); white-space: nowrap; }
/* Only on a narrow screen AND a larger text setting may the tagline wrap onto two lines under the name (the header would otherwise scroll sideways: at 320 px with the browser's
   font size set to 20 px the one-line header was 338 px wide). The query is in em, which follows the browser's own text size (not the page's), so 19.5em is 312 px at the normal
   16 px (never reached by a 320 px phone: nothing changes there, the tagline stays on one line) and 390 px at 20 px (Large). */
@media (max-width: 19.5em) { .tagline { white-space: normal; } }
/* The Sign in button, at the right end of the header on every page (0.3.0): a solid blue button with white text, as on today's trovopilot.com.
   Its words never wrap, so the header stays one row down to a 320 px phone. In dark mode the thin light-blue edge (--edge) makes it stand out from the page. */
.signin { display: inline-block; font-weight: 600; padding: .45rem .95rem; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px var(--edge); }
.signin:hover { background: var(--hover); color: var(--accent-ink); }

h1 { font-size: 1.75rem; line-height: 1.2; margin: 1rem 0 .5rem; color: var(--text); }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; color: var(--text); }
strong { color: var(--text); }
p { margin: 0 0 1rem; }
.lead { color: var(--muted); }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* The sign-up card. (The form rules below, label to .trap, are no longer used by the home page; they are kept for this site's own server code.) */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; margin: 1.5rem 0; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
input[type=email] { flex: 1 1 14rem; min-width: 0; font: inherit; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
input[type=email]::placeholder { color: var(--muted); opacity: 1; }
button { font: inherit; font-weight: 600; padding: .65rem 1.1rem; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); cursor: pointer; box-shadow: 0 0 0 1px var(--edge); }
button:hover { background: var(--hover); }
/* The Sign up free button on the home card (0.5.0): the same solid blue button as the header's Sign in. */
.cta { margin: 1rem 0 0; }
.cta a { display: inline-block; font-weight: 600; padding: .65rem 1.1rem; border-radius: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; box-shadow: 0 0 0 1px var(--edge); }
.cta a:hover { background: var(--hover); color: var(--accent-ink); }
.small { font-size: .85rem; color: var(--muted); margin: .6rem 0 0; }
/* The answer line keeps its space, so nothing below it moves when an answer appears. The longest answers take two lines on most screens
   and three on a phone (measured in a real browser: the page tests fail if an answer ever moves the small print), so that much is kept free. */
.answer { min-height: 3.1em; margin-top: .6rem; font-weight: 600; }
@media (max-width: 26rem) { .answer { min-height: 4.65em; } }
button[aria-busy="true"] { cursor: progress; opacity: .7; }
.answer.ok { color: var(--ok); }
.answer.bad { color: var(--bad); }
/* The trap field is moved off-screen, not display:none, so a bot that fills every box still finds it. People and screen readers never reach it. */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Pages whose words are still to come (PLACEHOLDER). The home page's words were approved by Mike on 2026-10-11 (about 10:25 PM), so it carries no DRAFT badge any more. */
.badge { display: inline-block; background: var(--draft-bg); color: var(--draft); border-radius: 4px; padding: 0 .25rem; font-size: .8em; font-weight: 600; }
.placeholder { border: 2px dashed var(--line); border-radius: 10px; padding: 1.25rem; margin: 1.5rem 0; }
.placeholder p { margin: .6rem 0; }

/* The home page's top section (the hero): the headline alone (0.5.0, RF: the line under it is gone), with the owner's picture. Two pictures are in the page and only one is ever shown.
   The sign-up card is ALWAYS directly below the hero picture, on every width (Mike, 2026-10-11 ~9:36 PM: "I think it should say below the hero").
   - a phone (below 48rem): the headline block, then the phone picture (.hero-phone, square), then the card. The wide picture (.hero-media) is hidden,
     and the page points its <picture> at a 1x1 blank GIF below 48rem, so a phone does not even download it (display:none alone would not stop that).
   - a wide screen (48rem and up): a band no wider than --wide (centred, rounded) with the wide picture filling it and the headline over its calm left
     side, then the card. The phone picture is hidden, and its <picture> is pointed at the same blank GIF from 48rem up, so a wide screen never
     downloads it either. (The phone picture is no longer lazy: at 375 x 812 it starts about 350 px down, inside the first screen, and a lazy picture
     that is already on screen only loads later.) */
.hero { margin: .5rem 0 0; }   /* no space below: the small line under the picture (.hero-note) follows at once, and the card's own top margin makes the gap below that */
.hero h1 { font-size: 2.1rem; line-height: 1.15; margin: .4rem 0 .6rem; text-wrap: balance; }   /* 0.5.0 (RF): at every width, so a phone never ends the headline on one lone word ("… Know before you / buy.") */
@media (min-width: 36rem) { .hero h1 { font-size: 2.3rem; } }

/* The home page is three boxes: the header (.page-head, in the wide width), then main with the hero and the reading column (.page-rest), then the links and
   footer (.page-foot). The padding that one .page had at its foot and head is split so nothing doubles. */
.page-head { padding-bottom: 0; }
.page-rest { padding-bottom: 0; }
.page-foot { padding-top: 0; }

/* A phone: the headline block and the picture are a column of the same width as the rest of the page. */
.hero-copy { max-width: 40rem; margin: 0 auto; padding: 0 var(--gutter); }
.hero-media { display: none; }
.hero-phone { display: block; max-width: 40rem; margin: 1rem auto 0; padding: 0 var(--gutter); }
.hero-phone img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* The small line right under the hero picture, on the home page only: "Illustrations made with AI" (Mike, 2026-10-12: "Small line under the pictures (Recommended)").
   Always shown, at every width, light and dark. Small, in the quiet text colour (4.5:1 or more on the page in both schemes, as every text), right-aligned so its last
   letter lines up with the right edge of the picture above it, and a few px (.25rem) below the picture, so it reads as the picture's caption; the sign-up card still follows.
   It sits OUTSIDE the hero band (the wide hero is a fixed-shape box with overflow hidden, which would clip it). On a phone it is in the same column as the phone picture
   (40rem, centred, the side padding); from 48rem up it is as wide as the band (below). The page checker finds it by data-hero-note (see scripts/lib/check.js). */
.hero-note { max-width: 40rem; margin: .25rem auto 0; padding: 0 var(--gutter); font-size: .8rem; color: var(--muted); text-align: right; }

@media (min-width: 48rem) {
  /* The band: as wide as the header's content (never wider than --wide, with the same side padding as the header), about 16:9 but never taller than 36rem
     and always tall enough for the words. Its size is the container the headline's width is measured in (cqw = a hundredth of the band's width),
     so "at most 45% of the band" holds at every window width. Its left edge is the logo's left edge, so the headline lines up with the logo. */
  .hero { position: relative; isolation: isolate; container-type: inline-size; display: grid; align-items: center; width: min(calc(100% - 2 * var(--gutter)), calc(var(--wide) - 2 * var(--gutter))); aspect-ratio: 16 / 9; min-height: 22rem; max-height: 36rem; margin: 0 auto; overflow: hidden; border-radius: 0 12px 12px 0; }   /* only the right corners are rounded: the left side is the solid scrim, so a curve there would show as a stray arc */
  .hero-media { display: block; position: absolute; inset: 0; z-index: 0; }
  /* The scene is on the right of the picture, so it is anchored there: if the band is ever narrower than 16:9 it is the left side that is cut. */
  .hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right 55%; }
  /* A soft scrim between the picture and the words: the page's own background colour, solid under the words and fading to nothing as the scene
     begins, so the words keep their contrast where the picture's calm left side runs out (measured over every pixel: test/hero-browser.test.js).
     It is a CSS gradient, not another picture, and it uses the page background, so it follows light and dark. */
  .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 40%, transparent 54%); }
  /* The words: they start at the band's left edge (the logo's left edge), end by 38% of the band (the 45% limit with room to spare, and still on the
     solid part of the scrim), and are never wider than 28rem, so the line is a comfortable length. The headline grows a little with the band. */
  .hero-copy { position: relative; z-index: 2; margin: 0; padding: 0; max-width: min(28rem, 38cqw); }
  .hero h1 { font-size: clamp(1.9rem, 3cqw, 2.6rem); }
  .hero-phone { display: none; }
  /* The small line under the picture: exactly the band's width and left edge, so its right edge is the picture's right edge. */
  .hero-note { width: min(calc(100% - 2 * var(--gutter)), calc(var(--wide) - 2 * var(--gutter))); max-width: none; padding: 0; }
}

/* "What TrovoPilot does" (three points) and "How it works" (three numbered steps): one card each, one under the other on every width.
   Each block sits on today's alternate-section grey, its cards on the card colour; the step numbers are small tiles in today's light-blue tile. */
section.block { margin: 2rem 0; background: var(--section); border-radius: 12px; padding: 1.25rem; }
.points, .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.points li, .steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.points strong, .steps strong { display: block; margin-bottom: .2rem; text-wrap: balance; }   /* 0.5.0: a heading that wraps splits evenly, never one lone word ("… sold / for.") on a phone */
.steps { counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--tile); color: var(--tile-ink); font-weight: 700; }
.steps p, .points p { margin: 0; color: var(--muted); }

/* "Already a member? Sign in as usual." at the foot of the sign-up card. */
.member { margin: .9rem 0 0; font-size: .95rem; }

/* The About page (0.5.0, /about; the words are docs/words/about.md's). Its blocks reuse the home page's (section.block, and ol.steps for the three numbered points).
   - The tagline under the heading is in italics (an <em> inside p.about-tagline; the header's small grey tagline is a different class, .tagline).
   - "Who we are": Mike's photo, a round picture of 160 px (10rem; the file is 320 x 320, twice that, for sharp screens), BESIDE the heading on a wide screen (48rem and up: the photo in
     the left column, the heading and the paragraph in the right one) and ABOVE the heading on a phone (one column). It is a circle (border-radius 50% on a square box, the face is in
     the middle of the picture, object-fit: cover keeps it undistorted); the thin line and the tile colour behind it keep its edge visible on the light and the dark page. The
     Content-Security-Policy forbids inline styles, so the circle is made here and the page's <img> has only its width and height attributes.
   - "How we work": three plain bullets. "Questions? Support": a line of its own under the blocks. */
.about-tagline { margin: 0 0 .5rem; color: var(--muted); font-style: italic; }
.who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: start; }
.who-photo { display: block; width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--tile); }
.who-text { min-width: 0; }
.who-text p { margin: 0; }
@media (min-width: 48rem) {
  .who { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}
.bullets { margin: 0; padding-left: 1.25rem; }
.bullets li + li { margin-top: .4rem; }
/* The Terms, Privacy policy and Delete account pages (0.5.0, built from the Business Planner's words): a paragraph after a list keeps a gap, a list inside a list a small one,
   and a plain numbered list lines up with the bullets. */
.bullets + p, ol:not([class]) + p, .bullets + ol:not([class]), ol:not([class]) + .bullets { margin-top: 1rem; }
.bullets .bullets { margin-top: .4rem; }
section.block > ol:not([class]) { margin: 0; padding-left: 1.5rem; }
section.block > ol:not([class]) li + li { margin-top: .4rem; }
.questions { margin: 2rem 0 0; }

/* The links block, just above the footer on every page. It is centred in the page column, and when the links wrap onto a second line (a phone)
   each line is centred on its own (Mike, 2026-10-11 about 10:25 PM: "center align the footer"). */
.site-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; font-size: .9rem; }
.site-links a:not([aria-current]) { color: var(--foot); }   /* today's quiet grey for the footer links */
.site-links a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; }

/* The footer is centred (Mike, 2026-10-11 about 10:25 PM: "center align the footer"), at every width. The name and the version each have a line of their
   own. They are NOT one centred line: a centred line whose second half loads later would make the first half (the name) jump sideways when the version
   arrives. So the name never depends on the version, and the version line keeps one line of height (1.55em, the page's line height) before it fills, so
   nothing moves when the version loads. (The old way, a wide empty box beside the name, kept the space but put the visible text off centre.)
   Because the name has its own line, no separator is drawn after it, and the version line always starts with the word "version". */
#app-footer {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .875rem;
  text-align: center;
}
#app-name { display: block; white-space: nowrap; }
#app-version { display: block; min-height: 1.55em; }

/* The dark-mode switch (0.4.0, Mike, 2026-10-12: "a toggle switch put in an appropriate location in the footer"): its own centred line between the links and the name, in the
   footer's quiet grey (--muted, the same as the version line below it) and the footer's text size. A pill track with a round knob, and the words "Dark mode" beside it, all
   one button (role="switch"); the track and knob are hidden from screen readers, so the button's name is its words.
   The line is hidden unless public/theme.js has marked the page (html[data-js]): with JavaScript off the switch is never shown and the device's setting rules; with it on, the
   line is there from the first frame (theme.js runs in the head before anything is painted), so nothing moves when it appears. Flipping it moves nothing either: the track has a
   fixed size and the knob only slides inside it.
   Colours, off: the track's edge and the knob are --muted (7.56:1 on the light page, 7.80:1 on the dark one; 3:1 is needed), the words too (4.5:1 needed). On: the track fills with
   the accent blue, its edge is --link (so it shows on the dark page, where the blue alone would be 2.24:1) and the knob is white on the blue, at the right. */
.theme-line { display: none; margin: .9rem 0 0; text-align: center; }
html[data-js] .theme-line { display: block; }
.theme-switch { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--muted); font: inherit; font-size: .875rem; font-weight: 400; cursor: pointer; }
.theme-switch:hover { background: none; }
.theme-track { position: relative; flex: none; width: 2.25rem; height: 1.25rem; border: 2px solid var(--muted); border-radius: 999px; background: transparent; }
.theme-knob { position: absolute; top: 50%; left: 2px; width: .75rem; height: .75rem; margin-top: -.375rem; border-radius: 50%; background: var(--muted); }
.theme-switch[aria-checked="true"] .theme-track { border-color: var(--link); background: var(--accent); }
.theme-switch[aria-checked="true"] .theme-knob { background: var(--accent-ink); transform: translateX(1rem); }
/* Windows' high-contrast colours replace the colours above; keep the knob and the filled track visible in them. */
@media (forced-colors: active) {
  .theme-knob { background: ButtonText; }
  .theme-switch[aria-checked="true"] .theme-track { background: Highlight; }
  .theme-switch[aria-checked="true"] .theme-knob { background: HighlightText; }
}