/* THE SHEET'S DATA AND BOARD PIECES (PRD-232 S6, D6, D9, D10, D11):
   Ui::CountCardComponent, Ui::ChangeStatComponent, Ui::CompareRowComponent,
   Ui::LaneHeadComponent, Ui::TaskLinkComponent, Ui::TrackerCardComponent,
   Ui::StackedBarChartComponent and Ui::HeadlineStatsComponent (PRD-262 D9),
   drawn from the Figma component sheet (file hP9WwD5Tpup3oa4fGn2EcI, frame
   114:10). Colours, radii, type sizes and control heights are variables
   (tokens-v3.css, tokens-v2.css); the raw px are the sheet's own geometry.

   D9: a change is red when worse, green when better and grey when there is
   none, and its sign and words say the same thing. A Task link's kind has an
   icon as well as a colour.

   D11: every link here draws the 2px focus ring with a 2px gap of the ground
   colour, except the rows, which draw it inset (as the Table row does). Each
   focus rule also sets the corner radius, because os.css's
   `a:focus-visible` would otherwise round every focused link to 4px.

   THE PHONE is below 720px, the app's one phone width (the views skill). */

/* ---- Count card (node 114:172) ---- */
.ui-count-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
/* issue 8244 (Ross signed 2026-10-21, sheet 1083:61800, layout A; frames 720
   1083:74630, 820 1083:74772, 1099 1083:74914, 1100 1083:75056): from 720px
   to 1099px a row holds two cards, so a label keeps its one line beside the
   240px rail. Three from 1100px; one on a phone (below). */
@media (min-width:720px) and (max-width:1099.98px){.ui-count-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ui-count-card{display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box;min-width:0;height:184px;padding:24px 24px 20px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);text-decoration:none}
a.ui-count-card:hover,button.ui-count-card:hover{background:var(--color-surface);text-decoration:none}
.ui-count-card-form{display:contents}
button.ui-count-card{width:100%;margin:0;font:inherit;text-align:left;cursor:pointer}
.ui-count-card-needs-you,.ui-count-card-needs-you:hover{border-color:var(--color-primary);background:var(--color-primary-bg)}
.ui-count-card-number{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);font-size:var(--font-size-3xl);font-weight:var(--fw-semibold);line-height:36px;letter-spacing:-0.3px;color:var(--color-text)}
.ui-count-card-number .ui-tag{flex:none;letter-spacing:0;background:var(--color-bg)}
.ui-count-card-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--font-size-base);font-weight:var(--fw-medium);line-height:24px;color:var(--color-text)}
/* The detail takes up to two lines, then an ellipsis (issue 8244); the 184px card holds them. */
.ui-count-card-detail{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);line-height:18px;color:var(--color-muted)}
.ui-count-card-link{margin-top:auto;font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px;color:var(--status-primary-fg);white-space:nowrap}
.ui-count-card:hover .ui-count-card-link{text-decoration:underline}
.ui-count-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus);border-radius:var(--radius-ui)}

/* ---- Headline stats (PRD-262 D9; node 618:30517) ----
   The meta line, then the figures in equal columns, a hairline left of every
   figure but the first. The lead figure is size/headline, the rest
   size/page-title; `--bad` turns the lead number status red. Line heights are
   the font's own ("normal"), which is what the sheet's Auto draws. */
.ui-headline-stats{display:flex;flex-direction:column;gap:20px;box-sizing:border-box;padding:24px 28px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg)}
.ui-headline-stats-meta{margin:0;font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);line-height:normal;color:var(--color-muted)}
.ui-headline-stats-row{display:flex;align-items:flex-start}
.ui-headline-stat{display:flex;flex:1 1 0;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:0;text-decoration:none}
.ui-headline-stat + .ui-headline-stat{padding-left:var(--space-5);border-left:1px solid var(--color-border)}
a.ui-headline-stat:hover{text-decoration:none}
.ui-headline-stat-number{font-size:var(--font-size-page-title);font-weight:var(--fw-semibold);line-height:normal;color:var(--color-text);white-space:nowrap}
.ui-headline-stat--lead .ui-headline-stat-number{font-size:var(--font-size-headline)}
.ui-headline-stat--bad .ui-headline-stat-number{color:var(--status-danger-fg)}
.ui-headline-stat-label{max-width:100%;overflow:hidden;font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:normal;color:var(--color-text);white-space:nowrap;text-overflow:ellipsis}
.ui-headline-stat-link{font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:normal;color:var(--status-primary-fg);white-space:nowrap}
a.ui-headline-stat:hover .ui-headline-stat-link{text-decoration:underline}
.ui-headline-stat:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus);border-radius:var(--radius-ui)}

/* ---- Change stat (node 136:1540) ---- */
.ui-change-stat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);box-sizing:border-box;min-width:0;padding:16px 20px;white-space:nowrap}
.ui-change-stat-label{font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);line-height:18px;color:var(--color-muted)}
.ui-change-stat-value{font-size:var(--font-size-stat);font-weight:var(--fw-semibold);line-height:34px;color:var(--color-text)}
.ui-change-stat-change{font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:18px}
.ui-change-worse{color:var(--status-danger-fg)}
.ui-change-better{color:var(--status-success-fg)}
.ui-change-none{color:var(--color-muted)}

/* ---- Compare row (node 136:1583) ---- */
.ui-compare-row{display:flex;align-items:center;gap:var(--space-4);box-sizing:border-box;width:100%;height:48px;padding:0 20px;border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg);font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-body);text-decoration:none}
a.ui-compare-row:hover{background:var(--color-surface);color:var(--color-body);text-decoration:none}
a.ui-compare-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus);border-radius:0}
.ui-compare-head{height:36px;background:var(--color-surface);font-size:var(--font-size-xs);font-weight:var(--fw-medium);color:var(--color-muted)}
.ui-compare-total{border-top:1px solid var(--color-border-subtle);border-bottom:0;background:var(--color-surface);font-weight:var(--fw-medium)}
.ui-compare-name{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text)}
.ui-compare-cell{flex:none;overflow:hidden;white-space:nowrap;text-align:right}
.ui-compare-before{width:120px;color:var(--color-muted)}
.ui-compare-after{width:120px;color:var(--color-text)}
.ui-compare-change{width:96px}
.ui-compare-fixed,.ui-compare-new-count{width:88px}
.ui-compare-head .ui-compare-name,.ui-compare-head .ui-compare-cell{color:var(--color-muted)}

/* ---- Lane head (node 130:1080) ---- */
.ui-lane-head{display:flex;align-items:center;gap:var(--space-2);height:32px;margin:0;font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px;color:var(--color-text)}
.ui-lane-head-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ui-lane-head-count{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius);background:var(--color-surface-grey);font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px;color:var(--color-muted)}

/* ---- Task link (node 132:1272) ----
   Filled: a tinted box in the kind's colour. Empty: a dashed outline in the
   same colour, no fill, the create words in Regular. */
.ui-task-link{position:relative;display:flex;align-items:center;gap:var(--space-2);box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 10px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-surface);color:var(--status-primary-fg);font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px;text-decoration:none}
.ui-task-link-dev-ticket{border-color:var(--color-info-bg);background:var(--color-info-bg);color:var(--status-info-fg)}
.ui-task-link-client-action{border-color:var(--color-surface-grey);background:var(--color-surface-grey);color:var(--color-body)}
.ui-task-link.ui-task-link-empty{border-style:dashed;border-color:currentColor;background:transparent}
.ui-task-link:hover{color:var(--status-primary-fg);text-decoration:none}
.ui-task-link-dev-ticket:hover{color:var(--status-info-fg)}
.ui-task-link-client-action:hover{color:var(--color-body)}
.ui-task-link:hover .ui-task-link-text{text-decoration:underline}
.ui-task-link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus);border-radius:var(--radius-ui)}
.ui-task-link .ic{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.67;stroke-linecap:round;stroke-linejoin:round}
.ui-task-link-text{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ui-task-link-empty .ui-task-link-text{font-weight:var(--fw-regular)}
.ui-task-link-mark{flex:none}

/* ---- Tracker card (node 130:1079) ----
   The whole card is a link that holds three other links. The title link's
   ::after is stretched over the card, so a click anywhere opens the item;
   the Task links sit above that layer (z-index 1) and open their own pages.
   The card's focus ring is drawn on the stretched layer, round the card. */
.ui-tracker-card{position:relative;display:flex;flex-direction:column;gap:var(--space-2);box-sizing:border-box;width:100%;min-width:0;padding:14px var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);box-shadow:0 1px 2px var(--overlay-card-shadow)}
.ui-tracker-card-what{margin:0;font-size:var(--font-size-card);font-weight:var(--fw-regular);line-height:22px;color:var(--color-text)}
.ui-tracker-card-link{color:inherit;text-decoration:none}
.ui-tracker-card-link:hover{color:inherit;text-decoration:underline}
.ui-tracker-card-link::after{content:"";position:absolute;inset:-1px;border-radius:var(--radius-ui)}
.ui-tracker-card-link:focus-visible{outline:none;box-shadow:none}
.ui-tracker-card-link:focus-visible::after{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ui-tracker-card-count{font-weight:var(--fw-semibold)}
.ui-tracker-card-sub{margin:0;font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:18px;color:var(--color-text)}
.ui-tracker-card-dates{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--font-size-xs);font-weight:var(--fw-regular);line-height:16px;color:var(--color-muted)}
.ui-tracker-card-note{margin:0;font-size:var(--font-size-xs);font-weight:var(--fw-regular);line-height:16px;color:var(--color-muted)}
/* PRD-257 D6 (sheet 540:26443): a blocked linked task. One red Tag per blocked task in a wrapping row under the dates, and a 3px danger bar inside the left edge; the grey border stays. */
.ui-tracker-card-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0}
.ui-tracker-card-tags .ui-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ui-tracker-card-blocked{box-shadow:inset 3px 0 0 var(--color-danger),0 1px 2px var(--overlay-card-shadow)}
/* The menu (PRD-233 D13): the `···` sits in the top-right corner above the stretched link; its panel opens in the card's flow. Muted (the sheet's too): faint is 2.5:1 on white and a control needs 3:1. */
.ui-tracker-card-has-menu .ui-tracker-card-what{padding-right:24px}
.ui-tracker-card-menu>summary{position:absolute;z-index:1;top:12px;right:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-ui);list-style:none;cursor:pointer;font-size:var(--font-size-card);line-height:1;color:var(--color-muted)}
.ui-tracker-card-menu>summary::-webkit-details-marker{display:none}
.ui-tracker-card-menu>summary:hover,.ui-tracker-card-menu[open]>summary{background:var(--color-surface);color:var(--color-text)}
.ui-tracker-card-menu>summary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-focus)}
.ui-tracker-card-menu-panel{position:relative;z-index:1;margin-top:4px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);cursor:auto}
.ui-tracker-card-slots{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ui-tracker-card-slots .ui-task-link{z-index:1}

/* ---- Stacked bar chart (Progress screen, node 140:2070) ----
   The `dataviz` skill's marks: colour only from --chart-1..5 (never on text),
   a 2px surface gap between segments, a 4px rounded top, hairline recessive
   gridlines with the baseline one step darker, a legend of words, and a
   tooltip on every bar and event marker, on hover and on keyboard focus. */
.ui-chart-fill-1{fill:var(--chart-1);background:var(--chart-1)}
.ui-chart-fill-2{fill:var(--chart-2);background:var(--chart-2)}
.ui-chart-fill-3{fill:var(--chart-3);background:var(--chart-3)}
.ui-chart-fill-4{fill:var(--chart-4);background:var(--chart-4)}
.ui-chart-fill-5{fill:var(--chart-5);background:var(--chart-5)}
/* PRD-242 (the chart contract): the grey fill for a remainder band
   ("Other"), and a value printed inside a segment (`inside:`). */
.ui-chart-fill-muted{fill:var(--color-control-border);background:var(--color-control-border);opacity:.6}
.ui-stacked-chart svg text.ui-stacked-chart-inside{font-size:var(--font-size-xs);font-weight:var(--fw-medium);fill:var(--color-bg)}
.ui-stacked-chart{margin:0;padding-bottom:var(--space-4)}
.ui-stacked-chart-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:16px 20px 0;list-style:none}
.ui-stacked-chart-legend li{display:flex;align-items:center;gap:6px;font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);line-height:18px;color:var(--color-body)}
.ui-stacked-chart-swatch{flex:none;width:10px;height:10px;border-radius:2px}
.ui-stacked-chart-body{display:grid;grid-template-columns:64px minmax(0,1fr);padding-right:var(--space-5)}
.ui-stacked-chart svg{display:block;overflow:visible}
.ui-stacked-chart svg text{font-family:var(--font-sans);font-size:var(--font-size-xs);fill:var(--color-muted)}
.ui-stacked-chart-grid,.ui-stacked-chart-base{stroke-width:1;shape-rendering:crispEdges}
.ui-stacked-chart-grid{stroke:var(--color-border-subtle)}
.ui-stacked-chart-base{stroke:var(--color-border)}
.ui-stacked-chart-plot{position:relative;min-width:0}
.ui-stacked-chart-cols{position:absolute;left:0;right:0;top:16px;height:300px;display:flex}
.ui-stacked-chart-cols>.ui-tooltip-anchor{flex:1 1 0;justify-content:center;min-width:0}
.ui-stacked-chart-hit{width:41.667%;height:100%;border-radius:var(--radius-xs)}
.ui-stacked-chart-hit:hover{box-shadow:0 0 0 1px var(--color-control-border)}
/* Written under .ui-stacked-chart so it outranks page-shell.css's
   `[tabindex]:focus-visible` ring, which loads later and would square the
   round marker. */
.ui-stacked-chart .ui-stacked-chart-hit:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus);border-radius:var(--radius-xs)}
.ui-stacked-chart .ui-chart-marker:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus);border-radius:50%}
.ui-stacked-chart .ui-tooltip{padding:10px 12px;border-radius:var(--radius-ui);font-weight:var(--fw-regular)}
.ui-chart-tip-head{display:block;font-weight:var(--fw-semibold);color:var(--overlay-fg)}
.ui-chart-tip-line{display:block;margin-top:var(--space-1);color:var(--overlay-fg-soft)}
/* PRD-242 D18: a bar's printed value, and a note Tag over its column. */
.ui-stacked-chart svg text.ui-stacked-chart-value{font-weight:var(--fw-semibold);fill:var(--color-text)}
.ui-stacked-chart-notes{display:flex;min-width:0;padding-top:var(--space-2)}
.ui-stacked-chart-note-slot{display:flex;justify-content:center;flex:1 1 0;min-width:0;white-space:nowrap}
.ui-stacked-chart-note-slot:first-child{justify-content:flex-start}
.ui-stacked-chart-note-slot:last-child{justify-content:flex-end}
.ui-stacked-chart-events-key{align-self:center;font-size:var(--font-size-xs);font-weight:var(--fw-regular);line-height:16px;color:var(--color-muted)}
.ui-stacked-chart-events{position:relative;display:flex;height:40px}
.ui-stacked-chart-events::before{content:"";position:absolute;left:0;right:0;top:20px;border-top:1px solid var(--color-border-subtle)}
.ui-stacked-chart-slot{display:flex;align-items:center;justify-content:center;gap:2px;flex:1 1 0;min-width:0}
.ui-stacked-chart-slot>.ui-tooltip-anchor{z-index:1}
.ui-chart-marker{display:inline-flex;width:20px;height:20px;border-radius:50%}
.ui-chart-marker-glyph{width:20px;height:20px;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ui-chart-marker-glyph>polyline,.ui-chart-marker-glyph>path{fill:none}
.ui-chart-marker-shipped .ui-chart-marker-glyph{stroke:var(--status-success-fg)}
.ui-chart-marker-shipped circle{fill:var(--color-success-bg)}
.ui-chart-marker-found .ui-chart-marker-glyph{stroke:var(--status-warning-fg)}
.ui-chart-marker-found circle{fill:var(--color-warning-bg)}

/* ---- Month line chart (PRD-236 D2; Explore, node 199:4695) ----
   One series, one axis. The line is 2px in its chart colour, the last
   measured month a 4px dot; a month that holds something we did draws a
   dashed recessive marker. Text keeps text ink. Each month is a column over
   the plot carrying its tooltip; hover and focus draw a 1px guide. */
.ui-line-chart{margin:0}
.ui-line-chart-body{display:grid;grid-template-columns:64px minmax(0,1fr);padding-right:var(--space-5)}
.ui-line-chart svg{display:block;overflow:visible}
.ui-line-chart svg text{font-family:var(--font-sans);font-size:var(--font-size-xs);fill:var(--color-muted)}
.ui-line-chart-grid,.ui-line-chart-base,.ui-line-chart-marker{stroke-width:1;shape-rendering:crispEdges}
.ui-line-chart-grid{stroke:var(--color-border-subtle)}
.ui-line-chart-base{stroke:var(--color-border)}
.ui-line-chart-marker{stroke:var(--color-faint);stroke-dasharray:3 3}
.ui-line-chart-line{stroke-width:2;stroke-linecap:round}
.ui-line-chart-dot{stroke:var(--color-bg);stroke-width:2}
.ui-line-chart-c1 .ui-line-chart-line,.ui-line-chart-c1 .ui-line-chart-key-line{stroke:var(--chart-1);background:var(--chart-1)}
.ui-line-chart-c1 .ui-line-chart-dot{fill:var(--chart-1)}
.ui-line-chart-c2 .ui-line-chart-line,.ui-line-chart-c2 .ui-line-chart-key-line{stroke:var(--chart-2);background:var(--chart-2)}
.ui-line-chart-c2 .ui-line-chart-dot{fill:var(--chart-2)}
.ui-line-chart-c3 .ui-line-chart-line,.ui-line-chart-c3 .ui-line-chart-key-line{stroke:var(--chart-3);background:var(--chart-3)}
.ui-line-chart-c3 .ui-line-chart-dot{fill:var(--chart-3)}
.ui-line-chart-c4 .ui-line-chart-line,.ui-line-chart-c4 .ui-line-chart-key-line{stroke:var(--chart-4);background:var(--chart-4)}
.ui-line-chart-c4 .ui-line-chart-dot{fill:var(--chart-4)}
.ui-line-chart-c5 .ui-line-chart-line,.ui-line-chart-c5 .ui-line-chart-key-line{stroke:var(--chart-5);background:var(--chart-5)}
.ui-line-chart-c5 .ui-line-chart-dot{fill:var(--chart-5)}
.ui-line-chart-plot{position:relative;min-width:0}
.ui-line-chart-cols{position:absolute;left:0;right:0;top:12px;height:158px;display:flex}
.ui-line-chart-cols>.ui-tooltip-anchor{flex:1 1 0;min-width:0}
.ui-line-chart-hit{position:relative;display:block;width:100%;height:100%}
.ui-line-chart-hit:hover::after,.ui-line-chart-hit:focus-visible::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--color-control-border)}
.ui-line-chart .ui-line-chart-hit:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus);border-radius:var(--radius-xs)}
.ui-line-chart .ui-tooltip{padding:10px 12px;border-radius:var(--radius-ui);font-weight:var(--fw-regular)}
.ui-line-chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:12px 0 0 64px;list-style:none}
.ui-line-chart-legend li{display:flex;align-items:center;gap:6px;font-size:var(--font-size-xs);font-weight:var(--fw-regular);line-height:16px;color:var(--color-muted)}
.ui-line-chart-key-line{flex:none;width:12px;height:2px;border-radius:1px}
.ui-line-chart-key-marker{flex:none;width:0;height:10px;border-left:1px dashed var(--color-faint)}

/* ---- Intent grid (PRD-246 D3, D5; group "Intent grid", cell 439:21083,
   key 439:21093; added 2026-09-28) ----
   A table of three by three 64px cells, 6px apart, under a 200px column of
   row keys. A cell's tint is its TARGET column's intent colour at one of four
   levels (14, 24, 36, 68%), painted on a layer behind the words so the text
   stays full ink; the number and the share are always written. The outlined
   pair has a 2px ink edge. On a phone the key column narrows and the caption
   keeps only the share. */
.ui-intent-grid{width:auto;border-collapse:separate;border-spacing:6px;margin:-6px;table-layout:fixed}
.ui-intent-grid th{padding:0;font-weight:var(--fw-regular);text-align:left}
.ui-intent-grid-corner,.ui-intent-grid-col{font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px;color:var(--color-muted)}
.ui-intent-grid-corner{width:200px}
.ui-intent-grid .ui-intent-grid-corner{font-weight:var(--fw-medium)}
.ui-intent-grid .ui-intent-grid-col{width:220px;font-weight:var(--fw-medium);text-align:center}
.ui-intent-grid-key{font-size:var(--font-size-sm);line-height:20px;color:var(--color-text);white-space:nowrap}
.ui-intent-grid-keyline{display:flex;align-items:center;gap:var(--space-2)}
.ui-intent-dot{flex:none;width:10px;height:10px;border-radius:50%}
.ui-intent-dot.ui-intent-informational{background:var(--chart-2)}
.ui-intent-dot.ui-intent-navigational{background:var(--chart-axis)}
.ui-intent-dot.ui-intent-transactional{background:var(--chart-1)}
.ui-intent-grid-cell{position:relative;z-index:0;box-sizing:border-box;height:64px;padding:0 var(--space-2);border-radius:var(--radius-ui);text-align:center;vertical-align:middle}
.ui-intent-grid-cell::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit}
.ui-intent-grid-cell.ui-intent-informational::before{background:var(--chart-2)}
.ui-intent-grid-cell.ui-intent-navigational::before{background:var(--chart-axis)}
.ui-intent-grid-cell.ui-intent-transactional::before{background:var(--chart-1)}
.ui-intent-level-1::before{opacity:.14}
.ui-intent-level-2::before{opacity:.24}
.ui-intent-level-3::before{opacity:.36}
.ui-intent-level-4::before{opacity:.68}
.ui-intent-grid-outlined{box-shadow:inset 0 0 0 2px var(--color-text)}
.ui-intent-grid-number{display:block;font-size:var(--font-size-lg);font-weight:var(--fw-semibold);line-height:22px;color:var(--color-text)}
.ui-intent-grid-caption{display:block;margin-top:2px;font-size:var(--font-size-xs);line-height:16px;color:var(--color-body)}
/* Level=Thin (452:21094; Ross, 2026-09-29, issue 5347): a same-topic cell
   under 100 links or with none, in the Warning Tag's colours, the caption
   saying which. A faint zero is a cell with no link, drawn as a "·". */
.ui-intent-grid-cell.ui-intent-level-thin::before{background:var(--color-warning-bg);opacity:1}
.ui-intent-level-thin{box-shadow:inset 0 0 0 1px var(--color-warning)}
.ui-intent-level-thin .ui-intent-grid-number,.ui-intent-level-thin .ui-intent-grid-caption{color:var(--status-warning-fg)}
.ui-intent-grid-none::before{opacity:.05}
.ui-intent-grid-dot{font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-muted)}

/* ---- Bar row (PRD-246 D13; group "Bar row", 439:21172; added 2026-09-28) ----
   A 170px label, a 10px bar on the chart/grid track filling the rest, and
   the value. The fill's width is the caller's fraction of the largest band.
   Rows stack 12px apart in a `.ui-bar-rows`. */
.ui-bar-rows{display:flex;flex-direction:column;gap:var(--space-3)}
.ui-bar-row{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.ui-bar-row-label{flex:none;width:170px;font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-body);white-space:pre-wrap}
.ui-bar-row-bar{display:block;flex:1 1 0;min-width:0}
.ui-bar-row-track{fill:var(--chart-grid)}
.ui-bar-row-chart1{fill:var(--chart-1)}
.ui-bar-row-chart2{fill:var(--chart-2)}
.ui-bar-row-chart3{fill:var(--chart-3)}
.ui-bar-row-bad{fill:var(--color-danger)}
.ui-bar-row-value{flex:none;min-width:80px;font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:18px;color:var(--color-text);white-space:nowrap}

/* ---- Split bar (PRD-246 S4; group "Split bar", 446:21098; added 2026-09-29) ----
   One 10px track, the parts side by side from the left, rounded 4px at the
   two outer ends only (the svg clips). One focus stop, its words in the
   Tooltip. The Band key (446:21111) is the Intent key's dot in a band's
   colour. */
.ui-split-bar{display:block;min-width:0;border-radius:4px}
.ui-split-bar:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.ui-split-bar-bar{display:block;border-radius:4px;overflow:hidden}
.ui-split-bar-track{fill:var(--chart-grid)}
.ui-split-bar-chart1{fill:var(--chart-1)}
.ui-split-bar-chart2{fill:var(--chart-2)}
.ui-split-bar-chart3{fill:var(--chart-3)}
.ui-split-bar-axis{fill:var(--chart-axis)}
.ui-split-bar-bad{fill:var(--color-danger)}
/* The tall bar (PRD-312 S2; Figma 902:52995 "Where we show up"): 32px, each
   part's percentage inside in 12px medium, white on the two dark parts. A key
   of 10px dots names the parts (`.ui-split-bar-key`). */
.ui-split-bar-tall,.ui-split-bar-tall .ui-split-bar-bar{border-radius:4px}
.ui-split-bar-tall{container-type:inline-size}
@container (max-width:599.98px){.ui-split-bar-inside-small{display:none}}
.ui-split-bar-deep{fill:var(--status-primary-fg)}
.ui-split-bar-pale2{fill:color-mix(in srgb,var(--chart-2) 55%,var(--color-bg))}
.ui-split-bar-muted{fill:var(--chart-muted)}
.ui-split-bar-inside{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--fw-medium);fill:var(--color-text)}
.ui-split-bar-inside-deep,.ui-split-bar-inside-chart2{fill:var(--color-bg)}
.ui-split-bar-key{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
.ui-split-bar-key li{display:flex;align-items:center;gap:6px;font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-body)}
.ui-split-bar-dot{flex:none;width:10px;height:10px;border-radius:50%}
.ui-split-bar-dot-deep{background:var(--status-primary-fg)}
.ui-split-bar-dot-chart1{background:var(--chart-1)}
.ui-split-bar-dot-chart2{background:var(--chart-2)}
.ui-split-bar-dot-pale2{background:color-mix(in srgb,var(--chart-2) 55%,var(--color-bg))}
.ui-split-bar-dot-chart3{background:var(--chart-3)}
.ui-split-bar-dot-bad{background:var(--color-danger)}
.ui-split-bar-dot-muted{background:var(--chart-muted)}
.ui-intent-dot.ui-band-strong{background:var(--chart-1)}
.ui-intent-dot.ui-band-medium{background:var(--chart-2)}
.ui-intent-dot.ui-band-weak{background:var(--chart-3)}
.ui-intent-dot.ui-band-none{background:var(--color-danger)}

/* ---- Scatter chart (PRD-344 D18; frame 5's Authority box, 1041:60112;
   group "Scatter chart", 1135:63693, component 1135:63718; added 2026-10-21) ----
   A 290px plot in its column, 40px left for the y ticks and title and 20px
   right, 12px dots in the sheet's chart colours, each named in 12px body ink;
   ticks 12px muted, axis titles 12px medium muted. Gridlines are the chart
   grid, the baseline the chart axis. */
.ui-scatter{margin:0;min-width:0}
.ui-scatter-body{padding:0 20px 0 40px}
.ui-scatter-plot{display:block;overflow:visible}
.ui-scatter-plot text{font-family:var(--font-sans);font-size:var(--font-size-xs)}
.ui-scatter-grid,.ui-scatter-base{stroke-width:1;shape-rendering:crispEdges}
.ui-scatter-grid{stroke:var(--chart-grid)}
.ui-scatter-base{stroke:var(--chart-axis)}
.ui-scatter-tick{fill:var(--color-muted)}
.ui-scatter-title{fill:var(--color-muted);font-weight:var(--fw-medium)}
.ui-scatter-name{fill:var(--color-body)}
/* The range variant (PRD-344 S10, frame 7, 1043:60078): a 6px bar with
   round ends from the low figure to the high one, in the point's colour;
   64px left for money ticks and the y title, as the frame measures. Under
   600px the names would pile up, so they go: the hover words, the table
   for screen readers and the page's own list name every bar. */
.ui-scatter-range{stroke-width:6;stroke-linecap:round}
.ui-scatter-ranged .ui-scatter-body{padding-left:64px}
.ui-scatter-ranged{container-type:inline-size}
@container (max-width:599.98px){.ui-scatter-ranged .ui-scatter-name{display:none}}
.ui-scatter-range.ui-chart-fill-1{stroke:var(--chart-1)}
.ui-scatter-range.ui-chart-fill-2{stroke:var(--chart-2)}
.ui-scatter-range.ui-chart-fill-3{stroke:var(--chart-3)}
.ui-scatter-range.ui-chart-fill-4{stroke:var(--chart-4)}
.ui-scatter-range.ui-chart-fill-5{stroke:var(--chart-5)}

/* ---- Page node diagram (PRD-246 D5; group "Page node diagram", 447:21097;
   added 2026-09-29 on Ross's rulings on issue 5346) ----
   The drawing is an SVG as wide as the box with its columns at 33, 50 and
   67% and its heights in pixels; the lines are a second SVG stretched to the
   width with strokes that do not stretch. Node fills and line strokes are
   the intent colours; names 12px Medium ink, facts 12px muted; the page's
   own words sit on a white halo so no line crosses them. The same facts are
   two lists, visually hidden (the sr-only recipe, never display:none) until
   the component has under 700px, when the drawing goes and the lists show. */
.ui-node-diagram{position:relative;container-type:inline-size;display:flex;flex-direction:column;gap:var(--space-5)}
.ui-node-diagram-figure{position:relative}
.ui-node-diagram-svg{display:block;overflow:visible}
.ui-node-diagram-lines{overflow:visible}
.ui-node-diagram-lines path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ui-node-diagram-line{stroke-width:2}
.ui-node-diagram-line.ui-node-diagram-informational{stroke:var(--chart-2)}
.ui-node-diagram-line.ui-node-diagram-navigational{stroke:var(--chart-axis)}
.ui-node-diagram-line.ui-node-diagram-transactional{stroke:var(--chart-1)}
.ui-node-diagram-line-close{stroke:var(--chart-axis);stroke-width:1.5;stroke-dasharray:6 5}
.ui-node-diagram-line-menu{stroke:var(--chart-axis);stroke-width:1.5}
.ui-node-diagram-dot{stroke:var(--color-bg);stroke-width:2}
.ui-node-diagram-dot.ui-node-diagram-informational{fill:var(--chart-2)}
.ui-node-diagram-dot.ui-node-diagram-navigational{fill:var(--chart-axis)}
.ui-node-diagram-dot.ui-node-diagram-transactional{fill:var(--chart-1)}
.ui-node-diagram-ring{fill:var(--color-bg);stroke-width:2;stroke-dasharray:4 3}
.ui-node-diagram-ring.ui-node-diagram-informational{stroke:var(--chart-2)}
.ui-node-diagram-ring.ui-node-diagram-navigational{stroke:var(--chart-axis)}
.ui-node-diagram-ring.ui-node-diagram-transactional{stroke:var(--chart-1)}
.ui-node-diagram svg text{font-family:var(--font-sans);font-size:var(--font-size-xs)}
.ui-node-diagram svg .ui-node-diagram-name{font-weight:var(--fw-medium);fill:var(--color-text)}
.ui-node-diagram svg .ui-node-diagram-facts{font-weight:var(--fw-regular);fill:var(--color-muted)}
.ui-node-diagram svg .ui-node-diagram-faint{fill:var(--color-muted)}
.ui-node-diagram-halo{paint-order:stroke;stroke:var(--color-bg);stroke-width:8px;stroke-linejoin:round}
.ui-node-diagram-pill{display:inline-block;margin:0;padding:6px 10px;border-radius:13px;background:var(--chart-grid);font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:14px;color:var(--color-muted);white-space:nowrap}
.ui-node-diagram-figure>.ui-node-diagram-pill{position:absolute;top:27px;left:50%;z-index:1;transform:translateX(-50%)}
.ui-node-diagram-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
.ui-node-diagram-legend li{display:flex;align-items:center;gap:6px;font-size:var(--font-size-xs);line-height:14px;color:var(--color-muted)}
.ui-node-diagram-key{flex:none;box-sizing:border-box;width:10px;height:10px;border-radius:50%}
.ui-node-diagram-key-dot.ui-node-diagram-informational{background:var(--chart-2)}
.ui-node-diagram-key-dot.ui-node-diagram-navigational{background:var(--chart-axis)}
.ui-node-diagram-key-dot.ui-node-diagram-transactional{background:var(--chart-1)}
.ui-node-diagram-key-ring{border:1.5px dashed var(--chart-axis);background:var(--color-bg)}
.ui-node-diagram-key-ring.ui-node-diagram-informational{border-color:var(--chart-2)}
.ui-node-diagram-key-ring.ui-node-diagram-transactional{border-color:var(--chart-1)}
.ui-node-diagram-legend .ui-node-diagram-key-ring{border-width:1px}
.ui-node-diagram-lists{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui-node-diagram-lists .ui-node-diagram-pill{align-self:flex-start}
.ui-node-diagram-empty{margin:0;font-size:var(--font-size-xs);line-height:15px;color:var(--color-muted)}
.ui-node-diagram-list{display:flex;flex-direction:column;gap:10px}
.ui-node-diagram-list-title{margin:0;font-size:var(--font-size-sm-minus);font-weight:var(--fw-semibold);line-height:16px;color:var(--color-text)}
.ui-node-diagram-list ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ui-node-diagram-item{display:flex;align-items:flex-start;gap:var(--space-2)}
.ui-node-diagram-item>.ui-node-diagram-key{margin-top:3px}
.ui-node-diagram-item-words{display:flex;flex-direction:column;gap:1px;min-width:0}
.ui-node-diagram-item-name{font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:16px;color:var(--color-text);overflow-wrap:anywhere}
.ui-node-diagram-item-name.ui-node-diagram-faint{color:var(--color-muted)}
.ui-node-diagram-item-facts,.ui-node-diagram-more{margin:0;font-size:var(--font-size-xs);line-height:15px;color:var(--color-muted)}
@container (max-width:699.98px){
  .ui-node-diagram-figure{display:none}
  .ui-node-diagram-lists{position:static;display:flex;flex-direction:column;gap:var(--space-4);width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
}

/* ---- Entity cluster diagram (PRD-246 D5; group "Entity cluster diagram",
   478:22424; added 2026-10-01) ----
   The pages that mention one entity: the middle page 40px, up to six around
   it, 18px to 32px by mentions. Solid lines chart/2 at 50%, 2.5px; dashed
   chart/axis, 1.5px, 6/5. Labels sit on a white halo. Under 640px the list
   takes the drawing's place (Ross, 2026-10-01, issue 5353). */
.ui-cluster{position:relative;container-type:inline-size;display:flex;flex-direction:column;gap:var(--space-4)}
.ui-cluster-svg{display:block;max-width:100%;overflow:visible}
.ui-cluster-svg path{fill:none;stroke-linecap:round}
.ui-cluster-line{stroke:var(--chart-2);stroke-opacity:.5;stroke-width:2.5}
.ui-cluster-line-should{stroke:var(--chart-axis);stroke-opacity:.9;stroke-width:1.5;stroke-dasharray:6 5}
.ui-cluster-dot{stroke:var(--color-bg);stroke-width:2}
.ui-cluster-dot.ui-cluster-informational{fill:var(--chart-2)}
.ui-cluster-dot.ui-cluster-navigational{fill:var(--chart-axis)}
.ui-cluster-dot.ui-cluster-transactional{fill:var(--chart-1)}
.ui-cluster svg text{font-family:var(--font-sans);font-size:var(--font-size-xs)}
.ui-cluster svg .ui-cluster-name{font-weight:var(--fw-medium);fill:var(--color-text)}
.ui-cluster svg .ui-cluster-mentions{font-weight:var(--fw-regular);fill:var(--color-muted)}
.ui-cluster-halo{paint-order:stroke;stroke:var(--color-bg);stroke-width:8px;stroke-linejoin:round}
.ui-cluster-note{margin:0;font-size:var(--font-size-xs);line-height:15px;color:var(--color-muted)}
.ui-cluster-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
.ui-cluster-legend li{display:flex;align-items:center;gap:6px;font-size:var(--font-size-xs);line-height:14px;color:var(--color-muted)}
.ui-cluster-key{flex:none;width:10px;height:10px;border-radius:50%}
.ui-cluster-key-dot.ui-cluster-informational{background:var(--chart-2)}
.ui-cluster-key-dot.ui-cluster-navigational{background:var(--chart-axis)}
.ui-cluster-key-dot.ui-cluster-transactional{background:var(--chart-1)}
.ui-cluster-key-dash{flex:none;width:18px;border-top:1.5px dashed var(--chart-axis)}
.ui-cluster-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;list-style:none}
.ui-cluster-item{display:flex;align-items:flex-start;gap:var(--space-2)}
.ui-cluster-item>.ui-cluster-key{margin-top:3px}
.ui-cluster-item-words{display:flex;flex-direction:column;gap:1px;min-width:0}
.ui-cluster-item-name{font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:16px;color:var(--color-text);overflow-wrap:anywhere}
.ui-cluster-item-facts{font-size:var(--font-size-xs);line-height:15px;color:var(--color-muted)}
@container (max-width:639.98px){
  .ui-cluster-figure{display:none}
  .ui-cluster-list{position:static;display:flex;flex-direction:column;gap:10px;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
}

/* ---- Flow diagram (PRD-246 D4, D5; group "Flow diagram", 444:21087; added
   2026-09-29) ----
   Two 214px sides (names, counts, 14px bars) keep the board's size; the bands
   between them stretch. Left bars chart/2, right bars chart/1; a band wears
   its source topic's chart colour, 45% when it stays in its topic, 22% when
   it crosses. On a phone the diagram keeps its desktop width (1,060px) and
   scrolls sideways inside its box (Ross, 2026-09-29, issue 5347). */
.ui-flow{min-width:0;max-width:100%;margin:0}
.ui-flow-scroll{min-width:0;max-width:100%;overflow-x:auto}
.ui-flow-plot{display:flex;min-width:0}
.ui-flow-side{display:block;flex:none}
.ui-flow-bands{display:block;flex:1 1 0;min-width:0;width:auto}
.ui-flow-bar-from{fill:var(--chart-2)}
.ui-flow-bar-to{fill:var(--chart-1)}
.ui-flow-band-c1{fill:var(--chart-1)}
.ui-flow-band-c2{fill:var(--chart-2)}
.ui-flow-band-c3{fill:var(--chart-3)}
.ui-flow-band-c4{fill:var(--chart-4)}
.ui-flow-band-c5{fill:var(--chart-5)}
.ui-flow-band-c6{fill:var(--chart-6)}
.ui-flow-band-same{fill-opacity:.45}
.ui-flow-band-cross{fill-opacity:.22}
.ui-flow-name{font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);fill:var(--color-text)}
.ui-flow-count{font-size:var(--font-size-xs);fill:var(--color-muted)}
.ui-flow-link:hover .ui-flow-name{text-decoration:underline}
.ui-flow-link:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.ui-flow-key{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-3);font-size:var(--font-size-xs);line-height:16px;color:var(--color-muted)}
.ui-flow-key-item{display:inline-flex;align-items:center;gap:6px}
.ui-flow-swatch{flex:none;width:10px;height:10px;border-radius:2px}
.ui-flow-swatch-from{background:var(--chart-2)}
.ui-flow-swatch-to{background:var(--chart-1)}
.ui-flow-swatch-cross{background:var(--chart-axis)}

/* ---- Rank cell, Rank grid, Rank key (PRD-341 D16; nodes 998:55368,
   998:55369, 998:55475; added 2026-10-19) ----
   A rank cell is a 40px disc in its band's Tag colours: Top 3 green, 4 to 10
   yellow, 11 to 20 red, Not found grey. The number is always written. The
   grid is seven discs to a row, 10px apart, in a bordered box; the
   business's own point has a 2px ink ring. On a phone the discs share the
   row's width. The key's discs are 14px. */
.ui-rank-cell{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:40px;height:40px;border-radius:50%;font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:1.2;white-space:nowrap}
.ui-rank-top-3{background:var(--color-success-bg);color:var(--status-success-fg)}
.ui-rank-top-10{background:var(--color-warning-bg);color:var(--status-warning-fg)}
.ui-rank-top-20{background:var(--color-danger-bg);color:var(--status-danger-fg)}
.ui-rank-not-found{background:var(--color-surface-grey);color:var(--color-muted)}
.ui-rank-cell-business{border:2px solid var(--color-text)}
.ui-rank-grid{display:inline-grid;grid-template-columns:repeat(7,40px);gap:10px;box-sizing:border-box;margin:0;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);list-style:none}
.ui-rank-grid li{display:flex}
.ui-rank-key{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:0;padding:0;list-style:none;font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:1.2;color:var(--color-muted)}
.ui-rank-key li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ui-rank-swatch{flex:none;width:14px;height:14px;border-radius:50%}

/* ---- Review card (PRD-341 D8, D16; node 1002:55958; added 2026-10-19) ----
   A review waiting for a reply: the stars in the warning ink, the reviewer,
   where and when; the review's words; the drafted reply on a grey panel; the
   Small buttons, Approve and post first. A hairline under each card. */
.ui-review-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;box-sizing:border-box;width:100%;padding:20px;border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg)}
.ui-review-card p{margin:0}
.ui-review-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) 10px;line-height:1.2}
.ui-review-card-stars{font-size:var(--font-size-card);font-weight:var(--fw-medium);color:var(--status-warning-fg)}
.ui-review-card-reviewer{font-size:var(--font-size-sm);font-weight:var(--fw-medium);color:var(--color-text)}
.ui-review-card-meta{font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);color:var(--color-muted)}
.ui-review-card-text,.ui-review-card-draft-text{font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:1.2;color:var(--color-text)}
.ui-review-card-draft{display:flex;flex-direction:column;gap:6px;box-sizing:border-box;width:100%;padding:14px;border-radius:var(--radius-ui);background:var(--color-surface-grey)}
.ui-review-card-draft-label{font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:1.2;color:var(--color-muted)}
.ui-review-card-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}

@media (max-width:719.98px){
  .ui-rank-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;padding:var(--space-3)}
  .ui-rank-grid .ui-rank-cell{width:100%;height:auto;aspect-ratio:1}
  .ui-review-card{padding:var(--space-4)}
  .ui-intent-grid{width:100%}
  .ui-intent-grid-corner{width:34%}
  .ui-intent-grid .ui-intent-grid-col{width:auto}
  .ui-intent-grid-keyline{align-items:flex-start;gap:var(--space-1)}
  .ui-intent-dot{margin-top:4px}
  .ui-intent-grid-key{font-size:var(--font-size-sm-minus);line-height:18px;white-space:normal}
  .ui-intent-grid-cell{padding:0 var(--space-1)}
  .ui-intent-grid-words{display:none}
  .ui-bar-row{flex-wrap:wrap;row-gap:var(--space-1)}
  .ui-bar-row-label{flex:1 1 auto;width:auto}
  .ui-bar-row-bar{flex:1 0 100%;order:3}
  .ui-flow-plot{min-width:1060px}
  .ui-count-row{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .ui-headline-stats{padding:var(--space-4)}
  .ui-headline-stats-row{flex-direction:column;gap:var(--space-3)}
  .ui-headline-stat{flex:none;width:100%}
  .ui-headline-stat + .ui-headline-stat{padding:var(--space-3) 0 0;border-top:1px solid var(--color-border);border-left:0}

  .ui-compare-row{flex-wrap:wrap;column-gap:var(--space-2);row-gap:var(--space-1);height:auto;min-height:48px;padding:10px var(--space-4)}
  .ui-compare-head{min-height:36px}
  .ui-compare-name{flex:1 0 100%}
  .ui-compare-cell{flex:1 1 0;width:auto;min-width:0}

  .ui-stacked-chart-body{padding-right:var(--space-4)}
  .ui-stacked-chart-x-alt{display:none}
  .ui-line-chart-body{padding-right:var(--space-4)}
  .ui-line-chart-x-alt{display:none}
}

/* THE ENTITY GRID (PRD-246 D5, D11; sheet group "Entity grid", 452:21525, from
   board 385:17460). A table: a 300px page column, 54px entity columns whose
   names turn 45 degrees in a 110px head, 34px rows 12px apart, the table
   as wide as its columns; the
   transactional rows on the pale green band (chart/1 dots), then a rule,
   "Informational pages" and their rows (chart/2 dots). A dot's area follows
   the mentions in eight diameters, 8px to 30px; 4px grey for none; the amber
   dashed ring for a transactional page missing an entity. On a phone the
   grid keeps its width and scrolls inside its box. */
.ui-entity-grid{min-width:0;max-width:100%;margin:0}
.ui-entity-scroll{position:relative;min-width:0;max-width:100%;overflow-x:auto}
.ui-entity-table{width:max-content;border-collapse:separate;border-spacing:0 12px;font-size:var(--font-size-sm-minus);line-height:1.2;color:var(--color-text)}
.ui-entity-table thead th{height:110px;padding:0;vertical-align:bottom;font-size:var(--font-size-xs);font-weight:var(--fw-medium);color:var(--color-muted)}
.ui-entity-page-head{width:300px}
.ui-entity-name{width:54px;min-width:54px;max-width:54px;white-space:nowrap}
.ui-entity-name span{display:inline-block;transform:translateX(18px) rotate(-45deg);transform-origin:left bottom}
.ui-entity-table thead th.ui-entity-links-head{width:96px;padding-left:var(--space-2);text-align:left;white-space:normal}
.ui-entity-page{box-sizing:border-box;width:300px;min-width:300px;max-width:300px;height:34px;padding:0 var(--space-2);text-align:left;vertical-align:middle;font-weight:var(--fw-regular)}
.ui-entity-page-in{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.ui-entity-transactional .ui-entity-page{font-weight:var(--fw-medium)}
.ui-entity-path{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ui-entity-transactional td,.ui-entity-transactional th{background:var(--color-primary-bg)}
.ui-entity-transactional tr>:first-child{border-radius:var(--radius-ui) 0 0 var(--radius-ui)}
.ui-entity-transactional tr>:last-child{border-radius:0 var(--radius-ui) var(--radius-ui) 0}
.ui-entity-cell{width:54px;height:34px;padding:0;text-align:center;vertical-align:middle}
.ui-entity-links{width:96px;padding:0 var(--space-2);font-size:var(--font-size-xs);white-space:nowrap}
.ui-entity-links-in{color:var(--color-muted)}
.ui-entity-links-yes{font-weight:var(--fw-medium);color:var(--status-success-fg)}
.ui-entity-links-no{color:var(--status-danger-fg)}
.ui-entity-rule th{padding:var(--space-3) 0 0;border-top:1px solid var(--color-border);text-align:left;font-size:var(--font-size-xs);font-weight:var(--fw-medium);color:var(--color-muted)}
.ui-entity-dot{display:inline-block;box-sizing:border-box;border-radius:50%;vertical-align:middle;opacity:.85}
.ui-entity-dot-transactional{background:var(--chart-1)}
.ui-entity-dot-informational{background:var(--chart-2)}
.ui-entity-dot-s1{width:8px;height:8px}
.ui-entity-dot-s2{width:11px;height:11px}
.ui-entity-dot-s3{width:13px;height:13px}
.ui-entity-dot-s4{width:16px;height:16px}
.ui-entity-dot-s5{width:18px;height:18px}
.ui-entity-dot-s6{width:21px;height:21px}
.ui-entity-dot-s7{width:24px;height:24px}
.ui-entity-dot-s8{width:30px;height:30px}
.ui-entity-none{width:4px;height:4px;background:var(--color-control-border);opacity:1}
.ui-entity-missing{width:18px;height:18px;border:1px dashed var(--color-warning);background:var(--color-warning-bg);opacity:1}
.ui-entity-key{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%}
.ui-entity-key.ui-entity-missing{width:12px;height:12px}
.ui-entity-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) 20px;margin:0;padding:0;list-style:none;font-size:var(--font-size-xs);line-height:16px;color:var(--color-muted)}
.ui-entity-legend li{display:flex;align-items:center;gap:6px}