/* bdils.com site layer (Odysseus). Hero mount, case gate, page glue. Loads after themes + motion. */
.s-hero__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;opacity:0;transition:opacity 420ms var(--bd-ease-out,ease)}
.s-hero.is-hero-ready .s-hero__frame{opacity:1}
.s-hero__field{z-index:0}
.s-hero__copy{pointer-events:none}                       /* the field underneath takes the pointer; only the plate's children are live */
.s-hero__plate{pointer-events:auto;display:grid;gap:26px;width:max-content;max-width:min(640px,100%)}
.s-hero__plate>*{max-width:600px}
.s-hero__clearing{display:none}                           /* the engine keeps out of the plate; no painted clearing */
.s-hero__nojs{position:absolute;left:var(--bd-gutter);bottom:80px;font:500 13px var(--bd-mono);color:var(--bd-fg-3)}
.s-hero__hint{pointer-events:none}
html[data-sound="off"] .bd-bar__btn.is-sound .bd-i{opacity:.75}
.bd-bar__btn[aria-busy="true"]{opacity:.55;pointer-events:none}
.bd-bar.is-away{visibility:hidden}
.bd-bar{transition:translate var(--bd-m-bar-dur,320ms) var(--bd-ease-standard,ease),opacity var(--bd-m-bar-dur,320ms) ease,visibility 0s linear var(--bd-m-bar-dur,320ms)}
.bd-bar:not(.is-away){transition-delay:0s}
.bd-bar.is-away:focus-within{visibility:visible;opacity:1;pointer-events:auto;translate:-50% 0;transition-delay:0s}   /* S1 fallback: a bar that holds focus is never hidden */
/* theme cover from the motion runtime */
.m-theme-cover{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:0;display:none}.m-theme-cover.is-on{display:block}
/* case page gate */
.s-case__gate{display:none;margin:28px 0 8px}
.s-case__gatecard{display:grid;gap:14px;justify-items:start;padding:32px;max-width:640px;background:var(--bd-surface);border-radius:var(--bd-r-xl);box-shadow:var(--bd-sh-2)}
.s-case__gatecard .bd-modal__lock{margin:0}
body.is-gated .s-case__gate{display:block}
body.is-gated .s-case__private{display:none}
[data-theme="retro"] .s-case__gatecard{border-radius:0;box-shadow:0 0 0 var(--bd-px) var(--rt-cream);background:var(--rt-navy-sh)}
/* footer */
.s-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.s-foot small{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
/* phones and tablets: the hero stays LIVE (Brian, 2026-10-13 mobile-live spec). Same field, same bar; the engine's own frame guard
   steps down the ladder (full > fewer collisions / DPR cap > drag-only > static) by measured frame time, never by width. */
@media (max-width:860px){
  .s-hero{display:block;min-height:100svh;height:100svh}
  .s-hero__field{position:absolute;inset:0}
  .s-hero__copy{padding:calc(var(--bd-nav-h) + 20px) 0 0}
  .s-hero__plate{width:auto;max-width:min(560px,100%);padding:18px;gap:16px;background:color-mix(in srgb,var(--bd-bg) 78%,transparent);border-radius:var(--bd-r-xl);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .s-hero__plate .bd-display{font-size:clamp(34px,10vw,48px)}
  .s-hero__plate .bd-lead{font-size:16px}
  [data-theme="retro"] .s-hero__plate{background:var(--rt-navy-sh);border-radius:0}
  [data-theme="gel"] .s-hero__plate{background:color-mix(in srgb,var(--bd-hero-bg) 92%,transparent)}   /* Gel's hero ink is cream: a light --bd-bg plate put it at 1.2-1.5:1 */
  .s-hero__hint{display:flex;bottom:92px;font-size:11px}
  /* the bar: icons only at phone scale, labels stay as accessible names */
  .bd-bar{display:flex;bottom:12px;max-width:calc(100vw - 16px);padding:4px;gap:0}
  .bd-bar__btn{min-width:44px;height:48px;padding:0 8px;gap:3px}
  .bd-bar__btn .lbl,.bd-bar__btn .val{display:none}
  .bd-bar__btn--style .txt{display:none}
  .bd-bar__sep{display:none}
  .bd-bar .bd-tip__bubble{display:none}
}
@media (max-width:860px),(pointer:coarse) and (max-width:1100px){.bd-bar{display:flex}}
@media (prefers-reduced-motion:reduce){.s-hero__frame{transition:none}}

/* Eight-style integration + Chiron fixes */
html,body{font-size:16px} button,a,input,select,textarea{font-size:inherit}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid var(--bd-focus,#1456d8)!important;outline-offset:3px!important}
.theme-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--bd-r-md)!important;gap:8px!important}   /* A1: 8px between adjacent style targets */
.theme-grid>button{min-height:44px;white-space:normal}
.bd-stylemenu{max-height:min(32vh,360px);overflow:auto;scroll-padding:52px 0 44px}.bd-styleopt{min-height:58px}.bd-stylemenu__foot{position:sticky;bottom:0;z-index:2;background:var(--bd-surface)}   /* like the sticky head: scrolled options must not show through */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.blog-card{display:grid;gap:14px;padding:20px;background:var(--bd-surface);border-radius:var(--bd-r-xl);box-shadow:var(--bd-sh-1);text-decoration:none;color:inherit}.blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--bd-r-md)}
.blog-post{max-width:820px;margin:auto;padding:calc(var(--bd-nav-h) + 48px) var(--bd-gutter) 100px}.blog-post h1{font:700 clamp(36px,6vw,64px)/1.02 var(--bd-sans);letter-spacing:-.04em}.blog-post h2{margin-top:2em;font:700 28px/1.15 var(--bd-sans)}.blog-post p,.blog-post li{font-size:17px;line-height:1.7}.blog-post img,.blog-post video{display:block;max-width:100%;height:auto;margin:28px 0;border-radius:var(--bd-r-lg)}
.swatch-bench{display:flex;gap:14px;flex-wrap:wrap}.swatch-tool{min-width:82px;min-height:82px;border:0;padding:8px;border-radius:var(--bd-r-lg);background:var(--bd-surface);box-shadow:var(--bd-sh-2);display:grid;gap:6px}.swatch-tool i{display:block;height:42px;border-radius:calc(var(--bd-r-lg) - 4px);background:var(--c)}.swatch-tool span{font:600 11px/1.2 var(--bd-mono)}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr}.bd-bar{left:8px!important;right:8px!important;bottom:8px!important;transform:none!important;width:auto!important;max-width:calc(100vw - 16px);overflow-x:auto}.bd-bar__btn{min-width:48px;min-height:48px;flex:0 0 auto}.bd-bar__btn .lbl{font-size:10px}.bd-stylemenu:not([style]){position:fixed!important;left:8px!important;right:8px!important;bottom:68px!important;width:auto!important}.s-hero__field{min-height:720px}.s-hero{padding-bottom:70px}}
/* S1: the phone bar spans left/right 8px, so the desktop centring translate (transform:none above does not reset it) pushed it half off-screen */
@media(max-width:860px){.bd-bar{translate:none!important}.bd-bar.is-away{translate:0 140%!important}.bd-bar.is-away:focus-within{translate:none!important}}
@media(max-width:370px){.bd-bar{gap:0!important;padding:4px!important}}   /* six 48px targets fit the 304px bar at 320 wide in every style */
/* N1 (Narcissus R3 pass3): at <=340px six 48px buttons + style pill + two separators still overflow by ~20px.
   Wrap to two rows instead of shrinking targets below the 44px minimum; centred so it still reads as one control. */
@media(max-width:340px){
  .bd-bar{flex-wrap:wrap;justify-content:center;row-gap:4px;max-width:calc(100vw - 16px)}
  .bd-bar__sep{display:none}
}
/* N2 (Narcissus R3 pass3): .bd-sheet sits in normal document flow until components.css applies display:none;
   on an intermittent ~7% of loads (Extrude only, cause not pinned down further) the closed sheet's
   .theme-grid pill grid still gets counted into documentElement.scrollWidth. Pin the sheet out of flow and
   clip it unconditionally (not just inside the open-state media query) so a closed sheet can never
   contribute to document width regardless of display-cascade timing. No visual change: outside <=860px it
   always stays display:none; inside it, these are the same position/inset values .is-open already used. */
.bd-sheet{position:fixed;inset:0;overflow:hidden;max-width:100vw}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Integration contrast repairs verified by axe across all eight themes. */
.snd .type{color:var(--ink)!important}
html[data-theme="primitives"] .bd-small{color:#385143!important}
.sh-dark{background:#fff!important;color:#141517!important}
.sh-dark .bd-btn,.sh-dark .bd-input,.sh-dark .bd-seg button{color:#141517!important;background:#fff!important}
.sh-dark .bd-label,.sh-dark .bd-help,.sh-dark .sh-l{color:#30343a!important}
.sh .bd-stylemenu,.sh .bd-stylemenu__head,.sh .bd-stylemenu__foot,.sh .bd-styleopt{background:#fff!important;color:#141517!important}
.sh .bd-styleopt .nm,.sh .bd-styleopt small{color:#141517!important}
.sh-dark .bd-input::placeholder{color:#5b616a!important}

.bd-btn--primary{color:#141517!important}
html[data-theme]:not([data-theme="modern"]) .bd-btn--primary{background:#fa6b43!important;color:#141517!important}
/* C1: nav ink matches the nav backing (now present from first paint). Dark ink on the light backings; Skeuomorph's leather strap keeps
   its cream ink (skeuomorph.css); Retro's navy strip keeps white. Scoped to .bd-nav so footer wordmarks keep their own plate below. */
html:not([data-theme="retro"]):not([data-theme="skeuomorph"]) .bd-nav :is(.bd-nav__link,.bd-wordmark){color:#141517!important}
html[data-theme="primitives"] .bd-nav .bd-nav__link[aria-current="true"]{color:var(--pr-cream)!important}   /* the current link sits on an ink pill */
html[data-theme="retro"] .bd-nav :is(.bd-nav__link,.bd-wordmark){color:#fff!important}
html[data-theme="retro"] .bd-nav{background:#07082a!important}
html[data-theme="primitives"] .bd-small{color:#141517!important}
.sh .sh-cell,.sh .bd-modal,.sh .bd-modal__success{background:#fff!important;color:#141517!important}
.sh .sh-cell :where(.sh-l,.bd-label,.bd-help,.bd-modal__lede,.bd-small,.txt,small),.sh .bd-modal :where(.bd-modal__lede,.bd-label,.bd-help,.bd-small){color:#141517!important}
.s-foot .bd-wordmark{display:inline-flex;background:#fff!important;color:#141517!important;padding:8px 10px;border-radius:6px}
html[data-theme] body.sh,html[data-theme] .sh main{background:#f7f7f5!important;color:#141517!important}
html[data-theme] .sh .bd-nav{background:#fff!important}
html[data-theme] .sh .sh-cell,html[data-theme] .sh .bd-modal,html[data-theme] .sh .bd-modal__success,html[data-theme] .sh .bd-toast{background:#fff!important;color:#141517!important}
html[data-theme] .sh .sh-cell :where(p,span,small,label,h1,h2,h3,h4,a,button,input,textarea),html[data-theme] .sh .bd-modal :where(p,span,small,label,h1,h2,h3,h4,a,button,input,textarea){color:#141517!important}
html[data-theme] .sh .sh-cell :where(button,input,textarea,.bd-toast){background:#fff!important}
html[data-theme]:not([data-theme="modern"]) .sh .sh-cell .bd-btn--primary{background:#fa6b43!important;color:#141517!important}
html[data-theme] .sh .bd-error,html[data-theme] .sh .bd-error span{color:#8b1a1a!important}
html[data-theme] .bd-nav .bd-btn--primary{background:#fff!important;color:#141517!important;box-shadow:inset 0 0 0 2px #141517!important}
html[data-theme="primitives"] .bd-small{display:inline-block;background:#fff!important;color:#141517!important;padding:3px 5px}
html[data-theme] body.sh,html[data-theme] body.sh main,html[data-theme] body.sh section,html[data-theme] body.sh footer{background:#f7f7f5!important;color:#141517!important}
html[data-theme] body.sh :where(h1,h2,h3,h4,p,span,small,a,label,button,input,textarea){color:#141517!important}
html[data-theme] body.sh :where(button,input,textarea,.bd-tag,.bd-avatar,.bd-toast,.bd-tip__bubble,.bd-modal,.bd-stylemenu,.bd-soundmenu){background:#fff!important;color:#141517!important}
html[data-theme]:not([data-theme="modern"]) body.sh .bd-btn--primary{background:#fa6b43!important;color:#141517!important}
html[data-theme] body.sh svg{color:#141517!important}
html[data-theme] body.sh *{color:#141517!important}
html[data-theme] body.sh .bd-nav .bd-btn--primary,html[data-theme] body.sh a[aria-current="true"]{background:#fff!important;color:#141517!important;box-shadow:inset 0 0 0 2px #141517!important}
html[data-theme="primitives"] body.sh .bd-nav .bd-nav__link[aria-current="true"]{color:#141517!important}   /* sheet only: L117 paints the current link white, so L95 cream text would be 1.16:1. Ink on white 17.9:1 */
html[data-theme] body.sh output{background:#fff!important;color:#141517!important}
html[data-theme="retro"] body.sh,html[data-theme="retro"] body.sh *{background-color:#fff!important;color:#141517!important}
html[data-theme="retro"] body.sh .bd-stylemenu :where(.bd-stylemenu__head,.bd-styleopt,.nm,small),html[data-theme="retro"] body.sh .bd-wordmark{background:#fff!important;color:#141517!important}
/* The component sheet is a static audit surface. Do not sample colors mid-transition. */
body.sh *,body.sh *::before,body.sh *::after{transition:none!important;animation:none!important}

@media(max-width:860px){.bd-stylemenu:not([style]){max-height:min(40vh,320px)}}   /* phone: the menu sheet must stay below the headline (components.css sets 62vh) */

/* ===== R3 state repairs on the component sheet =====
   The sheet-wide contrast pass above pins every button, input and ink colour with !important, which also pinned the
   HOVER state (real-pointer diff 0.0 percent on Modern, Skeuomorph, Retro buttons; ghost buttons in Gel/Frost;
   switches, radios and checkboxes in most styles). Rest colours stay as they are. These rules only add the state change back. */
html[data-theme] body.sh .bd-btn:hover:not(:disabled):not(.is-disabled):not(.bd-btn--primary),html[data-theme] body.sh .bd-btn.is-hover:not(.bd-btn--primary){background:#ecebe6!important}
html[data-theme] body.sh .bd-btn--ghost:hover:not(:disabled),html[data-theme] body.sh .bd-btn--ghost.is-hover{background:#e4e2db!important}
html[data-theme]:not([data-theme="modern"]) body.sh .sh-cell .bd-btn--primary:hover:not(:disabled),html[data-theme]:not([data-theme="modern"]) body.sh .sh-cell .bd-btn--primary.is-hover{background:#ff8660!important}
html[data-theme] body.sh .sh-cell :where(.bd-btn:hover:not(:disabled),.bd-btn.is-hover){outline:2px solid rgba(20,21,23,.55);outline-offset:1px}
html[data-theme] body.sh .sh-cell .bd-input:hover:not(:disabled),html[data-theme] body.sh .sh-cell .bd-select:hover:not(:disabled){outline:2px solid rgba(20,21,23,.5);outline-offset:-2px}
html[data-theme] body.sh .sh-cell :where(.bd-check:hover,.bd-radio:hover,.bd-check.is-hover) .box,html[data-theme] body.sh .sh-cell .bd-switch:hover .track{outline:2px solid rgba(20,21,23,.6);outline-offset:2px}
html[data-theme] body.sh .sh-cell :where(.bd-check,.bd-radio):is(.is-disabled,:has(input:disabled)):hover .box,html[data-theme] body.sh .sh-cell .bd-switch:is(.is-disabled,:has(input:disabled)):hover .track{outline:0}
/* focus: a ring that cannot be mistaken for rest (Skeuomorph and Retro inputs differed by 2.2 percent of pixels) */
html[data-theme] body.sh .sh-cell :where(.bd-input,.bd-select,.bd-textarea):is(:focus-visible,.is-focus){outline:3px solid #3b5bdb;outline-offset:2px}
/* disabled reads as disabled in every style: one shared dim, not just a text colour */
.bd-check.is-disabled,.bd-radio.is-disabled,.bd-check:has(input:disabled),.bd-radio:has(input:disabled){opacity:.55}


/* copy-apply 2 patents proof line, contact direct line, footer contact links */
.s-logos__proof{margin:22px 0 0;font-size:16px;line-height:1.5;color:var(--bd-fg-2,var(--bd-fg))}
.s-contact__direct{margin:18px 0 0}
.s-contact__direct a,.s-foot__contact a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.ed-hero__lede{margin:14px 0 0;max-width:62ch;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:#fff}
.s-case__cta{margin:0 0 32px}.s-case__cta a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.s-foot__contact a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}}


/* ================= QA apply (design D20, D23; hiring-manager L2) ================= */
.bd-tag,.ed-tag,.ed-strip__tag,.snd .cell .events i{font-size:12px;letter-spacing:.04em}
@media (min-width:901px){.s-cases .bd-card__media{aspect-ratio:auto;height:160px}}
html[data-theme="retro"] .s-hero__plate .bd-display{font-size:clamp(24px,2.8vw,40px)}
html[data-theme="skeuomorph"] #work .bd-btn:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(40,30,15,.45),0 3px 5px rgba(0,0,0,.22),0 12px 20px -10px rgba(0,0,0,.45)}
.s-events__more{margin:16px 0 0;color:var(--bd-fg-3)}
.bd-hp{position:absolute!important;left:-9999px!important}

/* ================= UI WAND one-viewport landing (no scroll) =================
   Scoped to body.is-oneview (index.html only). Stack top to bottom: thin nav
   (wordmark left, credit line right), the workbench hero filling all
   remaining height, the existing bd-bar control bar (fixed, unchanged
   position/behavior), nothing else. #below-hero and #footer stay in the DOM
   via [hidden] (global [hidden]{display:none!important} already covers
   rendering) so the markup survives for a later pass. */
body.is-oneview,html:has(body.is-oneview){height:100%;overflow:hidden}
body.is-oneview{display:flex;flex-direction:column;height:100dvh;height:100vh;min-height:100dvh;min-height:100vh;margin:0}
body.is-oneview .bd-nav{position:relative;inset:auto;flex:none;justify-content:space-between}
body.is-oneview .uiw-nav-credit{font-size:13px;color:var(--bd-fg-3);white-space:nowrap;margin-left:auto}
body.is-oneview .uiw-nav-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
body.is-oneview .s-hero{flex:1 1 auto;min-height:0;height:auto}
body.is-oneview .s-hero__field{position:absolute;inset:0}
body.is-oneview main#main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
@media (max-width:860px){
  body.is-oneview{height:100dvh;height:100vh}
  body.is-oneview .s-hero{min-height:0}
  body.is-oneview .uiw-nav-credit{font-size:11px}
  body.is-oneview .uiw-nav-credit__full{display:none}
  body.is-oneview .uiw-nav-credit__short{display:inline!important}
}
@media (max-width:420px){
  body.is-oneview .bd-nav{flex-wrap:wrap;height:auto;min-height:var(--bd-nav-h);padding-block:8px;row-gap:4px}
  body.is-oneview .uiw-nav-credit{margin-left:0;flex:0 0 100%;text-align:right}
}

/* ---- About / DESIGN.md nav buttons (every page), top right, left of the
   credit line on index. Real bd-btn buttons (About secondary, DESIGN.md
   primary), not the old underlined text links. On index.html at <=390 they
   collapse into a "more" menu (a details/summary kebab) so the one-viewport
   nav never wraps or grows. ---- */
.uiw-nav-pages{display:flex;gap:8px;margin-left:auto;align-items:center}
body.is-oneview .uiw-nav-credit{margin-left:12px}
/* header pages nav outside .is-oneview (about/design/components/sounds/case/privacy):
   sits before the style switch / download / burger group, same gap rhythm as bd-nav__cta. */
.bd-nav .uiw-nav-pages,.dmd-header .uiw-nav-pages{margin-left:0}
.bd-nav__link.is-current,.uiw-nav-pages .bd-btn[aria-current="true"]{box-shadow:var(--bd-sh-ring),var(--bd-sh-inset);background:var(--bd-surface-3)}
/* Back button: far left of the header, before the wordmark */
.bd-btn--back{margin-right:4px}
.bd-btn--back svg{margin-right:-2px}

/* ===== Style menu anchoring on top-of-page headers (design.html, about.html) =====
   .bd-stylemenu's default rule (components.css) opens upward, bottom:calc(100% + 10px),
   built for the control bar that sits at the BOTTOM of index.html's viewport. On
   design.html and about.html the style switch lives in a sticky header at the TOP of
   the page, so opening upward pushes the menu off-screen above the viewport and it
   looks like it never opens. Anchor it downward, under the button, instead. At
   <=860px components.css's :not([style]) rule (!important, fixed to the bottom of
   the viewport) still wins, which is fine: it keeps the menu on-screen on phones too. */
.dmd-header .bd-stylewrap,.about-body .bd-stylewrap{position:relative}
.dmd-header .bd-stylemenu,.about-body .bd-stylemenu{position:absolute;top:calc(100% + 10px);bottom:auto;left:auto;right:0;z-index:30}
.uiw-nav-pages__more{position:relative;margin-left:auto;display:none}
.uiw-nav-pages__more summary{list-style:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--bd-r-sm);cursor:pointer;color:var(--bd-fg-2)}
.uiw-nav-pages__more summary::-webkit-details-marker{display:none}
.uiw-nav-pages__more summary:hover{color:var(--bd-fg);background:color-mix(in srgb,var(--bd-fg) 6%,transparent)}
.uiw-nav-pages__more summary svg{width:18px;height:18px}
.uiw-nav-pages__more[open] summary{background:color-mix(in srgb,var(--bd-fg) 8%,transparent)}
.uiw-nav-pages__more a{display:block;padding:10px 14px;font:600 13px/1 var(--bd-sans);color:var(--bd-fg);text-decoration:none;white-space:nowrap}
.uiw-nav-pages__more a:hover{background:color-mix(in srgb,var(--bd-fg) 6%,transparent)}
body.is-oneview .uiw-nav-pages__more{position:absolute;top:calc(100% + 6px);right:var(--bd-gutter);background:var(--bd-surface);border-radius:var(--bd-r-md);box-shadow:var(--bd-sh-2);padding:6px;min-width:140px}
/* Documented collapse: at <=390px width the two text links hide and a kebab
   "more" button (summary/details, no JS) takes over, positioned right after
   the wordmark; the credit line still sits furthest right, shortened to its
   __short form by the existing <=860px rule above. */
@media (max-width:390px){
  .uiw-nav-pages{display:none}
  .uiw-nav-pages__more{display:block}
}