/* ============================================================
   Ember — two directions over the editorial base.
   Neutrals + accent are scheme-driven (body[data-scheme]); nothing here
   hard-codes a hue, so the Tweaks color switch re-tints both directions.
   A. .style-glass / .dir-glass  → iOS Liquid Glass: translucent glass control
      layer floating above a soft tinted ambient.
   B. .style-notion / .dir-notion → Notion minimal: white, flat, monochrome
      with the accent used only where a decision lives.
   ============================================================ */

/* ============================================================
   A — LIQUID GLASS
   ============================================================ */
.style-glass{
  --screen-bg:oklch(98.4% .006 var(--n-hue));--screen-ink:var(--ink);
  --paper:oklch(99.4% .004 var(--n-hue));
  --paper-2:oklch(96.6% .008 var(--n-hue));
  --paper-3:oklch(93% .010 var(--n-hue));
  --rule:oklch(90.5% .010 var(--n-hue));--rule-2:oklch(82% .014 var(--n-hue));
}
.style-glass .phone-screen{background:linear-gradient(168deg,oklch(98.6% .012 var(--n-hue)) 0%,oklch(97.4% .016 calc(var(--n-hue) - 24)) 54%,oklch(98.4% .014 calc(var(--n-hue) + 30)) 100%)}
.style-glass .screen-mesh{inset:0;overflow:hidden}
.style-glass .mesh-blob{position:absolute;border-radius:50%;filter:blur(46px);will-change:transform,opacity;opacity:.16}
.style-glass .mesh-blob.b1{width:62%;height:54%;left:-26%;top:-30%;
  background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--accent) 78%,transparent),transparent 66%);
  animation:meshFlow1 34s ease-in-out infinite}
.style-glass .mesh-blob.b2{width:60%;height:54%;right:-28%;bottom:-28%;
  background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--accent-b) 76%,transparent),transparent 66%);
  animation:meshFlow2 38s ease-in-out infinite}
.style-glass .mesh-blob.b3{display:none;width:60%;height:58%;left:24%;top:30%;
  background:radial-gradient(circle at 50% 50%,color-mix(in oklab,oklch(72% .22 calc(var(--n-hue) + 70)) 64%,transparent),transparent 64%);
  animation:meshFlow3 25s ease-in-out infinite}
.style-glass .mesh-blob.b4{width:52%;height:48%;right:-24%;top:-26%;opacity:.13;
  background:radial-gradient(circle at 50% 50%,color-mix(in oklab,oklch(74% .2 calc(var(--n-hue) - 60)) 60%,transparent),transparent 66%);
  animation:meshFlow4 36s ease-in-out infinite}
@keyframes meshFlow1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(26%,40%) scale(1.28)}66%{transform:translate(48%,12%) scale(1.08)}}
@keyframes meshFlow2{0%,100%{transform:translate(0,0) scale(1.05)}33%{transform:translate(-34%,-26%) scale(1.3)}66%{transform:translate(-12%,-44%) scale(1.12)}}
@keyframes meshFlow3{0%,100%{transform:translate(0,0) scale(1);opacity:.6}50%{transform:translate(-30%,-20%) scale(1.35);opacity:.92}}
@keyframes meshFlow4{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-24%,46%) scale(1.24)}70%{transform:translate(-44%,18%) scale(1.06)}}
/* STRONG vivid color ONLY on the login screen (.login-bg toggled on .phone-screen);
   cold-start + all product pages keep the calm edge wash above */
/* white/light base + soft pastel frosted mesh — keeps the calm screen gradient,
   just brightens & enlarges the blurred accent blobs. Wordmark stays dark ink. */
.phone-screen.login-bg .mesh-blob{opacity:.8;filter:blur(28px)}
.phone-screen.login-bg .mesh-blob.b1{left:-12%;top:-18%;width:78%;height:62%;animation-duration:17s}
.phone-screen.login-bg .mesh-blob.b2{right:-16%;bottom:-16%;width:70%;height:64%;animation-duration:21s}
.phone-screen.login-bg .mesh-blob.b3{display:block;left:24%;top:30%;width:60%;height:58%;opacity:.6;animation-duration:25s}
.phone-screen.login-bg .mesh-blob.b4{right:18%;top:-10%;width:54%;height:52%;opacity:.78;animation-duration:19s}

/* glass control layer — frosted, in normal flow */
.style-glass .apptop{margin:4px 12px 10px;padding:10px 11px 10px 17px;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,oklch(100% 0 0/.62),oklch(100% 0 0/.34));
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid oklch(100% 0 0/.7);
  box-shadow:inset 0 1px 1px oklch(100% 0 0/.9),0 6px 18px -10px oklch(40% .05 var(--n-hue)/.34)}
.style-glass .apptop::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,oklch(100% 0 0/.55),transparent 44%)}
.style-glass .apptop.back{padding:10px 14px}
.style-glass .push-over{background:linear-gradient(168deg,oklch(98.6% .012 var(--n-hue)) 0%,oklch(97.4% .016 calc(var(--n-hue) - 24)) 54%,oklch(98.4% .014 calc(var(--n-hue) + 30)) 100%)}
.style-glass .navbar{background:linear-gradient(180deg,oklch(100% 0 0/.66),oklch(100% 0 0/.34));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid oklch(100% 0 0/.5);box-shadow:0 1px 0 oklch(100% 0 0/.7) inset,0 1px 8px -4px oklch(40% .05 var(--n-hue)/.2)}
/* let the home logo's breathing aura spill past the frosted pill */
.style-glass .apptop.tl-top{overflow:visible}
.style-glass .back-arrow{border:none;background:oklch(100% 0 0/.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.style-glass .quickbar{margin:10px 14px 4px;position:relative;overflow:hidden;padding:10px 10px 10px 17px;
  background:linear-gradient(180deg,oklch(100% 0 0/.64),oklch(100% 0 0/.4));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid oklch(100% 0 0/.72);
  box-shadow:inset 0 1px 1px oklch(100% 0 0/.9),0 8px 22px -10px oklch(40% .05 var(--n-hue)/.4)}
.style-glass .quickbar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,oklch(100% 0 0/.5),transparent 42%)}
.style-glass .acard,.style-glass .prep-card,.style-glass .mem-card,.style-glass .draft-card,
.style-glass .exec-card,.style-glass .done-card,.style-glass .set-list,.style-glass .set-toggles,
.style-glass .ob-list,.style-glass .scanlist{box-shadow:0 2px 10px -6px oklch(40% .05 var(--n-hue)/.2)}
.style-glass .acard{border-radius:18px}
.style-glass .btn{background:oklch(100% 0 0/.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:oklch(100% 0 0/.7)}

/* ---- strengthened Liquid Glass (HIG: floating control layer, lensing, specular) ---- */
.style-glass .apptop,.style-glass .quickbar{backdrop-filter:blur(30px) saturate(205%);-webkit-backdrop-filter:blur(30px) saturate(205%)}
.style-glass .apptop{box-shadow:inset 0 1.5px 0 oklch(100% 0 0/.96),inset 0 -10px 16px oklch(100% 0 0/.2),0 10px 26px -10px oklch(40% .05 var(--n-hue)/.42),0 2px 5px -2px oklch(40% .05 var(--n-hue)/.3)}
.style-glass .quickbar{box-shadow:inset 0 1.5px 0 oklch(100% 0 0/.96),inset 0 -12px 18px oklch(100% 0 0/.22),0 14px 30px -10px oklch(40% .05 var(--n-hue)/.46)}
.style-glass .thread-card{box-shadow:0 5px 18px -9px oklch(40% .05 var(--n-hue)/.26)}
.style-glass .draft-card{background:color-mix(in oklab,#fff 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.style-glass .hold,.style-glass .ob-cta,.style-glass .qb-send{position:relative;overflow:hidden}
.style-glass .hold::after,.style-glass .ob-cta::after,.style-glass .qb-send::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,oklch(100% 0 0/.34),transparent 48%)}
.style-glass .triage.on{background:color-mix(in oklab,var(--accent-soft) 82%,#fff)}

/* ============================================================
   B — NOTION MINIMAL
   ============================================================ */
.style-notion{
  --screen-bg:#ffffff;--screen-ink:oklch(22% .012 var(--n-hue));
  --paper:#ffffff;--paper-2:oklch(97.2% .005 var(--n-hue));--paper-3:oklch(94% .007 var(--n-hue));--paper-4:oklch(90% .009 var(--n-hue));
  --rule:oklch(92.5% .006 var(--n-hue));--rule-2:oklch(86% .009 var(--n-hue));
  --ink:oklch(22% .013 var(--n-hue));--ink-2:oklch(40% .013 var(--n-hue));--ink-3:oklch(56% .011 var(--n-hue));--ink-4:oklch(72% .009 var(--n-hue));
}
.style-notion .phone-screen{background:#ffffff}
.style-notion .screen-mesh{display:none}
.style-notion .acard,.style-notion .prep-card,.style-notion .mem-card,.style-notion .draft-card,
.style-notion .exec-card,.style-notion .done-card,.style-notion .set-list,.style-notion .set-toggles,
.style-notion .ob-list,.style-notion .scanlist{border-radius:11px}
.style-notion .acard.now{box-shadow:inset 3px 0 0 var(--accent)}
.style-notion .acard.watching{background:var(--paper-2);border-color:var(--rule)}
.style-notion .prep-card{background:var(--paper-2)}
.style-notion .hold{border-radius:9px}
.style-notion .btn,.style-notion .undo,.style-notion .gauth-btn{border-radius:9px}
.style-notion .quickbar{border-radius:11px;background:var(--paper-2);border-color:var(--rule)}
.style-notion .qb-send{border-radius:7px}
.style-notion .avatar{border-radius:7px}
.style-notion .srcq{background:var(--paper-2);border-left:2px solid var(--rule-2);color:var(--ink-2)}
.style-notion .srcq-from{color:var(--ink-3)}
.style-notion .mem-rule{background:var(--paper-2);border-color:var(--rule)}
.style-notion .olr-ic{border-radius:7px;background:var(--paper-2);color:var(--ink-2)}
.style-notion .cs-bar i,.style-notion .cs-prog i.on{background:var(--ink)}

/* ============================================================
   BRAND ZONES
   ============================================================ */
/* A — glass: soft, cool, tinted */
.dir-glass .brandzone{background:linear-gradient(150deg,oklch(98.5% .008 var(--n-hue)),oklch(97% .012 calc(var(--n-hue) - 20)) 60%,oklch(98% .014 calc(var(--n-hue) + 30)));border-color:var(--rule)}
.dir-glass .brandzone::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(40% 70% at 94% 4%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 60%),
    radial-gradient(34% 62% at 3% 100%,color-mix(in oklab,var(--accent-b) 20%,transparent),transparent 64%)}
.dir-glass .brandzone>*{position:relative;z-index:1}
.dir-glass .appicon{background:linear-gradient(152deg,color-mix(in oklab,var(--accent) 24%,white),color-mix(in oklab,var(--accent-b) 60%,white));border:1px solid oklch(100% 0 0/.6);
  box-shadow:inset 0 2px 3px oklch(100% 0 0/.7),0 14px 30px -14px color-mix(in oklab,var(--accent) 50%,transparent)}
.dir-glass .appicon::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,oklch(100% 0 0/.5),transparent 46%)}
.dir-glass .appicon .embermark{color:var(--accent-2)}

/* B — notion: flat ink icon */
.dir-notion .brandzone{background:#fff;border-color:var(--rule)}
.dir-notion .appicon{background:oklch(24% .02 var(--n-hue))}
.dir-notion .appicon .em-arc{stroke:oklch(100% 0 0/.62)}
.dir-notion .appicon .em-dot{fill:var(--accent)}
.dir-notion .appicon .em-glow{fill:var(--accent);opacity:.26}

/* direction tab marker */
.dir-glass .dir-tab .dt-n,.dir-notion .dir-tab .dt-n{background:var(--ink)}