/* Jotter 3 sidebar: the page's section tabs live in a frosted-glass panel on the left (desktop) or in a menu
   opened with the three-line button (phone). Shared by every app except Attendance. */
.subnav { background: var(--glass-bg-strong, rgba(255,253,246,.74)); -webkit-backdrop-filter: var(--glass-blur, blur(22px) saturate(170%)); backdrop-filter: var(--glass-blur, blur(22px) saturate(170%));
  border: 1px solid var(--glass-border, rgba(255,255,255,.6)); border-radius: 18px; box-shadow: var(--glass-shadow, 0 10px 36px rgba(46,42,27,.16), inset 0 1px 0 rgba(255,255,255,.55)); }
.subnav nav { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: .15rem; padding: .9rem .7rem; max-width: none; margin: 0; overflow: visible; }
.subnav .grp { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft, #5f583f); margin: 1rem .8rem .3rem; }
.subnav .grp:first-child { margin-top: .1rem; }
.subnav .grp[hidden] { display: none; }
.subnav button { display: block; flex: none; width: 100%; text-align: left; border: 1px solid transparent; border-bottom-width: 1px; border-radius: 999px; background: transparent;
  color: var(--ink, #2e2a1b); font-family: var(--body, inherit); font-weight: 700; font-size: .9rem; padding: .55rem .95rem; margin: 0; cursor: pointer; }
.subnav button:hover { background: rgba(255,255,255,.6); border-color: var(--glass-border, rgba(255,255,255,.6)); color: var(--ink, #2e2a1b); }
.subnav button[aria-current="page"] { color: #fff; background: rgba(63,96,24,.84); border-color: rgba(255,255,255,.35);
  box-shadow: 0 3px 12px rgba(46,42,27,.18), inset 0 1px 0 rgba(255,255,255,.3); }
.nav-toggle { display: none; }
#nav-backdrop { display: none; }
@media (min-width: 861px) {
  /* Menu open: sidebar on the left, the page beside it. (With the menu closed none of this applies, so the page is laid
     out exactly as it was before the sidebar existed: centred.) */
  html:not(.nav-collapsed) body { display: grid; grid-template-columns: 17rem minmax(0, 1fr); align-items: start; column-gap: .5rem; }
  html:not(.nav-collapsed) body > * { grid-column: 2; min-width: 0; }
  html:not(.nav-collapsed) body > header.top, html:not(.nav-collapsed) body > footer { grid-column: 1 / -1; }
  html:not(.nav-collapsed) body > .subnav { grid-column: 1; grid-row: 2 / span 40; position: sticky; top: 1rem; align-self: start; margin: 1.25rem 0 1.25rem 1.25rem; }
  /* Content sits right beside the sidebar instead of floating in the middle of a wide screen. */
  html:not(.nav-collapsed) body > .wrap, html:not(.nav-collapsed) body > * .wrap { margin-left: 0; margin-right: auto; padding-left: 1rem; }
  /* A page-level wrap (like Attendance's reminder bar) is a grid item: auto margins would shrink it, so let it fill the column. */
  html:not(.nav-collapsed) body > .wrap { margin-right: 0; }
  html:not(.nav-collapsed) body:has(> .subnav[hidden]) { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  html:not(.nav-collapsed) body:has(> .subnav[hidden]) > * { grid-column: 1; }
  html:not(.nav-collapsed) body:has(> .subnav[hidden]) .wrap { margin-left: auto; margin-right: auto; padding-left: 1.5rem; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--glass-border, rgba(255,255,255,.6)); border-radius: 999px;
    background: var(--glass-bg-strong, rgba(255,253,246,.74)); -webkit-backdrop-filter: var(--glass-blur, blur(22px)); backdrop-filter: var(--glass-blur, blur(22px)); color: var(--ink, #2e2a1b); font-size: 1.2rem; cursor: pointer; padding: 0; box-shadow: var(--glass-shadow, 0 4px 14px rgba(46,42,27,.14)); }
  .subnav { position: fixed; top: .75rem; left: .75rem; bottom: .75rem; width: 15rem; z-index: 70; transform: translateX(-110%); transition: transform .2s ease; overflow-y: auto; }
  body.nav-open .subnav { transform: none; }
  .subnav[hidden] { display: none; }
  body.nav-open #nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(46,42,27,.35); z-index: 65; }
}
@media print { .nav-toggle, #nav-backdrop, .subnav { display: none !important; } }
/* pull tabs (desktop) */
.nav-tab, #nav-reopen { display: none; }
@media (min-width: 861px) {
  .nav-tab { display: flex; align-items: center; justify-content: center; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); width: 15px; height: 76px;
    border: 1px solid var(--glass-border, rgba(255,255,255,.6)); border-left: 0; border-radius: 0 12px 12px 0; background: var(--glass-bg-strong, rgba(255,253,246,.9));
    box-shadow: 2px 0 8px rgba(46,42,27,.12); color: var(--ink-soft, #5f583f); font-size: 1.25rem; line-height: 1; cursor: pointer; user-select: none; }
  .nav-tab:hover, .nav-tab:focus-visible { width: 20px; right: -20px; color: var(--ink, #2e2a1b); background: #fff; outline: none; }
  #nav-reopen { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 60; width: 14px; height: 76px; align-items: center; justify-content: center;
    border: 1px solid var(--glass-border, rgba(255,255,255,.6)); border-left: 0; border-radius: 0 12px 12px 0; background: var(--glass-bg-strong, rgba(255,253,246,.9));
    box-shadow: 2px 0 8px rgba(46,42,27,.12); color: var(--ink-soft, #5f583f); font-size: 1.25rem; line-height: 1; cursor: pointer; user-select: none; }
  #nav-reopen:hover, #nav-reopen:focus-visible { width: 26px; color: var(--ink, #2e2a1b); background: #fff; outline: none; }
  html.nav-collapsed #nav-reopen { display: flex; }
  html.nav-collapsed body > .subnav { display: none; }
}
/* while the page glides, nothing may spill sideways (no scrollbar flash) */
html.nav-animating, html.nav-animating body { overflow-x: clip; }
/* open / close motion (desktop): the menu and the page are animated from sidebar.js; only the "show menu" tab slides in here */
@keyframes nav-tab-in { from { transform: translate(-100%, -50%); opacity: 0; } to { transform: translateY(-50%); opacity: 1; } }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html.nav-collapsed #nav-reopen { animation: nav-tab-in .32s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
}
@media print { .nav-tab, #nav-reopen { display: none !important; } }
/* dark mode touches */
:root[data-theme="dark"] .subnav button:hover { background: rgba(255,255,255,.1); }
:root[data-theme="dark"] .nav-tab:hover, :root[data-theme="dark"] .nav-tab:focus-visible, :root[data-theme="dark"] #nav-reopen:hover, :root[data-theme="dark"] #nav-reopen:focus-visible { background: #2a2619; }
:root[data-theme="dark"] .subnav button[aria-current="page"] { background: #3f6a19; }

/* ---- top bar (every app): left = back to Jotter + the school; right = what you are working on, then whether it is saved ---- */
header.top .top-left { display: flex; align-items: center; gap: .9rem; margin-right: auto; min-width: 0; }
header.top .top-left .logo-mark { margin-right: 0; flex: none; }
header.top .back-btn { display: inline-flex; align-items: center; gap: .3rem; flex: none; text-decoration: none; color: var(--ink, #2e2a1b); font-weight: 700; font-size: .85rem;
  padding: .4rem .75rem .4rem .6rem; border-radius: 999px; background: var(--glass-bg, rgba(255,253,246,.6)); border: 1px solid var(--glass-border, rgba(255,255,255,.6)); box-shadow: var(--glass-shadow-sm, none); }
header.top .back-btn span { font-size: 1.15rem; line-height: 1; margin-top: -.1em; }
header.top .back-btn .bb-otter { width: 22px; height: 22px; margin: -.2rem .05rem -.2rem -.15rem; flex: none; }
header.top .back-btn:hover { background: #fff; }
header.top .top-actions { gap: .7rem; }
header.top .sync { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px;
  background: var(--glass-bg, rgba(255,253,246,.6)); border: 1px solid var(--glass-border, rgba(255,255,255,.6)); white-space: nowrap; }
@media (max-width: 760px) { header.top .top-left .logo-mark { display: none; } }
@media (max-width: 560px) { header.top .sync { padding: .4rem; } }
:root[data-theme="dark"] header.top .back-btn:hover { background: #2a2619; }

/* ================= shared polish (every app) ================= */
/* Button labels never break over two or three lines; a row of buttons wraps as whole buttons instead. */
.btn, .ghost, button.ghost, a.ghost { white-space: nowrap; max-width: 100%; }
.fmt-group { flex-wrap: wrap; }
/* Dates and short facts in tables stay on one line (the table scrolls sideways if it has to). */
.nowrap { white-space: nowrap; }
/* In a table row, the action buttons sit side by side, not stacked. Anywhere else (a student's page, a panel) they wrap. */
td .row-actions { flex-wrap: nowrap; }
.row-actions { flex-wrap: wrap; }

/* ---- phones ---- */
@media (max-width: 760px) {
  /* Top bar in two rows: (1) menu, back, saved status and its button; (2) the year / term pickers, sharing the width. */
  header.top .top-inner { row-gap: .55rem; column-gap: .5rem; padding-top: .7rem; padding-bottom: .7rem; }
  header.top .top-actions { display: contents; }
  header.top .nav-toggle { order: 1; }
  header.top .top-left { order: 2; margin-right: auto; gap: .6rem; }
  header.top .sync { order: 3; }
  header.top .top-actions > button:not(.nav-toggle), header.top .top-actions > a.ghost { order: 4; }
  header.top .whoami { display: none; }   /* the signed-in name: no room on a phone, and it is on the start page */
  header.top .top-inner::after { content: ""; order: 6; flex-basis: 100%; height: 0; margin-top: -.55rem; }
  header.top .period-pick { order: 7; flex: 1 1 0; min-width: 0; padding: .4rem .65rem; }
  header.top .period-pick[hidden] { display: none; }
  header.top .period-pick select { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; min-height: 1.75rem; font-size: 1rem; }
  /* Comfortable to tap. */
  .ghost.small, button.ghost.small, .btn.small { min-height: 2.15rem; }
  /* Filters: the search box on its own line, then the dropdowns two to a row, equal width. */
  .toolbar:has(> select):not(:has(input[type="date"])) { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .toolbar:has(> select):not(:has(input[type="date"])) > .grow, .toolbar:has(> select):not(:has(input[type="date"])) > input[type="search"] { grid-column: 1 / -1; }
  .toolbar:has(> select):not(:has(input[type="date"])) select { width: 100%; min-width: 0; }
  .toolbar:has(> select):not(:has(input[type="date"])) > button, .toolbar:has(> select):not(:has(input[type="date"])) > .ghost { justify-self: start; }
  .toolbar:has(> select):not(:has(input[type="date"])) > div { grid-column: 1 / -1; }
  /* Filters with dates in them: the boxes share each row evenly instead of sitting at odd widths. */
  .toolbar:has(input[type="date"]) > select, .toolbar:has(input[type="date"]) > input[type="date"] { flex: 1 1 8.5rem; min-width: 0; width: auto; }
  /* A panel's heading and its buttons: buttons drop under the heading and wrap as whole buttons. */
  .panel-head { row-gap: .6rem; }
}

/* Printing: the page is laid out as a normal single column (the side menu's two-column layout must not push a printed sheet to the right). */
@media print { html body { display: block !important; } }

/* Printing without the browser's address / date / title lines: an app opts in with <html data-print="clean"> and "@page { margin: 0 }".
   The margin it had before becomes padding on the body, repeated on every printed page (box-decoration-break: clone),
   so the layout stays the same. --print-pad can be changed per app / per print job. */
@media print { html[data-print="clean"] body { padding: var(--print-pad, 12mm 14mm) !important; box-sizing: border-box; -webkit-box-decoration-break: clone; box-decoration-break: clone; } }

/* ---- phone tab bar (built in sidebar.js; only visible on a phone) ---- */
#tabbar { display: none; }
@media screen and (max-width: 700px) {
  #tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: .15rem; padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom));
    background: var(--glass-bg-strong, rgba(255,253,246,.88)); -webkit-backdrop-filter: var(--glass-blur, blur(22px) saturate(170%)); backdrop-filter: var(--glass-blur, blur(22px) saturate(170%));
    border-top: 1px solid var(--glass-border, rgba(230,215,180,.9)); }
  #tabbar button { flex: 1 1 0; min-width: 0; min-height: 52px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .3rem .1rem; border: 0; border-radius: 14px;
    background: transparent; color: var(--ink-soft, #5f583f); font-family: var(--body, inherit); font-size: .72rem; font-weight: 800; cursor: pointer; transition: transform .38s cubic-bezier(.22, 1.25, .36, 1), background .15s; }
  #tabbar button:active { transform: scale(.94); transition-duration: .08s; }
  #tabbar button span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #tabbar .ic { font-size: 1.3rem; line-height: 1; }
  #tabbar button[aria-current="true"] { color: var(--grass-deep, #3f6018); background: var(--grass-wash, #ecf1da); }
}
@media print { #tabbar { display: none !important; } }
:root[data-theme="dark"] #tabbar { background: rgba(21, 19, 16, .92); }
/* Log out, at the bottom of every app's menu */
.subnav .nav-foot { padding: .5rem .7rem .9rem; margin-top: .2rem; border-top: 1px solid rgba(46,42,27,.08); }
.subnav .nav-logout { color: var(--coral-deep, #b04420); }
.subnav .nav-logout:hover { color: var(--coral-deep, #b04420); }

/* ---- keyboard focus and browser details (every app) ---- */
/* A clear outline on any control reached with the keyboard. :where() keeps this weaker than an app's own focus style. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--grass-deep, #3f6018); outline-offset: 2px; }
::selection { background: var(--grass-wash, #ecf1da); color: var(--ink, #2e2a1b); }
:root { accent-color: var(--grass-deep, #3f6018); }