/*
Theme Name:   Due Radar
Theme URI:    https://dueradar.com
Author:       WWWebTek
Author URI:   https://wwwebtek.com
Description:  Marketing site and front-end design system for Due Radar, styled in the white/navy/blue register of leading K-12 SIS brands. Classic theme with theme.json tokens. App screens (dashboard, setup wizard, student view) are rendered by the Due Radar plugin and pick up their styling from this stylesheet — see the project doc, Section 4 and Section 10 (design workstream).
Version:      0.2.4
Requires at least: 6.4
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  due-radar-theme
*/

/* =====================================================================
   0. Self-hosted fonts (no third-party requests — Section 11)
   ===================================================================== */
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/nunito-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/nunito-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/nunito-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* =====================================================================
   1. Tokens (mirrored in theme.json for the editor)
   ===================================================================== */
:root{
  /* Brand: white + navy + one blue, in the register of the leading K-12 SIS sites */
  --paper:#FFFFFF; --paper-2:#F2F3F1; --paper-3:#E9EBE8;
  --ink:#00345B; --text:#2B3445; --ink-70:#5A6478; --ink-40:#8E97A8;
  --blue:#3778B5; --blue-dark:#2C639A; --blue-light:#E4EEF8;
  --rule:#DCE3EA; --rule-2:#ECF0F4;
  /* Functional status colors only (urgency bands, done) — not brand accents */
  --margin:#D64545; --hl:#FFE45C; --hl-2:#FFF7CC; --done:#2F855A; --quiz:#7C5CBF; --white:#fff;
  --display:"Nunito",system-ui,sans-serif;
  --body:"Nunito",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --radius:16px; --radius-sm:8px;
  --shadow:0 12px 32px rgba(0,52,91,.10);
  --wrap:1120px;
}

/* =====================================================================
   2. Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;letter-spacing:-.01em;color:var(--ink);font-weight:800}
p{margin:0 0 1em}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em}
.hl{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:100}
.skip-link:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Ruled-paper texture — the brand's signature background */
.ruled{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#F6F8F9 100%)}

/* Buttons */
.btn{display:inline-block;background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:var(--radius-sm);padding:12px 22px;font-weight:700;text-decoration:none;font-size:.95rem;line-height:1.2;transition:background .15s,border-color .15s}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--paper-2);border-color:var(--ink)}
.btn.hl{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.hl:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.w{width:100%;text-align:center}
.btn.oauth{background:#fff;color:var(--ink);border-color:var(--rule);display:flex;gap:10px;justify-content:center;align-items:center}

/* =====================================================================
   3. Site header / footer
   ===================================================================== */
.site-header .nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:16px}
.brand{font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img,.brand svg{width:30px;height:30px}
.brand .light-part{font-weight:400;color:var(--blue)}
.nav .links{display:flex;gap:26px;align-items:center;font-size:.95rem;font-weight:700;list-style:none;margin:0;padding:0}
.nav .links a{text-decoration:none;color:var(--text)}
.nav .links a:hover{color:var(--ink)}
.nav-toggle{display:none;background:transparent;border:1.5px solid var(--rule);border-radius:8px;padding:8px 10px}
.site-footer{background:var(--paper-2);margin-top:32px}
.site-footer .foot{padding:40px 0 20px;color:var(--ink-70);font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.site-footer .foot ul{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.site-footer .foot a{text-decoration:none;color:var(--ink-70);font-weight:600}
.site-footer .foot a:hover{color:var(--ink)}
.site-footer .disclaimer{max-width:var(--wrap);margin:0 auto;padding:0 24px 28px;font-size:.78rem;color:var(--ink-40)}

/* =====================================================================
   4. Marketing sections
   ===================================================================== */
.hero{padding:88px 0 72px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;position:relative}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.hero p.lead{font-size:1.2rem;color:var(--ink-70);max-width:44ch;margin:22px 0 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .fine{font-size:.85rem;color:var(--ink-40);margin-top:14px}

/* Digest card — the signature component (also reused by the plugin's email + dashboard) */
.digest{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;font-size:.92rem}
.digest .hd{padding:14px 18px;border-bottom:1px dashed var(--rule);display:flex;justify-content:space-between;align-items:baseline}
.digest .hd b{font-family:var(--display);font-size:1.05rem;color:var(--ink);font-weight:800}
.digest .hd span{color:var(--ink-40)}
.digest .day{display:grid;grid-template-columns:64px 1fr;border-bottom:1px solid var(--rule-2)}
.digest .day:last-of-type{border-bottom:0}
.digest .dl{padding:12px 0 12px 18px;font-family:var(--mono);font-size:.75rem;color:var(--ink-40);text-transform:uppercase;letter-spacing:.06em}
.digest .items{padding:10px 16px 10px 0}
.digest .it{display:flex;gap:10px;align-items:flex-start;padding:4px 0}
.digest .it .cb{width:16px;height:16px;border:2px solid var(--blue);border-radius:4px;flex:none;margin-top:3px;cursor:pointer}
.digest .it .cb.on{background:var(--done);border-color:var(--done);position:relative}
.digest .it .cb.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.digest .it.done span{color:var(--ink-40);text-decoration:line-through}
.chip{display:inline-block;font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid currentColor;margin-left:6px;vertical-align:middle;font-style:normal}
.chip.test{color:var(--margin)}.chip.quiz{color:var(--quiz)}.chip.hw{color:var(--ink-40)}
.heavy{background:var(--hl-2);border-left:4px solid var(--hl)}
.heavy .dl{color:var(--ink)}
.digest .nudge{margin:10px 18px 14px;background:var(--ink);color:#fff;border-radius:var(--radius-sm);padding:10px 12px;font-size:.85rem}
.digest .nudge b{color:var(--hl)}

/* Urgency color bands (Section 8) — left-border + dot, email-safe */
.due-neutral{border-left-color:var(--ink-40)}
.due-soon{border-left-color:var(--hl)}
.due-urgent{border-left-color:var(--margin)}
.due-overdue{border-left-color:var(--margin);background:#FCE8E8}

.sec{padding:88px 0}
.sec h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;max-width:22ch}
.sec .sub{color:var(--ink-70);max-width:56ch;margin:16px 0 40px;font-size:1.1rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--paper-2);border:0;border-radius:var(--radius);padding:28px 28px 32px}
.step .k{font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.step h3{font-size:1.35rem;margin:12px 0 10px}
.step p{margin:0;color:var(--ink-70);font-size:.95rem}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px}
.feat div{padding:22px 0;border-top:1px solid var(--rule)}
.feat h3{font-size:1.15rem;margin-bottom:8px}
.feat p{margin:0;color:var(--ink-70);font-size:.95rem}

/* Photo band — slot for the licensed family photo */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 8px}
.stats div{padding:26px 28px;background:var(--paper-2);border-radius:var(--radius)}
.stats b{display:block;font-family:var(--display);font-size:2.6rem;font-weight:800;color:var(--blue);line-height:1}
.stats span{display:block;margin-top:8px;color:var(--ink-70);font-size:.95rem}

.band{padding:0 0 88px}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.band figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.band h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.band p{color:var(--ink-70);font-size:1.05rem}
.band .quote{font-family:var(--display);font-size:1.3rem;line-height:1.35;color:var(--ink);font-weight:700;border-left:4px solid var(--blue);padding-left:18px;margin:22px 0 6px}
.band .who{font-size:.8rem;font-weight:700;color:var(--ink-40);letter-spacing:.08em;text-transform:uppercase}

.works{background:var(--paper-2)}
.plat{display:flex;gap:12px;flex-wrap:wrap}
.plat span{background:#fff;border:1px solid var(--rule);border-radius:999px;padding:12px 20px;font-family:var(--display);font-weight:800;color:var(--ink)}
.plat span.soon{opacity:.55;font-weight:600}
.works .note{margin:28px 0 0;font-size:.85rem;color:var(--ink-40)}

.price{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px}
.card{background:var(--paper-2);border:0;border-radius:var(--radius);padding:30px}
.card .big{font-family:var(--display);font-size:3.2rem;font-weight:800;line-height:1;color:var(--ink)}
.card .big small{font-family:var(--body);font-size:1rem;font-weight:500;color:var(--ink-40)}
.card ul{padding-left:18px;margin:14px 0 20px;color:var(--ink-70)}
.card.pop{background:#fff;border:2px solid var(--blue);position:relative}
.card.pop::before{content:attr(data-badge);position:absolute;top:-13px;left:22px;background:var(--blue);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.price-note{margin-top:18px;color:var(--ink-40);font-size:.85rem}

.faq{max-width:720px}
.faq details{border-top:1px solid var(--rule);padding:14px 0}
.faq summary{font-weight:700;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--ink-70)}

/* =====================================================================
   5. Generic content pages (privacy, terms, schools, support)
   ===================================================================== */
.page-content{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.page-content h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:.5em}
.page-content h2{font-size:1.5rem;margin:1.6em 0 .5em}
.page-content h3{font-size:1.15rem;margin:1.4em 0 .4em}
.page-content p,.page-content li{color:var(--ink-70);font-size:1.02rem}
.page-content a{color:var(--blue)}
.page-content .updated{font-size:.8rem;font-weight:700;color:var(--ink-40);letter-spacing:.06em;text-transform:uppercase}
.page-content blockquote{border-left:4px solid var(--blue);margin:1em 0;padding:4px 0 4px 16px;font-family:var(--display);font-size:1.15rem}

/* =====================================================================
   6. App shell — used by plugin-rendered screens (dashboard, wizard, student)
   ===================================================================== */
.app{min-height:100vh;background:var(--paper-2)}
.topbar{background:#fff;border-bottom:1px solid var(--rule);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}
.topbar .who{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--ink-70)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-light);border:2px solid var(--blue);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:.8rem}
.dash{max-width:var(--wrap);margin:0 auto;padding:24px;display:grid;grid-template-columns:1fr 320px;gap:24px}
.kids{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.kids button{background:#fff;border:1px solid var(--rule);border-radius:999px;padding:8px 14px;font-size:.9rem;display:flex;gap:8px;align-items:center}
.kids button[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--done);display:inline-block}
.dot.warn{background:var(--margin)}
.panel{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.panel .ph{padding:16px 20px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center}
.panel .ph h2{font-size:1.25rem}
.panel .ph .tabs{display:flex;gap:4px}
.panel .ph .tabs button{background:transparent;border:0;padding:6px 10px;border-radius:6px;font-size:.85rem;color:var(--ink-70)}
.panel .ph .tabs button[aria-pressed=true]{background:var(--paper-2);color:var(--ink);font-weight:600}
.dayrow{display:grid;grid-template-columns:96px 1fr;border-bottom:1px solid var(--rule-2)}
.dayrow:last-child{border-bottom:0}
.dayrow .d{padding:14px 20px;font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-40);line-height:1.6}
.dayrow .d b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--ink);letter-spacing:0}
.task{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start;padding:12px 20px 12px 0;border-bottom:1px solid var(--rule-2);border-left:4px solid transparent}
.task:last-child{border-bottom:0}
.task .cb{width:20px;height:20px;border:2px solid var(--blue);border-radius:5px;margin-top:2px;background:#fff;cursor:pointer}
.task .cb.on{background:var(--done);border-color:var(--done);position:relative}
.task .cb.on::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.task .t{font-weight:600}
.task.done .t{color:var(--ink-40);text-decoration:line-through;font-weight:500}
.task .m{font-size:.85rem;color:var(--ink-70)}
.task .att{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;color:var(--ink);background:var(--paper-2);border-radius:6px;padding:2px 8px;margin-top:6px;text-decoration:none}
.task .r{font-family:var(--mono);font-size:.75rem;color:var(--ink-40);white-space:nowrap;padding-top:3px}
.flag{margin:0 20px 12px 0;background:var(--hl-2);border-left:4px solid var(--hl);padding:8px 12px;font-size:.85rem;border-radius:0 6px 6px 0}
.side{display:flex;flex-direction:column;gap:16px}
.side h3{font-size:.95rem;padding:14px 16px;border-bottom:1px solid var(--rule)}
.side ul{list-style:none;margin:0;padding:8px 16px 12px}
.side li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule-2);font-size:.9rem}
.side li:last-child{border-bottom:0}
.side li small{color:var(--ink-40);font-family:var(--mono);font-size:.72rem}
.status{display:flex;align-items:center;gap:8px}
.pill{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:#E6F4EC;color:var(--done)}
.pill.warn{background:#FCE8E8;color:var(--margin)}
.pill.pause{background:var(--hl-2);color:var(--ink)}
.side .link{display:block;padding:10px 16px;border-top:1px solid var(--rule);font-size:.85rem;font-weight:600;text-decoration:none}

/* Auth + setup wizard */
.auth{max-width:var(--wrap);margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:start}
.auth.single{grid-template-columns:minmax(0,440px);justify-content:center}
.authcard{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:28px}
.authcard h2{font-size:1.5rem;margin-bottom:6px}
.authcard p{color:var(--ink-70);margin:0 0 20px;font-size:.95rem}
.authcard label{display:block;font-size:.85rem;font-weight:600;margin:14px 0 6px}
.authcard .in,.authcard input[type=text],.authcard input[type=email],.authcard input[type=password]{width:100%;border:1.5px solid var(--rule);border-radius:var(--radius-sm);padding:11px 12px;font:inherit;background:#fff}
.authcard .in:focus,.authcard input:focus{border-color:var(--blue);outline:0}
.authcard .row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--ink-70);margin-top:10px}
.authcard .row label{margin:0;font-weight:500;display:flex;gap:6px;align-items:center}
.authcard .or{display:flex;align-items:center;gap:12px;color:var(--ink-40);font-size:.8rem;margin:18px 0}
.authcard .or::before,.authcard .or::after{content:"";flex:1;height:1px;background:var(--rule)}
.authcard .login-submit{margin-top:18px}
.authcard .login-submit .btn,.authcard input[type=submit]{width:100%;background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:var(--radius-sm);padding:11px 18px;font-weight:600;cursor:pointer}
.authcard .aside{text-align:center;margin:18px 0 0}
.authcard .aside a{color:var(--blue);font-weight:700}
.login-error{background:#FCE8E8;color:var(--margin);border-radius:var(--radius-sm);padding:10px 12px;font-size:.9rem;margin-bottom:8px}

.wizard{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.wsteps{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--rule);background:var(--paper)}
.wsteps div{padding:14px 12px;font-size:.8rem;color:var(--ink-40);border-right:1px solid var(--rule-2);display:flex;gap:8px;align-items:center}
.wsteps div:last-child{border-right:0}
.wsteps .n{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center;font-size:.7rem;font-weight:800;flex:none}
.wsteps div.done{color:var(--ink-70)}.wsteps div.done .n{background:var(--done);border-color:var(--done);color:#fff}
.wsteps div.cur{color:var(--ink);font-weight:700;background:#fff}.wsteps div.cur .n{background:var(--blue);border-color:var(--blue);color:#fff}
.wbody{padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.wbody h2{font-size:1.5rem}
.wbody p{color:var(--ink-70);font-size:.95rem;margin:8px 0 0}
.detect{margin-top:18px;border:1.5px solid var(--done);background:#F2FAF5;border-radius:10px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.detect .ok{width:26px;height:26px;border-radius:50%;background:var(--done);position:relative}
.detect .ok::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.detect b{display:block}.detect small{color:var(--ink-70)}
.platform-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.platform-pick label{border:1.5px solid var(--rule);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center;cursor:pointer;margin:0;font-weight:600}
.platform-pick label:has(input:checked){border-color:var(--blue);background:var(--blue-light)}
.platform-pick img{width:28px;height:28px;object-fit:contain}
.platform-pick input{accent-color:var(--blue)}
.howto{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:16px 18px}
.howto .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.howto ol{margin:8px 0 0;padding-left:18px;color:var(--ink-70);font-size:.9rem}
.howto li{margin:6px 0}.howto li b{color:var(--ink)}
.wfoot{padding:16px 28px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--ink-40)}
.wfoot .btns{display:flex;gap:10px}

/* =====================================================================
   7. Responsive
   ===================================================================== */
@media (max-width:900px){
  .hero .wrap,.band .wrap,.dash,.auth,.wbody,.price,.feat,.platform-pick,.stats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .dayrow{grid-template-columns:72px 1fr}
  .wsteps{grid-template-columns:repeat(6,minmax(0,1fr))}
  .wsteps div span{display:none}
  .nav .links{display:none;position:absolute;left:0;right:0;top:72px;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:12px 24px 20px;gap:14px;z-index:40}
  .nav .links.open{display:flex}
  .nav-toggle{display:inline-block}
  .site-header{position:relative}
}
@media (prefers-reduced-motion:no-preference){
  .digest{animation:settle .7s cubic-bezier(.2,.8,.2,1) both}
  @keyframes settle{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* =====================================================================
   8. Editor / block content niceties (marketing pages edited in WP)
   ===================================================================== */
.page-content .wp-block-button__link{background:var(--blue);color:#fff;border-radius:var(--radius-sm);padding:11px 18px;text-decoration:none;font-weight:600}
.page-content .wp-block-table td,.page-content .wp-block-table th{border:1px solid var(--rule);padding:8px 10px}
.page-content .wp-block-table th{background:var(--paper-2)}

/* =====================================================================
   9. User menu (logged-in header state)
   ===================================================================== */
.dr-user-menu{position:relative;list-style:none}
.dr-user-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1.5px solid var(--rule);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font-family:var(--body);font-size:.9rem;font-weight:700;color:var(--ink);transition:border-color .15s}
.dr-user-btn:hover{border-color:var(--blue)}
.dr-user-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-caret{font-size:.6rem;color:var(--ink-40);transition:transform .15s}
.dr-user-btn[aria-expanded=true] .dr-caret{transform:rotate(180deg)}
.dr-user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 0;list-style:none;margin:0;z-index:100}
.dr-user-dropdown li a{display:block;padding:10px 18px;font-size:.9rem;color:var(--text);text-decoration:none;font-weight:600}
.dr-user-dropdown li a:hover{background:var(--blue-light);color:var(--ink)}
.dr-user-meta{padding:12px 18px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.dr-user-meta strong{display:block;font-size:.9rem;color:var(--ink)}
.dr-user-meta span{display:block;font-size:.8rem;color:var(--ink-40);word-break:break-all}
.dr-dropdown-divider{border-top:1px solid var(--rule);margin:4px 0}

/* =====================================================================
   10. Avatars
   ===================================================================== */
.dr-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;flex:none}
.dr-avatar--initials{background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;border-radius:50%;vertical-align:middle;flex:none}