/* Shared screen layout. Vocabulary print documents retain their physical frame. */
@media screen {
  .family-site .family-header {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"brand navigation utilities";
    align-items:center;
    gap:24px;
    padding:20px 30px;
  }
  .family-brand{grid-area:brand;min-width:0}
  .family-header .public-nav-links {
    grid-area:navigation;
    display:flex;
    justify-content:center;
    gap:20px;
    min-width:0;
    font-size:14px;
  }
  .family-header .public-nav-links .nav-extra{display:inline-flex}
  .public-utilities {
    grid-area:utilities;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .public-utilities a,.public-theme-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:44px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface,var(--white));
    color:var(--ink);
    font:inherit;
    font-size:13px;
    padding:0 12px;
    white-space:nowrap;
  }
  .public-utilities .family-teacher-link{color:var(--red);font-weight:700}
  .public-utilities svg,.public-theme-toggle svg{width:18px;height:18px;flex:none}
  .public-theme-toggle{width:44px;padding:0;flex:none;cursor:pointer;position:relative}
  .public-theme-toggle span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .public-utilities .family-account-link span{display:inline}
  .family-site>.public-footer {
    max-width:1140px;
    margin:48px auto 0;
    padding:28px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px 28px;
    flex-wrap:wrap;
  }
  .family-site .public-footer>div:first-child{display:grid;gap:8px;align-items:start;font-size:13px}
  .family-site .public-footer>div:first-child b{font-size:14px}
  .family-site .public-footer .family-socials{margin:0;display:flex;gap:16px}
  .family-site .public-footer .member-footer-policies:empty{display:none}
  .family-site .public-footer .member-footer-policies{width:100%;display:flex;flex-wrap:wrap;gap:16px}
  .public-footer a:focus-visible,.public-theme-toggle:focus-visible,.page-help>summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}

  .staff-login-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);
    gap:48px;
    align-items:center;
    max-width:1000px;
    margin:64px auto 96px;
  }
  .staff-login-intro h1{font-size:clamp(30px,3.2vw,44px);letter-spacing:-1.5px;line-height:1.35;margin:12px 0 20px}
  .staff-login-intro p{font-size:16px;line-height:1.9;color:var(--muted)}
  .staff-entry .login-card{padding:32px;max-width:none;width:100%}
  .staff-entry .login-card h2{font-size:22px}
  .staff-entry .login-card p{font-size:15px;overflow-wrap:anywhere}
  .staff-entry .login-card .btn.primary{width:100%;min-height:48px;font-size:15px;justify-content:center}
  .staff-entry .login-card .form-help{margin-bottom:0;font-size:13px}
  .staff-entry .public-nav-links{font-size:14px;gap:18px;align-items:center}

  .teacher-identity-bar .teacher-header-inner{padding:12px 30px;gap:20px}
  .teacher-identity-bar .brand-logo{width:100px}
  .teacher-identity-bar .brand-name{font-size:16px}
  .teacher-header-tools{gap:12px}
  .teacher-header-tools>.account-menu>summary{min-height:44px}
  #app .teacher-header{top:0}
  .teacher-header .primary-nav{padding:0 28px;gap:4px}
  .teacher-header .primary-nav a{padding:14px 14px 12px;font-size:14px;min-height:48px;white-space:nowrap}
  .account-section-label{font-size:12px;color:var(--muted);margin:4px 0 8px}
  .account-connections .btn{width:100%;justify-content:flex-start;text-align:left;font-size:13px;white-space:normal;line-height:1.6;padding:10px 12px}
  .account-connections{padding:10px 0}
  .account-menu .workspace-settings .account-item{min-height:44px}
  .top-layout .content{padding-top:24px}
  .page-heading{align-items:flex-start;gap:20px;margin-bottom:20px}
  .page-heading h1{font-size:28px;line-height:1.35;letter-spacing:-1px}
  .page-heading p{font-size:14px;line-height:1.7;margin-top:8px;color:var(--muted)}
  .page-heading .heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
  .page-heading .heading-actions:empty{display:none}
  .heading-actions>.btn,.page-help>summary{min-height:44px;font-size:14px}
  .page-help{position:relative;flex:none;font-size:14px}
  .page-help>summary {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    list-style:none;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    cursor:pointer;
    background:var(--surface,var(--white));
    color:var(--muted);
    line-height:1.5;
  }
  .page-help>summary::-webkit-details-marker{display:none}
  .page-help>summary svg{width:17px;height:17px}
  .page-help[open]>summary{color:var(--red);border-color:var(--red)}
  .page-help-panel {
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:35;
    width:min(380px,calc(100vw - 36px));
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 12px 36px #0002;
    padding:20px;
    background:var(--surface,var(--white));
    color:var(--ink);
  }
  .page-help-panel p{font-size:14px;line-height:1.85;margin:10px 0 0}
  .page-context,.directory-overview {
    margin:0 0 20px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface,var(--white));
    overflow:hidden;
  }
  .page-context>summary,.directory-overview>summary{padding:13px 16px;min-height:48px;cursor:pointer;font-size:14px;line-height:1.6}
  .directory-overview>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;list-style:disclosure-closed}
  .directory-overview[open]>summary{border-bottom:1px solid var(--line)}
  .directory-overview .ops-completeness{padding:16px;margin:0}
  .directory-overview .ops-roster-note{margin:0 16px 16px}
  .page-context>p{margin:0;padding:0 16px 12px;font-size:14px;line-height:1.8;color:var(--muted)}
  .report-writing-context{margin-bottom:16px}
  .ops-directory-toolbar .ops-directory-actions{align-items:flex-end}
  .top-layout .toolbar,.schedule-toolbar,.ops-work-top{gap:12px;flex-wrap:wrap}
  .top-layout .toolbar .tabs{max-width:100%;flex-wrap:wrap}
  .top-layout .list-result-count:empty{display:none}
  .top-layout .module-grid,.top-layout .ops-workspace,.top-layout .schedule-detail-layout{min-width:0}

  @media(max-width:1080px){
    .family-site .family-header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand utilities" "navigation navigation";gap:10px 20px;padding-top:16px;padding-bottom:10px}
    .family-header .public-nav-links{justify-content:flex-start;gap:24px;width:100%;font-size:14px}
    .teacher-header .primary-nav a{padding-left:11px;padding-right:11px;font-size:13px}
  }
  @media(max-width:48rem){
    .teacher-identity-bar .teacher-header-inner{padding:10px 16px;flex-wrap:nowrap;justify-content:space-between}
    .teacher-identity-bar .teacher-header-tools{width:auto;margin-left:auto;justify-content:flex-end;flex:none}
    .teacher-header-tools .account-menu>summary{font-size:14px;padding:8px 10px}
    #app .teacher-header{position:static}
    .top-layout .content{padding-top:20px}
    .page-heading{flex-direction:column;gap:14px;margin-bottom:18px}
    .page-heading h1{font-size:25px}
    .page-heading .heading-actions{justify-content:flex-start;width:100%}
    .page-help-panel{left:0;right:auto}
    .directory-overview>summary .subtle{font-size:13px}
    .family-site>.public-footer{margin:32px 20px 0;padding:24px 0;gap:20px}
    .family-site .public-footer .family-socials{flex-wrap:wrap}
    .staff-login-layout{grid-template-columns:minmax(0,1fr);gap:24px;margin:32px auto 56px;max-width:560px}
    .staff-login-intro h1{font-size:30px;margin:8px 0 14px}
    .staff-login-intro p{font-size:15px}
    .staff-entry .login-card{padding:24px}
  }
  @media(max-width:600px){
    .family-site .family-header{padding:14px 16px 8px;gap:8px 10px}
    .family-header .brand-logo-frame,.family-header .brand-divider,.family-header .brand-sub{display:none}
    .family-header .brand-name{font-size:16px;white-space:nowrap}
    .public-utilities{gap:6px}
    .public-utilities a{padding:0 8px;font-size:12px;border-radius:9px;min-height:40px}
    .public-utilities .family-account-link span{display:inline;font-size:12px}
    .public-utilities .family-account-link svg{display:none}
    .public-utilities .family-teacher-link{padding:0 8px}
    .public-theme-toggle{width:36px;min-height:40px;border-radius:9px}
    .family-header .public-nav-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
    .family-header .public-nav-links a{font-size:13px;justify-content:center;white-space:nowrap;min-height:44px}
    .family-site .public-hero{padding-top:32px;gap:28px}
    .staff-entry .public-nav{flex-wrap:nowrap}
  }
}