/* The public pages: the home page, pricing, help, the terms and the rest (web/pages.py). Plain HTML from the server,
   a column of text at a comfortable measure, and the app's own tokens, so light, dark and more contrast follow the
   system as the app does. Nothing here needs a script. */

@layer area {
  /* header: the name, three pages and the way in. On a phone the pages move to a row of their own, and the name gives
     way to the mark (the link still says the name) so the buttons keep their size. */
  .pub-header { border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
  .pub-header .in { max-width: 1180px; margin: 0 auto; padding: var(--space-2) clamp(var(--space-4), 3vw, var(--space-8));
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--header-h); }
  .pub-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }
  .pub-nav a { font-size: var(--text-sm); font-weight: 550; color: var(--color-text-muted); text-decoration: none; padding: 0 var(--space-3);
    border-radius: var(--radius-md); min-height: var(--target); display: inline-flex; align-items: center; white-space: nowrap; }
  .pub-nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
  .pub-nav a[aria-current='page'] { color: var(--color-text); background: var(--color-surface-3); }
  .pub-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .pub-actions:empty { display: none; }
  /* Up to the width the one-row header needs (with "Create account", about 840 px), the pages take a row of their own. */
  @media (max-width: 840px) {
    .pub-header .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'mark actions' 'nav nav'; }
    .pub-header .wordmark { grid-area: mark; }
    .pub-actions { grid-area: actions; flex-wrap: nowrap; }
    .pub-header .in:not(:has(.pub-actions a)) { grid-template-areas: 'mark mark' 'nav nav'; }
    .pub-nav { grid-area: nav; margin: 0 calc(-1 * var(--space-3)); }
  }
  @media (max-width: 480px) {
    .pub-actions .btn { padding: 0 var(--space-3); }
    .pub-header:has(.pub-actions a) .wm-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .pub-nav a { padding: 0 var(--space-2); }
  }

  /* a page: its title, a summary, when it last changed, then the text */
  .pub-page { max-width: 46rem; margin: 0 auto; }
  .pub-intro { margin-bottom: var(--space-8); }
  .pub-intro h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
  .pub-lede { font-family: var(--font-read); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); margin-top: var(--space-4); max-width: 40em; }
  .pub-updated { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4); }
  .pub-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  /* What starting costs, under the home page's buttons: text with an inline link at most, so it sits outside .pub-cta,
     whose links are all buttons. */
  .pub-cta-note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }

  .pub-toc { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-8); font-size: var(--text-sm); }
  .pub-toc-title { font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
  .pub-toc ul { list-style: none; display: grid; gap: 0 var(--space-6); margin-top: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  .pub-toc a { display: inline-flex; align-items: center; min-height: var(--target); padding: var(--space-1) 0; }

  .pub-body { font-family: var(--font-read); font-size: var(--text-base); line-height: 1.68; overflow-wrap: break-word; }
  .pub-body > * + *, .pub-body .block > * + * { margin-top: 0.9em; }
  .pub-body h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; margin-top: var(--space-12); }
  .pub-body h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 650; margin-top: var(--space-8); }
  .pub-body h2 + *, .pub-body h3 + * { margin-top: var(--space-3); }
  /* A heading of two sentences breaks between them (web/pages.py, sentence_lines), not inside one. */
  .pub-body h2 .line { display: inline-block; }
  .pub-body ul, .pub-body ol { padding-left: 1.3em; }
  .pub-body li + li { margin-top: 0.4em; }
  .pub-body li > p + p { margin-top: 0.5em; }
  .pub-body strong { font-weight: 650; }
  .pub-body blockquote { border-left: 4px solid var(--color-primary); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-4) var(--space-5); }
  .pub-body code { font-size: 0.9em; background: var(--color-surface-2); padding: 0.1em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
  .pub-body hr { border: 0; border-top: 1px solid var(--color-divider); margin: var(--space-10) 0; }

  .table-wrap { overflow-x: auto; }
  .pub-body table { border-collapse: collapse; width: 100%; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; }
  .pub-body th, .pub-body td { border-bottom: 1px solid var(--color-border); padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; vertical-align: top; }
  .pub-body th { font-weight: 650; border-bottom-color: var(--color-border-control); }
  .pub-body td a { overflow-wrap: anywhere; }
  /* An identifier in a table (a cookie's name) stays whole, and a table of several columns scrolls on a phone instead of
     breaking its words. */
  .pub-body td code { white-space: nowrap; overflow-wrap: normal; }
  .pub-body table:has(th:nth-child(4)) { min-width: 32rem; }

  .pub-body figure { margin-top: var(--space-6); }
  .pub-body figure img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--color-surface); }
  .pub-body figcaption { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
  .pub-ref code { font-size: var(--text-base); }

  /* the home page: a wider page, with blocks laid out side by side where there is room */
  .pub-home { max-width: 72rem; }
  .pub-home .pub-intro { max-width: 46rem; }
  .pub-home .pub-intro h1 { margin-top: var(--space-2); }
  .home-intro h1 .line { display: block; }
  .pub-home .pub-body { max-width: none; }
  .pub-home .pub-body > :not(.block), .pub-home .block-narrow { max-width: 46rem; }
  .pub-home > .pub-updated { margin-top: var(--space-12); }
  .block-shots { display: grid; gap: var(--space-6) var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
  /* (.pub-body .block > * + * spaces out what follows in a block; a grid's cells line up at the top instead.) */
  .block-shots > figure, .pub-body .block-shots > * + * { margin-top: 0; }
  .block-split { display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
  .block-split > .block, .pub-body .block-split > * + * { margin-top: 0; }
  .block-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
  .block-card > h3:first-child { margin-top: 0; }
  .block-note { font-size: var(--text-lg); line-height: 1.5; border-left: 4px solid var(--color-primary); padding: var(--space-2) 0 var(--space-2) var(--space-5); max-width: 40rem; }
  .block-cta { margin-top: var(--space-12); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-primary-highlight); }
  .block-cta > p:last-child { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  /* The steps keep the list's own numbers (a screen reader counts them), drawn in the accent. */
  .block-steps ol { display: grid; gap: var(--space-3); padding-left: 1.8em; max-width: 46rem; }
  .block-steps li + li { margin-top: 0; }
  .block-steps li { padding-left: var(--space-2); }
  .block-steps li::marker { font-family: var(--font-body); font-weight: 650; color: var(--color-primary); }
  /* What starting is free of, and what you can always do: one panel, each line led by a tick that only the eye needs. */
  .block-promise { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); max-width: 46rem; }
  .block-promise ul { list-style: none; padding-left: 0; display: grid; gap: var(--space-3); }
  .block-promise li, .block-promise li + li { position: relative; padding-left: 1.75em; margin-top: 0; }
  .block-promise li::before { content: "\2713"; content: "\2713" / ""; position: absolute; left: 0; font-weight: 700; color: var(--color-primary); }

  /* The sample lesson: the demo's own words look like the tutor's messages in the app, and an example answer like the
     learner's. Each box's first line says which it is, so the page reads the same without its styles. */
  .block-demo { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); max-width: 40rem; }
  .block-demo > p:first-child, .block-example > p:first-child { font-family: var(--font-body); font-size: var(--text-xs);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
  .block-demo ul { list-style: none; padding-left: 0; }
  .block-example { background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
    max-width: calc(40rem - clamp(var(--space-4), 6vw, var(--space-12))); margin-left: clamp(var(--space-4), 6vw, var(--space-12)); }

  @media print {
    .pub-header, .pub-cta, .pub-cta-note, .pub-toc, .block-cta, .skip { display: none !important; }
    .pub-page, .pub-home { max-width: none; }
    .pub-body figure, .pub-body tr, .block-demo, .block-example, .block-promise { break-inside: avoid; }
    .pub-body h2, .pub-body h3 { break-after: avoid; }
  }
}