/* ==========================================================================
   table-cards.css — one phone/tablet treatment for every table row
   ==========================================================================
   Plan:     docs/features/2026-09-13-table-cards-plan.md
   Design:   docs/features/2026-09-13-table-cards-design.html (literal values copied from it)
   Contract: .claude/rules/table-cards.md (every attribute below, and the traps)

   A table opts in with data-rc on the <table>:
     card     record card (+ select, group rows, details rows)
     compact  one line per record
     editor   rows of form fields
     grid     stays a table; first column pinned, the rest scrolls
   Cells carry roles (td[data-rc="title|pill|pill2|fact|actions|select|decor|value|detail|field"]).
   These rules re-lay out the EXISTING <tr>/<td>. Nothing is duplicated, so every script that
   reads rows keeps working.

   ⛔ WHEN IT APPLIES. Everything that changes layout sits in ONE block:
        @media (max-width: 900px), (any-pointer: coarse)
      and every selector in it starts with
        :is(html:not(.rc-wide), [data-rc-touch])
      html.rc-wide is set before first paint by an inline script in each layout whenever the
      viewport is 901px or wider. So:
        ≤900px, any pointer ............ every data-rc table is a card
        ≥901px, mouse .................. media query fails: desktop tables, unchanged
        ≥901px, touch screen ........... only tables inside [data-rc-touch] (the four on-site
                                         capture tables, plan D1) are cards
      Put data-rc-touch on a WRAPPER of the table, never on the table itself.
   ⛔ At 901px and wider with a mouse the only effects of this file are the desktop-safe rules
      at the top (hide the phone-only affordances; flatten the ⋯ panel wrapper).
   ⛔ Loaded after every page stylesheet in all four layouts and precached by the service
      worker. No dark-mode rules: dark mode is out of scope.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Desktop-safe rules (every width)
   --------------------------------------------------------------------------- */
[data-rc-more],
[data-rc-mobile],
[data-rc-gridcue] {
  display: none !important;
}

[data-rc-menu] {
  display: contents;
}

table[data-rc],
[data-rc-bulkbar],
[data-rc-gridframe],
[data-rc-add],
[data-rc-edbar] {
  --rc-bg: var(--canvas);
  --rc-card: #ffffff;
  --rc-hover: var(--surface-subtle);
  --rc-inset: var(--surface-inset);
  --rc-rule: color-mix(in srgb, var(--ink) 8%, transparent);
  --rc-rule-h: color-mix(in srgb, var(--ink) 16%, transparent);
  --rc-ink: var(--ink);
  --rc-ink-2: var(--ink-2);
  --rc-ink-3: var(--ink-3);
  --rc-ink-4: var(--ink-4);
  --rc-muted: color-mix(in srgb, var(--canvas) 5%, var(--ink-3));
  --rc-accent: #c49510;
  --rc-accent-ink: #7a5c05;
  --rc-accent-bg: rgba(196, 149, 16, 0.1);
  --rc-green: #1e7a45;
  --rc-green-bg: rgba(30, 122, 69, 0.09);
  --rc-red: #b03030;
  --rc-red-bg: rgba(176, 48, 48, 0.08);
  --rc-blue: #2563a8;
  --rc-blue-bg: rgba(37, 99, 168, 0.09);
  --rc-shadow-card: 0 1px 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent);
  --rc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E");
}

@media (max-width: 900px), (any-pointer: coarse) {

  /* =========================================================================
     Shared
     ========================================================================= */

  /* A wrapper that is a card or a sideways scroller around a card list stops being one. */
  :is(html:not(.rc-wide), [data-rc-touch]) :is(.ipi-table-wrap, .cp-table-wrap, .fss-table-wrap, .dbp-table-wrap,
      .table-wrapper, .table-responsive, .table-wrap, .reg-table-wrap, .ris-table-wrap, .fssd-reg-table-wrap,
      .ipfd-table-wrap, .help-support-table-wrap, .security-table-wrap, [data-rc-wrap]):has(> table:is([data-rc="card"], [data-rc="compact"], [data-rc="editor"])) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The shells give every .ipi-table min-width: 780px at ≤900 (trap T1). Opt out, never delete. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc]:not([data-rc="grid"]) {
    min-width: 0 !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-mobile] {
    display: revert !important;
  }

  /* .dbp-table-label: the dashboards' old phone labels, pinned by DashboardViewHttpTest (the
     card's labels come from data-rc-label). */
  :is(html:not(.rc-wide), [data-rc-touch]) :is(table[data-rc] [data-rc-hide], table[data-rc] .ipi-mobile-cell-label, table[data-rc] .dbp-table-label) {
    display: none !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table:is([data-rc="card"], [data-rc="compact"], [data-rc="editor"]) > thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table:is([data-rc="card"], [data-rc="compact"], [data-rc="editor"]) > caption {
    display: block;
    text-align: left;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table:is([data-rc="card"], [data-rc="compact"], [data-rc="editor"]) > tbody > tr > :is(td, th)::before,
  :is(html:not(.rc-wide), [data-rc-touch]) table:is([data-rc="card"], [data-rc="compact"], [data-rc="editor"]) > tbody > tr > :is(td, th)::after {
    content: none;
  }

  /* =========================================================================
     RECORD CARD
     ========================================================================= */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* The shells give .ipi-table overflow: hidden, which cut off the last card's ⋯ panel. */
    overflow: visible !important;
    border: 0;
    border-collapse: separate;
    background: transparent;
    box-shadow: none;
    container-type: inline-size;
    font-variant-numeric: tabular-nums;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 12px 14px 14px;
    background: var(--rc-card);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--rc-shadow-card);
    cursor: default;
    text-align: left;
    opacity: 1;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:hover {
    background: var(--rc-card);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-tap] {
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-tap]:hover {
    box-shadow: 0 0 0 1px var(--rc-rule-h), var(--rc-shadow-card);
  }

  /* Facts row 2 starts its own flex line. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:not([data-rc-group]):not([data-rc-message]):not([data-rc-details])::before {
    content: "";
    order: 50;
    flex: 0 0 100%;
    height: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th) {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    white-space: normal;
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rc-ink-2);
    position: static;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc="decor"] {
    display: none !important;
  }

  /* ---------- header: name + one pill on the first line, subtitle full width ---------- */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="title"],
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc="title"] [data-rc-flat] {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc-name] {
    order: 10;
    flex: 1 1 0;
    /* 1px, not 0: with no pill (D5) a zero-basis name and the 100%-basis subtitle fit on ONE
       flex line and the name is squeezed to nothing. 1px forces the subtitle onto its own line. */
    min-width: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none;
    color: var(--rc-ink) !important;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc-name][data-rc-noclamp] {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] a[data-rc-name]:hover,
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] a:hover > [data-rc-name] {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] a:focus-visible > [data-rc-name],
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc-flat]:focus-visible > [data-rc-name] {
    outline: 2px solid var(--rc-accent);
    outline-offset: 2px;
    border-radius: 3px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="pill"] {
    order: 11;
    flex: none;
    margin-left: 10px;
    padding-top: 1px;
    white-space: nowrap;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="pill2"] {
    order: 12;
    flex: none;
    padding-top: 1px;
    white-space: nowrap;
  }

  /* A chip that lives INSIDE the title cell (the row has no status column of its own, e.g. the
     activity emails "Failed" chip) takes the pill slot itself: same order, offset and chip shape
     as a pill cell's child. Its colours stay the app chip class's. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="title"] > [data-rc="pill"],
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc-flat] [data-rc="pill"] {
    order: 11;
    flex: none;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    min-height: 0;
    margin: 1px 0 0 10px;
    padding: 3px 9px !important;
    border: 0;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none;
    white-space: nowrap;
  }

  /* The pill is the design's chip: 12px/500, pill-shaped. Colours come from the app's own chip
     classes unless the row carries data-rc-tone (merged pills, D6). */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > :not(.ipi-mobile-cell-label):not([data-rc-hide]):not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    min-height: 0;
    margin: 0;
    padding: 3px 9px !important;
    border: 0;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none;
    white-space: nowrap;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > * > :is([class*="dot"], i) {
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: currentColor;
  }

  /* The join has to be !important: the chip rule above sets padding and radius !important. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:has(> :is(td, th)[data-rc="pill2"] > :not([hidden])) > :is(td, th)[data-rc="pill"] > :not(.ipi-mobile-cell-label):not([data-rc-hide]) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-right: 4px !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="pill2"] > :not(.ipi-mobile-cell-label):not([data-rc-hide]):not([hidden]) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 0 !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="pill2"] > :not(.ipi-mobile-cell-label):not([data-rc-hide])::before {
    content: "·";
    margin-right: 4px;
  }

  /* The joined half has no dot, so its flex gap would widen "Fail · High" to "Fail ·  High". */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="pill2"] > :not(.ipi-mobile-cell-label):not([data-rc-hide]):not([hidden]) {
    gap: 0 !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="pill2"] > * > :is([class*="dot"], i) {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr[data-rc-tone="bad"] > :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > * {
    background: var(--rc-red-bg);
    color: var(--rc-red);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr[data-rc-tone="warn"] > :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > * {
    background: var(--rc-accent-bg);
    color: var(--rc-accent-ink);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr[data-rc-tone="done"] > :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > * {
    background: var(--rc-green-bg);
    color: var(--rc-green);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr[data-rc-tone="info"] > :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > * {
    background: var(--rc-blue-bg);
    color: var(--rc-blue);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:is([data-rc-tone="draft"], [data-rc-tone="neutral"]) > :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > * {
    background: var(--rc-inset);
    color: var(--rc-ink-2);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr[data-rc-tone="neutral"] > :is(td, th):is([data-rc="pill"], [data-rc="pill2"]) > * > :is([class*="dot"], i) {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc-sub] {
    order: 13;
    flex: 0 0 100%;
    box-sizing: border-box;
    min-width: 0;
    margin: 2px 0 0;
    padding: 0;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
    text-transform: none;
    color: var(--rc-ink-4) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc-sub] :is(span, small, time, em, strong, b) {
    display: inline;
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    /* A chip or badge inside the subtitle reads as plain subtitle text (e.g. My Jobs installs). */
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* D15: hover-only information shown as a visible note. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc-flag] {
    order: 14;
    flex: 0 0 100%;
    display: block;
    margin: 4px 0 0;
    padding: 0;
    /* The flag is often an existing badge (Properties "Inspection due"): drop its chip chrome. */
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rc-red);
  }

  /* The header always ends its own line. Without a subtitle (it is optional on several tables) the
     facts would otherwise flow up beside the name. A display:contents cell still generates its
     pseudo-elements, so the title cell's ::after is the line break. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:not([data-rc-group]):not([data-rc-message]):not([data-rc-details]) > :is(td, th)[data-rc="title"]::after {
    content: "";
    display: block;
    order: 15;
    flex: 0 0 100%;
    height: 0;
  }

  /* A cell split into several slots (Team "Access", Quotes "Status"): the cell and its wrappers
     take data-rc-flat and flatten, and each part carries its own role. When one of those parts is
     the status chip itself, it is the pill. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc-flat],
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc-flat] [data-rc-flat] {
    display: contents;
  }

  
  /* A tappable card with no footer shows a 16px chevron at the end of its first line (D3). */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-tap]:not(:has(> :is(td, th)[data-rc="actions"] :is([data-rc-action="primary"], [data-rc-action="secondary"], [data-rc-more])))::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 16px;
    width: 16px;
    height: 16px;
    background: var(--rc-ink-4);
    -webkit-mask: var(--rc-chevron) center / 16px 16px no-repeat;
    mask: var(--rc-chevron) center / 16px 16px no-repeat;
    pointer-events: none;
  }

  /* The chevron clears the LAST chip on screen: pill2 when the row has one (it may come before
     the pill in the DOM, e.g. a Severity column ahead of Status), otherwise the pill. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-tap]:not(:has(> :is(td, th)[data-rc="actions"] :is([data-rc-action="primary"], [data-rc-action="secondary"], [data-rc-more]))):has(> :is(td, th)[data-rc="pill2"]) > :is(td, th)[data-rc="pill2"],
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-tap]:not(:has(> :is(td, th)[data-rc="actions"] :is([data-rc-action="primary"], [data-rc-action="secondary"], [data-rc-more]))):not(:has(> :is(td, th)[data-rc="pill2"])) > :is(td, th)[data-rc="pill"],
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-tap]:not(:has(> :is(td, th)[data-rc="actions"] :is([data-rc-action="primary"], [data-rc-action="secondary"], [data-rc-more]))):not(:has(> :is(td, th)[data-rc="pill"])) [data-rc-name] {
    margin-right: 30px;
  }

  /* D3: the row's only action repeats the card tap (e.g. Help "View thread", marked
     data-rc-alias). The card has no footer, but the control is not display:none: it stays in
     the DOM, focusable and announced, so keyboard and screen-reader users can still open the
     record, and the card shows a focus ring while it has focus. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has([data-rc-alias]):not(:has([data-rc-action="primary"], [data-rc-action="secondary"], [data-rc-more])) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:has([data-rc-alias]:focus-visible) {
    box-shadow: 0 0 0 2px var(--rc-accent), var(--rc-shadow-card);
  }

  /* ---------- bulk select: 44px hit area, 20px box drawn in CSS ---------- */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"] {
    order: 5;
    position: relative;
    flex: 0 0 30px;
    height: 22px;
    margin-right: 10px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"] :is(label, span, div):not([data-rc-keep]) {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"] input[type="checkbox"] {
    position: absolute;
    left: -12px;
    top: -11px;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin: 0;
    min-width: 44px;
    max-width: none;
    opacity: 0;
    cursor: pointer;
    appearance: auto;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1.5px solid color-mix(in srgb, var(--canvas) 31%, var(--ink-4));
    background: var(--rc-card);
    pointer-events: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"]::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 7.5px;
    top: 6px;
    width: 5px;
    height: 10px;
    box-sizing: content-box;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translate(-1px, -1px) rotate(45deg);
    opacity: 0;
    pointer-events: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"]:has(input:checked)::after {
    background: var(--rc-ink);
    border-color: var(--rc-ink);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"]:has(input:checked)::before {
    opacity: 1;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"]:has(input:focus-visible)::after {
    outline: 2px solid var(--rc-accent);
    outline-offset: 2px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"]:has(input:disabled)::after {
    background: var(--rc-inset);
    border-color: color-mix(in srgb, var(--surface-subtle) 68%, var(--ink-4));
  }

  /* A row that cannot be selected yet (an offline capture with no server id) keeps its
     select cell but has no checkbox: draw no box, so its own placeholder shows instead. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="select"]:not(:has(input[type="checkbox"]))::after {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:has(> :is(td, th)[data-rc="select"]:not([hidden])) [data-rc-sub] {
    margin-left: 40px;
    flex-basis: calc(100% - 40px);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:has(> :is(td, th)[data-rc="select"] input:checked) {
    background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)), var(--rc-card);
    box-shadow: 0 0 0 2px var(--rc-ink), var(--rc-shadow-card);
  }

  /* ---------- facts strip ---------- */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] {
    --rc-grow: 1;
    order: 20;
    /* x10: a lone narrow fact (grow 0.9) would otherwise take only 90% of the line. */
    flex: calc(var(--rc-grow) * 10) 1 0;
    align-self: stretch;
    display: block;
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 10px 0 0;
    padding: 7px 9px 8px;
    border: 0;
    border-radius: 0;
    background: var(--rc-hover);
    box-shadow: inset 1px 0 0 var(--rc-rule);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--rc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-variant-numeric: tabular-nums;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"]::before {
    content: attr(data-rc-label);
    display: block;
    margin: 0 0 2px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--rc-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-kind="n"] { --rc-grow: 0.9; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-kind="m"] { --rc-grow: 1.3; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-kind="t"] { --rc-grow: 2; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="1.8"] { --rc-grow: 1.8; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="2.2"] { --rc-grow: 2.2; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="2.6"] { --rc-grow: 2.6; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="2.7"] { --rc-grow: 2.7; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="2.9"] { --rc-grow: 2.9; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="3.1"] { --rc-grow: 3.1; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="3.3"] { --rc-grow: 3.3; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="3.5"] { --rc-grow: 3.5; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="3.8"] { --rc-grow: 3.8; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="3.9"] { --rc-grow: 3.9; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="4"] { --rc-grow: 4; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="4.2"] { --rc-grow: 4.2; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="4.6"] { --rc-grow: 4.6; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="4.9"] { --rc-grow: 4.9; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="5.3"] { --rc-grow: 5.3; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-grow="6"] { --rc-grow: 6; }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-kind="t"] {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--rc-ink-2);
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Text facts stop at 2 lines, as the design's .rc-fact--t .rc-val. The
     label is a block ::before and is not counted by the clamp, so the clamp is 2. A fact with a
     second-line note keeps its own clamps. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-kind="t"]:not(:has([data-rc-note])) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* overflow: hidden clips at the PADDING edge, so a third line would show in the 8px bottom
       padding. Move that space into a border in the strip's own colour. */
    padding-bottom: 0;
    border-bottom: 8px solid var(--rc-hover);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-tone="bad"] { color: var(--rc-red); }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-tone="warn"] { color: var(--rc-accent-ink); }

  /* First fact of each row has no divider; corners of the strip are rounded 8px. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"]:not([data-rc-row="2"]):not([data-rc="fact"]:not([data-rc-row="2"]) ~ [data-rc="fact"]),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-first]:not([data-rc-row="2"]) {
    box-shadow: none;
    border-top-left-radius: 8px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"]:not([data-rc-row="2"]):not(:has(~ [data-rc="fact"]:not([data-rc-row="2"]))),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-last]:not([data-rc-row="2"]) {
    border-top-right-radius: 8px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:not(:has([data-rc="fact"][data-rc-row="2"])) [data-rc="fact"]:not([data-rc="fact"] ~ [data-rc="fact"]),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:not(:has([data-rc="fact"][data-rc-row="2"])) [data-rc="fact"][data-rc-first] {
    border-bottom-left-radius: 8px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:not(:has([data-rc="fact"][data-rc-row="2"])) [data-rc="fact"]:not(:has(~ [data-rc="fact"])),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:not(:has([data-rc="fact"][data-rc-row="2"])) [data-rc="fact"][data-rc-last] {
    border-bottom-right-radius: 8px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-row="2"] {
    order: 60;
    margin-top: 0;
    box-shadow: inset 1px 0 0 var(--rc-rule), inset 0 1px 0 var(--rc-rule);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-row="2"]:not([data-rc-row="2"] ~ [data-rc-row="2"]),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-row="2"][data-rc-first] {
    box-shadow: inset 0 1px 0 var(--rc-rule);
    border-bottom-left-radius: 8px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-row="2"]:not(:has(~ [data-rc-row="2"])),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"][data-rc-row="2"][data-rc-last] {
    border-bottom-right-radius: 8px;
  }

  /* Second-row facts from different cells are not siblings, so each looks first AND last to the
     rules above. When a row names its first/last explicitly, the others lose those corners and the
     not-first ones get their divider back (portal remedial tasks: Door cell + Notes in the title). */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:has([data-rc="fact"][data-rc-row="2"][data-rc-first]) [data-rc="fact"][data-rc-row="2"]:not([data-rc-first]) {
    box-shadow: inset 1px 0 0 var(--rc-rule), inset 0 1px 0 var(--rc-rule);
    border-bottom-left-radius: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] tr:has([data-rc="fact"][data-rc-row="2"][data-rc-last]) [data-rc="fact"][data-rc-row="2"]:not([data-rc-last]) {
    border-bottom-right-radius: 0;
  }

  /* Existing desktop markup inside a fact reads as the fact's value. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] :is(div, span, strong, b, small, em, p, time, abbr):not([data-rc-note]):not([data-rc-keep]):not(.ipi-mobile-cell-label):not([data-rc-hide]) {
    display: inline;
    position: static;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
    white-space: inherit;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] [data-rc-note] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--rc-ink-4);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] [data-rc-note] :is(span, strong, b, small, em, time, a) {
    display: inline;
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background: none;
  }

  /* A fact's second line that is a link (Clients "View properties") stays a link, at note size. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] a[href][data-rc-note]:not([data-rc-action]) {
    display: -webkit-box;
    margin: 2px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rc-ink-3);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
    text-underline-offset: 2px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] [data-rc-note][data-rc-tone="bad"] { color: var(--rc-red); }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] [data-rc-note][data-rc-tone="warn"] { color: var(--rc-accent-ink); }

  /* A control inside a fact (e.g. the editable client name) stays a control. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] :is(button, a):not([data-rc-action]) {
    display: inline;
    min-height: 0;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
    text-underline-offset: 2px;
    white-space: inherit;
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] [data-rc="fact"] [data-rc-keep] {
    font-size: 12px;
  }

  /* ---------- footer: primary | secondary | ⋯ ---------- */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"] {
    order: 90;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    position: relative;
    margin-top: 10px;
    padding: 0;
    border: 0;
    white-space: normal;
    text-align: left;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has([data-rc-action="primary"]):has([data-rc-action="secondary"]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has([data-rc-more]) {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has([data-rc-action="primary"]):has([data-rc-action="secondary"]):has([data-rc-more]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has([data-rc-more]):not(:has([data-rc-action="primary"], [data-rc-action="secondary"])) {
    grid-template-columns: 44px;
    justify-content: end;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:not(:has([data-rc-action="primary"], [data-rc-action="secondary"], [data-rc-more])) {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc="actions"] :is([data-rc-flat], form:not([data-rc-action]), .ipi-actions-inner, .table-actions) {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] :is(a, button, summary)[data-rc-action]:not([data-rc-action="overflow"]),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc-flat] > [data-rc="actions"] :is(a, button)[data-rc-action]:not([data-rc-action="overflow"]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--rc-rule-h);
    border-radius: 10px;
    background: var(--rc-card);
    box-shadow: none;
    color: var(--rc-ink);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    opacity: 1;
    transform: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] :is(a, button, summary)[data-rc-action]:not([data-rc-action="overflow"]):hover {
    background: var(--rc-hover);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-action="primary"],
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc-flat] > [data-rc="actions"] [data-rc-action="primary"] {
    order: 1;
    background: var(--rc-ink) !important;
    border-color: var(--rc-ink) !important;
    color: #ffffff !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-action="primary"]:hover,
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc-flat] > [data-rc="actions"] [data-rc-action="primary"]:hover {
    background: color-mix(in srgb, var(--ink) 28%, var(--ink-2)) !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-action="secondary"] {
    order: 2;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] :is(a, button, summary)[data-rc-action] svg {
    flex: none;
    width: 16px;
    height: 16px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-action]:disabled,
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-action]:is([aria-disabled="true"], .is-disabled) {
    opacity: 0.55;
    cursor: default;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] [data-rc-more] {
    order: 3;
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rc-rule-h);
    border-radius: 10px;
    background: var(--rc-card);
    box-shadow: none;
    color: var(--rc-ink-3);
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] [data-rc-more]:is(:hover, [aria-expanded="true"]) {
    background: var(--rc-hover);
    color: var(--rc-ink);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] [data-rc-more] svg {
    width: 18px;
    height: 18px;
  }

  /* A row's EXISTING <details> menu is kept as its ⋯ (plan non-negotiable 3): its <summary> is
     the 44px trigger and its menu stays the page's own (table-actions-menu.js floats it). It
     counts as a ⋯ for the footer columns. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has(details) {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has([data-rc-action="primary"]):has([data-rc-action="secondary"]):has(details) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc="actions"]:has(details):not(:has([data-rc-action="primary"], [data-rc-action="secondary"])) {
    display: grid;
    grid-template-columns: 44px;
    justify-content: end;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details {
    order: 3;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details > summary {
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rc-rule-h);
    border-radius: 10px;
    background: var(--rc-card);
    box-shadow: none;
    color: var(--rc-ink-3);
    font-size: 18px;
    line-height: 1;
    list-style: none;
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details > summary {
    font-size: 0 !important;
    color: var(--rc-ink-3);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details > summary > * {
    display: none !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details > summary::after {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='4' cy='10' r='1.6'/%3E%3Ccircle cx='10' cy='10' r='1.6'/%3E%3Ccircle cx='16' cy='10' r='1.6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='4' cy='10' r='1.6'/%3E%3Ccircle cx='10' cy='10' r='1.6'/%3E%3Ccircle cx='16' cy='10' r='1.6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details > summary::-webkit-details-marker {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details:is([open], :hover) > summary {
    background: var(--rc-hover);
    color: var(--rc-ink);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details:not([data-rc-menu] details) > [role="menu"] {
    box-sizing: border-box;
    min-width: 200px;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--rc-card) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 1px var(--rc-rule-h) !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details [role="menu"] :is(a, button)[role="menuitem"] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details:not([data-rc-menu] details) > [role="menu"] :is(a, button)[role="menuitem"] {
    width: 100%;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: none !important;
    color: var(--rc-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] details:not([data-rc-menu] details) > [role="menu"] :is(a, button)[role="menuitem"]:is(:hover, :focus-visible) {
    background: var(--rc-hover) !important;
  }

  /* The ⋯ panel holds the row's ORIGINAL controls (no copies), restyled as menu items. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"].is-rc-open [data-rc-menu] {
    display: grid;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    box-sizing: border-box;
    min-width: 200px;
    max-width: calc(100vw - 48px);
    padding: 6px;
    background: var(--rc-card);
    border-radius: 10px;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 1px var(--rc-rule-h);
    text-align: left;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] > tbody > tr:has(.is-rc-open) {
    z-index: 25;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] :is(form, div, span, li, ul):not([data-rc-action]) {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] [data-rc-action="overflow"] {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    box-shadow: none;
    color: var(--rc-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    opacity: 1;
    cursor: pointer;
    transform: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] [data-rc-action="overflow"]:is(:hover, :focus-visible) {
    background: var(--rc-hover);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] [data-rc-action="overflow"][data-rc-danger] {
    color: var(--rc-red);
  }

  /* A row's existing <details> menu moved into the ⋯ panel beside another item (Quotes: the
     menu plus Delete). The details and its menu flatten so their ORIGINAL items become panel
     items; its summary is replaced by the ⋯ trigger. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] details {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] details > summary {
    display: none !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is(td, th)[data-rc="actions"] [data-rc-menu] details::details-content {
    display: contents;
    content-visibility: visible;
  }

  /* An icon-only control ("×") gets a written label in card mode. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] [data-rc-text] {
    font-size: 0 !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] [data-rc-text] > * {
    display: none !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] [data-rc-text]::after {
    content: attr(data-rc-text);
    font-size: 14px;
    line-height: 1.3;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc] :is([data-rc-action="primary"], [data-rc-action="secondary"])[data-rc-text]::after {
    font-size: 13.5px;
  }

  /* ---------- details panel: the row after its record ---------- */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:has(+ tr[data-rc-details]:not([hidden])) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    clip-path: inset(-8px -8px 0 -8px);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-details] {
    display: block;
    margin-top: -10px;
    padding: 0 14px 14px;
    border-radius: 0 0 12px 12px;
    clip-path: inset(0 -8px -8px -8px);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-details] > :is(td, th) {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--rc-hover);
    font-size: 13px;
    color: var(--rc-ink-2);
  }

  /* ---------- a split cell's own details panel and footer ----------
     One desktop cell that holds facts, a long nested list AND the row's action (the portal door
     register's Issues cell: fail count, failing components + issue list, Report issue). The cell
     takes data-rc-flat; a wrapper around the lists takes data-rc-details and becomes the in-card
     panel (same values as the details row's panel); the element around the control takes
     data-rc="actions" and becomes the footer. Nothing is copied. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc-flat] > [data-rc-details] {
    order: 70;
    flex: 0 0 100%;
    display: grid;
    gap: 10px;
    box-sizing: border-box;
    min-width: 0;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--rc-hover);
    font-size: 13px;
    line-height: 1.4;
    color: var(--rc-ink-2);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr > :is(td, th)[data-rc-flat] > [data-rc="actions"] {
    order: 90;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
  }

  /* ---------- group headings and message rows ---------- */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-group] {
    grid-column: 1 / -1;
    position: sticky;
    top: var(--rc-sticky-top, 0px);
    z-index: 3;
    display: block;
    margin: 0;
    padding: 14px 2px 6px;
    background: var(--rc-bg);
    border-radius: 0;
    box-shadow: none;
    cursor: default;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-group] > :is(td, th) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 4px 10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--rc-ink-2);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-group] > :is(td, th) > :is(span, small):not(:first-child):not(.ipi-mobile-cell-label) {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rc-ink-4);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-group] > :is(td, th) > :first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-group] > :is(td, th) a {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rc-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-group]:first-child {
    padding-top: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table:is([data-rc="card"], [data-rc="compact"]) > tbody > tr[data-rc-message] {
    grid-column: 1 / -1;
    display: block;
    cursor: default;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table:is([data-rc="card"], [data-rc="compact"]) > tbody > tr[data-rc-message] > :is(td, th) {
    display: block;
    width: 100%;
  }

  /* ---------- tablets: two columns of cards; three on a wide touch screen ---------- */
  @container (min-width: 600px) {
    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr[data-rc-details] {
      grid-column: 1 / -1;
      margin-top: 0;
      padding: 14px;
      border-radius: 12px;
      clip-path: none;
      box-shadow: var(--rc-shadow-card);
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody > tr:has(+ tr[data-rc-details]:not([hidden])) {
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      clip-path: none;
    }
  }

  @container (min-width: 960px) {
    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] > tbody {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ---------- the bulk selection bar: pinned while the list scrolls ---------- */
  /* Sticky offset: bars and group headings pin to the top of the scroller (.content, which starts
     under the app topbar). A page with its own sticky strip inside the scroller sets
     --rc-sticky-top to clear it (inspection show: the tab strip, inspection_show.css). */
  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-bulkbar]:not([hidden]) {
    position: sticky;
    top: var(--rc-sticky-top, 0px);
    z-index: 4;
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0 0 10px;
    padding: 6px 6px 6px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--rc-ink);
    color: #ffffff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ink) 60%, transparent);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-bulkbar] :is([data-rc-flat], form:not([data-rc-bulk-act])) {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-bulkbar]::-webkit-scrollbar {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-bulkbar] > *:not([data-rc-bulk-count]) {
    flex: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-bulkbar] [data-rc-bulk-count] {
    flex: 1 0 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-bulkbar] :is(button, a, label)[data-rc-bulk-btn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: color-mix(in srgb, var(--ink-3) 7%, var(--surface-inset));
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-bulkbar] :is(button, a)[data-rc-bulk-act] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    color: var(--rc-ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  /* =========================================================================
     COMPACT
     ========================================================================= */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* Same as the card: .ipi-table's overflow: hidden cut off the last row's ⋯ panel. */
    overflow: visible !important;
    border: 0;
    border-collapse: separate;
    border-radius: 12px;
    background: var(--rc-card);
    box-shadow: var(--rc-shadow-card);
    font-variant-numeric: tabular-nums;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody {
    display: block;
    border: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row;
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    align-content: center;
    position: relative;
    box-sizing: border-box;
    min-height: 58px;
    height: auto;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--rc-rule);
    border-radius: 0;
    background: var(--rc-card);
    box-shadow: none;
    cursor: default;
    text-align: left;
    color: inherit;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr:last-child {
    border-bottom: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"]:not(:has(> tfoot)) > tbody > tr:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"]:not(:has(> tfoot)) > tbody > tr:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr:hover {
    background: var(--rc-card);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr:not(:has(> :is(td, th)[data-rc="value"])) {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr:has(> :is(td, th)[data-rc="actions"] [data-rc-more]) {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    column-gap: 10px;
    padding-right: 8px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr:has(> :is(td, th)[data-rc="actions"] [data-rc-more]):not(:has(> :is(td, th)[data-rc="value"])) {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr[data-rc-tap] {
    padding-right: 38px;
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr[data-rc-tap]:hover {
    background: var(--rc-hover);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr[data-rc-tap]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: var(--rc-ink-4);
    -webkit-mask: var(--rc-chevron) center / 16px 16px no-repeat;
    mask: var(--rc-chevron) center / 16px 16px no-repeat;
    pointer-events: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th) {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.4;
    color: var(--rc-ink-4);
    position: static;
    grid-column: 1;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is(td, th)[data-rc="decor"] {
    display: none !important;
  }

  /* order: the name line comes first even when the title column is not the first column
     (e.g. property edit history: When, By, Summary). */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="title"] {
    order: -1;
    display: grid;
    gap: 2px;
    align-content: center;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is(td, th)[data-rc="title"] [data-rc-flat] {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] [data-rc-name] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    text-transform: none;
    color: var(--rc-ink) !important;
    text-decoration: none;
    overflow-wrap: anywhere;
    white-space: normal;
    background: none;
    border: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is([data-rc-sub], :is(td, th)[data-rc="detail"]) {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: var(--rc-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="detail"] {
    margin-top: 2px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is([data-rc-sub], :is(td, th)[data-rc="detail"]) :is(span, small, time, em, strong, b, div, p):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([data-rc-keep]) {
    display: inline;
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is([data-rc-sub], :is(td, th)[data-rc="detail"])[data-rc-wrap] {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is([data-rc-sub], :is(td, th)[data-rc="detail"]) :is([class*="chip"], [class*="pill"], [class*="badge"]):not([class*="dot"]) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 5px 0 0;
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    vertical-align: 1px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is([data-rc-sub], :is(td, th)[data-rc="detail"]) :is([class*="chip"], [class*="pill"], [class*="badge"]) :is([class*="dot"], i) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="value"] {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rc-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="value"][data-rc-tone="bad"] { color: var(--rc-red); }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is(td, th)[data-rc="value"] :is(div, span, strong, b, time, small, p):not([data-rc-note]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([data-rc-keep]) {
    display: inline;
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    letter-spacing: normal;
    text-transform: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] :is(td, th)[data-rc="value"] [data-rc-note] {
    display: block;
    margin: 0;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--rc-ink-4);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="actions"] {
    grid-column: -2;
    grid-row: 1 / span 6;
    align-self: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="actions"]:not(:has([data-rc-more])) {
    display: none !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="actions"] > :not([data-rc-more]):not([data-rc-menu]):not([data-rc-flat]),
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="actions"] > [data-rc-flat] > :not([data-rc-more]):not([data-rc-menu]) {
    display: none !important;
  }

  /* A wrapper around the ⋯ and its panel (Client Hub unlinked sources: .jobs-inline-actions)
     flattens, as a data-rc-flat wrapper does in a card footer; its other children stay hidden. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="actions"] > [data-rc-flat] {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr > :is(td, th)[data-rc="actions"].is-rc-open [data-rc-menu] {
    top: calc(100% - 4px);
    right: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr[data-rc-message] {
    display: block;
    min-height: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tbody > tr[data-rc-message] > :is(td, th) {
    font-size: 13.5px;
    color: var(--rc-ink-3);
    white-space: normal;
  }

  /* Totals: one strip under the rows (dropped where the page already shows totals, D10). */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tfoot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 5px;
    margin: 0;
    padding: 11px 14px 13px;
    border: 0;
    border-top: 1px solid var(--rc-rule);
    border-radius: 0 0 12px 12px;
    background: var(--rc-hover);
    font-size: 13.5px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tfoot > tr {
    display: contents;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tfoot > tr > :is(td, th) {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
    color: var(--rc-ink-3);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tfoot > tr > :is(td, th):last-child {
    padding-left: 14px;
    text-align: right;
    color: var(--rc-ink-2);
    font-variant-numeric: tabular-nums;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tfoot > tr > :is(td, th):not(:first-child):not(:last-child) {
    display: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="compact"] > tfoot > tr[data-rc-grand] > :is(td, th) {
    margin-top: 3px;
    padding-top: 8px;
    border-top: 1px solid var(--rc-rule-h);
    font-size: 15px;
    font-weight: 700;
    color: var(--rc-ink);
  }

  /* =========================================================================
     EDITOR ROWS
     ========================================================================= */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-radius: 12px;
    background: var(--rc-card);
    box-shadow: var(--rc-shadow-card);
    container-type: inline-size;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"]:has(+ [data-rc-add]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > :is(tbody, tfoot) {
    display: block;
    border: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: end;
    position: relative;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 12px 14px 14px;
    border: 0;
    border-bottom: 1px solid var(--rc-rule);
    border-radius: 0;
    background: var(--rc-card);
    box-shadow: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr:last-child {
    border-bottom: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr:has([data-rc-pick]:checked) {
    background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)), var(--rc-card);
    box-shadow: inset 3px 0 0 var(--rc-ink);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr > :is(td, th) {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    white-space: normal;
    text-align: left;
    vertical-align: bottom;
    font-size: 16px;
    color: var(--rc-ink);
    grid-column: 1 / -1;
    position: static;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr > :is(td, th)[data-rc="field"] {
    display: grid;
    gap: 4px;
    align-content: end;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr > :is(td, th)[data-rc="field"][data-rc-label]::before {
    content: attr(data-rc-label);
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--rc-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th)[data-rc="field"] > label:not([data-rc-keep]) {
    display: block;
    margin: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--rc-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px !important;
    height: auto;
    margin: 0;
    border: 1px solid var(--rc-rule-h);
    border-radius: 8px;
    background-color: var(--rc-card);
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.3;
    color: var(--rc-ink);
  }

  /* Padding per control type, each !important (it must beat the sheet-modal and page field rules).
     One shared `padding: 0 11px !important` on all three out-specified the select's chevron room
     and the textarea's top padding, so both are stated here instead. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
    padding: 0 11px !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th) textarea {
    padding: 10px 11px !important;
    min-height: 88px;
    resize: vertical;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th) :is(input, select, textarea)::placeholder {
    color: var(--rc-ink-4);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    outline: 2px solid var(--rc-accent);
    outline-offset: -1px;
    border-color: transparent;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th) select {
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    background-image: linear-gradient(45deg, transparent 50%, var(--rc-ink-3) 50%), linear-gradient(135deg, var(--rc-ink-3) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding: 0 26px 0 11px !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-ro] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    padding: 0 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--rc-ink);
    font-variant-numeric: tabular-nums;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-remove] {
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rc-rule-h);
    border-radius: 10px;
    background: var(--rc-card);
    box-shadow: none;
    color: var(--rc-ink-3);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-remove]:hover {
    color: var(--rc-red);
    border-color: var(--rc-red-bg);
    background: var(--rc-red-bg);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-remove] svg {
    width: 16px;
    height: 16px;
  }

  /* A Remove whose desktop label is a word (data-rc-remove="text"): the 44px square draws the
     design's ×, and the word stays the control's accessible name. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-remove="text"] {
    font-size: 0 !important;
    letter-spacing: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-remove="text"]::before {
    content: "\00d7";
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  /* A row checkbox in an editor ([data-rc-pick]): the design's 20px box drawn inside a 44px hit
     area, on the input itself so the control stays visible and tappable. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] input[data-rc-pick] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.75' y='.75' width='18.5' height='18.5' rx='5.25' fill='white' stroke='%23b9b1a6' stroke-width='1.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    cursor: pointer;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] input[data-rc-pick]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.75' y='.75' width='18.5' height='18.5' rx='5.25' fill='%231a1815' stroke='%231a1815' stroke-width='1.5'/%3E%3Cpath d='M6 10.3l2.7 2.7L14.2 7.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] input[data-rc-pick]:focus-visible {
    outline: 2px solid var(--rc-accent);
    outline-offset: -10px;
  }

  /* A currency affix around a field ([data-rc-affix] > mark + input): the mark sits inside the
     44px field, as the design's .ed-affix, instead of in a second bordered box. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-affix] {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-affix] > :not(input) {
    position: absolute;
    left: 11px;
    top: 50%;
    z-index: 1;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--rc-ink-3);
    transform: translateY(-50%);
    pointer-events: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] :is(td, th) [data-rc-affix] > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
    padding-left: 24px !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"]:not([data-rc-editor]) > tbody > tr > :is(td, th):has(> [data-rc-remove]) {
    grid-column: -2;
    grid-row: 1;
    align-self: end;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr[data-rc-group] {
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: var(--rc-sticky-top, 0px);
    z-index: 2;
    padding: 10px 14px;
    background: var(--rc-inset);
    border-bottom: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr[data-rc-group] > :is(td, th) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--rc-ink-2);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr[data-rc-group] > :is(td, th) :is(span, small) {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rc-ink-4);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody:first-child > tr[data-rc-group]:first-child {
    border-radius: 12px 12px 0 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr[data-rc-message] {
    display: block;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] > tbody > tr[data-rc-message] > :is(td, th) {
    font-size: 13.5px;
    color: var(--rc-ink-3);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-add] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-top: 1px dashed var(--rc-rule-h);
    border-radius: 0 0 12px 12px;
    background: var(--rc-card);
    box-shadow: var(--rc-shadow-card);
    font-size: 14px;
    font-weight: 600;
    color: var(--rc-ink-2);
    cursor: pointer;
    clip-path: inset(0 -8px -8px -8px);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-add]:hover {
    background: var(--rc-hover);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-edbar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rc-rule);
    font-size: 13px;
    color: var(--rc-ink-3);
  }

  /* line editor: invoice lines, document builder lines */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px;
    grid-template-areas: "desc desc x" "qty unit unit" "total total total";
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line"] [data-rc-area="total"] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed var(--rc-rule);
    padding-top: 2px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line"] [data-rc-area="total"] [data-rc-ro] {
    min-height: 36px;
  }

  /* line editor with no line-total cell: legacy invoice dialog lines */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-nototal"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px;
    grid-template-areas: "desc desc x" "qty unit unit";
  }

  /* document builder step 3 (the owner's signed-off design, the evening of 2026-09-29): a fix,
     the faults it fixes and its discount in the first cell, then Qty · Materials · Labour ·
     Total. On a phone the fix takes the first row and Materials · Labour · Total the second, as
     the design does; the design has no Qty on a phone, so a line there is one of each. Remove
     is pinned to the card's top right beside the name, so it costs the figures no column. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "desc desc desc" "m l total";
    align-items: start;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="qty"] {
    display: none !important;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="desc"] {
    padding-right: 54px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="x"] {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 44px;
    padding-top: calc(9.5px * 1.55 + 4px);
  }

  /* document builder step 3, a line whose quantity matters (the invoice flow, 2026-09-29): a
     Fire Door quote's part ("× 18") and every line on no door. line-fix's card with Qty kept:
     the name on the first row, Qty · Materials · Labour under it, the total on a row of its own
     (four figures do not fit 390px), Remove top right. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: minmax(0, 0.7fr) repeat(2, minmax(0, 1fr));
    grid-template-areas: "desc desc desc" "qty m l" "total total total";
    align-items: start;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="desc"] {
    padding-right: 54px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="x"] {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 44px;
    padding-top: calc(9.5px * 1.55 + 4px);
  }

  /* The total on its own row reads "TOTAL  £1,987.02" across it, not a label over a figure. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr > [data-rc-area="total"] {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    text-align: right;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr > [data-rc-area="total"]::before {
    text-align: left;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] [data-rc-area="total"] [data-rc-ro] {
    font-size: 15px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] [data-rc-area="total"] .dbx-line__off {
    grid-column: 1 / -1;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] [data-rc-area="total"] {
    text-align: right;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] [data-rc-area="total"] [data-rc-ro] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* pricing overrides */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id reset" "price effect";
    align-items: center;
  }

  /* "In effect": the figure and where it comes from share one line under the label. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] > tbody > tr > :is(td, th)[data-rc-area="effect"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] > tbody > tr > :is(td, th)[data-rc-area="effect"]::before {
    flex: 0 0 100%;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] [data-rc-area="effect"] [data-rc-ro] {
    justify-content: flex-start;
  }

  /* Each row is its own grid, so an `auto` column sized by "In effect" drifted from row to row.
     The auto column is the Reset button, which is the same width on every row. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "id id reset" "price effect effect";
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] [data-rc-area="reset"] :is(button, a) {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--rc-rule-h);
    border-radius: 10px;
    background: var(--rc-card);
    box-shadow: none;
    color: var(--rc-ink);
    font-size: 13.5px;
    font-weight: 600;
    opacity: 1;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] [data-rc-area="reset"] :is(button:disabled, [aria-disabled="true"]) {
    color: var(--rc-ink-4);
    cursor: default;
  }

  /* failure reasons editor (settings, the evening of 2026-09-29): the reason and Remove, then its
     risk. Which fix a fault gets is on Settings → Pricing. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="reason-risk"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    /* Risk a fixed 132px, which holds "Medium" and its arrow (a 0.7fr share cut it to "M…" at
       390px). */
    grid-template-columns: 132px minmax(0, 1fr) 44px;
    grid-template-areas: "reason reason x" "risk . .";
  }

  /* Add doors / Add items, "Several" (door lists, 2026-09-30): the reference, its floor and
     Remove on top, the location across, then the three schedule values (FD: rating · leaf, type;
     FS: type · element, rating). Cells v1 · v2 · v3 are named by the view. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="list-add"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-template-areas: "ref floor x" "loc loc loc" "v1 v2 v2" "v3 v3 v3";
  }

  /* import PDF review: door components */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="component"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-template-areas: "label label x" "status severity severity" "key key key" "notes notes notes";
  }

  /* The demo's read-only copy has no Remove. */
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="component"] > tbody > tr:not([data-rc-group]):not([data-rc-message]):not(:has(> [data-rc-area="x"])) {
    grid-template-areas: "label label label" "status severity severity" "key key key" "notes notes notes";
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="desc"] { grid-area: desc; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="qty"] { grid-area: qty; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="unit"] { grid-area: unit; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="total"] { grid-area: total; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="x"] { grid-area: x; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="pick"] { grid-area: pick; margin-left: -8px; align-self: end; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="reason"] { grid-area: reason; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="risk"] { grid-area: risk; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="price"] { grid-area: price; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="words"] { grid-area: words; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="qline"] { grid-area: qline; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="m"] { grid-area: m; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="l"] { grid-area: l; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="id"] { grid-area: id; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="reset"] { grid-area: reset; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="effect"] { grid-area: effect; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="status"] { grid-area: status; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="severity"] { grid-area: severity; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="key"] { grid-area: key; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="notes"] { grid-area: notes; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="ref"] { grid-area: ref; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="loc"] { grid-area: loc; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="floor"] { grid-area: floor; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="v1"] { grid-area: v1; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="v2"] { grid-area: v2; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="v3"] { grid-area: v3; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="label"] { grid-area: label; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="vat"] { grid-area: vat; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="meta"] { grid-area: meta; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="mat"] { grid-area: mat; }
  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="lab"] { grid-area: lab; }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="id"] {
    display: grid;
    gap: 1px;
    align-content: center;
    min-height: 44px;
    min-width: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="id"] [data-rc-name] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rc-ink);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="editor"] [data-rc-area="id"] [data-rc-sub] {
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11.5px;
    color: var(--rc-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @container (min-width: 600px) {
    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
      grid-template-areas: "desc qty unit total x";
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line"] [data-rc-area="total"] {
      display: grid !important;
      border-top: 0;
      padding-top: 0;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line"] [data-rc-area="total"] [data-rc-ro] {
      min-height: 44px;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-nototal"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.7fr) minmax(0, 1fr) 44px;
      grid-template-areas: "desc qty unit x";
    }

    /* One row, top-aligned: every field's label band starts at the top, so the figures line up
       with the fix's name however many fault chips sit under it. */
    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
      grid-template-areas: "desc qty m l total x";
      align-items: start;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="desc"] {
      padding-right: 0;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="x"] {
      position: static;
      width: auto;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-fix"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="qty"] {
      display: grid !important;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
      grid-template-areas: "desc qty m l total x";
      align-items: start;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="desc"] {
      padding-right: 0;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) > [data-rc-area="x"] {
      position: static;
      width: auto;
    }

    /* One row again on a tablet: the total's label goes back above its figure. */
    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="line-part"] > tbody > tr > [data-rc-area="total"] {
      grid-template-columns: minmax(0, 1fr);
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="override"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
      grid-template-areas: "id price effect reset";
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="reason-risk"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) 44px;
      grid-template-areas: "reason risk x";
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="list-add"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) 44px;
      grid-template-areas: "ref loc floor x" "v1 v2 v3 .";
    }

    /* Two lines, not one: a one-line row cut "Component key (optional)" at 810px. */
    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="component"] > tbody > tr:not([data-rc-group]):not([data-rc-message]) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
      grid-template-areas: "label status severity x" "key notes notes notes";
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc-editor="component"] > tbody > tr:not([data-rc-group]):not([data-rc-message]):not(:has(> [data-rc-area="x"])) {
      grid-template-areas: "label status severity severity" "key notes notes notes";
    }
  }

  /* =========================================================================
     GRID — stays a table; first column pinned, the rest scrolls
     ========================================================================= */
  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-gridcue]:has(+ [data-rc-gridframe].is-rc-overflow) {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--rc-muted);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-gridcue] svg {
    width: 14px;
    height: 14px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-gridframe] {
    position: relative;
    max-width: 100%;
    min-width: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-gridframe].is-rc-overflow::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 0%, transparent), color-mix(in srgb, var(--ink) 8%, transparent));
    pointer-events: none;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) [data-rc-gridframe] > [data-rc-gridwrap] {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--rc-card);
    box-shadow: var(--rc-shadow-card);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] {
    display: table;
    width: 100%;
    min-width: 0 !important;
    /* A clipping table (the billing .ipi-table computes overflow: hidden here) becomes the
       sticky first column's scroll container, and the column then scrolls away with the rest. */
    overflow: visible !important;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: transparent;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] > caption {
    display: table-caption;
    caption-side: top;
    padding: 12px 14px 4px;
    font-size: 13px;
    text-align: left;
    color: var(--rc-ink-3);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    padding: 10px;
    border: 0;
    border-bottom: 1px solid var(--rc-rule);
    white-space: nowrap;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] > thead > tr > th {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rc-ink-4);
    border-bottom-color: var(--rc-rule-h);
    background: var(--rc-card);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] > :is(thead, tbody, tfoot) > tr > :not(:first-child) {
    min-width: 96px;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] > tbody > tr:last-child > * {
    border-bottom: 0;
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] > :is(thead, tbody, tfoot) > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    min-width: 118px;
    max-width: 132px;
    background: var(--rc-card);
    box-shadow: 1px 0 0 var(--rc-rule-h);
    text-align: left;
    white-space: normal;
    line-height: 1.3;
    font-weight: 600;
    color: var(--rc-ink);
  }

  :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="grid"] > thead > tr > :first-child {
    z-index: 2;
    font-weight: 700;
    color: var(--rc-ink-4);
  }
}