/* The app layer: makes the signed-in system feel like an installed phone app.
   Everything here is scoped away from the public website (it sets data-site) and switched off for reduced motion. */

:root { --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --spring: cubic-bezier(.32, .72, 0, 1); }
html:not([data-site]) { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
html:not([data-site]) body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* ---- Loading screen: just the logo -------------------------------------------------------------------- */
#splash { position: fixed; inset: 0; z-index: 99999; display: none; place-items: center; background: #ffffff; }
#splash img { width: min(52vw, 260px); height: auto; display: block; }
#splash .logo-dark { display: none; }
html[data-splash] #splash { display: grid; animation: splash-failsafe .01s linear 6s forwards; }
html[data-splash] body { overflow: hidden; }
html[data-splash=out] #splash { animation: splash-out .6s var(--spring) forwards; pointer-events: none; }
@media screen and (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) #splash { background: #12102b; }
  html:not([data-mode="light"]) #splash .logo-light { display: none; }
  html:not([data-mode="light"]) #splash .logo-dark { display: block; }
}
html[data-mode="dark"] #splash { background: #12102b; }
html[data-mode="dark"] #splash .logo-light { display: none; }
html[data-mode="dark"] #splash .logo-dark { display: block; }
@keyframes splash-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
@keyframes splash-logo { from { opacity: 0; transform: scale(.88); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) { #splash img { animation: splash-logo 1s var(--spring) both; } }

/* ---- Moving between pages: the bar and the header stay still, the page glides, the active tab slides ----- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html:not([data-site]) .sidebar { view-transition-name: tabbar; }
  html:not([data-site]) .topbar { view-transition-name: topbar; }
  html:not([data-site]) .main { view-transition-name: page; }
  html:not([data-site]) .nav a[aria-current=page], html:not([data-site]) .nav .more-btn.on { view-transition-name: active-tab; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms; }
  ::view-transition-old(page) { animation: vt-out .16s ease both; }
  ::view-transition-new(page) { animation: vt-in .46s var(--spring) both; }
  ::view-transition-group(active-tab) { animation-duration: .5s; animation-timing-function: var(--spring); }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px) scale(.995); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(18px) scale(.992); } }

  /* the page's own blocks rise in one after another */
  html:not([data-site]) .main > * { animation: rise .6s var(--spring) both; animation-delay: calc(var(--i, 0) * 55ms + 40ms); }
  html:not([data-site]) .main > :nth-child(2) { --i: 1; } .main > :nth-child(3) { --i: 2; } .main > :nth-child(4) { --i: 3; }
  .main > :nth-child(5) { --i: 4; } .main > :nth-child(6) { --i: 5; } .main > :nth-child(n+7) { --i: 6; }
  html:not([data-site]) :is(.grid, .todos, .settings-grid, .cards) > * { animation: rise .55s var(--spring) both; animation-delay: calc(var(--j, 0) * 45ms + 140ms); }
  :is(.grid, .todos, .settings-grid, .cards) > :nth-child(2) { --j: 1; } :is(.grid, .todos, .settings-grid, .cards) > :nth-child(3) { --j: 2; }
  :is(.grid, .todos, .settings-grid, .cards) > :nth-child(4) { --j: 3; } :is(.grid, .todos, .settings-grid, .cards) > :nth-child(5) { --j: 4; }
  :is(.grid, .todos, .settings-grid, .cards) > :nth-child(n+6) { --j: 5; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }

  /* press feedback: things give a little under the finger */
  html:not([data-site]) :is(.btn, button, .btn-outline, .stat, .todo, .setting, .tpl, .row-link, .opt, .icon-btn) { transition: transform .22s var(--spring), box-shadow .3s var(--spring), background-color .2s ease, opacity .2s ease; }
  html:not([data-site]) :is(.btn, button, .btn-outline, .stat, .todo, .setting, .tpl, .row-link, .opt, .icon-btn):active { transform: scale(.965); transition-duration: .08s; }
  html:not([data-site]) .nav a:active, html:not([data-site]) .nav .more-btn:active { transform: scale(.9); transition: transform .08s; }
  html:not([data-site]) .nav a { transition: transform .22s var(--spring), background-color .25s ease, color .25s ease; }

  /* leaving a page: the old one eases back and a thin line runs across the top */
  html.is-leaving .main { opacity: .55; transform: scale(.992); transition: opacity .25s ease, transform .35s var(--spring); }
  html.is-leaving::after { content: ""; position: fixed; z-index: 99998; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--brand)); border-radius: 0 3px 3px 0; animation: nav-line 9s cubic-bezier(.08, .6, .2, 1) forwards; }
  @keyframes nav-line { to { width: 88%; } }

  /* sheets and menus rise from the bottom with a soft spring */
  dialog.sheet[open] { animation: sheet-up .5s var(--spring); }
  dialog.sheet[open]::backdrop { animation: fade-in .35s ease both; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes fade-in { from { opacity: 0; } }
  .menu-pop, .pop { animation: pop-in .3s var(--spring) both; }
}
dialog.sheet::backdrop { background: rgba(14, 16, 40, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.sheet { padding-bottom: var(--safe-b); }
dialog.sheet .sheet-in::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }

/* ---- Phone layout ---------------------------------------------------------------------------------------- */
@media (max-width: 880px) {
  html:not([data-site]) body { background: var(--surface-2); }
  html:not([data-site]) .topbar { position: sticky; top: 0; z-index: 30; padding-top: var(--safe-t); min-height: calc(60px + var(--safe-t)); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid var(--border-soft); }
  /* a floating tab bar, like the ones on the phone's own apps */
  html:not([data-site]) .sidebar { inset: auto 12px calc(10px + var(--safe-b)) 12px; border-radius: 26px; padding: 6px; background: color-mix(in srgb, var(--sidebar) 88%, transparent); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 18px 50px rgba(18, 16, 43, .28), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
  html:not([data-site]) .nav a, html:not([data-site]) .nav .more-btn { border-radius: 20px; min-height: 54px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
  html:not([data-site]) .nav a[aria-current=page] { background: #ffffff; color: var(--on-sidebar-active); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
  html:not([data-site]) .main { padding: 18px 16px calc(116px + var(--safe-b)); }
  html:not([data-site]) .main h1 { font-size: 1.75rem; line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
  html:not([data-site]) .card, html:not([data-site]) .stat, html:not([data-site]) .todo, html:not([data-site]) .setting, html:not([data-site]) .form-card { border-radius: 22px; }
  html:not([data-site]) .btn, html:not([data-site]) button.btn, html:not([data-site]) .btn-outline { min-height: 50px; border-radius: 16px; font-weight: 700; }
  html:not([data-site]) input:not([type=checkbox]):not([type=radio]), html:not([data-site]) select, html:not([data-site]) textarea { font-size: 16px; min-height: 50px; border-radius: 14px; }
  html:not([data-site]) .alert { border-radius: 18px; }
  html:not([data-site]) dialog.sheet { max-width: none; border-radius: 28px 28px 0 0; }
  html:not([data-site]) .sheet-in a, html:not([data-site]) .sheet-in button.row-link { min-height: 54px; border-radius: 16px; font-size: 16px; }
}
@media (max-width: 880px) and (prefers-color-scheme: dark) {
  html:not([data-mode="light"]):not([data-site]) body { background: var(--bg); }
}
html[data-mode="dark"]:not([data-site]) body { background: var(--bg); }

/* ---- Installed on the home screen ------------------------------------------------------------------------ */
@media (display-mode: standalone) {
  html:not([data-site]) body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html:not([data-site]) input, html:not([data-site]) textarea, html:not([data-site]) [contenteditable], html:not([data-site]) .copy-row, html:not([data-site]) code { -webkit-user-select: text; user-select: text; }
}

@media (prefers-reduced-motion: reduce) {
  #splash img, html[data-splash=out] #splash { animation-duration: .01ms; }
  html.is-leaving .main { transition: none; }
}
@media print { #splash { display: none !important; } }

/* ---- The calendar card: tucked into a one-line fold on phones, a full card on wide screens ---- */
.cal-fold > summary { list-style: none; }
.cal-fold > summary::-webkit-details-marker { display: none; }
.cal-sum { display: none; }
@media (min-width: 881px) {
  .cal-fold::details-content { content-visibility: visible; display: block; }
}
@media (max-width: 880px) {
  .cal-sum { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 18px; cursor: pointer; font-weight: 700; color: var(--ink); }
  .cal-sum em { margin-left: auto; font-style: normal; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-2); }
  .cal-sum .chev { width: 20px; height: 20px; flex: none; color: var(--ink-2); transition: transform .35s var(--spring); }
  .cal-fold[open] > .cal-sum { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 8px; }
  .cal-fold[open] > .cal-sum .chev { transform: rotate(180deg); }
  .cal-fold > #calendar { margin: 0; }
}
@media (max-width: 880px) and (prefers-reduced-motion: no-preference) {
  .cal-fold[open] > #calendar { animation: rise .45s var(--spring) both; }
}

/* ---- Layout fixes found on real phone and tablet sizes ---- */
/* 1. To-do cards: a tidy grid instead of a row that is cut off at the edge */
@media (max-width: 880px) {
  html:not([data-site]) .todos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; margin: 8px 0 16px; padding: 0; scroll-snap-type: none; }
  html:not([data-site]) .todos > .todo { min-width: 0; width: auto; min-height: 96px; }
  html:not([data-site]) .todos > .todo:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 72px; }
}
@media (min-width: 600px) and (max-width: 880px) {
  html:not([data-site]) .todos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:not([data-site]) .todos > .todo:last-child:nth-child(odd) { grid-column: auto; min-height: 96px; }
}

/* 2. Tab labels: wrap onto two lines instead of being cut to "Classroo…" */
@media (max-width: 880px) {
  html:not([data-site]) .nav a span, html:not([data-site]) .nav .more-btn span { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; text-align: center; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: manual; }
}
@media (max-width: 400px) {
  html:not([data-site]) .nav a, html:not([data-site]) .nav .more-btn { font-size: 10px; padding: 6px 1px; letter-spacing: -.01em; }
  html:not([data-site]) .sidebar { inset-inline: 8px; padding: 5px; }
}

/* 3. Ring charts and their legends wrap inside their card instead of touching its edge */
.donut-row { gap: 12px 18px; }
.legend { flex: 1 1 130px; min-width: 0; }
.legend li { min-width: 0; }
.legend b { white-space: nowrap; }

/* 4. Tablets get a side rail, not a stretched phone bar */
@media (min-width: 700px) and (max-width: 880px) {
  html:not([data-site]) .shell { grid-template-columns: 108px minmax(0, 1fr); }
  html:not([data-site]) .sidebar { position: sticky; inset: auto; top: 0; height: 100vh; height: 100dvh; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 20px 10px; border-radius: 0; box-shadow: none; background: var(--sidebar); backdrop-filter: none; -webkit-backdrop-filter: none; overflow-y: auto; z-index: 20; }
  html:not([data-site]) .sidebar .nav { flex-direction: column; justify-content: flex-start; gap: 8px; }
  html:not([data-site]) .nav a, html:not([data-site]) .nav .more-btn { flex: none; width: 100%; min-height: 68px; border-radius: 18px; font-size: 11px; }
  html:not([data-site]) .nav a[aria-current=page] { box-shadow: none; }
  html:not([data-site]) .main { padding: 28px 32px 48px; max-width: 980px; }
  html:not([data-site]) .topbar { padding-left: 32px; padding-right: 32px; }
  html:not([data-site]) .who-block .t { display: block; }
  html:not([data-site]) .overview-grid, html:not([data-site]) .grid { gap: 16px; }
}

/* The on/off switch for dark mode */
.switch { position: relative; flex: none; width: 52px; min-width: 52px; height: 30px; min-height: 30px; padding: 0; box-shadow: none; border: 0; border-radius: 99px; background: #c9cbd8; cursor: pointer; transition: background .25s ease; }
.switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.32,.72,0,1); }
.switch[aria-checked="true"] { background: var(--brand, #3d358c); }
.switch[aria-checked="true"] i { transform: translateX(22px); }
.switch:focus-visible { outline: 3px solid var(--focus, #3f87fe); outline-offset: 2px; }
.menu-mode, .mode-switch-row { display: flex; align-items: center; gap: 12px; }
.menu-mode span, .mode-switch-row span { margin-right: auto; font-weight: 600; }
.mode-switch-row { display: none; padding: 10px 12px; }
@media (max-width: 880px) { .mode-switch-row { display: flex; } .menu-pop .mode-row[role="group"] { display: none !important; } }
.switch::after { content: ""; position: absolute; inset: -8px; } /* a comfortable tap area around the small switch */
.switch:hover { transform: none; box-shadow: none; }