/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-ui); font-size: 14px; line-height: 1.45; background: var(--paper); color: var(--ink); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.15; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.ico { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }
.num { font-variant-numeric: tabular-nums; }

/* ── LAYOUT ── */
#header { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line); padding: 0 20px; display: flex; align-items: center; gap: 12px; height: 56px;
  position: sticky; top: 0; z-index: 100; }
#app .brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--logo-tile); color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--press-color); box-shadow: 2px 2px 0 var(--press-color); flex-shrink: 0; cursor: pointer; transition: transform var(--dur-2) var(--ease-spring); }
#app .brand-mark:hover { transform: rotate(-6deg) scale(1.05); }
#app .brand-mark img { width: 80%; height: auto; display: block; }
/* A school's look (src/core/branding.js): its logo fills the mark, a line in its second colour under the top bar, and a chip saying which kind of account this is. */
:root[data-account="school"] #app .brand-mark img { width: 88%; max-height: 88%; object-fit: contain; }
:root[data-account="school"] #header { box-shadow: inset 0 -3px 0 var(--brand-2, var(--accent)); background: color-mix(in srgb, var(--accent-soft) 88%, transparent); }
/* The school's logo as a watermark: large and faint over the page and its cards, like a school's
   letterhead, and never in the way (clicks pass through; under the top bar, windows and messages). */
:root[data-account="school"] body::before { content: ''; position: fixed; z-index: 90; pointer-events: none;
  left: 50%; top: calc(50% + 28px); width: min(64vmin, 620px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: var(--brand-logo, none) center / contain no-repeat; opacity: .05; mix-blend-mode: multiply; }
:root[data-account="school"][data-theme="dark"] body::before { opacity: .07; mix-blend-mode: screen; }
@media print { body::before { display: none !important; } }
.account-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.account-chip.school { background: var(--accent-soft); color: var(--accent-ink); }
.account-chip.individual { background: var(--surface-2); color: var(--ink-2); }
/* School Look: the ready-made palettes, closest to the logo first. */
.look-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 248px; overflow-y: auto; padding: 2px; }
.look-palette { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.look-palette:hover { border-color: var(--line-strong); }
.look-palette.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.look-swatch { display: flex; flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.look-swatch span:first-child { flex: 2; }
.look-swatch span:last-child { flex: 1; }
.look-name { font-size: 12px; font-weight: 600; line-height: 1.25; }
.look-name small { display: block; font-size: 10.5px; font-weight: 600; color: var(--accent-ink); }
/* On a laptop screen the search box gives up some room for the school's name and chip. */
@media (max-width: 1480px) { #global-search { width: 170px !important; } }
#header h1 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
#header .breadcrumb { overflow: hidden; }
#header .breadcrumb { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
#header .breadcrumb span { cursor: pointer; white-space: nowrap; border-radius: 6px; padding: 2px 4px; transition: background-color var(--dur-1), color var(--dur-1); }
#header .breadcrumb span:hover { color: var(--ink); background: var(--surface-2); }
#header .breadcrumb span:last-child { color: var(--ink-2); }
#header .sep { color: var(--line-strong); cursor: default !important; }
#header .sep:hover { background: none !important; }
#main-content { flex: 1; padding: 24px; max-width: 100%; }
#global-search { border-radius: var(--r-sm) !important; background: var(--surface) !important; }