/*
 * Shared application shell.
 *
 * Migrated routes use one quiet navigation rail, one compact mobile masthead,
 * and one content-aligned footer. Route pages own their internal max-widths;
 * this file only owns the application chrome and its offset.
 */

@media (min-width:981px){
  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ){
    --app-rail-width:144px;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) :is(header.mast,header.mast.is-scrolled){
    position:fixed;
    inset:0 auto 0 0;
    width:var(--app-rail-width);
    height:100svh;
    border:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastin{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin:0;
    padding:30px 26px 26px;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastin > a img{
    height:24px!important;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav{
    width:100%;
    height:auto;
    flex:1 1 auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding-top:54px;
    font-size:16px!important;
    font-weight:480!important;
    letter-spacing:-.018em;
    text-transform:none;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mast-group{
    width:100%;
    display:block;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mast-group + .mast-group{
    margin-top:27px;
    padding-top:22px;
    border-top:1px solid var(--border-default);
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mast-group-label{
    display:block;
    margin-bottom:8px;
    color:var(--text-tertiary);
    font:650 8px/1 var(--font-technical);
    letter-spacing:.11em;
    text-transform:uppercase;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mast-group-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav .lnk{
    width:100%;
    height:auto;
    min-height:43px;
    justify-content:flex-start;
    padding:0;
    color:var(--text-primary)!important;
    background:transparent;
    box-shadow:none;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav .lnk:is(:hover,.here){
    color:var(--brand-ink)!important;
    background:transparent;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav .lnk.here::after{
    display:none;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .key-help{
    width:100%;
    height:40px;
    justify-content:space-between;
    margin:auto 0 0;
    padding:0 8px 0 12px;
    font-size:10px!important;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) :is(.mastnav .btn2.sm,.mast.you-live .mastnav > button.lnk){
    width:100%;
    min-height:42px;
    justify-content:center;
    margin:10px 0 0;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) :is(.landing-page,.catalog-page,.play-page,.profiles-page,.pricing-v5,.docs-page){
    width:calc(100% - var(--app-rail-width));
    margin-left:var(--app-rail-width);
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .page-resource{
    width:calc(100% - var(--app-rail-width));
    margin-left:var(--app-rail-width);
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .bigfoot{
    width:calc(100% - var(--app-rail-width));
    margin-left:var(--app-rail-width);
  }
}

@media (max-width:1180px) and (min-width:981px){
  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ){
    --app-rail-width:128px;
  }
}

@media (max-width:980px){
  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) :is(header.mast,header.mast.is-scrolled){
    position:fixed;
    inset:0 0 auto;
    width:100%;
    height:64px;
    border:0;
    border-bottom:1px solid var(--border-default);
    background:color-mix(in srgb,var(--bg-page) 96%,transparent);
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastin{
    width:100%;
    height:64px;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:0 16px;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav{
    width:auto;
    height:100%;
    flex:0 1 auto;
    flex-direction:row;
    align-items:center;
    gap:0;
    margin-left:auto;
    padding:0;
    font-size:9px!important;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav .lnk{
    width:auto;
    height:100%;
    min-height:0;
    padding-inline:9px;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .key-help{
    width:34px;
    height:34px;
    margin-left:6px;
    padding:0;
    font-size:0!important;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) :is(.mastnav .btn2.sm,.mast.you-live .mastnav > button.lnk){
    width:auto;
    min-height:36px;
    margin:0 0 0 7px;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) :is(.landing-page,.catalog-page,.play-page,.profiles-page,.pricing-v5,.docs-page){
    width:100%;
    margin-left:0;
    padding-top:64px;
  }
}

@media (max-width:620px){
  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav .lnk{
    min-width:28px;
    padding-inline:6px;
    justify-content:center;
    font-size:0!important;
  }

  html[data-design-system="halde"]:is(
    [data-route-bundle="home"],
    [data-route-bundle="feed"],
    [data-route-bundle="play"],
    [data-route-bundle="profiles"],
    [data-route-bundle="pricing"],
    [data-route-bundle="docs"]
  ) .mastnav .lnk::before{
    font-family:var(--font-technical);
    font-size:8px;
    letter-spacing:.04em;
  }

  html[data-design-system="halde"] .mastnav .lnk[href="/feed"]::before{content:"P"}
  html[data-design-system="halde"] .mastnav .lnk[href="/docs"]::before{content:"D"}
  html[data-design-system="halde"] .mastnav .lnk[href="/faq"]::before{content:"?"}
  html[data-design-system="halde"] .mastnav .lnk[href="/profiles"]::before{content:"M"}
  html[data-design-system="halde"] .mastnav .lnk[href="/pricing"]::before{content:"$"}
  html[data-design-system="halde"] .mastnav .lnk[href="/blog"]::before{content:"B"}
}

/* Individual profiles use the same chrome as the directory. Kept as a
   discrete opt-in so routes still awaiting migration cannot inherit it. */
@media (min-width:981px){
  html[data-design-system="halde"][data-route-bundle="profile"]{
    --app-rail-width:144px;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] :is(header.mast,header.mast.is-scrolled){
    position:fixed;
    inset:0 auto 0 0;
    width:var(--app-rail-width);
    height:100svh;
    border:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mastin{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin:0;
    padding:30px 26px 26px;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mastin > a img{height:24px!important}

  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav{
    width:100%;
    height:auto;
    flex:1 1 auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding-top:54px;
    font-size:16px!important;
    font-weight:480!important;
    letter-spacing:-.018em;
    text-transform:none;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mast-group{width:100%;display:block}
  html[data-design-system="halde"][data-route-bundle="profile"] .mast-group + .mast-group{margin-top:27px;padding-top:22px;border-top:1px solid var(--border-default)}
  html[data-design-system="halde"][data-route-bundle="profile"] .mast-group-label{display:block;margin-bottom:8px;color:var(--text-tertiary);font:650 8px/1 var(--font-technical);letter-spacing:.11em;text-transform:uppercase}
  html[data-design-system="halde"][data-route-bundle="profile"] .mast-group-links{display:flex;flex-direction:column;align-items:stretch}

  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav .lnk{
    width:100%;
    height:auto;
    min-height:43px;
    justify-content:flex-start;
    padding:0;
    color:var(--text-primary)!important;
    background:transparent;
    box-shadow:none;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav .lnk:is(:hover,.here){color:var(--brand-ink)!important}
  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav .lnk.here::after{display:none}

  html[data-design-system="halde"][data-route-bundle="profile"] .key-help{
    width:100%;
    height:40px;
    justify-content:space-between;
    margin:auto 0 0;
    padding:0 8px 0 12px;
    font-size:10px!important;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] :is(.mastnav .btn2.sm,.mast.you-live .mastnav > button.lnk){
    width:100%;
    min-height:42px;
    justify-content:center;
    margin:10px 0 0;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] :is(.profile-page,.page-resource,.bigfoot){
    width:calc(100% - var(--app-rail-width));
    margin-left:var(--app-rail-width);
  }
}

@media (max-width:1180px) and (min-width:981px){
  html[data-design-system="halde"][data-route-bundle="profile"]{--app-rail-width:128px}
}

@media (max-width:980px){
  html[data-design-system="halde"][data-route-bundle="profile"] :is(header.mast,header.mast.is-scrolled){
    position:fixed;
    inset:0 0 auto;
    width:100%;
    height:64px;
    border:0;
    border-bottom:1px solid var(--border-default);
    background:color-mix(in srgb,var(--bg-page) 96%,transparent);
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mastin{
    width:100%;
    height:64px;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:0 16px;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav{
    width:auto;
    height:100%;
    flex:0 1 auto;
    flex-direction:row;
    align-items:center;
    gap:0;
    margin-left:auto;
    padding:0;
    font-size:9px!important;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav .lnk{
    width:auto;
    height:100%;
    min-height:0;
    padding-inline:9px;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .key-help{
    width:34px;
    height:34px;
    margin-left:6px;
    padding:0;
    font-size:0!important;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] :is(.mastnav .btn2.sm,.mast.you-live .mastnav > button.lnk){
    width:auto;
    min-height:36px;
    margin:0 0 0 7px;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .profile-page{
    width:100%;
    margin-left:0;
    padding-top:64px;
  }
}

@media (max-width:620px){
  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav .lnk{
    min-width:28px;
    padding-inline:6px;
    justify-content:center;
    font-size:0!important;
  }

  html[data-design-system="halde"][data-route-bundle="profile"] .mastnav .lnk::before{
    font-family:var(--font-technical);
    font-size:8px;
    letter-spacing:.04em;
  }
}

/* Phones trade the cryptic one-letter route rail for a conventional,
   full-label menu. The tablet and desktop navigation remain unchanged. */
@media (max-width:620px){
  html[data-design-system="halde"][data-route-bundle] .mastin{position:relative}
  html[data-design-system="halde"][data-route-bundle] .mastnav{display:none}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu{
    position:relative;
    display:block;
    flex:none;
    width:44px;
    height:44px;
    margin-left:auto;
  }
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    padding:0;
    color:var(--text-primary);
    border:1px solid var(--border-strong);
    background:transparent;
    cursor:pointer;
    list-style:none;
  }
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary::-webkit-details-marker{display:none}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span,
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span::before,
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span::after{
    width:18px;
    height:1px;
    display:block;
    background:currentColor;
    transition:transform .18s ease,opacity .18s ease;
  }
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span{position:relative}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span::before,
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span::after{content:"";position:absolute;left:0}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span::before{transform:translateY(-6px)}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu>summary>span::after{transform:translateY(6px)}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu[open]>summary>span{background:transparent}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu[open]>summary>span::before{transform:rotate(45deg)}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-menu[open]>summary>span::after{transform:rotate(-45deg)}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-panel{
    position:absolute;
    z-index:60;
    top:54px;
    right:-16px;
    width:100vw;
    max-height:calc(100svh - 112px);
    padding:18px 16px 22px;
    overflow:auto;
    color:var(--text-primary);
    border-block:1px solid var(--border-strong);
    background:var(--bg-page);
    box-shadow:0 22px 38px color-mix(in srgb,#000 34%,transparent);
  }
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-group{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-default)}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-group+ .mast-mobile-group{margin-top:18px}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-group>span{grid-column:1/-1;padding:11px 0 9px;color:var(--text-tertiary);font:680 8px/1 var(--font-technical);letter-spacing:.12em}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-group .lnk{
    min-height:50px;
    display:flex;
    align-items:center;
    padding:0 12px;
    color:var(--text-primary);
    border:1px solid var(--border-default);
    margin:-1px 0 0 -1px;
    font:600 15px/1.2 var(--font-editorial);
    text-decoration:none;
  }
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-group .lnk.here{color:var(--text-on-accent);border-color:var(--accent);background:var(--accent)}
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-key-help{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:18px;
    padding:0 14px;
    color:var(--text-secondary);
    border:1px solid var(--border-default);
    background:transparent;
    font:680 9px/1 var(--font-technical);
    letter-spacing:.1em;
    cursor:pointer;
  }
  html[data-design-system="halde"][data-route-bundle] .mast-mobile-key-help kbd{display:grid;place-items:center;width:26px;height:26px;color:var(--text-primary);border:1px solid var(--border-strong);background:transparent;font:650 9px/1 var(--font-technical)}
}