/* Ember Companion — shared style
   One source of truth for the iPad app, the family portal, and all project documents.
   Part 1: design tokens (colors, type, spacing). Part 2: document components.
   Light and dark follow the device setting. All text colors pass WCAG AA (4.5:1) on their backgrounds. */

/* ---------- Part 1: tokens ---------- */
:root{
  color-scheme: light dark;
  --e-bg:#FFF9F3;          /* warm cream page */
  --e-surface:#FFFFFF;     /* cards */
  --e-surface-2:#FBEFE4;   /* tinted panels */
  --e-text:#2A1F1A;        /* 15.4:1 on bg */
  --e-muted:#6B5A50;       /* 6.3:1 on bg */
  --e-line:#EADBCD;
  --e-primary:#B84A17;     /* buttons; white text 5.2:1 */
  --e-on-primary:#FFFFFF;
  --e-link:#A8441A;        /* 5.7:1 on bg */
  --e-glow:#F5A55B;        /* decorative only */
  --e-amber:#F2C14E;       /* decorative only */
  --e-hero-bg:#2A1F1A;     /* dark band behind titles */
  --e-hero-text:#FBEFE4;
  --e-hero-accent:#F6A06A;
  --e-code-bg:#2A1F1A;
  --e-code-text:#FBEFE4;
  --e-success:#2E7D4F; --e-warn:#8A5800; --e-danger:#B3261E; --e-info:#2F5E8C;
  --e-success-bg:#E6F2EA; --e-warn-bg:#FBF0D9; --e-danger-bg:#FBE6E4; --e-info-bg:#E5EEF7;
  --e-radius:16px; --e-radius-sm:10px;
  --e-shadow:0 1px 2px rgba(42,31,26,.06),0 6px 24px rgba(42,31,26,.08);
  --e-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --e-font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --e-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --e-tap:48px;            /* minimum tap target for older adults */
}
@media (prefers-color-scheme: dark){
  :root{
    --e-bg:#1A1310; --e-surface:#241B17; --e-surface-2:#2E2420;
    --e-text:#F6EDE6; --e-muted:#C3B2A6; --e-line:#3D312B;
    --e-primary:#F0874A; --e-on-primary:#1A1310; --e-link:#F6A06A;
    --e-hero-bg:#120D0B; --e-hero-text:#F6EDE6; --e-hero-accent:#F6A06A;
    --e-code-bg:#120D0B; --e-code-text:#F6EDE6;
    --e-success:#6FCF97; --e-warn:#F2C14E; --e-danger:#FF8A80; --e-info:#8DB8E8;
    --e-success-bg:#16261C; --e-warn-bg:#2A2210; --e-danger-bg:#2E1715; --e-info-bg:#14202C;
    --e-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.35);
  }
}

@media print{
  :root{--e-bg:#FFFFFF;--e-surface:#FFFFFF;--e-surface-2:#F4F0EC;--e-text:#000000;--e-muted:#444444;--e-line:#CCCCCC;
    --e-link:#000000;--e-hero-bg:#FFFFFF;--e-hero-text:#000000;--e-hero-accent:#8A3A12;--e-code-bg:#F4F0EC;--e-code-text:#000000;
    --e-primary:#B84A17;--e-on-primary:#FFFFFF}
}

/* ---------- Part 2: document components ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body.e-doc{margin:0;background:var(--e-bg);color:var(--e-text);font:17px/1.7 var(--e-font);overflow-wrap:break-word}
.e-doc a{color:var(--e-link);text-underline-offset:3px}
.e-doc a:focus-visible,.e-doc button:focus-visible{outline:3px solid var(--e-glow);outline-offset:3px;border-radius:4px}

/* top bar */
.e-bar{background:var(--e-hero-bg);color:var(--e-hero-text)}
.e-bar-in{max-width:1180px;margin:auto;padding:14px 28px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.e-logo{display:flex;align-items:center;gap:10px;color:var(--e-hero-text)!important;text-decoration:none;font:600 20px/1 var(--e-font-display);letter-spacing:.3px}
.e-logo img{width:30px;height:30px}
.e-bar nav a{color:var(--e-hero-text);opacity:.85;font-size:14px;text-decoration:none;margin-left:18px}
.e-bar nav a:hover{opacity:1;text-decoration:underline}

/* title band */
.e-hero{background:var(--e-hero-bg);color:var(--e-hero-text);position:relative;overflow:hidden}
.e-hero:after{content:"";position:absolute;width:460px;height:460px;right:-160px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(240,135,74,.30),transparent 68%);pointer-events:none}
.e-hero-in{max-width:1180px;margin:auto;padding:30px 28px 46px;position:relative;z-index:1}
.e-eyebrow{font-size:12px;font-weight:750;letter-spacing:2px;text-transform:uppercase;color:var(--e-hero-accent)}
.e-hero h1{font:400 clamp(36px,5.2vw,60px)/1.1 var(--e-font-display);letter-spacing:-1px;margin:14px 0 14px;max-width:900px}
.e-hero p{max-width:760px;font-size:19px;margin:0;opacity:.92}
.e-meta{margin-top:18px;font-size:13px;opacity:.8}

/* body layout */
.e-main{max-width:1180px;margin:auto;padding:34px 28px 70px}
.e-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px}
.e-toc{position:sticky;top:20px;align-self:start;max-height:92vh;overflow:auto;font-size:14px}
.e-toc .label{font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:12px;color:var(--e-muted);margin:0 0 10px}
.e-toc a{display:block;color:var(--e-muted);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--e-line);line-height:1.4}
.e-toc a:hover{color:var(--e-link)}
.e-toc a.lvl3{padding-left:12px;font-size:13px}
.e-content{max-width:860px;min-width:0}
.e-content p,.e-content li{overflow-wrap:anywhere}
.e-content h2{font:400 31px/1.25 var(--e-font-display);margin:44px 0 16px;padding-top:22px;border-top:1px solid var(--e-line);letter-spacing:-.3px}
.e-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.e-content h3{font-size:20px;margin:30px 0 10px}
.e-content h4{font-size:17px;margin:24px 0 8px}
.e-content p{margin:0 0 16px}
.e-content ul,.e-content ol{padding-left:24px;margin:0 0 18px}
.e-content li{margin:7px 0}
.e-content hr{border:0;border-top:1px solid var(--e-line);margin:36px 0}
.e-content blockquote{margin:20px 0;padding:14px 20px;border-left:4px solid var(--e-primary);background:var(--e-surface-2);border-radius:0 var(--e-radius-sm) var(--e-radius-sm) 0}
.e-content code{overflow-wrap:anywhere;font:14px var(--e-font-mono);background:var(--e-surface-2);padding:2px 6px;border-radius:5px}
.e-content pre{background:var(--e-code-bg);color:var(--e-code-text);padding:20px;border-radius:var(--e-radius-sm);overflow:auto;font:13px/1.6 var(--e-font-mono)}
.e-content pre code{background:none;padding:0;color:inherit}
.e-table{overflow-x:auto;margin:20px 0 28px;border:1px solid var(--e-line);border-radius:var(--e-radius-sm)}
.e-content table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.e-content th{text-align:left;background:var(--e-surface-2);color:var(--e-text);font-size:13px;letter-spacing:.3px;padding:12px 14px;border-bottom:1px solid var(--e-line)}
.e-content td{padding:12px 14px;vertical-align:top;border-bottom:1px solid var(--e-line);background:var(--e-surface)}
.e-content tr:last-child td{border-bottom:0}
.e-content td:first-child{font-weight:650;min-width:130px}

/* callouts, cards, badges */
.e-callout{padding:16px 20px;border-radius:var(--e-radius-sm);margin:18px 0;border:1px solid var(--e-line);background:var(--e-surface-2)}
.e-callout.ok{background:var(--e-success-bg);border-color:transparent}
.e-callout.warn{background:var(--e-warn-bg);border-color:transparent}
.e-callout.info{background:var(--e-info-bg);border-color:transparent}
.e-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px;padding:3px 10px;border-radius:999px;background:var(--e-surface-2);color:var(--e-text);border:1px solid var(--e-line);white-space:nowrap}
.e-badge.ok{background:var(--e-success-bg);color:var(--e-success);border-color:transparent}
.e-badge.warn{background:var(--e-warn-bg);color:var(--e-warn);border-color:transparent}
.e-badge.new{background:var(--e-primary);color:var(--e-on-primary);border-color:transparent}
.e-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:18px 0 30px}
.e-card{display:block;background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:20px 22px;text-decoration:none;color:var(--e-text)!important;box-shadow:var(--e-shadow);transition:transform .15s ease}
a.e-card:hover{transform:translateY(-2px)}
.e-card h3{margin:6px 0 6px;font-size:18px;color:var(--e-text)}
.e-card p{margin:0;font-size:15px;color:var(--e-muted);line-height:1.5}
.e-card .e-kind{font-size:12px;font-weight:750;letter-spacing:1px;text-transform:uppercase;color:var(--e-link)}
.e-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--e-tap);padding:0 22px;border-radius:999px;border:0;background:var(--e-primary);color:var(--e-on-primary)!important;font:650 16px var(--e-font);text-decoration:none;cursor:pointer}
.e-btn.ghost{background:transparent;color:var(--e-text)!important;border:1px solid var(--e-line)}

.e-foot code,.e-foot span{overflow-wrap:anywhere;min-width:0}
.e-content a{overflow-wrap:anywhere}
.e-foot{border-top:1px solid var(--e-line);color:var(--e-muted);font-size:13px}
.e-foot-in{max-width:1180px;margin:auto;padding:22px 28px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}

@media (max-width:640px){
  .e-bar-in{flex-wrap:wrap;row-gap:6px}
  .e-bar nav{width:100%;display:flex;flex-wrap:wrap;gap:4px 16px}
  .e-bar nav a{margin-left:0}
}
@media (max-width:900px){
  .e-layout{grid-template-columns:1fr;gap:18px}
  .e-toc{position:static;max-height:none;display:none}
  .e-main{padding:24px 18px 56px}
  .e-hero-in,.e-bar-in{padding-left:18px;padding-right:18px}
  .e-bar nav a{margin-left:12px}
  .e-content h2{font-size:26px}
  body.e-doc{font-size:16.5px}
}
@media print{
  body.e-doc{background:#fff;color:#000;font-size:10.5pt}
  .e-bar nav,.e-toc{display:none}
  .e-bar,.e-hero{background:#fff;color:#000}
  .e-hero:after{display:none}
  .e-layout{display:block}
  .e-content{max-width:none}
  .e-content h2{break-after:avoid}
  .e-content tr,.e-card{break-inside:avoid}
  .e-table{overflow:visible}
  .e-content a{color:#000}
}

/* ---------- Part 3: app components (tablet and family portal) ---------- */
.e-face{display:block;width:100%;height:auto;overflow:visible}
.e-face .e-face-eyes{transform-box:fill-box;transform-origin:center;animation:e-blink 5.2s infinite}
.e-face .e-face-talk{opacity:0;transform-box:fill-box;transform-origin:center}
.e-face.speaking .e-face-smile{opacity:0}
.e-face.speaking .e-face-talk{opacity:1;animation:e-talk .26s ease-in-out infinite alternate}
.e-face.listening .e-face-halo{transform-box:fill-box;transform-origin:center;animation:e-pulse 1.6s ease-in-out infinite}
@keyframes e-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes e-talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes e-pulse{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.04);opacity:1}}
@media (prefers-reduced-motion:reduce){.e-face *{animation:none!important}}

.e-bubble{position:relative;background:var(--e-surface);color:var(--e-text);border:1px solid var(--e-line);border-radius:28px;padding:26px 30px;box-shadow:var(--e-shadow);font:500 30px/1.38 var(--e-font)}
.e-bubble:before{content:"";position:absolute;left:-14px;top:46px;width:26px;height:26px;background:inherit;border-left:1px solid var(--e-line);border-bottom:1px solid var(--e-line);transform:rotate(45deg)}
.e-bigbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:96px;min-height:88px;padding:10px 18px;border-radius:24px;border:2px solid var(--e-line);background:var(--e-surface);color:var(--e-text);font:700 22px var(--e-font);cursor:pointer}
.e-bigbtn.primary{background:var(--e-primary);border-color:var(--e-primary);color:var(--e-on-primary)}
.e-bigbtn svg{width:30px;height:30px}
.e-chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--e-tap);padding:0 18px;border-radius:999px;background:var(--e-surface-2);color:var(--e-text);font:650 18px var(--e-font);border:1px solid var(--e-line)}
.e-dot{width:12px;height:12px;border-radius:50%;background:var(--e-success);display:inline-block}
.e-dot.listen{background:var(--e-primary)}.e-dot.off{background:var(--e-danger)}
.e-switch{position:relative;display:inline-block;width:64px;height:36px;flex:none}
.e-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.e-switch span{position:absolute;inset:0;border-radius:999px;background:var(--e-line);transition:.2s}
.e-switch span:after{content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.e-switch input:checked+span{background:var(--e-primary)}
.e-switch input:checked+span:after{transform:translateX(28px)}
.e-switch input:focus-visible+span{outline:3px solid var(--e-glow);outline-offset:2px}

/* Talking-head character (brand/ember-character.js) */
.e-char{display:block;width:100%;height:auto;overflow:visible}
.e-char .eyes-open{transform-box:fill-box;transform-origin:center;animation:e-blink 4.8s infinite}
.e-char .eyes-happy{display:none}
.e-char[data-state="smiling"] .eyes-open{display:none}
.e-char[data-state="smiling"] .eyes-happy{display:inline}
.e-char .e-char-head{transform-box:view-box;transform-origin:100px 150px;transition:transform .4s ease}
.e-char[data-state="listening"] .e-char-head{transform:rotate(-4deg)}
.e-char[data-state="listening"] .e-char-brows{transform:translateY(-2px)}
.e-char[data-state="thinking"] .eyes-open{transform:translate(3px,-3px)}
.e-char[data-state="thinking"] .bl{transform:translateY(-3px)}
.e-char[data-state="sympathetic"] .bl{transform:rotate(8deg);transform-box:fill-box;transform-origin:right center}
.e-char[data-state="sympathetic"] .br{transform:rotate(-8deg);transform-box:fill-box;transform-origin:left center}
.e-char[data-state="speaking"] .e-char-head{animation:e-nod 2.4s ease-in-out infinite}
@keyframes e-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(1.5deg)}70%{transform:rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){.e-char *{animation:none!important;transition:none!important}}

/* SWOT grid (documents) */
.swot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 28px}
.swot-box{border-radius:var(--e-radius);padding:18px 20px;border:1px solid var(--e-line);background:var(--e-surface)}
.swot-box h3{margin:0 0 8px;font:400 23px/1.2 var(--e-font-display)}
.swot-box h3 span{display:block;font:600 12px var(--e-font);letter-spacing:1px;text-transform:uppercase;color:var(--e-muted);margin-top:4px}
.swot-box ul{margin:0;padding-left:20px}
.swot-box li{margin:6px 0;font-size:15.5px;line-height:1.5}
.swot-box.s{background:var(--e-success-bg)} .swot-box.w{background:var(--e-warn-bg)}
.swot-box.o{background:var(--e-info-bg)} .swot-box.t{background:var(--e-danger-bg)}
@media (max-width:760px){.swot{grid-template-columns:1fr}}
@media print{.swot{grid-template-columns:1fr 1fr}.swot-box{break-inside:avoid}}