/* Shared styling for the /maldives/ working notes.
 *
 * Extracted from an inline <style> block once there were TWO of these pages.
 * A thin layer on top of design-system.css: the site has no long-form reading
 * component, and everything here is built from its tokens so it themes with
 * the rest of the site. Nothing below re-invents a primitive.
 *
 * It lives under maldives/ because .dockerignore negates `maldives` and
 * `maldives/**`, so it ships automatically - no separate COPY line to forget.
 */
/* A THIN LAYER ON TOP OF THE DESIGN SYSTEM - nothing here re-invents a
     primitive. The page uses the site's own sub-page furniture: .snav,
     .page-hero / .eyebrow / .ph-title / .ph-sub, .psection / .wrap-narrow,
     .sec-head / .h2, .glass, .btn, .foot-wrap. Everything below is only the
     long-form reading column the design system has no component for, and it
     is built from tokens so it themes with the rest of the site.

     No .reveal and no js-reveal script, on purpose: these are reference notes
     someone may open on a boat with a bad connection. Nothing here should ever
     depend on a script running. */

  /* ONE LEFT EDGE FOR THE WHOLE PAGE.
     I got this wrong twice. First the article sat in the site's full 1160px
     wrapper and the text hugged the left with 40% dead space, so I narrowed
     the wrapper to 820px - which CENTRED the column and put the prose in the
     middle of the screen while the footer still started at the site gutter.
     Two different left edges on one page.
     The site's actual language is left-aligned content with an empty right
     side: the homepage hero does exactly that. So the wrapper matches the
     footer at 1240px, everything starts at the same x, and the reading measure
     comes from the CONTENT max-widths below rather than from the container. */
  .page-hero .wrap-narrow,
  .psection  .wrap-narrow,
  footer     .wrap-narrow { max-width: 1240px; }

  /* ── Make .snav render as the HOMEPAGE nav, not Pricing's ────────────────
     The site has two nav components and they do not match. index.html uses
     .main-nav (full-width bar collapsing to a dark pill, five links,
     scroll-spy); Pricing.html uses .snav (translucent blue pill, two links,
     one pointing at a dead #system anchor). I copied .snav, so this page
     inherited the wrong one.
     .main-nav's CSS is 34 rules inlined in index.html, so porting it wholesale
     would put a third copy in a third file. Instead: keep .snav's markup and
     behaviour, and match the homepage's RENDERED pill. Values read off the live
     site with getComputedStyle, not eyeballed:
         background     rgba(3, 18, 30, 0.97)
         border         1px solid rgba(255, 255, 255, 0.14)
         border-radius  9999px
         CTA            .btn.ghost -> bg rgba(255,255,255,.07), border .22
     ⚠️ The real fix is one nav component for the whole site - see TODOS.md. */
  #snav.snav        { background: rgba(3, 18, 30, 0.97);
                      border: 1px solid rgba(255, 255, 255, 0.14);
                      border-radius: 9999px;
                      backdrop-filter: blur(14px);
                      -webkit-backdrop-filter: blur(14px); }
  /* The five homepage links did not fit and wrapped onto two lines. */
  #snav .nav-links  { gap: 4px; }
  #snav .nav-links a{ white-space: nowrap; color: #fff; padding: 7px 12px;
                      border-radius: 999px; }
  #snav .nav-links a:hover { background: rgba(255,255,255,.16); color: #fff; }
  #snav .brand .wm,
  #snav .brand .os  { color: #fff; }


  /* ── FILL THE PAGE ────────────────────────────────────────────────────────
     A single column in a 1240px wrapper left half the screen empty, and simply
     widening the paragraphs would have given ~150 characters per line, which is
     unreadable. So use the width the way the site already does: .sec-head in a
     left rail, content to the right. The rail carries the heading AND the
     source citation - sources in the margin, like a reference document - and
     the prose keeps a proper reading measure. Tables and cautions span both
     columns because they benefit from the room. */
  .psection .wrap-narrow { display: grid; grid-template-columns: 320px minmax(0, 1fr);
                           gap: 0 60px; align-items: start; }
  /* NOT sticky. It was, and it looked good until a section contained a
     full-width block: `.tw` and `.note` span both columns, so once the reader
     scrolled past the heading's natural position the stuck heading floated
     over the table beside it. Measured across all pages at seven scroll
     offsets: 2 overlapping pairs on dive-regulations, 1 on
     dive-records-and-safety. A heading printed on top of a phone number in a
     recompression-chamber table is not a cosmetic problem. */
  .psection .sec-head    { grid-column: 1; max-width: none; margin-bottom: 0; }
  /* .h2 is 44px, sized for a full-width section head. In a 320px rail that
     wraps to four or five lines and overflows. Scale it to the rail. */
  .psection .sec-head .h2 { font-size: 31px; line-height: 1.12; letter-spacing: -0.028em; }
  .psection .prose       { grid-column: 2; max-width: 680px; }
  .psection .tw,
  .psection .note,
  .psection .rule        { grid-column: 1 / -1; max-width: none; margin-top: 28px; }
  .psection .sec-head .src { margin-top: 22px; border-top: 1px solid var(--hairline-soft);
                           padding-top: 14px; max-width: none; }

  @media (max-width: 900px) {
    .psection .wrap-narrow { display: block; }
    .psection .sec-head  { margin-bottom: 22px; }
    .psection .prose     { max-width: none; }
  }

  .prose            { max-width: 660px; }
  .prose p          { font-size: 18px; line-height: 1.75; color: var(--dim); margin: 0 0 20px; }
  .prose p b,
  .prose p strong   { color: var(--ink); font-weight: 600; }
  .prose a          { color: var(--accent); }

  /* Source note. An article cites; it does not wear a badge saying CONFIRMED. */
  .src              { font-size: 14px; line-height: 1.6; color: var(--faint);
                      border-top: 1px solid var(--hairline-soft);
                      padding-top: 14px; margin: 26px 0 0; max-width: 660px; }

  /* The one line worth pulling out of the column. */
  .pull             { font-family: var(--font-sans); font-size: 26px; line-height: 1.32;
                      letter-spacing: -0.022em; color: var(--ink); font-weight: 600;
                      margin: 32px 0; padding-left: 22px;
                      border-left: 2px solid var(--accent); text-wrap: balance; }

  /* Both cautions are .glass - the site's signature surface - so they read as
     part of the page rather than as a bootstrap alert dropped onto it. */
  /* `.notice` is the disclaimer's stable hook - scripts/verify_runtime.sh
     asserts it renders, is visible, and precedes the first regulatory heading.
     Renaming it silently broke that test once; keep the class. */
  .note             { max-width: 660px; margin: 0; }
  .note p           { font-size: 16px; line-height: 1.7; color: var(--dim); margin: 0 0 14px; }
  .note p:last-child{ margin-bottom: 0; }
  .note b           { color: var(--ink); }
  .note.warn        { border-color: rgba(251,191,36,0.45);
                      box-shadow: var(--glass-shadow), inset 3px 0 0 var(--amber-400); }
  .rule.unverified  { margin: 26px 0 0; }
  .badge            { display: inline-flex; align-items: center; gap: 7px;
                      font-family: var(--font-mono); font-size: 11px; font-weight: 500;
                      letter-spacing: 0.16em; text-transform: uppercase;
                      color: var(--amber-300); margin-bottom: 14px; }
  .badge.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                      background: var(--amber-400); flex: none; }

  .tw               { overflow-x: auto; margin: 28px 0 0; max-width: 760px;
                      border-top: 1px solid var(--hairline-soft); }
  .tw table         { width: 100%; border-collapse: collapse; }
  .tw th            { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
                      letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
                      text-align: left; padding: 16px 20px 12px 0; }
  .tw td            { font-size: 16px; line-height: 1.65; color: var(--dim);
                      padding: 16px 20px 16px 0; vertical-align: top;
                      border-top: 1px solid var(--hairline-soft); }
  .tw td:first-child{ color: var(--ink); font-weight: 500; width: 34%; }

  .stamp            { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px;
                      padding-top: 20px; border-top: 1px solid var(--hairline-soft);
                      font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
                      color: var(--faint); max-width: 660px; }
  .stamp b          { color: var(--dim); font-weight: 500; }

  .crumb            { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
                      text-transform: uppercase; color: var(--faint); margin: 0 0 22px; }
  .crumb a          { color: var(--faint); text-decoration: none; }
  .crumb a:hover    { color: var(--accent); }

  @media (max-width: 720px) {
    .prose p        { font-size: 17px; }
    .pull           { font-size: 21px; padding-left: 16px; }
    .tw td:first-child { width: auto; }
  }

  /* Qualifier after a phone number in the chamber table ("Hotline",
     "Chamber Operator"). Quieter than the number it belongs to, because in an
     emergency the number is the thing being scanned for. */
  .tw .q            { display: inline-block; font-size: 12px; color: var(--faint);
                      font-family: var(--font-mono); letter-spacing: .02em; }