/* Contour Tutor Attendance — documentation.
   Dark shell, Contour tokens, same family as the app's dark theme. */

@font-face { font-family: "PolySans"; src: url("fonts/polysans-neutral.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PolySans"; src: url("fonts/polysans-median.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PolySans"; src: url("fonts/polysans-bulky.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #080C12;
  --ink-2: #0C1017;
  /* Text on the neon block. Constant in both themes: the highlight colour
     never changes, so the ink on top of it must not either. */
  --on-hl: #0C1017;
  /* The neon works as a BLOCK in both themes, but as TEXT only on dark. Every
     place it is used as a foreground colour goes through this instead. */
  --hl-text: #D7FC3D;
  /* Solid fills carrying SMALL text. Separate from --highlight because the
     light theme needs a darker blue there to stay readable at 13px, while the
     big hero block can use OG Blue itself. */
  --hl-solid: #D7FC3D;
  --panel: #0F141C;
  --panel-2: #121924;
  --line: #1D2733;
  --line-2: rgba(232, 238, 247, .09);
  --cream: #FFF9F1;
  --text: #C7D2E0;
  --muted: #8B99AB;
  --blue: #4DA3FF;
  --blue-2: #007AFF;
  --highlight: #D7FC3D;
  --green: #45A171;
  --amber: #D69E2E;
  --red: #E2686C;
  --radius: 14px;
  --pill: 999px;
  --display: "PolySans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar: 280px;
  --topbar: 62px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 20px); }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font-family: var(--body); font-size: 15.5px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--highlight); color: var(--on-hl); }

/* Light theme. Only the tokens move; every rule above is written against them.
   --highlight and --on-hl are deliberately absent: the neon block and its ink
   are the same in both themes, which is what keeps the brand mark recognisable. */
html[data-theme="light"] {
  --ink: #FAFAF9;
  --ink-2: #FFF9F1;
  --panel: #FFFFFF;
  --panel-2: #FFF9F1;
  --line: rgba(12, 49, 102, .13);
  --line-2: rgba(12, 49, 102, .09);
  --cream: #0C3166;
  --text: #2B3440;
  --muted: #5A6577;
  --blue: #0062CC;
  --green: #2F8D5B;
  --amber: #8A6216;
  --red: #B93C40;
  /* The neon is a dark-mode device. On white it reads at roughly 1.1:1, so the
     light theme uses OG Blue for every one of those places instead -- the
     highlight block included, which is what the app does in light mode too. */
  --highlight: #007AFF;
  --on-hl: #FFFFFF;
  --hl-text: #0062CC;
  --hl-solid: #0062CC;
}
html[data-theme="light"] .topbar { background: rgba(250, 250, 249, .9); }
html[data-theme="light"] .audience a:hover,
html[data-theme="light"] .theme-btn:hover,
html[data-theme="light"] .cta-ghost:hover,
html[data-theme="light"] .role-card:hover { border-color: rgba(12, 49, 102, .3); }
html[data-theme="light"] .figure .frame { box-shadow: 0 14px 34px rgba(12, 49, 102, .09); }
html[data-theme="light"] .results { box-shadow: 0 18px 50px rgba(12, 49, 102, .16); }
html[data-theme="light"] .results mark { background: rgba(0, 122, 255, .16); color: var(--cream); }
html[data-theme="light"] tbody tr:hover td { background: rgba(12, 49, 102, .022); }
html[data-theme="light"] code { color: #0C3166; background: rgba(12, 49, 102, .06); }
html[data-theme="light"] .pill-grey { color: #4A5666; }

/* ---- Top bar ----------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60; height: var(--topbar);
  display: flex; align-items: center; gap: 18px; padding: 0 22px;
  background: rgba(8, 12, 18, .88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* No underline on ANY top-bar link. The global `a` rule draws one, which put
   a blue rule directly under the Contour wordmark. */
.topbar a { border-bottom: 0; }
.topbar .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.topbar .brand img { height: 24px; width: auto; }
.topbar .brand .wm-light { display: none; }
html[data-theme="light"] .topbar .brand .wm-dark { display: none; }
html[data-theme="light"] .topbar .brand .wm-light { display: block; }
.topbar .brand-name { display: none; }
.topbar-spacer { flex: 1 1 auto; }

.audience { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.audience::-webkit-scrollbar { display: none; }
.audience a {
  flex: 0 0 auto; padding: 6px 14px; border-radius: var(--pill);
  border: 1px solid var(--line); color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 550; white-space: nowrap;
}
.audience a:hover { border-color: #33445A; color: var(--cream); }
.audience a.on { background: var(--hl-solid); border-color: var(--hl-solid); color: var(--on-hl); font-weight: 650; }

.open-app {
  flex: 0 0 auto; padding: 7px 16px; border-radius: var(--pill);
  background: var(--hl-solid); color: var(--on-hl); text-decoration: none;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.open-app:hover { filter: brightness(1.06); }

.theme-btn {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); cursor: pointer; padding: 0;
}
.theme-btn:hover { color: var(--cream); border-color: #33445A; }
.theme-btn .moon { display: none; }
html[data-theme="light"] .theme-btn .sun { display: none; }
html[data-theme="light"] .theme-btn .moon { display: block; }

/* ---- Search ------------------------------------------------------------ */
.search { position: relative; flex: 0 1 320px; min-width: 150px; }
.search input {
  width: 100%; height: 36px; padding: 0 34px 0 34px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill);
  color: var(--cream); font-family: var(--body); font-size: 13.5px;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--blue); background: var(--panel-2); }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
.search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; pointer-events: none;
}
.search input:focus ~ kbd { display: none; }

.results {
  position: absolute; top: 44px; left: 0; right: 0; max-height: 62vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); padding: 6px; display: none; z-index: 70;
}
.results.open { display: block; }
.results a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; border: 0; }
.results a:hover, .results a.sel { background: var(--panel-2); }
.results .r-t { display: block; color: var(--cream); font-size: 14px; font-weight: 600; }
.results .r-c { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.results .r-p { display: inline-block; color: var(--blue); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.results .empty { padding: 14px 12px; color: var(--muted); font-size: 13.5px; }
.results mark { background: rgba(215, 252, 61, .26); color: var(--cream); border-radius: 3px; padding: 0 1px; }

/* ---- Layout ------------------------------------------------------------ */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); align-items: start; }

.sidebar {
  position: sticky; top: var(--topbar); align-self: start;
  height: calc(100vh - var(--topbar)); overflow-y: auto;
  border-right: 1px solid var(--line); padding: 26px 16px 44px;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.nav-group { margin-bottom: 24px; }
.nav-group > h3 {
  font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px 12px;
}
.sidebar a {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; margin-bottom: 2px; border-radius: 9px; border: 0;
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500;
}
.sidebar a:hover { background: var(--panel); color: var(--cream); }
.sidebar a.current { background: var(--panel-2); color: var(--cream); font-weight: 650; }
.sidebar a.current::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--highlight);
}
.sidebar a .ico { flex: 0 0 17px; display: flex; color: var(--muted); align-self: flex-start; margin-top: 1px; }
/* Label on top, who it is for underneath, so a reader can find their page by
   what they do or by who they are without learning the site's structure. */
.sidebar .nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebar .nav-who { font-size: 11.8px; font-weight: 450; color: var(--muted); margin-top: 2px; }
.sidebar a.current .nav-who { color: var(--muted); }
/* The open page's sections, indented under it with a guide line. */
.sidebar .nav-subs { margin: 2px 0 8px 20px; padding-left: 8px; border-left: 1px solid var(--line); }
.sidebar .nav-subs a.sub { padding: 5px 10px; }
.sidebar a:hover .ico, .sidebar a.current .ico { color: var(--hl-text); }
.sidebar a.sub { padding: 5px 12px 5px 39px; font-size: 13.2px; font-weight: 400; color: var(--muted); margin-bottom: 0; }
.sidebar a.sub:hover { color: var(--cream); background: transparent; }
.sidebar a.sub.current { background: transparent; color: var(--hl-text); font-weight: 600; }
.sidebar a.sub.current::before { display: none; }

.side-foot { margin: 30px 12px 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.2px; color: var(--muted); line-height: 1.55; }
.side-foot strong { display: block; color: var(--text); font-weight: 600; }

.main { padding: 44px 56px 110px; max-width: 920px; }

/* ---- Type -------------------------------------------------------------- */
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 60px);
  line-height: 1.03; letter-spacing: -.03em; color: var(--cream); margin: 0 0 18px;
}
h1 .hl {
  display: inline-block; background: var(--highlight); color: var(--on-hl);
  padding: .06em .12em .1em; border-radius: 3px;
}
h2 {
  font-family: var(--display); font-weight: 800; font-size: 27px; line-height: 1.18;
  letter-spacing: -.02em; color: var(--cream); margin: 60px 0 16px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 44px; }
h3 { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--cream); margin: 34px 0 9px; letter-spacing: -.015em; }
h4 { font-size: 14.5px; font-weight: 700; color: var(--cream); margin: 24px 0 6px; }
p { margin: 0 0 15px; }
.lede { font-size: 18.5px; line-height: 1.55; color: var(--muted); margin-bottom: 30px; max-width: 44em; }
a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(77, 163, 255, .32); }
a:hover { border-bottom-color: var(--blue); }
strong { font-weight: 650; color: var(--cream); }
em { color: var(--cream); font-style: italic; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
li::marker { color: var(--muted); }
code {
  font-family: var(--mono); font-size: .87em; background: var(--panel-2);
  padding: 2px 6px; border-radius: 5px; color: var(--highlight); border: 1px solid var(--line);
}
hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
/* A key the reader presses, in running text. .search kbd is the positioned
   hint in the search box and keeps its own rule above. */
.main kbd {
  display: inline-block; min-width: 1.6em; text-align: center;
  font-family: var(--body); font-size: .8em; font-weight: 700; line-height: 1.5;
  padding: 0 5px; border-radius: 5px; color: var(--text);
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--panel-2);
}

/* ---- Cards, callouts --------------------------------------------------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 16px; }
.card > :last-child { margin-bottom: 0; }
.card h3, .card h4 { margin-top: 0; }

.grid { display: grid; gap: 14px; margin-bottom: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.role-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; text-decoration: none;
}
.role-card:hover { border-color: #33445A; background: var(--panel-2); }
.role-card .rc-ico {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  margin-bottom: 13px; color: var(--on-hl);
}
.role-card .who { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--cream); margin-bottom: 5px; letter-spacing: -.01em; }
.role-card .what { display: block; font-size: 13.8px; color: var(--muted); line-height: 1.5; }

.note, .warn, .key {
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  background: var(--panel); border-radius: 0 11px 11px 0; padding: 15px 18px; margin: 0 0 20px;
}
.note > :last-child, .warn > :last-child, .key > :last-child { margin-bottom: 0; }
.warn { border-left-color: var(--red); }
.key { border-left-color: var(--highlight); }
.note-label, .warn-label, .key-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 6px; color: var(--blue);
}
.warn-label { color: var(--red); }
.key-label { color: var(--hl-text); }

/* ---- Tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 14.2px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); background: var(--ink-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .015); }
td strong { color: var(--cream); }
td code { white-space: nowrap; }

/* ---- Status pills ------------------------------------------------------ */
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 650; white-space: nowrap; border: 1px solid transparent; }
.pill-grey { background: rgba(139, 153, 171, .14); color: #A9B6C6; border-color: rgba(139, 153, 171, .22); }
.pill-amber { background: rgba(214, 158, 46, .15); color: #E0AC48; border-color: rgba(214, 158, 46, .28); }
.pill-blue { background: rgba(77, 163, 255, .14); color: var(--blue); border-color: rgba(77, 163, 255, .28); }
.pill-green { background: rgba(69, 161, 114, .16); color: #5FBF8C; border-color: rgba(69, 161, 114, .3); }
.pill-red { background: rgba(226, 104, 108, .14); color: var(--red); border-color: rgba(226, 104, 108, .28); }

/* ---- Steps ------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 22px; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 20px 46px; margin: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--hl-text);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.steps > li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 33px; bottom: 2px; width: 1px; background: var(--line); }
.steps .st { display: block; font-weight: 650; color: var(--cream); margin-bottom: 2px; }

/* ---- Flow -------------------------------------------------------------- */
.flow { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; }
.flow-step { flex: 1 1 135px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; min-width: 135px; }
/* All three are spans, so they need to be told to stack. Left inline they read
   as "01Tutor marksOne status per student", which is what the cards showed. */
.flow-step .n { display: block; font-size: 10.5px; font-weight: 700; color: var(--hl-text); letter-spacing: .1em; }
.flow-step .t { display: block; font-family: var(--display); font-weight: 800; font-size: 14.5px; color: var(--cream); line-height: 1.25; margin: 3px 0 4px; }
.flow-step .d { display: block; font-size: 12.6px; color: var(--muted); line-height: 1.45; }

/* ---- Key/value --------------------------------------------------------- */
.kv { margin: 0 0 20px; }
.kv > div { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv > div:last-child { border-bottom: 0; }
.kv .k { font-weight: 650; color: var(--cream); font-size: 14px; }
.kv .v { font-size: 14.3px; }

/* ---- Figures (live app UI in an isolated frame) ------------------------ */
.figure { margin: 0 0 24px; }
.figure .frame {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--ink-2); box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.figure iframe { display: block; width: 100%; border: 0; background: transparent; }
.figure figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.figure figcaption b { color: var(--text); font-weight: 600; }

/* ---- Task table -------------------------------------------------------- */
.tasks a { border: 0; color: var(--cream); font-weight: 550; }
.tasks a:hover { color: var(--hl-text); }
.tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 9px; }

/* ---- Page nav + footer ------------------------------------------------- */
.page-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.page-nav a { border-bottom: 0; font-weight: 650; color: var(--cream); }
.page-nav a:hover { color: var(--hl-text); }
.page-nav .lbl { display: block; font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

.doc-foot { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.8px; color: var(--muted); line-height: 1.6; }
.doc-foot strong { color: var(--text); font-weight: 600; }

.menu-btn { display: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 10px; z-index: 100; background: var(--hl-solid); color: var(--on-hl); padding: 8px 14px; border-radius: 8px; border: 0; }

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .audience { display: none; }
  .topbar .brand-name { display: block; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--cream); }
  .sidebar {
    position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 18px 18px;
  }
  .sidebar nav, .sidebar .side-foot { display: none; }
  .sidebar.open nav, .sidebar.open .side-foot { display: block; }
  .menu-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill);
    padding: 9px 16px; font-family: var(--body); font-size: 13.5px; font-weight: 600;
    color: var(--cream); cursor: pointer;
  }
  .main { padding: 30px 20px 76px; }
  h1 { font-size: 34px; }
  h2 { font-size: 23px; margin-top: 44px; }
  .lede { font-size: 16.5px; }
  .kv > div { grid-template-columns: 1fr; gap: 3px; }
  .search { flex: 1 1 auto; min-width: 0; }
  .search kbd { display: none; }
  .open-app { display: none; }
}

@media print {
  .topbar, .sidebar, .page-nav, .menu-btn { display: none; }
  body { background: #fff; color: #111; }
  .shell { grid-template-columns: 1fr; }
  .main { max-width: none; padding: 0; }
  h1, h2, h3, h4, strong { color: #000; }
  a { color: inherit; border-bottom: 0; }
  .card, .table-wrap, .note, .warn, .key { border-color: #ccc; background: #fff; }
}

/* ---- Hero call to action ----------------------------------------------- */
.cta { display: flex; flex-wrap: wrap; gap: 11px; margin: 0 0 30px; }
.cta a { border-bottom: 0; border-radius: var(--pill); padding: 11px 22px; font-size: 14px; font-weight: 650; }
.cta-primary { background: var(--hl-solid); color: var(--on-hl); }
.cta-primary:hover { filter: brightness(1.06); }
.cta-ghost { border: 1px solid var(--line); color: var(--cream); }
.cta-ghost:hover { border-color: #33445A; background: var(--panel); }