/* ════════════════════════════════════════════════════════════════════════
   public/css/shared.css
   Loaded by both landing.html and clearplan.html.
   Holds: design tokens (:root vars), base resets, view wrappers,
   and the html.dashboard switching rules.
══════════════════════════════════════════════════════════════════════════ */

  /* ── SHARED VARS ── */
  :root {
    --black: #0e0e0e;
    --grey-dark: #333;
    --grey-light: #999;
    --grey-pale: #f5f5f3;
    --white: #ffffff;
    --green: #10b981;
    --red: #ef4444;
    --orange: #f59e0b;
    --app-navy: #0e0e0e;
    --app-slate: #888888;
    --brand-primary: #0e0e0e;
    --brand-secondary: #888888;
  }

  /* Scope conflicting --grey-mid per view */
  #view-landing { --grey-mid: #888; --border: #e8e8e6; --grey: #f5f5f3; }
  /* --border was only defined for #view-landing, so the dashboard's
     inline border:1px solid var(--border) styles silently rendered
     borderless (color pickers, hex inputs). */
  :root { --border: #e8e8e6; }
  #view-app     { --grey-mid: #c8c8c8; --grey: #f5f5f3; }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* Disable iOS Safari / Android Chrome auto text-inflation, which was
     making sectionLabel titles in narrow grid columns (Family Values,
     Key Goals) render smaller than full-width sectionLabels. Plan is
     designed at 880px and uniformly transform-scaled for mobile, so
     the browser's auto-inflation only causes inconsistencies. */
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body {
    font-family: 'DM Sans', Helvetica, sans-serif;
    background: var(--white);
    color: var(--black);
    -webkit-font-smoothing: antialiased;
  }
  body.app-view { background: #f0f2f5; }

  /* ── VIEW WRAPPERS ── */
  #view-app { display: none; }
  /* When served as authenticated dashboard: hide landing, show app immediately */
  html.dashboard #view-landing { display: none !important; }
  html.dashboard #view-app { display: block; }
  /* Dashboard-specific header */
  #db-header { display: none; }
  html.dashboard #db-header { display: flex; }
  html.dashboard .topbar-home { display: none; }
  html.dashboard .topbar { position: static; border-bottom: 1px solid #e8e8e6; }