/* KRUART/BAY authentication owner: compact, one-screen-first sign-in.
 * Existing identity, LINE and route-return behavior stay in login.php.
 * Always allow overflow for keyboards, zoom, alerts and small-height devices.
 */
@media screen {
  /* Shared app.css .muted (#7c8984, 3.6:1) is below WCAG AA on auth surfaces. */
  body.login-page .muted { color:var(--kx-muted)!important; }
  body.login-page {
    --kx-navy:#24323B; --kx-action:#B45309; --kx-ink:#24323B;
    --kx-muted:#56646D; --kx-placeholder:#66747C;
    --primary:#FF7A00; --primary-dark:#B45309; --primary-soft:#FFF3E8;
    --text:var(--kx-ink); --muted:var(--kx-muted);
    --line:#E0E3E5; --surface-2:#FBFAF8;
    box-sizing:border-box; min-height:100svh; margin:0;
    font-family:"Noto Sans Thai",sans-serif;
    display:grid; place-items:center;
    padding:clamp(12px,2.5vh,28px) max(16px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    color:var(--text); background:#FBFAF8;
  }
  .login-page .login-wrap {
    width:min(1080px,100%); grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    border:1px solid var(--line); border-radius:22px;
    box-shadow:0 10px 30px rgba(20,61,117,.075);
  }
  .login-page .login-visual {
    padding:40px 36px 224px; background:#FFF7EE;
    color:var(--text); justify-content:flex-start;
  }
  .login-page .login-visual::after {
    inset:auto 0 0; width:100%; height:230px; border-radius:0;
    background:url('visuals/kruart-v2/hero/desktop/bay-ecosystem-host-welcome-no-text.webp') center / cover no-repeat;
  }
  .login-page .login-illustration { display:none; }
  .login-page .login-visual .eyebrow { color:var(--kx-navy); margin-top:0; }
  .login-page .login-visual h1 { font-size:clamp(26px,2.4vw,34px); line-height:1.5; letter-spacing:0; }
  .login-page .login-visual>p,.login-page .login-features { color:var(--kx-muted); }
  .login-page .login-features { font-size:14px; line-height:1.8; margin-top:12px; }
  .login-page .login-card { padding:clamp(22px,3vw,32px); min-width:0; background:#fff; }
  .login-page .login-school {
    display:grid; grid-template-columns:60px minmax(0,1fr);
    grid-template-rows:auto auto; column-gap:14px;
    text-align:left; align-items:center; margin-bottom:16px;
  }
  .login-page .login-school .brand-mark.large {
    grid-row:1/3; width:60px; height:60px; border-radius:16px;
    background:#fff; border:1px solid var(--line); overflow:hidden;
  }
  .login-page .login-school .brand-mark img {
    display:block; width:100%; height:100%; object-fit:contain; padding:4px;
  }
  .login-page .login-school h2 {
    margin:0; font-size:clamp(18px,2vw,22px); line-height:1.35;
    color:var(--kx-navy); overflow-wrap:anywhere;
  }
  .login-page .login-school p { margin:2px 0 0; font-size:12px; line-height:1.45; color:var(--kx-muted); }
  .login-page .login-destination {
    border:1px solid var(--line); border-radius:16px; background:#FFF9F2;
    padding:12px 14px; margin:0 0 14px;
  }
  .login-page .login-destination-top {
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:4px 8px; margin-bottom:7px;
  }
  .login-page .login-environment {
    font-size:11px; font-weight:750; padding:3px 9px;
    border-radius:999px; line-height:1.45;
  }
  .login-page .login-environment-live { color:#82400D; background:#FFF0DE; }
  .login-page .login-environment-staging { color:#854200; background:#FFF0D8; }
  .login-page .login-step { color:var(--kx-muted); font-size:11px; line-height:1.4; }
  .login-page .login-destination-route { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 9px; }
  .login-page .login-destination-label { color:var(--kx-muted); font-size:12px; line-height:1.5; }
  .login-page .login-destination-route strong {
    font-size:18px; line-height:1.4; color:var(--kx-navy);
    overflow-wrap:anywhere;
  }
  .login-page .login-destination-help {
    margin:4px 0 0; color:var(--kx-muted); font-size:11px; line-height:1.55;
  }
  .login-page .btn { min-height:46px; line-height:1.5; border-radius:12px; }
  .login-page .btn.primary {
    background:var(--kx-action); color:#fff;
    box-shadow:0 5px 14px rgba(122,64,19,.10);
  }
  .login-page .btn.primary:hover { background:var(--kx-navy); }
  .login-page .btn.secondary { color:var(--kx-navy); background:#fff; border-color:#D6D2CB; }
  .login-page .login-line-action { margin:0; }
  .login-page .login-line-note {
    margin:5px 0 0; color:var(--kx-muted); text-align:center;
    font-size:12px; line-height:1.45;
  }
  .login-page .login-password-heading {
    display:flex; align-items:center; gap:10px;
    font-size:12px; color:var(--kx-muted); margin:10px 0 10px;
  }
  .login-page .login-password-heading::before,
  .login-page .login-password-heading::after {
    content:""; height:1px; background:var(--line); flex:1;
  }
  .login-page .login-card>form>label {
    display:block; font-size:13px; line-height:1.5; margin:7px 0 4px;
  }
  .login-page .input-with-icon input {
    min-height:46px; font-size:16px; color:var(--text);
    background:#fff; border:1px solid #D6D2CB;
    padding-right:72px; border-radius:12px;
  }
  .login-page input::placeholder { color:var(--kx-placeholder); opacity:1; }
  .login-page .input-with-icon>span { top:10px; }
  .login-page .password-toggle {
    top:1px; right:3px; min-height:44px; min-width:54px;
    color:var(--kx-navy); background:var(--primary-soft); font-size:13px;
  }
  .login-page .login-options {
    display:flex; justify-content:space-between; flex-wrap:wrap;
    gap:4px 12px; margin:8px 0 10px; font-size:11px;
  }
  .login-page .check {
    display:flex; align-items:center; gap:7px; min-height:44px; font-size:12px;
  }
  .login-page .check input { width:18px; height:18px; accent-color:var(--kx-navy); }
  .login-page .login-options>.muted { font-size:11px; line-height:1.5; }
  .login-page .login-services-back {
    margin:10px 0 0; text-align:center; font-size:13px; line-height:1.5;
  }
  .login-page .login-services-back a { color:var(--kx-navy); text-decoration:underline; text-underline-offset:3px; }
  .login-page .login-version { margin:6px 0 0; font-size:10px; line-height:1.4; }
  .login-page :is(a,button,input):focus-visible {
    outline:3px solid var(--kx-action); outline-offset:3px;
  }
  .login-page .install-app-close { min-width:44px; min-height:44px; }
  .login-page .login-install-banner {
    position:static; transform:none; margin:18px auto 0;
    width:min(680px,100%); flex-wrap:wrap;
  }
  @media(max-width:850px) {
    body.login-page {
      display:grid; place-items:center;
      padding:10px max(12px,env(safe-area-inset-right))
        max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    }
    .login-page .login-visual { display:none; }
    .login-page .login-wrap {
      display:block; width:100%; max-width:460px; margin:auto;
      border-radius:22px;
    }
    .login-page .login-card { padding:18px; }
    .login-page .login-school {
      grid-template-columns:52px minmax(0,1fr); column-gap:12px;
      margin-bottom:12px;
    }
    .login-page .login-school .brand-mark.large {
      width:52px; height:52px; border-radius:14px;
    }
    .login-page .login-school h2 { font-size:clamp(17px,4.6vw,20px); }
    .login-page .login-destination { padding:9px 12px; margin-bottom:12px; }
    .login-page .login-destination-top { margin-bottom:5px; }
    .login-page .login-password-heading { margin:8px 0; }
    .login-page .login-card>form>label { margin:6px 0 3px; }
    .login-page .login-version { display:none; }
  }
  @media(max-width:350px) {
    .login-page .login-card { padding:15px; }
    .login-page .login-school h2 { font-size:17px; }
    .login-page .login-destination-route strong { font-size:16px; }
    .login-page .login-options { gap:2px 8px; }
  }
  /* Small iPhone webviews: omit repeated helper copy, not authentication fields.
     Content can still scroll when keyboard, alerts or larger text demand it. */
  @media(max-width:350px) and (max-height:620px) {
    body.login-page {
      padding:4px max(8px,env(safe-area-inset-right))
        max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    }
    .login-page .login-card { padding:10px 12px; }
    .login-page .login-school {
      grid-template-columns:42px minmax(0,1fr); column-gap:9px;
      margin-bottom:7px;
    }
    .login-page .login-school .brand-mark.large {
      width:42px; height:42px; border-radius:12px;
    }
    .login-page .login-school h2 { font-size:16px; }
    .login-page .login-school p,.login-page .login-line-note { display:none; }
    .login-page .login-destination { padding:7px 9px; margin-bottom:7px; }
    .login-page .login-destination-top { margin-bottom:2px; }
    .login-page .login-destination-route strong { font-size:16px; }
    .login-page .login-password-heading { margin:5px 0; }
    .login-page .login-card>form>label { margin:4px 0 2px; }
    .login-page .login-options { margin:3px 0 5px; }
    .login-page .login-services-back { margin:5px 0 0; }
  }
  @media(prefers-reduced-motion:reduce) {
    .login-page .btn { transition:none; }
  }
}

/* Existing KRUART authentication owner also styles the short PIN lock screen. */
@media screen {
  body.quick-unlock-page { margin:0; background:#F5FAFF; color:#11325F; font-family:"Noto Sans Thai",sans-serif; }
  .quick-unlock-wrap { min-height:100svh; display:grid; place-items:center; padding:24px; }
  .quick-unlock-card { box-sizing:border-box; width:min(100%,410px); padding:clamp(24px,5vw,32px); background:#fff; border:1px solid #DBE8F4; border-radius:22px; box-shadow:0 16px 44px #0b3d9112; text-align:center; }
  .quick-unlock-card .eyebrow { color:#0B3D91; font-weight:850; }
  .quick-unlock-card h1 { font-size:clamp(22px,5vw,30px); line-height:1.5; margin:12px 0; color:#11325F; }
  .quick-unlock-card p { color:var(--kx-muted,#4F6882); line-height:1.7; margin:8px 0 18px; }
  .quick-unlock-card input { box-sizing:border-box; width:100%; text-align:center; letter-spacing:.25em; font-size:24px; min-height:58px; border:1px solid #C7DCEC; border-radius:16px; background:#fff; color:#11325F; margin:6px 0 15px; }
  .quick-unlock-card .btn { width:100%; min-height:48px; border-radius:12px; }
  .quick-unlock-card .btn.primary { background:#176DE5; color:#fff; }
  .quick-unlock-card .btn.secondary { background:#fff; color:#0B3D91; border:1px solid #C7DCEC; }
  .quick-unlock-card .fallback { margin-top:18px; }
  .quick-unlock-card :is(input,button):focus-visible { outline:3px solid #176DE5; outline-offset:3px; }
}

/* Staging uses the existing school identity, auth and layout owner. */
@media screen {
  body.login-page-staging {
    --kx-navy:#7D3C0C;--kx-action:#A64D00;--kx-ink:#24323B;
    --kx-muted:#53636D;--kx-placeholder:#687782;
    --primary:#FF7A00;--primary-dark:#A64D00;--primary-soft:#FFF1E1;
    --text:#24323B;--muted:#53636D;--line:#E9DDD2;--surface-2:#FFF9F2;
    background:radial-gradient(circle at 8% 8%,#FFEBD3 0,transparent 33%),#FBFAF8;
  }
  .login-page-staging .login-wrap {
    width:min(1120px,100%);grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    border:1px solid #E9DDD2;border-radius:28px;
    box-shadow:0 24px 70px rgba(96,61,30,.105);overflow:hidden;
  }
  .login-page-staging .login-visual {
    isolation:isolate;padding:clamp(32px,4vw,50px) clamp(28px,4vw,46px) 265px;
    background:linear-gradient(153deg,#FFFDF9 0%,#FFF1E0 68%,#FFE6CC 100%);
  }
  .login-page-staging .login-visual::after {
    height:252px;
    background:linear-gradient(180deg,rgba(255,247,234,.15),transparent),
      url('visuals/kruart-v2/hero/desktop/bay-ecosystem-host-welcome-no-text.webp') center/cover no-repeat;
  }
  .login-page-staging .login-visual .eyebrow {
    display:inline-flex;align-self:flex-start;padding:7px 11px;
    border-radius:999px;color:#88410B;background:#FFF1DD;border:1px solid #F0D6B6;
    font-size:11px;font-weight:800;letter-spacing:.08em;
  }
  .login-page-staging .login-visual h1 {
    max-width:440px;margin-top:24px;font-size:clamp(29px,3.1vw,43px);
    line-height:1.35;color:#26323A;font-weight:850;
  }
  .login-page-staging .login-visual>p:last-child {
    max-width:420px;font-size:15px;line-height:1.8;color:#59646B;
  }
  .login-page-staging .login-card{background:#fff;padding:clamp(22px,3.2vw,40px);}
  .login-page-staging .staging-intro {
    display:flex;align-items:flex-start;gap:12px;padding:15px 16px;margin:0 0 20px;
    border:1px solid #F2DABF;border-radius:18px;
    background:linear-gradient(120deg,#FFF6E9,#FFFBF7);
  }
  .login-page-staging .staging-intro-symbol {
    display:grid;place-items:center;flex:none;width:38px;height:38px;
    color:#914200;background:#FFE7CC;border-radius:12px;font-size:22px;
  }
  .login-page-staging .staging-intro-copy{min-width:0;}
  .login-page-staging .staging-intro-kicker {
    display:block;color:#995019;font-weight:800;font-size:10px;
    letter-spacing:.09em;line-height:1.6;
  }
  .login-page-staging .staging-intro-copy strong {
    display:block;color:#27333B;font-size:18px;line-height:1.45;
  }
  .login-page-staging .staging-intro-copy p {
    margin:3px 0 0;color:#53636D;font-size:12px;line-height:1.65;
  }
  .login-page-staging .login-destination{background:#FFFBF6;border-color:#EADFD3;}
  .login-page-staging .login-environment-staging{
    color:#88410B;background:#FFE6C8;box-shadow:inset 0 0 0 1px #F0D1AA;
  }
  .login-page-staging .login-destination-route strong,
  .login-page-staging .login-school h2{color:#25323B;}
  .login-page-staging .btn.primary {
    background:#A64D00;color:#fff;box-shadow:0 7px 16px rgba(166,77,0,.13);
  }
  .login-page-staging .btn.primary:hover{background:#873E00;}
  .login-page-staging .btn.secondary{color:#88410B;border-color:#E5CFB5;}
  .login-page-staging :is(a,button,input):focus-visible{outline-color:#A64D00;}
  @media(max-width:850px){
    .login-page-staging .login-wrap{max-width:480px;border-radius:22px;}
    .login-page-staging .login-card{padding:18px;}
    .login-page-staging .staging-intro{padding:12px 13px;gap:10px;margin-bottom:14px;border-radius:15px;}
    .login-page-staging .staging-intro-symbol{width:34px;height:34px;border-radius:10px;}
    .login-page-staging .staging-intro-copy strong{font-size:16px;}
  }
  @media(max-width:350px){
    .login-page-staging .login-card{padding:13px;}
    .login-page-staging .staging-intro{padding:10px;}
  }
  @media(prefers-reduced-motion:reduce){
    .login-page-staging :is(.btn,.login-destination,.staging-intro){transition:none;}
  }
}

/* School services front door, owned by the existing authentication stylesheet.
 * Orange/gray is the school identity; AWH shared spacing and accessibility apply.
 * Keep guest services visible without presenting internal administration as a public menu.
 */
@media screen {
  body.bay-services-page {
    --bay-school-accent:#FF7A00;
    --bay-school-action:#B45309;
    --bay-school-ink:#24323B;
    --bay-school-muted:#56646D;
    --bay-school-line:#E0E3E5;
    --bay-school-surface:#FBFAF8;
    margin:0; padding:0; min-width:0; min-height:100svh;
    color:var(--bay-school-ink); background:var(--bay-school-surface);
    font-family:"Noto Sans Thai",sans-serif;
    font-size:15px; line-height:1.65;
  }
  .bay-services-page * { box-sizing:border-box; }
  .bay-services-page a { text-decoration:none; }
  .bay-services-page a:focus-visible,.bay-services-page input:focus-visible,
  .bay-services-collection>summary:focus-visible { outline:3px solid var(--bay-school-action); outline-offset:3px; }
  .bay-services-page .bay-services-shell { width:min(calc(100% - 36px),1120px); margin-inline:auto; }
  .bay-services-skip { position:absolute;left:12px;top:-80px;z-index:30;background:#fff;padding:12px;border-radius:12px;color:var(--bay-school-action); }
  .bay-services-skip:focus { top:12px; }
  .bay-services-header { min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--bay-school-line); }
  .bay-services-brand { display:flex;align-items:center;gap:11px;min-width:0;color:var(--bay-school-ink); }
  .bay-services-brand-mark { display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:#FFF3E8;border:1px solid #F1E2D8;color:var(--bay-school-action);font-size:20px;font-weight:800;overflow:hidden; }
  .bay-services-brand-mark img { display:block;width:100%;height:100%;object-fit:contain; }
  .bay-services-brand strong { display:block;font-size:17px;color:var(--bay-school-ink);line-height:1.35; }
  .bay-services-brand small { display:block;font-size:12px;line-height:1.45;color:var(--bay-school-muted);overflow-wrap:anywhere; }
  .bay-services-signin { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 14px;flex:none;border-radius:12px;border:1px solid #D1D5D7;background:#fff;color:var(--bay-school-ink);font-size:13px;font-weight:700; }
  .bay-services-signin:hover,.bay-services-signin:focus-visible { border-color:var(--bay-school-action); }
  .bay-services-hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(255px,.78fr);align-items:center;gap:24px;min-height:205px;margin:18px 0 24px;padding:28px 30px;background:linear-gradient(90deg,rgba(255,251,246,.98) 0%,rgba(255,250,243,.94) 44%,rgba(255,248,238,.25) 100%),url('visuals/kruart-v2/hero/desktop/bay-ecosystem-host-welcome-no-text.webp') right center/cover no-repeat;border:1px solid #f1ddc9;border-radius:22px;box-shadow:0 12px 36px rgba(44,57,70,.045);}
  .bay-services-hero-copy {min-width:0;}
  .bay-services-hero-side {display:flex;min-width:0;}
  .bay-services-workspace-entry {display:flex;position:relative;flex-direction:column;justify-content:center;gap:4px;min-height:136px;width:100%;padding:18px 54px 18px 20px;border-radius:16px;background:var(--bay-school-action);color:#fff;transition:transform .22s cubic-bezier(.2,.8,.2,1);}
  .bay-services-workspace-entry:is(:hover,:focus-visible) {color:#fff;transform:translateY(-2px);}
  .bay-services-entry-kicker {font-size:12px;opacity:.88;}
  .bay-services-workspace-entry strong {font-size:21px;line-height:1.4;color:#fff;}
  .bay-services-workspace-entry small {font-size:12px;line-height:1.6;color:#fff;opacity:.92;}
  .bay-services-entry-arrow {position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;}
  .bay-services-role-choices {margin:0 0 24px;padding:18px;border:1px solid #f2e0d0;border-radius:22px;background:linear-gradient(132deg,#fffaf6,#fff 66%);box-shadow:0 12px 32px rgba(46,53,66,.035);}
  .bay-services-role-choices h2 {margin:0 0 12px;font-size:20px;line-height:1.4;color:var(--bay-school-ink);}
  .bay-services-role-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .bay-services-role-link {display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:12px;min-height:98px;padding:14px;border:1px solid #efe5df;border-radius:18px;background:#fff;color:var(--bay-school-ink);box-shadow:0 4px 15px rgba(29,44,65,.04);transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .14s ease;}
  .bay-services-role-link:is(:hover,:focus-visible) {transform:translateY(-2px);border-color:#f2bd8d;color:var(--bay-school-ink);}
  .bay-services-role-icon {display:grid;place-items:center;width:44px;height:44px;border-radius:15px;font-size:23px;font-weight:800;}
  .bay-services-role-icon.is-teacher {color:#b45a0a;background:#fff0dd;}
  .bay-services-role-icon.is-parent {color:#c43d50;background:#ffe9ee;}
  .bay-services-role-icon.is-student {color:#176de5;background:#e6f2ff;}
  .bay-services-role-link strong {display:block;font-size:15px;line-height:1.4;}
  .bay-services-role-link small {display:block;color:var(--bay-school-muted);font-size:11.5px;line-height:1.5;}
  .bay-services-role-arrow {color:#995019;font-size:24px;}
  @media(max-width:850px){.bay-services-role-grid{grid-template-columns:1fr;gap:9px}.bay-services-role-link{min-height:78px;padding:11px 13px}.bay-services-role-choices{padding:15px;border-radius:19px}}
  .bay-services-eyebrow { color:var(--bay-school-action);font-weight:700;font-size:13px; }
  .bay-services-hero h1 { margin:6px 0 8px;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1.27;color:var(--bay-school-ink);font-weight:800; }
  .bay-services-hero p { margin:0;max-width:38ch;color:var(--bay-school-muted);font-size:14px; }
  .bay-services-search { margin:0 0 22px; }
  .bay-services-search label { display:block;margin-bottom:7px;font-size:13px;font-weight:700; }
  .bay-services-search input { display:block;width:100%;min-height:48px;padding:10px 14px;background:#fff;color:var(--bay-school-ink);font:inherit;font-size:16px;border:1px solid #C9CFD1;border-radius:12px; }
  .bay-services-search input::placeholder { color:var(--bay-school-muted);opacity:1; }
  .bay-services-section { margin:0 0 25px; }
  .bay-services-section-heading { display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:11px; }
  .bay-services-section-heading p { margin:0;color:var(--bay-school-muted);font-size:12px; }
  .bay-services-section-heading h2 { margin:1px 0 0;font-size:20px;line-height:1.4;color:var(--bay-school-ink); }
  .bay-services-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .bay-services-quick .bay-services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bay-services-quick .bay-services-card:first-child {grid-column:1/-1;min-height:105px;padding:16px 18px;grid-template-columns:52px minmax(0,1fr) 22px;border:1px solid #eac7aa;background:#fff8f2;border-radius:18px;}
  .bay-services-quick .bay-services-card:first-child .bay-services-card-icon {width:52px;height:52px;}
  .bay-services-quick .bay-services-card:first-child strong {font-size:18px;}
  .bay-services-quick .bay-services-card:not(:first-child) {min-height:76px;}
  .bay-services-card {
    display:grid;grid-template-columns:44px minmax(0,1fr) 15px;
    grid-template-areas:"icon title foot" "icon desc foot";
    align-items:center;column-gap:12px;row-gap:2px;
    min-width:0;min-height:98px;padding:14px;
    background:#fff;border:1px solid var(--bay-school-line);border-radius:14px;color:var(--bay-school-ink);
    box-shadow:none;transition:border-color .14s ease,background-color .14s ease,transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .bay-services-card.is-featured { grid-column:1/-1;min-height:108px;padding:18px;border-color:#E3B58F;border-left:4px solid var(--bay-school-accent);background:#FFF7EF; }
  .bay-services-card.is-featured strong { font-size:clamp(17px,2vw,20px); }
  .bay-services-card.is-featured .bay-services-card-foot { font-size:24px; }
  .bay-services-card:is(:hover,:focus-visible) {border-color:#DEA67E;background:#FFFDFB;transform:translateY(-2px);}
  .bay-services-card[hidden] { display:none; }
  .bay-services-card-icon { grid-area:icon;width:44px;height:44px;display:grid;place-items:center;align-self:center;color:var(--bay-school-action);background:#FFF3E8;border-radius:12px;font-size:22px;line-height:1; }
  .bay-services-card strong { grid-area:title;font-size:15px;line-height:1.4;color:var(--bay-school-ink); }
  .bay-services-card-description { grid-area:desc;font-size:12px;line-height:1.5;color:var(--bay-school-muted);overflow-wrap:anywhere; }
  .bay-services-draft { font-style:normal;color:var(--bay-school-action);font-weight:600; }
  .bay-services-card-foot { grid-area:foot;display:block;min-width:0;color:var(--bay-school-action);font-size:18px;line-height:1; }
  .bay-services-empty { padding:14px;color:var(--bay-school-muted);border:1px dashed #C9CFD1;border-radius:12px; }
  .bay-services-note { padding:12px 0;margin:8px 0 24px;border-top:1px solid var(--bay-school-line);color:var(--bay-school-muted);font-size:12px; }
  .bay-services-footer { display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 0 32px;border-top:1px solid var(--bay-school-line);color:var(--bay-school-muted);font-size:12px; }
  .bay-services-footer a { color:var(--bay-school-action);font-weight:700; }
  .bay-services-collection { margin:0 0 18px;background:#fff;border:1px solid var(--bay-school-line);border-radius:14px;overflow:hidden; }
  .bay-services-collection[hidden],.bay-services-page #open-services[hidden],.bay-services-page #staff-services[hidden] { display:none; }
  .bay-services-collection>summary { display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:12px 16px;cursor:pointer;list-style:none; }
  .bay-services-collection>summary::-webkit-details-marker { display:none; }
  .bay-services-collection>summary>span:first-child { display:grid;gap:2px;min-width:0; }
  .bay-services-collection>summary strong { font-size:15px;color:var(--bay-school-ink); }
  .bay-services-collection>summary small { font-size:12px;color:var(--bay-school-muted); }
  .bay-services-collection>summary>span:last-child { font-size:23px;color:var(--bay-school-action);transition:transform .14s ease; }
  .bay-services-collection[open]>summary>span:last-child { transform:rotate(180deg); }
  .bay-services-collection[open]>summary { border-bottom:1px solid var(--bay-school-line); }
  .bay-services-collection .bay-services-grid { padding:12px; }
  .login-page .login-services-back { margin:18px 0 4px;text-align:center;font-size:14px; }
  .login-page .login-services-back a { color:var(--kx-navy);text-decoration:underline;text-underline-offset:3px; }
  @media(max-width:780px) {
    .bay-services-hero {grid-template-columns:minmax(0,1fr);gap:14px;}
    .bay-services-workspace-entry {min-height:104px;}
  }
  @media(max-width:680px) {
    .bay-services-page .bay-services-shell { width:min(calc(100% - 24px),540px); }
    .bay-services-header { min-height:70px; }
    .bay-services-brand-mark { width:40px;height:40px; }
    .bay-services-brand strong { font-size:16px; }
    .bay-services-signin { padding:7px 10px; }
    .bay-services-hero {margin:14px 0 18px;min-height:148px;padding:20px;border-radius:19px;background-position:58% center;}
    .bay-services-hero h1 {font-size:clamp(26px,7vw,34px);}
    .bay-services-page:not(.is-authenticated) .bay-services-hero-side {display:none;}
    .bay-services-workspace-entry {min-height:95px;padding:14px 48px 14px 16px;}
    .bay-services-workspace-entry strong {font-size:19px;}
    .bay-services-grid,.bay-services-quick .bay-services-grid {grid-template-columns:minmax(0,1fr);gap:9px;}
    .bay-services-page .bay-services-quick .bay-services-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .bay-services-quick .bay-services-card:first-child {grid-column:1/-1;}
    .bay-services-quick .bay-services-card:not(:first-child) {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;min-height:110px;}
    .bay-services-quick .bay-services-card:not(:first-child) .bay-services-card-icon {width:35px;height:35px;font-size:19px;}
    .bay-services-quick .bay-services-card:not(:first-child) .bay-services-card-description,
    .bay-services-quick .bay-services-card:not(:first-child) .bay-services-card-foot {display:none;}
    .bay-services-quick .bay-services-card:not(:first-child) strong {font-size:13px;}
    .bay-services-card:is(:hover,:focus-visible),.bay-services-workspace-entry:is(:hover,:focus-visible) {transform:none;}
    .bay-services-card { min-height:87px;padding:11px 12px; }
    .bay-services-collection .bay-services-grid { padding:10px; }
  }
  @media(prefers-reduced-motion:reduce) {
    .bay-services-card,.bay-services-workspace-entry,.bay-services-collection>summary>span:last-child {transition:none;}
  }
}

/* BAY school-facing entrance: the same school-day visual language as Today.
 * Keep one owner (bay-auth.css), real routes, keyboard support and school identity.
 */
@media screen {
 body.bay-services-page {background:#F7F7F6;color:#29333C;--bay-school-accent:#FF7A00;--bay-school-action:#B45309;--bay-school-ink:#253340;--bay-school-muted:#586b7b}
 .bay-services-page .bay-services-shell{width:min(calc(100% - 38px),1200px)}
 .bay-services-header{min-height:82px;border:0;padding:16px 0}
 .bay-services-brand{gap:12px}
 .bay-services-brand-mark{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid #f0d7bd;box-shadow:0 4px 18px #182e4012}
 .bay-services-brand strong{font-size:clamp(19px,2.2vw,25px);font-weight:900;letter-spacing:-.025em}
 .bay-services-brand small{font-size:12px}
 .bay-services-signin{min-height:46px;border-color:#f2d7bf;color:#b14d0a;background:#fff7ef;border-radius:15px;padding-inline:16px;font-weight:800}
 .bay-services-signin:focus-visible{outline-offset:3px}
 .bay-services-hero{position:relative;isolation:isolate;overflow:hidden;min-height:275px;padding:clamp(25px,3.8vw,48px);margin:8px 0 20px;grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);border:1px solid #c9dbe6;border-radius:27px;background:linear-gradient(90deg,rgba(43,49,55,.97) 0%,rgba(82,68,58,.91) 43%,rgba(188,102,38,.23) 77%,rgba(255,255,255,.02) 100%),url('visuals/kruart-v2/hero/desktop/bay-school-command-center-no-text.webp') 60% center/cover no-repeat;box-shadow:0 12px 29px #142b4217}
 .bay-services-hero-copy{max-width:610px;position:relative;z-index:1}
 .bay-services-eyebrow{color:#fff;font-size:clamp(13px,1.6vw,17px);font-weight:850;text-shadow:0 2px 9px #14374a55}
 .bay-services-hero h1{margin:4px 0 9px;font-size:clamp(33px,5.1vw,57px);line-height:1.2;font-weight:950;color:#fff;letter-spacing:-.035em;text-shadow:0 2px 10px #163d5d48;white-space:nowrap}
 .bay-services-hero h1 em{font-style:normal;color:#ff972f}
 .bay-services-hero p{max-width:40ch;color:#fff;font-weight:700;font-size:clamp(13px,1.35vw,17px);text-shadow:0 2px 10px #163d5d44}
 .bay-services-hero-paths{display:flex;align-items:center;flex-wrap:wrap;gap:5px 0;margin-top:22px}
 .bay-services-hero-paths>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 13px;background:#ffffff18;color:#fff;border:1px solid #ffffff42;font-size:12px;font-weight:750}
 .bay-services-hero-paths>a:first-child{border-radius:13px 0 0 13px}
 .bay-services-hero-paths>a:last-child{border-radius:0 13px 13px 0}
 .bay-services-hero-paths>a:hover,.bay-services-hero-paths>a:focus-visible{background:#ffffff30;color:#fff}
 .bay-services-hero-side{align-items:flex-end;align-self:stretch;justify-content:flex-end}
 .bay-services-workspace-entry{width:min(300px,100%);min-height:132px;border:1px solid #ffffff4d;background:linear-gradient(130deg,#ec6b13,#d95208);box-shadow:0 10px 22px #17364b30;border-radius:19px}
 .bay-services-workspace-entry strong{font-weight:900}
 .bay-services-role-choices{margin:0 0 19px;padding:17px 20px;border-radius:24px;border-color:#e5eaed;background:#fff}
 .bay-services-role-choices h2,.bay-services-section-heading h2{font-size:clamp(18px,2vw,23px);font-weight:900;color:#26323e}
 .bay-services-role-link{min-height:92px;gap:11px;border-radius:18px;border:1px solid #e3e7e9;background:#fafbfc;box-shadow:none}
 .bay-services-role-link strong{font-weight:850}
 .bay-services-role-link:hover{background:#fff8f1}
 .bay-services-section{margin-bottom:18px}
 .bay-services-section-heading{align-items:center;gap:8px}
 .bay-services-section-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:12px;font-weight:800;color:var(--bay-school-action)}
 .bay-services-card{min-height:92px;border-radius:18px;border-color:#e7eaec;background:#fff;box-shadow:0 6px 14px #1a364b08}
 .bay-services-card-icon{width:47px;height:47px;background:#fff0e5;border-radius:15px;font-weight:900}
 .bay-services-card strong{font-weight:850}
 .bay-services-quick .bay-services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bay-services-quick .bay-services-card:first-child{grid-column:auto;min-height:92px;padding:14px;grid-template-columns:44px minmax(0,1fr) 15px;background:#fff6ed}
 .bay-services-quick .bay-services-card:first-child .bay-services-card-icon{width:44px;height:44px}
 .bay-services-quick .bay-services-card:first-child strong{font-size:15px}
 .bay-services-grid{gap:12px}
 .bay-services-collection{border-radius:19px}
 .bay-services-search input{border-radius:15px}
 .bay-services-footer{padding-bottom:max(30px,env(safe-area-inset-bottom))}
 @media(max-width:850px){
  .bay-services-hero{grid-template-columns:1fr;min-height:240px}
  .bay-services-hero-side{justify-content:flex-start}
  .bay-services-workspace-entry{width:min(340px,100%);min-height:95px}
  .bay-services-quick .bay-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 }
 @media(max-width:680px){
  .bay-services-page .bay-services-shell{width:min(calc(100% - 30px),540px)}
  .bay-services-header{min-height:74px;gap:9px;padding:11px 0}
  .bay-services-brand-mark{width:46px;height:46px}
  .bay-services-brand strong{font-size:20px}
  .bay-services-brand small{font-size:11px;white-space:nowrap;max-width:40vw;overflow:hidden;text-overflow:ellipsis}
  .bay-services-signin{min-height:44px;padding:7px 11px;font-size:12px}
  .bay-services-hero{margin:9px 0 15px;min-height:205px;padding:22px 18px 17px;border-radius:25px;background:linear-gradient(90deg,rgba(43,49,55,.97),rgba(85,70,57,.84) 54%,rgba(198,105,41,.07) 100%),url('visuals/kruart-v2/hero/mobile/bay-school-command-center-no-text-mobile.webp') 62% center/cover no-repeat}
  .bay-services-hero h1{font-size:clamp(33px,8.3vw,44px)}
  .bay-services-hero p{font-size:13px;max-width:26ch}
  .bay-services-hero-paths{margin-top:16px;gap:3px}
  .bay-services-hero-paths>a{font-size:11px;min-height:41px;padding:6px 9px;border-radius:11px!important;background:rgba(43,49,55,.5)}
  .bay-services-role-choices{padding:14px;border-radius:22px}
  .bay-services-role-choices h2{margin-bottom:10px}
  .bay-services-role-grid{grid-template-columns:1fr;gap:8px}
  .bay-services-role-link{min-height:69px;padding:9px 11px}
  .bay-services-role-icon{width:42px;height:42px}
  .bay-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bay-services-quick .bay-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bay-services-page .bay-services-quick .bay-services-card:first-child{grid-column:1/-1}
  /* The compact cards must redefine every named grid area when the mobile
     layout changes columns; otherwise the implicit columns misplace content. */
  .bay-services-page .bay-services-quick .bay-services-card:not(:first-child){
    grid-template-columns:40px minmax(0,1fr);
    grid-template-areas:"icon title" "desc desc";
    align-content:center;align-items:center;justify-items:stretch;
    column-gap:9px;row-gap:5px;min-height:118px;padding:12px;
  }
  .bay-services-page .bay-services-quick .bay-services-card:not(:first-child) .bay-services-card-icon{width:40px;height:40px}
  .bay-services-page .bay-services-quick .bay-services-card:not(:first-child) strong{text-align:left;font-size:13px;line-height:1.4}
  .bay-services-page .bay-services-quick .bay-services-card:not(:first-child) .bay-services-card-description{font-size:11px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .bay-services-page .bay-services-quick .bay-services-card:not(:first-child) .bay-services-card-foot{display:none}
  .bay-services-page #open-services .bay-services-card{grid-template-columns:1fr;grid-template-areas:"icon" "title" "desc";justify-items:center;text-align:center;min-height:124px;gap:3px;padding:13px 7px}
  .bay-services-page #open-services .bay-services-card.is-featured{grid-column:1/-1;grid-template-columns:48px 1fr 16px;grid-template-areas:"icon title foot" "icon desc foot";justify-items:start;text-align:left;min-height:89px;border-left:4px solid var(--bay-school-accent)}
  .bay-services-page #open-services .bay-services-card:not(.is-featured) .bay-services-card-foot{display:none}
  /* The last odd card takes both columns instead of leaving half the row blank. */
  .bay-services-page #open-services .bay-services-grid > .bay-services-card:last-child:nth-child(odd){
    grid-column:1/-1;grid-template-columns:48px minmax(0,1fr) 18px;
    grid-template-areas:"icon title foot" "icon desc foot";
    justify-items:stretch;text-align:left;min-height:88px;padding:13px 15px;
  }
  .bay-services-page #open-services .bay-services-grid > .bay-services-card:last-child:nth-child(odd) .bay-services-card-foot{display:block}
  .bay-services-page #open-services .bay-services-card strong{font-size:13px}
  .bay-services-page #open-services .bay-services-card-description{font-size:11px}
 }
 @media(max-width:355px){
  .bay-services-hero-paths>a{font-size:10px;padding-inline:6px}
  .bay-services-brand strong{font-size:17px}
  .bay-services-brand small{font-size:10px}
 }
 @media(prefers-reduced-motion:reduce){.bay-services-page :is(.bay-services-role-link,.bay-services-workspace-entry,.bay-services-card){transition:none}}
}
/* Keep login visually related to the school portal without changing identity flow. */
@media screen and (max-width:850px){
 .login-page:not(.login-page-staging) .login-wrap{overflow:hidden}
 .login-page:not(.login-page-staging) .login-visual{display:flex;min-height:120px;padding:17px 22px;justify-content:center;background:linear-gradient(90deg,#343a40ed,#ad6525ad),url('visuals/kruart-v2/hero/mobile/bay-school-command-center-no-text-mobile.webp') 56% center/cover no-repeat;color:#fff}
 .login-page:not(.login-page-staging) .login-visual::after{display:none}
 .login-page:not(.login-page-staging) .login-visual .eyebrow{color:#fff;font-size:12px}
 .login-page:not(.login-page-staging) .login-visual h1{margin:0;color:#fff;font-size:clamp(23px,6vw,30px);line-height:1.25;font-weight:900}
 .login-page:not(.login-page-staging) .login-visual>p{display:none}
}

/* BAY EXCUSE entry reference — owned by existing bay-auth.css, no parallel theme.
   The hero photograph is a real classroom building published by Ban Aued Yai School:
   https://banauedyai.ac.th/building (2021 school facilities record). */
@media screen {
 body.bay-services-page{background:#F6F7F9;color:#343C44;--bay-school-action:#B45309;--bay-school-accent:#FF7A00;--bay-school-ink:#343C44;font-family:"Noto Sans Thai",sans-serif}
 .bay-services-page .bay-services-shell{width:min(100%,1600px)!important;margin-inline:auto}
 .bay-services-page .bay-services-header{min-height:96px;padding:14px clamp(18px,4.3vw,70px);margin:0;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;border:0;background:rgba(255,255,255,.97);box-shadow:0 4px 20px rgba(35,47,58,.06);position:relative;z-index:30}
 .bay-services-page .bay-services-brand{gap:13px;justify-self:start}
 .bay-services-page .bay-services-brand-mark{width:60px;height:60px;border:0;border-radius:13px;background:#fff;box-shadow:none}
 .bay-services-page .bay-services-brand strong{font-size:clamp(17px,1.6vw,23px);font-weight:900;color:#30363C;letter-spacing:0;white-space:normal}
 .bay-services-page .bay-services-brand small{font-size:12px;color:#596571;white-space:nowrap}
 .bay-entry-header-title{display:flex;align-items:center;gap:13px;min-width:0;border-left:1px solid #D5D8DD;padding-left:26px}
 .bay-entry-header-title strong{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.035em;font-weight:950;line-height:1.18;white-space:nowrap;color:#3F454D}
 .bay-entry-header-title em{font-style:normal;color:#F56A00}
 .bay-entry-header-title small{display:block;font-size:11px;color:#56626F}
 .bay-entry-header-symbol{display:grid;place-items:center;flex:none;width:47px;height:47px;border:3px solid #FF8509;border-radius:13px;color:#F47700;font-size:24px;font-weight:900}
 .bay-entry-top-links{display:flex;gap:10px;align-items:center;justify-self:end;min-width:0}
 .bay-entry-help,.bay-entry-all-systems>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border-radius:24px;border:1px solid #EDF0F2;background:#fff;padding:9px 17px;color:#3D4650;font-size:13px;font-weight:800;box-shadow:0 6px 14px rgba(38,50,65,.08)}
 .bay-entry-help:hover,.bay-entry-all-systems>summary:hover{border-color:#F5B078;color:#B45309}
 .bay-entry-all-systems{position:relative}
 .bay-entry-all-systems>summary::-webkit-details-marker{display:none}
 .bay-entry-all-systems[open]>summary{background:#FFF3E8;border-color:#EFC09A}
 .bay-entry-system-menu{position:absolute;right:0;top:calc(100% + 9px);width:min(330px,calc(100vw - 28px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:12px;background:#fff;border:1px solid #E4E8EA;border-radius:17px;box-shadow:0 20px 50px rgba(31,42,55,.18);z-index:90}
 .bay-entry-system-menu a{padding:10px 12px;min-height:44px;display:flex;align-items:center;border-radius:10px;color:#39434F;font-weight:700;font-size:12px;line-height:1.35}
 .bay-entry-system-menu a:first-child{grid-column:1/-1;background:#FFF1E5;color:#A84707}
 .bay-entry-system-menu a:hover{background:#FFF4EB;color:#A84707}
 .bay-services-page .bay-services-hero{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(330px,.90fr);min-height:565px;align-items:center;gap:clamp(22px,3.5vw,60px);margin:0;padding:48px clamp(24px,5.8vw,94px) 50px;border:0;border-radius:0;box-shadow:none;isolation:isolate;overflow:hidden;background:
   linear-gradient(90deg,rgba(243,249,255,.97) 0%,rgba(244,249,255,.72) 39%,rgba(234,244,253,.44) 67%,rgba(232,243,255,.72) 100%),
   linear-gradient(0deg,rgba(255,246,237,.05),rgba(223,239,251,.10)),
   url('https://banauedyai.ac.th/_files_school/34102711/building/34102711_0_20211021-180442.jpg') 23% 58%/cover no-repeat;
   background-color:#E4F0FA}
 .bay-services-page .bay-services-hero::before{content:"";position:absolute;top:-185px;left:-240px;width:490px;height:350px;background:linear-gradient(135deg,#FF7800,#FF9C3B);border-radius:0 0 95% 0;transform:rotate(-8deg);opacity:.94;z-index:-1;pointer-events:none}
 .bay-services-page .bay-services-hero::after{content:"";position:absolute;inset:auto -6% -115px 34%;height:200px;border-radius:50% 0 0 0;background:linear-gradient(120deg,transparent,#FFB66599 60%,#FF7A00CC);z-index:-1;pointer-events:none}
 .bay-services-page .bay-services-hero-copy{max-width:730px;z-index:1}
 .bay-services-page .bay-services-eyebrow{color:#3E4B55!important;font-size:15px;font-weight:800;text-shadow:none;margin:0 0 14px}
 .bay-entry-brandline{display:flex;align-items:center;gap:24px}
 .bay-entry-calendar{width:93px;height:93px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,#FF9008,#FF6500);color:#fff;font-size:64px;font-weight:900;box-shadow:0 12px 27px rgba(228,106,15,.15)}
 .bay-services-page .bay-services-hero h1{margin:0!important;color:#343C44!important;text-shadow:none!important;white-space:normal;font-size:clamp(46px,5.2vw,78px);line-height:1.05;letter-spacing:-.06em;font-weight:950}
 .bay-services-page .bay-services-hero h1 span{color:#363D46}
 .bay-services-page .bay-services-hero h1 em{color:#FF6500!important}
 .bay-services-page .bay-services-hero p.bay-entry-subtitle{margin:12px 0 0 117px;max-width:none;color:#434B54;font-size:clamp(16px,1.6vw,23px);font-weight:850;line-height:1.3;text-shadow:none}
 .bay-entry-divider{display:block;width:73px;height:5px;margin:24px 0 15px 117px;border-radius:99px;background:#FF7A00}
 .bay-services-page .bay-services-hero p.bay-entry-intro{margin-left:117px;max-width:650px;font-size:clamp(15px,1.4vw,19px);line-height:1.5;font-weight:750;color:#424A53;text-shadow:none}
 .bay-services-page .bay-services-hero-paths{margin:20px 0 0 117px;gap:7px}
 .bay-services-page .bay-services-hero-paths>a{min-height:38px;border-radius:999px!important;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.67);color:#424B55;font-size:12px;padding:6px 12px;box-shadow:0 3px 9px #43576A0A}
 .bay-services-page .bay-services-hero-paths>a:is(:hover,:focus-visible){background:#FFF0E3;color:#9D490E}
 .bay-services-page .bay-services-hero-side{display:flex;align-self:center;justify-content:flex-end;align-items:center;min-width:0}
 .bay-entry-login{width:min(100%,500px);padding:clamp(25px,3.2vw,43px);border-radius:30px;background:rgba(255,255,255,.98);border:1px solid rgba(225,231,236,.9);box-shadow:0 18px 48px rgba(51,64,80,.14);z-index:2}
 .bay-entry-login h2{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.035em;font-weight:950;color:#303841}
 .bay-entry-login-name{margin:5px 0 23px!important;font-size:22px!important;color:#FF6900!important;font-weight:900!important;text-shadow:none!important}
 .bay-entry-login form{display:grid;gap:7px}
 .bay-entry-login form>label{font-size:12px;font-weight:800;color:#4A5660}
 .bay-entry-input{display:flex;align-items:center;gap:10px;min-height:57px;margin-bottom:7px;border:1px solid #C9D0D7;border-radius:14px;background:#fff;padding:0 15px}
 .bay-entry-input:focus-within{border-color:#FF7A00;box-shadow:0 0 0 3px #FF7A0024}
 .bay-entry-input>span{color:#65717D;font-size:23px;flex:none}
 .bay-entry-login input{font-family:inherit;font-size:16px!important;min-width:0}
 .bay-entry-input input{width:100%;min-height:54px;border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:#343C44;padding:0}
 .bay-entry-input input::placeholder{color:#6D7781;opacity:1}
 .bay-entry-eye{min-width:42px;min-height:44px;border:0;background:transparent;color:#5E6C78;font-size:20px;cursor:pointer}
 .bay-entry-submit{width:100%;min-height:59px;margin-top:7px;border:0;border-radius:13px;background:linear-gradient(90deg,#FF6300,#FF9000);color:#fff;font:900 19px "Noto Sans Thai",sans-serif;cursor:pointer;box-shadow:0 8px 18px #D9651126}
 .bay-entry-submit:hover{filter:brightness(.97);transform:translateY(-1px)}
 .bay-entry-login-options{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12px}
 .bay-entry-login-options label{display:flex;align-items:center;gap:7px;color:#3F4C58;font-weight:700;min-height:44px}
 .bay-entry-login-options input{width:17px;height:17px;accent-color:#F56A00}
 .bay-entry-login-options a{color:#BD4C00;font-weight:850}
 .bay-services-page .bay-services-workspace-entry{min-height:215px;width:100%;max-width:440px}
 .bay-entry-tiles{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px;max-width:1270px;margin:-16px auto 10px;padding:0 16px}
 .bay-entry-tiles>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:156px;padding:18px 14px;border:1px solid #ECEFF2;border-radius:30px;background:#fff;box-shadow:0 10px 26px rgba(43,55,68,.11);color:#242E38;text-align:center;transition:transform .18s ease,box-shadow .18s ease}
 .bay-entry-tiles>a:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(43,55,68,.15);color:#A74B0A}
 .bay-entry-tile-symbol{height:48px;display:grid;place-items:center;color:#FF7900;font-size:42px;line-height:1}
 .bay-entry-tiles strong{font-size:clamp(13px,1.25vw,18px);font-weight:900;line-height:1.35;max-width:205px}
 .bay-entry-shortcuts{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px clamp(22px,5vw,80px);margin:8px auto 4px;background:#fff;border-bottom:1px solid #E9EDF0;font-size:12px;color:#5D6B76}
 .bay-entry-shortcuts a{color:#A64A04;font-weight:850}
 .bay-entry-roles{width:min(100% - 36px,1260px);margin:16px auto;border:1px solid #E9EDF0;border-radius:17px;background:#fff;overflow:hidden}
 .bay-entry-roles>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:9px 17px;cursor:pointer;font-size:13px;font-weight:850;color:#3E4853}
 .bay-entry-roles>summary::-webkit-details-marker{display:none}
 .bay-entry-roles[open]>summary{border-bottom:1px solid #E9EDF0}
 .bay-entry-roles .bay-services-role-choices{margin:0;border:0;border-radius:0;box-shadow:none}
 .bay-services-page #open-services,.bay-services-page #staff-services,.bay-services-page .bay-services-search,.bay-services-page #all-services,.bay-services-page .bay-services-note{width:min(100% - 36px,1260px);margin:14px auto}
 .bay-services-page #open-services .bay-services-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .bay-services-page #open-services .bay-services-card.is-featured{grid-column:auto}
 .bay-services-page .bay-services-footer{padding:17px max(22px,5vw);background:#3B444C;color:#fff;border:0;font-size:12px}
 .bay-services-page .bay-services-footer a{color:#FFD0A7}
 .bay-services-page :is(.bay-entry-login button,.bay-entry-tiles a,.bay-entry-all-systems summary,.bay-entry-system-menu a):focus-visible{outline:3px solid #FF7A00;outline-offset:3px}
 @media(max-width:1090px){.bay-services-page .bay-services-header{grid-template-columns:1fr auto}.bay-entry-header-title{display:none}.bay-services-page .bay-services-hero{grid-template-columns:minmax(0,1fr) minmax(310px,.88fr);gap:18px;padding-inline:30px}.bay-entry-calendar{width:68px;height:68px;font-size:47px}.bay-entry-brandline{gap:13px}.bay-services-page .bay-services-hero p.bay-entry-subtitle,.bay-entry-divider,.bay-services-page .bay-services-hero p.bay-entry-intro,.bay-services-page .bay-services-hero-paths{margin-left:82px}.bay-entry-tiles{gap:12px}}
 @media(max-width:760px){.bay-services-page .bay-services-header{min-height:74px;padding:10px 16px;gap:8px;grid-template-columns:minmax(0,1fr) auto}.bay-services-page .bay-services-brand-mark{width:44px;height:44px}.bay-services-page .bay-services-brand strong{font-size:15px}.bay-services-page .bay-services-brand small{font-size:10px}.bay-entry-help{display:none}.bay-entry-all-systems>summary{min-height:44px;padding:6px 12px;font-size:12px;border-radius:14px}.bay-entry-all-systems>summary span:nth-child(2){max-width:95px;line-height:1.25}.bay-services-page .bay-services-hero{grid-template-columns:1fr;gap:18px;min-height:0;padding:32px 18px 26px;background-position:36% center}.bay-services-page .bay-services-hero::before{width:300px;height:200px;top:-140px;left:-140px}.bay-services-page .bay-services-hero::after{display:none}.bay-services-page .bay-services-eyebrow{font-size:13px;margin-bottom:6px}.bay-entry-calendar{width:56px;height:56px;border-radius:13px;font-size:36px}.bay-entry-brandline{gap:12px}.bay-services-page .bay-services-hero h1{font-size:clamp(36px,10vw,54px)}.bay-services-page .bay-services-hero p.bay-entry-subtitle{margin:7px 0 0;font-size:16px}.bay-entry-divider{margin:14px 0 10px;width:52px;height:4px}.bay-services-page .bay-services-hero p.bay-entry-intro{margin:0;font-size:13px;max-width:none}.bay-services-page .bay-services-hero-paths{margin:11px 0 0;gap:5px}.bay-services-page .bay-services-hero-paths>a{min-height:34px;padding:6px 9px;font-size:11px}.bay-services-page .bay-services-hero-side{justify-content:center}.bay-entry-login{width:100%;padding:22px 19px;border-radius:23px;box-shadow:0 12px 28px #34414C23}.bay-entry-login h2{font-size:29px}.bay-entry-login-name{font-size:18px!important;margin-bottom:15px!important}.bay-entry-input{min-height:51px}.bay-entry-input input{min-height:49px}.bay-entry-submit{min-height:52px}.bay-entry-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px auto 8px;padding:0 14px}.bay-entry-tiles>a{min-height:112px;padding:12px 9px;border-radius:20px;gap:3px}.bay-entry-tile-symbol{height:39px;font-size:31px}.bay-entry-tiles strong{font-size:12px;line-height:1.35}.bay-entry-shortcuts{padding:12px 16px;font-size:11px}.bay-services-page #open-services .bay-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bay-services-page #open-services .bay-services-card.is-featured{grid-column:1/-1}.bay-services-page .bay-services-footer{padding-bottom:max(19px,env(safe-area-inset-bottom))}}
 @media(max-width:360px){.bay-services-page .bay-services-brand strong{font-size:13px}.bay-services-page .bay-services-brand small{font-size:9px}.bay-entry-all-systems>summary span:nth-child(2){display:none}.bay-services-page .bay-services-hero h1{font-size:33px}.bay-entry-tiles strong{font-size:11px}}
 @media(prefers-reduced-motion:reduce){.bay-entry-submit,.bay-entry-tiles>a{transition:none!important;transform:none!important}}
}
/* Restore public sign-in at phone widths. The older guest hero rule hides
   the complete hero-side, which now owns the real sign-in panel. */
@media screen and (max-width:760px){
 body.bay-services-page:not(.is-authenticated) .bay-services-hero-side{display:flex!important;align-self:stretch!important;justify-content:center!important}
}
/* BAY teacher entrance · compact, bright, mobile-first refinement.
   Scoped within the existing auth stylesheet and its existing components.
   Guest login and specialist center layouts remain unchanged. */
@media screen {
 body.bay-services-page{
   --bay-entry-orange:#FF7900;--bay-entry-text:#303944;
   --bay-entry-border:#E7E9EC;--bay-entry-surface:#FFF;
   background:#F7F8FA;color:var(--bay-entry-text);
 }
 body.bay-services-page .bay-services-header{
   min-height:76px;padding-block:10px;
   box-shadow:0 3px 16px rgba(36,47,57,.045);
   border-bottom:1px solid var(--bay-entry-border);
 }
 body.bay-services-page .bay-services-hero{
   width:min(calc(100% - 36px),1260px);
   margin:16px auto 12px;min-height:380px;
   border:1px solid #E7E9EC;border-radius:26px;
   padding:30px clamp(20px,4vw,48px);
   box-shadow:0 7px 24px rgba(36,47,57,.055);
   background:
     linear-gradient(100deg,#FFFFFF 0%,rgba(255,255,255,.98) 34%,rgba(255,255,255,.85) 65%,rgba(255,255,255,.72) 100%),
     url('https://banauedyai.ac.th/_files_school/34102711/building/34102711_0_20211021-180442.jpg') center 54%/cover no-repeat;
   background-color:#FFFFFF;
 }
 body.bay-services-page .bay-services-hero::before,
 body.bay-services-page .bay-services-hero::after{display:none}
 body.bay-services-page .bay-services-hero h1{
   font-size:clamp(32px,4vw,52px);letter-spacing:-.045em;
   line-height:1.16;color:#303944!important;text-shadow:none!important;
 }
 body.bay-services-page .bay-services-hero p.bay-entry-subtitle{font-size:clamp(14px,1.3vw,17px);color:#4A5661}
 body.bay-services-page .bay-services-hero p.bay-entry-intro{color:#65717B;font-weight:600;font-size:14px}
 body.bay-services-page .bay-services-hero .bay-services-eyebrow{font-size:13px;color:#596671!important;text-shadow:none}
 body.bay-services-page .bay-entry-calendar{
   width:64px;height:64px;font-size:42px;border-radius:18px;
   background:#FFF1E5;border:1px solid #FFD1AD;color:#F47600;
   box-shadow:none;
 }
 body.bay-services-page .bay-services-hero-paths>a{
   border:1px solid #E8E9EB;background:#FFFFFF;color:#5B646D;
 }
 body.bay-services-page .bay-entry-tiles{
   width:min(calc(100% - 36px),1260px);max-width:1260px;
   margin:0 auto 12px;padding:0;gap:11px;
 }
 body.bay-services-page .bay-entry-tiles>a{
   min-height:112px;padding:13px 10px;border-radius:20px;
   border:1px solid var(--bay-entry-border);
   box-shadow:0 4px 14px rgba(36,47,57,.045);
   background:#FFFFFF;gap:10px;
 }
 body.bay-services-page .bay-entry-tile-symbol{
   display:grid;place-items:center;height:44px;width:44px;
   border-radius:14px;background:#FFF2E7;color:#DF6706;
   font-size:0;
 }
 body.bay-services-page .bay-entry-tile-symbol svg{
   width:24px;height:24px;display:block;
 }
 body.bay-services-page .bay-entry-tiles strong{
   max-width:100%;font-size:14px;line-height:1.4;color:#303944;
   overflow-wrap:normal;word-break:normal;text-wrap:balance;
 }
 body.bay-services-page .bay-entry-tiles>a:is(:hover,:focus-visible){
   border-color:#FFBE8D;box-shadow:0 8px 20px rgba(44,57,70,.08);
 }
 body.bay-services-page .bay-entry-shortcuts{
   width:min(calc(100% - 36px),1260px);
   padding:10px 4px;margin:4px auto 12px;background:transparent;
   border:0;
 }
 body.bay-services-page .bay-services-workspace-entry{
   min-height:98px;max-width:316px;width:100%;
   padding:18px 56px 18px 20px;
   border:1px solid #F4DCC7;border-radius:20px;
   background:linear-gradient(120deg,#FFF8F1,#FFF0E4);
   box-shadow:0 5px 19px rgba(46,57,65,.055);
   color:#333B44;transition:transform .18s ease,border-color .18s ease;
 }
 body.bay-services-page .bay-services-workspace-entry strong{
   color:#A84B0B;font-size:19px;
 }
 body.bay-services-page .bay-services-workspace-entry small,
 body.bay-services-page .bay-services-entry-kicker{color:#67717A;font-size:12px;opacity:1}
 body.bay-services-page .bay-services-entry-arrow{right:17px;font-size:24px;color:#B45111}
 body.bay-services-page .bay-services-workspace-entry:is(:hover,:focus-visible){
   color:#A84B0B;border-color:#F5B67F;
 }
 body.bay-services-page.is-authenticated .bay-services-hero{
   min-height:230px;grid-template-columns:minmax(0,1fr) minmax(240px,.48fr);
 }
 body.bay-services-page.is-authenticated .bay-services-hero p.bay-entry-intro,
 body.bay-services-page.is-authenticated .bay-entry-divider,
 body.bay-services-page.is-authenticated .bay-services-hero-paths{
   display:none;
 }
 body.bay-services-page .bay-services-footer{
   background:#FFFFFF;color:#65717C;border-top:1px solid #E7E9EC;
 }
 body.bay-services-page .bay-services-footer a{color:#AA4D0E}
}
@media screen and (max-width:760px){
 body.bay-services-page .bay-services-header{
   min-height:69px;padding:9px 14px;gap:8px;
 }
 body.bay-services-page .bay-services-brand{gap:8px}
 body.bay-services-page .bay-services-brand-mark{width:42px;height:42px;flex:0 0 42px}
 body.bay-services-page .bay-services-brand strong{font-size:14px;line-height:1.3;max-width:174px}
 body.bay-services-page .bay-services-brand small{font-size:10px;line-height:1.2}
 body.bay-services-page .bay-entry-all-systems>summary{
   min-height:44px;padding:8px 10px;gap:6px;border-radius:14px;
   box-shadow:none;border-color:#E7E9EC;
 }
 body.bay-services-page .bay-services-hero{
   width:calc(100% - 24px);margin:12px auto 12px;
   min-height:0;padding:17px 16px;
   border-radius:22px;gap:11px;
   background:
     linear-gradient(110deg,#FFFFFF 0%,rgba(255,255,255,.98) 47%,rgba(255,255,255,.83) 100%),
     url('https://banauedyai.ac.th/_files_school/34102711/building/34102711_0_20211021-180442.jpg') center/cover no-repeat;
   background-color:#FFFFFF;
 }
 body.bay-services-page .bay-services-hero .bay-services-eyebrow{font-size:11px;margin:0 0 5px}
 body.bay-services-page .bay-entry-brandline{gap:10px}
 body.bay-services-page .bay-entry-calendar{
   width:46px;height:46px;font-size:31px;flex:0 0 46px;border-radius:14px;
 }
 body.bay-services-page .bay-services-hero h1{
   font-size:clamp(29px,8vw,38px);line-height:1.14;
 }
 body.bay-services-page .bay-services-hero p.bay-entry-subtitle{
   margin:7px 0 0;font-size:13px;line-height:1.5;font-weight:700;
 }
 body.bay-services-page .bay-services-hero-side{
   justify-content:stretch;align-items:stretch;
 }
 body.bay-services-page.is-authenticated .bay-services-hero{
   grid-template-columns:minmax(0,1fr);
   min-height:0;gap:11px;padding-block:17px;
 }
 body.bay-services-page.is-authenticated .bay-services-workspace-entry{
   min-height:58px;max-width:none;width:100%;
   border-radius:15px;padding:9px 42px 9px 14px;
   gap:0;box-shadow:none;
 }
 body.bay-services-page.is-authenticated .bay-services-workspace-entry strong{
   font-size:15px;line-height:1.4;
 }
 body.bay-services-page.is-authenticated .bay-services-entry-kicker,
 body.bay-services-page.is-authenticated .bay-services-workspace-entry small{
   display:none;
 }
 body.bay-services-page .bay-entry-tiles{
   width:calc(100% - 24px);grid-template-columns:repeat(2,minmax(0,1fr));
   padding:0;margin:0 auto 10px;gap:9px;
 }
 body.bay-services-page .bay-entry-tiles>a{
   min-height:95px;padding:10px 6px;gap:6px;border-radius:17px;
 }
 body.bay-services-page .bay-entry-tile-symbol{
   width:39px;height:39px;border-radius:12px;
 }
 body.bay-services-page .bay-entry-tile-symbol svg{width:22px;height:22px}
 body.bay-services-page .bay-entry-tiles strong{font-size:12px;line-height:1.35}
 body.bay-services-page .bay-entry-shortcuts{
   width:calc(100% - 24px);padding:7px 3px;margin:1px auto 9px;
   font-size:11px;
 }
 body.bay-services-page #open-services,
 body.bay-services-page #staff-services,
 body.bay-services-page .bay-services-search,
 body.bay-services-page #all-services,
 body.bay-services-page .bay-services-note{
   width:calc(100% - 24px);
 }
 body.bay-services-page input,body.bay-services-page textarea,
 body.bay-services-page select{font-size:16px}
 body.bay-services-page .bay-services-hero-paths{flex-wrap:wrap}
 body.bay-services-page .bay-entry-login{max-width:none}
}
@media screen and (max-width:360px){
 body.bay-services-page .bay-services-brand strong{font-size:12px}
 body.bay-services-page .bay-services-hero h1{font-size:29px}
 body.bay-services-page .bay-entry-tile-symbol{height:35px;width:35px}
 body.bay-services-page .bay-entry-tiles strong{font-size:11px}
}
@media screen and (prefers-reduced-motion:reduce){
 body.bay-services-page .bay-entry-tiles>a,
 body.bay-services-page .bay-services-workspace-entry{transition:none;transform:none}
}

/* 2026 staff entry: task-first orientation, same auth owner; parent access stays separate. */
@media screen {
 body.bay-services-page{background:#F6F7F8;color:#27313B}
 body.bay-services-page .bay-services-header{background:rgba(255,255,255,.97);border-bottom:1px solid #E2E4E8;box-shadow:0 4px 22px #27313B0B}
 body.bay-services-page .bay-services-hero{background-color:#FCFAF8;border-bottom:1px solid #F0DAC5}
 body.bay-services-page .bay-entry-tiles>a{background:#FFFFFF;border:1px solid #E2E4E8;box-shadow:0 8px 22px #27313B0C;border-radius:22px}
 body.bay-services-page .bay-services-card{background:#FFFFFF;border-color:#E2E4E8!important;border-radius:18px;box-shadow:0 5px 18px #27313B0A}
 body.bay-services-page :is(input,select,textarea){font-size:16px}
 body.bay-services-page :is(a,button,input):focus-visible{outline:3px solid #FF7A00;outline-offset:3px}
}
@media screen and (max-width: 850px){
 body.bay-services-page .bay-services-hero{padding-bottom:18px!important}
}


/* Approved BAY EXCUSE X mobile sign-in – one actual school crest, no duplicate
   card title, real school building below accessible controls. No parallel theme. */
@media screen and (max-width:850px){
 body.bay-reference-login:not(.login-page-staging){
   display:block;min-height:100svh;padding:clamp(12px,3vh,22px) max(12px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
   background:linear-gradient(180deg,#FFFFFF 0%,#FFF9F3 100%);color:#29323D;font-family:"Noto Sans Thai",sans-serif;
 }
 .bay-reference-login:not(.login-page-staging) .login-wrap{
   display:block;width:min(100%,448px);max-width:448px;margin:0 auto;border:1px solid #EBE6E1;border-radius:26px;
   overflow:hidden!important;background:#FFFFFF;box-shadow:0 14px 42px #27313B12;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual{
   display:flex!important;min-height:0;padding:24px 19px 10px;flex-direction:column;gap:0;align-items:center;justify-content:center;
   text-align:center;background:#FFFFFF!important;color:#29323D!important;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual::after{display:none!important}
 .bay-reference-login:not(.login-page-staging) .login-illustration{
   display:grid;place-items:center;width:92px;height:92px;margin:0 auto 9px;padding:0;border:0;background:none;box-shadow:none;
 }
 .bay-reference-login:not(.login-page-staging) .login-illustration img{width:92px;height:92px;object-fit:contain;display:block}
 .bay-reference-login:not(.login-page-staging) .login-visual .eyebrow{display:none}
 .bay-reference-login:not(.login-page-staging) .login-visual h1{
   margin:0;color:#29323D!important;font-size:clamp(23px,6vw,30px)!important;font-weight:900;line-height:1.3;letter-spacing:-.035em;text-shadow:none;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual h1 em{font-style:normal;color:#F06B00}
 .bay-reference-login:not(.login-page-staging) .login-visual>p{
   display:block;margin:4px 0 0;color:#626B76!important;font-size:12px;line-height:1.45;
 }
 .bay-reference-login:not(.login-page-staging) .login-card{
   padding:8px 20px 13px;background:#FFFFFF!important;min-width:0;
 }
 .bay-reference-login:not(.login-page-staging) .login-school{display:none}
 .bay-reference-login:not(.login-page-staging) .login-card>form>label{
   display:block;margin:9px 0 4px;font-size:13px;font-weight:750;color:#38424D;
 }
 .bay-reference-login:not(.login-page-staging) .input-with-icon{position:relative;min-width:0}
 .bay-reference-login:not(.login-page-staging) .input-with-icon>span{
   display:grid;place-items:center;position:absolute;left:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:#67717C;z-index:1;
 }
 .bay-reference-login:not(.login-page-staging) .input-with-icon>span svg{width:20px;height:20px;stroke:currentColor}
 .bay-reference-login:not(.login-page-staging) .input-with-icon input{
   display:block;width:100%;box-sizing:border-box;min-height:49px;padding:11px 71px 11px 43px;
   border:1px solid #DDE2E5;border-radius:13px;background:#FAFBFC;color:#29323D;font-size:16px;
 }
 .bay-reference-login:not(.login-page-staging) .input-with-icon input:focus{
   border-color:#E87518;background:#FFFFFF;box-shadow:0 0 0 3px #FF7A0022;
 }
 .bay-reference-login:not(.login-page-staging) .password-toggle{top:3px;right:4px;min-height:43px}
 .bay-reference-login:not(.login-page-staging) .login-card .btn.primary{
   min-height:49px;border:1px solid #EB6800;border-radius:13px;
   background:linear-gradient(105deg,#FF9229,#F56A00)!important;color:#FFFFFF!important;font-size:15px;font-weight:850;
   box-shadow:0 7px 19px #F66D002A;
 }
 .bay-reference-login:not(.login-page-staging) .login-options{margin:8px 0;font-size:11px;gap:5px 10px}
 .bay-reference-login:not(.login-page-staging) .login-password-heading{margin:7px 0}
 .bay-reference-login:not(.login-page-staging) .login-services-back{margin:10px 0 0}
 .bay-reference-login:not(.login-page-staging) .login-version{display:none}
 .bay-reference-login:not(.login-page-staging) .login-wrap::after{
   content:"";display:block;pointer-events:none;width:100%;height:83px;
   background:linear-gradient(180deg,#FFFFFF55 0%,#FFFFFF00 29%),url('https://banauedyai.ac.th/_files_school/34102711/building/34102711_0_20211021-180442.jpg') center 53%/cover no-repeat;
   border-top:1px solid #F3E5D8;
 }
 .bay-reference-login:not(.login-page-staging) .login-destination{
   margin:8px 0 10px;border-radius:12px;padding:9px 12px;background:#FFF6EF;
 }
 .bay-reference-login:not(.login-page-staging) :is(a,button,input):focus-visible{outline:3px solid #FF7A00;outline-offset:2px}
}
@media screen and (max-width:350px){
 .bay-reference-login:not(.login-page-staging) .login-visual{padding-top:14px}
 .bay-reference-login:not(.login-page-staging) .login-illustration,
 .bay-reference-login:not(.login-page-staging) .login-illustration img{width:76px;height:76px}
 .bay-reference-login:not(.login-page-staging) .login-card{padding-inline:14px}
 .bay-reference-login:not(.login-page-staging) .login-wrap::after{height:58px}
}
@media screen and (prefers-reduced-motion:reduce){
 .bay-reference-login:not(.login-page-staging) :is(.btn,.input-with-icon input){transition:none!important;animation:none!important}
}

/* Approved desktop login appearance: no simulated school imagery.
   Scoped to the existing standalone BAY sign-in. Staging and the approved
   school services entrance retain their own established layouts. */
@media screen and (min-width:851px){
 body.bay-reference-login:not(.login-page-staging){
   background:#F6F7F8!important;color:#303840!important;
 }
 .bay-reference-login:not(.login-page-staging) .login-wrap{
   border:1px solid #E6E8EB!important;
   box-shadow:0 18px 52px rgba(39,49,59,.085)!important;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual{
   position:relative;isolation:isolate;
   padding:48px 42px 180px;
   background:linear-gradient(150deg,#FFFFFF 0%,#FFF9F2 56%,#FFE9D3 100%)!important;
   border-right:1px solid #F0E2D6!important;color:#303840!important;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual::after{display:none!important}
 .bay-reference-login:not(.login-page-staging) .login-visual::before{
   content:"✓";display:grid;place-items:center;position:absolute;bottom:37px;left:42px;
   width:104px;height:104px;border-radius:25px;border:2px solid #FFD0A8;
   background:#FFF4E9;color:#F47700;font-size:70px;font-weight:800;line-height:1;
   opacity:.96;pointer-events:none;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual h1{
   color:#303840!important;font-size:clamp(31px,3vw,40px);
   font-weight:900;line-height:1.28;letter-spacing:-.035em;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual h1 em{
   color:#F47700!important;font-style:normal;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual .eyebrow{
   color:#A84B0B!important;
 }
 .bay-reference-login:not(.login-page-staging) .login-visual>p{
   color:#596571!important;
 }
 .bay-reference-login:not(.login-page-staging) .login-card .btn.primary{
   background:linear-gradient(105deg,#FF9229,#F56A00)!important;
   border-color:#EF6C00!important;color:#FFFFFF!important;
   box-shadow:0 8px 22px rgba(243,106,0,.18)!important;
 }
}

/* Existing BAY services entrance: precise iPhone sign-in polish without new
   layouts, photo assets, routes or authentication providers. */
@media screen {
 .bay-services-page .bay-entry-input>span{display:grid;place-items:center;flex:none;width:22px;height:22px;font-size:0}
 .bay-services-page .bay-entry-input>span svg{display:block;width:21px;height:21px;stroke:currentColor}
 .bay-services-page .bay-entry-eye{display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;border-radius:11px}
 .bay-services-page .bay-entry-eye svg{display:block;width:22px;height:22px;stroke:currentColor}
 .bay-services-page .bay-entry-eye [data-eye-slash]{display:none}
 .bay-services-page .bay-entry-eye[aria-pressed="true"] [data-eye-slash]{display:block}
 .bay-services-page .bay-entry-eye:focus-visible{outline:3px solid #FF7A00;outline-offset:2px}
}
@media screen and (max-width:760px) {
 body.bay-services-page:not(.is-authenticated) .bay-services-hero{padding:13px 14px 17px;gap:10px}
 body.bay-services-page:not(.is-authenticated) .bay-services-eyebrow{display:none}
 body.bay-services-page:not(.is-authenticated) .bay-entry-calendar{width:41px;height:41px;flex-basis:41px;font-size:29px}
 body.bay-services-page:not(.is-authenticated) .bay-services-hero h1{font-size:clamp(29px,7.4vw,35px)}
 body.bay-services-page:not(.is-authenticated) .bay-services-hero p.bay-entry-subtitle{margin:5px 0 0;font-size:13px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-divider{width:44px;height:3px;margin:9px 0 8px}
 body.bay-services-page:not(.is-authenticated) .bay-services-hero p.bay-entry-intro{display:none}
 body.bay-services-page:not(.is-authenticated) .bay-services-hero-paths{margin:10px 0 0;gap:6px}
 body.bay-services-page:not(.is-authenticated) .bay-services-hero-paths>a{min-height:40px;padding:7px 10px;font-size:11px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-login{padding:18px 16px 17px;border-radius:22px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-login h2{font-size:26px;line-height:1.2}
 body.bay-services-page:not(.is-authenticated) .bay-entry-login-name{display:none}
 body.bay-services-page:not(.is-authenticated) .bay-entry-login form{gap:5px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-login form>label{font-size:12px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-input{min-height:51px;margin-bottom:5px;padding-inline:11px;gap:8px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-input input{min-height:49px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-submit{min-height:53px;margin-top:6px;font-size:18px}
 body.bay-services-page:not(.is-authenticated) .bay-entry-login-options{margin-top:7px}
}