/* Four looks for My Radar, switched by <html data-look="a|b|c|d" data-theme="light|dark">.
   The page's own CSS is look B (the ocora.ai style); the others override it. */

/* ================= A · Precise: flat, thin borders, 8px controls, one accent ================= */
:root[data-look="a"]{--bg:#ffffff;--surface:#f7f8fa;--raised:#ffffff;--line:#e4e7ee;--fg:#0d1220;--muted:#5b6474;--accent-soft:#eceeff;--shadow:none;--hero-a:#f7f8fa;--hero-b:#f7f8fa;--display:var(--body)}
:root[data-look="a"][data-theme="dark"]{--bg:#08090c;--surface:#0f1114;--raised:#141619;--line:#23262d;--fg:#f2f4f8;--muted:#8d94a3;--accent:#8c9bff;--on-accent:#06081a;--accent-soft:#1a1e3a;--navy:#f2f4f8;--hero-a:#0f1114;--hero-b:#0f1114}
[data-look="a"] :is(h1,h2,h3){font-weight:600;letter-spacing:-.02em}
[data-look="a"] .hero{background:var(--surface)}
[data-look="a"] .hero h1{font-size:clamp(26px,4vw,36px);letter-spacing:-.03em}
[data-look="a"] :is(.ghost,.primary,.chip,.tab,.search,.fld,.add input,.add button,.preset){border-radius:8px}
[data-look="a"] .primary{font-weight:600;padding:8px 14px}
[data-look="a"] .ghost{font-weight:500}
[data-look="a"] .tab{font-weight:500;padding:6px 10px}
[data-look="a"] .tab[aria-current="page"]{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
[data-look="a"] .tab[aria-current="page"] .n{background:var(--accent);color:var(--on-accent)}
[data-look="a"] :is(.demo-tag,.badge,.why,.kind){border-radius:999px}
[data-look="a"] :is(.today,.next){border-radius:12px;box-shadow:none}
[data-look="a"] .today{background:var(--surface)}
[data-look="a"] .next{border-style:solid}
[data-look="a"] .top3 article{border-top:1px solid var(--line)}
[data-look="a"] .radar-head{border-bottom:1px solid var(--line)}
[data-look="a"] .radar-head h2{font-size:17px}
[data-look="a"] .stats b{font-weight:600}
[data-look="a"] :is(.eyebrow,.steps){text-transform:none;letter-spacing:.02em;font-weight:500;font-size:13px}
[data-look="a"] :is(.field>label,.field>.lab,.toolbar .lab){text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px}

/* ================= B · Ocora: the ocora.ai style. Base CSS, nothing to override ================= */
[data-look="b"] .gate-card{border-radius:20px;box-shadow:var(--shadow)}
[data-look="b"] .gate{background:linear-gradient(135deg,var(--hero-a),var(--hero-b))}

/* ================= C · Editorial: paper, serif headlines, rules instead of boxes ================= */
:root[data-look="c"]{--bg:#fbfaf6;--surface:#f2f0e8;--raised:#fffefb;--line:#d9d5c8;--fg:#16161a;--muted:#5d5b55;--accent:#0a2bd6;--accent-soft:#e6e9fa;--navy:#16161a;--shadow:none;--hero-a:#fbfaf6;--hero-b:#fbfaf6;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
:root[data-look="c"][data-theme="dark"]{--bg:#121210;--surface:#1a1a17;--raised:#1f1f1b;--line:#35342e;--fg:#f1efe8;--muted:#a5a297;--accent:#9db0ff;--on-accent:#0b0f2a;--accent-soft:#1f2444;--navy:#f1efe8;--hero-a:#121210;--hero-b:#121210}
[data-look="c"] :is(h1,h2){font-weight:700;letter-spacing:-.015em}
[data-look="c"] .hero{background:var(--bg);border-bottom:3px double var(--fg)}
[data-look="c"] .hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:22px}
[data-look="c"] .plot{display:none}
[data-look="c"] .hero h1{font-size:clamp(36px,6.5vw,60px);line-height:1.02;margin:4px 0 12px}
[data-look="c"] .hero .lede{font-family:var(--display);font-size:18px;line-height:1.45;max-width:64ch}
[data-look="c"] :is(.eyebrow,.steps){font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
[data-look="c"] .stats b{font-family:var(--display);font-weight:700}
[data-look="c"] :is(.ghost,.primary,.chip,.tab,.search,.fld,.add input,.add button,.preset,.gate-card,.err){border-radius:2px}
[data-look="c"] :is(.why,.kind,.badge,.demo-tag,.tab .n){border-radius:2px}
[data-look="c"] .navbar{border-bottom:1px solid var(--fg)}
[data-look="c"] .tab{border-radius:0;padding:8px 10px;font-weight:500}
[data-look="c"] .tab:hover{background:none;color:var(--fg)}
[data-look="c"] .tab[aria-current="page"]{background:none;color:var(--fg);box-shadow:inset 0 -3px 0 var(--fg)}
[data-look="c"] .tab .n{background:none;color:var(--muted);padding:0;font-family:var(--mono);font-weight:500}
[data-look="c"] .tab[aria-current="page"] .n{background:none;color:var(--accent)}
[data-look="c"] .today{border:0;border-radius:0;background:none;box-shadow:none;padding:0}
[data-look="c"] .today h2{font-size:30px;margin:4px 0 16px}
[data-look="c"] .top3{gap:0}
[data-look="c"] .top3 article{border-top:0;border-left:1px solid var(--line);padding:0 18px}
[data-look="c"] .top3 article:first-child{border-left:0;padding-left:0}
[data-look="c"] .top3 h3{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.22}
[data-look="c"] .radar-head{border-bottom:0;border-top:2px solid var(--fg);padding:8px 0 0}
[data-look="c"] .radar-head h2{font-size:23px}
[data-look="c"] .item h3{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.25}
[data-look="c"] .item p{font-size:14px}
[data-look="c"] .why{background:none;padding:0;font-family:var(--mono);font-size:11px;font-weight:500}
[data-look="c"] .why+.why::before{content:"· ";color:var(--muted)}
[data-look="c"] .next{border:0;border-top:1px solid var(--fg);border-radius:0;padding:20px 0 0}
[data-look="c"] .panel-head h2{font-size:22px}
[data-look="c"] .gate{background:var(--bg)}
[data-look="c"] .gate-card{border:0;border-top:3px double var(--fg);background:none;padding:24px 0}
[data-look="c"] .gate-card h1{font-size:30px}
@media (max-width:700px){[data-look="c"] .top3 article{border-left:0;border-top:1px solid var(--line);padding:12px 0}}

/* ================= D · Bold: navy header band, radars as cards on a tinted canvas ================= */
:root[data-look="d"]{--bg:#f2f5fb;--surface:#e8edf8;--raised:#ffffff;--line:#dde3f0;--fg:#0b1730;--muted:#566381;--shadow:0 1px 2px rgba(11,34,69,.06),0 10px 28px rgba(11,34,69,.07)}
:root[data-look="d"][data-theme="dark"]{--bg:#060b18;--surface:#0b1326;--raised:#101b33;--line:#1f2d4d;--fg:#e8eefb;--muted:#9fb0cf;--accent:#7fa2ff;--on-accent:#06122a;--accent-soft:#17264d;--navy:#e8eefb;--shadow:0 10px 28px rgba(0,0,0,.4)}
[data-look="d"] .hero{background:linear-gradient(120deg,#0b2245 0%,#0a1d7a 60%,#0008ff 130%);border-bottom:0;
  --fg:#ffffff;--navy:#ffffff;--muted:rgba(255,255,255,.76);--accent:#46d7ff;--cyan:#ffffff;--line:rgba(255,255,255,.24);--raised:rgba(255,255,255,.1);--bg:#0b2245;color:#fff}
[data-look="d"][data-theme="dark"] .hero{background:linear-gradient(120deg,#070f22 0%,#0a1a5c 70%,#0b22b8 140%)}
[data-look="d"] .hero .wrap{padding-block:36px}
[data-look="d"] .hero h1{font-size:clamp(32px,5vw,48px)}
[data-look="d"] .hero .demo-tag{background:rgba(255,255,255,.14);color:#fff}
[data-look="d"] .hero .ghost{color:#fff}
[data-look="d"] .main{padding-top:14px}
[data-look="d"] .tab[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
[data-look="d"] .tab[aria-current="page"] .n{background:rgba(255,255,255,.22);color:inherit}
[data-look="d"] .today{border:0;border-radius:18px}
[data-look="d"] .top3 article{border-top:0;background:var(--surface);border-radius:14px;padding:16px}
[data-look="d"] .radars{gap:20px}
[data-look="d"] .radar{background:var(--raised);border:1px solid var(--line);border-radius:18px;padding:18px 20px 14px;box-shadow:var(--shadow)}
[data-look="d"] .radar-head{border-bottom:1px solid var(--line)}
[data-look="d"] .radar .item:last-of-type{border-bottom:0}
[data-look="d"] .next{background:var(--raised);border:1px solid var(--line);border-radius:18px}
[data-look="d"] .gate{background:linear-gradient(120deg,#0b2245 0%,#0a1d7a 60%,#0008ff 130%)}
[data-look="d"] .gate-card{border:0;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* ================= look switcher (review tool, not part of the product) ================= */
.lookbar{position:fixed;left:12px;bottom:12px;z-index:40;display:flex;gap:2px;align-items:center;padding:4px;border-radius:10px;background:#111522;color:#fff;font:500 12px/1 Inter,system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.lookbar span{padding:0 8px;opacity:.6}
.lookbar button{border:0;background:none;color:#fff;font:inherit;padding:7px 9px;border-radius:7px;cursor:pointer}
.lookbar button:hover{background:rgba(255,255,255,.12)}
.lookbar button[aria-pressed="true"]{background:#fff;color:#111522}
.lookbar i{width:1px;height:16px;background:rgba(255,255,255,.25);margin:0 4px}