/* THEME: light defaults */
:root{
  --bg: #f6f9ff;
  --card: #eaf1ff;
  --text: #1f2a44;
  --muted: #5b6b86;
  --brand: #2c72ff;
  --brand-dark: #224fa8;
  --shadow: 0 10px 30px rgba(44,114,255,.15);
  --radius: 22px;
  --tile-bg: #ffffff;
  --tile-border: #d8e3ff;
  --line: #d6e1ff;
  --focus: rgba(44,114,255,.2);
}

/* THEME: dark overrides */
:root[data-theme="dark"]{
  --bg: #0d1331;
  --card: #121833;
  --text: #eef2ff;
  --muted: #a7b4d8;
  --brand: #8eb3ff;
  --brand-dark: #5b8cff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --tile-bg: rgba(255,255,255,.06);
  --tile-border: rgba(255,255,255,.14);
  --line: rgba(255,255,255,.16);
  --focus: rgba(91,140,255,.22);
}

/* Respect system preference by default */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){ color-scheme: dark; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: var(--bg);
  transition: background .25s ease, color .25s ease;
}

.page{max-width:980px; margin:40px auto; padding:0 16px}
.headline{
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0 0 18px;
  color:#344a79;
}
:root[data-theme="dark"] .headline{ color: var(--text); }

.panel{
  background: linear-gradient(#f3f7ff, #eaf1ff);
  border: 1px solid #dae6ff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
:root[data-theme="dark"] .panel{
  background: var(--card);
  border-color: var(--line);
}

.panel__header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.brand{display:flex; gap:12px; align-items:center}
.brand svg{width:34px; height:34px}
.brand h2{margin:0; font-size: clamp(1.4rem, 2.4vw, 2rem);}

/* NEW: theme button */
.theme-btn{
  border:1px solid var(--tile-border);
  background: var(--tile-bg);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.theme-btn:focus{ outline: none; box-shadow: 0 0 0 4px var(--focus); }

.panel__grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px;
}
@media (max-width: 860px){ .panel__grid{ grid-template-columns: 1fr; } }

.left h3, .right h3{ margin: 6px 0 10px; font-size: 1.1rem; }
.hint{margin: 0 0 10px; color: var(--muted); font-size: .95rem;}

.tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.tile{
  border:1px solid var(--tile-border);
  background: var(--tile-bg);
  border-radius: 14px;
  padding:14px 10px;
  font-weight:700; color:var(--text);
  cursor:pointer;
}
.tile:hover{box-shadow:0 6px 14px rgba(0,0,0,.06)}
.tile.active{outline:3px solid rgba(44,114,255,.35)}
:root[data-theme="dark"] .tile.active{ outline-color: rgba(91,140,255,.35); }

.right .choice{margin-bottom:10px}
.choice__item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 16px; border-radius:14px;
  background: var(--brand); color: white; font-weight:800;
}

.choice__item--active .dot{width:12px; height:12px; border-radius:50%; background:#fff; margin-right:8px}
.choice__item .emoji{opacity:.95}

.row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 860px){ .row{ grid-template-columns: 1fr; } }

.field{display:grid; gap:6px}
.field > span{font-weight:700}

input, select{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--tile-border);
  background: var(--tile-bg); color:var(--text); font-size:16px; outline:none;
}
input:focus, select:focus{ box-shadow:0 0 0 4px var(--focus); }

.with-unit{display:grid; grid-template-columns: 1fr auto; gap:8px}

.selects select{ width:100% }

.button-cell{ display:flex; align-items:flex-end; }
.cta{
  width:100%; padding:12px 16px; border:0; border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  color:white; font-weight:900; cursor:pointer; box-shadow: var(--shadow);
}
.cta:hover{ filter: brightness(.98); }

.error{ color:#c53939; min-height:1.2em; margin:8px 0 0; }
:root[data-theme="dark"] .error{ color:#ff7b86; }

.results{ margin-top:14px; border-top:1px solid var(--line); padding-top:14px; }
.results__row{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:center; }
@media (max-width: 860px){ .results__row{ grid-template-columns: 1fr; } }

.results__big .lead{ color:var(--muted); font-weight:800; }
.results__big .number{ font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight:900; }
.results__big .unit{ color:var(--muted); font-weight:800; margin-left:6px; }
.results__big .sub{ color:var(--muted); margin-top:6px; }

.breakdown{ list-style: none; margin:0; padding:0; }
.breakdown li{ padding:6px 0; border-bottom:1px dashed var(--line); }
.breakdown li:last-child{ border-bottom:0; }

.note{
  margin-top:10px;
  background: #f5f9ff;
  border:1px dashed var(--line);
  padding:10px 12px; border-radius:12px;
  color:#425372;
}
:root[data-theme="dark"] .note{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* === Wider right-side controls === */

/* Give more real estate to the right column overall */
.panel__grid{
  grid-template-columns: 0.9fr 1.1fr; /* left | right */
}

/* === Fix unreadable dropdowns in dark mode === */

/* 1) Let the browser render native controls in dark */
:root[data-theme="dark"] {
  color-scheme: dark; /* ensures select popups use dark UI */
}

/* 2) Fallback/enforcement for browsers that ignore color-scheme on <option> */
:root[data-theme="dark"] select,
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup {
  background-color: #0f1633;  /* dark panel bg */
  color: #eef2ff;             /* light text */
  border-color: rgba(255,255,255,.18);
}

/* Highlight/hover in the dropdown list (where supported) */
:root[data-theme="dark"] select option:hover,
:root[data-theme="dark"] select option:checked {
  background-color: #1a2553;
  color: #ffffff;
}

/* Keep focus ring visible on the closed control */
:root[data-theme="dark"] select:focus {
  box-shadow: 0 0 0 4px rgba(91,140,255,.25);
  outline: none;
}

/* Make placeholders readable in dark */
:root[data-theme="dark"] ::placeholder {
  color: #c7d2f0;
  opacity: .9;
}


/* Legal pages & footer */
.legal-card {
  max-width: 760px;
  margin: 24px auto;
}

.legal-card h1 { margin-top: 0; }
.legal-card h2 { margin: 18px 0 8px; font-size: 1.05rem; }
.legal-list { margin: 8px 0 0 20px; }
.legal-list li { margin: 6px 0; }

.site-footer{
  text-align:center;
  color: var(--muted);
  margin: 16px 0 8px;
  font-size: .95rem;
}
.site-footer a{
  color: inherit;
  text-decoration: underline;
}

/* ===== Learn / article styling ===== */

.learn .lead{
  font-size: 1.05rem;
  color: var(--text);
  margin: 12px 0 14px;
}

/* Key Takeaways callout */
:root{
  --callout-bg: #eaf3ff;
  --callout-border: #d7e6ff;
  --callout-dot: var(--brand);
  --thead-bg: #f4f8ff;
  --zebra: #f8fbff;
}
:root[data-theme="dark"]{
  --callout-bg: rgba(126, 163, 255, .12);
  --callout-border: rgba(255,255,255,.14);
  --callout-dot: var(--brand);
  --thead-bg: rgba(255,255,255,.06);
  --zebra: rgba(255,255,255,.04);
}

.takeaways{
  background: var(--callout-bg);
  border: 1px solid var(--callout-border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.takeaways__title{
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.dots{ list-style: none; margin: 0; padding: 0; }
.dots li{
  position: relative; padding-left: 18px; margin: 8px 0; line-height: 1.5;
}
.dots li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:8px; height:8px; border-radius:50%;
  background: var(--callout-dot);
  box-shadow: 0 0 0 4px rgba(44,114,255,.12);
}
:root[data-theme="dark"] .dots li::before{
  box-shadow: 0 0 0 4px rgba(142,179,255,.14);
}

/* Section titles with soft underline */
.section-title{
  margin: 20px 0 8px; font-size: 1.35rem; font-weight: 900;
}
.section-title::after{
  content:""; display:block; margin-top: 8px; height:4px; width: 120px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity: .45;
}

/* Lists */
.bullets, .checklist{ margin: 8px 0 10px 20px; }
.bullets li, .checklist li{ margin: 6px 0; }
.checklist li{ list-style: "• "; }

/* Table */
.scroll-x{ overflow-x:auto; }
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tile-bg);
  border: 1px solid var(--callout-border);
  border-radius: 14px;
  overflow: hidden;
  font-size: .98rem;
}
.table caption{
  text-align: left; padding: 10px 12px; font-weight: 800; color: var(--muted);
}
.table thead th{
  background: var(--thead-bg);
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--callout-border);
}
.table td{
  padding: 12px;
  border-top: 1px dashed var(--callout-border);
}
.table tbody tr:nth-child(even){ background: var(--zebra); }

/* ===== Hard-align Learn section to the calculator panel ===== */

/* Make .learn use the same horizontal metrics as .panel */
.panel.learn{
  /* inherit panel box model and centering (panel already handles max-width + margins) */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  /* keep the same side padding the panel uses (update if your panel padding changes) */
  padding-left: 22px;
  padding-right: 22px;
}

/* Neutralize any earlier “reading column” rules so content lines up with the panel edges */
.panel.learn > .takeaways,
.panel.learn > .lead,
.panel.learn > p,
.panel.learn > ul,
.panel.learn > .small,
.panel.learn > h2.section-title,
.panel.learn > .scroll-x{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Table wrapper should span the full inner width of the panel */
.panel.learn .scroll-x{ width: 100%; }


/* ===== Gentle spacing between sections & within the Learn card ===== */

/* 1) Gap between the big cards (calculator ↔ learn) */
.page > section + section {
  margin-top: 30px;          /* tweak to 16–24px if you want more/less */
}

/* 2) Default vertical rhythm inside the Learn card */
.card.learn > * + * {
  margin-top: 24px;          /* space between each direct child */
}

/* 3) Fine-tune specific elements for a cleaner flow */
.card.learn .takeaways { margin-top: 6px; margin-bottom: 14px; }
.card.learn .section-title { margin-top: 22px; margin-bottom: 6px; }
.card.learn .scroll-x { margin-top: 10px; }
.card.learn .small.muted { margin-top: 8px; }

/* 4) Slightly tighter spacing on small screens */
@media (max-width: 640px) {
  .page > section + section { margin-top: 14px; }
  .card.learn > * + * { margin-top: 12px; }
}

/* ===== Table of Contents (floating, left) ===== */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.toc-toggle{
  position: fixed; left: 18px; top: 140px; z-index: 1000;
  width: 48px; height: 48px; border: 0; cursor: pointer;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.toc-toggle:focus{ outline:none; box-shadow: 0 0 0 4px var(--focus); }

/* Drawer panel */
.toc-panel{
  position: fixed; left: 18px; top: 120px; z-index: 1000;
  width: 300px; max-height: 75vh; overflow: auto;
  padding: 12px; border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  transform: translateX(-12px); opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.toc-panel.open{ transform: translateX(0); opacity: 1; pointer-events: auto; }
.toc-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.toc-head h2{ margin:0; font-size: 1.05rem; }
.toc-close{
  border:0; background:transparent; color:var(--text);
  font-size: 22px; line-height:1; cursor:pointer; padding: 2px 6px;
  border-radius:8px;
}
.toc-close:hover{ background: var(--tile-bg); }

.toc-nav ol{ list-style:none; margin:0; padding:0; }
.toc-nav a{
  display:block; padding: 10px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-weight: 600;
}
.toc-nav a:hover{ background: var(--tile-bg); }
.toc-nav a.active{
  background: rgba(44,114,255,.12);
  outline: 2px solid rgba(44,114,255,.25);
}
:root[data-theme="dark"] .toc-nav a.active{
  background: rgba(142,179,255,.12);
  outline-color: rgba(142,179,255,.25);
}

/* Hide on small screens (drawer can feel cramped) */
@media (max-width: 900px){
  .toc-toggle, .toc-panel{ display: none; }
}

/* === Stronger, high-contrast TOC button === */

/* Size & layout */
.toc-toggle{
  position: fixed; left: 18px; top: 140px; z-index: 1000;
  width: 56px; height: 56px;                /* bigger tap target */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.18);
  color: #fff !important;                   /* white icon */
  background: linear-gradient(180deg, var(--brand), var(--brand2)) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.25),
    0 2px 6px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

/* Stronger contrast in light mode (in case your brand is pale) */
:root:not([data-theme="dark"]) .toc-toggle{
  border-color: rgba(2, 52, 140, .35);
  box-shadow:
    0 18px 36px rgba(2, 52, 140, .20),
    0 2px 6px rgba(2, 52, 140, .18);
}

/* Hover/active/focus states */
.toc-toggle:hover{ transform: translateY(-1px); filter: brightness(.98); }
.toc-toggle:active{ transform: translateY(0); filter: brightness(.96); }
.toc-toggle:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px var(--focus),
    0 18px 36px rgba(0,0,0,.28);
}

/* When the drawer is open (aria-expanded set in JS), show a clear state */
.toc-toggle[aria-expanded="true"]{
  filter: brightness(.95);
  box-shadow:
    0 0 0 4px var(--focus),
    0 18px 36px rgba(0,0,0,.28);
}

/* Panel tweaks so it also reads clearly */
.toc-panel{
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
/* === Make the TOC button icon visible in LIGHT mode === */

/* Base: keep your current shape/shadow */
.toc-toggle svg{ width:24px; height:24px; }

/* In light mode, use a white button with a BLUE icon */
:root:not([data-theme="dark"]) .toc-toggle{
  background: #ffffff !important;              /* white tile */
  color: #2853d4 !important;                   /* blue icon (uses currentColor) */
  border: 1px solid rgba(40,83,212,.35) !important;
  box-shadow:
    0 20px 40px rgba(40,83,212,.18),
    0 2px 6px rgba(40,83,212,.14);
}

/* Optional: tiny inner contrast for very pale screens */
:root:not([data-theme="dark"]) .toc-toggle svg{
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,.3));
}

/* Dark mode stays high-contrast (white icon on blue) */
:root[data-theme="dark"] .toc-toggle{
  color:#fff !important;                       /* white icon */
  background: linear-gradient(180deg, var(--brand), var(--brand2)) !important;
  border: 1px solid rgba(255,255,255,.18);
}


/* ===== Font upgrade: Outfit (headings) + DM Sans (body) ===== */
:root{
  --font-head: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Body text */
body{
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Global numeric alignment (so the big results don’t wiggle) */
.number, .results .unit, input, select, button{
  font-variant-numeric: tabular-nums;
}

/* Headings & key UI labels */
.headline,
.brand h2,
h1, h2, h3,
.section-title,
.takeaways__title,
.panel__header .theme-btn,
.cta{
  font-family: var(--font-head);
  letter-spacing: -.01em;
}

/* Strengthen headline/section weights without making them shouty */
.headline{ font-weight: 800; }
.brand h2, h1, h2{ font-weight: 800; }
h3, .section-title, .takeaways__title{ font-weight: 700; }

/* Optional: slightly larger base sizes for a more editorial feel */
:root{
  --size-body: 16px;     /* change to 17px if you want a bit larger */
}
body{ font-size: var(--size-body); }

/* Buttons keep the head font and feel a bit more premium */
.cta{
  font-weight: 800;
  letter-spacing: .005em;
}

/* Panel headings (Hydration Setup / Quick Profile) tidy spacing */
.left h3, .right h3{
  font-weight: 800;
  margin-top: 2px;
  margin-bottom: 8px;
}


/* === Feature image block (full-width like the calculator) === */
.panel.media{
  padding: 0;               /* let the image touch the rounded edges */
  overflow: hidden;         /* clip image to the panel radius */
}

.media__frame{ margin: 0; } /* remove default figure margins */

/* Responsive height: grows on big screens, stays compact on mobile */
.media__frame img{
  display: block;
  width: 100%;
  height: clamp(180px, 30vw, 380px);  /* min / responsive / max */
  object-fit: cover;
}

/* Optional: subtle overlay for contrast in dark mode */
:root[data-theme="dark"] .media__frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.06));
  pointer-events: none;
}
.media__frame{ position: relative; }

/* === Phone layout: stack calculator sections vertically (portrait) === */
@media (max-width: 760px){
  /* Stack the two columns */
  .panel__grid{
    display: flex !important;
    flex-direction: column;
    gap: 16px;                 /* space between Quick Profile and Hydration Setup */
  }

  .panel__grid .left,
  .panel__grid .right{
    width: 100%;
    max-width: 100%;
  }

  /* Make the form rows comfortable on small screens */
  .row{
    display: grid;             /* works even if it was flex before */
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Big, easy-to-tap Calculate button */
  .button-cell .cta{
    width: 100%;
    min-height: 48px;
  }
}


/* Hide the floating Table of Contents on very small screens */
@media (max-width: 520px){
  .toc-toggle,
  .toc-panel{
    display: none !important;
  }
}


/* --- Simple top header --- */
.site-top{
  display:flex; align-items:center; gap:16px;
  justify-content:space-between;
  max-width:1080px; margin:16px auto 8px;
  padding:10px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.05);
}
.logo{ font-weight:800; font-family: "Outfit", sans-serif; text-decoration:none; color:var(--text) }
.top-nav{ display:flex; gap:14px; flex-wrap:wrap }
.top-nav a{ color:var(--text); text-decoration:none; padding:6px 10px; border-radius:10px }
.top-nav a:hover{ background:var(--surface) }

@media (max-width:680px){
  .site-top{ flex-wrap:wrap; gap:10px }
  .top-nav{ width:100%; justify-content:center }
}


/* === Center the main page heading === */
.headline{
  text-align: center;
  margin: 28px auto 18px;      /* balanced spacing */
}

/* === Center the panel title "Water Calculator" === */
.panel__header{
  display: flex;               /* ensure flex context */
  justify-content: center;     /* center contents horizontally */
}

.panel__header .brand{
  display: flex;
  align-items: center;
  justify-content: center;     /* center icon + text as a group */
  gap: 12px;
  width: 100%;                 /* lets the group sit truly centered */
  text-align: center;
}

.panel__header .brand h2{
  margin: 0;
}

.panel__header .brand svg{
  flex: 0 0 auto;              /* keep the droplet from stretching */
}

/* ================================
   Calculator polish (no width changes)
   ================================ */

/* Softer card + tidier header line */
.panel{
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 14px 40px rgba(28, 53, 101, .08);
}
.panel__header{
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.panel__header .brand h2{
  letter-spacing: -.01em;
}

/* Section titles inside the panel */
.panel .left h3,
.panel .right h3{
  margin: 6px 0 10px;
  font-weight: 800;
}

/* Blue action bar: richer, but same size */
.right .choice{ margin: 0 0 14px; }
.right .choice__item{
  color: #fff;
  background: linear-gradient(180deg, #2f6bff 0%, #2253da 100%);
  border: 1px solid color-mix(in srgb, #2f6bff 65%, #163a9e 35%);
  box-shadow: 0 10px 22px rgba(35, 86, 216, .25), inset 0 1px 0 rgba(255,255,255,.15);
}
.right .choice__item .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25) inset, 0 0 10px rgba(255,255,255,.5);
  margin-right: 8px;
}
.right .choice__item .emoji{ opacity: .9 }

/* Field labels */
.field > span{
  display:block;
  margin:0 0 6px;
  font-size:.92rem;
  font-weight:700;
  color: var(--muted);
}

/* Inputs & selects – consistent height and focus, no width change */
input[type="number"],
select{
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type="number"]:hover,
select:hover{
  background: color-mix(in srgb, var(--surface) 85%, #ffffff 15%);
}
input[type="number"]:focus-visible,
select:focus-visible{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Compact unit picker without affecting widths */
.with-unit{ gap: 8px; }
.with-unit select{ min-width: 80px; }

/* Calculate button – same width, nicer surface */
.button-cell .cta{
  height: 46px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #3370ff 0%, #2456de 100%);
  box-shadow: 0 12px 26px rgba(40, 93, 222, .22);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.button-cell .cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(40, 93, 222, .28);
  filter: brightness(1.03);
}
.button-cell .cta:active{ transform: translateY(0); }

/* Quick profile tiles – crisper but same sizing */
.tile{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(20, 40, 80, .05);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.tile:hover{
  background: color-mix(in srgb, var(--surface) 80%, var(--brand) 6%);
  box-shadow: 0 4px 12px rgba(20, 40, 80, .08);
}
.tile.active{
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface) 90%);
  box-shadow: 0 6px 16px rgba(40, 93, 222, .18);
}

/* Error message more readable but unobtrusive */
.error{
  margin-top: 6px;
  color: #b83232;
  background: color-mix(in srgb, #b83232 10%, #ffffff 90%);
  border: 1px solid color-mix(in srgb, #b83232 18%, #ffffff 82%);
  padding: 8px 10px;
  border-radius: 10px;
}

/* Results spacing harmony */
.results{ margin-top: 14px; }
.results .lead{ margin-bottom: 6px; }
.results .sub{ opacity:.8 }

/* Light/dark subtle tweaks */
:root[data-theme="dark"] .panel{
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .right .choice__item{
  background: linear-gradient(180deg, #2456de 0%, #1b45bd 100%);
  border-color: color-mix(in srgb, #2456de 65%, #0f2c75 35%);
}

/* Hide the error block when it has no text */
#error,
.error { } /* keep your existing styles */
.error:empty { display: none; }


/* ============================================
   Light mode: white tiles + white right-side controls
   (Dark mode stays as-is)
============================================ */

/* Quick Profile tiles (left) */
:root:not([data-theme="dark"]) .tiles .tile{
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--line) 60%, var(--brand) 15%);
  box-shadow:
    0 4px 14px rgba(20, 40, 80, .10),
    inset 0 1px 0 rgba(255,255,255,.85);
}
:root:not([data-theme="dark"]) .tiles .tile:hover{
  background: #fff;
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line) 65%);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(35, 86, 216, .16);
}
:root:not([data-theme="dark"]) .tiles .tile.active{
  background: #fff;
  border-color: var(--brand);
  box-shadow:
    0 10px 26px rgba(45,114,255,.22),
    0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Right-side inputs/selects (match the tile look) */
:root:not([data-theme="dark"]) .panel .right input[type="number"],
:root:not([data-theme="dark"]) .panel .right select{
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--line) 60%, var(--brand) 15%);
  box-shadow:
    0 4px 14px rgba(20, 40, 80, .10),
    inset 0 1px 0 rgba(255,255,255,.85);
}
:root:not([data-theme="dark"]) .panel .right input[type="number"]:hover,
:root:not([data-theme="dark"]) .panel .right select:hover{
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line) 65%);
}
:root:not([data-theme="dark"]) .panel .right input[type="number"]:focus-visible,
:root:not([data-theme="dark"]) .panel .right select:focus-visible{
  outline: none;
  border-color: var(--brand);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent),
    0 8px 22px rgba(45,114,255,.20);
}

/* Keep unit picker sizing consistent */
.panel .right .with-unit{ gap: 8px; }
.panel .right .with-unit select{ min-width: 80px; }

/* ================================
   Dark mode: richer blue tiles
   (Quick Profile tiles only)
================================ */

:root[data-theme="dark"]{
  /* tune these 4 if you want the shade a bit lighter/darker */
  --d-tile-bg:      #1c2743; /* base tile fill */
  --d-tile-hover:   #223052; /* on hover */
  --d-tile-active:  #28385f; /* selected/active */
  --d-tile-border:  #2a3760; /* outline */
}

/* Base look for every tile in dark mode */
:root[data-theme="dark"] .tiles .tile{
  background: var(--d-tile-bg);
  border: 1.5px solid var(--d-tile-border);
  border-radius: 12px;
  color: #eaf0ff; /* keeps text crisp on the darker fill */
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .06s ease,
    box-shadow .15s ease;
}

/* Hover (slightly brighter and lifted) */
:root[data-theme="dark"] .tiles .tile:hover{
  background: var(--d-tile-hover);
  border-color: #364a78;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
}

/* Selected/active (a touch brighter + brand ring) */
:root[data-theme="dark"] .tiles .tile.active{
  background: var(--d-tile-active);
  border-color: var(--brand);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent),
    0 12px 26px rgba(0,0,0,.55);
  transform: translateY(-1px);
}

/* Keyboard focus ring */
:root[data-theme="dark"] .tiles .tile:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent),
    0 12px 26px rgba(0,0,0,.6);
}


/* ============================================
   Dark mode: match right-side controls to tile color
   (same look as Quick Profile tiles)
============================================ */

:root[data-theme="dark"]{
  /* using the same shades as the left tiles */
  --d-tile-bg:      #1c2743;  /* base */
  --d-tile-hover:   #223052;  /* hover */
  --d-tile-active:  #28385f;  /* focus/active */
  --d-tile-border:  #2a3760;  /* outline */
}

/* Inputs & selects look like tiles (no width/height changes) */
:root[data-theme="dark"] .panel .right input[type="number"],
:root[data-theme="dark"] .panel .right select{
  background: var(--d-tile-bg);
  border: 1.5px solid var(--d-tile-border);
  color: #eaf0ff;
  border-radius: 12px;
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .15s, border-color .15s, box-shadow .15s;
}

/* Placeholder color for the weight field */
:root[data-theme="dark"] .panel .right input[type="number"]::placeholder{
  color: #b9c3e6;
}

/* Hover */
:root[data-theme="dark"] .panel .right input[type="number"]:hover,
:root[data-theme="dark"] .panel .right select:hover{
  background: var(--d-tile-hover);
  border-color: #364a78;
}

/* Focus/keyboard */
:root[data-theme="dark"] .panel .right input[type="number"]:focus-visible,
:root[data-theme="dark"] .panel .right select:focus-visible{
  outline: none;
  background: var(--d-tile-active);
  border-color: var(--brand);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent),
    0 12px 26px rgba(0,0,0,.55);
}

/* Keep the "weight + unit" pair tight but consistent */
.panel .right .with-unit{ gap: 8px; }