/* WARIATRIC V263 — Unified Layout Contract | single visual authority for existing shell variants.
   DO NOT edit topology, routing, authorization, clinical forms, images, or approved content here.
   Four variants share tokens, consistent spacing, frame and navigation behavior.
   Scoped after legacy CSS to correct layout without changing approved module styles.
*/
:root {
  --w-shell-surface:#ffffff;
  --w-shell-background:#f5faf8;
  --w-shell-border:#dce9e5;
  --w-shell-ink:#173b45;
  --w-shell-muted:#506a72;
  --w-shell-accent:#087d70;
  --w-shell-accent-hover:#066c62;
  --w-shell-radius:16px;
  --w-shell-spacing-1:4px;
  --w-shell-spacing-2:8px;
  --w-shell-spacing-3:12px;
  --w-shell-spacing-4:16px;
  --w-shell-spacing-6:24px;
  --w-shell-content-max:1320px;
  --w-shell-nav-min-height:72px;
  --w-shell-focus:#067e89;
}
/* Safe universal foundations; never force inner clinical form sizes. */
body[data-w-shell]{color:var(--w-shell-ink);font-family:var(--w-font-family)}
body[data-w-shell] :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--w-shell-focus);outline-offset:3px}
body[data-w-shell] .w-shell-skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:2000;background:var(--w-shell-surface);border:2px solid var(--w-shell-accent);color:var(--w-shell-ink);padding:var(--w-shell-spacing-3) var(--w-shell-spacing-4);border-radius:10px;text-decoration:none}
body[data-w-shell] .w-shell-skip:focus{top:8px}
/* Every sidebar workspace uses the existing state contract: open=236px, collapsed=76px.
   No overlay, no new sidebar event listener, no viewport arithmetic. */
body[data-w-shell="workspace"].baria-app-shell > .baria-page-frame,
body[data-w-shell="public"].baria-app-shell > .baria-page-frame{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
body[data-w-shell="workspace"].baria-app-shell > .baria-page-frame > :is(main,.app-shell),
body[data-w-shell="public"].baria-app-shell > .baria-page-frame > :is(main,.app-shell){min-width:0;max-width:100%;box-sizing:border-box}
/* PUBLIC HEADER — same grid contract for home and all public-nav pages.
   Nav is a single-line scrollable region, NEVER character-wrap menu text.
   The grid changes by available header container width, not viewport width
   (critical with a 236px sidebar). */
body[data-w-shell="public"] :is(.public-nav,.wh-header){background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--w-shell-border);z-index:45}
body[data-w-shell="public"] .public-nav{container-type:inline-size;container-name:w-public-head;position:relative!important}
body[data-w-shell="public"] .public-nav .container.inner{
  width:100%;max-width:var(--w-shell-content-max);min-height:var(--w-shell-nav-min-height);
  height:auto!important;margin-inline:auto;padding:10px 16px!important;
  display:grid!important;grid-template-columns:154px minmax(0,1fr) max-content;
  grid-template-areas:"brand nav actions";gap:10px 18px;align-items:center!important;
  direction:rtl;box-sizing:border-box;
}
body[data-w-shell="public"] .public-nav .inner>.brand{grid-area:brand;display:flex!important;align-items:center!important;min-width:0;max-width:154px;justify-self:start}
body[data-w-shell="public"] .public-nav .inner>.brand img{width:154px!important;height:44px!important;max-width:100%!important;object-fit:contain!important;object-position:right center!important}
body[data-w-shell="public"] .public-nav .inner>.public-links{
  grid-area:nav;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;
  justify-content:flex-start!important;gap:6px!important;min-width:0;max-width:100%;width:100%;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain;
  white-space:nowrap;direction:rtl;padding:2px 0 5px;
}
body[data-w-shell="public"] .public-nav .public-links>a,
body[data-w-shell="public"] .public-nav .top-actions>a{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
  line-height:1.6;text-decoration:none;
}
body[data-w-shell="public"] .public-nav .public-links>a{padding:9px 11px;border-radius:10px;color:var(--w-shell-ink);font-size:var(--w-text-small)}
body[data-w-shell="public"] .public-nav .public-links>a:hover,
body[data-w-shell="public"] .public-nav .public-links>a[aria-current="page"]{background:#edf8f4;color:var(--w-shell-accent)}
body[data-w-shell="public"] .public-nav .inner>.top-actions{
  grid-area:actions;display:flex!important;flex-flow:row nowrap!important;
  justify-content:flex-end!important;align-items:center!important;gap:8px!important;
  margin:0!important;padding:0!important;min-width:0;max-width:100%;
}
body[data-w-shell="public"] .public-nav .top-actions>a{width:auto!important;min-width:0!important;min-height:40px;padding:8px 13px;font-size:var(--w-text-small)}
/* On desktop pages that already have the approved sidebar brand, avoid a duplicate logo.
   Keep the same original logo in DOM for smaller viewports where the sidebar is hidden. */
@media (min-width:901px){
  body[data-w-shell="public"].baria-app-shell .public-nav .inner>.brand{display:none!important}
  body[data-w-shell="public"].baria-app-shell .public-nav .container.inner{
    grid-template-columns:minmax(0,1fr) max-content!important;
    grid-template-areas:"nav actions"!important;
    min-height:64px;
  }
  body[data-w-shell="public"].baria-app-shell .public-nav .inner>.top-actions{justify-self:end!important}
}
/* HOME: same header component tokens, but retains existing wh-* markup and content. */
body[data-w-shell="public"].wariatric-public-home .wh-header{container-type:inline-size;container-name:w-home-head;position:relative!important}
body[data-w-shell="public"].wariatric-public-home .wh-header-inner{
  width:min(100% - 32px,1480px);min-height:var(--w-shell-nav-min-height);
  display:grid!important;grid-template-columns:154px minmax(0,1fr) max-content!important;
  grid-template-areas:"brand nav actions";gap:10px 18px!important;align-items:center!important;
  margin-inline:auto;padding:10px 0!important;direction:rtl;
}
body[data-w-shell="public"].wariatric-public-home .wh-header-inner>.wh-brand{grid-area:brand;min-width:0!important}
body[data-w-shell="public"].wariatric-public-home .wh-brand img{width:154px!important;height:44px!important;object-fit:contain!important}
body[data-w-shell="public"].wariatric-public-home .wh-header-inner>.wh-nav{
  grid-area:nav;display:flex!important;flex-flow:row nowrap!important;justify-content:flex-start!important;
  min-width:0;max-width:100%;width:100%;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scrollbar-width:thin;white-space:nowrap;direction:rtl;gap:4px!important;
  padding:2px 0 5px!important;
}
body[data-w-shell="public"].wariatric-public-home .wh-nav>a{white-space:nowrap!important;word-break:keep-all!important;flex:0 0 auto;padding:9px 10px}
body[data-w-shell="public"].wariatric-public-home .wh-header-inner>.wh-header-actions{
  grid-area:actions;display:flex!important;flex-flow:row nowrap!important;justify-content:flex-end!important;
  align-items:center!important;min-width:0;max-width:100%;width:auto!important;gap:8px!important;margin:0!important;
}
body[data-w-shell="public"].wariatric-public-home .wh-header-actions>.wh-btn{
  white-space:nowrap!important;flex:0 0 auto;max-width:100%;width:auto!important;min-height:40px;word-break:keep-all!important;
}
/* Narrow CONTENT WIDTH, including public pages alongside an expanded sidebar. */
@container w-public-head (max-width:980px){
  body[data-w-shell="public"] .public-nav .container.inner{
    grid-template-columns:154px minmax(0,1fr);grid-template-areas:"brand actions" "nav nav";row-gap:5px;
  }
  body[data-w-shell="public"] .public-nav .inner>.top-actions{justify-self:end}
  body[data-w-shell="public"] .public-nav .inner>.public-links{width:100%;min-height:38px}
}
@container w-public-head (max-width:620px){
  body[data-w-shell="public"] .public-nav .container.inner{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "actions" "nav";
    padding:10px 12px!important;row-gap:6px;
  }
  body[data-w-shell="public"] .public-nav .inner>.brand{justify-self:start}
  body[data-w-shell="public"] .public-nav .inner>.top-actions{width:100%;justify-self:stretch;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  body[data-w-shell="public"] .public-nav .top-actions>a{width:100%!important;min-width:0!important;padding:8px 6px!important}
}
/* HOME responsive matches the exact same 1170 / 620 containment contract. */
@container w-home-head (max-width:1170px){
  body[data-w-shell="public"].wariatric-public-home .wh-header-inner{
    grid-template-columns:154px minmax(0,1fr)!important;grid-template-areas:"brand actions" "nav nav";
    row-gap:6px!important;
  }
  body[data-w-shell="public"].wariatric-public-home .wh-header-inner>.wh-header-actions{justify-self:end}
}
@container w-home-head (max-width:620px){
  body[data-w-shell="public"].wariatric-public-home .wh-header-inner{
    grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"brand" "actions" "nav";
    width:calc(100% - 24px)!important;gap:6px!important;
  }
  body[data-w-shell="public"].wariatric-public-home .wh-header-inner>.wh-header-actions{
    justify-self:stretch;width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;
  }
  body[data-w-shell="public"].wariatric-public-home .wh-header-actions>.wh-btn{
    min-width:0!important;width:100%!important;justify-content:center!important;padding:8px 6px!important;
  }
  body[data-w-shell="public"].wariatric-public-home .wh-header-actions>.wh-btn img{display:none}
}
/* Independently designed nutrition hubs — unified shell rhythm, not public clinical navbar. */
body[data-w-shell="nutrition"] .topbar{background:var(--w-shell-surface);border-bottom:1px solid var(--w-shell-border);container-type:inline-size;container-name:w-nutrition-head}
body[data-w-shell="nutrition"] .topbar>.container{
  display:grid!important;grid-template-columns:154px minmax(0,1fr) max-content;
  grid-template-areas:"brand nav meta";align-items:center;gap:10px 18px;
  width:100%;max-width:var(--w-shell-content-max);min-height:var(--w-shell-nav-min-height);height:auto!important;
  margin-inline:auto;padding:10px 16px!important;direction:rtl;
}
body[data-w-shell="nutrition"] .topbar .brand{grid-area:brand;min-width:0;max-width:154px}
body[data-w-shell="nutrition"] .topbar .brand img{width:154px!important;max-width:100%;height:44px!important;object-fit:contain}
body[data-w-shell="nutrition"] .topbar .topnav{grid-area:nav;display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:6px;overflow-x:auto;overflow-y:hidden;min-width:0;max-width:100%;scrollbar-width:thin;white-space:nowrap}
body[data-w-shell="nutrition"] .topbar .topnav>a{white-space:nowrap!important;word-break:keep-all!important;flex:0 0 auto}
body[data-w-shell="nutrition"] .topbar .top-meta{grid-area:meta;min-width:0;white-space:nowrap}
@container w-nutrition-head (max-width:920px){
  body[data-w-shell="nutrition"] .topbar>.container{grid-template-columns:154px minmax(0,1fr);grid-template-areas:"brand meta" "nav nav"}
  body[data-w-shell="nutrition"] .topbar .topnav{width:100%}
  body[data-w-shell="nutrition"] .topbar .top-meta{justify-self:end}
}
@container w-nutrition-head (max-width:520px){
  body[data-w-shell="nutrition"] .topbar>.container{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "nav";padding:10px 12px!important}
  body[data-w-shell="nutrition"] .topbar .top-meta{display:none}
}
/* Editorial content frame: do not resize cards/forms independently. */
body[data-w-shell="public"] .baria-page-frame>.public-nav + main{min-width:0;max-width:100%}
body[data-w-shell="public"] .baria-page-frame>.public-nav + main>.container{width:100%;max-width:var(--w-shell-content-max);margin-inline:auto}
body[data-w-shell="public"] :is(.fg-hero,.ed-hero,.journey-hero,.faq-hero){max-width:100%;box-sizing:border-box}
/* Short-screen and keyboard protections. */
@media (max-width:400px){
  body[data-w-shell="public"] .public-nav .inner>.top-actions>a{padding-inline:4px!important}
  body[data-w-shell="public"].wariatric-public-home .wh-header-actions>.wh-btn{padding-inline:4px!important}
}
@media (prefers-reduced-motion:reduce){body[data-w-shell] :is(.public-nav,.wh-header,.topbar){scroll-behavior:auto}}