/* KECB systematic runtime visual contract — DEPLOY-780 */
@layer legacy, system;
@layer system {
  html { color-scheme: light; background: var(--kecb-surface-page); font-size: 16px; }
  body {
    margin: 0;
    background: var(--kecb-surface-page);
    color: var(--kecb-text-primary);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: var(--kecb-type-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
  }
  *, *::before, *::after { box-sizing: border-box; }
  img, svg, video, canvas { max-inline-size: 100%; }
  img, video { block-size: auto; }

  :where(h1,h2,h3,h4) { text-wrap: balance; }
  :where(h1) { font-size: var(--kecb-type-h1); }
  :where(h2) { font-size: var(--kecb-type-h2); }
  :where(h3) { font-size: var(--kecb-type-h3); }
  :where(h4) { font-size: var(--kecb-type-h4); }
  :where(p,li,dd,dt,label,small,figcaption,caption,th,td,summary) { line-height: 1.5; }
  :where(label,small,figcaption,caption) { font-size: var(--kecb-type-meta); }
  :where(main p, main dd, main blockquote) { max-inline-size: var(--kecb-reading-measure); }
  :where(main .lede,main .lead,main .deck,main [class*="-lead"],main [class*="-deck"]) { max-inline-size: var(--kecb-reading-measure-wide); }

  :where(.eyebrow,.kicker,.meta,.overline,[class*="eyebrow"],[class*="kicker"],[class*="-meta"],[class*="__meta"]) {
    font-size: var(--kecb-type-meta);
    line-height: 1.35;
  }
  :where(.surface-light,[class*="surface-light"],[class*="-light"]) :where(.eyebrow,.kicker,[class*="eyebrow"],[class*="kicker"]) { color: var(--kecb-eyebrow-on-light); }
  :where(.surface-dark,[class*="surface-dark"],[class*="-dark"]) :where(.eyebrow,.kicker,[class*="eyebrow"],[class*="kicker"]) { color: var(--kecb-eyebrow-on-dark); }

  :where(button,input,select,textarea) { font: inherit; }
  :where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,
         .btn,.button,[class$="-button"],[class$="__button"],[class~="button"]) {
    min-block-size: var(--kecb-control-height);
    border-radius: var(--kecb-radius-control);
    font-size: var(--kecb-type-small);
  }
  :where(button,.btn,.button,[class$="-button"],[class$="__button"],[class~="button"]) {
    font-weight: var(--kecb-weight-medium);
  }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) {
    border-color: var(--kecb-border-strong);
    background: var(--kecb-color-white);
  }
  :where(button,a,input,select,textarea,summary):focus-visible {
    outline: 3px solid var(--kecb-focus);
    outline-offset: 2px;
  }

  :where(.card,[class$="-card"],[class$="__card"],[class~="card"],.panel,[class$="-panel"],[class$="__panel"]) {
    border-radius: var(--kecb-radius-card);
  }
  :where(dialog,[role="dialog"],.modal,[class*="modal"],.popover,[class*="popover"],.dropdown,[class*="dropdown"]) {
    border-radius: var(--kecb-radius-card);
    box-shadow: var(--kecb-shadow-float);
  }

  :where(table) { border-color: var(--kecb-border); }
  :where(hr) { border: 0; border-block-start: 1px solid var(--kecb-border); }

  /* Explicit layout primitives for all new and migrated markup. */
  .kecb-shell { inline-size: min(var(--kecb-content-max), calc(100% - 2 * var(--kecb-page-gutter))); margin-inline: auto; }
  .kecb-reading-column { inline-size: min(100%, var(--kecb-reading-measure)); }
  .kecb-reading-column--narrow { inline-size: min(100%, var(--kecb-reading-measure-narrow)); }
  .kecb-reading-column--wide { inline-size: min(100%, var(--kecb-reading-measure-wide)); }
  .kecb-fullbleed { inline-size: 100%; max-inline-size: none; }
  .kecb-inset { padding-inline: var(--kecb-page-gutter); }

  @media (max-width: 560px) {
    :root { --kecb-page-gutter: var(--kecb-page-gutter-compact); }
    :where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { min-block-size: 2.75rem; }
  }
}

@layer system {
  /* Shared header owns remaining horizontal space instead of forcing a 100% nav beside the brand. */
  .site-header-v3 > .main-nav-v3,
  .site-header > .main-nav-v3 {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: 0;
    max-inline-size: none;
  }
}

/* DEPLOY-780 systematic edge alignment */
@layer system {
  /*
    Outer-gutter contract: full-bleed section backgrounds remain full width, while
    their content wrappers share one safe alignment line. Existing family max-widths
    continue to win; this only guarantees that a wrapper cannot hug the viewport.
  */
  :where(
    .k2-wrap,.bar2-wrap,.vp-wrap,.spx-wrap,.speakeasy-wrap,.kitchen-wrap,
    .tool-suite-wrap,.edu-wrap,.upgrade-wrap,.system-wrap,.dt-wrap,
    .book-first-wrap,.tonight-wrap,.audience-hub-wrap,.dl-wrap,.artist-halls-wrap,
    .founder-page-wrap,.pulse-wrap,.emerging-wrap,.dir-wrap,.review-wrap,
    .front-door-wrap,.member-account-wrap,.tool-guides-wrap,.content-width,
    .path-start-summary,.path-resume-banner
  ) {
    width: calc(100% - (2 * var(--kecb-page-gutter)));
    margin-inline: auto;
  }

  /* Pages whose main element is itself the content wrapper. */
  :where(
    main.wrap,main.tool-page.wrap,main.tools-index.wrap,main.page-main,
    main.start-here-main,main.simple-help-main,main.calendar-guide,
    main.review-wrap,main.si-wrap,main.front-door-main,
    main.sh-shell,main.tool-guides-main
  ) {
    width: calc(100% - (2 * var(--kecb-page-gutter)));
    margin-inline: auto;
  }

  /* Book readers are a special two-column shell. Keep the rail, but give the
     whole reader breathing room instead of letting the rail/card sit on the edge. */
  main.chapter-layout {
    width: calc(100% - (2 * var(--kecb-page-gutter)));
    margin-inline: auto;
  }
  .chapter-main {
    padding-inline: clamp(1rem, 2.2vw, 2rem);
  }
  .chapter-main > :where(.breadcrumbs,.chapter-tools,.chapter-content,.chapter-pager),
  .chapter-main > article > :where(.chapter-connected-learning,.chapter-connect-cta,.chapter-work-panel,.kecb-semantic-related,.kecb-cross-craft-bridge) {
    margin-inline: auto;
  }

  /* Dense article/recipe families that historically relied on 0–16px outer
     offsets receive the same minimum edge protection without changing their
     reading measure or card widths. */
  :where(main.recipe-page,main.kitchen-article,main.fs-article,main.expansion-main,main.dt-tool-page) {
    width: calc(100% - (2 * var(--kecb-page-gutter)));
    margin-inline: auto;
  }

  @media (max-width: 760px) {
    main.chapter-layout { width: 100%; }
    .chapter-main { padding-inline: var(--kecb-page-gutter); }
  }
}

/* DEPLOY-780 off-canvas reader containment */
@layer system {
  @media (max-width: 1050px) {
    /* A closed table-of-contents rail must be visually and accessibly absent,
       not merely translated beyond the viewport. */
    .book-sidebar:not(.open) {
      visibility: hidden;
      pointer-events: none;
    }
    .book-sidebar.open {
      visibility: visible;
      pointer-events: auto;
    }
  }
}

/* DEPLOY-780 related-content alignment */
@layer system {
  main > :is(.kecb-related,.kecb-related-links,.tool-related-next,.kecb-semantic-related) {
    width: min(var(--kecb-content-max), calc(100% - (2 * var(--kecb-page-gutter))));
    margin-inline: auto;
  }
}


/* DEPLOY-780 final systematic composition closure */
@layer system {
  /* Component contrast owns its own surface. A dark action cannot inherit the
     generic light-surface eyebrow color from an ancestor. */
  .tonight-pr-menu > summary { color: var(--kecb-text-on-action); }
  .tonight-pr-menu > summary .tonight-pr-kicker { color: var(--kecb-text-on-action); }
  .tonight-pr-menu > summary .tonight-pr-prompt { color: var(--kecb-text-on-action-secondary); }
  .tonight-pr-menu > summary .tonight-pr-toggle { color: var(--kecb-text-on-action); }

  /* Pulse sections already contain .pulse-wrap. Keep a single gutter owner so
     the page aligns with the rest of the site instead of double-insetting. */
  main.pulse-main { width: 100%; margin-inline: 0; }

  /* The statewide explorer is a content surface, not a full-bleed background.
     Keep the map, heading, and explanatory copy on the shared content line. */
  main > .verified-texas-explorer {
    width: calc(100% - (2 * var(--kecb-page-gutter)));
    margin-inline: auto;
  }

  /* Injected cross-craft continuity belongs to the same reading shell as the
     content it follows; it may never sit on the viewport edge. */
  main > .kecb-cross-craft-bridge {
    width: min(var(--kecb-reading-measure), calc(100% - (2 * var(--kecb-page-gutter))));
    margin-inline: auto;
  }

  /* Method notes sit outside Booking Intelligence's older .bi-main wrapper.
     Give this direct child the same outer contract explicitly. */
  body.booking-intelligence-page main > [data-bi-method-notes] {
    width: min(var(--kecb-content-max), calc(100% - (2 * var(--kecb-page-gutter))));
    margin-inline: auto;
  }

  /* Large display type stays authoritative without becoming bulky. */
  main h1 { max-inline-size: 22ch; }
}


/* DEPLOY-780 nested mobile wrapper containment */
@layer system {
  @media (max-width: 760px) {
    /* Some legacy families already pad <main> on mobile. Their inner 92–94vw
       wrappers must size to that content box, not to the viewport again. */
    main > .fs-hero .fs-shell,
    main.expansion-main > .wrap,
    main.expansion-main > section > .wrap {
      width: 100%;
      max-inline-size: 100%;
      margin-inline: auto;
    }
    main.expansion-main { padding-inline: 0; }
    body.booking-intelligence-page main > [data-bi-method-notes] { width: 100%; }
  }
}

/* DEPLOY-780 shadow vocabulary closure */
@layer system {
  /* Depth communicates hierarchy only. Decorative inset lines/rings belong to
     borders and state color, not to a second shadow language. */
  :where(.tonight-hero,.sh-hero,.dir-hero,.visual-hero,.artist-halls-hero,.emerging-hero,.dl-hero,.vp-hero),
  :where(input,select,textarea),
  :where(button.is-active,.button.secondary,.spx-button.secondary),
  :where(.card-icon) {
    box-shadow: var(--kecb-shadow-none);
  }
  .pr-library-excerpt--feature { box-shadow: var(--kecb-shadow-card); }
}

/* DEPLOY-780 R88 — browser-measured contrast closure */
@layer system {
  /* Light education heroes must own light-surface text, not legacy on-dark text. */
  .edu-hero.surface-light h1 { color: var(--kecb-text-primary); }
  .edu-hero.surface-light .edu-facts dt { color: var(--kecb-eyebrow-on-light); }

  /* Academy reference/navigation controls sit on a light hero in the active runtime. */
  body.school-page .fs-hero.surface-light .fs-btn:not(.primary) {
    color: var(--kecb-text-primary);
    background: var(--kecb-color-white);
    border-color: var(--kecb-border-strong);
  }

  /* Selected Booking Intelligence mode is a dark action surface. */
  body.booking-intelligence-page .bi-action[aria-pressed="true"] {
    color: var(--kecb-text-on-action);
  }

  /* Expansion bands are light in the consolidated surface system. */
  .expansion-band > .wrap > .section-lead,
  .expansion-band > .wrap > .field-checklist li {
    color: var(--kecb-text-primary);
  }

  /* Number badges own a dark oxblood/red surface across the current system-step family. */
  .system-step > .step-number { color: var(--kecb-text-on-action); }
}

/* DEPLOY-780 R106 — keyboard bypass consistency */
@layer system {
  :where(.skip-link) {
    position: fixed;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 10000;
    transform: translateY(calc(-100% - 1.5rem));
    padding: .65rem .9rem;
    border: 2px solid var(--kecb-focus);
    border-radius: var(--kecb-radius-control);
    background: var(--kecb-color-white);
    color: var(--kecb-text-primary);
    font-size: var(--kecb-type-small);
    font-weight: var(--kecb-weight-bold, 700);
    text-decoration: none;
  }
  :where(.skip-link):focus,
  :where(.skip-link):focus-visible { transform: translateY(0); }
}

/* KECB R110 — Answer First / Depth on Demand global closures */
@layer system {
  .task-first-nav{gap:.12rem}
  .task-first-nav>.task-nav-link{white-space:nowrap}
  .task-more-menu .audience-tree-label{display:block;margin:.55rem .65rem .2rem;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
  .ux-breadcrumb{width:min(1180px,calc(100% - 2rem));margin:.7rem auto 0;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font:700 14px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#655a52}
  .ux-breadcrumb a{color:#5f241d;text-underline-offset:3px}
  .ux-breadcrumb [aria-current="page"]{color:#4b4540}
  .tools-family-card>a:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px var(--kecb-focus-ring,#9c4b2c);border-radius:inherit}
  .academy-full-details details>summary:focus-visible,.guide-full-details details>summary:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px var(--kecb-focus-ring,#9c4b2c);border-radius:6px}
  body.edu-page .edu-hero.surface-dark :is(h1,h2,h3,strong){color:#fff4e2}
  body.edu-page .edu-hero.surface-dark :is(.edu-kicker,.edu-lead,p,li,dd,small){color:#f1e7dc}
  body.edu-page .edu-hero.surface-dark a{color:#fff4e2}
  .theme-speakeasy .spx-section:not(.spx-dark):not(.spx-rust) .spx-kicker,.page-speakeasy .spx-section:not(.spx-dark):not(.spx-rust) .spx-kicker{color:#6b2f21}
  body.kitchen-page .k2-section:not(.k2-dark)>.k2-wrap>.eyebrow,body.kitchen-page .k2-section:not(.k2-dark) .k2-kicker{color:#6b2f21}
  .kitchen-mark{color:#fff;background:#5f241d}
  body .role-field-centers a[href="/directory/"],body .field-center-strip a[href="/directory/"]{color:#5f241d}
  body.dance-halls-page span.section-number,body.dance-halls-page .section-number{color:#6b2f21}
  .vp-live-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1rem}
  .vp-live-actions a{display:inline-flex;align-items:center;min-height:40px;padding:.48rem .68rem;border:1px solid currentColor;border-radius:var(--kecb-radius-card);color:inherit;text-decoration:none;font-weight:800}
}
@media(max-width:760px){
  @layer system {
    .task-first-nav{display:none}
    .audience-mobile-actions{display:none}
    .ux-breadcrumb{width:min(100% - 1.5rem,1180px);margin-top:.45rem;font-size:14px}
    .vp-live-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}
    .vp-live-actions a{min-height:42px;padding:.42rem .35rem;justify-content:center;text-align:center;font-size:14px}
  }
}
@layer system {
  .kecb-handoff-inner{position:relative}
  .kecb-handoff-dismiss{position:absolute;top:.35rem;right:.35rem;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(16,35,63,.18);border-radius:8px;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
  .kecb-handoff-dismiss:hover,.kecb-handoff-dismiss:focus-visible{background:rgba(16,35,63,.08)}
  .kecb-handoff[hidden]{display:none}
}
@layer system {
  body.edu-page .edu-facts-disclosure{max-width:1180px;margin:.7rem auto;padding:0 1rem}
  body.edu-page .edu-facts-disclosure>summary{display:flex;align-items:center;min-height:44px;padding:.55rem .75rem;border:1px solid rgba(16,35,63,.18);border-radius:var(--kecb-radius-card);background:#fffaf4;color:#10233f;cursor:pointer;font-weight:850;list-style:none}
  body.edu-page .edu-facts-disclosure>summary::-webkit-details-marker{display:none}
  body.edu-page .edu-facts-disclosure-body{margin-top:.5rem;padding:.75rem;border:1px solid rgba(16,35,63,.12);border-radius:var(--kecb-radius-card);background:#fff}
  body.edu-page .edu-facts-disclosure-body dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
}
@media(max-width:700px){@layer system{
  body.edu-page .edu-hero{padding-top:1rem;padding-bottom:1rem;min-height:0}
  body.edu-page .edu-facts-disclosure{margin:.5rem auto;padding:0 .75rem}
  body.edu-page .edu-facts-disclosure-body dl{grid-template-columns:1fr 1fr}
}}
/* KECB R110 — residual measured contrast closure */
@layer system {
  body.kitchen-page .k2-hero.surface-light .eyebrow { color:#6b2f21; }
  body.library-page .home-directory-callout a[href="/directory/"] { color:#5f241d; }
  body.heritage-page .heritage-trust-cards article>span { color:#6b2f21; }
}
/* KECB R110 — measured contrast/focus rules must remain unlayered so they can
   correct legacy unlayered family bundles without forceful override flags. */
body.theme-speakeasy .spx-kicker { color:#6b2f21; }
body.kitchen-page .k2-hero.surface-light .eyebrow { color:#6b2f21; }
body.library-page .home-directory-callout a[href="/directory/"] { color:#5f241d; }
body.kitchen-page .kitchen-mark { color:#fff; background:#5f241d; }
body .academy-full-details details>summary:focus-visible,
body .guide-full-details details>summary:focus-visible {
  outline:0;
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px var(--kecb-focus-ring,#9c4b2c);
  border-radius:6px;
}

/* KECB R111 SITEWIDE CONTAINMENT MERGE */
/* KECB DEPLOY-780 R111 — mobile containment and safe-edge closure */
/* Header More menu: anchor inward at the right edge and scroll inside the viewport. */
.site-header-v3 .nav-more{position:relative}
.site-header-v3 .nav-more-menu{inset-inline-start:auto;inset-inline-end:0;left:auto;right:0;max-inline-size:min(360px,calc(100vw - 1rem));max-block-size:calc(100dvh - 4.75rem);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}

:where(.kecb-handoff,.kecb-handoff-inner,.kecb-handoff nav,.vp-live-actions,.vp-related-nav,.vp-related-nav-links,.entity-profile-nav-wrap,.entity-profile-nav,.vad-controls,.vad-tabs,.ux-discovery-rail,.ux-more-actions,[role="tablist"]){box-sizing:border-box;min-inline-size:0;max-inline-size:100%}
.kecb-handoff{inline-size:100%;max-inline-size:100%;overflow:clip}
.kecb-handoff-inner{inline-size:min(1180px,100%);max-inline-size:100%;box-sizing:border-box}
.kecb-handoff p{min-inline-size:0;max-inline-size:100%}
.kecb-handoff p strong{min-inline-size:0;max-inline-size:100%}
.kecb-handoff nav{min-inline-size:0;max-inline-size:100%}
.kecb-handoff-quiet{background:color-mix(in srgb,#fff 99%,#d8c7a5 1%)}
.kecb-handoff-quiet .kecb-handoff-inner{padding-block:.42rem}
.vp-live-actions,.vp-related-nav-links{max-inline-size:100%}
.vp-live-actions a,.vp-related-nav-links a{min-inline-size:0;overflow-wrap:anywhere}
main :where(select,input:not([type="checkbox"]):not([type="radio"]),textarea){max-inline-size:100%;box-sizing:border-box}
@media(max-width:760px){
  .kecb-handoff-inner{inline-size:100%;max-inline-size:100%;padding-inline-start:max(.75rem,env(safe-area-inset-left));padding-inline-end:max(.75rem,env(safe-area-inset-right));margin-inline:0}
  .kecb-handoff p{inline-size:100%;max-inline-size:calc(100% - 2.4rem)}
  .kecb-handoff nav{inline-size:100%;max-inline-size:100%;margin-inline:0;padding:.04rem 1px .18rem;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:0;scrollbar-width:thin;justify-content:flex-start;flex-wrap:nowrap}
  .kecb-handoff nav>*{flex:0 0 auto;max-inline-size:none}
  .kecb-handoff-dismiss{inset-inline-end:max(.35rem,env(safe-area-inset-right))}
  .vp-live-actions{inline-size:100%;max-inline-size:100%;margin-inline:0}
  .vp-live-actions a{inline-size:auto;max-inline-size:100%}
  .vp-related-nav,.vp-related-nav-links,.entity-profile-nav-wrap,.entity-profile-nav,.vad-controls,.vad-tabs,.ux-discovery-rail,.ux-more-actions,[role="tablist"]{inline-size:100%;max-inline-size:100%;margin-inline-start:0;margin-inline-end:0}
  .entity-profile-nav,.vad-tabs,.ux-discovery-rail,[role="tablist"]{overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.25rem}
  .entity-profile-nav>*:first-child,.vad-tabs>*:first-child,.ux-discovery-rail>*:first-child,[role="tablist"]>*:first-child{margin-inline-start:0}
  .ux-discovery-rail{padding-inline:max(.75rem,env(safe-area-inset-left)) max(.75rem,env(safe-area-inset-right))}
  main :where(nav,details,summary,[class*="switcher"],[class*="view-menu"],[class*="view-selector"]){max-inline-size:100%;box-sizing:border-box}
  main :is([class*="switcher"],[class*="view-menu"],[class*="view-selector"]){inline-size:min(100%,calc(100vw - 1.5rem));margin-inline-start:0;margin-inline-end:0}

  body.booking-intelligence-page .bi-tabs{inline-size:100%;max-inline-size:100%;margin-inline:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;flex-wrap:nowrap;justify-content:flex-start;scroll-padding-inline:.25rem}
  body.booking-intelligence-page .bi-tabs>*{flex:0 0 auto;max-inline-size:none}
  body.booking-intelligence-page .bi-tabs>*:first-child{margin-inline-start:0}
}
@media(max-width:420px){
  .vp-live-actions{grid-template-columns:1fr 1fr}
  .vp-live-actions a:last-child:nth-child(odd){grid-column:1/-1}
}

@media(max-width:820px){
  main :is([class*="switcher"],[class*="view-menu"],[class*="view-selector"]){inline-size:min(100%,calc(100vw - 1.5rem));max-inline-size:100%;box-sizing:border-box;margin-inline-start:0;margin-inline-end:0}
}
