/* ─────────────────────────────────────────────────────────────
   CaliPath — reset, typography and app frame
   ───────────────────────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--fg);
  /* Section screens and Home are locked to the viewport, so the page
     itself never scrolls. Deeper content pages scroll inside .screen. */
  overflow:hidden;
}

body{
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color-scheme:dark;
}

[data-theme="light"] body{ color-scheme:light; }

img{ max-width:100%; }

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;      /* not a browser default on every engine */
  text-align:inherit;
}

/* Form controls do not inherit the page font on their own. Without
   this the profile cards would be set in the browser's default face
   instead of League Spartan. */
input,select,textarea{
  font:inherit;
  color:inherit;
}

/* The hidden attribute is only a browser default, so any class that
   sets display beats it. Several elements here are shown and hidden
   by toggling `hidden`, so it has to win. */
[hidden]{ display:none !important; }

/* No underlines anywhere by default. The navigation shows selection
   with the section colour and an underline *bar* (§6.3); a text
   underline on hover competes with it and reads as a second, greyer
   indicator. Body-copy links opt in via .prose. */
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── App frame ──
   A column: top bar, the view, then (phone only) the bottom bar.
   100dvh rather than 100vh so mobile browser chrome doesn't push the
   bottom bar out of sight. */
.app{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100dvh;
  overflow:hidden;      /* the drawer lives off-canvas to the left */
}

.view{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;         /* lets children shrink instead of overflowing */
  min-width:0;
}

/* Profile draws its own bar — back chevron, logo, centred title — and
   the design shows no bottom bar on it either, so the section
   navigation steps aside. The first-run Welcome screen does the same:
   nothing else is reachable until the form is filled in. */
body.is-plain .topbar,
body.is-plain .botbar{ display:none; }

/* On a page reached from a tile, the bar drops the hamburger and the
   profile control and gains a back arrow in their place. The five
   sections stay — you are still inside one, and being able to step
   sideways from a deep page is worth more there than the menu.
   Consequence: Profile and Settings are reached from a section screen,
   not from inside a page.

   On phone .topbar__left is display:contents, so with the hamburger
   gone the back arrow takes the first grid column and the logo keeps
   the middle one — the same two-column balance as everywhere else. */
body.is-deep .burger,
body.is-deep .avatar{ display:none; }

/* ── Motion ──
   §5.2 — when the device asks for reduced motion, drop the movement.
   The colour change and underline still communicate selection. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}