/* ==========================================================================
   polish.css — cosmetic pass 2026-10-23 (loaded LAST on every page)
   Pass 1: self-hosted Inter, numerals, contrast, 40px controls, focus states
   Pass 2: softer dark borders, radius/padding, empty + loading states,
           bottom-nav polish, hero sizing, reduced motion, chart gridlines
   Purely presentational. No logic, wording or data changes.
   ========================================================================== */

/* ---------- Pass 1: Inter, self-hosted (SIL OFL, see /fonts/Inter-OFL-LICENSE.txt) ---------- */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --pp-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pp-focus:#4dedaa;
  --pp-radius-control:10px;
  --pp-radius-card:14px;
  --pp-radius-pill:999px;
}
html[data-theme="light"],body:not(#app-shell){--pp-focus:#0a7a57;}
html,body{font-family:var(--pp-font);}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-optical-sizing:auto;}
button,input,select,textarea{font-family:inherit;}

/* Tabular numerals on stats, tables and money */
.stat-card .value,.stat-card .value *,table,td,th,.value,.price,.price-row,.plan-price,
input[type="number"],[class*="cost"],[class*="forecast"],[class*="price"],.syringe-readout,.result-value,.calc-result,
.home-hero,.mobile-today-count,.pill{font-variant-numeric:tabular-nums;}

/* Headings 18–28px: calmer tracking (hero keeps its tighter tracking) */
.home-hero h1,.calculator-vnext-hero h2,.section-title,.modal-head h2{letter-spacing:-.02em!important;}

/* ---------- Pass 1: contrast ---------- */
/* Light theme primary button fill (white on #0f9d6e was 3.46:1 -> 5.34:1) */
html[data-theme="light"] #app-shell .btn:not(.secondary):not(.danger):not(.ghost):not(.icon-btn),
html[data-theme="light"] #app-shell .age-gate-actions button#age-gate-yes,
body:not(#app-shell) .btn:not(.secondary):not(.ghost):not(.btn-secondary),
body:not(#app-shell) .topbar-links a.cta,
body:not(#app-shell) button[type="submit"]{background-color:#0a7a57;}
html[data-theme="light"]{--placeholder:#6b8a7c;}
body:not(#app-shell) ::placeholder{color:#6b8a7c!important;-webkit-text-fill-color:#6b8a7c;opacity:1;}
/* Dark theme pills (were 2.14:1 and 1.82:1) */
html:not([data-theme="light"]) .pill.within{color:#5ec8e6;background:rgba(94,200,230,.14);}
html:not([data-theme="light"]) .pill.average{color:#b794f6;background:rgba(183,148,246,.15);}

/* ---------- Pass 1: unified 40px buttons with states ---------- */
#app-shell .btn:not(.small):not(.icon-btn),
body:not(#app-shell) .btn:not(.small){min-height:40px;padding-left:16px;padding-right:16px;font-size:14px;font-weight:600;border-radius:var(--pp-radius-control);}
#app-shell .btn.small{min-height:32px;font-size:13px;font-weight:600;}
.btn,button,.mode-btn,.topbar-links a.cta{transition:background-color .15s ease,filter .15s ease,transform .08s ease,box-shadow .15s ease;}
.btn:hover:not(:disabled),.topbar-links a.cta:hover{filter:brightness(1.06);}
.btn:active:not(:disabled),.mode-btn:active,.topbar-links a.cta:active{transform:translateY(1px);filter:brightness(.95);}
:where(a,button,input,select,textarea,summary,[tabindex]):focus{outline:none;}
:where(a,button,summary,[tabindex]):focus-visible,
.btn:focus-visible,.mode-btn:focus-visible{outline:2px solid var(--pp-focus)!important;outline-offset:2px!important;box-shadow:none;}
:where(input,select,textarea):focus-visible{outline:2px solid var(--pp-focus)!important;outline-offset:1px!important;}

/* ---------- Pass 1: unified 40px inputs ---------- */
#app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
#app-shell select,
body:not(#app-shell) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
body:not(#app-shell) select{min-height:40px;border-radius:var(--pp-radius-control);}
@media (max-width:760px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,textarea{font-size:16px!important;} /* prevents iOS Safari zoom-on-focus */
}

/* ---------- Pass 2: softer dark-mode borders ---------- */
html:not([data-theme="light"]) body#app-shell{--border:rgba(132,176,155,.24);}
html:not([data-theme="light"]) #app-shell :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){border-color:rgba(132,176,155,.42);}

/* ---------- Pass 2: standardized radius + card padding ---------- */
body#app-shell .card,body#app-shell .today-panel,body#app-shell .modal-card{border-radius:var(--pp-radius-card)!important;}
body#app-shell .pill,body#app-shell .hero-kicker{border-radius:var(--pp-radius-pill)!important;}
body#app-shell .card:not(.stat-card){padding:16px;}
@media (min-width:761px){ body#app-shell .card:not(.stat-card){padding:20px;} }
body:not(#app-shell) .card{border-radius:var(--pp-radius-card);}

/* ---------- Pass 2: icons (inline SVG, Lucide ISC) ---------- */
.pp-icon{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.16em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pp-icon-lead{margin-right:.4em;}
.icon-btn .pp-icon,.toast-close .pp-icon,[data-close-modal] .pp-icon{width:16px;height:16px;vertical-align:middle;}
.mode-btn .pp-icon{width:15px;height:15px;}
.hero-point span .pp-icon{width:16px;height:16px;vertical-align:-3px;}

/* ---------- Pass 2: empty states (icon + one line + action) ---------- */
#app-shell .mobile-cycle-empty,#app-shell .empty:not(td){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.45;padding:20px 16px;}
#app-shell .mobile-cycle-empty::before,#app-shell .empty:not(td)::before{content:"";width:28px;height:28px;border-radius:50%;flex:0 0 auto;opacity:.85;
  background:var(--primary-dim) center/16px 16px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383a897' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");}
#app-shell .empty.pp-loading::before{display:none;}
#app-shell .pp-empty-action{margin-top:4px;}
/* Dashboard widgets that render nothing for a new account: show a calm placeholder instead of a blank box */
#app-shell section.today-panel[data-dashboard-widget-label]:has(> div:only-child:empty){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;color:var(--text-dim);text-align:center;}
#app-shell section.today-panel[data-dashboard-widget-label]:has(> div:only-child:empty)::before{content:attr(data-dashboard-widget-label);font-size:13px;font-weight:600;color:var(--text);}
#app-shell section.today-panel[data-dashboard-widget-label]:has(> div:only-child:empty)::after{content:"Nothing to show yet";font-size:12px;}

/* ---------- Pass 2: loading skeletons + busy buttons ---------- */
@keyframes pp-shimmer{0%{background-position:-240px 0}100%{background-position:240px 0}}
@keyframes pp-spin{to{transform:rotate(360deg)}}
#app-shell .empty.pp-loading{position:relative;min-height:72px;color:transparent!important;border-radius:var(--pp-radius-control);
  background:linear-gradient(90deg,var(--surface-1) 0,var(--track) 50%,var(--surface-1) 100%) 0 0/480px 100%;animation:pp-shimmer 1.2s linear infinite;}
.btn[aria-busy="true"],button[aria-busy="true"]{position:relative;cursor:progress!important;opacity:.85;}
.btn[aria-busy="true"]::after,button[aria-busy="true"]::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:pp-spin .7s linear infinite;}

/* ---------- Pass 2: mobile bottom nav polish (nav already exists) ---------- */
@media (max-width:760px){
  .mobile-nav-vnext>button{height:56px!important;gap:4px!important;}
  .mobile-nav-vnext .mobile-nav-icon{display:inline-flex;align-items:center;justify-content:center;height:24px;font-size:0!important;}
  .mobile-nav-vnext .mobile-nav-icon .pp-icon{width:22px;height:22px;stroke-width:1.9;}
  .mobile-nav-vnext .mobile-nav-add{box-shadow:0 10px 24px rgba(10,122,87,.32)!important;}
  .mobile-nav-vnext .mobile-nav-add span{display:flex!important;align-items:center;justify-content:center;height:100%;line-height:1!important;}
  .mobile-nav-vnext .mobile-nav-add .pp-icon{width:28px;height:28px;stroke-width:2.4;}
  .mobile-nav-vnext{min-height:calc(70px + env(safe-area-inset-bottom))!important;}
}

/* ---------- Pass 2: landing hero sizing (one size per breakpoint) ---------- */
@media (max-width:900px){ .hero-copy h2{font-size:clamp(36px,7vw,48px)!important;line-height:1.02!important;} }
@media (max-width:700px){ .hero-copy h2{font-size:40px!important;line-height:1.04!important;letter-spacing:-.035em!important;} }
@media (max-width:380px){ .hero-copy h2{font-size:36px!important;} }
.hero-copy>p{max-width:62ch;}

/* ---------- Pass 2: lighter chart gridlines ---------- */
:root{--chart-grid:rgba(132,176,155,.14);}
html[data-theme="light"]{--chart-grid:rgba(15,157,110,.08);}

/* ---------- Pass 2: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ---------- Pass 2: dark-theme legibility on the mobile shell (header + greeting were light-on-light / dark-on-dark) ---------- */
@media (max-width:760px){
  html:not([data-theme="light"]) #app-shell > header{background:var(--panel-translucent)!important;border-bottom-color:var(--border)!important;}
  html:not([data-theme="light"]) #app-shell .home-hero h1{color:var(--text)!important;}
  html:not([data-theme="light"]) #app-shell .home-hero p{color:var(--text-dim)!important;}
  html:not([data-theme="light"]) #app-shell h1#mobile-home-greeting{color:var(--text)!important;}
  html:not([data-theme="light"]) #app-shell p#mobile-home-date{color:var(--text-dim)!important;}
}

/* ---------- Pass 2: desktop card borders ----------
   app-vnext.css sets `#app-shell .card{border-color:var(--pp-line)!important}` globally, but --pp-line is
   only defined inside its ≤700px block, so on desktop borders fell back to currentColor (black / white).
   Give desktop the theme border token instead. */
@media (min-width:701px){ #app-shell{--pp-line:var(--border);} }

/* ---- 2026-10-23 06:30 EDT: secondary button contrast (WCAG AA 4.5:1) ----
   .btn.secondary = translucent mint fill (--primary-dim) + --primary text. On light surfaces
   (light theme, and the white mobile cards that app-vnext.css also uses in dark theme at <=700px)
   that measured 1.35:1 (dark) / 2.93:1 (light). Fix: deep-green text + slightly stronger tonal fill
   and a hairline border so it stays a quiet secondary next to the solid "+ Log Dose". */
html[data-theme="light"] .btn.secondary{color:#065a41;background:rgba(15,157,110,.12);box-shadow:inset 0 0 0 1px rgba(10,122,87,.28);}
html[data-theme="light"] .btn.secondary:hover{color:#044a35;background:rgba(15,157,110,.18);filter:none;}
@media (max-width:700px){
  html:not([data-theme="light"]) #app-shell .btn.secondary{color:#065a41;background:#e2f5ec;box-shadow:inset 0 0 0 1px rgba(10,122,87,.28);}
  html:not([data-theme="light"]) #app-shell .btn.secondary:hover{color:#044a35;background:#d4efe2;filter:none;}
  /* secondary buttons that sit on DARK surfaces in dark theme keep the original tonal look (already >=5.4:1) */
  html:not([data-theme="light"]) #app-shell :is(.modal-card,.price-card,.admin-monitor-card,.calendar-view-toggle,.protocol-import-review,header) .btn.secondary{color:var(--primary);background:var(--primary-dim);box-shadow:inset 0 0 0 1px rgba(66,227,160,.13);}
}

/* ---- 2026-10-23 07:10 EDT: public-page secondary buttons (regression fix) ----
   Cause: the Pass-1 public fill rule `body:not(#app-shell) .btn:not(.secondary):not(.ghost){background-color:#0a7a57}`
   (specificity 1-1-1 via :not(#app-shell)) also matched protocol-library.html's `a.btn.btn-secondary`
   ("Related Calculators"), whose page rule `.btn-secondary{background:#eaf4f0;color:#145e49}` (0-1-0) lost the
   background but kept its dark text: #145e49 on #0a7a57 = 1.5:1. Fixed above by excluding .btn-secondary, and
   public secondaries that were unreadable get the app's tonal secondary style
   (pricing/about .btn.secondary already pass at 14.6:1 with their own page style and are left alone): */
body:not(#app-shell) .btn.btn-secondary,
body:not(#app-shell) #add-row.btn.secondary{background:#e2f5ec;color:#065a41;box-shadow:inset 0 0 0 1px rgba(10,122,87,.28);}
body:not(#app-shell) .btn.btn-secondary:hover,
body:not(#app-shell) #add-row.btn.secondary:hover{background:#d4efe2;color:#044a35;filter:none;}
/* Pre-existing public solid-green buttons still at white-on-#0f9d6e/#159a70 (3.5:1), same fill as other primaries: */
body:not(#app-shell) .links a.cta{background:#0a7a57;color:#fff;}
body:not(#app-shell)[data-calculator] .lead-capture-form button{background:#0a7a57 !important;color:#fff !important;}