/* Home page "Pedemy · last 30 days" card (owner 2026-11-13), the card of the app's Progress screen.
   Light by day, the navy of the Pedemy mark at night; gold is the Pedemy accent (deeper on white for contrast). */
.pd-hc{--hc-surface:#FFFFFF;--hc-tile:#F2F4F8;--hc-tile-on:#FFF7EA;--hc-line:#E1E6EF;--hc-ink:#14233A;--hc-ink2:#3E4D63;--hc-muted:#5E6B80;
  --hc-chip:#E7EBF2;--hc-ring:#FFFFFF;--hc-gold:#B9771F;--hc-wash:.22;--hc-bar:#D7DDE7;--hc-dot:#14233A;--hc-seg-on:#14233A;--hc-seg-on-ink:#FFFFFF;
  --hc-strip:#DCE2EC;flex:1 1 420px;min-width:0;max-width:600px;margin:0}
:root[data-theme="dark"] .pd-hc{--hc-surface:#172234;--hc-tile:#202D42;--hc-tile-on:#2A3850;--hc-line:#26344B;--hc-ink:#F3F5F9;--hc-ink2:#C9D2E0;
  --hc-muted:#97A6BC;--hc-chip:#2C3A51;--hc-ring:#172234;--hc-gold:#E9A23B;--hc-wash:.34;--hc-bar:#38455A;--hc-dot:#FFFFFF;--hc-seg-on:#5D6578;--hc-strip:#2A3851}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pd-hc{--hc-surface:#172234;--hc-tile:#202D42;--hc-tile-on:#2A3850;--hc-line:#26344B;
  --hc-ink:#F3F5F9;--hc-ink2:#C9D2E0;--hc-muted:#97A6BC;--hc-chip:#2C3A51;--hc-ring:#172234;--hc-gold:#E9A23B;--hc-wash:.34;--hc-bar:#38455A;--hc-dot:#FFFFFF;
  --hc-seg-on:#5D6578;--hc-strip:#2A3851}}
.pd-hc-card{background:var(--hc-surface);color:var(--hc-ink);border:1px solid var(--hc-line);border-radius:26px;padding:22px 22px 18px;box-shadow:0 14px 34px rgba(20,35,58,.08)}
.pd-hc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pd-hc-eyebrow{margin:0;font:500 13px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--hc-muted)}
.pd-hc-seg{display:inline-flex;background:var(--hc-chip);border-radius:99px;padding:4px}
.pd-hc-seg button{border:0;background:transparent;color:var(--hc-ink2);font:600 14px var(--pd-font-text,"Public Sans",sans-serif);padding:8px 18px;border-radius:99px;cursor:pointer;min-height:36px}
.pd-hc-seg button[aria-pressed="true"]{background:var(--hc-seg-on);color:var(--hc-seg-on-ink)}
.pd-hc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.pd-hc-tile{background:var(--hc-tile);border:2px solid transparent;border-radius:18px;padding:13px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.pd-hc-tile[aria-pressed="true"]{border-color:var(--hc-gold);background:var(--hc-tile-on)}
.pd-hc-tile:focus-visible{outline:2px solid var(--hc-gold);outline-offset:3px}
.pd-hc-tile strong{font:600 28px/1.05 var(--pd-font-display,Newsreader,Georgia,serif)}
.pd-hc-tile span{font-size:14px;color:var(--hc-ink2);margin:5px 0 8px;line-height:1.3}
.pd-hc-tile em{font:700 12.5px var(--pd-font-text,"Public Sans",sans-serif);font-style:normal;color:var(--hc-ink);background:var(--hc-chip);border-radius:99px;padding:3px 10px;white-space:nowrap}
.pd-hc-tile em.zero{color:var(--hc-muted)}
.pd-hc-chart{position:relative;height:210px;margin-top:16px}
.pd-hc-chart svg{display:block;width:100%;height:100%;overflow:visible;touch-action:pan-y}
.pd-hc-axis{display:flex;justify-content:space-between;font:500 12.5px "IBM Plex Mono",ui-monospace,monospace;color:var(--hc-muted);margin-top:8px}
.pd-hc-tip{position:absolute;pointer-events:none;background:var(--hc-ink);color:var(--hc-surface);font:600 12.5px/1.4 var(--pd-font-text,"Public Sans",sans-serif);padding:6px 9px;border-radius:9px;white-space:nowrap;opacity:0;transition:opacity .08s;transform:translate(-50%,-125%);z-index:2}
.pd-hc-tip.on{opacity:1}
.pd-hc-tip span{font-weight:500;opacity:.8}
.pd-hc-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;border-top:3px solid var(--hc-strip);border-bottom:1px solid var(--hc-strip)}
.pd-hc-strip div{padding:12px 14px 14px;border-left:1px solid var(--hc-strip);min-width:0}
.pd-hc-strip div:first-child{border-left:0;padding-left:4px}
.pd-hc-strip strong{display:block;font:500 30px/1.05 var(--pd-font-display,Newsreader,Georgia,serif);color:var(--pd-text,inherit)}
.pd-hc-strip span{display:block;font-size:13.5px;color:var(--pd-muted,#5E6B80);margin-top:4px;line-height:1.3}
@media (max-width:720px){
  .pd-hc{flex-basis:100%;max-width:none}
  .pd-hc-card{padding:16px 14px 14px;border-radius:22px}
  .pd-hc-eyebrow{font-size:12px}
  .pd-hc-seg button{font-size:13px;padding:7px 14px}
  .pd-hc-tiles{gap:7px;margin-top:14px}
  .pd-hc-tile{padding:10px 10px;border-radius:15px}
  .pd-hc-tile strong{font-size:22px}
  .pd-hc-tile span{font-size:12.5px;margin:3px 0 6px}
  .pd-hc-tile em{font-size:11px;padding:2px 7px}
  .pd-hc-chart{height:170px}
  .pd-hc-axis{font-size:12px}
  .pd-hc-strip div{padding:10px 8px 12px}.pd-hc-strip div:first-child{padding-left:2px}
  .pd-hc-strip strong{font-size:23px}.pd-hc-strip span{font-size:12px}
}
/* The card is taller than the old chart: keep the intro, text and buttons together and centred beside it
   (pedemy.css pushed the buttons to the bottom of the hero with margin-top:auto). */
.pd-home .pd-hero:has(.pd-hc) .pd-hero-copy{align-self:center}
.pd-home .pd-hero:has(.pd-hc) .pd-hero-copy .pd-actions{margin-top:6px}