@bongos/core 1.19.457 → 1.19.458

package/modules/hall-ui/public/oversight.css

@@ -0,0 +1,296 @@
+/* oversight.css — the oversight family's archetype (task 1003469, goal
+   1000081): what a oversight ROW is in the chrome world, and the pieces the
+   four pages (government, watch, harbor, gate) share around it — the figure
+   band inside a panel, the group head, the inline form, the grant toggle, the
+   confirm modal. The third family sheet after record.css and room.css: a page
+   sheet holds only what one page has and the others do not.
+
+   Every panel is the shell's .scroll; every heading its .scroll__h; every state
+   pill its .fact-pill; every table its .ledger. This sheet adds nothing the
+   shell already says, and spends no colour the fifteen do not resolve. */
+
+/* ---- the figure band, inside a panel ---------------------------------------
+   The record family's band (.rec-figs), restated for this family: hairline
+   columns, the figure in the display face at 300, the label above it. A glass
+   .stat-row is the TOP-of-page strip (Watch's attention row, Harbor and Gate's
+   summaries); this is the figure row a panel carries under its own heading. */
+.ov-figs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  gap: 0;
+  margin: 0 0 var(--sp-sm);
+  padding: 0 0 var(--sp-sm);
+  border-bottom: var(--line) solid var(--rule-soft);
+}
+.ov-fig { padding: 4px 18px 0; border-left: var(--line) solid var(--rule-soft); min-width: 0; }
+.ov-fig:first-child { border-left: 0; padding-left: 0; }
+.ov-fig__l {
+  display: block;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ov-fig__v {
+  display: block;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(22px, 2.2vw, 30px);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.ov-fig__s { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
+@media (max-width: 480px) {
+  .ov-figs { grid-template-columns: 1fr 1fr; row-gap: 16px; }
+  .ov-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
+}
+
+/* ---- the group head ---------------------------------------------------------
+   A named run of rows inside a panel (the mock's .group__head): the name in the
+   label voice, the count in mono, one full rule under. The first row after a
+   head drops its own hairline, since the head already drew one. */
+.ov-group { margin: var(--sp-md) 0 0; }
+.ov-group:first-child, .scroll__lede + .ov-group, .ov-figs + .ov-group { margin-top: 0; }
+.ov-group__head {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 0 0 10px;
+  border-bottom: var(--line) solid var(--rule);
+}
+.ov-group__name {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink);
+}
+.ov-group__n { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
+.ov-group__note { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); text-align: right; }
+
+/* ---- the oversight row -----------------------------------------------------
+   The goals row (.gr-row) at this family's density: one hairline on top, the
+   title at 15px/500, an optional one-line sub, a facts line of pills, chips and
+   plain facts, and the actions on the right. The rule sits on top so the first
+   row starts flush against the panel, or against the group head that already
+   drew its rule. Two columns; under 640px the right column drops beneath. */
+.ov-rows { margin: 0; padding: 0; list-style: none; }
+.ov-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px 24px;
+  align-items: start;
+  padding: 14px 0;
+  border-top: var(--line) solid var(--rule-soft);
+}
+.ov-rows > .ov-row:first-child, .ov-group__head + .ov-rows > .ov-row:first-child, .ov-group__head + .ov-row { border-top: 0; }
+.ov-row--lead { grid-template-columns: auto minmax(0, 1fr) auto; }
+/* A dense row: a permission, a voter, a machine principal — sixty of them in
+   one panel is the ordinary case, so the air tightens. */
+.ov-row--dense { padding: 10px 0; }
+/* The parts are divs in a list row and spans in a button row (a button holds
+   phrasing content only), so each part states its own display. */
+.ov-row__main { display: block; min-width: 0; }
+.ov-row__title {
+  display: inline-block;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 1.35;
+  color: var(--ink);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+/* A title that is a link is a control and owes the 24px floor on both axes:
+   the padding buys the box, the equal negative margin hands the space back. */
+a.ov-row__title { min-height: 24px; min-width: 24px; padding: 2px 4px; margin: -2px -4px; }
+a.ov-row__title:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
+.ov-row__title .ov-mono { margin-left: 8px; }
+.ov-row__sub { display: block; margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); overflow-wrap: anywhere; }
+.ov-row__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; }
+.ov-row__sub + .ov-row__facts { margin-top: 8px; }
+.ov-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
+.ov-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+.ov-row__when { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
+@media (max-width: 640px) {
+  .ov-row { grid-template-columns: minmax(0, 1fr); }
+  .ov-row--lead { grid-template-columns: auto minmax(0, 1fr); }
+  .ov-row--lead > .ov-row__right { grid-column: 2; }
+  .ov-row__right { align-items: flex-start; text-align: left; }
+  .ov-row__actions { justify-content: flex-start; }
+}
+
+/* A row that is itself the control — the rank list, where picking a row is the
+   page's one selection. The world marks a current thing with its tint (the
+   ranks ladder's --current card), never with a coloured bar. */
+button.ov-row {
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border-left: 0; border-right: 0; border-bottom: 0;
+  border-radius: 0;
+  cursor: pointer;
+}
+button.ov-row:hover { background: var(--glass); }
+button.ov-row[aria-pressed="true"] { background: var(--accent-tint); border-top-color: transparent; border-radius: var(--radius-sm); }
+button.ov-row[aria-pressed="true"] + button.ov-row { border-top-color: transparent; }
+button.ov-row[aria-pressed="true"] .ov-row__title { color: var(--accent-ink); }
+.ov-rows--select button.ov-row { padding-left: 12px; padding-right: 12px; margin: 0 -12px; width: calc(100% + 24px); }
+
+/* ---- the top-of-page summary strip ----------------------------------------------
+   The shell's glass .stat-row, given the air a panel would have under it. */
+.ov-summary { margin: 0 0 var(--sp-md); }
+
+/* ---- plain facts and the machine's words ------------------------------------ */
+.ov-fact { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.ov-fact b { color: var(--ink-soft); font-weight: 500; }
+/* A link inside a fact line is a control at a 12.5px line box: the padding buys
+   the 24px floor on both axes and the equal negative margin hands it back. */
+.ov-fact a { display: inline-block; color: var(--accent-ink); min-height: 24px; min-width: 24px; padding: 3px 4px; margin: -3px -4px; line-height: 18px; }
+.ov-mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.ov-key { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
+.ov-key--faint { color: var(--ink-faint); }
+.ov-danger { color: var(--danger); }
+.ov-ok { color: var(--ok); }
+
+/* Detail lines under a row: a reason per line (the gate's holds), or a key and
+   a value (the harbor's make and cost). Hairlines between, none on the first. */
+.ov-lines { list-style: none; margin: 10px 0 0; padding: 0; max-width: 72ch; }
+.ov-lines li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: var(--line) solid var(--rule-soft); font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
+.ov-lines li:first-child { border-top: 0; padding-top: 0; }
+.ov-lines .ov-key { flex: none; max-width: 46%; }
+.ov-lines .ov-lines__v { margin-left: auto; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
+/* On a phone the key takes the line and the value or reason drops under it:
+   three narrow columns at 390px read as a table nobody laid out. */
+@media (max-width: 640px) {
+  .ov-lines li { flex-wrap: wrap; gap: 2px 10px; }
+  .ov-lines .ov-key { max-width: 100%; }
+}
+
+/* Prose inside a row or a panel — the idea a board votes on, set as prose and
+   never as config rows. Each part is a label over a paragraph. */
+.ov-prose { margin: 14px 0 0; max-width: var(--measure); }
+.ov-prose__l {
+  margin: 14px 0 4px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.ov-prose__l:first-child { margin-top: 0; }
+.ov-prose__p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* ---- the inline form ---------------------------------------------------------
+   Label over field, fields in one wrapping row, the button on the baseline. The
+   controls themselves are the shell's (hairline pill inputs); this only lays
+   them out. A form that explains itself does so in one line under the row. */
+.ov-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 var(--sp-sm); }
+.ov-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 0; }
+.ov-field--sm { flex: 0 1 140px; }
+.ov-field--wide { flex: 1 1 100%; }
+.ov-field__l {
+  font-family: var(--label-face);
+  font-size: 10.5px;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+/* The shell styles text and search inputs; a number input (the builder id) would
+   otherwise render at the browser's 21px and fail the 24px floor, so the field
+   restates the shell's hairline pill for every control it holds. */
+.ov-field input, .ov-field select, .ov-field textarea {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 30px;
+  padding: 5px 12px;
+  font-family: var(--font-body);
+  font-size: 14px;
+  color: var(--ink);
+  background: none;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
+}
+.ov-field textarea { border-radius: var(--radius-sm); }
+.ov-field input:hover, .ov-field select:hover, .ov-field textarea:hover { border-color: var(--ink-faint); }
+.ov-field input::placeholder, .ov-field textarea::placeholder { color: var(--ink-faint); }
+/* The one line under the row. A max-width here would cap the flex basis and let
+   the line ride beside the button, so the line takes the full row instead. */
+.ov-form__why { flex: 1 1 100%; min-width: 100%; margin: 0; font-size: 12.5px; color: var(--ink-faint); }
+
+/* ---- the grant toggle ---------------------------------------------------------
+   Held is a hairline pill in ink; not held is the same pill in the faint ink.
+   The accent arrives only on hover, because forty granted permissions painted
+   salmon were the loudest thing on the page and none of them was live. */
+.ov-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  min-width: 64px;
+  padding: 0 12px;
+  font: inherit;
+  font-size: 12.5px;
+  color: var(--ink-faint);
+  background: none;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ov-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-soft); }
+.ov-toggle:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--accent); }
+.ov-toggle:disabled { opacity: 0.55; cursor: default; }
+
+/* A ghost pill whose action is destructive: the danger ink on the same hairline
+   shape, so Close, Dismiss, Deny and Offboard read as the same kind of control
+   as their neighbours and still warn. */
+.btn-ghost--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); }
+.btn-ghost--danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
+
+/* ---- the foot line ----------------------------------------------------------- */
+.ov-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-faint); max-width: var(--measure); }
+/* A link in the foot line is a control at a 12.5px line box: the padding buys
+   the 24px floor and the equal negative margin hands the space back. */
+.ov-foot a { display: inline-block; color: var(--accent-ink); min-height: 24px; min-width: 24px; padding: 3px 4px; margin: -3px -4px; line-height: 18px; }
+
+/* ---- the confirm modal ----------------------------------------------------------
+   Harbor and Gate share one confirm dialog. A --bg-card panel closed by one rule
+   hairline and no shadow (the hub's project card is the reference), on the
+   shell's --z-modal layer, over a scrim mixed from the ink. */
+.ov-modal-bg {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: color-mix(in srgb, var(--ink) 40%, transparent);
+}
+.ov-modal {
+  width: 100%;
+  max-width: 480px;
+  padding: 22px 24px 24px;
+  background: var(--bg-card);
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius);
+}
+.ov-modal .scroll__h { margin-bottom: 10px; }
+.ov-modal p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
+.ov-modal p strong, .ov-modal p b { color: var(--ink); font-weight: 500; }
+.ov-modal p:last-of-type { margin-bottom: 0; }
+.ov-modal label:not(.ov-modal__check) { display: block; margin: 14px 0 6px; font-family: var(--label-face); font-size: 10.5px; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.ov-modal input[type="text"], .ov-modal textarea { width: 100%; box-sizing: border-box; }
+.ov-modal__check { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--ink); }
+.ov-modal__check input { margin-top: 3px; width: 16px; height: 16px; }
+.ov-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

package/modules/hall-ui/public/watch.css

@@ -1,189 +1,75 @@
-/* watch.css — page-local styles for Watch (task 2173; extracted from
-   watch.html's old inline <style> per the hall placement rules). Built on the
-   shared design system's derived tokens; class names are load-bearing
-   (watch.js writes them). The attention row is the shared .stat-row/.stat-tile;
-   tabs/pager/empty states come from style.css's hall-kit section. */
+/* watch.css — page-local styles for Watch (task 1003469 rebuild; first
+   extracted from the page's inline <style> by task 2173). Every list on the page
+   is the kit's .ledger, every figure row the oversight family's .ov-figs, every
+   sub-section an .ov-group head (oversight.css). What stays here is what only
+   Watch has: the severity vocabulary, the engagement-report reader, and the
+   grade trend. Class names are load-bearing (watch.js writes them). */
 
-/* task 2173 — the attention row sits above the tabs; a touch tighter than the
-   Home tiles (this is a dashboard header, not a landing zone). */
-.watch-attention { margin: 0 0 14px; }
-.watch-attention .stat-tile { min-height: 76px; padding: 12px 16px; }
-.watch-attention .stat-tile__num { font-size: 23px; }
+/* Severity / status pills. Base: the shell's .fact-pill (task 1003307). A
+   severity is a state, so it is a hairline in its own colour rather than a
+   filled chip — four filled severities in one row was the loudest thing here. */
+.badge--sev-critical { color: var(--danger); }
+.badge--sev-high { color: var(--warn); }
+.badge--sev-medium { color: var(--info); }
+.badge--sev-low { color: var(--ink-faint); }
+.badge--status { color: var(--ink-faint); }
 
-/* task 2173 density pass — panels stack inside tab panes. */
-[id^="pane-"] .scroll { padding: 16px 18px; margin: 0 0 14px; }
+/* Numeric cells in a kit ledger read right-aligned and tabular; a cell that
+   warns takes the danger ink. */
+.ledger th.num, .ledger td.num { text-align: right; font-variant-numeric: tabular-nums; }
+.ledger td.num.warn { color: var(--danger); font-weight: 500; }
+/* Row actions inside a ledger cell: ghost pills in a row. */
+.watch-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
 
-.watch-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 12px;
-  margin-top: 6px;
-}
-.watch-stat {
-  background: var(--bg-card);
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-  padding: 12px 14px;
-  text-align: center;
-}
-.watch-stat__num {
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 650;
-  color: var(--ink);
-  line-height: 1.2;
-  font-variant-numeric: tabular-nums;
-}
-.watch-stat__label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--ink-faint);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-top: 4px;
-}
+/* A sealed or failed section says so in place. Three states, three sentences:
+   "nothing here" is the kit's empty state, this is "you may not see this" and
+   "could not load". */
+.watch-unavailable { margin: 0; padding: 8px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); }
 
-.watch-table-wrap { overflow-x: auto; margin-top: 6px; }
-table.watch {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
+/* The engagement-report reader: exploit text, escaped into a pre and scrolled
+   in its own frame, never injected as HTML (threat-model §6.3). */
+.watch-doc__h {
+  margin: var(--sp-sm) 0 6px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink);
 }
-table.watch th, table.watch td {
-  padding: 6px 10px;
-  text-align: left;
-  border-bottom: var(--line) solid var(--rule-soft);
-  vertical-align: top;
-}
-table.watch th {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--ink-faint);
-  border-bottom: var(--line) solid var(--rule);
-  white-space: nowrap;
-}
-table.watch td.num { text-align: right; font-variant-numeric: tabular-nums; }
-table.watch td.warn { color: var(--danger); font-weight: 600; }
-table.watch tr:hover td { background: var(--glass); }
-/* the kit ledger (audit log) shares the same numeric-cell affordances */
-.ledger td.num { text-align: right; font-variant-numeric: tabular-nums; }
-.ledger td.num.warn { color: var(--danger); font-weight: 600; }
-.watch-mono { font-family: var(--font-mono); font-size: 0.84rem; color: var(--info); }
-.watch-empty { color: var(--ink-faint); font-size: 13px; padding: 10px 0; }
-/* .watch-subh is .watch-sub-h without the second hyphen, and watch.js emits
-   both (:400/832/857 vs :638/640). The base rule below already groups them, so
-   the two spellings LOOK the same — the only real divergence was :first-of-type
-   below, which matched one spelling and not the other, so a section whose first
-   sub-heading happened to be spelled the other way carried 16px of top margin
-   instead of 8. Grouped there too (task 1003307). */
-.watch-note { color: var(--ink-faint); font-size: 12.5px; margin-top: 10px; }
-.watch-rank { font-size: 12px; color: var(--ink-faint); }
 .watch-doc {
+  margin: 0;
+  padding: 12px 14px;
+  max-height: 60vh;
+  overflow-y: auto;
   white-space: pre-wrap;
   word-break: break-word;
   font-family: var(--font-mono);
-  font-size: 0.8rem;
-  line-height: 1.5;
-  max-height: 60vh;
-  overflow-y: auto;
-  padding: 12px;
-  margin-top: 8px;
-  background: var(--glass);
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-}
-.watch-sub-h, .watch-subh {
-  font-family: var(--font-display);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ink);
-  margin: 16px 0 4px;
-}
-.watch-sub-h:first-of-type, .watch-subh:first-of-type { margin-top: 8px; }
-
-/* Severity / status badges. */
-/* Base: the shell's .fact-pill (task 1003307). A severity is a state, so it is a
-   hairline in its own colour rather than a filled chip — four filled severities
-   stacked in one table row was the loudest thing on the Watch board. */
-.badge--sev-critical { color: var(--danger); }
-.badge--sev-high { color: var(--warn); }
-.badge--sev-medium { color: var(--info); }
-.badge--sev-low { color: var(--ink-faint); }
-.badge--status { color: var(--ink-faint); }
-
-/* Row action buttons + selects. */
-.watch-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
-.watch-btn {
-  font-family: var(--font-body);
   font-size: 12.5px;
-  font-weight: 500;
-  padding: 4px 12px;
-  border: var(--line) solid var(--rule);
-  background: var(--bg-card);
-  color: var(--ink-soft);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-}
-.watch-btn:hover:not(:disabled) { background: var(--glass); color: var(--ink); }
-.watch-btn:disabled { opacity: 0.45; cursor: default; }
-.watch-btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--rule)); }
-.watch-select {
-  font-family: var(--font-body);
-  font-size: 13px;
-  padding: 4px 6px;
-  border: var(--line) solid var(--rule);
-  background: var(--bg-card);
+  line-height: 1.5;
   color: var(--ink);
+  background: var(--glass);
   border-radius: var(--radius-sm);
 }
 
-.watch-req {
-  border-bottom: var(--line) solid var(--rule-soft);
-  padding: 10px 0;
-  display: flex; gap: 14px; flex-wrap: wrap;
-  align-items: flex-start; justify-content: space-between;
-}
-.watch-req__who { font-weight: 600; color: var(--ink); }
-.watch-req__meta { color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
-.watch-req__note { color: var(--ink); font-size: 13.5px; margin-top: 6px; max-width: 56ch; }
-
-.watch-unavailable { color: var(--ink-faint); font-size: 13px; padding: 8px 0; }
-
-.watch-trend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
+/* The 14-day grade trend: a day, a bar, then the count and score. The bar is a
+   measurement, not a control, so it is ink on a hairline track and never the
+   accent. */
+.watch-trend { display: flex; flex-direction: column; margin-top: 4px; }
 .watch-trend__row {
-  display: grid; grid-template-columns: 84px 1fr 64px;
-  gap: 10px; align-items: center;
-  font-size: 13px; color: var(--ink);
-}
-.watch-trend__bar-track {
-  background: var(--glass); border-radius: 3px; height: 12px; overflow: hidden;
-  border: var(--line) solid var(--rule-soft);
-}
-.watch-trend__bar-fill { background: var(--accent); height: 100%; display: block; }
-.watch-trend__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
-
-.watch-list { list-style: none; padding: 0; margin: 8px 0 0; }
-.watch-list li {
-  display: flex; justify-content: space-between; gap: 12px;
-  padding: 5px 0; border-bottom: var(--line) solid var(--rule-soft);
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) 96px;
+  gap: 12px;
+  align-items: center;
+  min-height: 28px;
   font-size: 13px;
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
 }
-.watch-list li .k { color: var(--ink); }
-.watch-list li .v { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
-
-.watch-foot-link {
-  display: inline-block; margin-top: 12px;
-  font-size: 13px; font-weight: 500;
-  color: var(--accent-ink);
-}
+.watch-trend__bar-track { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--rule-soft); }
+.watch-trend__bar-fill { display: block; height: 100%; background: var(--ink-soft); }
+.watch-trend__val { text-align: right; color: var(--ink); }
 
-/* Invite by GitHub username (task 1003044) — the Access requests section's own
-   form: the way in on an invite-only project, a shortcut on an apply one. */
-.watch-invite { margin: 0 0 14px; padding: 12px 14px; border: var(--line) solid var(--rule-soft); border-radius: 10px; }
-.watch-invite__label { display: block; font-weight: 600; margin-bottom: 6px; }
-.watch-invite__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-.watch-invite__row input[type="text"] { flex: 1 1 200px; min-width: 0; }
-.watch-invite__why { margin: 8px 0 0; font-size: 13px; opacity: .8; }
+/* A link inside a ledger cell (a session's tasks) is a control at a 13.5px line
+   box: the padding buys the 24px floor and the negative margin hands it back. */
+.ledger td a:not(.lb-name) { display: inline-block; min-height: 24px; padding: 3px 0; margin: -3px 0; line-height: 18px; }