/* Shared last-layer layout rules for public pages and the learning workspace. */
:root{--site-header-height:82px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--site-header-height) + 16px)}
body{min-width:0;overflow-wrap:break-word}
.reveal{opacity:1;transform:none}
.reveal-ready .reveal:not(.visible){opacity:0;transform:translateY(20px)}
button,input,select,textarea{font-family:inherit}
button,.button{touch-action:manipulation}
textarea{resize:vertical}
img,video,iframe{max-width:100%}
:where(h1,h2,h3,p,a,button,label){overflow-wrap:anywhere}
:where(main,section,article,form,nav,figure,.hero-copy,.program-hero-copy,.portal-columns>section,.panel,.editor-form>*,.record-row>div,.due-row>*,.team-row>div){min-width:0}
:where(button,.button,.text-button,.underlined-link,.footer-links a,.domain-strip a,.share-options a,.portal-back){min-height:44px}
:where(button,.button){min-width:44px;max-width:100%;white-space:normal}
.text-button,.underlined-link,.footer-links a,.domain-strip a,.share-options a{display:inline-flex;align-items:center}
:where(input,select,textarea):focus-visible,:where(a,button,summary):focus-visible{outline:2px solid var(--p,var(--color-primary));outline-offset:3px}
.section-dark :focus-visible,.site-footer :focus-visible,.sidebar :focus-visible{outline-color:var(--y,var(--color-accent))}
.site-header{height:var(--site-header-height);padding-inline:max(5%,env(safe-area-inset-left)) max(5%,env(safe-area-inset-right));gap:20px}
.site-header>.brand{flex:none}
.site-nav>a,.site-nav button,.site-nav summary,.site-header>a:not(.brand){display:inline-flex;align-items:center;min-height:44px}
.site-header .simple-nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px 20px;font-size:14px}
.site-header .simple-nav a{display:inline-flex;align-items:center;min-height:44px}
.site-header>nav:not(.site-nav) a{display:inline-flex;align-items:center;min-height:44px}
.site-footer{padding-left:max(8%,env(safe-area-inset-left));padding-right:max(8%,env(safe-area-inset-right));padding-bottom:max(22px,env(safe-area-inset-bottom))}
.footer-top,.footer-bottom,.footer-summary{min-width:0}
.footer-bottom,.footer-summary{flex-wrap:wrap}
.footer-brand-line{min-width:0}
.program-cta .button{white-space:normal;text-align:center;min-width:0}
.program-hero-art{min-width:0}
.program-hero-art img{display:block}
.program-hero-art,.hero-art{overflow:hidden}
.pathway-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pillar{grid-template-columns:40px minmax(0,1fr);gap:16px}
.format{grid-template-columns:32px minmax(0,1fr);gap:14px}

/* Both faces contribute their natural height, so long CMS copy stays readable. */
.home-minimal .workshop-card-inner,.gallery-card-inner{display:grid;height:auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.home-minimal .workshop-card-face,.gallery-card-face{position:relative;inset:auto;grid-area:1/1;min-width:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.home-minimal .workshop-card-front,.home-minimal .workshop-card-back{min-height:480px}
.home-minimal .workshop-card-back{padding:clamp(22px,3vw,30px)}
.gallery-card-front,.gallery-card-back{min-height:430px}

/* Dynamic viewport height also follows the on-screen keyboard on mobile Safari. */
.modal{top:var(--visual-top,0px);bottom:auto;height:var(--usable-height,100vh);height:var(--usable-height,100dvh);overflow-y:auto;overscroll-behavior:contain;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.modal-panel{min-width:0;max-height:100%;width:min(100%,490px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.program-modal .modal-panel{width:min(100%,520px)}
.modal-close{display:grid;place-items:center;min-width:44px;min-height:44px;top:6px;right:6px;line-height:1;z-index:1}
.modal-panel h2{padding-right:12px}
.modal-panel :is(input,select,textarea){max-width:100%;min-width:0}
.modal-panel :is(.lead-form,.verify-form,.phone-verify-field){min-width:0}
.modal-panel .phone-verify-button{min-height:44px}
.back-to-top{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
.portal-toolbar{flex-wrap:wrap;gap:12px}
.portal-toolbar p{min-width:0;overflow-wrap:anywhere}
.portal-auth-links button{min-height:44px}
.project-actions a,.portal-record>a{display:inline-flex;align-items:center;min-height:44px}
.article-main #article-body{overflow-wrap:anywhere}
.article-main #article-body :is(table,pre){display:block;max-width:100%;overflow-x:auto}
.redirect-page{padding:24px;font:16px/1.5 var(--s,system-ui)}

/* Workspace tables scroll within the panel, not with the whole page. */
.admin-main{min-width:0}
.sidebar{flex-shrink:0}
.table-wrap{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline:2px solid var(--p);outline-offset:3px}
.editor-form label,.image-position-controls{min-width:0}
.editor-form :is(input,select,textarea){min-width:0;max-width:100%}
.form-actions,.panel-actions,.toolbar-actions{flex-wrap:wrap}
.admin-header,.panel-head,.sample-file{flex-wrap:wrap}
.record-row,.due-row,.global-status,.form-message{overflow-wrap:anywhere}
.auth-gate{top:var(--visual-top,0px);bottom:auto;height:var(--usable-height,100vh);height:var(--usable-height,100dvh);overflow-y:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.auth-card{padding:clamp(24px,5vw,42px);max-height:100%;overflow-y:auto}
.image-position-arrows button{width:44px;height:44px}

@media(max-width:1100px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,
  .home-minimal .hero-interest-form input,.home-minimal .hero-interest-form select,
  .editor-form input:not([type=checkbox]),.editor-form select,.editor-form textarea,
  .modal-panel input,.modal-panel select,.modal-panel textarea,.portal-auth-form input{font-size:16px}
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select){min-height:44px}
}

@media(max-width:1100px){
  :root{--site-header-height:calc(70px + env(safe-area-inset-top,0px))}
  .site-header{padding-top:env(safe-area-inset-top);gap:12px}
  .menu-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;font-size:24px}
  .site-nav{position:absolute;top:100%;left:0;right:0;width:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px max(5%,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(5%,env(safe-area-inset-left));background:var(--c,var(--color-background));border-bottom:1px solid var(--l,var(--color-border));max-height:calc(var(--usable-height,100vh) - var(--site-header-height));max-height:calc(var(--usable-height,100dvh) - var(--site-header-height));overflow-y:auto;overscroll-behavior:contain;font-size:24px;line-height:1.2}
  .site-nav.open{display:flex}
  .site-nav a,.site-nav button,.site-nav summary{display:flex;align-items:center;min-height:44px;padding:6px 12px!important;text-align:left}
  .site-nav .nav-submenu a{font-size:24px;line-height:1.2}
  .site-nav .button-small{justify-content:flex-start;min-height:48px}
  .nav-menu{width:100%}
  .nav-submenu{position:static;min-width:0;max-width:100%;box-shadow:none;border:0;border-left:2px solid var(--y);margin:0 10px 4px;padding:0 0 0 10px;transform:none}
  .nav-menu:not([open])>.nav-submenu{display:none}
  .nav-menu[open]>.nav-submenu{display:grid;opacity:1;visibility:visible;pointer-events:auto}
  .home-minimal .hero,.home-minimal.has-running-message .hero{height:auto;min-height:calc(100svh - var(--site-header-height));grid-template-columns:minmax(0,1fr);padding:48px 7%;gap:36px}
  .home-minimal .hero-copy{max-width:740px}
  .home-minimal .hero-copy-managed h1{font-size:clamp(40px,7.5vw,64px)}
  .home-minimal .hero-interest-form{width:100%;max-width:600px;height:auto;min-height:0;margin:0;justify-self:start;align-self:start;grid-template-rows:none;overflow:visible}
  .learning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-minimal .live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .program-hero{grid-template-columns:minmax(0,1fr)}
  .program-hero-copy{min-height:0;padding:64px 7%}
  .program-hero h1{font-size:clamp(42px,7vw,72px)}
  .program-hero-art{min-height:260px;height:clamp(260px,40vw,380px);max-height:380px}
  .pathway-grid,.institutional,.pedagogy,.program-cta{grid-template-columns:minmax(0,1fr)}
  .pathway{min-height:0}
  .institutional,.pedagogy{gap:36px}
  .program-cta .button{justify-self:start}
  .parent-principles{grid-template-columns:minmax(0,1fr)}
  .parent-principles article{min-height:0}
  .projects-toolbar{grid-template-columns:auto minmax(0,1fr)}
  .projects-toolbar span{grid-column:1/-1;justify-self:start}
}

@media(max-width:760px){
  .section,.program-section,.projects-section,.gallery-section{padding:64px 7%}
  .home-minimal .hero{padding-block:40px}
  .home-minimal .hero-copy-managed h1{font-size:clamp(36px,10vw,56px)}
  .home-minimal .hero-copy-managed h1 span{font-size:.85em}
  .home-minimal .hero-pointers{font-size:16px;line-height:1.5}
  .learning-grid,.home-minimal .live-grid,.projects-grid,.areas-grid,.formats{grid-template-columns:minmax(0,1fr)}
  .learning-card{padding:24px}
  .learning-assessment{align-items:flex-start;flex-direction:column;gap:12px}
  .learning-assessment>a{flex:0 1 auto}
  .section-heading.split,.projects-heading,.gallery-heading{display:block}
  .section-heading.split .section-note{max-width:none}
  .program-hero h1,.projects-hero h1,.gallery-hero h1,.portal-heading h1,.article-main h1,.terms-page h1{font-size:clamp(36px,9.5vw,60px)}
  .program-section-heading h2,.pedagogy-intro h2,.institutional h2,.program-cta h2,.compass-copy h2,.projects-heading h2,.gallery-heading h2{font-size:clamp(30px,8vw,46px)}
  .area:nth-child(odd),.format:nth-child(odd){border-right:0;margin-right:0;padding-right:0}
  .program-hero .hero-actions{margin-top:12px}
  .projects-hero,.gallery-hero{padding:64px 7%}
  .projects-toolbar{grid-template-columns:minmax(0,1fr);gap:8px}
  .projects-toolbar span{grid-column:auto}
  .project-actions{flex-wrap:wrap}
  .home-minimal .workshop-card,.home-minimal .workshop-card-inner,.home-minimal .workshop-card-front,.home-minimal .workshop-card-back{min-height:440px}
  .home-minimal .workshop-card-image{height:210px}
  .home-minimal .workshop-card-front h3,.home-minimal .workshop-card-back h3{font-size:clamp(24px,6vw,30px)}
  .footer-brand-line{flex-wrap:wrap;gap:16px}
  .footer-top{column-gap:20px}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}
  .portal-main,.article-main{padding:48px 7%;min-height:calc(100svh - var(--site-header-height))}
  .portal-login{padding:24px;margin-top:28px}
  .portal-columns{grid-template-columns:minmax(0,1fr);gap:24px}
  .modal-panel{padding:30px 20px 24px}
  .modal-panel h2{font-size:clamp(30px,8vw,40px)}
  .editor-form{grid-template-columns:minmax(0,1fr)}
  .editor-form h3,.editor-form .wide,.editor-form .form-actions,.editor-form .form-message{grid-column:1/-1}
  .lead-toolbar input{width:100%;min-width:0;max-width:100%}
  .task-row{align-items:flex-start}
  .task-row select{min-width:0;max-width:100%}
}

@media(max-width:400px){
  .home-minimal .hero-interest-form .interest-fields{grid-template-columns:minmax(0,1fr)}
  .home-minimal .hero-interest-form{padding:24px 18px}
  .phone-verify-field{gap:8px}
  .home-minimal .hero-interest-form .phone-verify-button{padding-inline:12px}
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .footer-brand-block{grid-column:auto}
  .footer-links{align-items:flex-start}
  .footer-social{margin-top:4px}
  .auth-card .button{width:100%}
}

@media(max-width:700px){
  .sidebar{max-width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));overscroll-behavior-x:contain}
  .sidebar button{min-height:44px}
  .admin-main{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .admin-main .panel{padding:16px}
  .admin-main .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .image-position-editor{flex-direction:column;align-items:flex-start}
  .image-position-preview{max-width:100%}
  .sample-file{align-items:flex-start;gap:12px}
  .two-panels,.passed-out-grid{grid-template-columns:minmax(0,1fr)}
}

@media(hover:none){
  .button:hover,.learning-card:hover,.pathway:hover,.project-card:hover,.program-item:hover,.area:hover,.nav-submenu a:hover{transform:none;box-shadow:none}
  .program-item:hover,.area:hover{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-ready .reveal:not(.visible){opacity:1;transform:none}
  .reveal,.button,.pathway,.area,.nav-submenu,.nav-submenu a,.nav-menu summary::after,.gallery-card-inner,.workshop-card-inner{transition:none!important}
}