/* components.css — all component CSS extracted from the three former inline
   <style> blocks (index.html shell, natal_partial Reports, clients_admin
   Clients). M62: rules kept in their original relative source order so the
   cascade outcome is unchanged. */

@layer components {

  /* ════════ Shell — header (M72: Apple-calm rebuild; M79: Airtable chrome) ════════ */

  /* Skip-link — off-screen until it receives keyboard focus. */
  .skip-link {
    position:absolute; left:var(--space-xs); top:var(--space-xs);
    z-index:var(--z-toast);
    padding:var(--space-xs) var(--space-sm);
    background:var(--primary); color:var(--on-primary);
    border-radius:var(--at-radius-sm);
    font-size:var(--fs-875); text-decoration:none;
    transform:translateY(-150%);
    transition:transform var(--dur-fast) var(--ease);
  }
  .skip-link:focus { transform:translateY(0); }

  /* ── Header bar — flat white canvas with hairline divider (Airtable top-nav) ── */
  header {
    position:sticky; inset-block-start:0; z-index:var(--z-header);
    background:var(--canvas);
    border-block-end:1px solid var(--hairline);
  }
  /* Inner wrapper constrains flex content to --page-max while header chrome
     remains full viewport width. min-block-size lands Airtable's 64px nav.
     Padding uses --gutter (the design-system standard "fluid side padding
     applied to all page sections") so the logo and hamburger pixel-align
     with the visible content edges of every mode view. */
  .header-inner {
    display:flex; align-items:center; gap:var(--space-md);
    min-block-size:64px;
    max-inline-size:var(--page-max); width:100%; margin-inline:auto;
    padding-inline:max(var(--gutter), env(safe-area-inset-left));
  }
  body.panel-open { overflow:hidden; }

  /* ── Logo wordmark ── */
  .header-logo {
    font-family:var(--font-serif);
    font-size:var(--fs-95); font-weight:600; letter-spacing:-0.01em; font-style:italic;
    color:var(--ink); text-decoration:none;
    white-space:nowrap; flex-shrink:0; line-height:1;
    transition:color var(--dur-fast);
  }
  .header-logo:hover { color:var(--body); }

  /* ── Hamburger toggle (hidden until JS enables overlay mode) ── */
  .nav-toggle {
    display:none;
    align-items:center; justify-content:center;
    width:44px; min-height:44px; padding:0;
    margin-inline-start:auto;
    background:var(--canvas); border:1px solid var(--hairline);
    border-radius:var(--at-radius-sm);
    cursor:pointer;
    color:var(--ink); flex-shrink:0;
  }
  header.has-js-nav .nav-toggle { display:inline-flex; }

  /* ── Nav panel — no-JS: visible column; with JS: full-screen overlay ── */
  .header-tabs {
    display:flex; flex-direction:column; gap:var(--space-2xs);
    padding:var(--space-xs);
  }
  @keyframes header-overlay-open {
    from { clip-path:inset(0 0 100% 0); }
    to   { clip-path:inset(0 0 0 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    header.nav-open .nav-overlay { animation:none; }
    .btn, .btn-gold, .btn-save, .tab-btn,
    .chart-tooltip { transition:none; }
  }

  /* ── Hamburger ↔ X morph — toggle is the single close affordance ── */
  .nav-toggle .icon-close { display:none; }
  header.has-js-nav.nav-open .nav-toggle .icon-hamburger { display:none; }
  header.has-js-nav.nav-open .nav-toggle .icon-close { display:inline-flex; }

  /* ── Mode tabs — Airtable tabbed-nav: sentence-case + ink underline on active ── */
  .header-tab {
    display:flex; align-items:center;
    width:100%; min-height:44px;
    padding:var(--space-xs) var(--space-sm);
    background:transparent; border:none; cursor:pointer;
    border-radius:var(--at-radius-sm);
    color:var(--body); font-size:var(--fs-875); font-family:inherit;
    font-weight:500;
    white-space:nowrap; transition:color var(--dur-fast), background var(--dur-fast);
    text-align:start;
  }
  @media (hover:hover) {
    .header-tab:hover { background:var(--surface-soft); }
  }
  .header-tab.active,
  .header-tab[aria-pressed="true"] {
    color:var(--ink); font-weight:500;
    border-bottom:2px solid var(--ink);
  }

  /* ── Universal overlay (M90: full-screen below header; M100 rework: constrained to --page-max so it aligns with the header chrome) ── */
  .nav-overlay {
    position:fixed; inset-inline:0;
    inset-block-start:var(--header-h); inset-block-end:0;
    z-index:var(--z-overlay);
    background:var(--canvas);
    max-inline-size:var(--page-max); margin-inline:auto;
    padding:var(--space-lg) max(var(--gutter), env(safe-area-inset-left));
    overflow-y:auto;
    display:none;
    flex-direction:column; gap:var(--space-md);
  }
  header.nav-open .nav-overlay {
    display:flex;
    animation:header-overlay-open var(--dur-slow) var(--ease) both;
  }

  .nav-overlay-modules,
  .nav-overlay-account {
    display:flex; flex-direction:column; gap:var(--space-2xs);
  }
  @media (min-width:1024px) {
    .nav-overlay-modules { display:none; }
    .nav-overlay-divider { display:none; }
  }

  .nav-overlay-divider {
    border:none;
    border-block-start:1px solid var(--hairline);
    margin:var(--space-xs) 0;
  }

  .nav-overlay-item {
    display:flex; align-items:center;
    min-block-size:44px;
    padding:var(--space-xs) var(--space-sm);
    background:transparent; border:none; cursor:pointer;
    border-radius:var(--at-radius-sm);
    color:var(--body); font-size:var(--fs-875); font-family:inherit;
    font-weight:500;
    text-decoration:none; text-align:start; white-space:nowrap;
    transition:background var(--dur-fast);
  }
  @media (hover:hover) {
    .nav-overlay-item:hover { background:var(--surface-soft); }
  }

  .nav-overlay-lang {
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2xs);
    padding:var(--space-xs) var(--space-sm);
  }
  .nav-overlay-lang-label {
    font-size:var(--fs-875); color:var(--muted); font-weight:500;
  }

  @media (max-width:1023px) {
    .header-tabs { display:none; }
  }

  /* ── Language toggle ── */
  .lang-toggle-group {
    display:flex; align-items:center;
    background:var(--canvas);
    border:1px solid var(--hairline); border-radius:var(--at-radius-sm);
    overflow:hidden; flex-shrink:0;
  }
  .lang-btn {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:36px; padding:0 var(--space-sm);
    background:transparent; border:none; cursor:pointer;
    color:var(--body); font-size:var(--fs-875); font-family:inherit;
    font-weight:500;
    transition:color var(--dur-fast), background var(--dur-fast);
  }
  @media (hover:hover) {
    .lang-btn:hover { background:var(--surface-soft); }
  }
  .lang-btn.lang-btn--active,
  .lang-btn[aria-pressed="true"] {
    background:var(--ink); color:var(--on-primary);
  }

  /* ── Desktop — inline tabs visible, hamburger opens overlay ── */
  @media (min-width:1024px) {
    .header-tabs {
      position:static; display:flex; flex-direction:row; flex:1;
      gap:var(--space-2xs); justify-content:flex-start;
      padding:0; background:transparent; overflow:visible;
    }
    .header-tab { width:auto; min-height:0; padding:7px 16px; }
  }

  /* ════════ Buttons ════════ */

  /* Destructive ghost — single accent on text + border (M79 carve-out from
     Airtable's strict "no accent colors" rule; WCAG-tier destructive affordance). */
  .btn-delete-client {
    background:var(--canvas); color:var(--color-delete);
    font-family:var(--font-airtable-text); font-weight:500;
    font-size:var(--fs-875); line-height:1.4;
    padding:8px 16px;
    border:1px solid var(--hairline); border-radius:var(--at-radius-sm);
    cursor:pointer;
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  @media (hover:hover) {
    .btn-delete-client:hover {
      background:var(--surface-soft);
      color:var(--color-delete-strong);
      border-color:var(--color-delete-border);
    }
  }

  /* Primary — flat near-black (M79: 9-variant gradient grammar collapsed into
     one Airtable role; per-variant layout preserved below). */
  .btn, .btn-sm, .btn-gold, .btn-new, .btn-update, .btn-edit {
    background:var(--primary); color:var(--on-primary);
    font-family:var(--font-airtable-text); font-weight:500;
    font-size:var(--fs-100); line-height:1.4;
    padding:16px 24px;
    border:none; border-radius:var(--at-radius-lg);
    cursor:pointer; white-space:nowrap;
    transition:background var(--dur-fast) var(--ease);
  }
  @media (hover:hover) {
    .btn:hover, .btn-sm:hover, .btn-gold:hover,
    .btn-new:hover, .btn-update:hover, .btn-edit:hover {
      background:var(--primary-active);
    }
  }
  /* Per-variant layout — preserved from pre-M79 bodies (LOCKED-5). */
  .btn-sm     { padding:9px 16px; font-size:var(--fs-875); }
  .btn-gold   { padding:14px; }
  .btn-new    { padding:7px 14px; font-size:var(--fs-875); }
  .btn-update { width:100%; padding:11px; margin-top:10px; }
  .btn-edit   { width:100%; padding:11px; margin-top:10px; }

  /* Secondary outline — white canvas + hairline (Save / Cancel). */
  .btn-save, .btn-cancel {
    background:var(--canvas); color:var(--ink);
    font-family:var(--font-airtable-text); font-weight:500;
    font-size:var(--fs-100); line-height:1.4;
    padding:16px 24px;
    border:1px solid var(--hairline); border-radius:var(--at-radius-lg);
    cursor:pointer; white-space:nowrap;
    transition:background var(--dur-fast) var(--ease);
  }
  @media (hover:hover) {
    .btn-save:hover, .btn-cancel:hover { background:var(--surface-soft); }
  }
  .btn-save   { width:100%; padding:11px; }
  .btn-cancel { padding:11px; }
  .btn:disabled, .btn-sm:disabled, .btn-gold:disabled,
  .btn-new:disabled, .btn-update:disabled, .btn-edit:disabled,
  .btn-save:disabled, .btn-cancel:disabled, .btn-delete-client:disabled {
    opacity:.55; cursor:not-allowed;
  }

  /* ════════ Form card (M111) — one container for every entry form ════════ */
  .form-card {
    background:var(--field-surface);
    border:1px solid var(--field-border);
    border-radius:var(--at-radius-lg);
    padding:var(--space-lg);
    min-inline-size:0; overflow-wrap:break-word;
  }
  .form-card-title {
    font-family:var(--font-serif); font-size:var(--fs-150); font-weight:500;
    color:var(--ink); line-height:1.2;
  }
  .form-card-subtitle { font-size:var(--fs-875); color:var(--muted); }
  .form-card--picker { background:var(--surface-soft); padding:var(--space-md); }
  .form-card--login { max-inline-size:380px; margin-inline:auto; }
  .form-optional { color:var(--muted); font-weight:400; margin-inline-start:var(--space-2xs); }

  /* Actions row — DOM order: destructive, aside, secondary, primary.
     Stacked below 640px with the primary first visually (column-reverse keeps
     it last in the DOM so Enter submits it). */
  .form-card-actions {
    display:flex; flex-direction:column-reverse; gap:var(--space-sm);
    margin-block-start:var(--space-lg);
  }
  .form-card-actions > * { inline-size:100%; }
  .form-card-actions-aside {
    display:flex; align-items:center; justify-content:center; gap:var(--space-xs);
    color:var(--muted); font-size:var(--fs-875);
  }
  @media (min-width:640px) {
    .form-card { padding:var(--at-space-xl); }
    .form-card--picker { padding:var(--space-md); }
    .form-card-actions { flex-direction:row; justify-content:flex-end; align-items:center; }
    .form-card-actions > * { inline-size:auto; margin:0; }
    .form-card-actions > .btn-delete-client,
    .form-card-actions > .form-card-actions-aside { margin-inline-end:auto; }
  }

  #status { text-align:center; padding:var(--space-xs); color:var(--muted); font-size:var(--fs-875); min-height:28px; overflow-wrap:break-word; }

  /* M65: spacing for form groups outside the .form-grid */
  .city-group  { position:relative; margin-block-start:var(--space-md); }
  .gender-group { margin-block-start:var(--space-md); }

  /* ════════ M65: Visually-hidden utility (screen-reader-only text) ════════ */
  .visually-hidden {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  #chartSvg {
    width:100%; max-inline-size:var(--chart-svg-max); height:auto;
    background:transparent;
    filter:none;
    overflow:visible;
  }

  /* ════════ Info bar ════════ */
  .info-bar {
    background:var(--canvas); border:1px solid var(--hairline);
    border-radius:var(--at-radius-lg); padding:var(--space-sm) var(--space-md);
    font-size:var(--fs-875); color:var(--muted);
    display:flex; gap:var(--space-md); flex-wrap:wrap; margin-bottom:var(--space-2xs);
    overflow-wrap:break-word;
  }
  .info-bar strong { color:var(--ink); }
  .info-bar-meta { color:var(--muted); }
  .info-bar-count { margin-inline-start:auto; color:var(--body); }

  /* ════════ Tabs — mobile-first ════════ */
  .tab-buttons {
    display:flex; border-bottom:1px solid var(--hairline);
    flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tab-buttons::-webkit-scrollbar { display:none; }
  .tab-btn {
    background:none; border:none; color:var(--muted);
    padding:var(--space-sm) var(--space-xs); font-family:inherit;
    font-size:var(--fs-875);
    cursor:pointer;
    border-bottom:2px solid transparent; transition:all var(--dur-mid) var(--ease);
    min-block-size:44px; white-space:nowrap;
  }
  .tab-btn.active { color:var(--ink); border-bottom-color:var(--ink); font-weight:500; }
  .tab-btn.chart-params-tab-btn {
    padding:var(--space-xs) var(--space-sm); font-size:var(--fs-145); line-height:1;
  }
  @media (hover:hover) {
    .tab-btn:hover:not(.active) { color:var(--ink); }
  }
  @media (min-width:640px) {
    .tab-btn {
      padding:var(--space-sm) var(--space-md);
      font-size:var(--fs-875);
    }
  }
  .tab-panel { display:none; }
  .tab-panel.active { display:block; }

  .pg { font-size:var(--fs-125); }
  .retro { color:var(--color-retro); font-size:var(--fs-875); margin-left:3px; }
  .sg { font-size:var(--fs-100); margin-right:3px; }
  .hn { color:var(--muted); font-size:var(--fs-875); }
  .adot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }

  /* ════════ Interpretation panel ════════ */
  .interp-hint {
    padding:24px 18px; color:var(--muted); font-style:italic; font-size:var(--fs-875); text-align:center;
  }
  .interp-loading {
    padding:24px 18px; color:var(--muted); font-size:var(--fs-875); text-align:center;
  }
  .interp-planet-title {
    display:flex; align-items:center; gap:10px;
    padding:14px 18px 10px;
    border-bottom:1px solid var(--hairline);
  }
  .interp-planet-title span { font-size:var(--fs-125); font-weight:500; color:var(--ink); font-family:var(--font-serif); }
  .interp-planet-title small { color:var(--muted); font-size:var(--fs-875); }
  .interp-section {
    padding:12px 18px 4px;
    border-bottom:1px solid var(--hairline);
  }
  /* M74: demoted from --color-gold (decorative) to neutral muted-warm */
  .interp-section-label {
    font-size:var(--fs-875); font-weight:500;
    color:var(--muted); margin-bottom:6px;
  }
  .interp-text {
    font-size:var(--fs-1125); line-height:1.65; color:var(--body);
    font-family:var(--font-serif); white-space:pre-line;
    max-height:160px; overflow-y:auto;
  }
  /* M74: border-left demoted from --color-gold to --color-border */
  .interp-aspect-row {
    margin:0 12px 10px;
    padding:10px 12px;
    background:var(--surface-soft);
    border:1px solid var(--hairline);
    border-left:3px solid var(--hairline);
    border-radius:var(--at-radius-sm);
  }
  .interp-aspect-row .asp-label {
    font-size:var(--fs-875); font-weight:500; color:var(--muted);
    margin-bottom:6px;
  }
  .interp-none {
    padding:8px 18px; font-size:var(--fs-875); color:var(--muted); font-style:italic;
  }
  tr.interp-row td { padding:0; background:var(--surface-soft); border-top:1px solid var(--hairline); }
  .interp-inline { padding:4px 16px 12px; }
  tr.planet-row { cursor:pointer; transition:background var(--dur-fast) var(--ease); }
  @media (hover:hover) {
    tr.planet-row:hover { background:var(--surface-soft); }
  }
  tr.planet-row.selected { background:var(--surface-soft); }

  /* ════════ Chart-glyph hover tooltip ════════ */
  .chart-tooltip {
    position:fixed; z-index:var(--z-popover); pointer-events:none;
    background:var(--canvas); color:var(--muted);
    padding:var(--space-2xs) var(--space-xs); border-radius:var(--at-radius-sm); font-size:var(--fs-875);
    border:1px solid var(--hairline);
    white-space:nowrap; box-shadow:var(--shadow-tooltip);
    opacity:0; transition:opacity var(--dur-fast) var(--ease);
  }
  .chart-tooltip.visible { opacity:1; }

  /* ════════ City autocomplete dropdown ════════ */
  #cityDropdown {
    position:absolute; top:100%; left:0; right:0; z-index:var(--z-sticky);
    inline-size:100%; max-inline-size:100%;
    background:var(--canvas); border:1px solid var(--hairline); border-top:none;
    border-radius:0 0 var(--at-radius-lg) var(--at-radius-lg);
    box-shadow:var(--shadow-dropdown-sm);
    display:none;
  }
  #cityDropdown.open { display:block; }
  .city-option {
    padding:var(--space-xs) var(--space-sm); min-block-size:44px;
    display:flex; flex-direction:column; justify-content:center;
    cursor:pointer;
    font-size:var(--fs-875); color:var(--body);
    border-bottom:1px solid var(--hairline);
    transition:background var(--dur-fast) var(--ease);
  }
  .city-option:last-child { border-bottom:none; }
  @media (hover:hover) {
    .city-option:hover { background:var(--surface-soft); }
  }
  .co-city    { font-weight:bold; color:var(--ink); overflow-wrap:break-word; }
  .co-state   { color:var(--muted); font-size:var(--fs-875); overflow-wrap:break-word; }
  .co-country { color:var(--muted); font-size:var(--fs-875); overflow-wrap:break-word; }


  /* ════════ M34 polish ════════ */

  /* Tab panels: no inner scroll on mobile — the page scrolls (M63 model).
     Restored at 1024px+ for the desktop two-column layout. */
  @media (min-width: 1024px) {
    .tab-panel.active {
      overflow-y: auto;
      max-height: 70svh;
    }
  }

  /* Spinners */
  @keyframes m34spin { to { transform:rotate(360deg); } }
  .m34-spinner {
    display:inline-block; width:13px; height:13px;
    border:2px solid var(--hairline); border-top-color:var(--primary);
    border-radius:50%; animation:m34spin .7s linear infinite;
    vertical-align:middle; flex-shrink:0;
  }

  /* Toast */
  #toastSlot {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    background:var(--success); color:var(--on-primary);
    padding:10px 22px; border-radius:var(--at-radius-lg);
    font-size:var(--fs-875); font-family:var(--font-serif);
    box-shadow:var(--shadow-toast);
    z-index:var(--z-toast); opacity:0; pointer-events:none;
    transition:opacity var(--dur-mid); white-space:nowrap;
  }
  #toastSlot.toast-visible { opacity:1; }
  #toastSlot.toast-error   { background:var(--color-toast-error); }
  #toastSlot.toast-info    { background:var(--color-toast-info); }


}