/* =============================================================================
   Poolist public site  ·  dotapp/public/style.css

   The placeholder served at poolist.app while the site is being built. Built
   on the Poolist tokens (wiki/_design-system/tokens.css) and the same base as
   the documents (_core/style.css): same faces, same palette, same rules. Only
   the tokens this page uses are carried here; copy new ones from the tokens
   file rather than inventing values.

   Dark follows the viewer in all three states (system, explicit light,
   explicit dark).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sofia+Sans+Condensed:wght@500;600;700&display=swap");

@layer tokens, base, site;

@layer tokens {
  :root {
    color-scheme: light;
    --surface:   #fbfcfd;
    --ink:       #0d1418;
    --ink-2:     #4a565f;
    --ink-muted: #838f98;
    --hairline:  rgba(13, 20, 24, 0.11);
    --accent:    #2a78d6;

    --sans: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cond: "Sofia Sans Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

    --fs-sm:    .75rem;
    --fs-meta:  .8125rem;
    --fs-body:  1.0625rem;
    --fs-h1:    clamp(2.5rem, 6vw, 3.5rem);
    --lh-body:  1.6;
    --measure:  66ch;

    --pad:       clamp(1.25rem, 5vw, 3.5rem);
    --sheet-max: 53rem;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --surface:   #161b21;
      --ink:       #f2f5f7;
      --ink-2:     #a8b3bc;
      --ink-muted: #78838c;
      --hairline:  rgba(242, 245, 247, 0.12);
      --accent:    #3987e5;
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface:   #161b21;
    --ink:       #f2f5f7;
    --ink-2:     #a8b3bc;
    --ink-muted: #78838c;
    --hairline:  rgba(242, 245, 247, 0.12);
    --accent:    #3987e5;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    background: var(--surface);
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    padding-inline: var(--pad);
    padding-block: 40px;
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    margin: 0;
    font-family: var(--cond);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: balance;
  }
  p { margin: 0; text-wrap: pretty; }
  time { font-variant-numeric: tabular-nums; }
  a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
  }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

@layer site {
  /* The page: one column at reading width, held in the middle of the viewport. */
  .hold {
    max-width: var(--sheet-max);
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
  }

  /* Title and its one status line: a dot and its word. */
  .mast { display: grid; gap: .75rem; }
  .status {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-meta);
    color: var(--ink-2);
  }
  .dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
  }

  /* Two languages: French left, English right; stacks under 700px, French on top. */
  .bi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 2rem;
    align-items: start;
    max-width: var(--measure);
  }
  .bi > * { min-width: 0; }
  .bi p { color: var(--ink-2); }

  .foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
  }

  @media (max-width: 700px) {
    .bi { grid-template-columns: minmax(0, 1fr); }
  }
}