/* ==========================================================================
   legal.css — /privacy, /terms and /contact in the Wayfable Design System's
   idiom (goal 14; bmad-output/redesign-site/decisions.md §3).

   Composes with ds.css, the shared grammar: the templates are built on
   ds-section / ds-inner--narrow / ds-label / ds-h1 / ds-prose / ds-table /
   ds-card / ds-form / ds-field … and this sheet carries only what that
   grammar lacks — the "last updated" line, the hairline rule above each
   numbered clause, the cookie table's column widths, the contact address
   line, and four contact-form notes (the optional marker, the select's
   chevron, the textarea's resize, the margins inside the form's flex gap).

   ⛔ EVERY SELECTOR THAT NAMES A CLASS NAMES AN lg- ONE (design contract
   §4.6); it restyles nothing shared. ⛔ NO CUSTOM PROPERTIES (contract §1.6):
   the palette ships as literals — line #E9E0CF, ink #2C2418, forest
   #2D6A4F, body #55503F, muted #6E6555. Type: Inter, sizes from the scale
   only (11.5 12 13 14 15 16 17 19 20 22 27 34 38 40 52). No shadows, no
   gradients: depth is a 1px #E9E0CF hairline. Mobile values are the
   default; desktop from the site's 768px breakpoint.
   ========================================================================== */

/* --- Legal pages ---------------------------------------------------------- */

/* "Last updated" sits between the H1 and the lede / first clause. */
.lg-updated { margin: 0 0 24px; }

/* Each numbered clause opens on a hairline: twelve to fifteen clauses of
   lists need a rule to scan by, and the rule is the system's only depth. The
   first clause follows the lede or the date line and needs none. */
.lg-doc h2 { padding-top: 28px; border-top: 1px solid #E9E0CF; }
.lg-doc > h2:first-child { padding-top: 0; border-top: 0; }

/* The cookie table: four columns at 390 would crush "Purpose" to a word a
   line; a floor on that column lets ds-table-wrap scroll instead. */
.lg-cookies th:nth-child(2), .lg-cookies td:nth-child(2) { min-width: 260px; }
.lg-cookies th:nth-child(1) { min-width: 150px; }

/* The contact address in the Contact clause: a link set off from the prose. */
.lg-email { font-size: 17px; font-weight: 600; }
.lg-email a { text-decoration: none; }
.lg-email a:hover { text-decoration: underline; }

/* --- Contact form --------------------------------------------------------- */

/* "(optional)" inside a field label. */
.lg-optional { font-weight: 400; color: #6E6555; }

/* ds-field strips the native select chrome (appearance: none), so the
   chevron is drawn back: a forest stroke, URL-encoded, no parentheses inside
   the data URL. */
.lg-select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%232D6A4F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

/* A seven-row textarea reads better at prose leading; grows downwards only. */
.lg-textarea { line-height: 1.5; resize: vertical; }

/* Inside ds-form's 18px flex gap the notice and the closing note carry no
   margin of their own. */
.lg-form-notice { margin: 0; }
.lg-form-note { margin: 0; }

/* The shortcuts callout below the form card. */
.lg-aside { margin-top: 24px; }

@media (min-width: 768px) {
    .lg-updated { margin: 0 0 28px; }
    .lg-doc h2 { padding-top: 32px; }
    .lg-aside { margin-top: 32px; }
}