/* ============================================
   Legal pages styling — /privacy-policy + /terms-of-service
   ============================================
   Doc-style dialogs in the auth-card visual family. The pages
   reuse the SAME structural pattern as the auth-card surface
   (pinned header with back-button + title + hairline border, flex
   scroll body, MD3 Extra Large 28 px corner radius, ambient
   shadow) — with prose in the body instead of a form. Wider than
   the auth-card (max-width 720 px vs. 480 px) because long-form
   text needs reading-comfortable line lengths.

   Standalone stylesheet — does NOT pull in /css/style.css
   (~5500 lines of surf-forecasting theme) so the legal URLs
   render fast without the full main bundle. Brand tokens that
   live in :root over there are duplicated here as raw hex /
   token names since this stylesheet has to paint without any
   other CSS arriving first. Keep them in sync with the
   `:root` block in /css/style.css.

   Brand reference (mirrored from /css/style.css :root tokens
   + the midday sky-gradient stops from js/sky.js):
     --marine        #002642   deep navy (used inside body copy, headings)
     --sky-top       #d4e6f1   pale sky blue — top stop of the midday gradient
     --sky-bottom    #eef2f6   horizon — bottom stop, matches --bg in style.css
     --card-surface  #FEFDFA   card fill (warm near-white)
     --text          #131616   body text on card
     --muted         #5A6570   secondary copy on card
     --accent        #1a1a1a   primary / heading accent
     --border        #e4e2dd   card outline + hairlines
     --error         #B83920   call-out border (forecast disclaimer)
   ============================================ */

:root {
  --marine:       #002642;
  --sky-top:      #d4e6f1;
  --sky-bottom:   #eef2f6;
  --card-surface: #FEFDFA;
  --text:         #131616;
  --muted:        #5A6570;
  --accent:       #1a1a1a;
  --border:       #e4e2dd;
  --error:        #B83920;
  --font-family:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  /* Mid-day sky gradient — same top → bottom stops the ocean
     canvas paints during daylight hours (see js/sky.js's `midday`
     entry). The legal pages don't render the canvas itself
     (intentional — it's heavy and irrelevant for a doc page), but
     mirroring the sky colour ties the legal URLs visually to the
     "page is at the surface, looking up" mode of the rest of the
     site. fixed attachment keeps the gradient from scrolling with
     the body when content overflows past the viewport. */
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100%;
}

/* Outer stage — centres the card horizontally and gives the doc
   generous breathing room above and below. The PAGE scrolls
   naturally (no inner scroll region), so this stage just lays
   out vertically and lets content take whatever height it needs. */
.legal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 16px 64px;
  box-sizing: border-box;
}

/* ============================================
   Doc card — long-form variant of the auth-card family
   ============================================
   Same brand identity as the auth-card (warm near-white fill,
   28 px Extra Large corner radius, hairline border) but
   deliberately divergent in two ways from the modal pattern:

     1. NO box-shadow. On the mid-day sky gradient the card
        reads as part of the page surface, not as a floating
        modal — the shadow would over-claim elevation for a
        document that simply sits on the page.
     2. NO max-height + NO internal scroll. The card expands to
        fit ALL its content; the PAGE scrolls. Treating the
        legal URL as a standard scrollable webpage (not a
        modal-in-a-window) matches the way users read T&C / PP
        elsewhere on the web — natural document flow, browser
        back-button to leave.

   The 28 px corner radius is preserved so the card still reads
   as part of the auth-card family at a glance, even with the
   chrome dialled down. The border alone carries the card
   identity in place of the shadow.
   ============================================ */

.legal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  background: var(--card-surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  /* Required so the header's top corners stay clipped to the
     card radius. Without it, the header's hairline border-bottom
     would paint straight across past the rounded card edge. */
  overflow: hidden;
  text-align: left;
}

/* ============================================
   Pinned header — mirrors .auth-card-header
   ============================================
   The same 16/20 padded row with title left + back button
   anchored to its left (sub-page treatment). No close button on
   legal pages because the back affordance IS the close — back
   takes you to /, which is where users would otherwise close to.
   ============================================ */

.legal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--card-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* Back-button — mirrors .auth-card-back (same 40×40 icon button,
   same hover wash, same focus ring). Anchored to the LEFT of the
   title — MD3 sub-page pattern. */
.legal-back {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.legal-back:hover {
  background-color: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.legal-back:focus-visible {
  background-color: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Inline SVG back arrow — sized to match the Material Symbols
   "arrow_back" icon used in .auth-card-back so the two icon
   buttons feel like the same component. */
.legal-back svg {
  width: 22px;
  height: 22px;
}

/* Title — mirrors .auth-card-title typography exactly so the
   header sits in the same hierarchy as every other dialog header
   in the system. ellipsis safety belt for any future longer
   title that would otherwise wrap and break header height. */
.legal-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-family);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   Body — plain padding container, NOT a scroll region
   ============================================
   On the auth-card surface this rectangle is `.auth-card-scroll`
   with overflow-y: auto and contained overscroll. On the legal
   pages the PAGE scrolls instead, so this is just a padding
   wrapper around the prose. The class name is kept (`legal-scroll`)
   to mirror the auth-card markup hierarchy, but it no longer
   carries scroll behaviour.
   ============================================ */

.legal-scroll {
  padding: 28px 32px 32px;
}

@media (max-width: 540px) {
  .legal-scroll {
    padding: 22px 22px 28px;
  }
}

/* ============================================
   Document content — long-form prose typography
   ============================================
   Inside the scroll region, the legal-body styles take over so
   the long-form content reads like a document, not a dialog. The
   dialog chrome (.legal-header / .legal-back / .legal-title)
   handles all the "this is a Setform surface" cues; once the
   reader is past the header, they're in a document.
   ============================================ */

.legal-effective {
  margin: 0 0 24px 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.legal-body h2 {
  margin: 28px 0 8px 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--marine);
}

.legal-body h3 {
  margin: 18px 0 6px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.legal-body p,
.legal-body ul,
.legal-body ol {
  margin: 0 0 12px 0;
  font-size: 0.9375rem;
  color: var(--text);
}

.legal-body ul,
.legal-body ol {
  padding-left: 22px;
}

.legal-body li {
  margin-bottom: 4px;
}

.legal-body a {
  color: var(--marine);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-body a:hover,
.legal-body a:focus-visible {
  text-decoration-thickness: 2px;
}

.legal-body strong {
  font-weight: 600;
}

/* Disclaimer call-out — used in /terms-of-service for the
   forecast-is-informational shield. Coral left border + tinted
   fill so the safety message stops a casual skimmer. */
.legal-callout {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(184, 57, 32, 0.06);
  border-left: 3px solid var(--error);
  border-radius: 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.legal-callout p {
  margin: 0 0 8px 0;
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-contact {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--muted);
}

.legal-contact a {
  color: var(--marine);
  text-decoration: underline;
}