/* Shared shell for School Tech Ops document pages (privacy, support, terms,
   app pages). Lifted from apps.html so the legal and support pages cannot
   drift away from the rest of the site.

   --accent and --accent-glow are defined here deliberately: apps.html uses
   both but defines neither, so every link and eyebrow on it currently
   computes to `inherit` and renders as body text. */

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

:root {
  --bg:          #04080f;
  --bg1:         #070e1a;
  --bg2:         #0b1525;
  --bg3:         #0f1e33;
  --border:      #1a3050;
  --border2:     #1f4070;
  --blue:        #0ea5e9;
  --blue-glow:   rgba(14,165,233,0.18);
  --amber:       #f59e0b;
  --green:       #10b981;
  --purple:      #8b5cf6;
  --red:         #922B21;
  --accent:      #FBD210;
  --accent-glow: rgba(251,210,16,0.10);
  --text:        #e2eaf4;
  --text2:       #8facc8;
  --text3:       #3d6080;
  --mono:        'JetBrains Mono', monospace;
  --display:     'Syne', sans-serif;
  --body:        'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: 16px; line-height: 1.65;
  overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; opacity: 0.6;
}

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 60px;
  background: rgba(4,8,15,0.85); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
nav .brand { display: flex; align-items: center; text-decoration: none; }
nav .brand svg { height: 36px; width: auto; display: block; }
nav .links { display: flex; gap: 1.5rem; font-size: 0.85rem; }
nav .links a { color: var(--text2); text-decoration: none; }
nav .links a:hover, nav .links a[aria-current="page"] { color: var(--accent); }

main { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 0 1.5rem 6rem; }
main.prose { max-width: 800px; }

header.hero { padding: 8rem 0 3rem; border-bottom: 1px solid var(--border); }
.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
}
h1 {
  font-family: var(--body); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; margin-bottom: 1.25rem;
}
.lede { font-size: 1.1rem; color: var(--text2); max-width: 62ch; font-weight: 300; }
.dateline {
  font-family: var(--mono); font-size: 0.75rem; color: var(--text3);
  margin-top: 1.5rem; letter-spacing: 0.04em;
}

h2 {
  font-family: var(--body); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 3.5rem 0 0.4rem;
  scroll-margin-top: 80px;
}
h3 {
  font-family: var(--body); font-weight: 500; font-size: 1.15rem;
  margin: 2rem 0 0.5rem; color: var(--text);
}
h2 + .sub { color: var(--text3); font-family: var(--mono); font-size: 0.78rem; margin-bottom: 1.25rem; }
p { margin-bottom: 1rem; color: var(--text2); font-weight: 300; }
p strong { color: var(--text); font-weight: 500; }
a { color: var(--accent); }

ul, ol { margin: 0 0 1.25rem 1.1rem; color: var(--text2); font-weight: 300; }
li { margin-bottom: 0.45rem; }
li strong { color: var(--text); font-weight: 500; }

code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--bg2); border: 1px solid var(--border);
  padding: 0.1rem 0.35rem; border-radius: 4px; color: var(--text);
}

.card {
  background: var(--bg1); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem;
}
.card.flag { border-color: var(--border2); box-shadow: 0 0 40px var(--accent-glow); }
.card h3:first-child, .card h2:first-child { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.grid .card { margin-bottom: 0; }
.grid h3 { margin-top: 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); font-weight: 500; }
td { color: var(--text2); font-weight: 300; }
td strong { color: var(--text); font-weight: 500; }
.table-wrap { overflow-x: auto; }

.tag {
  display: inline-block; font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.tag.pilot   { color: var(--green); }
.tag.build   { color: var(--amber); }
.tag.proto   { color: var(--purple); }
.tag.shipped { color: var(--blue); }
.tag.no      { color: var(--green); }
.tag.yes     { color: var(--amber); }

.note {
  border-left: 2px solid var(--amber); background: rgba(245,158,11,0.06);
  padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 6px 6px 0;
}
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note .label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 0.4rem;
}
.note.good { border-left-color: var(--green); background: rgba(16,185,129,0.06); }
.note.good .label { color: var(--green); }

/* Screenshot gallery. Horizontal scroll rather than a wrapping grid: iPad
   screenshots are tall, and a grid of them pushes everything else off screen. */
.shots { display: flex; gap: 1rem; overflow-x: auto; padding: 0.5rem 0 1.25rem; scroll-snap-type: x mandatory; }
.shots figure { flex: 0 0 auto; width: min(300px, 72vw); scroll-snap-align: start; }
.shots img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg2);
}
.shots figcaption { font-size: 0.82rem; color: var(--text3); margin-top: 0.6rem; font-weight: 300; }

.toc { font-size: 0.9rem; }
.toc ul { list-style: none; margin-left: 0; columns: 2; column-gap: 2rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.urls td:first-child { white-space: nowrap; font-family: var(--mono); font-size: 0.8rem; }

footer {
  border-top: 1px solid var(--border); margin-top: 5rem; padding-top: 2rem;
  color: var(--text3); font-size: 0.85rem;
}
footer .doclinks { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.75rem; }

@media (max-width: 640px) {
  nav { padding: 0 1rem; }
  nav .links { gap: 1rem; font-size: 0.8rem; }
  header.hero { padding-top: 6rem; }
  .toc ul { columns: 1; }
}