/* Flow / next studies: three visual systems, each with a light and dark mode. */
body[data-concept=halo][data-mode=light]{--bg:#e9eaf1;--paper:#f5f6fb;--panel:#ffffffdc;--alt:#f1f2f9;--rail:#f5f6fbe8;--line:#e1e4ee;--ink:#1b2031;--muted:#798199;--accent:#6566e8;--accent-ink:#fff;--soft:#e8e8ff;--team:#e4e9ff;--team-ink:#4c5db5;--strategy:#ede4ff;--strategy-ink:#8061b6;--customer:#dff5ed;--customer-ink:#257b69;--shadow:0 28px 85px #48507a24;--glow:#aeabff7d;--haze:#c2eff098}
body[data-concept=halo][data-mode=dark]{--bg:#0b1020;--paper:#11172b;--panel:#1a2136e8;--alt:#232c42;--rail:#141b30;--line:#303a53;--ink:#f5f6ff;--muted:#9ba5be;--accent:#aaa9ff;--accent-ink:#15182e;--soft:#343460;--team:#293964;--team-ink:#b8c7ff;--strategy:#40345d;--strategy-ink:#d7b8ff;--customer:#284b4e;--customer-ink:#99e6d8;--shadow:0 32px 90px #020510b8;--glow:#7068de73;--haze:#185d7790}
body[data-concept=axis][data-mode=light]{--bg:#d9dbd8;--paper:#f7f8f5;--panel:#fbfcf9;--alt:#eceee9;--rail:#f0f2ee;--line:#d7dbd5;--ink:#171b19;--muted:#727b76;--accent:#ff5d36;--accent-ink:#201e17;--soft:#ffe1d6;--team:#dde9e3;--team-ink:#316b52;--strategy:#e7e7f2;--strategy-ink:#6263a4;--customer:#f5e7d8;--customer-ink:#986631;--shadow:0 18px 52px #24312921;--glow:#ff9d8270;--haze:#d5eadc}
body[data-concept=axis][data-mode=dark]{--bg:#080b0a;--paper:#101412;--panel:#161b18;--alt:#202722;--rail:#101512;--line:#344039;--ink:#f2f5ef;--muted:#99a69e;--accent:#ff7652;--accent-ink:#191b16;--soft:#482c24;--team:#244235;--team-ink:#a0ddba;--strategy:#343354;--strategy-ink:#bfc1ff;--customer:#4b3827;--customer-ink:#e3bd85;--shadow:0 24px 70px #0009;--glow:#d65a394a;--haze:#274334}
body[data-concept=flux][data-mode=light]{--bg:#dfe9eb;--paper:#eaf3f4;--panel:#f9fcfcdf;--alt:#e7f0f0;--rail:#eaf3f4;--line:#cbdfe0;--ink:#102e37;--muted:#68828b;--accent:#006e88;--accent-ink:#fff;--soft:#d0eef0;--team:#dce7ff;--team-ink:#3d5f9e;--strategy:#d8edec;--strategy-ink:#2d7b77;--customer:#e7e3f9;--customer-ink:#7164a2;--shadow:0 28px 90px #0c59602a;--glow:#a3e3e6bd;--haze:#a9c3f5a0}
body[data-concept=flux][data-mode=dark]{--bg:#060e15;--paper:#091820;--panel:#112832e8;--alt:#17323a;--rail:#0b2029;--line:#29505a;--ink:#e4fbf9;--muted:#88a9b0;--accent:#72e6de;--accent-ink:#072b30;--soft:#185458;--team:#203d68;--team-ink:#9bbcff;--strategy:#1c514c;--strategy-ink:#99e7d4;--customer:#3b365d;--customer-ink:#ccb6ff;--shadow:0 30px 90px #000b;--glow:#2e9ca090;--haze:#22576d90}

body{transition:background-color .38s,color .38s}
.lab{background:#11171c;border-color:#303940;height:62px;padding-inline:22px;gap:22px}
.lab-brand{font-family:'Space Grotesk',sans-serif;font-size:18px}
.lab-brand>span{color:#a3edf0}
.lab-brand small{color:#82959b;font-size:8px;letter-spacing:.18em}
.lab-tabs{background:#202a30;border:1px solid #344148;padding:3px;border-radius:10px;gap:2px}
.lab-tabs button{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;padding:8px 13px;border-radius:7px;color:#a9b8ba}
.lab-tabs button.active{background:#f1f7f5;color:#172229;box-shadow:0 2px 10px #0004}
.lab-tabs button i{width:9px;height:9px;box-shadow:none;background:#a9a7ff}
.lab-tabs [data-concept=axis] i,.swatch.axis{background:#ff7953}
.lab-tabs [data-concept=flux] i,.swatch.flux{background:#79ddd9}
.swatch.halo{background:#9997ff}
.mode-tabs{display:flex;align-items:center;gap:3px;background:#202a30;border:1px solid #344148;border-radius:9px;padding:3px;margin-left:auto}
.mode-tabs button{border:0;color:#9fb1b4;background:transparent;border-radius:6px;padding:7px 10px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;transition:background .2s,color .2s,transform .2s}
.mode-tabs button:hover{transform:translateY(-1px);color:#fff}
.mode-tabs button.active{background:#f1f7f5;color:#172229}
.lab-back{margin-left:0}
.stage{height:calc(100vh - 62px);padding:12px}
.app-shell{transition:background .38s,border-color .38s,box-shadow .38s;border-radius:16px;position:relative}
.rail,.pane,.workspace-top,.capture,.segment,.week-day,.month-day,.task-row{transition:background .36s,border-color .36s,color .36s,box-shadow .25s,transform .25s}
.rail-brand{font-family:'Space Grotesk',sans-serif;font-size:22px;letter-spacing:-.075em}
.brand-symbol{font-family:'Space Grotesk',sans-serif;font-size:20px}
.range-heading h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(26px,2.35vw,38px);letter-spacing:-.07em}
.pane-head h2{font-family:'Space Grotesk',sans-serif;font-size:21px;letter-spacing:-.055em}
.range-bar{min-height:104px}
.period-summary{height:35px}
.pane{border-radius:14px}
.task-row:hover{background:var(--alt);transform:translateX(2px)}
.task-row.active:hover{background:var(--soft)}
.week-meeting:hover,.timed-meeting:hover,.month-day:hover{transform:translateY(-2px);filter:brightness(1.045);box-shadow:0 6px 16px #0002;z-index:3}
.week-day.today:after{content:'';position:absolute;top:23.3%;left:0;right:0;border-top:1px solid var(--accent);pointer-events:none;z-index:2;opacity:.8}
.week-day.today:before{content:'';position:absolute;top:calc(23.3% - 3px);left:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent);z-index:3;box-shadow:0 0 0 3px var(--panel)}
.workspace-foot{letter-spacing:.14em}
.dialog{transition:background .3s,border-color .3s}

/* HALO — luminous, rounded, quiet depth. */
body[data-concept=halo] .app-shell{background:radial-gradient(ellipse 46% 68% at 74% -9%,var(--glow),transparent 83%),radial-gradient(ellipse 35% 50% at 18% 105%,var(--haze),transparent 79%),var(--paper)}
body[data-concept=halo] .rail{background:transparent;border-right:1px solid var(--line);width:214px}
body[data-concept=halo] .workspace-top{border-bottom-color:transparent}
body[data-concept=halo] .pane{background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 38px #26305b0c;backdrop-filter:blur(16px)}
body[data-concept=halo][data-mode=dark] .pane{box-shadow:0 14px 46px #0002}
body[data-concept=halo] .capture{border-radius:11px}
body[data-concept=halo] .segment{border-radius:12px}
body[data-concept=halo] .segment button{border-radius:9px}
body[data-concept=halo] .rail-hint{background:linear-gradient(135deg,var(--soft),var(--panel));border-color:transparent;box-shadow:0 10px 30px #22245e12}
body[data-concept=halo] .rail-hint strong{font-family:'Space Grotesk',sans-serif;font-weight:600}
body[data-concept=halo] .week-meeting{border-left-width:0;border-radius:7px;padding-left:7px;box-shadow:inset 3px 0 var(--team-ink)}
body[data-concept=halo] .week-meeting.strategy{box-shadow:inset 3px 0 var(--strategy-ink)}
body[data-concept=halo] .week-meeting.customer{box-shadow:inset 3px 0 var(--customer-ink)}

/* AXIS — sharp geometry, strong rhythm, strict hierarchy. */
body[data-concept=axis] .app-shell{border-radius:5px;background:var(--paper);box-shadow:var(--shadow)}
body[data-concept=axis] .rail{width:191px;padding-top:22px;background:var(--rail)}
body[data-concept=axis] .rail-brand{font-size:23px;padding-bottom:44px}
body[data-concept=axis] .brand-symbol{border-radius:2px;transform:rotate(-10deg);font-weight:700}
body[data-concept=axis] .brand-symbol:hover{transform:rotate(35deg)}
body[data-concept=axis] .rail-link,body[data-concept=axis] .rail-hint,body[data-concept=axis] .pane,body[data-concept=axis] .segment,body[data-concept=axis] .capture,body[data-concept=axis] .icon-button,body[data-concept=axis] .period-nav button,body[data-concept=axis] .workspace-top button,body[data-concept=axis] .dialog{border-radius:3px}
body[data-concept=axis] .rail-link.selected{box-shadow:inset 3px 0 var(--accent)}
body[data-concept=axis] .range-heading h1{font-weight:700;font-size:clamp(28px,2.7vw,43px);letter-spacing:-.083em;line-height:1}
body[data-concept=axis] .range-heading h1 span{color:var(--accent)}
body[data-concept=axis] .range-bar{min-height:111px}
body[data-concept=axis] .pane{box-shadow:none;border-color:var(--line)}
body[data-concept=axis] .pane-head{height:72px}
body[data-concept=axis] .pane-head h2{font-size:22px;font-weight:700}
body[data-concept=axis] .eyebrow,body[data-concept=axis] .rail-group-label,body[data-concept=axis] .workspace-top{font-family:'DM Mono',monospace;font-weight:500}
body[data-concept=axis] .task-row{min-height:62px}
body[data-concept=axis] .task-row.active:before{top:0;bottom:0;border-radius:0;width:3px}
body[data-concept=axis] .task-priority,body[data-concept=axis] .week-meeting,body[data-concept=axis] .month-event{border-radius:2px}
body[data-concept=axis] .segment button,body[data-concept=axis] .capture button{border-radius:1px}
body[data-concept=axis] .rail-hint{background:var(--ink);color:var(--paper);border:0}
body[data-concept=axis] .rail-hint>span{color:var(--accent)}
body[data-concept=axis] .rail-hint strong{font-family:'Space Grotesk',sans-serif;font-size:17px;letter-spacing:-.06em}
body[data-concept=axis] .week-meeting{border-left:3px solid currentColor}
body[data-concept=axis] .workspace-foot{border-top:1px solid var(--line);margin-top:4px}

/* FLUX — integrated cool surfaces with restrained ambient light. */
body[data-concept=flux] .app-shell{background:radial-gradient(ellipse 38% 50% at 78% 7%,var(--glow),transparent 80%),radial-gradient(ellipse 42% 63% at -8% 96%,var(--haze),transparent 78%),var(--paper);border-color:var(--line)}
body[data-concept=flux] .rail{width:205px;background:color-mix(in srgb,var(--rail) 87%,transparent);border-right-color:var(--line)}
body[data-concept=flux] .workspace-top{height:58px}
body[data-concept=flux] .pane{background:var(--panel);border-color:var(--line);box-shadow:inset 0 1px #ffffff24,0 12px 34px #06303912;backdrop-filter:blur(18px)}
body[data-concept=flux] .content-grid{grid-template-columns:minmax(370px,1.06fr) minmax(475px,.94fr)}
body[data-concept=flux] .rail-link.selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 27%,transparent)}
body[data-concept=flux] .range-heading h1{font-weight:500;letter-spacing:-.075em}
body[data-concept=flux] .pane-head{border-bottom-color:color-mix(in srgb,var(--accent) 24%,var(--line))}
body[data-concept=flux] .capture{background:var(--alt);border-color:color-mix(in srgb,var(--accent) 26%,var(--line));box-shadow:inset 0 1px #ffffff10}
body[data-concept=flux] .capture:focus-within{box-shadow:0 0 0 3px var(--soft),0 0 22px color-mix(in srgb,var(--accent) 20%,transparent)}
body[data-concept=flux] .rail-hint{background:linear-gradient(135deg,var(--panel),var(--soft));border-color:var(--line)}
body[data-concept=flux] .rail-hint strong{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:18px}
body[data-concept=flux] .week-meeting{border-left:0;border-top:2px solid currentColor;border-radius:6px;padding:5px 6px}
body[data-concept=flux] .week-head button.today{color:var(--accent)}

@media(max-width:1100px){body[data-concept=halo] .rail,body[data-concept=axis] .rail,body[data-concept=flux] .rail{width:165px}body[data-concept=flux] .content-grid{grid-template-columns:minmax(280px,.95fr) minmax(390px,1.05fr)}}
@media(max-width:850px){.lab-brand small,.lab-back{display:none}.lab{gap:10px;padding:0 10px}.lab-tabs button{padding:7px}.mode-tabs button{padding:7px}.mode-tabs button span{display:none}.stage{min-height:calc(100vh - 62px)}body[data-concept=flux] .content-grid{grid-template-columns:1fr;grid-template-rows:minmax(420px,1fr) minmax(430px,1fr)}}