/* ═══════════════════════════════════════════════════════════════════════════
   THE MARKER, THE RECORD AND THE READING

   The fourth layer. tokens gives the vocabulary, shell builds the chrome,
   patterns builds the application; this adds the three things that arrived
   with the learning record — points, the statements themselves, and what a
   model made of them.

   It is a separate file rather than more of patterns.css for one reason worth
   stating: nothing here invents a colour, a size or a radius. Every value is a
   token, so if this file were deleted tomorrow the rest of the interface would
   not notice, and nothing in it can drift away from the design.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the calendar ─────────────────────────────────────────────────────────
   A year of the record at a glance. The cells are small on purpose: the shape
   of somebody's attendance is the message, not any one day. */

.viz .plot.cal { max-width: 100%; }
.viz .plot.cal rect { transition: fill-opacity var(--fast) var(--ease); }
.viz .plot.cal rect:hover { fill-opacity: 1; }
.viz .plot.cal text.ax {
  font: 500 8px/1 var(--font-ui);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

/* The five steps, shown so the picture can be read without hovering. */
.cal-key { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.cal-key span {
  font: 700 var(--t-11)/1 var(--font-ui);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3);
}
.cal-key i {
  width: 11px; height: 11px; border-radius: 2px; background: var(--viz-1);
  display: inline-block;
}
.cal-key i.z { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }

/* ── the ring ─────────────────────────────────────────────────────────────
   One number that is the headline of a screen. */

.viz .plot.ring, .plot.ring { width: 116px; height: 116px; flex: none; }

.level-head {
  display: flex; align-items: center; gap: var(--sp-6);
  flex-wrap: wrap;
}
.level-head .meta { min-width: 0; flex: 1 1 12rem; }
.level-head .meta h2 {
  font: 700 var(--t-24)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--track-tight); margin: 0;
}
.level-head .meta p { margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: var(--t-13); }
.level-head .pts {
  font: 700 var(--t-32)/1 var(--font-display);
  font-variant-numeric: tabular-nums; letter-spacing: var(--track-tighter);
}
.level-head .pts small {
  font: 700 var(--t-11)/1 var(--font-ui); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-3); margin-left: var(--sp-2);
}

/* ── badges ───────────────────────────────────────────────────────────────
   Held and unheld together, because a grid of only what somebody already has
   tells them nothing about what to do next. The unheld ones are quiet, not
   hidden. */

.badge-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.badge-tile {
  border: var(--rule-hair); border-radius: var(--r-lg);
  padding: var(--sp-5); background: var(--surface-1);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
}
.badge-tile .em { line-height: 0; color: var(--ink-3); }
.badge-tile.have .em { color: var(--tint-a); }
.badge-tile b {
  font: 700 var(--t-13)/var(--lh-snug) var(--font-ui);
  letter-spacing: var(--track-tight);
}
.badge-tile span { font-size: var(--t-11); color: var(--ink-3); line-height: var(--lh-snug); }
.badge-tile .pts {
  font: 700 var(--t-11)/1 var(--font-ui); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-3); margin-top: auto;
}
.badge-tile.have { border-color: var(--tint-a); background: var(--surface-2); }
.badge-tile.have .pts { color: var(--tint-a); }
/* Not greyed into illegibility: somebody has to be able to read what it takes. */
.badge-tile.want .em { opacity: .45; }

/* ── the table ────────────────────────────────────────────────────────────
   A leaderboard at work is a list of who is behind, shown to people they work
   with. It is drawn quietly for that reason. */

.board { display: flex; flex-direction: column; }
.board .row {
  display: grid; grid-template-columns: 2.2rem 1fr auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: var(--rule-hair);
}
.board .row:last-child { border-bottom: 0; }
.board .row.me { background: var(--surface-2); border-radius: var(--r-sm); }
.board .rank {
  font: 700 var(--t-13)/1 var(--font-ui); font-variant-numeric: tabular-nums;
  color: var(--ink-3); text-align: right;
}
.board .row.me .rank { color: var(--tint-a); }
.board .who { min-width: 0; }
.board .who b {
  display: block; font: 500 var(--t-15)/var(--lh-snug) var(--font-ui);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board .who span { font-size: var(--t-11); color: var(--ink-3); }
/* A pseudonym is set in the mono face so it does not read as a name. */
.board .who b.anon { font-family: var(--font-mono); font-size: var(--t-13); color: var(--ink-2); }
.board .val {
  font: 700 var(--t-15)/1 var(--font-ui); font-variant-numeric: tabular-nums;
}

/* ── provenance ───────────────────────────────────────────────────────────
   Whether a model read this, which one, over how much, and how sure it was.
   Beside the heading rather than in a footnote: it changes how the panel
   should be read. */

.ai-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 700 var(--t-11)/1 var(--font-mono);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink-3);
  border: var(--rule-hair); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
  vertical-align: middle;
}
.ai-chip.on { color: var(--tint-a); border-color: var(--tint-a); }
.ai-foot {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: var(--rule-hair);
  font-size: var(--t-11); color: var(--ink-3); line-height: var(--lh-snug);
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
}
.ai-foot .grow { flex: 1 1 auto; }

/* ── the axes a profile is made of ────────────────────────────────────────
   Value as width, confidence as opacity. An axis measured on nothing is drawn
   as nothing rather than as a plausible half. */

.axes { display: flex; flex-direction: column; gap: var(--sp-3); }
.axis { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: var(--sp-3); }
.axis .k { font-size: var(--t-12); color: var(--ink-2); }
.axis .t { height: 7px; border-radius: var(--r-pill); background: var(--paper-2); overflow: hidden; }
.axis .t i { display: block; height: 100%; background: var(--tint-a); border-radius: var(--r-pill); }
.axis .v {
  font: 700 var(--t-12)/1 var(--font-ui); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink-2);
}
.axis.unknown .v { color: var(--ink-3); }
@media (max-width: 30rem) { .axis { grid-template-columns: 6.5rem 1fr 2.4rem; } }

/* ── the statement explorer ───────────────────────────────────────────────
   The record itself, one row a fact. Monospace for the parts that are
   identifiers, because they are read for shape rather than for meaning. */

.stmt-list { display: flex; flex-direction: column; }
.stmt {
  display: grid; grid-template-columns: 5.4rem 1fr auto;
  gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: var(--rule-hair);
}
.stmt:last-child { border-bottom: 0; }
.stmt .when {
  font: 500 var(--t-11)/1.4 var(--font-mono); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.stmt .what { min-width: 0; }
.stmt .what b { font: 500 var(--t-13)/var(--lh-snug) var(--font-ui); }
.stmt .what .verb {
  font: 700 var(--t-11)/1 var(--font-ui); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--tint-a); margin-right: var(--sp-2);
}
.stmt .what span.obj {
  display: block; font-size: var(--t-11); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stmt .score {
  font: 700 var(--t-12)/1 var(--font-ui); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stmt .score.ok { color: var(--good); }
.stmt .score.no { color: var(--bad); }
.stmt-json {
  margin: 0; padding: var(--sp-5);
  background: var(--surface-sunken); border-radius: var(--r-md);
  font: 400 var(--t-11)/1.6 var(--font-mono);
  overflow-x: auto; white-space: pre;
  color: var(--ink-2);
}

/* ── the vocabulary ───────────────────────────────────────────────────────
   Verbs as what they are: a registry, with the IRI shown, because the IRI is
   the part another system reads. */

.verb-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
  align-items: center; padding: var(--sp-4) var(--sp-2);
  border-bottom: var(--rule-hair);
}
.verb-row:last-child { border-bottom: 0; }
.verb-row .name { min-width: 0; }
.verb-row .name b { font: 500 var(--t-15)/var(--lh-snug) var(--font-ui); }
.verb-row .name code {
  display: block; font: 400 var(--t-11)/1.5 var(--font-mono);
  color: var(--ink-3); overflow-wrap: anywhere; margin-top: 2px;
}
.verb-row .flags { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

/* ── the engine ───────────────────────────────────────────────────────────
   What this deployment can actually do. A panel that says a model is attached
   when none is would be worse than no panel. */

.engine-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.engine-cell {
  border: var(--rule-hair); border-radius: var(--r-lg);
  padding: var(--sp-5); background: var(--surface-1);
}
.engine-cell .k {
  font: 700 var(--t-11)/1 var(--font-ui); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-3);
}
.engine-cell .v {
  display: block; margin-top: var(--sp-2);
  font: 700 var(--t-20)/1 var(--font-display); font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
.engine-cell .v.sm { font: 500 var(--t-13)/1.4 var(--font-mono); letter-spacing: 0; }
.engine-cell.good .v { color: var(--good); }
.engine-cell.bad .v { color: var(--bad); }

/* ── plain lists ──────────────────────────────────────────────────────────
   Strengths and growth notes: a line each, the icon carrying the sense so the
   text does not have to start with "you are good at". */

.list.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list.plain li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: var(--rule-hair);
  font-size: var(--t-15); line-height: var(--lh-snug);
}
.list.plain li:last-child { border-bottom: 0; }
.list.plain li svg { flex: none; margin-top: 2px; color: var(--ink-3); }

/* ── the tab strip ────────────────────────────────────────────────────────
   Four ways of looking at one thing, so they sit together rather than becoming
   four entries in the rail. */

.seg { display: inline-flex; border: var(--rule-hair); border-radius: var(--r-pill); overflow: hidden; }
.seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: var(--sp-2) var(--sp-5);
  font: 700 var(--t-12)/1 var(--font-ui);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink-3);
  border-right: var(--rule-hair);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); }
.seg button:hover { color: var(--ink); }