/* The AI training profile page, as DEVOPS-12461's chosen design lays it out (D1, the
   Console skin). Every colour a person's side changes is a variable the script sets on
   the page; the defaults below are the plain look everyone starts with. */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("Lato-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("OpenSans-Variable.woff2") format("woff2");
}

:root {
  --page-bg: #eef1f6;
  --card-bg: #ffffff;
  --ink1: #1f2042;
  --ink2: #414042;
  --ink3: #7a7a7c;
  --line: #edf0f6;
  --line2: #e3e3e5;
  --accent: #ff5757;
  /* A side's own, when the script sets one (app.js paint). */
  --accent-text: var(--side-text, #c93a3a);
  --link: #0067e2;
  /* A course's Complete tag: AA as text on the card, and stepped for dark surfaces. */
  --complete: #1a7f37;
  /* The band's grid over its white, which a side's glow goes on top of (app.js paint). */
  --band-grid: repeating-linear-gradient(0deg, rgba(31,32,66,0.09) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(31,32,66,0.09) 0 1px, transparent 1px 22px),
    linear-gradient(135deg, #ffffff 0%, #e9edf5 100%);
  --band: var(--band-grid);
  --card-border: 1px solid #c8c8ca;
  --card-top: 1px solid #c8c8ca;
  --card-shadow: none;
  --glow: none;
  --heading: "Lato", "Helvetica Neue", Arial, sans-serif;
  /* Roboto Mono is the design's, but ships without its licence in the design kit. */
  --mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  /* The usage charts' series, in this order: told apart with any colour vision, side by
     side; every other skill grey. Stepped again for dark surfaces, on a screen only. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-other: #a3a3ab;
}

/* The hidden attribute wins over every display rule below. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--ink2);
  font: 14px/1.5 "Open Sans", "Segoe UI", Verdana, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; color: var(--ink1); }
.loading { max-width: 1180px; margin: 48px auto; padding: 0 20px; color: var(--ink3); }
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chevron { flex: none; }
.open .chevron { transform: rotate(180deg); }

/* The band */
.band { background: var(--band); color: var(--ink1); padding: 28px 20px; }
.wrap { max-width: 1180px; margin: 0 auto; }
.band-row { display: flex; gap: 16px 20px; align-items: center; }
.crest-disc {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--glow);
  padding: 9px;
  overflow: hidden;
}
.crest-disc.side { padding: 4px; }
/* The plain look's white disc would vanish into the white band without a ring. */
.crest-disc:not(.side) { box-shadow: 0 0 0 1px var(--line2); }
.crest { display: block; width: 100%; height: 100%; object-fit: contain; }
.who { flex: 1 1 auto; min-width: 0; }
.band .name {
  font-size: clamp(22px, 4vw, 34px);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: inherit;
}
.org { font-size: 14px; opacity: 0.9; }
.band-email { font-size: 13px; opacity: 0.8; margin-bottom: 2px; overflow-wrap: anywhere; }
.faction { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; opacity: 0.8; margin-top: 2px; }
.standing {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid currentColor;
}
.tier-line { display: flex; align-items: center; gap: 12px; }
.tier-eyebrow { opacity: 0.75; }
.band .tier-count { font-family: var(--heading); font-weight: 700; font-size: 22px; white-space: nowrap; }
.band .tier-count .of { font-weight: 400; font-size: 14px; opacity: 0.8; }
.ring-track { stroke: currentColor; stroke-opacity: 0.2; }
.ring-fill { stroke: var(--accent); }
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sign-out { margin: 0; }
/* At the foot of the profile's Settings. */
.tabs-card .sign-out { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.as-of { margin-top: 6px; font-size: 12px; color: var(--ink3); }
.try-again { display: inline-block; margin-top: 12px; }
.sq-summary, .sq-process { margin: 6px 0; }
.outline {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* The cards */
.main { max-width: 1180px; margin: 0 auto; padding: 20px 20px 64px; }
/* A track's minimum is otherwise its widest content: a wide table would widen every card. */
.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.card {
  background: var(--card-bg);
  border-radius: 2px;
  border: var(--card-border);
  border-top: var(--card-top);
  padding: 24px;
  box-shadow: var(--card-shadow);
}
/* Suggested next: one compact row, wrapping on a narrow screen. */
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 20px; }
.next .eyebrow { color: var(--accent-text); }
.next-row { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.next-step { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--ink1); line-height: 1.25; }
.next-row .more-ideas { margin-left: auto; }
.next .empty-note { flex-basis: 100%; font-size: 13px; }
.empty-note, .none { margin: 0; color: var(--ink3); }
.next-quest { font-size: 13px; color: var(--ink3); }
.next-quest span, .dots, .scores span span { color: var(--ink1); }
.small {
  border: 1px solid var(--ink1);
  background: transparent;
  color: var(--ink1);
  font-family: var(--heading);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.load-failed { margin: 0; color: var(--ink1); }

/* The tabs */
.tabs-card { padding: 8px 24px 24px; }
/* The tabs, then the profile's link to the company status at the far right. */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 20px;
}
.tab-row { display: flex; gap: 4px; flex-wrap: wrap; }
/* An .outline drawn smaller, standing out in the side's colour, or the plain look's coral:
   an outline in the accent, its text in the accent's text shade, which keeps AA contrast on
   the card. */
.metrics-link {
  margin-left: auto;
  margin-bottom: 6px;
  align-self: center;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent-text);
}
.metrics-link:hover { text-decoration: none; background: var(--line); }
.tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink3);
  font-family: var(--heading);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  cursor: pointer;
  margin-bottom: -1px;
}
.tab.on { border-bottom-color: var(--accent); color: var(--ink1); }

/* Quests */
.quest-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.quest-tile {
  border: 1px solid var(--line2);
  background: var(--card-bg);
  padding: 10px;
  min-height: 96px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quest-tile.done { border-color: var(--ink1); background: var(--line); }
.quest-tile.suggested { border-color: var(--accent); }
/* A button, drawn as the tile it was: pressed, it opens the quest's detail under the tiles. */
button.quest-tile { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.quest-tile.open {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.quest-detail {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line2);
  border-radius: 2px;
  background: var(--card-bg);
  font-size: 13px;
}
.quest-detail-title { font-size: 14px; margin: 0 0 6px; }
.quest-for, .quest-done-when { margin: 0 0 6px; }
.quest-done-when { color: var(--ink1); }
.quest-runs-head { font-family: var(--heading); font-size: 12px; margin: 10px 0 4px; color: var(--ink3); }
.quest-runs { margin: 0 0 10px; padding: 0; list-style: none; }
.quest-run { padding: 1px 0; color: var(--ink1); }
.quest-detail .none { margin-bottom: 10px; }
.quest-n { font-family: var(--mono); font-size: 10px; color: var(--ink3); }
.quest-name { font-family: var(--heading); font-weight: 700; font-size: 13px; color: var(--ink1); line-height: 1.2; }
.quest-status { font-size: 11px; color: var(--ink3); margin-top: auto; }
.section-toggle, .sq-head, .tier-head, .course-head, .dive-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
/* Listed to read, with nothing to press: what the catalog no longer offers, and another
   person's record in the Admin tab. */
.retired .tier-head, .admin-courses .tier-head, .admin-sq .sq-head { cursor: default; }
.section-toggle { margin: 24px 0 4px; }
.section-toggle h3, .sq-title { font-size: 14px; margin: 0; }
.aside { color: var(--ink3); font-weight: 400; font-size: 12px; font-family: "Open Sans", sans-serif; }
.count { margin-left: auto; font-size: 12px; color: var(--ink3); }
.side-quest, .idea, .process, .session { padding: 10px 0; border-top: 1px solid var(--line); }
.side-quest { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; }
.sq-body { min-width: 0; }
.grip {
  display: flex;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink3);
  padding: 4px 0 0;
  cursor: grab;
}
.sq-head { justify-content: space-between; gap: 12px; padding: 0; }
.sq-meta-wrap { display: flex; gap: 10px; align-items: center; }
.sq-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  white-space: nowrap;
}
.sq-ratings { display: flex; gap: 16px; margin: 6px 0 8px; font-size: 12px; color: var(--ink3); flex-wrap: wrap; }
.dots { letter-spacing: 2px; }
.sq-did, .sq-outcome { margin: 0 0 6px; font-size: 13px; }
.sq-did strong, .sq-outcome strong { color: var(--ink1); font-weight: 600; }
.artifacts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.sq-flag { margin-top: 10px; font-size: 12px; color: var(--ink3); }
.idea-title { font-family: var(--heading); font-weight: 700; font-size: 14px; color: var(--ink1); }
.idea-note, .pool-meta, .pool-count, .ideas-count { font-size: 12px; color: var(--ink3); }
/* An idea's tags and sources (the admin's view), or its course (a person's page), each a
   line of their own under what is said of it. */
.idea-tags, .idea-sources, .idea-course { display: flex; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
.idea-tags { gap: 4px 6px; }
.idea-sources { gap: 4px 12px; }
.idea-tags .tag { margin-left: 0; }
.pool-count { margin: 0 0 4px; }
.link {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--link);
  font-size: 13px;
  padding: 0;
  cursor: pointer;
}
.pane {
  position: fixed;
  inset: 0;
  background: rgba(31, 32, 66, 0.55);
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}
.pane-body {
  width: min(460px, 100%);
  height: 100%;
  background: var(--card-bg);
  color: var(--ink2);
  box-shadow: -12px 0 40px rgba(31, 32, 66, 0.25);
  display: flex;
  flex-direction: column;
  border-left: var(--card-top);
}
.pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line2);
}
.pane-head h2 { font-size: 18px; margin: 0; }
.pane-head div div { font-size: 13px; color: var(--ink3); }
/* A place's views (the pane's three lists of ideas; the Admin tab's people or ideas): the
   pressed one in the side's colour. */
.view-switch { display: flex; gap: 8px; }
.pane-switch { padding: 12px 24px 0; }
/* The pane's search, under its switch and over its list, which alone scrolls. */
.pane-search { padding: 12px 24px 0; }
.pane-search .find { margin-bottom: 0; }
.ideas-count { margin: 6px 0 0; }
.admin-views { margin-bottom: 16px; }
.view-button[aria-pressed="true"] { border-color: var(--accent); background: var(--line); }
.pane-list { flex: 1; overflow: auto; padding: 8px 24px 24px; }
.pane-list .idea { padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--line); }
/* Your ideas' Add an idea, or its form, above the list. */
.idea-add { padding: 10px 0 4px; }
.idea-form .form-actions { margin-top: 10px; }
/* The ideas like a new one, a line each, above Add it anyway and Cancel. */
.idea-like p, .idea-like ul { flex-basis: 100%; margin: 0; color: var(--ink1); }
.idea-like ul { padding-left: 18px; }

/* Courses */
.course-total { margin-bottom: 12px; }
.course-total, .work-count { font-size: 13px; color: var(--ink3); }
.tier { margin-bottom: 20px; }
.tier-head { justify-content: space-between; margin-bottom: 6px; }
.tier-name { font-family: var(--heading); font-weight: 700; font-size: 14px; color: var(--ink1); }
.tier-current { color: var(--accent-text); margin-left: 10px; }
.tier .tier-count { font-size: 12px; color: var(--ink3); margin-left: auto; }
.course-head, .dive-head { padding: 5px 0; font-size: 13px; }
/* A row to read, not to press: its (i) opens its details, and its Start starts it. */
.course-head { align-items: baseline; flex-wrap: wrap; cursor: default; }
.course-head .tag { margin-left: 0; }
/* The title as long as it is, its (i) beside it, and at the row's end its Start, its
   Continue, or its Complete. */
.course .course-title { flex: 0 1 auto; }
.course-head .open-chat { margin-left: auto; padding: 3px 10px; }
.course-head .tag.complete { margin-left: auto; }
/* The (i) sits right against its title, so its target is the 24 px square WCAG 2.2 AA asks
   for, drawn as the 18 px circle inside it (::before, behind the letter); the extra height
   is taken back with margins, so the row is as tall as it was. */
.course-info {
  position: relative;
  isolation: isolate;
  width: 24px;
  height: 24px;
  margin-top: -3px;
  margin-bottom: -3px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink2);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  line-height: 24px;
  cursor: pointer;
}
.course-info::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid var(--ink3);
  border-radius: 50%;
}
.course-info:hover::before { background: var(--line); }
.course-info[aria-expanded="true"] { color: var(--accent-text); }
.course-info[aria-expanded="true"]::before { border-color: var(--accent); }
/* Where a course stands. */
.tag.course-state { color: var(--ink1); border-color: var(--ink3); }
.tag.complete { color: var(--complete); border-color: var(--complete); }
/* The suggested course's button is drawn as its tag is, in the side's colour or the plain
   look's coral, so the two read as one. */
.tag.suggested, .open-chat.suggested { color: var(--accent-text); border-color: var(--accent); }
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid var(--line2);
  position: relative;
  top: 2px;
}
.dot.done { border-color: var(--ink1); background: var(--ink1); }
/* Begun and not done: half full, as a half step of a rating is drawn. */
.dot.started { border-color: var(--ink1); background: linear-gradient(90deg, var(--ink1) 50%, transparent 50%); }
.course-title { flex: 1; color: var(--ink1); }
.course-when { font-size: 12px; color: var(--ink3); }
.course-detail { padding: 2px 0 10px 24px; font-size: 13px; }
.course-summary { margin: 0 0 8px; }
.course-dates { margin: 0 0 6px; font-size: 12px; color: var(--ink3); }
/* A tier's optional courses, set in under its own: a subcategory, counted in none of its figures. */
.dive-deeper { margin: 6px 0 0; }
.dive-name, .dive-line { font-family: var(--heading); font-weight: 700; font-size: 13px; color: var(--ink2); }
.dive-body, .dive-deeper > .dive-line ~ * { padding-left: 12px; border-left: 2px solid var(--line2); }
.technical-note, .course-technical, .course-shown { margin: 0 0 6px 24px; font-size: 12px; color: var(--ink3); }
.course-detail .course-technical { margin-left: 0; }
.admin-course .tag { margin-left: 0; }
.admin-course .technical-note, .admin-course .course-shown { flex-basis: 100%; margin-bottom: 0; }
.open-chat:hover { background: var(--line); }
/* index.html's own: on the page, under the button it came from (app.js anchorToast sets
   where), until it goes by itself or is put away. The card's surfaces and borders, so a
   side's colours, dark mode and the plain look all reach it. Always in the page, so a
   screen reader hears it change; empty, it draws nothing, and stays in the accessibility
   tree (display: none would take it out). */
.toast {
  position: absolute;
  top: var(--toast-top, 0);
  left: var(--toast-left, 16px);
  z-index: 30;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 40px 12px 14px;
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--ink1);
  border: var(--card-border);
  border-top: var(--card-top);
  font-size: 13px;
  box-shadow: var(--card-shadow), 0 6px 24px rgba(31, 32, 66, 0.2);
}
.toast:empty { padding: 0; border: 0; background: none; box-shadow: none; }
.toast p { margin: 0; }
.toast-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.toast-open {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.toast-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.toast-dismiss:hover { background: var(--line); color: var(--ink1); }
/* The prompt to copy by hand: a read-only field on the toast's own colours, selected whole. */
.toast .toast-prompt { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 6px 8px;
  border: 1px solid var(--line2); border-radius: 6px; background: transparent; color: inherit;
  font: inherit; resize: none; }

/* Work map and Obi's memory */
.work-count { margin-bottom: 4px; }
.process-title { font-family: var(--heading); font-weight: 700; font-size: 14px; color: var(--ink1); }
.process-notes { font-size: 13px; }
.process-note { margin-top: 4px; font-size: 12px; color: var(--ink3); }
.memory-intro { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 13px; color: var(--ink3); }
/* Obi's notes, an entry at a time, laid out as the session readings are. */
.notes-head { font-size: 13px; margin: 0; }
/* A note, the form it is edited in and a change kept through signing in each sit under a line. */
.note, .note-form, .notes-waiting { padding: 8px 0; border-top: 1px solid var(--line); }
.note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  font-size: 13px;
}
.note-text, .waiting-text { color: var(--ink1); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-actions { display: flex; gap: 8px; }
/* Nothing to press yet: an Add at its limit or while its form is open, and every control of
   the notes while a write of them is on its way. */
.add:disabled, .memory-tab button:disabled, .memory-tab .note-edit:disabled { cursor: default; opacity: 0.5; }
.notes-saving { margin-left: auto; font-style: italic; }
.note-form .form-actions, .notes-pending { margin-top: 6px; }
.note-edit { resize: vertical; }
/* A change of the notes kept through signing in, waiting for Obi's memory to be read. */
.notes-waiting { font-size: 13px; }
.sessions-head { font-size: 13px; margin: 16px 0 6px; }
.session {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  font-size: 13px;
}
.session-date { color: var(--ink1); font-weight: 600; }
.scores { display: flex; gap: 14px; font-size: 12px; color: var(--ink3); flex-wrap: wrap; }
.session-example { font-style: italic; }

/* Editing: everything saves as it is left or changed, so a field reads as text with a
   dashed rule under it, as the design draws it. */
.field {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px dashed var(--line2);
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink1);
  background: transparent;
}
.form-process { font-family: var(--heading); font-weight: 700; font-size: 14px; }
.form-notes { resize: none; }
.work-form { padding: 10px 0; border-top: 1px solid var(--line); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* A boxed field: a select, and the Admin tab's Find a person. Its border is the muted ink,
   3:1 and more against the card in the light and dark looks (WCAG AA for a control). */
select, .find-input {
  border: 1px solid var(--ink3);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink1);
  background: var(--card-bg);
}
select:focus-visible, .find-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Its hint, at the page's body ink rather than the muted one, for text contrast. */
.find-input::placeholder { color: var(--ink2); opacity: 1; }
.settings-intro { margin: 0 0 12px; font-size: 13px; color: var(--ink3); }
.settings {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(0, 420px);
  gap: 12px 16px;
  align-items: center;
  font-size: 13px;
}
.setting-name, .form-name { color: var(--ink3); }
.check { display: flex; gap: 6px; align-items: center; }
.hint { font-size: 11px; color: var(--ink3); margin-top: 3px; }
.error { margin: 4px 0 0; font-size: 12px; color: var(--accent-text); }
.confirm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; color: var(--ink3); }
.saved { font-size: 12px; opacity: 0.75; }
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--accent-text);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--ink1);
}
.cta {
  border: 0;
  background: #c93a3a;
  color: #ffffff;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.danger { border-color: var(--accent-text); color: var(--accent-text); }
.add {
  margin-top: 12px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--ink1);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.process .form-actions, .work-form .form-actions { margin-top: 6px; }
.sq-controls { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; }
.sq-note, .idea-held { margin-top: 4px; font-size: 12px; color: var(--ink3); }
.idea-actions, .start-form, .clear-confirm {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.clear-confirm p { flex-basis: 100%; margin: 0; color: var(--ink1); }
.hidden-head { font-size: 13px; margin: 16px 0 6px; }
/* See hidden and See all ideas, side by side under the ideas. */
.idea-links { display: flex; gap: 0 18px; flex-wrap: wrap; }
.theirs { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 10px; }
.theirs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.theirs-head { font-size: 13px; margin: 0; }
.theirs-notes { margin-top: 6px; white-space: pre-wrap; font-size: 13px; color: var(--ink1); }
/* Heard by a screen reader, never seen: a topic's trend in words beside its arrow, and
   index.html's status line (the band's own mark says it to the eye). */
.sr-only, .status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The ideas pane is a dialog: the page behind it stays where it is. */
.pane-open body { overflow: hidden; }

/* What an admin did. */
.admin-changed, .admin-changed-note, .kept-note, .admin-add-note { margin-top: 6px; font-size: 12px; color: var(--ink3); }
.notice { margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--card-bg); color: var(--ink1); }
.tag {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--line2);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink3);
  white-space: nowrap;
}
/* Settings: worked-out values read as text. */
.setting-value { padding: 4px 0; color: var(--ink1); }

/* Figures: the admin views and the company status */
.figures { width: 100%; border-collapse: collapse; font-size: 13px; }
.figures th, .figures td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.figures thead th { border-top: 0; font-weight: 600; font-size: 12px; color: var(--ink3); }
.figures tbody th { font-weight: 600; color: var(--ink1); }
/* A figure's head lines up with its figures. */
.figures .num { text-align: right; }
.not-started th, .not-started td { color: var(--ink3); font-weight: 400; }
.person-link { margin: 0; text-align: left; font-size: 13px; }
.admin-pick { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; }
/* The Admin tab's finder: a field with its list of names under it, over what follows. */
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 16px; font-size: 13px; }
.find-box { position: relative; flex: 0 1 320px; min-width: 200px; }
.find-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow: auto;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: 8px;
  box-shadow: var(--card-shadow), 0 6px 24px rgba(31, 32, 66, 0.16);
}
.find-option { padding: 6px 12px; color: var(--ink1); cursor: pointer; }
.find-option:hover { background: var(--line); }
/* The name the arrow keys are on, in the side's colour. */
.find-option.active { background: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.find-none, .find-failed { flex-basis: 100%; font-size: 12px; }
.pick { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.admin-head, .drill-name { font-size: 18px; margin: 0 0 12px; }
.admin-sub, .map-head { font-size: 13px; margin: 20px 0 8px; }
.readings { margin-top: 8px; }
.reading-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.reading-list, .examples, .admin-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.reading, .example, .admin-list li { padding: 3px 0; }
.example { display: flex; justify-content: space-between; gap: 12px; }
.example-date { flex: none; font-size: 12px; color: var(--ink3); }
.radar-grid { fill: none; stroke: var(--line2); }
.radar-axis { stroke: var(--line2); }
/* Drawn once three axes have a reading (app.js radar), through those; its outline is its edges. */
.radar-shape { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: none; }
/* Said in the chart while a shape waits for three axes, legible over the axes. */
.radar-collecting { font-size: 11px; fill: var(--ink3); paint-order: stroke; stroke: var(--card-bg); stroke-width: 4px; }
/* The weeks on one radar: the newest solid, then dashed, then dotted; and each older week a
   paler shade of the side's colour, mixed toward the card's, so every look shades from its own
   and a printout keeps them all legible. The legend's swatches are the same lines. */
.radar-week, .week-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.week-1 { stroke-dasharray: 6 4; stroke: color-mix(in srgb, var(--accent) 75%, var(--card-bg)); }
.week-2 { stroke-dasharray: 1 4; stroke: color-mix(in srgb, var(--accent) 50%, var(--card-bg)); }
/* A chart's legend (app.js chartLegend): a key a line under the radar, side by side under
   the daily chart. */
.week-legend, .daily-legend { padding: 0; list-style: none; font-size: 12px; }
.week-legend { margin: 4px 0 8px; color: var(--ink3); }
.week-key, .legend-key { display: flex; align-items: center; }
.week-key { gap: 8px; padding: 2px 0; }
.week-swatch, .legend-swatch { flex: none; }
.week-table { margin-bottom: 8px; }
.week-table th, .week-table td { padding: 3px 6px; }
/* The last three weeks on the left, all time on the right; one above the other on a phone. */
.periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-items: start; }
.period-head { font-size: 13px; margin: 12px 0 8px; color: var(--ink1); }
.trend-arrow { margin-left: 4px; font-weight: 700; }
.radar-edge { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.radar-point, .trend-dot { fill: var(--accent); }
.radar-label { font-size: 9px; fill: var(--ink3); }
.radar-gap { font-size: 8px; font-style: italic; fill: var(--ink3); }
/* A reading's name carries its meaning as a tooltip (app.js named): said by a dotted line,
   and shown under the name on hover and on keyboard focus alike. */
.reading-term { position: relative; }
.reading-name { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.reading-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reading-tip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 260px;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--ink1);
  color: var(--card-bg);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}
.reading-term:hover > .reading-tip, .reading-term:focus-within > .reading-tip { display: block; }
/* Put away with Escape (app.js), until the focus moves on or the pointer goes over something
   else: as specific as the rule above, so it wins by coming after it. */
.tips-shut .reading-term > .reading-tip { display: none; }
.trend-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.trend-table th, .trend-table td { padding: 4px 6px; }
.trend-table td, .trend-table tbody th { vertical-align: middle; }
.trend-value { text-align: right; color: var(--ink2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 3px 8px; border-radius: 12px; font-size: 12px; color: var(--ink1); border: 1px solid var(--line2); }
/* Asides under a chart: the topic map's legend, the week the company readings run to, and
   that the daily charts' days are UTC days. */
.heat-legend, .readings-as-of, .daily-note { font-size: 12px; color: var(--ink3); }
.heat-legend, .readings-as-of { margin: 0 0 8px; }
/* Bigger for a topic more people or sessions carry. */
.chip.size-2 { font-size: 13px; }
.chip.size-3 { font-size: 14px; font-weight: 600; }
.chip.size-4 { font-size: 16px; font-weight: 700; }
/* A topic's lean, fixed whatever the theme: the Light Side's blue leaning positive, the Dark
   Side's red leaning negative, grey neutral (the sides' colours in app.js's palette); stronger
   the further from neutral. Declared on the chip, so no theme set on the page reaches them. */
.chip { --lean-pos: #0067e2; --lean-neg: #eb212e; --lean-neutral: #7a7a7c; }
.chip[class*="lean-"] { background: color-mix(in srgb, var(--lean) var(--lean-mix), transparent); border-color: var(--lean-edge); }
.chip.lean-0 { --lean: var(--lean-neutral); --lean-mix: 12%; --lean-edge: #a3a3ab; }
.chip.lean-pos-1 { --lean: var(--lean-pos); --lean-mix: 12%; --lean-edge: #7db4ff; }
.chip.lean-pos-2 { --lean: var(--lean-pos); --lean-mix: 26%; --lean-edge: #3d8ef0; }
.chip.lean-pos-3 { --lean: var(--lean-pos); --lean-mix: 42%; --lean-edge: var(--lean-pos); }
.chip.lean-neg-1 { --lean: var(--lean-neg); --lean-mix: 12%; --lean-edge: #ff9aa1; }
.chip.lean-neg-2 { --lean: var(--lean-neg); --lean-mix: 26%; --lean-edge: #f2545e; }
.chip.lean-neg-3 { --lean: var(--lean-neg); --lean-mix: 42%; --lean-edge: var(--lean-neg); }
/* The Admin tab's person view. */
.drill-email, .drill-org, .drill-teams, .drill-standing { font-size: 13px; }
.drill-email, .drill-standing { color: var(--ink3); }
.drill .small { margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.tile { border: 1px solid var(--line2); padding: 10px; }
.tile-n { font-family: var(--heading); font-weight: 700; font-size: 22px; color: var(--ink1); }
.tile-label, .tile-note { font-size: 12px; color: var(--ink3); }
/* Usage this month (app.js usageGroup): the head over its skills is a period's head, further
   from the tiles above it. */
.usage-head { margin-top: 16px; }
.bar { height: 3px; background: var(--line); border-radius: 2px; margin: 4px 0 8px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); }
.admin-course { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13px; }
.undo-confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.undo-confirm p { flex-basis: 100%; margin: 0; color: var(--ink1); }
.admin-add, .position { margin-top: 12px; }
.admin-add .form-actions, .position .form-actions, .pool-form .form-actions { margin-top: 10px; }
.pool-form { margin-top: 10px; }
.admin-sq { display: block; }
.card-head { font-size: 16px; margin: 0 0 12px; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; font-size: 13px; }
.map-row .bar { grid-column: 1 / -1; }
.map-title { color: var(--ink1); }
.map-count { font-size: 12px; color: var(--ink3); white-space: nowrap; }
/* The usage charts (app.js skillBars, dailyChart, byUser, byDay): drawn by their SVG's
   attributes and these classes, each colour a variable, so every look and print reach them. */
.series-1 { fill: var(--series-1); }
.series-2 { fill: var(--series-2); }
.series-3 { fill: var(--series-3); }
.series-4 { fill: var(--series-4); }
.series-5 { fill: var(--series-5); }
.series-other { fill: var(--series-other); }
/* A skill's bar fills the Uses column, its count at its end. */
.usage-skills td.num { width: 70%; }
.skill-row { display: flex; align-items: center; gap: 10px; }
.skill-bar { flex: 1 1 auto; min-width: 40px; height: 8px; background: var(--line); border-radius: 2px; }
.skill-bar-fill { fill: var(--accent); }
.skill-count { flex: none; min-width: 3ch; text-align: right; color: var(--ink1); }
/* A column a day, the busiest as tall as the plot, its most said over the plot's top line. */
.daily-chart { position: relative; margin: 4px 0 8px; padding-top: 16px; }
.daily-peak { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--ink3); }
.daily-plot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  /* One row, the plot's height: a column's drawing takes the row's height, never its own. */
  grid-template-rows: 140px;
  gap: 2px;
  border-top: 1px dashed var(--line2);
  border-bottom: 1px solid var(--line2);
}
.day-col { display: block; min-height: 0; }
.day-col:hover, .day-col:focus-visible { background: var(--line); }
.day-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.day-bars { display: block; width: 100%; height: 140px; }
/* A card-coloured edge between stacked parts, the same width however the column is drawn. */
.day-part { stroke: var(--card-bg); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* From the middle on, a column's tooltip opens leftward, so it stays on the card. */
.day-col.late > .reading-tip { left: auto; right: 0; }
.day-tip .tip-line { display: block; white-space: nowrap; }
/* Total skill uses: what it counts, then the skills leaderboard a line each. */
.usage-board .tip-line { display: block; }
.usage-board .tip-line:first-child { margin-bottom: 4px; }
.daily-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--ink3); }
.daily-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 4px; color: var(--ink2); }
.legend-key { gap: 6px; }
.daily-note { margin: 4px 0 8px; }
.by-user .small { margin-top: 8px; }
.day-step { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.day-shown { margin: 0; min-width: 110px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink1); }
.day-step .small:disabled { cursor: default; opacity: 0.5; }
/* A cell darker the more loads it holds against the day's most, in the side's colour. */
.day-cell.shade-1 { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.day-cell.shade-2 { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.day-cell.shade-3 { background: color-mix(in srgb, var(--accent) 42%, transparent); }
.day-cell.shade-4 { background: color-mix(in srgb, var(--accent) 60%, transparent); }

/* A Letter page is narrower than this too, so the rule is a screen's alone. */
@media screen and (max-width: 760px) {
  .band-row { flex-wrap: wrap; }
  /* Beside the crest, however long: both bands keep one shape. */
  .who { flex: 1 1 0; }
  /* Full width, so what the band says wraps rather than widening the page. */
  .standing { padding-left: 0; border-left: 0; flex: 1 1 100%; min-width: 0; }
  .quest-tiles { grid-template-columns: 1fr; }
  .periods { grid-template-columns: minmax(0, 1fr); }
  .settings { grid-template-columns: minmax(0, 1fr); }
  /* A retired or admin row's date goes under its title rather than squeeze it (both rows
     wrap); a profile row's title keeps its own width (.course .course-title). */
  .course-title { flex: 1 1 50%; }
  .course-when { margin-left: auto; }
  /* Wide tables scroll on their own rather than widening the page. The covers move with
     the figures (local) and the shadows stay at the edges (scroll), so a shadow shows only
     where there is more to see; the first column stays put as the rest scrolls under it. */
  .figures {
    display: block;
    overflow-x: auto;
    background:
      linear-gradient(to right, var(--card-bg) 30%, transparent) left / 24px 100% no-repeat local,
      linear-gradient(to left, var(--card-bg) 30%, transparent) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), transparent) right / 12px 100% no-repeat scroll;
  }
  .figures tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--card-bg); }
  /* Each sticky cell is a layer of its own: the one a tooltip opens from rises over those below. */
  .figures tr > :first-child:hover, .figures tr > :first-child:focus-within { z-index: 2; }
}

/* Dark surfaces, derived from Ink as the design's are; a printout stays light. */
@media screen {
  .dark {
    color-scheme: dark;
    --page-bg: #090a10;
    --card-bg: #0f1119;
    --ink1: #ffffff;
    --ink2: #d6d6d9;
    --ink3: #a3a3ab;
    --line: rgba(255, 255, 255, 0.1);
    --line2: rgba(255, 255, 255, 0.24);
    --accent-text: var(--side-night, #ff8a8a);
    --card-border: 1px solid rgba(255, 255, 255, 0.18);
    --card-top: 1px solid rgba(255, 255, 255, 0.18);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-other: #7a7a7c;
    --complete: #4ac26b;
    --band-grid: repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 22px),
      linear-gradient(135deg, #0b0d16 0%, #1f2042 100%);
  }
}

@media print {
  body { background: #ffffff; }
  .noprint, .chevron { display: none !important; }
  /* A printout is handed on: a link on it says where it goes. */
  .sq-link::after { content: " (" attr(href) ")"; word-break: break-all; }
  .printed + .printed { margin-top: 28px; }
  .printed-head { font-size: 16px; margin: 0 0 8px; }
  .grid { display: block !important; }
  .quest-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card {
    background: #ffffff !important;
    color: var(--ink1) !important;
    box-shadow: none !important;
    border: 1px solid var(--line2);
    break-inside: avoid;
    margin-bottom: 16px;
  }
  /* The tabs card runs to pages; what is kept whole is each thing in it. */
  .tabs-card { break-inside: auto; }
  .quest-tile, .side-quest, .tier, .process, .session { break-inside: avoid; }
  /* The grip is not printed, so the body takes the whole width, not the grip's column. */
  .side-quest { grid-template-columns: minmax(0, 1fr); }
  /* Chrome prints no backgrounds unless asked: these carry a state, so they keep theirs. */
  .dot, .bar, .bar-fill, .chip, .skill-bar, .skill-bar-fill, .day-part, .legend-swatch, .day-cell {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .figures tr, .tile, .map-row, .admin-course { break-inside: avoid; }
  .reading-name { text-decoration: none; }
  /* A chart's numbers, heard and not seen on a screen, are on paper what the chart says. */
  .chart-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    margin-top: 8px; }
  .daily-chart, .daily-legend { break-inside: avoid; }
}