/* ============================================================================
   Screens. Everything specific to one surface: sign in, My day, the score card,
   the time sheet, the org tree, the leaderboards, the profile, the boards.

   Every layout in here has to survive 400px, and the rule that makes that cheap
   is the same one every time: the responsive behaviour is in the grid template,
   not in a media query. `repeat(auto-fit, minmax(min(100%, Npx), 1fr))` becomes
   one column when one column is what fits, at any width, with no breakpoint to
   keep in step. Media queries are here only where the CHANGE IN KIND is real -
   the nav becoming a drawer, the sign-in panel stacking, a table's minimum.
   ========================================================================= */

/* ============================================================================
   SIGN IN

   Two panels. The left is the ONLY surface outside #nav that uses the
   --c-nav-* tokens, and that is what makes this screen unmistakably the same
   product as the shell behind it: in the saffron look you sign in against
   aubergine and land on white paper.
   ========================================================================= */

.auth {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  padding: var(--s-10) var(--s-10) var(--s-9);
  background: var(--c-nav-bg);
  color: var(--c-nav-text);
  border-right: var(--bw) solid var(--c-nav-border);
  overflow-y: auto;
  min-width: 0;
}
.auth-brand-top { display: flex; align-items: center; gap: var(--s-5); flex: none; }
.auth-mark { width: 30px; height: 30px; color: var(--c-nav-brand); flex: none; }
.auth-wordmark {
  font-family: var(--t-display);
  font-size: var(--t-xl);
  font-weight: var(--t-bold);
  letter-spacing: var(--t-track-tight);
  color: var(--c-nav-text-active);
}
.auth-brand-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); min-width: 0; }
.auth-lede {
  font-family: var(--t-display);
  font-size: var(--t-3xl);
  font-weight: var(--t-bold);
  line-height: var(--t-tight);
  letter-spacing: var(--t-track-tight);
  color: var(--c-nav-text-active);
  /* A measure, not a width. The line breaks where the sentence wants to break
     rather than wherever the panel happens to end. */
  max-width: 14ch;
}
.auth-blurb {
  max-width: 46ch;
  color: var(--c-nav-text);
  font-size: var(--t-md);
  line-height: var(--t-loose);
}
.auth-brand-foot {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
  color: var(--c-nav-text-2);
  font-size: var(--t-sm);
}
.auth-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c-nav-brand); flex: none; }

.auth-panel {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-8) var(--s-9);
  overflow-y: auto;
  min-width: 0;
  background: var(--c-bg);
}
.auth-panel-top { display: flex; align-items: center; flex: none; }
.auth-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-6);
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: var(--s-8) 0;
  min-width: 0;
}
.auth-title {
  font-size: var(--t-2xl);
  font-weight: var(--t-bold);
  letter-spacing: var(--t-track-tight);
}
.auth-sub { color: var(--c-text-2); font-size: var(--t-md); line-height: var(--t-body); }
.auth-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.auth-back-icon { width: 14px; height: 14px; transform: rotate(90deg); }
.auth-legal {
  flex: none;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  color: var(--c-text-3);
  font-size: var(--t-xs);
  line-height: var(--t-body);
}

@media (max-width: 860px) {
  /* Below this the two panels stop being two panels. The brand block keeps its
     mark and its one line and loses the paragraph, because a phone signing in
     wants the field, not the pitch. */
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .auth-brand {
    flex-direction: row;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-7);
    border-right: 0;
    border-bottom: var(--bw) solid var(--c-nav-border);
  }
  .auth-brand-body { flex: 1 1 auto; justify-content: center; }
  .auth-blurb, .auth-brand-foot { display: none; }
  .auth-lede { font-size: var(--t-lg); max-width: none; }
  .auth-panel { padding: var(--s-6) var(--s-6) var(--s-9); }
  .auth-stage { justify-content: flex-start; padding-top: var(--s-7); }
}

/* ============================================================================
   MY DAY
   ========================================================================= */

.myday-top {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--s-6);
  margin-bottom: var(--s-9);
  align-items: start;
}
.myday-side { display: grid; gap: var(--s-6); min-width: 0; }
.myday-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 900px) {
  .myday-top { grid-template-columns: minmax(0, 1fr); }
}

.page-sub-sep { margin: 0 var(--s-4); color: var(--c-text-3); }
.dot-sep { margin: 0 var(--s-3); color: var(--c-text-3); }

/* The cycle pill is the one piece of ambient state on My day: where you are in
   the cycle, with the bar underneath so the answer is available without
   reading. It is a pill and not a card because it belongs to the heading. */
.cycle-pill {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6) var(--s-5);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}
.cycle-pill-name { font-weight: var(--t-semibold); font-size: var(--t-sm); }
.cycle-pill-days { color: var(--c-text-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.cycle-pill-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-surface-3); }
.cycle-pill-fill { display: block; height: 100%; background: var(--c-accent); }

/* min-height 24, which is the WCAG 2.5.8 floor for a link. These two sit alone
   under a section rather than inside a sentence, so they are targets people aim
   at rather than text they happen to click. */
.section-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  font-weight: var(--t-semibold);
}
.section-link svg { width: 15px; height: 15px; }
.card-link { display: inline-flex; align-items: center; min-height: 24px; gap: var(--s-3); font-size: var(--t-sm); font-weight: var(--t-semibold); flex: none; }
.card-link svg { width: 14px; height: 14px; }

.side-none { color: var(--c-text-2); font-size: var(--t-md); margin: var(--s-4) 0 var(--s-3); }
.side-strong {
  margin: var(--s-4) 0 var(--s-4);
  font-family: var(--t-display);
  font-size: var(--t-md);
  font-weight: var(--t-semibold);
  line-height: var(--t-snug);
}
.side-line {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--t-snug);
}
.side-line + .side-line { margin-top: var(--s-3); }
.side-line svg { width: 14px; height: 14px; flex: none; }
.side-pending { margin-top: var(--s-5); color: var(--c-warn); }

.tasklist { display: flex; flex-direction: column; }
.tasklist-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-7);
  border-bottom: var(--bw) solid var(--c-border-subtle);
  min-width: 0;
}
.tasklist-row:last-child { border-bottom: 0; }
.tasklist-mark { flex: none; width: 16px; height: 16px; color: var(--c-success); margin-top: 2px; }
.tasklist-mark[data-overdue="1"] { color: var(--c-danger); }
.tasklist-mark svg { width: 16px; height: 16px; }
.tasklist-num {
  flex: none;
  color: var(--c-text-3);
  font-family: var(--t-mono);
  font-size: var(--t-xs);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tasklist-text { min-width: 0; flex: 1 1 auto; }
.tasklist-title { display: block; font-weight: var(--t-medium); line-height: var(--t-snug); }
.tasklist-meta { display: block; margin-top: var(--s-2); color: var(--c-text-3); font-size: var(--t-xs); }
/* The chip states a deadline, which is the one thing on the row that must not
   be abbreviated. At 400px the row squeezed it to "in 5 hou..." while the title
   beside it had room to wrap; flex: none reverses that priority. */
.tasklist-row > .chip { flex: none; }

/* ============================================================================
   SCORE CARD
   ========================================================================= */

.score-card { background: var(--c-bg); }
.score-head { display: flex; align-items: flex-start; gap: var(--s-6); flex-wrap: wrap; }
.score-head-text { min-width: 0; flex: 1 1 auto; }
.score-range { margin-left: var(--s-5); color: var(--c-text-3); letter-spacing: var(--t-track-normal); text-transform: none; font-weight: var(--t-normal); }
.score-card .figure-hero { margin-top: var(--s-4); }
.score-unevaluated {
  margin-top: var(--s-4);
  font-family: var(--t-display);
  font-size: var(--t-2xl);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-tight);
  color: var(--c-text-3);
}
.score-context {
  margin-top: var(--s-5);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--t-body);
  max-width: 66ch;
}
.score-context strong { color: var(--c-text); }
.score-meter { margin-top: var(--s-6); }
.score-none { margin: var(--s-5) 0 var(--s-3); color: var(--c-text-2); font-size: var(--t-md); }

.score-break { margin-top: var(--s-8); padding-top: var(--s-7); border-top: var(--bw) solid var(--c-border); }
.score-break-head { display: flex; align-items: baseline; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); }

/* A component row is a four column grid and not a table, because at 400px the
   grid can drop the meter and keep the numbers, which a table cannot do without
   hiding a cell and leaving a ragged header behind. */
.comp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 68px 54px;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: var(--bw) solid var(--c-border-subtle);
}
.comp:last-child { border-bottom: 0; }
.comp-label { display: flex; align-items: baseline; gap: var(--s-4); min-width: 0; }
.comp-name { font-size: var(--t-sm); font-weight: var(--t-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-scope {
  flex: none;
  color: var(--c-text-3);
  font-size: var(--t-2xs);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
}
.comp-figure { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comp-earned { font-weight: var(--t-semibold); font-size: var(--t-sm); }
.comp-max { color: var(--c-text-3); font-size: var(--t-xs); margin-left: var(--s-2); }
.comp-days { text-align: right; color: var(--c-text-3); font-size: var(--t-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .comp { grid-template-columns: minmax(0, 1fr) 68px 54px; }
  .comp-meter { display: none; }
  .comp-scope { display: none; }
}

/* The reliability figure sits in the card FOOT, below a rule, and that
   separation is the design carrying the rule: time sheet discipline is
   published beside the score and is never added into it. */
.score-aside { align-items: center; justify-content: space-between; gap: var(--s-6); }
.score-aside-text { min-width: 0; flex: 1 1 260px; }
.score-aside-figure { display: flex; align-items: baseline; gap: var(--s-3); flex: none; }
.score-aside-value {
  font-family: var(--t-display);
  font-size: var(--t-xl);
  font-weight: var(--t-bold);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.score-aside-of { color: var(--c-text-3); font-size: var(--t-sm); }
.score-rules { color: var(--c-text-3); font-size: var(--t-xs); align-items: flex-start; }
.score-rules svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ------------------------------------------------------------ daily strip */
.daily { border: var(--bw) solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.daily-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(80px, 1fr) 116px minmax(0, 1.2fr);
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-7);
  border-bottom: var(--bw) solid var(--c-border-subtle);
}
.daily-row:last-child { border-bottom: 0; }
.daily-name { font-size: var(--t-sm); font-weight: var(--t-medium); min-width: 0; }
.daily-bar { min-width: 0; }
.daily-points { text-align: right; white-space: nowrap; }
.daily-value { font-weight: var(--t-bold); font-variant-numeric: tabular-nums; }
.daily-max { display: block; color: var(--c-text-3); font-size: var(--t-2xs); }
.daily-who { color: var(--c-text-3); font-size: var(--t-xs); min-width: 0; text-align: right; }
.daily-note { color: var(--c-text-2); font-size: var(--t-xs); line-height: var(--t-snug); margin-top: var(--s-2); }
@media (max-width: 720px) {
  .daily-row { grid-template-columns: minmax(0, 1fr) 92px; row-gap: var(--s-3); }
  .daily-bar { grid-column: 1 / -1; order: 3; }
  .daily-who { grid-column: 1 / -1; order: 4; text-align: left; }
}
.daily-empty {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-7);
  border: var(--bw) dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  color: var(--c-text-2);
  font-size: var(--t-sm);
}
.daily-empty svg { width: 17px; height: 17px; flex: none; }

/* ============================================================================
   THE TIME SHEET

   A grid of real inputs styled to look like cells. The cell reads as part of
   the table at rest and as a field the moment it has focus, which is what makes
   it feel like a spreadsheet rather than like a form that happens to be in a
   table.
   ========================================================================= */

.sheet-wrap {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  overflow: hidden;
}
.sheet { min-width: 880px; table-layout: fixed; }
/* Column widths, because auto layout gives a 600 character notes column the
   same width as a three digit budget and then scrolls the note out of sight
   inside its own input. The two minute columns are as narrow as four digits
   need; what is left goes to the task and the note, which are the two columns
   somebody actually reads. */
.sheet col.c-task { width: 270px; }
.sheet col.c-num { width: 86px; }
.sheet col.c-notes { width: auto; }
.sheet col.c-source { width: 104px; }
.sheet col.c-approval { width: 152px; }
.sheet col.c-gutter { width: 38px; }
.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-surface);
}
.sheet td { padding: 0; border-bottom: var(--bw) solid var(--c-border-subtle); }
.sheet tbody tr:hover td { background: transparent; }
.sheet-row.on td { background: var(--c-hover); }

/* The row gutter is sticky so the line number stays visible while the sheet is
   scrolled sideways. Without it, a wide sheet scrolled right is a grid of
   numbers with nothing to say which line they belong to. */
.sheet-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 38px;
  min-width: 38px;
  padding: var(--s-4) var(--s-5) !important;
  background: var(--c-bg);
  color: var(--c-text-3);
  font-size: var(--t-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-right: var(--bw) solid var(--c-border-subtle);
}
.sheet thead .sheet-gutter { background: var(--c-surface); z-index: 3; }
.sheet-row.on .sheet-gutter { background: var(--c-hover); color: var(--c-text); }

/* The approval edge. Four states, told apart by the left border rather than by
   a word, because the difference between "wait" and "act" has to be readable
   from across the table. */
.sheet-row td:first-child { box-shadow: inset 3px 0 0 0 transparent; }
.sheet-row[data-edge="approved"] td:first-child { box-shadow: inset 3px 0 0 0 var(--c-success); }
.sheet-row[data-edge="rejected"] td:first-child { box-shadow: inset 3px 0 0 0 var(--c-danger); }
.sheet-row[data-edge="pending"] td:first-child { box-shadow: inset 3px 0 0 0 var(--c-border-strong); }
.sheet-row[data-edge="draft"] td:first-child { box-shadow: inset 3px 0 0 0 transparent; }

.cell {
  width: 100%;
  min-height: 34px;
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--t-sm);
  box-shadow: none;
  /* An <input> carries an intrinsic width from its size attribute, and inside a
     fixed-layout table that intrinsic width wins over width:100% and pushes the
     field a few pixels past its own cell. Zero is the only value that lets the
     column decide. */
  min-width: 0;
}
.cell:hover:not(:focus) { background: var(--c-hover); border-color: transparent; }
.cell:focus {
  background: var(--c-bg);
  border-color: var(--c-accent);
  border-radius: var(--r-xs);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 26%, transparent);
  position: relative;
  z-index: 2;
}
.num-cell .cell { text-align: right; font-variant-numeric: tabular-nums; }
.cell-bad { border-color: var(--c-danger) !important; background: var(--c-danger-quiet); }
/* A flash rather than a message. A toast for every committed cell would be a
   wall of toasts; a cell that goes green for a moment says the same thing to
   the person who is looking at it. */
.cell-saved { animation: cell-flash 900ms var(--m-ease); }
@keyframes cell-flash {
  0%   { background: var(--c-success-quiet); }
  100% { background: transparent; }
}

.sheet-approval { padding: var(--s-3) var(--s-5) !important; white-space: nowrap; }
.sheet-approval button { margin-left: var(--s-3); vertical-align: middle; }
.sheet-reason td {
  padding: var(--s-3) var(--s-5) var(--s-5) !important;
  color: var(--c-danger);
  font-size: var(--t-xs);
  line-height: var(--t-snug);
}
.sheet-reason td svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: var(--s-3); }
.sheet-reason strong { color: var(--c-danger); }

.sheet-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  padding: var(--s-6) var(--s-7);
  border-top: var(--bw) solid var(--c-border);
  background: var(--c-surface);
}
.sheet-total { min-width: 0; }
.sheet-total-label {
  display: block;
  color: var(--c-text-3);
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
}
.sheet-total-value {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-md);
  font-weight: var(--t-semibold);
  font-variant-numeric: tabular-nums;
}
.sheet-total-value[data-tone="warn"] { color: var(--c-warn); }
.sheet-total-note { flex: 1 1 240px; }
.sheet-total-note .sheet-total-value { font-weight: var(--t-medium); }
.sheet-total-note .muted { display: block; margin-top: var(--s-2); line-height: var(--t-snug); }

.sheet-foot {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding: var(--s-5) var(--s-7);
  border-top: var(--bw) solid var(--c-border);
}

/* ============================================================================
   ORG TREE
   ========================================================================= */

/* The tree reads as a TREE and not as a list of cards, and the difference is
   made by three things together: rows with no gap between them, rows with no
   fill of their own, and connectors that are darker than the hairlines around
   them. The first version had a 2px gap and a white fill per row against an
   almost-white canvas, which turned every node into a floating card and left
   the wires running behind them where they could not be followed. */
.tree {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  padding: var(--s-6) var(--s-6) var(--s-7);
  overflow-x: auto;
}
.tree-canvas { position: relative; min-width: min(560px, 100%); }
/* The wire overlay sits UNDER the rows and takes no pointer events, so a wire
   can never eat a click meant for a node. */
.tree-wires { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.tree-rows { position: relative; z-index: 1; display: flex; flex-direction: column; }

.tree-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  border: var(--bw) solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  min-width: 0;
  cursor: default;
}
.tree-node:hover { background: var(--c-hover); border-color: var(--c-border); }
.tree-node:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.tree-node.dragging { opacity: 0.45; }
.tree-node.drop-ok { border-color: var(--c-success); background: var(--c-success-quiet); }
.tree-node.drop-no { border-color: var(--c-danger); background: var(--c-danger-quiet); }

/* The dot is what the SVG wires point at, so its size is referenced by the
   drawing code. Changing it here means changing dotR in tree.mjs.

   Filled rather than hollow: a 2px ring on an 8px circle in a light look is
   four faint arcs, and at the end of a hairline wire it disappears. A solid
   disc is unambiguously the end of the line. */
.tree-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--c-border-strong);
  border: 0;
}
.tree-node[data-depth="0"] .tree-dot { background: var(--c-accent); width: 9px; height: 9px; }

.tree-toggle {
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-3);
  box-shadow: none;
}
.tree-toggle:hover { background: var(--c-surface-2); color: var(--c-text); }
.tree-toggle svg { width: 15px; height: 15px; }
.tree-toggle-spacer { flex: none; width: 32px; height: 32px; }

.tree-body { min-width: 0; flex: 1 1 auto; }
.tree-line1 { display: flex; align-items: baseline; gap: var(--s-4); min-width: 0; flex-wrap: wrap; }
.tree-line2 { display: flex; align-items: center; gap: var(--s-4); min-width: 0; margin-top: var(--s-1); flex-wrap: wrap; }
.tree-name {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: var(--t-semibold);
  color: var(--c-text);
  font-size: var(--t-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-name:hover { text-decoration: underline; }
.tree-kind {
  flex: none;
  color: var(--c-text-3);
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
}
.tree-leads { display: flex; align-items: center; gap: var(--s-4); min-width: 0; flex-wrap: wrap; }
.tree-lead {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 160px;
  color: var(--c-text-2);
  font-size: var(--t-xs);
}
.tree-lead:hover { text-decoration: none; color: var(--c-text); }
.tree-vacancy {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-warn);
  font-size: var(--t-xs);
  font-weight: var(--t-medium);
}
.tree-vacancy svg { width: 13px; height: 13px; flex: none; }
.tree-counts { flex: none; color: var(--c-text-3); font-size: var(--t-xs); white-space: nowrap; }
.tree-note { margin-top: var(--s-5); }

@media (max-width: 620px) {
  /* Below this there is no room for a lead chip AND a count on one line, so the
     counts drop and the leads stay: who runs a unit is the question people come
     to this screen with. */
  .tree-counts { display: none; }
  .tree-lead { max-width: 108px; }
}

/* ============================================================================
   LEADERBOARDS
   ========================================================================= */

.board-panel { margin-top: var(--s-8); }

.podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--s-6);
  margin-bottom: var(--s-9);
}
.podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  text-align: center;
  min-width: 0;
}
/* First place is marked with a top rule in the accent rather than with a gold
   gradient. A leaderboard inside a workplace is a fact, not a casino. */
.podium-card[data-place="1"] { border-color: var(--c-accent); box-shadow: inset 0 3px 0 0 var(--c-accent); }
.podium-place {
  font-family: var(--t-mono);
  font-size: var(--t-xs);
  font-weight: var(--t-bold);
  color: var(--c-text-3);
  letter-spacing: var(--t-track-caps);
}
/* Same mix as a link, for the same reason: this is ink, not a fill. */
.podium-card[data-place="1"] .podium-place { color: color-mix(in srgb, var(--c-accent) 72%, var(--c-text)); }
.podium-name { font-weight: var(--t-semibold); font-size: var(--t-md); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-figure { display: flex; align-items: baseline; gap: var(--s-3); }
.podium-value {
  font-family: var(--t-display);
  font-size: var(--t-2xl);
  font-weight: var(--t-black);
  letter-spacing: var(--t-track-tight);
  font-variant-numeric: tabular-nums;
}
.podium-of { color: var(--c-text-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.podium-context { color: var(--c-text-2); font-size: var(--t-xs); line-height: var(--t-snug); }

.lb { min-width: 760px; }
.lb-rank { width: 54px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.lb-rank strong { color: var(--c-text); font-size: var(--t-md); }
.lb-pct { white-space: nowrap; }
.lb-pct-value { font-weight: var(--t-bold); font-size: var(--t-md); }
.lb-pct-of { color: var(--c-text-3); font-size: var(--t-xs); margin-left: var(--s-2); }
.lb-meter-cell { width: 120px; min-width: 120px; }

.lb-aside, .lb-none { margin-top: var(--s-9); }
.lb-aside-list, .lb-none-list { display: flex; flex-direction: column; }
.lb-aside-row, .lb-none-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: var(--bw) solid var(--c-border);
  border-bottom: 0;
  background: var(--c-surface);
  min-width: 0;
}
.lb-aside-row:first-child, .lb-none-row:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.lb-aside-row:last-child, .lb-none-row:last-child { border-bottom: var(--bw) solid var(--c-border); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.lb-aside-row:only-child, .lb-none-row:only-child { border-radius: var(--r-lg); }
/* No fill, no meter and no number. Whatever is drawn here must not be
   mistakable for a low score. */
.lb-none-row { background: var(--c-bg); border-style: dashed; }

/* ============================================================================
   PERSON PROFILE
   ========================================================================= */

.person-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-7);
  flex-wrap: wrap;
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-2);
}
.person-head-text { flex: 1 1 260px; min-width: 0; }
.person-head-chips { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); }
.person-head-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.person-panel { margin-top: var(--s-8); }
.person-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  margin-bottom: var(--s-9);
}
.person-side { display: grid; gap: var(--s-6); min-width: 0; }
@media (max-width: 900px) { .person-grid { grid-template-columns: minmax(0, 1fr); } }

.facts { display: grid; gap: var(--s-5); }
.facts-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-6) var(--s-8);
  padding: var(--s-7);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.fact { min-width: 0; }
.fact-label {
  color: var(--c-text-3);
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
}
.fact-value {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  line-height: var(--t-snug);
  overflow-wrap: anywhere;
}
/* A fact's value is often a link and is never inside a sentence, so it is a
   target somebody aims at rather than text they happen to click. 24px is the
   WCAG 2.5.8 floor for one. */
.fact-value a { display: inline-flex; align-items: center; min-height: 24px; }

/* A restricted panel is drawn, not omitted. A section that silently vanishes
   teaches people the feature does not exist; one that names the rule answers
   the question on the spot. */
.restricted { border-style: dashed; background: var(--c-bg); }
.restricted .card-body { text-align: center; padding: var(--s-11) var(--s-7); }
.restricted-mark { width: 26px; height: 26px; margin: 0 auto var(--s-5); color: var(--c-text-3); }
.restricted-title { font-size: var(--t-md); font-weight: var(--t-semibold); }
.restricted-body { margin: var(--s-4) auto 0; max-width: 56ch; color: var(--c-text-2); font-size: var(--t-sm); line-height: var(--t-body); }
.restricted-note { margin: var(--s-5) auto 0; max-width: 56ch; color: var(--c-text-3); font-size: var(--t-xs); line-height: var(--t-body); }

.flags { display: flex; flex-direction: column; gap: var(--s-5); }
.flag-row {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-6);
  border: var(--bw) solid var(--c-border);
  border-left: 3px solid var(--c-warn);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.flag-row[data-overdue="1"] { border-left-color: var(--c-danger); }
.flag-mark { flex: none; color: var(--c-warn); }
.flag-mark svg { width: 17px; height: 17px; }
.flag-row[data-overdue="1"] .flag-mark { color: var(--c-danger); }
.flag-body { min-width: 0; flex: 1 1 auto; }
.flag-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.flag-detail { margin-top: var(--s-3); color: var(--c-text-2); font-size: var(--t-sm); line-height: var(--t-snug); }
.flag-meta { margin-top: var(--s-4); color: var(--c-text-3); font-size: var(--t-xs); }
.flag-due { color: var(--c-danger); font-weight: var(--t-semibold); }

.docs { display: flex; flex-direction: column; gap: var(--s-4); }
.doc-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  min-width: 0;
}
.doc-icon { width: 18px; height: 18px; flex: none; color: var(--c-text-3); }
.doc-body { min-width: 0; flex: 1 1 auto; }
.doc-kind { font-weight: var(--t-semibold); font-size: var(--t-sm); text-transform: capitalize; }
.doc-meta { color: var(--c-text-3); font-size: var(--t-xs); margin-top: var(--s-1); }
.doc-code {
  flex: none;
  padding: var(--s-2) var(--s-4);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-code-bg);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
}

.dir { min-width: 640px; }
.dir-filters { gap: var(--s-4); }
.dir-filters input { min-width: 200px; width: auto; }
.dir-filters select { width: auto; min-width: 150px; max-width: 220px; }
.dir-score { display: inline-flex; flex-direction: column; align-items: flex-end; }
.dir-score-of { color: var(--c-text-3); font-size: var(--t-2xs); white-space: nowrap; }

/* ============================================================================
   TENURE
   ========================================================================= */

.tenure { display: flex; flex-direction: column; gap: var(--s-7); }
/* The end marks are centred on their date, so the one at 100 percent puts half
   its width past the right edge of the track. The margin is that half, which
   keeps the mark inside the card instead of hanging over the border. */
.tenure-track {
  position: relative;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
}
.tenure-base { position: absolute; top: 0; bottom: 0; border-radius: var(--r-full); background: var(--c-accent-quiet); border: var(--bw) solid color-mix(in srgb, var(--c-accent) 40%, transparent); }
.tenure-extra { position: absolute; top: 0; bottom: 0; background: var(--c-warn-quiet); border: var(--bw) solid color-mix(in srgb, var(--c-warn) 40%, transparent); }
.tenure-now { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--c-text); border-radius: var(--r-full); }
.tenure-mark {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translateY(-50%);
  border-radius: var(--r-full);
  background: var(--c-bg);
  border: 2px solid var(--c-border-strong);
}
.tenure-mark[data-tone="accent"] { border-color: var(--c-accent); }
.tenure-mark[data-tone="good"] { border-color: var(--c-success); }
.tenure-mark[data-tone="warn"] { border-color: var(--c-warn); }
.tenure-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--s-5);
}
.tenure-legend-item { display: flex; align-items: baseline; gap: var(--s-4); min-width: 0; flex-wrap: wrap; }
.tenure-swatch {
  flex: none;
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  border: 2px solid var(--c-border-strong);
  align-self: center;
}
.tenure-swatch[data-tone="accent"] { border-color: var(--c-accent); }
.tenure-swatch[data-tone="good"] { border-color: var(--c-success); }
.tenure-swatch[data-tone="warn"] { border-color: var(--c-warn); }
.tenure-legend-label { color: var(--c-text-2); font-size: var(--t-xs); }
.tenure-legend-date { font-size: var(--t-xs); font-weight: var(--t-semibold); font-variant-numeric: tabular-nums; }

.tenure-events { display: flex; flex-direction: column; border-top: var(--bw) solid var(--c-border); padding-top: var(--s-6); }
.tenure-event { display: flex; gap: var(--s-6); padding: var(--s-3) 0; font-size: var(--t-sm); min-width: 0; }
.tenure-event-date { flex: none; width: 108px; color: var(--c-text-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tenure-event-text { color: var(--c-text-2); min-width: 0; }

/* ============================================================================
   CHARTS
   ========================================================================= */

.chart { display: block; max-width: none; }
.chart-scroll .scroll-x { padding-bottom: var(--s-3); }
.chart-band-label { font-size: 9px; fill: var(--c-text-3); letter-spacing: var(--t-track-caps); text-transform: uppercase; }
.chart-tick { font-size: 10px; fill: var(--c-text-3); }
.chart-value { font-size: 11px; font-weight: 600; fill: var(--c-text); }
.chart-axis-note { font-size: 9px; fill: var(--c-text-3); letter-spacing: var(--t-track-caps); text-transform: uppercase; }
.spark { display: inline-block; vertical-align: middle; }
.spark-empty { display: inline-block; width: 80px; }

/* ============================================================================
   KANBAN BOARDS (tickets, recruit)
   ========================================================================= */

/* width: max-content, so the flex row is actually as wide as its columns. A
   flex container with an auto width inside a scroller takes the SCROLLER's
   width and lets its children hang out of it, which scrolls correctly and is
   still a container that does not contain its contents - every column reads as
   an escaped child to anything measuring the layout, including a person trying
   to work out why a drop shadow is clipped. */
.board { display: flex; gap: var(--s-6); align-items: flex-start; padding-bottom: var(--s-4); width: max-content; }
.board-scroll .scroll-x { overflow-y: visible; }
.board-col {
  flex: 0 0 290px;
  width: 290px;
  display: flex;
  flex-direction: column;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  min-width: 0;
}
.funnel-col { flex-basis: 246px; width: 246px; }
.board-col-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-bottom: var(--bw) solid var(--c-border);
}
.board-col-title {
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
  color: var(--c-text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-col-count {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  padding: 0 var(--s-3);
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  color: var(--c-text-2);
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.board-col-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
.board-col-empty {
  padding: var(--s-7) var(--s-5);
  border: var(--bw) dashed var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text-3);
  font-size: var(--t-xs);
  line-height: var(--t-snug);
  text-align: center;
}

.tcard, .ccard {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  min-width: 0;
}
.tcard[data-breached="1"] { border-color: color-mix(in srgb, var(--c-danger) 46%, var(--c-border)); }
.tcard-top, .ccard-top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.tcard-num { font-family: var(--t-mono); font-size: var(--t-2xs); color: var(--c-text-3); flex: none; }
.tcard-title, .ccard-name {
  font-size: var(--t-sm);
  font-weight: var(--t-semibold);
  line-height: var(--t-snug);
  min-width: 0;
  overflow-wrap: anywhere;
}
.tcard-people { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.tcard-person { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; font-size: var(--t-xs); color: var(--c-text-2); }
.tcard-unassigned { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--c-warn); font-size: var(--t-xs); font-weight: var(--t-medium); }
.tcard-unassigned svg { width: 13px; height: 13px; flex: none; }
.tcard-consent {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--t-xs);
  line-height: var(--t-snug);
}
.tcard-consent svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.tcard-consent strong { color: var(--c-text); }
.tcard-foot { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.tcard-state { color: var(--c-text-3); font-size: var(--t-2xs); text-transform: capitalize; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-sla { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; color: var(--c-text-2); font-size: var(--t-2xs); white-space: nowrap; }
.tcard-sla svg { width: 12px; height: 12px; }
.tcard-sla[data-breached="1"] { color: var(--c-danger); font-weight: var(--t-semibold); }

.ccard-next { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--c-text-2); font-size: var(--t-xs); line-height: var(--t-snug); min-width: 0; }
.ccard-next svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.ccard-foot { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ccard-stale { color: var(--c-warn); font-weight: var(--t-semibold); }
.ccard-owner { color: var(--c-text-3); font-size: var(--t-2xs); }

/* ============================================================================
   POLICY VIEWER
   ========================================================================= */

/* Five bands side by side need about 90px each to stay readable. Below that
   the strip stops being a strip and becomes a stack, which is the same
   information in the shape that fits. A horizontal scroller was the other
   option and was worse: a band scale is read as a whole or not at all. */
@media (max-width: 700px) {
  .bandstrip { flex-direction: column; }
  .bandstrip-seg {
    width: 100% !important;
    flex-direction: row;
    align-items: baseline;
    gap: var(--s-4);
    border-right: 0;
    border-bottom: var(--bw) solid var(--c-border);
  }
  .bandstrip-seg:last-child { border-bottom: 0; }
}
.bandstrip {
  display: flex;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 58px;
}
.bandstrip-seg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border-right: var(--bw) solid var(--c-border);
  background: var(--c-surface);
  min-width: 0;
  overflow: hidden;
}
.bandstrip-seg:last-child { border-right: 0; }
.bandstrip-seg[data-tone="good"] { background: var(--c-success-quiet); }
.bandstrip-seg[data-tone="warn"] { background: var(--c-warn-quiet); }
.bandstrip-seg[data-tone="bad"] { background: var(--c-danger-quiet); }
.bandstrip-label {
  font-size: var(--t-xs);
  font-weight: var(--t-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bandstrip-range { color: var(--c-text-3); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }

/* ============================================================================
   CAPABILITIES
   ========================================================================= */

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s-5);
}
.cap {
  padding: var(--s-6);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  min-width: 0;
}
.cap[data-held="1"] { background: var(--c-surface); border-color: var(--c-border-strong); }
.cap-top { display: flex; align-items: center; gap: var(--s-4); min-width: 0; flex-wrap: wrap; }
.cap-mark { flex: none; color: var(--c-text-3); display: inline-flex; }
.cap-mark svg { width: 15px; height: 15px; }
.cap[data-held="1"] .cap-mark { color: var(--c-success); }
.cap-label { font-weight: var(--t-semibold); font-size: var(--t-sm); min-width: 0; }
.cap-code {
  flex: none;
  color: var(--c-text-3);
  font-size: var(--t-2xs);
  overflow-wrap: anywhere;
}
.cap-desc { margin-top: var(--s-4); color: var(--c-text-2); font-size: var(--t-xs); line-height: var(--t-body); }

/* The component table cannot shrink below its content: one of its columns is a
   capability code, which is a single unbreakable token. It scrolls on its own
   rather than pushing the page sideways. */
.policy-components { min-width: 600px; }

/* The leaderboard's explanation of its own ranking rule. It sits above the
   scroller rather than inside it as a <caption>, because at 400px a caption
   inside the table's scroll box ran off the right edge and a rule nobody can
   read is a rule people assume is unfair. */
.lb-note {
  margin-bottom: var(--s-5);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--t-body);
  max-width: 78ch;
}

/* Below 560px the podium stops being three columns of trophy and becomes three
   rows of fact: avatar on the left, figure on the right, the same information
   in a third of the height. Three stacked 370px cards meant the table under
   them started a full screen and a half down. */
@media (max-width: 560px) {
  .podium { gap: var(--s-4); }
  .podium-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    padding: var(--s-5) var(--s-6);
    text-align: left;
  }
  .podium-card .avatar { grid-row: 1 / 3; grid-column: 2; width: 34px; height: 34px; font-size: var(--t-sm); }
  .podium-place { grid-row: 1 / 3; grid-column: 1; }
  .podium-name { grid-column: 3; }
  .podium-figure { grid-column: 4; grid-row: 1; }
  .podium-context { grid-column: 3 / 5; grid-row: 2; }
  .podium-card > .chip { grid-column: 3 / 5; justify-self: start; margin-top: var(--s-2); }
  .podium-value { font-size: var(--t-xl); }
}

/* A tree that runs the full width of a 1600px column puts the member counts a
   foot away from the name they belong to. The tree itself is a narrow object;
   capping it keeps the row readable as one line rather than as two things at
   opposite ends of a desk. */
.tree-canvas { max-width: 880px; }