/* The legal pages.
 *
 * Moved out of utyk/templates/uk_legal.html on 2026-08-31: the 1 top-level
 * block of it. 0 blocks stayed inline because they render inside
 * {% if %} and a <link> cannot be conditional.
 *
 * Inline CSS is re-sent on every request and cached by nobody.
 * url_for('static', ...) keys this URL on the file's own CONTENT hash
 * and serves it immutable for a year.
 */

    * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    body { margin:0; background:var(--uk-backdrop); color:var(--uk-text);
           font-family:'Inter','Noto Sans Thai',system-ui,-apple-system,sans-serif; }
    a { color:var(--uk-accent); text-decoration:none; }
    a:hover { text-decoration:underline; }
    .page { max-width:1440px; margin:0 auto; background:var(--uk-bg);
            border-left:1px solid var(--uk-line); border-right:1px solid var(--uk-line);
            min-height:100vh; }

    .btn { display:inline-flex; align-items:center; justify-content:center;
           min-height:44px; padding:0 20px; border-radius:11px; font-weight:800;
           font-size:14.5px; border:0; cursor:pointer; }
    .btn-primary { background:var(--utyk-accent); color:var(--utyk-on-accent); }
    .btn-primary:hover { background:var(--utyk-accent-hover); }
    .btn-ghost { background:transparent; color:var(--uk-text);
                 border:1px solid var(--uk-line); }

    .nav { display:flex; align-items:center; justify-content:space-between;
           padding:20px 64px; border-bottom:1px solid var(--uk-line); }
    /* 125x24 as painted, and it is the only way home from any of the eight
       content pages. Expanded past the paint rather than by inflating the
       paint, the same trick .uki-dismiss and the Discover star use, so the
       header keeps its proportions. VERTICAL ONLY: the nav links sit
       immediately to the right and a horizontal inset would reach across the
       gap and swallow the first of them. The header's own 20px of padding
       means the taller target stays inside it. */
    .logo { font-weight:900; font-size:20px; letter-spacing:-.02em;
            color:var(--uk-text); position:relative; }
    .logo::before { content:''; position:absolute; left:0; right:0;
                    top:-12px; bottom:-12px; }
    .logo span { color:var(--uk-accent); }
    .logo:hover { text-decoration:none; }
    .nav-right { display:flex; align-items:center; gap:12px; }

    /* THE DOCUMENT LAYOUT. Two grid columns, and the second one is pinned
       to the right edge of the page.

       WHAT WAS WRONG WITH THE FIRST ATTEMPT, because it is the trap:
       `.doc-wrap` was a flex row and `.doc-main` had `flex:1 1 auto` with a
       `max-width`. flex-grow cannot push past a max-width, so the main column
       stopped at its cap, the rail sat immediately beside it, and every
       remaining pixel piled up to the RIGHT of the rail. The result is a
       contents rail floating in the middle of the page with a gutter of
       nothing outside it. Owner, 2026-08-23: "you've created a right-hand
       sidebar that doesn't line up with the right-hand side of the page".

       A grid fixes it because the track sizes are declared rather than
       negotiated: `minmax(0,1fr)` takes everything left over and the rail is
       a fixed track at the end, so the rail is always flush right and the
       main column always absorbs the surplus. `minmax(0,...)` rather than
       plain `1fr` so a long unbroken token in the prose cannot blow the track
       out and push the rail off the page.

       WHY THE MAIN COLUMN HAS NO max-width ANY MORE. Capping it is what
       created the dead space in the first place. The measure moved down a
       level instead: `.doc-sec` splits each section into its heading and its
       body, the heading takes a fixed 240px rail and the body takes the rest,
       which lands around 68ch at this page width. So the page fills to both
       edges, nothing is centred, and no line of prose is longer than it was
       when the whole thing was 47em. That is the pattern every documentation
       site uses and it is the one that survives a 2560px monitor.

       Below 1100px there is no room for either split. The rail is not drawn,
       `.doc-sec` collapses to one column with the heading above its body, and
       that is the phone layout unchanged. */
    .doc { padding:56px 64px 80px; }
    .doc-wrap { display:grid; grid-template-columns:minmax(0, 1fr); }
    .doc-main { min-width:0; }

    /* One section: heading in a left rail, body beside it. Wrapped by the
       page templates rather than by script, so it works with JS off and so a
       section that wants to break the pattern can simply not use it. */
    .doc-sec { margin:0 0 4px; }
    /* The page's own opening, above the first heading. Spans the whole main
       column: a lede indented into the body track would start 280px in, which
       reads as a paragraph that has lost its heading. */
    .doc-open { margin:0 0 40px; }

    .doc-toc { display:none; }

    .doc h1 { font-size:40px; line-height:1.1; letter-spacing:-.03em;
              margin:0 0 10px; font-weight:900; }
    .updated { color:var(--uk-faint); font-size:13.5px; margin:0 0 36px; }
    .doc h2 { font-size:20px; margin:38px 0 12px; font-weight:800;
              letter-spacing:-.01em; }
    .doc p, .doc li { color:var(--uk-dim); font-size:16px; line-height:1.65; }
    .doc p { margin:0 0 16px; }
    .doc ul { margin:0 0 16px; padding-left:22px; }
    .doc li { margin-bottom:9px; }
    .doc b, .doc strong { color:var(--uk-text); font-weight:700; }

    @media (min-width:1100px) {
      /* THE RAIL IS A TRACK, not a flex sibling. 264px is the width at which
         a two-line entry still fits on two lines rather than three. */
      .doc-wrap { grid-template-columns:minmax(0, 1fr) 264px; column-gap:56px; }
      /* No rail on this page: collapse back to one track so the main column
         takes the full width rather than leaving a 264px hole. `:has` is the
         only way to know from CSS, and where it is unsupported the fallback
         is the empty track, which is what the old layout did everywhere. */
      .doc-wrap:has(> .doc-toc[hidden]) { grid-template-columns:minmax(0, 1fr); }

      /* The heading's own top margin is what separates sections in one
         column. Beside its body it has to be zero or the heading sits
         38px below the paragraph it labels, so the gap moves to the
         section. DECLARED AFTER `.doc h2`, not at higher specificity:
         both selectors are (0,1,1) and source order is the only thing
         separating them. */
      .doc-sec { display:grid; grid-template-columns:240px minmax(0, 1fr);
                 column-gap:40px; margin-top:42px; }
      /* Every child of a section that is not its heading belongs in the body
         track. Stated on the children rather than with a wrapper div so the
         page templates stay readable as prose. */
      .doc-sec > * { grid-column:2; }
      .doc-sec > h2 { grid-column:1; grid-row:1; margin-top:0; }
      /* The first body block sits on the heading's own row, so the two line
         up at the top. Without it the body starts one row lower and every
         heading floats above an empty gap. */
      .doc-sec > h2 + * { grid-row:1; }

      .doc-toc:not([hidden]) { display:block; }
      .doc-toc { position:sticky; top:32px; }
      .doc-toc-h { font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
                   color:var(--uk-faint); font-weight:700; margin:0 0 12px; }
      .doc-toc ol { list-style:none; margin:0; padding:0;
                    border-left:1px solid var(--uk-line); }
      .doc-toc li { margin:0; max-width:none; }
      .doc-toc a { display:block; padding:7px 0 7px 14px; margin-left:-1px;
                   border-left:2px solid transparent;
                   color:var(--uk-dim); font-size:13.5px; line-height:1.35; }
      .doc-toc a:hover { color:var(--uk-text); text-decoration:none;
                         border-left-color:var(--uk-line); }
      .doc-toc a.on { color:var(--uk-text); border-left-color:var(--uk-accent); }
    }

    .lede { color:var(--uk-text); font-size:17.5px; }

    /* A pulled-out paragraph for the two or three things a reader most
       needs to see before they scroll: what the money buys, and that her
       replies are never taken away. */
    .callout { background:var(--uk-card); border:1px solid var(--uk-line);
               border-radius:14px; padding:20px 22px; margin:0 0 24px; }
    .callout p:last-child { margin-bottom:0; }

    footer { border-top:1px solid var(--uk-line); padding:26px 64px 44px;
             display:flex; align-items:center; justify-content:space-between;
             gap:20px; color:var(--uk-dim); font-size:13.5px; }
    footer a { color:var(--uk-dim); }
    /* ROW GAP FIRST, then the expander. Seven links wrap to two rows on a
       420px phone and each is 16px of paint, so reaching 44px needs 14px above
       and below. At the old flat `gap:20px` those 28px of expander crossed the
       20px between rows and the two rows' targets overlapped, which trades a
       small target for an ambiguous one and is worse. 32px of row gap leaves
       4px between them. Column gap stays 20px: horizontally the links are
       already 20px apart and the expander does not grow sideways. */
    .foot-links { display:flex; gap:32px 20px; flex-wrap:wrap; }
    .foot-links a { position:relative; }
    .foot-links a::before { content:''; position:absolute; left:0; right:0;
                            top:-14px; bottom:-14px; }

    @media (max-width:1100px) {
      .nav, footer { padding-left:32px; padding-right:32px; }
      .doc { padding:44px 32px 64px; }
    }
    @media (max-width:720px) {
      .page { border:0; }
      .nav { padding:16px 20px; }
      .doc { padding:32px 20px 56px; }
      .doc h1 { font-size:29px; letter-spacing:-.02em; }
      .doc h2 { font-size:18px; }
      .doc p, .doc li { font-size:15.5px; }
      footer { flex-direction:column; align-items:flex-start; padding:22px 20px 40px; }
    }