/* C008 R6: Approved native controls. R6 colour and distance-aware timing.
   Y / grid variants retain the separately approved landing layout. */
html {
  --seg-shell: #081220; --seg-line: #253c5a; --seg-muted: #91a0b6;
  --seg-selected: #cbd5e3; --seg-yellow: #F5A04F; --seg-ink: #211706;
  --seg-focus: #75adeb;
}
html[data-theme="light"] {
  --seg-shell: #f4f1eb; --seg-line: #d7dee8; --seg-muted: #687587;
  --seg-selected: #3e4a58; --seg-yellow: #F5A04F; --seg-ink: #241805;
  --seg-focus: #4b83bd;
}
html body .seg-group {
  --seg-gap: 5px; --seg-font: 14px; --seg-h: 44px;
  --seg-duration: 422ms; --seg-ease: cubic-bezier(.36,0,.18,1);
  display:grid !important; position:relative !important; isolation:isolate; box-sizing:border-box !important;
  grid-template-columns:repeat(var(--seg-cols,2), minmax(0,1fr)) !important;
  gap:var(--seg-gap) !important; padding:3px !important;
  min-width:0 !important; width:100% !important; max-width:100%;
  border:1px solid var(--seg-line) !important; border-radius:16px !important;
  background:var(--seg-shell) !important; box-shadow:none !important;
  overflow:visible !important; align-items:stretch !important; justify-content:normal !important;
  transform:none !important; flex-wrap:unset !important;
}
html body .seg-group .seg-tab,
html body .seg-group .seg-ink-label {
  box-sizing:border-box !important; min-width:0 !important; width:100% !important;
  min-height:var(--seg-h) !important; height:var(--seg-h) !important;
  padding:6px 8px !important; margin:0 !important; border:0 !important; border-radius:14px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:inherit !important; font-size:var(--seg-font) !important; font-weight:700 !important;
  line-height:1.2 !important; letter-spacing:0 !important; text-transform:none !important;
  text-align:center !important; white-space:normal !important;
  background:transparent !important; background-image:none !important; box-shadow:none !important;
  transform:none !important; animation:none !important; overflow:visible !important;
}
html body .seg-group .seg-tab {
  position:relative; grid-column:auto !important; z-index:1; color:var(--seg-muted) !important; cursor:pointer;
  outline:none; transition:color 180ms ease !important;
  -webkit-tap-highlight-color:transparent;
}
html body .seg-group .seg-tab:is(.is-active,[aria-selected="true"],[aria-pressed="true"]) { color:var(--seg-selected) !important; }
html body .seg-group .seg-tab:focus-visible { outline:2px solid var(--seg-focus) !important; outline-offset:2px !important; }
@media (hover:hover) and (pointer:fine) { html body .seg-group .seg-tab:hover { color:var(--seg-yellow) !important; } }
/* Legacy semantic span rules, hover glows and per-button fills must not cover ink. */
html body .seg-group .seg-tab::before,
html body .seg-group .seg-tab::after,
html body .seg-group > .cursor-glow-layer,
html body .seg-group .seg-tab > .cursor-glow-layer { display:none !important; }
html body .seg-group :is(.seg-label,.seg-number) {
  display:block !important; position:static !important; width:auto !important; height:auto !important;
  min-width:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
  color:inherit !important; font:inherit !important; line-height:inherit !important;
  white-space:normal !important; text-align:inherit !important; letter-spacing:0 !important; text-transform:none !important;
  flex:0 1 auto !important; opacity:1 !important;
}
html body .seg-group .seg-label { overflow-wrap:normal; hyphens:manual; }
html body .seg-group .seg-number { flex:0 0 15px !important; width:15px !important; font-size:10px !important; font-variant-numeric:tabular-nums; opacity:.72 !important; }
html body .seg-group.seg-steps { --seg-cols:1; --seg-h:var(--product-switch-height,38px); --seg-font:13px; }
html body .seg-group.seg-steps :is(.seg-tab,.seg-ink-label) { justify-content:flex-start !important; gap:7px !important; text-align:left !important; }
html body .seg-group.seg-formats { --seg-cols:4; margin-top:20px; }
html body .seg-group.seg-library { --seg-cols:3; --seg-font:15px; width:min(100%,540px) !important; }
html body .seg-group.seg-platform { --seg-h:var(--product-switch-height,44px); --seg-cols:2; width:min(100%,300px) !important; margin-inline:auto; }
/* One rigid fill plus counter-translated stationary text, including Y/XY. */
html body .seg-group .seg-indicator {
  position:absolute !important; left:0 !important; top:0 !important;
  z-index:2 !important; width:0; height:0; border:0 !important; border-radius:14px !important;
  background:var(--seg-yellow) !important; box-shadow:none !important;
  pointer-events:none !important; user-select:none !important; overflow:hidden !important;
  visibility:hidden; transform:translate3d(0,0,0);
  transition:transform var(--seg-duration) var(--seg-ease);
}
html body .seg-group .seg-ink-strip { position:absolute; left:0; top:0; pointer-events:none; transform:translate3d(0,0,0); transition:transform var(--seg-duration) var(--seg-ease); }
html body .seg-group .seg-ink-label { position:absolute !important; width:var(--seg-label-w) !important; color:var(--seg-ink) !important; pointer-events:none; }
html body .seg-group[data-seg-ready="true"] .seg-indicator { visibility:visible; }
html body .seg-group[data-seg-empty="true"] .seg-indicator { visibility:hidden; }
html body .seg-group[data-seg-snap="true"] :is(.seg-indicator,.seg-ink-strip) { transition:none !important; }
html body .seg-group.seg-plans { --seg-cols:2; --seg-h:48px; margin-bottom:12px; }
html body .seg-plan-details { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--seg-line); border-radius:16px; padding:18px; background:var(--seg-shell); margin:0 0 16px; }
html body .seg-plan-pane { display:flex; flex-direction:column; gap:7px; grid-area:1/1; visibility:hidden; pointer-events:none; min-width:0; }
html body .seg-plan-pane.is-current { visibility:visible; pointer-events:auto; }
html body .seg-plan-pane strong { font-size:15px; color:var(--text); }
html body .seg-plan-pane .subscription-plan-price { font-size:28px; font-weight:750; }
html body .seg-plan-pane small { font-size:13px; color:var(--muted); }
html body .subscription-form:has(.seg-plans) .subscription-selected { display:none !important; }
@media (max-width:760px) {
  html body .seg-group { --seg-gap:3px; --seg-font:14px; }
  html body .seg-group.seg-library { --seg-font:14px; width:100% !important; }
  html body .seg-group.seg-steps { --seg-h:var(--product-switch-height,44px); --seg-font:13px; }
  html body .seg-group.seg-steps.seg-ai-steps { --seg-cols:6; }
  html body .seg-ai-steps .seg-tab { grid-column:span 2 !important; }
  html body .seg-ai-steps .seg-tab:nth-of-type(4) { grid-column:2 / span 2 !important; }
  html body .seg-ai-steps .seg-tab:nth-of-type(5) { grid-column:4 / span 2 !important; }
  html body .seg-group.seg-steps.seg-buddy-steps { --seg-cols:2; }
  html body .seg-group.seg-steps :is(.seg-tab,.seg-ink-label) { justify-content:center !important; gap:0 !important; text-align:center !important; padding:6px !important; }
  html body .seg-group.seg-steps .seg-number { display:none !important; }
  html body .seg-group.seg-plans { --seg-cols:2 !important; }
}
@media (max-width:360px) {
  html body .seg-group.seg-formats { --seg-font:13px; }
  html body .seg-group.seg-formats :is(.seg-tab,.seg-ink-label) { padding-inline:3px !important; }
  }
@media (prefers-reduced-motion:reduce) { html body .seg-group :is(.seg-indicator,.seg-ink-strip,.seg-tab) { transition:none !important; } }

html body .seg-plan-placeholder { grid-area:1 / 1; align-self:center; margin:0; color:var(--muted); font-size:14px; line-height:1.5; }

/* Keep desktop platform controls wholly inside the hardware silhouette. */
@media(min-width:761px){
 body.landing-variant-b :is(#demo,#buddy) :is(.demo-window-label,.buddy-window-label){width:min(100%,268px);}
 html body .seg-group.seg-platform{width:min(100%,268px)!important;--seg-h:var(--product-switch-height,38px);}
}
/* Library has its own generous format selector; no push to the far right. */
body.materials-page .materials-library-head{display:grid;grid-template-columns:auto minmax(0,540px);align-items:center;justify-content:start;gap:28px;}
html body .seg-group.seg-library{--seg-h:50px;--seg-font:16px;justify-self:start;}
@media(max-width:1100px){
 body.materials-page .materials-library-head{grid-template-columns:minmax(0,1fr);gap:18px;}
 html body .seg-group.seg-library{width:min(100%,560px)!important;}
}
@media(max-width:760px){
 html body .seg-group.seg-library{width:100%!important;--seg-h:48px;--seg-font:15px;}
}
/* Clear ALL legacy hover/active tinting: no intermediate gradient or scale. */
html body .seg-group .seg-tab:is(:hover,:active,:focus,.is-active,.is-selected,[aria-selected="true"],[aria-pressed="true"]){
 background:transparent!important;background-image:none!important;border-color:transparent!important;
 box-shadow:none!important;filter:none!important;transform:none!important;
}
html body .seg-group :is(.seg-tab,.seg-ink-label) .cursor-glow-layer{display:none!important;}
html body .seg-group .seg-tab:disabled{cursor:not-allowed;opacity:.5;}
/* Native billing validation must remain visible despite the style reset. */
html body .seg-group.seg-plans.is-invalid{outline:2px solid #d85666;outline-offset:2px;}
/* Compact plans keep a single price/terms area, without changing BFF selection. */
html body .subscription-options:has(+ .seg-plan-details) ~ .subscription-selected{display:none!important;}
/* Legacy light-theme rules carry !important and state-specific specificity.
   Own every real-tab paint state, not merely the indicator drawn above it. */
html[data-theme] body :is(#demo,#buddy,#channel-library,.materials-library,.subscription-checkout-dialog) .seg-group .seg-tab,
html[data-theme] body :is(#demo,#buddy,#channel-library,.materials-library,.subscription-checkout-dialog) .seg-group .seg-tab:is(:hover,:active,:focus,:focus-visible,.is-active,.is-selected,[aria-selected="true"],[aria-pressed="true"]){
 background:transparent!important;background-image:none!important;box-shadow:none!important;
 border:0!important;filter:none!important;transform:none!important;color:var(--seg-muted)!important;
}
html[data-theme] body :is(#demo,#buddy,#channel-library,.materials-library,.subscription-checkout-dialog) .seg-group .seg-tab:is(.is-active,.is-selected,[aria-selected="true"],[aria-pressed="true"]){color:var(--seg-selected)!important;}
@media(hover:hover) and (pointer:fine){
 html[data-theme] body :is(#demo,#buddy,#channel-library,.materials-library,.subscription-checkout-dialog) .seg-group .seg-tab:hover{color:var(--seg-yellow)!important;}
}

/* P56: one height for step + platform selectors; preserve AI 3+2 / Buddy 2x2. */
body.landing-variant-b :is(#demo,#buddy){--product-switch-height:38px}
@media(max-width:760px){body.landing-variant-b :is(#demo,#buddy){--product-switch-height:44px}}

@media(min-width:761px){html body .seg-group.seg-steps .seg-label{white-space:nowrap!important}}