/* HPDS Web Component Library — shared CSS for every Editorial Calm web page.
   Extracted 2026-08-13 from dashboard-pilot.html, where this was previously
   duplicated inline (the only Editorial Calm web page that existed at the
   time). A second Editorial Calm page should <link> this file, not copy
   these rules again — see /root/hpds/09-engineering-standards.md
   §Web component strategy for why this extraction was the top-priority
   piece of debt named in the HPDS documentation.

   Depends on theme.css being linked first (uses --e-* custom properties —
   see /root/hpds/tokens/hpds-tokens.json for the source of every value). */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Readex Pro','IBM Plex Sans Arabic',sans-serif;background:var(--e-bg);color:var(--e-ink);min-height:100vh}
[lang="en"] body,[lang="en"] *{font-family:'Readex Pro','IBM Plex Sans',sans-serif}
h1,h2,h3,.e-display{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--e-primary-ink);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

/* ── HPDS-SIDENAV-019: left nav rail (desktop) ───────────────────────── */
.app-shell{display:flex;min-height:100vh}
.rail{
  width:84px;flex-shrink:0;background:var(--e-surface);border-inline-end:1px solid var(--e-line);
  display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:6px;
  position:sticky;top:0;height:100vh;z-index:50;
}
.rail-logo{width:40px;height:40px;margin-bottom:18px}
.rail-item{
  width:56px;padding:10px 4px;border-radius:var(--e-radius-sm);display:flex;flex-direction:column;
  align-items:center;gap:4px;color:var(--e-ink-faint);transition:background var(--e-motion-fast) var(--e-ease),color var(--e-motion-fast) var(--e-ease);
}
.rail-item:hover{background:var(--e-bg-raised);color:var(--e-ink)}
.rail-item.active{background:var(--e-primary-soft);color:var(--e-primary-ink)}
.rail-item span{font-size:10.5px;font-weight:600}
.rail-spacer{flex:1}

.main-col{flex:1;min-width:0;display:flex;flex-direction:column}

/* ── Sticky glass top nav (HPDS-GLASSCARD-002 pattern applied to chrome) ── */
.topnav{
  position:sticky;top:0;z-index:40;height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;gap:16px;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--e-line-soft);
}
.topnav-greeting{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;font-weight:700;font-size:17px}
.topnav-sub{font-size:12.5px;color:var(--e-ink-soft);margin-top:2px}
.topnav-right{display:flex;align-items:center;gap:14px}
.icon-btn{
  width:40px;height:40px;border-radius:50%;border:none;background:var(--e-bg-raised);
  display:flex;align-items:center;justify-content:center;position:relative;color:var(--e-ink-soft);
  transition:background var(--e-motion-fast) var(--e-ease);
}
.icon-btn:hover{background:var(--e-primary-soft);color:var(--e-primary-ink)}
.icon-btn .dot{position:absolute;top:8px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--e-error-ink);border:2px solid #fff}
.lang-toggle{display:flex;background:var(--e-bg-raised);border-radius:999px;padding:3px}
.lang-toggle button{border:none;background:transparent;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;color:var(--e-ink-soft)}
.lang-toggle button.active{background:var(--e-primary-ink);color:#fff}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--e-secondary-soft);color:var(--e-secondary-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

/* ── Content shell + HPDS-SECTIONHEADER-021 ──────────────────────────── */
.content{padding:32px;max-width:1360px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:32px}

.section-title{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:space-between}
.section-link{font-size:13px;color:var(--e-primary-ink);font-weight:600}

/* ── HPDS-CARD-001 / HPDS-GLASSCARD-002 ──────────────────────────────── */
.card{background:var(--e-surface);border-radius:var(--e-radius);box-shadow:var(--e-shadow-sm);padding:24px}
.card-label{font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--e-ink-faint);margin-bottom:8px}

.glass-card{
  border-radius:var(--e-radius);padding:24px;border:1px solid rgba(255,255,255,0.6);box-shadow:var(--e-shadow-md);
  background:rgba(255,255,255,0.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

/* ── HPDS-RING-004: hero score ring + AI insight layout ──────────────── */
.hero-row{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:stretch}
.score-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-wrap{position:relative;width:168px;height:168px}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;font-weight:700;font-size:44px}
.score-label{font-weight:700;font-size:14px;margin-top:14px}
.score-sub{font-size:12px;color:var(--e-ink-soft);margin-top:2px}
.ai-badge{width:26px;height:26px;border-radius:50%;background:var(--e-ai-soft);display:flex;align-items:center;justify-content:center}
.ai-label-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ai-label{font-weight:700;font-size:13.5px;color:var(--e-ai-ink)}
.ai-body{font-size:14.5px;line-height:1.75}

/* ── HPDS-METRICCARD-005: Bento grid ──────────────────────────────────── */
.bento-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento-card{grid-column:span 2;display:flex;flex-direction:column;gap:10px}
.bento-head{display:flex;align-items:center;gap:10px}
.bento-icon{width:38px;height:38px;border-radius:var(--e-radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bento-title{font-weight:700;font-size:13.5px}
.bento-value{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;font-weight:700;font-size:26px;margin-top:2px}
.bento-unit{font-size:13px;color:var(--e-ink-soft);font-weight:400}
.bento-foot{font-size:12px;color:var(--e-ink-soft)}
.bar{height:7px;border-radius:4px;background:var(--e-bg-raised);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:4px;transition:width var(--e-motion-slow) var(--e-ease)}

/* ── HPDS-CHART-014 ───────────────────────────────────────────────────── */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart-card svg{width:100%;height:150px;overflow:visible}
.chart-bar{cursor:pointer;transition:opacity var(--e-motion-fast) var(--e-ease)}
.chart-bar:hover{opacity:0.72}
.chart-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--e-ink-faint)}
.chart-empty{font-size:13px;color:var(--e-ink-soft);text-align:center;padding:36px 0}

.chart-tooltip{
  position:fixed;pointer-events:none;background:var(--e-ink);color:#fff;font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:8px;opacity:0;transform:translate(-50%,-130%);transition:opacity 120ms;z-index:200;white-space:nowrap;
}
.chart-tooltip.show{opacity:1}

/* ── Lower row: HPDS timeline pattern + HPDS-NOTIFICATION-025 ─────────── */
.lower-row{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.timeline-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--e-line-soft)}
.timeline-item:last-child{border-bottom:none}
.timeline-dot{width:34px;height:34px;border-radius:50%;background:var(--e-primary-soft);color:var(--e-primary-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700}
.timeline-date{font-weight:700;font-size:13.5px}
.timeline-meta{font-size:12.5px;color:var(--e-ink-soft);margin-top:2px}

.notif-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--e-line-soft)}
.notif-item:last-child{border-bottom:none}
.notif-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}
.notif-title{font-weight:700;font-size:13.5px}
.notif-body{font-size:12.5px;color:var(--e-ink-soft);margin-top:3px;line-height:1.6}
.notif-empty{font-size:13px;color:var(--e-ink-soft);text-align:center;padding:24px 0}

/* ── HPDS-BUTTON-028 (quick-action variant — see docs, formal HPButton
   spec not built yet, this is the real precedent it will be built from) ── */
.quick-actions{display:flex;gap:16px}
.qa-btn{
  flex:1;background:var(--e-surface);border:none;border-radius:var(--e-radius-sm);box-shadow:var(--e-shadow-sm);
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform var(--e-motion-fast) var(--e-ease),box-shadow var(--e-motion-fast) var(--e-ease);
}
.qa-btn:hover{transform:translateY(-2px);box-shadow:var(--e-shadow-md)}
.qa-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.qa-label{font-weight:700;font-size:13px}

/* ── HPDS-TOAST-024 ───────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--e-ink);color:#fff;
  padding:12px 22px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;
  transition:all var(--e-motion-base) var(--e-ease);z-index:300;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── HPDS-MODAL-022 ───────────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(43,42,37,0.45);display:none;align-items:center;justify-content:center;padding:24px;z-index:400}
.modal-backdrop.show{display:flex}
.modal-card{background:var(--e-surface);border-radius:var(--e-radius-lg);padding:26px;width:100%;max-width:380px;box-shadow:var(--e-shadow-lg)}
.modal-title{font-weight:700;font-size:16px;margin-bottom:14px}
.modal-input{width:100%;background:var(--e-bg);border:1px solid var(--e-line);border-radius:var(--e-radius-sm);padding:13px;font-size:14px;color:var(--e-ink);margin-bottom:10px;font-family:inherit}
.modal-row{display:flex;gap:10px;margin-top:8px}
.modal-cancel{flex:1;padding:13px;border-radius:var(--e-radius-sm);border:1px solid var(--e-line);background:transparent;color:var(--e-ink-soft);font-weight:600}
.modal-submit{flex:1;padding:13px;border-radius:var(--e-radius-sm);border:none;background:var(--e-primary-ink);color:#fff;font-weight:700}

/* ── HPDS-SKELETON-032 ────────────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--e-bg-raised) 25%,var(--e-line-soft) 50%,var(--e-bg-raised) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--e-radius-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Responsive: laptop / tablet / mobile-fallback — see
   /root/hpds/05-responsive-rules.md for the verified breakpoint rules ──── */
@media (max-width:1180px){
  .hero-row{grid-template-columns:300px 1fr}
  .bento-card{grid-column:span 3}
}
@media (max-width:980px){
  .rail{width:64px}
  .rail-item span{display:none}
  .content{padding:24px}
  .hero-row{grid-template-columns:1fr}
  .score-card{padding:20px 0}
  .charts-row{grid-template-columns:1fr}
  .lower-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .rail{display:none}
  .topnav{padding:0 16px}
  .content{padding:16px;gap:24px}
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento-card{grid-column:span 2}
  .quick-actions{flex-direction:column}
}

/* ── HPDS-BUTTON-028 ───────────────────────────────────────────────────────
   Built for real during the Identity & Authentication migration (previously
   specified-not-built). .hpds-btn is the base; add exactly one variant class
   (-primary/-ghost/-danger) and one size class (-sm/-md, default md if
   omitted). Loading state is toggled via hpdsSetButtonLoading() in hpds.js,
   not a CSS class alone, since it needs to swap the label for a spinner. ── */
.hpds-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:none;border-radius:var(--e-radius-sm);font-family:inherit;font-weight:700;
  cursor:pointer;transition:opacity var(--e-motion-fast) var(--e-ease),transform var(--e-motion-fast) var(--e-ease);
}
.hpds-btn:disabled{opacity:0.45;cursor:not-allowed}
.hpds-btn-md{height:44px;padding:0 24px;font-size:15px}
.hpds-btn-sm{height:36px;padding:0 16px;font-size:13px}
.hpds-btn-primary{background:var(--e-primary-ink);color:#fff}
.hpds-btn-primary:hover:not(:disabled){opacity:0.92}
.hpds-btn-ghost{background:transparent;color:var(--e-ink-soft);border:1px solid var(--e-line)}
.hpds-btn-ghost:hover:not(:disabled){background:var(--e-bg-raised)}
.hpds-btn-danger{background:var(--e-error-ink);color:#fff}
.hpds-btn-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.35);border-top-color:#fff;animation:hpds-spin 0.7s linear infinite}
.hpds-btn-ghost .hpds-btn-spinner{border-color:var(--e-line);border-top-color:var(--e-ink-soft)}
@keyframes hpds-spin{to{transform:rotate(360deg)}}

/* ── HPDS-INPUT-030 ────────────────────────────────────────────────────────
   Built for real during the Identity & Authentication migration. Real
   states: default/focus/error/disabled — none existed as a system before
   this (every prior input was ad hoc per-page). ── */
.hpds-field{margin-bottom:16px}
.hpds-field-label{display:block;font-family:inherit;font-weight:700;font-size:13px;color:var(--e-ink);margin-bottom:6px}
.hpds-input-wrap{position:relative}
.hpds-input{
  width:100%;background:var(--e-bg);border:1px solid var(--e-line);border-radius:var(--e-radius-sm);
  padding:14px;color:var(--e-ink);font-family:inherit;font-size:15px;outline:none;
  transition:border-color var(--e-motion-fast) var(--e-ease);
}
.hpds-input::placeholder{color:var(--e-ink-faint)}
.hpds-input:focus{border-color:var(--e-primary-ink)}
.hpds-input:disabled{opacity:0.5;cursor:not-allowed}
.hpds-input-error{border-color:var(--e-error-ink)}
.hpds-field-error{color:var(--e-error-ink);font-family:inherit;font-size:12.5px;margin-top:6px}
.hpds-input-eye{
  position:absolute;top:0;bottom:0;width:30px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--e-ink-faint);padding:4px;
}
.hpds-input-eye[data-side="end"]{inset-inline-end:12px}
.hpds-input[data-has-eye="end"]{padding-inline-end:46px}

/* ── Auth surfaces (Login / Forgot Password / Reset Password) shared shell ─
   The ambient glass-card-on-dark-hero treatment used by all three real
   Identity surfaces migrated in this phase. ── */
.hpds-auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.hpds-auth-card{
  position:relative;z-index:2;background:rgba(255,255,255,0.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.6);border-radius:var(--e-radius-lg);box-shadow:var(--e-shadow-lg);
  padding:40px 32px;width:100%;max-width:420px;
}
.hpds-auth-logo{text-align:center;margin-bottom:24px}
.hpds-auth-logo img{width:56px;height:56px;margin-bottom:12px}
.hpds-auth-logo h1{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;font-size:24px;font-weight:700;color:var(--e-ink)}
.hpds-auth-logo p{color:var(--e-ink-soft);font-size:13px;margin-top:6px}
/* Fixed at the physical left regardless of language, matching mobile's
   LoginScreen — a consistent, findable spot rather than one that jumps
   sides when the language toggles. Physical `left`, deliberately not the
   logical inset-inline-start (which would flip to the right in RTL and
   contradict that intent — a real inconsistency found and fixed here). */
.hpds-auth-lang-toggle{position:fixed;top:16px;left:16px;z-index:999;display:flex;gap:4px;background:rgba(255,255,255,0.6);backdrop-filter:blur(10px);border-radius:999px;padding:3px}
.hpds-auth-lang-btn{padding:5px 14px;border:none;border-radius:999px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;background:none;color:var(--e-ink-soft)}
.hpds-auth-lang-btn.active{background:var(--e-primary-ink);color:#fff}
.hpds-auth-msg{margin-top:14px;padding:12px 14px;border-radius:var(--e-radius-sm);font-size:13px;text-align:center;display:none}
.hpds-auth-msg.show{display:block}
.hpds-auth-msg.success{background:var(--e-primary-soft);color:var(--e-primary-ink)}
.hpds-auth-msg.error{background:var(--e-error-soft);color:var(--e-error-ink)}
.hpds-auth-back{text-align:center;margin-top:20px}
.hpds-auth-back a{color:var(--e-ink-soft);font-size:13px}
.hpds-auth-back a:hover{color:var(--e-primary-ink)}
.hpds-auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--e-ink-faint);font-size:12px;min-height:1px}
.hpds-auth-divider span:not(.hpds-auth-divider-label){flex:1;height:1px;background:var(--e-line)}
@media(max-width:360px){.hpds-auth-card{padding:28px 20px}}

/* ── HPDS-AUTHTABS-033 — Login/Register tab switcher, built for real during
   the Identity & Authentication migration's Register slice (Phase 2). ── */
.hpds-auth-tabs{display:flex;background:var(--e-bg-raised);border-radius:var(--e-radius-sm);padding:3px;margin-bottom:20px}
.hpds-auth-tab{flex:1;padding:9px;border-radius:calc(var(--e-radius-sm) - 3px);border:none;background:transparent;color:var(--e-ink-soft);font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:all var(--e-motion-fast) var(--e-ease)}
.hpds-auth-tab.active{background:var(--e-surface);color:var(--e-ink);box-shadow:var(--e-shadow-sm)}
.hpds-auth-panel{display:none}
.hpds-auth-panel.active{display:block}

/* ── Register form: measurement grid, select, range, BMI readout, password
   strength meter. Reuses .hpds-field/.hpds-field-label/.hpds-input from
   HPDS-INPUT-030 wherever the control is a plain text input — these are
   only the register-specific additions (select/range/grid/meter). ── */
.hpds-reg-scroll{max-height:400px;overflow-y:auto;padding-inline-end:2px}
.hpds-reg-scroll::-webkit-scrollbar{width:3px}
.hpds-reg-scroll::-webkit-scrollbar-thumb{background:var(--e-line);border-radius:3px}
.hpds-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hpds-field-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hpds-select{width:100%;background:var(--e-bg);border:1px solid var(--e-line);border-radius:var(--e-radius-sm);padding:14px;color:var(--e-ink);font-family:inherit;font-size:15px;outline:none;transition:border-color var(--e-motion-fast) var(--e-ease)}
.hpds-select:focus{border-color:var(--e-primary-ink)}
.hpds-range{width:100%;padding:0;background:transparent;border:none;accent-color:var(--e-primary-ink)}
.hpds-range-val{text-align:center;font-size:13px;color:var(--e-primary-ink);margin-top:4px;font-weight:600}
.hpds-reg-divider{display:flex;align-items:center;gap:8px;margin:16px 0 10px;color:var(--e-ink-faint);font-size:12.5px;font-weight:700}
.hpds-reg-divider::before,.hpds-reg-divider::after{content:'';flex:1;height:1px;background:var(--e-line)}
.hpds-bmi-box{background:var(--e-primary-soft);border:1px solid var(--e-primary-ink);border-radius:var(--e-radius-sm);padding:12px;text-align:center;margin:10px 0;display:none}
.hpds-bmi-num{font-size:22px;font-weight:700;color:var(--e-primary-ink)}
.hpds-bmi-cat{font-size:12.5px;color:var(--e-ink-soft);margin-top:2px}
.hpds-hint-box{font-size:12px;color:var(--e-ink-soft);line-height:1.55;margin-top:8px;padding:10px 12px;background:var(--e-bg-raised);border-radius:var(--e-radius-sm)}
.hpds-pwd-track{height:5px;border-radius:4px;background:var(--e-bg-raised);margin:-6px 0 4px;overflow:hidden}
.hpds-pwd-bar{height:100%;width:0%;border-radius:4px;transition:width var(--e-motion-fast) var(--e-ease),background var(--e-motion-fast) var(--e-ease)}
.hpds-pwd-hint{font-size:12px;margin-bottom:10px;min-height:16px}
.hpds-trial-pill{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:16px;font-size:13px;color:var(--e-ink-soft)}
.hpds-trial-pill span{background:var(--e-primary-soft);color:var(--e-primary-ink);padding:2px 10px;border-radius:10px;font-weight:700}

/* ── HPDS-LOADINGSTATE-034 / HPDS-ERRORSTATE-035 / HPDS-EMPTYSTATE-033 ──────
   Built for real during the Home Dashboard migration — previously each
   loading/error/empty case was hand-rolled per page (or, for error/empty,
   not styled as a real state at all). Mirrors the mobile HPLoadingState/
   HPErrorState/HPEmptyState components exactly (same spacing scale, same
   *Ink token usage) so the two platforms share one visual language for
   these states, not just one written spec. ── */
.hpds-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:12px}
.hpds-state-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--e-line);border-top-color:var(--e-primary-ink);animation:hpds-spin 0.8s linear infinite}
.hpds-state-error-msg{color:var(--e-error-ink);font-size:14px;font-family:inherit}
.hpds-state-empty-icon{font-size:28px;opacity:0.6}
.hpds-state-empty-msg{color:var(--e-ink-soft);font-size:14px;font-family:inherit;max-width:320px}

/* ── HPDS-BANNER-039 — dismissible in-app promo banner, ported from mobile's
   real AppBanner component (BriefScreen.js) during the Home Dashboard
   migration's platform-parity pass. Per-device dismiss via localStorage,
   mirroring mobile's expo-secure-store per-device dismiss — same real
   mechanism, platform-appropriate storage. ── */
.hpds-banner-img-wrap{position:relative;border-radius:var(--e-radius);overflow:hidden;margin-bottom:20px;cursor:pointer;box-shadow:var(--e-shadow-sm)}
.hpds-banner-img-wrap img{width:100%;aspect-ratio:1200/675;object-fit:cover;display:block}
.hpds-banner-text{position:relative;background:var(--e-primary-soft);color:var(--e-primary-ink);border-radius:var(--e-radius);padding:14px 40px;margin-bottom:20px;cursor:pointer;font-size:13.5px;font-weight:600}
.hpds-banner-close{position:absolute;top:8px;inset-inline-end:8px;z-index:1;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,0.35);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hpds-banner-text .hpds-banner-close{background:rgba(0,0,0,0.08);color:var(--e-primary-ink)}

/* ── HPDS-NAVCARD-040 — generic "navigate to X" row (icon + title/sub +
   chevron). Real, pre-existing pattern independently hand-rolled 3x on
   mobile (BriefScreen's chatbot card, DashboardScreen's plan/menu rows) —
   given a shared web-side class here rather than a 4th one-off. ── */
.hpds-nav-card{display:flex;align-items:center;gap:12px;background:var(--e-surface);border-radius:var(--e-radius);padding:16px;margin-bottom:16px;box-shadow:var(--e-shadow-sm);text-decoration:none;color:inherit;transition:transform var(--e-motion-fast) var(--e-ease)}
.hpds-nav-card:hover{transform:translateY(-1px)}
.hpds-nav-card-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hpds-nav-card-text{flex:1;min-width:0}
.hpds-nav-card-title{font-weight:700;font-size:15px;color:var(--e-ink)}
.hpds-nav-card-sub{font-size:12px;color:var(--e-ink-soft);margin-top:2px}
.hpds-nav-card-chevron{flex-shrink:0;color:var(--e-ink-faint)}
[dir="rtl"] .hpds-nav-card-chevron{transform:scaleX(-1)}

/* ── AI Coach chat components — built during the AI Coach domain migration.
   Mirrors mobile's HPChatBubble/HPChatInputBar/HPSuggestionChip/HPAIPlanCard
   exactly (same spacing scale, same *Ink token usage), first real chat-
   specific HPDS pattern on either platform. ── */
.hpds-chat-row{display:flex;margin-bottom:10px}
.hpds-chat-row-user{justify-content:flex-end}
.hpds-chat-bubble{max-width:82%;border-radius:var(--e-radius);padding:12px;font-size:14px;line-height:1.5;font-family:inherit}
.hpds-chat-bubble-bot{background:var(--e-surface);border:1px solid var(--e-line);color:var(--e-ink)}
.hpds-chat-bubble-user{background:var(--e-primary-ink);color:#fff}
.hpds-chat-bubble-saved{border-color:var(--e-secondary-ink);background:var(--e-secondary-soft)}
.hpds-chat-bubble-typing{display:flex;align-items:center;gap:4px;padding:14px 16px}
.hpds-chat-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--e-ink-faint);animation:hpds-chat-typing 1.1s infinite}
.hpds-chat-typing-dot:nth-child(2){animation-delay:0.15s}
.hpds-chat-typing-dot:nth-child(3){animation-delay:0.3s}
@keyframes hpds-chat-typing{0%,60%,100%{opacity:0.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.hpds-suggestion-chip{padding:8px 14px;border-radius:var(--e-radius-pill);background:var(--e-primary-soft);border:1px solid var(--e-primary-ink);color:var(--e-primary-ink);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;margin-inline-end:8px;margin-bottom:8px;transition:opacity var(--e-motion-fast) var(--e-ease)}
.hpds-suggestion-chip:disabled{opacity:0.5;cursor:not-allowed}
.hpds-chips-row{display:flex;flex-wrap:wrap;padding:2px 0 8px}

.hpds-chat-input-row{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--e-line)}
.hpds-chat-input{flex:1;background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius-sm);padding:12px;color:var(--e-ink);font-family:inherit;font-size:14px;max-height:100px;resize:none;outline:none}
.hpds-chat-input:focus{border-color:var(--e-primary-ink)}
.hpds-chat-send-btn{width:42px;height:42px;border-radius:50%;background:var(--e-primary-ink);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.hpds-chat-send-btn:disabled{opacity:0.45;cursor:not-allowed}
[dir="rtl"] .hpds-chat-send-icon{transform:none}
[dir="ltr"] .hpds-chat-send-icon{transform:scaleX(-1)}

.hpds-plan-card{background:var(--e-surface);border:1px solid var(--e-secondary-ink);border-radius:var(--e-radius-sm);padding:12px;margin-bottom:10px}
.hpds-plan-card-head{display:flex;align-items:flex-start;gap:8px}
.hpds-plan-card-title{font-weight:700;font-size:14px;color:var(--e-ink)}
.hpds-plan-card-badge{font-size:12px;color:var(--e-secondary-ink);margin-top:2px}
.hpds-plan-card-delete{background:none;border:none;color:var(--e-error-ink);font-size:15px;cursor:pointer;flex-shrink:0}
.hpds-plan-day{margin-top:6px}
.hpds-plan-day-name{font-weight:700;font-size:13px;color:var(--e-primary-ink)}
.hpds-plan-line{font-size:13px;color:var(--e-ink-soft);padding:1px 0}

.hpds-chat-disclaimer{font-size:10.5px;color:var(--e-ink-faint);text-align:center;padding:0 20px 6px}