/* THE SHEET'S BOXES AND ROWS (PRD-232 S5, D9, D10, D11): Ui::SectionTitleComponent,
   Ui::SectionBoxComponent, Ui::TableRowComponent, Ui::CheckRowComponent,
   Ui::FactsComponent, Ui::EvidenceRowComponent, Ui::FilterButtonComponent,
   Ui::EmptyBoxComponent, Ui::TooltipComponent, Ui::UndoMessageComponent and
   Ui::NoticeComponent,
   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
   (column widths, row heights, paddings), which it draws with no variable.

   D9: every header and column head is neutral grey (--color-surface) or white.
   No header carries a tint.

   D10: a row is ONE link. The whole row is the <a>, the chevron says so, and
   nothing inside it is a button. Focus draws a 2px inset ring of --color-focus.

   THE PHONE is below 720px, the app's one phone width (the views skill). The
   Check row, the Table row and the Evidence row change shape there. */

/* ---- Section title (node 115:1150) ---- */
.ui-section-title{display:flex;align-items:center;gap:var(--space-3);min-height:28px;margin:0}
.ui-section-title-name{margin:0;font-size:var(--font-size-lg);font-weight:var(--fw-semibold);line-height:26px;letter-spacing:-0.09px;color:var(--color-text)}
.ui-section-title-count{font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-muted)}
.ui-section-title-link{margin-left:auto;font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px;color:var(--status-primary-fg);text-decoration:none;white-space:nowrap;border-radius:var(--radius-xs)}
.ui-section-title-action{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.ui-section-title-link:hover{text-decoration:underline;color:var(--status-primary-fg)}

/* ---- Section box (node 120:1573) ---- */
.ui-section-box{box-sizing:border-box;width:100%;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);overflow:hidden}
.ui-section-box-head{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:52px;padding:10px 12px 10px 20px;background:var(--color-surface)}
/* A menu opened from the header's action must not be clipped by the box's
   rounded overflow; the header keeps the rounded corners itself meanwhile. */
.ui-section-box:has(>.ui-section-box-head details[open]){overflow:visible}
.ui-section-box:has(>.ui-section-box-head details[open])>.ui-section-box-head{border-radius:calc(var(--radius-ui) - 1px) calc(var(--radius-ui) - 1px) 0 0}
.ui-section-box-title{margin:0;font-size:var(--font-size-base);font-weight:var(--fw-semibold);line-height:24px;color:var(--color-text)}
.ui-section-box-count{font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-muted)}
.ui-section-box-spacer{flex:1 1 0}
.ui-section-box-summary{font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);line-height:18px;color:var(--color-muted);white-space:nowrap}
.ui-section-box-action{flex:none;display:flex;align-items:center;gap:var(--space-2)}
.ui-section-box-cols{display:flex;align-items:center;box-sizing:border-box;height:36px;padding:0 12px 0 20px;border-top:1px solid var(--color-border-subtle);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg);font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px;color:var(--color-muted)}
.ui-section-box-cols>span:first-child{flex:1 1 0;min-width:0}
.ui-section-box-cols>span+span{flex:none;width:140px;text-align:right}
.ui-section-box-cols::after{content:"";flex:none;width:44px}
.ui-section-box-rows{display:flex;flex-direction:column}

/* ---- Table row (node 115:1182) ---- */
/* 16px between cells (the Suppressions table, Figma 143:3579): two `main`
   cells, or a long main beside a fixed one, never run their words together. */
/* A table with no box header (the Tech audit's Recent runs, Figma 118:1533):
   the Table rows in a white box with the sheet's border and corner. A table
   whose group has a header uses Ui::SectionBoxComponent instead. */
.ui-table-box{box-sizing:border-box;width:100%;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);overflow:hidden}
.ui-table-row{display:flex;align-items:center;column-gap:var(--space-4);box-sizing:border-box;width:100%;height:56px;padding:0 var(--space-5);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg);color:var(--color-body);font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;text-decoration:none}
a.ui-table-row:hover{background:var(--color-surface);color:var(--color-body);text-decoration:none}
/* The open row (PRD-233 D5, Figma 135:1414): the primary tint and a 3px
   primary edge, the padding 3px less so the cells do not move. */
a.ui-table-row[aria-current="true"]{border-left:3px solid var(--color-primary);padding-left:calc(var(--space-5) - 3px);background:var(--color-primary-bg)}
.ui-table-head{height:40px;background:var(--color-surface);color:var(--color-muted);font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px}
/* The fixed cells SHRINK (their width is the basis) before the main cell falls
   under a third of the row, so a row with many cells keeps its name readable
   between 720px and a wide desktop. A header and its rows hold the same cells,
   so they shrink alike and stay lined up. */
.ui-table-cell{display:flex;align-items:center;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ui-table-cell-id{width:110px}
.ui-table-row:not(.ui-table-head) .ui-table-cell-id{font-family:var(--font-mono);font-size:var(--font-size-sm-minus)}
.ui-table-cell-date{width:170px}
.ui-table-cell-main{flex:1 1 0;min-width:33%}
.ui-table-row:not(.ui-table-head) .ui-table-cell-main{color:var(--color-text)}
.ui-table-cell-state{width:180px}
.ui-table-cell-number{width:140px;justify-content:flex-end;padding-right:var(--space-5)}
.ui-row-open{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:20px}
.ui-row-open .ic{width:20px;height:20px;stroke:var(--color-faint);fill:none;stroke-width:1.67;stroke-linecap:round;stroke-linejoin:round}
.ui-check-row .ui-row-open{height:40px}

/* A row with a "..." menu (PRD-241 D8, Figma 283:11038): the row is a div,
   its link stretched over it by `::after`, the menu lifted above that. The
   box that holds one lets the menu hang past its foot. */
.ui-table-row-menu{position:relative}
.ui-table-row-menu:hover{background:var(--color-surface)}
.ui-table-row-link{display:flex;align-items:center;column-gap:var(--space-4);flex:1 1 0;min-width:0;align-self:stretch;color:inherit;text-decoration:none}
a.ui-table-row-link:hover{color:inherit;text-decoration:none}
a.ui-table-row-link::after{content:"";position:absolute;inset:0}
a.ui-table-row-link:focus-visible{outline:none}
.ui-table-row-menu:has(>a.ui-table-row-link:focus-visible){box-shadow:inset 0 0 0 2px var(--color-focus)}
.ui-row-menu{position:relative;z-index:1}
/* The tick box before the link (PRD-239 D2): lifted above the stretched
   link like the menu, 18px wide in the header too so the columns line up. */
.ui-row-check{position:relative;z-index:1;display:flex;align-items:center;flex:none;width:18px}
.ui-row-menu:has(.rmenu[open]){z-index:2}
.ui-row-menu .rmenu{position:relative}
.ui-row-menu .rmenu>summary{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-ui);list-style:none;cursor:pointer;color:var(--color-muted)}
.ui-row-menu .rmenu>summary::-webkit-details-marker{display:none}
.ui-row-menu .rmenu>summary:hover,.ui-row-menu .rmenu[open]>summary{background:var(--color-surface-grey);color:var(--color-text)}
.ui-row-menu .rmenu>summary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-focus)}
.ui-row-menu .rmenu .ic{width:16px;height:16px;fill:currentColor;stroke:none}
.ui-row-menu .rmenu-panel{position:absolute;z-index:30;top:calc(100% + 6px);right:0}
.ui-row-menu .rmenu-panel.above{top:auto;bottom:calc(100% + 6px)}
.ui-section-box:has(.ui-row-menu){overflow:visible}
.ui-section-box:has(.ui-row-menu)>.ui-section-box-head{border-radius:calc(var(--radius-ui) - 1px) calc(var(--radius-ui) - 1px) 0 0}
.ui-section-box-rows>.ui-table-row-menu:last-child{border-bottom:0;border-radius:0 0 calc(var(--radius-ui) - 1px) calc(var(--radius-ui) - 1px)}
.ui-menu-block{padding:10px var(--space-4)}

/* ---- Check row (node 120:618) ---- */
.ui-check-row{display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:56px;padding:0 12px 0 20px;border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg);text-decoration:none}
.ui-check-row:hover{background:var(--color-surface);text-decoration:none}
.ui-check-row-check{display:flex;align-items:center;gap:var(--space-3);flex:1 1 0;min-width:0}
.ui-check-row-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-text)}
.ui-check-row .ui-tag{flex:none}
.ui-check-row-count{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;flex:none;width:140px;font-size:var(--font-size-sm);line-height:20px;color:var(--color-body);white-space:nowrap}
.ui-check-row-new{font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-muted)}

a.ui-table-row:focus-visible,.ui-check-row:focus-visible,.ui-evidence-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus)}

/* ---- Facts (node 121:821) ---- */
.ui-facts{display:flex;gap:var(--space-5);box-sizing:border-box;width:100%;margin:0;padding:20px var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg)}
.ui-fact{display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 0;min-width:0}
.ui-fact dt{font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:18px;color:var(--color-muted)}
.ui-fact dd{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--font-size-base);font-weight:var(--fw-regular);line-height:24px;color:var(--color-text)}

/* ---- Fact strip (node 405:18306), PRD-235 D1 ----
   Up to six cells in a bordered box, hairlines between them. Every number
   cell is one track wide and the tracks are equal; a text cell spans two.
   The cells wrap onto the next line when the box is narrow, and a value
   wraps inside its cell (Ross, 2026-10-05: a value never runs into the next
   cell). The hairlines are each cell's 1px shadow in the 1px grid gap; the
   strip's overflow clips the ones on its outer edge. */
.ui-fact-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;box-sizing:border-box;width:100%;margin:0;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);overflow:hidden}
.ui-fact-cell{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px var(--space-3);box-shadow:1px 1px 0 var(--color-border)}
.ui-fact-cell--text{grid-column:span 2}
.ui-fact-strip--full{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));background:var(--color-surface-grey)}
.ui-fact-strip--full .ui-fact-cell--text{grid-column:auto}
.ui-fact-cell dt{font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px;color:var(--color-muted)}
.ui-fact-cell dd{margin:0;font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-text);overflow-wrap:anywhere}

/* ---- Page preview (node 405:18333), PRD-235 D1, PRD-208 D8 ----
   One pane shows; hovering or focusing thumbnail N shows pane N (CSS only). */
.ui-page-preview{display:flex;flex-direction:column;gap:var(--space-3);width:420px;max-width:100%}
.ui-page-preview-pane{display:flex;flex-direction:column;gap:var(--space-3)}
.ui-page-preview-pane+.ui-page-preview-pane{display:none}
.ui-page-preview-shot{display:flex;flex-direction:column;gap:var(--space-2);box-sizing:border-box;height:300px;padding:20px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-surface)}
.ui-page-preview-shot p,.ui-page-preview-caption p{margin:0}
.ui-page-preview-title{font-size:var(--font-size-xs);line-height:16px;color:var(--color-muted)}
.ui-page-preview-h1{font-size:var(--font-size-base);font-weight:var(--fw-medium);line-height:22px;color:var(--color-text)}
.ui-page-preview-text{font-size:var(--font-size-sm);line-height:22px;color:var(--color-muted)}
.ui-page-preview-caption{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-page-preview-name{font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px;color:var(--color-text)}
.ui-page-preview-path{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--fw-regular) var(--font-size-xs)/16px var(--font-mono);color:var(--color-muted)}
.ui-page-preview-line{font-size:var(--font-size-xs);line-height:16px;color:var(--color-muted)}
.ui-page-preview-thumbs{display:flex;gap:var(--space-2)}
.ui-page-preview-thumb{flex:none;width:64px;height:44px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);cursor:pointer}
.ui-page-preview-thumb:first-child{border:2px solid var(--color-primary-dark)}
.ui-page-preview-thumb:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
/* State=Screenshot (sheet 497:25107, PRD-208 S6): the capture fills the slot
   1px inside its border, radius 7 (node 497:25122), top of the page first.
   A thumbnail's image fills it inside the stroke; the button clips it to
   its inner corner. */
.ui-page-preview-shot-image{padding:1px}
.ui-page-preview-img{display:block;flex:1 1 0;width:100%;min-height:0;object-fit:cover;object-position:top;border-radius:calc(var(--radius-ui) - 1px)}
.ui-page-preview-thumb{overflow:hidden}
.ui-page-preview-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* Exactly one pane shows: the hovered thumbnail's, else the focused one's,
   else the first. Hover wins over focus, so a keyboard focus left on one
   thumbnail never shows a second pane beside the hovered one. */
.ui-page-preview:has(.ui-page-preview-thumb:hover) .ui-page-preview-pane,
.ui-page-preview:has(.ui-page-preview-thumb:focus-visible) .ui-page-preview-pane{display:none}
.ui-page-preview:has(.ui-page-preview-thumb:hover) .ui-page-preview-thumb:first-child,
.ui-page-preview:has(.ui-page-preview-thumb:focus-visible) .ui-page-preview-thumb:first-child{border:1px solid var(--color-border)}
.ui-page-preview:has(.ui-page-preview-thumb:hover) .ui-page-preview-thumb:hover,
.ui-page-preview:not(:has(.ui-page-preview-thumb:hover)) .ui-page-preview-thumb:focus-visible{border:2px solid var(--color-primary-dark)}
.ui-page-preview:has(.ui-page-preview-thumb:nth-child(1):hover) .ui-page-preview-pane:nth-child(1),
.ui-page-preview:has(.ui-page-preview-thumb:nth-child(2):hover) .ui-page-preview-pane:nth-child(2),
.ui-page-preview:has(.ui-page-preview-thumb:nth-child(3):hover) .ui-page-preview-pane:nth-child(3),
.ui-page-preview:has(.ui-page-preview-thumb:nth-child(4):hover) .ui-page-preview-pane:nth-child(4),
.ui-page-preview:has(.ui-page-preview-thumb:nth-child(5):hover) .ui-page-preview-pane:nth-child(5),
.ui-page-preview:not(:has(.ui-page-preview-thumb:hover)):has(.ui-page-preview-thumb:nth-child(1):focus-visible) .ui-page-preview-pane:nth-child(1),
.ui-page-preview:not(:has(.ui-page-preview-thumb:hover)):has(.ui-page-preview-thumb:nth-child(2):focus-visible) .ui-page-preview-pane:nth-child(2),
.ui-page-preview:not(:has(.ui-page-preview-thumb:hover)):has(.ui-page-preview-thumb:nth-child(3):focus-visible) .ui-page-preview-pane:nth-child(3),
.ui-page-preview:not(:has(.ui-page-preview-thumb:hover)):has(.ui-page-preview-thumb:nth-child(4):focus-visible) .ui-page-preview-pane:nth-child(4),
.ui-page-preview:not(:has(.ui-page-preview-thumb:hover)):has(.ui-page-preview-thumb:nth-child(5):focus-visible) .ui-page-preview-pane:nth-child(5){display:flex}

@media (max-width:719.98px){
  .ui-page-preview{width:100%}
  /* A long summary wraps under the title rather than running off the box. */
  .ui-section-box-summary{white-space:normal}
}

/* ---- Detail row (node 134:1276) ----
   Inside a `.detail` list (the drawers, the cards that held the old `.r`
   rows) the row keeps the list's 16px sides and drops the last rule. */
.ui-detail-row{display:flex;align-items:flex-start;gap:var(--space-4);padding:10px 0;border-bottom:1px solid var(--color-border-subtle)}
.ui-detail-name{flex:none;width:128px;font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);line-height:20px;color:var(--color-muted)}
.ui-detail-value{flex:1 1 0;min-width:0;font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-text);overflow-wrap:anywhere}
/* A mono value (an ID, a URL) wraps too: `.mono` is nowrap app-wide, and a
   long run id pushed the drawer sideways. */
.ui-detail-value.mono{white-space:normal}
.detail>.ui-detail-row{padding:10px var(--space-4)}
.detail>.ui-detail-row:last-child{border-bottom:none}

/* ---- Evidence row (node 122:1744) ---- */
.ui-evidence-row{position:relative;display:flex;align-items:center;gap:var(--space-5);box-sizing:border-box;width:100%;min-height:56px;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;text-decoration:none}
.ui-evidence-row:hover{background:var(--color-surface);text-decoration:none}
/* The page column shrinks before the value falls under a third of the row, so a
   title stays readable between 720px and a wide desktop (the Table row rule). */
.ui-evidence-page{flex:0 1 300px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-muted)}
.ui-evidence-value{flex:1 1 0;min-width:33%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text)}
.ui-evidence-past{color:var(--status-danger-fg)}
.ui-evidence-length{flex:none;width:72px;text-align:right;color:var(--color-body)}
.ui-evidence-over{flex:none;width:88px;text-align:right;font-weight:var(--fw-medium);color:var(--status-danger-fg)}
/* The Evidence rows' column head (Figma 122:1899): the row's four cells at their widths, 36px, Medium 12 muted. */
.ui-evidence-head,.ui-evidence-head:hover{min-height:36px;background:var(--color-bg);border-top:1px solid var(--color-border-subtle)}
.ui-evidence-head>span{font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px;color:var(--color-muted)}

/* ---- Filter button (node 134:1275) ---- */
.ui-filter{position:relative;display:inline-flex}
.ui-filter>summary{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:var(--size-control-small);padding:0 10px 0 12px;border:1px solid var(--color-control-border);border-radius:var(--radius-ui);background:var(--color-bg);font-size:var(--font-size-sm-minus);line-height:18px;white-space:nowrap;list-style:none;cursor:pointer;user-select:none}
.ui-filter>summary::-webkit-details-marker{display:none}
.ui-filter>summary:hover{background:var(--color-surface-grey)}
.ui-filter-set>summary{border-color:var(--color-primary);background:var(--color-primary-bg)}
.ui-filter-set>summary:hover{background:var(--color-primary-bg)}
.ui-filter-key{font-weight:var(--fw-regular);color:var(--color-muted)}
.ui-filter-value{font-weight:var(--fw-medium);color:var(--color-text)}
.ui-filter>summary .ic{width:14px;height:14px;flex:none;stroke:var(--color-muted);fill:none;stroke-width:1.67;stroke-linecap:round;stroke-linejoin:round}
.ui-filter>summary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ui-filter>.ui-menu{position:absolute;z-index:30;top:calc(100% + 6px);right:0}
.ui-filter>.ui-menu.above{top:auto;bottom:calc(100% + 6px)}
.ui-filter>.ui-menu.start{right:auto;left:0}

/* ---- Empty box (node 116:207) ---- */
.ui-empty-box{display:flex;flex-direction:column;align-items:center;gap:6px;box-sizing:border-box;width:100%;padding:var(--space-7) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);text-align:center}
.ui-empty-box>.ic{width:40px;height:40px;margin-bottom:14px;stroke:var(--color-faint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ui-empty-box-title{margin:0;font-size:var(--font-size-base);font-weight:var(--fw-medium);line-height:24px;color:var(--color-text)}
.ui-empty-box-line{margin:0;max-width:60ch;font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-muted)}
.ui-empty-box-action{margin-top:22px}

/* ---- Tooltip (node 127:1910) ----
   Shows while the pointer is over the anchor (the bubble included, so a
   pointer can move onto it) or focus is inside it, with no script at all.
   tooltip_controller adds Escape: `.ui-tooltip-dismissed` hides it until the
   pointer leaves or focus moves on (WCAG 1.4.13). A hidden bubble is
   `display:none`, not `visibility:hidden`: a hidden box still counts toward
   the page's scroll width, so a long bubble near the right edge made a 400px
   phone scroll sideways (PRD-232 S6, found on the chart). */
.ui-tooltip-anchor{position:relative;display:inline-flex}
.ui-tooltip{position:absolute;z-index:40;box-sizing:border-box;padding:6px 10px;border-radius:var(--radius-sm);background:var(--color-text);color:var(--overlay-fg);font-size:var(--font-size-sm-minus);font-weight:var(--fw-medium);line-height:18px;width:max-content;max-width:min(320px, calc(100vw - 2 * var(--space-4)));white-space:normal;display:none}
.ui-tooltip::before{content:"";position:absolute;inset:-6px}
.ui-tooltip-top{bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.ui-tooltip-bottom{top:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.ui-tooltip-right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.ui-tooltip-left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.ui-tooltip-anchor:hover>.ui-tooltip,.ui-tooltip-anchor:focus-within>.ui-tooltip{display:block}
.ui-tooltip-anchor.ui-tooltip-dismissed>.ui-tooltip{display:none}

/* ---- Undo message (node 127:1914) ----
   Bottom centre of the CONTENT column (the rail's half-width over), as the
   bulk bar is; on a phone, of the screen. planning-2.css lifts it above the
   planning board's sticky bar. */
.ui-undo{position:fixed;z-index:60;left:calc(50% + var(--sidebar-width, 0px) / 2);bottom:calc(var(--space-5) + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-4);box-sizing:border-box;width:max-content;max-width:calc(100vw - var(--sidebar-width, 0px) - 2 * var(--space-4));padding:var(--space-2) var(--space-2) var(--space-2) 20px;border-radius:var(--radius-ui);background:var(--color-text);box-shadow:0 8px 24px var(--overlay-shadow)}
.ui-undo[hidden]{display:none}
.ui-undo-text{min-width:0;font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--overlay-fg)}
.ui-undo .ui-button-form{display:contents}
.ui-undo-button{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;min-width:60px;height:var(--size-control-small);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:var(--overlay-control);color:var(--color-primary-light);font:var(--fw-semibold) var(--font-size-sm)/20px var(--font-sans);cursor:pointer}
.ui-undo-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-text),0 0 0 4px var(--color-primary-light)}

@media (max-width:719.98px){
  /* In a `.detail` list the name sits above the value on a phone, as the
     list's hand-written `.r` rows do (phone-overrides-2.css). */
  .detail>.ui-detail-row{flex-direction:column;gap:var(--space-1)}
  .detail>.ui-detail-row>.ui-detail-name{width:auto}
  .detail>.ui-detail-row>.ui-detail-value{width:100%}

  .ui-undo{left:50%;max-width:calc(100vw - 2 * var(--space-4))}

  .ui-check-row{align-items:center;padding:12px 4px 12px 20px}
  .ui-check-row-check{flex-direction:column;align-items:flex-start;gap:6px}
  .ui-check-row-name{white-space:normal}
  .ui-check-row-count{width:48px;flex-direction:column;align-items:flex-end;gap:0}

  .ui-table-head{display:none}
  .ui-table-row{flex-wrap:wrap;column-gap:var(--space-3);row-gap:var(--space-1);height:auto;min-height:56px;padding:12px 44px 12px var(--space-4);position:relative}
  .ui-table-cell{width:auto;padding-right:0}
  .ui-table-cell-main{flex:1 0 100%;order:-1;white-space:normal}
  .ui-table-row .ui-row-open{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
  .ui-table-row-link{flex-wrap:wrap;column-gap:var(--space-3);row-gap:var(--space-1)}
  a.ui-table-row[aria-current="true"]{padding-left:calc(var(--space-4) - 3px)}

  .ui-evidence-head{display:none}
  .ui-evidence-row{flex-wrap:wrap;column-gap:var(--space-3);row-gap:var(--space-1);padding:12px var(--space-4)}
  .ui-evidence-page{flex:1 0 100%;width:100%}
  .ui-evidence-value{flex:1 0 100%;white-space:normal}
  .ui-evidence-length{width:auto;margin-left:auto}
  .ui-evidence-over{width:auto}

  .ui-facts{flex-wrap:wrap;row-gap:var(--space-4)}
  .ui-fact{flex:1 0 calc(50% - var(--space-5))}

  .ui-section-box-head{flex-wrap:wrap}
  .ui-section-box-cols>span+span{width:48px}
  .ui-section-box-cols::after{width:44px}
}

/* ---- Stage bar (node 148:2380) and Step (node 148:2379), PRD-234 D1 ----
   The steps of a staged flow in one white box, each an equal share of the
   row and never narrower than its words. A step is ONE link: a 22px mark, the
   label over one state word. The mark carries the state as a shape (tick,
   number, dot, "!") and the word says it, so colour is never alone (D11).
   The current step takes the grey ground, a Medium label and the 2px
   underline. Where nine steps do not fit, the BOX scrolls sideways, never the
   page: it is `position:relative` so no .sr-only span inside it can push the
   page (the views skill), and its scrollbar is hidden like the Tabs'. */
.ui-stage-bar{position:relative;box-sizing:border-box;min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);overflow-x:auto;scrollbar-width:none}
.ui-stage-bar::-webkit-scrollbar{display:none}
.ui-stage-bar-steps{display:flex;margin:0;padding:0;list-style:none}
.ui-stage-bar-steps>li{flex:1 0 0;min-width:max-content}
.ui-step{position:relative;display:flex;align-items:center;gap:10px;box-sizing:border-box;height:54px;padding:0 var(--space-2) 0 var(--space-3);color:var(--color-text);text-decoration:none;white-space:nowrap}
.ui-step:hover{background:var(--color-surface);color:var(--color-text);text-decoration:none}
span.ui-step:hover{background:none}
.ui-step:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus)}
.ui-step-current{background:var(--color-surface)}
.ui-step-current::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--status-primary-fg)}
.ui-step-mark{flex:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:22px;height:22px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:16px}
.ui-step-done .ui-step-mark{background:var(--status-success-fg);color:var(--color-bg)}
.ui-step-needs-you .ui-step-mark,.ui-step-out-of-date .ui-step-mark{border:1.5px solid var(--status-warning-fg);background:var(--color-warning-bg);color:var(--status-warning-fg)}
.ui-step-running .ui-step-mark{border:1.5px solid var(--status-info-fg);background:var(--color-info-bg)}
.ui-step-running .ui-step-mark::after{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--status-info-fg)}
.ui-step-not-started .ui-step-mark{border:1.5px solid var(--color-border);background:var(--color-bg);color:var(--color-muted)}
.ui-step-tick{display:block;width:12px;height:12px}
.ui-step-text{display:flex;flex-direction:column;min-width:0}
.ui-step-label{font-size:var(--font-size-sm);font-weight:var(--fw-regular);line-height:20px;color:var(--color-text)}
.ui-step-current .ui-step-label{font-weight:var(--fw-medium)}
.ui-step-state{font-size:var(--font-size-xs);line-height:16px;color:var(--color-muted)}
.ui-step-needs-you .ui-step-state,.ui-step-out-of-date .ui-step-state{color:var(--status-warning-fg)}
.ui-step-running .ui-step-state{color:var(--status-info-fg)}

/* The reason dialog (PRD-237 D13; Ui::ReasonDialogComponent). The box is
   `revise-dialog`'s (row 271). The wrapper draws nothing of its own, so the
   trigger sits in its row like any other button. With JavaScript off the
   dialog renders `open` but not modal: it then sits in the flow on its own
   line under the buttons rather than floating over them. */
.ui-reason{display:contents}
dialog.ui-reason-dialog[open]:not(:modal){position:static;flex-basis:100%;margin:var(--space-2) 0 0}
.ui-reason-form .ui-field{max-width:none;margin-bottom:var(--space-3)}
.ui-reason-box{width:100%;height:auto;min-height:88px;padding:var(--space-2) var(--space-3);resize:vertical}
/* The optional parts (PRD-235 D7; sheet 343:12709): a faint 12px note under
   a field, and a second field whose box holds the caller's results Menu at
   the field's width. */
.ui-reason-form .ui-select{display:flex;max-width:none}
.ui-reason-form .ui-select select,.ui-reason-form .ui-reason-second .ui-input{width:100%}
p.ui-reason-note{margin:0 0 var(--space-3);font-size:var(--font-size-xs);line-height:16px}
.ui-reason-second{position:relative}

/* ---- Deciding box (PRD-237 D3; Ui::DecidingBoxComponent; Themes 216:5753) ----
   A Section box: the counter and the three Small buttons in its header, then
   two columns. The main column is white with the item's name and words; the
   facts column is 360px on --color-surface, a muted 100px label beside each
   value. The wrapper is the keyboard layer's focus target (row 238), so it
   takes the app's focus ring. Below 720px the facts stack under the main
   column and the buttons wrap under the counter. */
.ui-deciding{border-radius:var(--radius-ui)}
.ui-deciding:focus{outline:none}
.ui-deciding:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ui-deciding-undo[hidden]{display:none}
.ui-deciding-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
/* A reject that asks for its reason (Ui::ReasonDialogComponent) opens in place with
   JavaScript off: the header wraps, the buttons keep their row at the right and the
   dialog sits on its own line under them, at the right, never wider than the box. */
.ui-section-box-head:has(.ui-deciding-actions dialog[open]:not(:modal)){flex-wrap:wrap}
.ui-section-box-action:has(.ui-deciding-actions dialog[open]:not(:modal)){flex:1 1 100%;min-width:0}
.ui-deciding-actions:has(dialog[open]:not(:modal)){justify-content:flex-end;width:100%;min-width:0}
.ui-deciding-actions>.ui-reason>dialog[open]:not(:modal){order:1;flex:0 1 520px;min-width:0;margin:0 0 0 max(0px,calc(100% - 520px));max-width:100%;box-sizing:border-box}
.ui-deciding-body{display:flex;align-items:stretch}
.ui-deciding-main{display:flex;flex-direction:column;gap:var(--space-4);flex:1 1 0;min-width:0;box-sizing:border-box;padding:20px}
.ui-deciding-name{margin:0;font-size:var(--font-size-lg);font-weight:var(--fw-medium);line-height:24px;color:var(--color-text)}
.ui-deciding-tags{display:flex;flex-wrap:wrap;gap:6px}
.ui-deciding-para{display:flex;flex-direction:column;gap:var(--space-1)}
.ui-deciding-para-label{margin:0;font-size:var(--font-size-xs);font-weight:var(--fw-medium);line-height:20px;color:var(--color-muted)}
.ui-deciding-para-text{font-size:var(--font-size-sm);line-height:20px;color:var(--color-text)}
.ui-deciding-para-text>p{margin:0}
.ui-deciding-para-text>p+p{margin-top:var(--space-2)}
.ui-deciding-facts{flex:none;width:360px;box-sizing:border-box;margin:0;padding:var(--space-4) 20px;background:var(--color-surface)}
.ui-deciding-fact{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-2);min-height:36px;font-size:var(--font-size-sm-minus);line-height:18px}
.ui-deciding-fact>dt{flex:none;align-self:flex-start;width:100px;padding:9px 0;color:var(--color-muted)}
.ui-deciding-fact>dd{flex:1 1 0;min-width:0;margin:0;padding:9px 0;color:var(--color-text);overflow-wrap:anywhere}
.ui-deciding-fact>dd>.mono{display:block;overflow:hidden;text-overflow:ellipsis}
.ui-deciding-fact>dd:has(.ui-tag){display:flex;flex-wrap:wrap;gap:6px;padding:7px 0}
.ui-deciding-fact>dd:has(.ui-switch){display:flex;padding:var(--space-2) 0}
.ui-deciding-fact>.ui-deciding-fact-note{flex:1 0 100%;padding:0 0 var(--space-2);color:var(--color-muted)}

@media (max-width:719.98px){
  .ui-section-box-action:has(.ui-deciding-actions){flex:1 1 100%}
  .ui-deciding-actions{width:100%}
  .ui-deciding-actions .ui-button:not(dialog *){flex:1 1 0;min-width:max-content}
  .ui-deciding-body{flex-direction:column}
  .ui-deciding-main{padding:var(--space-4)}
  .ui-deciding-facts{width:auto;padding:var(--space-2) var(--space-4) var(--space-4)}
}

/* ---- Notice (node 428:19967) ----
   One sentence the page must say before its figures: a pale info wash, no
   border, no icon. A link inside it keeps the notice's colour and is told
   apart by its underline, never by colour alone. */
.ui-notice{box-sizing:border-box;max-width:720px;margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-ui);background:var(--color-info-bg);color:var(--status-info-fg);font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px}
.ui-notice-warning{background:var(--color-warning-bg);color:var(--status-warning-fg)}
.ui-notice a{color:inherit;white-space:nowrap;font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:2px;border-radius:2px}
.ui-notice a:hover{color:inherit;text-decoration-thickness:2px}
.ui-notice a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}