/* ============================================================================
   restyle.css -- the site restyle: the older pages' building blocks drawn in the
   redesigned pages' language (tokens.css, tl-forms.css, Site Activity, the
   Support area, the shell). docs/site-restyle-plan.md is the design; its
   samples and checks are in tools/restyle/.

   LOAD ORDER: last of the site's stylesheets in _Layout.cshtml (after
   tl-forms.css), before the page's own Head section.

   THE RULES THIS FILE KEEPS (plan sections 3.1-3.3; RestyleStylesheetTests
   fails the build when one is broken):

   1. Everything is inside ONE @media screen block, so printing is unchanged.

   2. Every selector starts with body.tl-refresh. _Layout puts that class on
      <body> only when the rollout says this user has the new look
      (RestyleRules.IsOn), so without it this file matches nothing.

   3. Colours are tokens (var(--tl-...)), never literals: no #hex, no rgb() or
      hsl(), no colour names. An image is allowed only as a MASK -- url(data:...)
      in mask / -webkit-mask, or in a --rs-mask-* property only a mask reads --
      because a mask's colour is never drawn: the token behind it is.

   4. NEVER SET `display` ON A LABEL/VALUE ROW OR A FIELD SECTION'S CONTENT.
      Rows are hidden with an inline display:none (wrapper-display, jQuery
      .hide(), the "-row" toggles); a rule strong enough to beat the inline
      display:block that shows them would also beat that, and show hidden
      fields. Restyle the legacy float layout; do not replace it. The test holds
      every `display` to this: free on ::before and ::after, anywhere else only
      with a comment on the same line saying why that element is never hidden.

   5. NEVER NARROW A TABLE'S CONTAINER. FooTable hides data-hide="phone"
      columns when the smallest of the table, the viewport and the table's
      PARENT is 800px or less, and the Tract tables sit at 806px at 1440. A
      section's content box keeps today's width exactly (5px padding inside a
      1px border); header strips and row hairlines reach out over that padding
      with negative margins instead.

   6. !important only where it must beat an inline style, a script-painted
      style or a legacy !important -- and every one says which in a comment on
      the same line.

   7. The shell and the redesigned pages are left alone. A rule narrowed by
      nothing but elements (a, h3, input...) or .btn stays inside the page --
      under div#content, which keeps it off the shell's header, tabs, menus
      and palette -- and carries :not(:where(ISLANDS) *), ISLANDS being the
      list below; keep every copy of it identical to this one. :where, not
      :is, so the exclusion adds no specificity and the rules keep the order
      of precedence they were designed with. The test derives the redesigned
      pages' scopes from their stylesheets (each has one root class) and
      fails when one is missing here, or when a stylesheet -- or a new
      component in shell.css or bs5-custom.css -- appears that it cannot
      classify. The list also holds the shell's pieces that sit inside the
      page (the entity header, the page tools, the action row) and the
      Bootstrap 5 islands.

      ISLANDS = .tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog,
                .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te,
                .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar,
                .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5

   8. Text size does not change (owner decision 1).
   ========================================================================= */

@media screen {

/* ---- 1. the entity heading (plan 2.1) ------------------------------------------------------------------------------
   The grey band becomes the title in Ink over a hairline. Tight underneath (owner, 2026-10-10): 6px to the rule and
   10px after it, where the samples had 12px and 16px; the section headings keep today's 3px. */
body.tl-refresh div#content > h2:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    margin: 6px 0 10px; padding: 2px 0 6px;
    background: none; border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text); font-size: var(--tl-text-xl); font-weight: var(--tl-weight-semibold); line-height: var(--tl-leading-tight);
}
/* The same title in the two other places the old pages put it (owner feedback, 2026-10-10: the User, Form and Payment
   Form Management headers and the Manage Companies list's "didn't change with the restyle"):
   - in the shell's entity head (.tl-entity-head, shell.css): the client, user, form, payment form and project
     management layouts put the title there, in a row with the "go to" search box at its right. The head is an island,
     so the rule above never reached its h2 and it kept today's grey band. The title takes the same Ink, size and
     weight; the hairline runs under the whole head, title and search box, with the same 6px to it and 10px after in
     place of the head's 15px. A head with no title (the Companies list's, a search box alone) is left as it is, and so
     is the search box: it is still the shell's.
   - opening the layout's content column (#column2): Manage > Companies' "Viewing All Companies" under that search-only
     head, Client Invoice > Audit Trail, Individual Pending Client Billing Items. Level with the page menu's first card
     beside it, so no margin above. */
body.tl-refresh div#content div#column2 > h2:first-child:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    margin: 0 0 10px; padding: 2px 0 6px;
    background: none; border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text); font-size: var(--tl-text-xl); font-weight: var(--tl-weight-semibold); line-height: var(--tl-leading-tight);
}
body.tl-refresh div#content .tl-entity-head:has(> .tl-entity-head-title :is(h1, h2)) {
    margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--tl-border);
}
body.tl-refresh div#content .tl-entity-head-title :is(h1, h2) {
    margin: 0; padding: 2px 0 0; background: none; border: 0;
    color: var(--tl-text); font-size: var(--tl-text-xl); font-weight: var(--tl-weight-semibold); line-height: var(--tl-leading-tight);
}
body.tl-refresh div#content > h2 > span[class*="-background"],
body.tl-refresh div#content div#column2 > h2:first-child > span[class*="-background"],
body.tl-refresh div#content .tl-entity-head-title :is(h1, h2) > span[class*="-background"] {
    background-position: 2px center;
    padding-left: 32px !important; /* beats default.css's h2 span.*-background padding, itself !important */
}
body.tl-refresh div#content :is(h3, h4):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    padding: 0 0 3px; background: none; border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text); font-size: var(--tl-text-lg); font-weight: var(--tl-weight-semibold);
}
/* THE jQuery UI ACCORDION'S ARROW (restyle sweep, 2026-10-12: Contract > New's steps, Desktop > Trial Stats' tasks).
   The rule above takes an accordion header's fill, like any h3's, but its arrow is the theme's sprite, chosen for that
   fill: the open step's is WHITE (.ui-state-active .ui-icon), so on the white card the open step lost its arrow, and
   the closed steps' pale blue one read at 2:1. Drawn as the searching dropdown's chevron (section 8), through a mask
   over a token: Muted pointing right when closed, Brand pointing down when open. */
body.tl-refresh div#content .ui-accordion-header > .ui-accordion-header-icon:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    background: var(--tl-text-muted);
    --rs-mask-accordion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E");
    -webkit-mask: var(--rs-mask-accordion) center / 12px 12px no-repeat;
    mask: var(--rs-mask-accordion) center / 12px 12px no-repeat;
}
body.tl-refresh div#content .ui-accordion-header-active > .ui-accordion-header-icon:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    background: var(--tl-brand);
    --rs-mask-accordion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* Links in the page body. */
body.tl-refresh div#content a:link:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *),
body.tl-refresh div#content a:visited:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    color: var(--tl-brand-ink); text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--tl-brand) 40%, transparent);
}
body.tl-refresh div#content a:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { color: var(--tl-entity-project-shade); text-decoration-color: currentColor; }
/* A DELETE OR EDIT LINK UNDER THE POINTER (restyle sweep, 2026-10-12: Contract Packet's "Cancel Contract Packet",
   Contract > Additional Paragraphs' remove and delete links, the billing calendars' edit links). default.css fills
   a.delete-link:hover red and a.edit-link:hover green with white text; the hover colour above beat the white but not
   the fill, so the words sat in Brand Shade on red (1.25:1) or green (2.7:1). Drawn as the page menu's delete
   (section 2): the status Wash, with Danger Ink for delete and Ink for edit (Success Ink is 4.0:1 on its Wash). */
body.tl-refresh div#content a.delete-link:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    background-color: var(--tl-status-danger-wash); color: var(--tl-status-danger-ink); text-decoration: none;
}
body.tl-refresh div#content a.edit-link:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    background-color: var(--tl-status-success-wash); color: var(--tl-text); text-decoration: none;
}

/* ---- 2. the left page menu, #column1 (plan 2.2) --------------------------------------------------------------------
   Same links, same order, same icons, same 150px column, DRAWN AS A CARD OF ITS OWN like the sections beside it, so the
   menu and the page never run together -- on a phone, where "Menu" opens it above the page, as much as on a desktop
   (owner feedback, 2026-10-10). The column keeps its width: border-box puts the card's padding inside the 13% / 150px
   the float layout gives it (the grid layout is border-box already), and the edge is an inset shadow, not a border.
   It is as tall as its links rather than the old 650px.
   The current page is marked three ways, as the pills and the palette mark theirs: Brand Wash, a 3px Brand Blue rail,
   Brand text and a heavier weight. Delete reads as destructive (owner decision 6). 12px (today 11.7px) so no label
   wraps in the 150px column. */
body.tl-refresh div#column1 {
    box-sizing: border-box; min-height: 0; margin-bottom: 10px; padding: 4px;
    background: var(--tl-surface); border: 0; border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow-sm), inset 0 0 0 1px var(--tl-border);
}
/* border-box: on a phone defaultResponsive.css sizes these links width:95% !important, and the realm links' 26px
   padding (itself !important) would otherwise carry their count past the card's edge. Auto width elsewhere. */
body.tl-refresh div#column1 a {
    box-sizing: border-box; margin: 0 0 1px; padding-top: 6px; padding-bottom: 6px; padding-right: 4px;
    background-color: transparent; border: 0; border-radius: var(--tl-radius);
    color: var(--tl-text); font-size: var(--tl-text-sm); line-height: 1.3; text-decoration: none;
}
body.tl-refresh div#column1 a[class*="-background"] {
    background-position: 4px center !important; /* beats the realm icons' own position (default.css, shell.css), itself !important */
}
body.tl-refresh div#column1 a[style*="border-top"] {
    border-top: 0 !important; /* beats the inline border-top on "Create New ..." */
}
body.tl-refresh div#column1 a:hover { background-color: var(--tl-surface-hover); color: var(--tl-text); text-decoration: none; }
body.tl-refresh div#column1 a.active {
    padding-left: 12px; background: var(--tl-brand-wash); border: 0;
    box-shadow: inset 3px 0 0 var(--tl-brand);
    color: var(--tl-brand-ink); font-weight: var(--tl-weight-semibold);
}
body.tl-refresh div#column1 a.icon-delete { color: var(--tl-status-danger-ink); }
body.tl-refresh div#column1 a.icon-delete:hover { background-color: var(--tl-status-danger-wash); }
body.tl-refresh div#column1 hr {
    margin: 9px 6px !important; /* beats the dividers' inline margin */
    border-top-color: var(--tl-border);
}
/* Counts: the realm chip's own drawing (tint fill, shade edge), rounded, with tabular figures. */
body.tl-refresh div#column1 span.entityCount {
    min-width: 1.5em; margin-top: -1px; padding: 0 6px; border-radius: 999px;
    font-family: var(--tl-font-mono); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-medium); line-height: 1.45;
}
body.tl-refresh div#column2 { border-left-color: transparent; border-right-color: transparent; }
/* Closer to the menu card (owner, 2026-10-10): in the grid layout the 10px column gap is the whole space between them.
   Only there -- the float layout has no gap, and its content would touch the card. Widens column2, never narrows it. */
body.tl-refresh .tl-grid3 > div#column2 { padding-left: 0; }

/* ---- 3. field sections become cards (plan 2.3) ---------------------------------------------------------------------
   The legend is floated to the full width of the box (as Bootstrap 5 does) and pulled out over the 5px padding so it
   reads as the card's header strip; the content clears it. The content box keeps today's width exactly (rule 5). */
body.tl-refresh fieldset.form {
    margin: 0 0 14px; padding: 0 5px 5px;
    background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow-sm);
}
body.tl-refresh fieldset.form > legend {
    float: left; box-sizing: border-box; width: calc(100% + 10px); margin: 0 -5px 4px; padding: 8px 10px;
    background: var(--tl-surface-raised); border-bottom: 1px solid var(--tl-border);
    border-radius: var(--tl-radius) var(--tl-radius) 0 0;
    color: var(--tl-text); font-size: var(--tl-text-md); font-weight: var(--tl-weight-semibold); line-height: 1.3;
}
/* An administrator-only section keeps a colour of its own (owner feedback, 2026-10-19: "the fieldset also has an admin
   class that got lost in the restyle that needs to be added back as well"). <view-fieldset css-class="admin"> renders
   fieldset.form.admin -- Client > Edit's and Profile's "Administrator Only Section", File > Edit's Location Info, Form
   Management's printing, image upload and PDF decrypt sections, Project Form Management's printing -- and default.css
   filled it #CCFFCC. Here, as the admin-only tabs (section 6): the card filled Success Wash with a Success border, its
   header strip in the same wash over a Success rule, Ink text (14.26:1). Colours only, never the background shorthand: a
   legend's icon is its inline background image. */
body.tl-refresh fieldset.form.admin { background-color: var(--tl-status-success-wash); border-color: var(--tl-status-success); }
body.tl-refresh fieldset.form.admin > legend { background-color: var(--tl-status-success-wash); border-bottom-color: var(--tl-status-success); }
body.tl-refresh fieldset.form > legend[style] {
    padding-left: 36px !important; /* beats the legend's inline padding beside its icon */
    background-position: 10px center !important; /* beats the legend's inline icon position */
}
body.tl-refresh fieldset.form > legend a:link,
body.tl-refresh fieldset.form > legend a:visited { color: var(--tl-text); text-decoration: none; }
body.tl-refresh fieldset.form > legend a:hover { color: var(--tl-brand-ink); text-decoration: underline; }
body.tl-refresh fieldset.form > legend a.icon-realm {
    background-position: 0 center !important; /* beats shell.css's realm-marker position, itself !important */
}
body.tl-refresh fieldset.form > legend ~ div { clear: both; }
body.tl-refresh fieldset.form > div[id$="-content"] { padding-top: 4px; }
/* An empty section is just its header: no padding left under it. (Not display:none -- rule 4.) */
body.tl-refresh fieldset.form > div[id$="-content"]:empty { padding-top: 0; }
/* Collapsible: the arrow becomes a chevron in the header strip; a collapsed card is its header plus the summary. */
body.tl-refresh fieldset.form span.open { position: relative; width: 14px; height: 14px; margin: 1px 6px 0 0; background: none; }
body.tl-refresh fieldset.form span.open::before {
    content: ""; position: absolute; left: 3px; top: 2px; width: 6px; height: 6px;
    border-right: 1.6px solid var(--tl-text-muted); border-bottom: 1.6px solid var(--tl-text-muted);
    transform: rotate(45deg);
}
body.tl-refresh fieldset.form span.open.closed::before { left: 1px; top: 4px; transform: rotate(-45deg); }
body.tl-refresh fieldset.collapsed {
    height: auto; margin-bottom: 8px; padding-bottom: 0;
    border: 1px solid var(--tl-border); background: var(--tl-surface);
}
body.tl-refresh fieldset.collapsed > legend { margin-bottom: 0; border-bottom: 0; border-radius: var(--tl-radius); }
body.tl-refresh fieldset.form div.summary {
    clear: both; margin: 0 -5px; padding: 6px 10px 7px 30px; border-top: 1px solid var(--tl-border);
    color: var(--tl-text-muted); font-size: var(--tl-text-sm);
}

/* ---- 4. label / value rows: the same side-by-side pair, read like the new pages' facts (plan 2.4) ------------------
   THE LEGACY LAYOUT IS KEPT, NOT REPLACED (rule 4): the label stays floated at 15em and the value stays the flow-root
   box that fills the rest of the row (bs5-custom.css). Only padding, the hairline and colour change. Matched by
   structure (a div holding span.viewhelper-label), not by the -wrapper id suffix.
   The row reaches out over the card's 5px padding (margin -5px, padding 5px), so its hairline runs edge to edge while
   its inside stays exactly today's width; the label's indent comes out of the label's own 15em, so the value cell --
   and any table inside one -- keeps today's exact position and width (plan 3.2, rules 2 and 3). */
body.tl-refresh fieldset.form div:has(> span.viewhelper-label) {
    margin: 0 -5px; padding: 4px 5px;
    border-bottom: 1px solid color-mix(in srgb, var(--tl-border) 55%, transparent);
}
body.tl-refresh fieldset.form div:has(> span.viewhelper-label)::after { content: ""; display: block; clear: both; }
body.tl-refresh fieldset.form div:has(> span.viewhelper-label):has(+ table),
body.tl-refresh fieldset.form div:has(> span.viewhelper-label):last-child { border-bottom: 0; }
body.tl-refresh fieldset.form span.viewhelper-label { width: calc(15em - 5px); margin-bottom: 0; padding-left: 5px; color: var(--tl-text-muted); }
body.tl-refresh fieldset.form span.viewhelper-label label { padding-left: 0; }
/* The focused field's label keeps its arrow, beside the text instead of on it (owner feedback, 2026-10-10: "the
   selected label arrows are overriding the label"). jquery.focusfields.js marks that label .highlight and default.css
   draws arrow_right_small.png at its left edge -- into the 8px of padding every fieldset label has today, which the
   line above takes away, so the arrow sat on the first letter. It now hangs in the 10px left of the text (the label's
   5px indent plus the 5px the row reaches out by): the label's box grows left by exactly its padding, so the text, its
   wrapping and the value cell stay put and nothing moves as focus comes and goes. The colour is the one default.css
   already gives it (#346689), as its token. */
body.tl-refresh fieldset.form span.viewhelper-label label.highlight { margin-left: -10px; padding-left: 10px; color: var(--tl-brand-ink); }
body.tl-refresh fieldset.form div.viewhelper-content { margin-bottom: 0; color: var(--tl-text); font-weight: var(--tl-weight-medium); }
/* The focus ring shows on all four sides of a field in a value cell (owner feedback, 2026-10-10: "the outline is getting
   cutoff on the left side of the selected option"). bs5-custom.css clips the value cell sideways (overflow-x: clip, so
   a too-wide field cannot run into the next column or widen a phone page) at the cell's own edge -- where every field
   starts, and where a full-width one ends -- so section 8's ring (2px, 1px out) lost its left side, and a full-width
   field's right side too. Here the ROW clips instead: it is 5px wider than its cell on each side (it reaches out over
   the card's padding, above), room for the 3px ring, and the cell inside it no longer clips. Nothing moves (clip, unlike
   hidden, makes no formatting context; the cell's flow-root still does), nothing spills sideways or scrolls a phone, and
   nothing is clipped downward, so the AFE list and other drop-downs still open over the rows below. The help bubble
   (section 9) is the row's child but stands right of it, placed by the page: no rule may position the row, or its clip
   would cut the bubble off. A dialog's .modalContent cell never clipped, so its row does not either; a browser without
   overflow: clip keeps bs5-custom.css's fallback. */
@supports (overflow-x: clip) {
    body.tl-refresh fieldset.form div:has(> span.viewhelper-label):has(> div.viewhelper-content:not(.modalContent)) { overflow-x: clip; }
    body.tl-refresh fieldset.form div:has(> span.viewhelper-label) > div.viewhelper-content { overflow-x: visible; }
}
/* The required mark is an inline red span (LabeledRender.Wrap); Danger Ink, as .tl-ui-req. */
body.tl-refresh fieldset.form span.viewhelper-label > span[style*="#f00"] {
    padding-left: 2px; font-weight: var(--tl-weight-bold);
    color: var(--tl-status-danger-ink) !important; /* beats the mark's inline colour */
}

/* ---- 5. tables: the Site Activity table (.tl-sa-table) on the legacy tablesorter markup (plan 2.5) ----------------
   A header WRAPS, as it does today. The samples kept each on one line, and a table in a narrow column -- Project >
   Details puts seven statistics tables in a 40% float beside its pie chart -- then grew past its column and ran under
   the chart (owner feedback, 2026-10-10).
   EVERY TABLE IS CONTAINED: a 1px Border edge and the cards' small shadow (owner feedback, 2026-10-12: the Brokers table
   on the Tract, Contract and Party edit pages needs "something better [to] show that it is a contained table", and
   "the tablesorter class ... may need the same containment treatment site wide"). Today's grey grid -- #CDCDCD showing
   through the gaps between the cells -- drew an edge round every table; with white cells and faint row lines a table
   had none, so a small one inside a field ran into the field around it and a column of them (Project > Details) ran
   together. border-box keeps the edge inside the table's own width: a 100% table is exactly as wide as before.
   ROUNDED AS THE CARDS ARE (owner feedback, 2026-10-12: "the table corners should be rounded like the cards"). A
   collapsed table cannot round its corners, so the cells sit apart with no space between them (border-spacing: 0):
   the cells draw only their bottom lines, so every line is drawn once, as before. Every table measured kept its width,
   and its height to the pixel (Project > Details, User Approval); Tract > Ownership's grid is 1px shorter, its sum line
   no longer taking room (below). The cells in the four corners take the inner radius,
   or a grey header or a hovered last row would square the corner off over the curve. */
body.tl-refresh table.tablesorter {
    box-sizing: border-box; margin: 6px 0 4px;
    background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    border-collapse: separate; border-spacing: 0; box-shadow: var(--tl-shadow-sm);
}
body.tl-refresh table.tablesorter > thead > tr:first-child > :first-child,
body.tl-refresh table.tablesorter:not(:has(> thead)) > tbody:first-of-type > tr:first-child > :first-child { border-top-left-radius: calc(var(--tl-radius) - 1px); }
body.tl-refresh table.tablesorter > thead > tr:first-child > :last-child,
body.tl-refresh table.tablesorter:not(:has(> thead)) > tbody:first-of-type > tr:first-child > :last-child { border-top-right-radius: calc(var(--tl-radius) - 1px); }
body.tl-refresh table.tablesorter:not(:has(> tfoot)) > tbody:last-of-type > tr:last-child > :first-child,
body.tl-refresh table.tablesorter > tfoot > tr:last-child > :first-child { border-bottom-left-radius: calc(var(--tl-radius) - 1px); }
body.tl-refresh table.tablesorter:not(:has(> tfoot)) > tbody:last-of-type > tr:last-child > :last-child,
body.tl-refresh table.tablesorter > tfoot > tr:last-child > :last-child { border-bottom-right-radius: calc(var(--tl-radius) - 1px); }
/* A table inside a field (the edit pages' Brokers, under its label) stands 8px clear of the control under it -- the
   Brokers table's "Add Broker To Tract" sat 4px under its new edge. */
body.tl-refresh fieldset.form div.viewhelper-content > table.tablesorter { margin-bottom: 8px; }
body.tl-refresh table.tablesorter thead tr th,
body.tl-refresh table.tablesorter tfoot tr th {
    padding: 6px 8px; background-color: var(--tl-surface-sunken); border: 0; border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text-muted); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-semibold);
    letter-spacing: .05em; text-transform: uppercase;
}
/* THE SORT ARROWS STAY (restyle sweep, 2026-10-12: Client > Invoices, Task List and every table the tablesorter plugin
   sorts). The rule above set the `background` SHORTHAND, which also cleared background-image -- and the plugin's
   theme (theme.default.min.css) and radpi.tablesorter.css draw the unsorted double arrow and the up/down arrow as
   exactly that, so a sortable head gave no sign it sorts or which way. The rule now sets only the colour (no other
   picture reaches a table.tablesorter head: the only other head-cell pictures, in the jqGrid theme's grid.css, are
   for .Header and table.scroll, which no tablesorter table carries), and a sortable head gets back the 20px on its
   right the arrow stands in, as today. */
body.tl-refresh table.tablesorter thead tr th.tablesorter-header:not(.sorter-false) { padding-right: 20px; }
/* A HEAD CELL THE PAGE FILLS ITSELF KEEPS INK (restyle sweep, 2026-10-12: the Tracts report's Tract Interests TOTAL
   row, whose Royalty total is filled red, green or yellow inline by whether the weights add up). The Muted above is
   for the Sunken head; on red it read at 1.6:1. Ink, the darkest token, reads 4.1:1 on that red (7.5:1 on green,
   15:1 on yellow) -- short of 4.5:1 for this small text, where today's black reads 5.25:1; no token does better. */
body.tl-refresh table.tablesorter thead tr th[style*="background"] { color: var(--tl-text); }
body.tl-refresh table.tablesorter tbody td {
    padding: 4px 8px; background: transparent; border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tl-border) 55%, transparent);
    color: var(--tl-text); vertical-align: middle;
}
body.tl-refresh table.tablesorter tbody tr.odd td { background: transparent; }
body.tl-refresh table.tablesorter tbody tr:hover td { background: var(--tl-surface-hover); }
body.tl-refresh table.tablesorter tbody tr:last-child td { border-bottom: 0; }
/* A totals row under the rows it adds up (Tract > Ownership's Mineral and Surface totals, the leasehold interests' Total)
   stands under a sum rule, as the redesigned tables' footers do (data-export.css), and does not hover: it is not a row
   to pick. Its cells paint the surface themselves. Today the legacy white cell hides the row's own grey (#C2CACF
   !important, _ownershipTable3); a transparent cell let that grey through as a slab beside the totals (owner feedback,
   2026-10-10). The Mineral and Surface cells keep their colours, which are !important. The rule is 2px, drawn as two
   shadows rather than a border: 1px over the row line above it and 1px inside the row. In the table's separate cells
   a border would sit under the row line above (1px light, then 2px dark); the shadow covers that line wherever it ends,
   even under a name that spans the rows above, and moves nothing. It goes on the first totals row only: the rows
   after it are its own. The "Totals" label spans them all, down to the table's end, where no other cell draws a line. */
body.tl-refresh table.tablesorter tbody tr.totals td { background-color: var(--tl-surface); }
body.tl-refresh table.tablesorter tbody tr:not(.totals) + tr.totals td {
    box-shadow: 0 -1px 0 var(--tl-border-strong), inset 0 1px 0 var(--tl-border-strong);
}
body.tl-refresh table.tablesorter tbody tr.totals td[rowspan] { border-bottom: 0; }
/* The ownership grid (_ownershipTable3: Tract, Contract and Contract Party > Ownership). An owner is a block of rows --
   Mineral and Surface, and once Show Non Standard Ownership expands the table, Bonus, Rental, Executive and Royalty
   between them -- and so are the totals. Those four rows have no colour of their own, and a cell of text reads
   percentage, <hr>, acres. With the faint line other tables use, the line between two rows was as faint as the <hr>
   inside one, and the expanded totals read as one column of numbers (owner feedback, 2026-10-10). Today a dark line
   under every row keeps them apart; here the row line is the full Border, and the <hr> stays as faint as today.
   The <hr>'s 16px margins (Bootstrap's) also left a percentage nearer the row above than its own acres; at 4px the
   two values sit where the two inputs of an owner's row sit, in the totals and in a row the user cannot edit.
   The Calculated / Target / Difference table under the grid (_bottomOwnershipSumTable) takes the same line: expanded,
   it is four blocks of uncoloured rows, and the faint line vanished on its green Difference cells. */
body.tl-refresh table.tablesorter.ownership tbody td,
body.tl-refresh div#ownershipSumTable table.tablesorter tbody td { border-bottom-color: var(--tl-border); }
body.tl-refresh table.tablesorter.ownership tbody td hr { margin: 4px 0; }
/* Project > Details' statistics: a heading and its table per realm, one block after another. Each table now has its
   own edge, which is the separation today's grey header gave, so the spacing goes back to today's: 10px from a heading
   to its table and 25px from a table to the next heading (owner feedback, 2026-10-12: "too much white space and not
   enough separation between the tables like the old style did"; the 14px of 2026-10-10 made it 6px and 29px).
   The headers are set in today's mixed case here, without the capitals' letter-spacing: in the 40% column a capital
   "INSTRUMENT" is wider than a quarter of it, so the Instruments table's four headers pushed it past its column toward
   the chart -- 9px at 1280px, 62px at 1100px. In mixed case every table fits its column, as today's do. A figure
   stays on one line ("46.49 %" broke before its % at 1100px), and the cells are padded 4px a side, not 8px (today's
   are 2px): with both, every table fits its column down to 1024px, where the Tracts and Instruments tables ran 13px
   and 16px past it. */
body.tl-refresh div.projectDetailsContent table.tablesorter { margin: 10px 0; }
body.tl-refresh div.projectDetailsContent table.tablesorter thead tr th { letter-spacing: 0; text-transform: none; }
body.tl-refresh div.projectDetailsContent table.tablesorter tbody td { white-space: nowrap; }
body.tl-refresh div.projectDetailsContent table.tablesorter :is(thead tr th, tbody td) { padding-left: 4px; padding-right: 4px; }
/* A table that fills a sidebar card sits flush under its header strip, inside the card's own edge; the sidebar tables
   carry no FooTable. */
body.tl-refresh div#column3 fieldset.form > div[id$="-content"] { padding-top: 0; }
body.tl-refresh div#column3 table.tablesorter { margin: 0; border: 0; box-shadow: none; }

/* ---- 6. in-page tabs: drawn as the shell's main tabs draw theirs, on .content_tabset (plan 2.6) -------------------
   The strip keeps its own flow -- inline-block tabs (bs5-custom.css), wrapping where they wrap today, a <br> in the
   strip (Pipeline > Third Party Index) still starting a second row, a floated strip still floating. Only the drawing
   changes: no boxes, one hairline under the strip, and THE TABS AS THE MAIN TAB BAR DRAWS ITS OWN -- shell.css
   `.tl-tabs a.tl-tab`: the current one a Slate fill, white text and 5px top corners, standing on the line the way a
   main tab stands on the tab bar's border, and a hovered one an Info Ink fill with white text (owner, 2026-10-10; the
   samples underlined the current tab in Brand).
   Every other tab is Ink, with or without an href: the page's link colour (section 1, an id selector) would otherwise
   paint the linked ones blue, so each rule is also written under div#content, which outranks it. Colours only, never
   the background shorthand: a realm tab's icon is its background image (Client > Statuses).
   NO TOP MARGIN (owner, 2026-10-10): a strip at the top of a column then starts level with the page menu's card and the
   sidebar's first card instead of 16px below them; lower down, the card above a strip already leaves 14px. */
body.tl-refresh div.content_tabset {
    margin: 0 0 10px; padding: 0;
    border-bottom: 1px solid var(--tl-border); box-shadow: none;
}
body.tl-refresh div.content_tabset a,
body.tl-refresh div#content div.content_tabset a {
    margin: 0; padding: 7px 12px 8px;
    background-color: transparent; border: 0; border-radius: 5px 5px 0 0;
    color: var(--tl-text); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); text-decoration: none;
}
/* Hover as the main tabs hover (shell.css .tl-tabs a.tl-tab:hover): Info Ink fill, white text (5.98:1). */
body.tl-refresh div.content_tabset a:hover,
body.tl-refresh div#content div.content_tabset a:hover { background-color: var(--tl-status-info-ink); color: var(--tl-on-slate); }
body.tl-refresh div.content_tabset a.active,
body.tl-refresh div#content div.content_tabset a.active,
body.tl-refresh div#content div.content_tabset a.active:hover {
    background-color: var(--tl-slate); color: var(--tl-on-slate); font-weight: var(--tl-weight-semibold);
}
/* Admin-only tabs keep a colour of their own (owner feedback, 2026-10-19: "we will need to restore those somehow so that
   we know which tabs are admin only"). The partials mark them class="admin" -- Client > Client Linking, Party Legal Names,
   Payments and TLT Invoices; User > Permissions -- and default.css filled them #CCFFCC with black text. Here: the Success
   Wash fill with Ink text (14.26:1; Success Ink text on that wash would be 4.0:1, short of 4.5), and on hover the TL Admin tab's own
   hover (shell.css .tl-tab-admin): a Success Ink fill with white text (4.60:1). The current tab carries "active" in place
   of "admin" (the partials write one or the other, as RADPI's did), so it is Slate like any other current tab. */
body.tl-refresh div.content_tabset a.admin,
body.tl-refresh div#content div.content_tabset a.admin { background-color: var(--tl-status-success-wash); color: var(--tl-text); }
body.tl-refresh div.content_tabset a.admin:hover,
body.tl-refresh div#content div.content_tabset a.admin:hover { background-color: var(--tl-status-success-ink); color: var(--tl-on-slate); }
body.tl-refresh div.content_tabset a:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: -2px; }
/* A tab with a picture: realm markers keep their own padding and centring (default.css, shell.css); a plain .icon tab
   (User > Client Associations' "Add") is centred too, rather than hanging at the top of the taller tab. */
body.tl-refresh div.content_tabset a.icon {
    background-position: 4px center !important; /* beats default.css's .icon position, itself !important */
}
/* The project lists' Create / Import buttons (Tracts, Contracts, Parties, Instruments, Units, Wells: the _*ListTabs
   partials) get room between the title and the tabs (owner feedback, 2026-10-10: "a little too close to the top of the
   tabs and the top header area"). They are inline links whose 6px padding and 1px border hang 7px out of their 15px
   line, above and below, and with the title tight to its rule and the strip's top margin gone (above) that left 3px on
   each side, where today has 8px and 13px. Their row is padded by that overhang above and kept clear of the strip by the
   same below, so each button stands 10px from the rule and 10px from the tabs -- the 10px the title leaves under its
   rule. The row's own padding-bottom is an inline style and stays. */
body.tl-refresh div#content div:has(> div.createContainer) { padding-top: 7px; margin-bottom: 7px; }
/* A lone Create link at the top of a column, then <br /><br />, then the search form or the tabs: Abstracts and Pipeline
   Mgmt's Segments and Rectifiers (owner feedback, 2026-10-10: "all of the realm list pages will need the same create
   button spacing fix"), and the same markup on News, Newsletters, Resources, Surveys, Training, Training Programs,
   Webinars, Custom Reports, Project Form Management, Manage Brokerages (its right-hand column) and Project Form
   Management's Add page (under its help box) (owner, 2026-10-10: "Restyle: Create button spacing on non-realm pages").
   Same overhang, so 3px under the rule and 8px over what follows; now the same 10px and 10px. An inline-block's line
   holds the whole button, so it starts where the column does, 10px under the rule; its 10px margin replaces the blank
   line the second <br> left, which goes. Its width and everything beside or below it, sideways, stay put.
   Only under a title this sheet draws (section 1): a `div#content > h2`, or an entity head holding one -- which is
   what puts Users, Forms and Payment Forms here too, once their head took the hairline and its 10px in place of the
   15px that had left them 8px clear (owner feedback, 2026-10-10). A head with no title draws no hairline. */
body.tl-refresh div#content > :is(h2, .tl-entity-head:has(> .tl-entity-head-title :is(h1, h2))) ~ div > div:is(#two-column1, #column2) > a.icon-create:first-child:has(+ br + br),
body.tl-refresh div#content > div.visible-help + a.icon-create:has(+ br + br) {
    display: inline-block; /* the view leaves the link out when the user can't create; no script hides or shows it */
    margin-bottom: 10px;
}
body.tl-refresh div#content > :is(h2, .tl-entity-head:has(> .tl-entity-head-title :is(h1, h2))) ~ div > div:is(#two-column1, #column2) > a.icon-create:first-child + br + br,
body.tl-refresh div#content > div.visible-help + a.icon-create + br + br {
    display: none; /* a line break: nothing shows it again */
}
/* Create links in a float at the top of the column -- Additional Paragraphs (Create and Import), Project Management,
   and under their entity heads Users and Forms (Create and Import): the same 3px under the rule. The floats end differently (one page clears them, one does not), so the column's top is
   padded by the 7px overhang instead: the links and everything under them move down 7px, 10px under the rule, and keep
   today's 8px over the search card. */
body.tl-refresh div#content > :is(h2, .tl-entity-head:has(> .tl-entity-head-title :is(h1, h2))) ~ div > div#two-column1:has(> div[style*="float"]:first-child > a.icon-create) { padding-top: 7px; }
/* The Create link that opens a card on Billing Defaults and Project Defaults ("Create New Default Expense" and the like,
   before a hidden loading note and the table) hung over the card's header, 1px under it, and 1px into the table. An
   inline-block's line holds it; 2px above and 4px below make it 10px from each. */
body.tl-refresh fieldset.form div[id$="-content"] > a.icon-create:first-child:has(+ span[id^="loadingIndicator"]) {
    display: inline-block; /* the pages' scripts hide and show only the loading note, never the link */
    margin: 2px 0 4px;
}

/* ---- 7. footer (plan 2.11) ---------------------------------------------------------------------------------------- */
body.tl-refresh div#footer {
    background: var(--tl-surface-sunken); border-top: 1px solid var(--tl-border); color: var(--tl-text-muted);
}
body.tl-refresh div#footer a[style] {
    color: var(--tl-brand-ink) !important; /* beats the footer links' inline colour */
}
body.tl-refresh div#footer a.btn1-cyan {
    padding: 7px 14px; background: var(--tl-surface); background-image: none; border: 1px solid var(--tl-border-strong);
    border-radius: var(--tl-radius); box-shadow: none; font-size: var(--tl-text-md);
    font-weight: var(--tl-weight-medium); text-shadow: none;
    color: var(--tl-text) !important; /* beats .btn1-cyan's white text, itself !important */
}
body.tl-refresh div#footer a.btn1-cyan:hover {
    border-color: var(--tl-brand);
    color: var(--tl-brand-ink) !important; /* beats .btn1-cyan's white text, itself !important */
}

/* ---- 8. form controls: the new pages' field (tl-forms.css .tl-ui-input), at today's size (plan 2.7) ----------------
   Widths stay as the views set them (most are inline), so nothing reflows. The two-tone bevel, the grey fill and
   text-bg.gif, the inset shadow and the blue glow go; one Border Strong edge, a 4px radius, Slate on hover and the 2px
   Brand focus ring come in. Padding 2px -> 3px 5px: content-box, so a field grows 6px wide and 2px tall.
   DATE FIELDS KEEP THEIR PURPLE EDGE (owner decision 5): ViewHelperActivation.js paints an inline border on every date
   picker -- RADPI's cue that the date shortcut keys work. An inline border outranks every rule here, so it is simply
   left alone; the field still takes the radius, the white fill and the Brand focus ring.
   The hover and focus rules skip button-type inputs (submit, button, reset, image): those are buttons, drawn by
   section 10, and the field's Slate hover edge would win over a Save input's own (owner feedback, 2026-10-10). The
   test is written :where(:not(...)), so it adds no specificity (and is not mistaken for the ISLANDS exclusion). */
body.tl-refresh div#content :is(input:not([type]), input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="tel"], input[type="search"], input[type="url"]):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *),
body.tl-refresh div#content textarea:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *),
body.tl-refresh div#content select:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    padding: 3px 5px; background-color: var(--tl-surface);
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: none;
    color: var(--tl-text); transition: border-color .15s ease;
}
/* The legacy texture goes (text-bg.gif, the autocomplete's gradient) -- but not a field's own icon (owner feedback,
   2026-10-10: the project search box admins use on the reports "is missing the icon that it had"). The
   *-background classes (project-, client-, units-, form-background...) draw a realm icon in the 30px a field is
   padded by at its left; this rule used to clear it with the texture, leaving an empty gap before the text.
   Nor a Bootstrap 5 select's arrow (restyle sweep, 2026-10-12: Report Activity's Client, User, Report, State and
   Active filters, Client > Expense Categories' "Reports as"). .form-select sets appearance: none and draws its
   chevron as the background image, so clearing it left a dropdown with no arrow at all, looking like a text box. */
body.tl-refresh div#content :is(input:not([type]), input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="tel"], input[type="search"], input[type="url"], textarea, select):where(:not([class*="-background"], .form-select)):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    background-image: none;
}
/* ...and the field's padding keeps clear of that arrow: the field rule's 3px 5px replaced Bootstrap's 2.25rem. */
body.tl-refresh div#content select.form-select:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { padding-right: 2.25rem; }
/* ...and a colour picker's field keeps clear of its swatch (owner feedback, 2026-10-19: Client > Tract Statuses, "the
   color picker color is hiding the hex code", and the Title, Survey Permission and Survey Plat Statuses pages). The
   pages' minicolors uses its bootstrap theme (js/colorPicker/jquery.minicolors.css), which lays a 28px swatch 3px inside
   the field and pads the text 44px from that edge to clear it; the field rule's 3px 5px replaced that, so the swatch sat
   on the hex code. The theme's own padding, swatch side; the other side keeps the field's 5px. */
body.tl-refresh div#content .minicolors-theme-bootstrap > input.minicolors-input:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { padding-left: 44px; }
body.tl-refresh div#content .minicolors-theme-bootstrap.minicolors-position-right > input.minicolors-input:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { padding-right: 44px; padding-left: 5px; }
body.tl-refresh div#content :is(input:where(:not([type="submit"], [type="button"], [type="reset"], [type="image"])), textarea, select):hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { border-color: var(--tl-slate); }
body.tl-refresh div#content :is(input:where(:not([type="submit"], [type="button"], [type="reset"], [type="image"])), textarea, select):focus:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    border-color: var(--tl-brand); box-shadow: none; outline: 2px solid var(--tl-focus-ring); outline-offset: 1px;
}
body.tl-refresh div#content :is(input, textarea, select):is([readonly], [disabled], .disabled):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    background-color: var(--tl-surface-sunken); border-color: var(--tl-border); color: var(--tl-text-muted);
}
body.tl-refresh div#content :is(input[type="checkbox"], input[type="radio"]):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { accent-color: var(--tl-brand); }
/* A FIELD THAT ALSO CARRIES .btn1-cyan KEEPS THE FIELD'S INK (owner feedback, 2026-10-12: the Desktop's Activity Charts
   "dropdowns aren't very visible"). The charts' script marks the control that picked the time frame with .btn1-cyan,
   RADPI's "chosen button" class from when that control was a row of buttons -- RADPI's own script does the same to
   these three selects, so today they are cyan with white text (defaultResponsive.css). The field rules above repaint a
   select white, but .btn1-cyan's white text is !important, so the text vanished: white on white. The field keeps its
   own Ink, and the button's dark text shadow goes with the button. Same elements as the field rule. */
body.tl-refresh div#content :is(input:not([type]), input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="tel"], input[type="search"], input[type="url"], textarea, select).btn1-cyan:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    color: var(--tl-text) !important; /* beats .btn1-cyan's white text, itself !important */
    text-shadow: none;
}
/* THE SEARCHING DROPDOWN (ViewHelperSelectCombobox / JQueryViewElementsHelper.Select: a text box, an arrow <img>, a
   hidden field that posts), as tl-forms.css draws it on the new pages (.tl-ui-combo): the arrow a chevron inside the
   box's right end, where a select's is. The box takes the field height of its neighbours instead of the widget's 18px;
   the <img>, which the widget positions absolutely at its place right after the box, is pulled back over the box's
   widened right padding, full height, and a mask turns its 1px gif into the chevron (owner, 2026-10-10). */
body.tl-refresh div#content input.dropdown-input-text:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { height: auto; padding-right: 24px; }
body.tl-refresh div#content img.dropdown-trigger:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *),
body.tl-refresh .ui-dialog img.dropdown-trigger:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    top: 0; width: 22px; height: 100%; margin-left: -23px;
    background: var(--tl-text-muted); border: 0;
    --rs-mask-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    -webkit-mask: var(--rs-mask-chevron) center / 12px 12px no-repeat;
    mask: var(--rs-mask-chevron) center / 12px 12px no-repeat;
}
body.tl-refresh div#content img.dropdown-trigger:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *),
body.tl-refresh .ui-dialog img.dropdown-trigger:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background: var(--tl-text); }
/* IN A jQuery UI DIALOG TOO (owner feedback, 2026-10-10: Billing Item Management > Edit Billing Item, "the restyle for
   this autocomplete should also be fixed"). A dialog is appended to <body>, outside div#content, so the field rules
   above never reached its searching dropdown: it kept the 18px textured box and the bevelled arrow. The arrow takes the
   chevron through the selectors added to the two rules just above; the box takes the whole field here, since the
   general field rules stop at div#content -- 25px tall, the height of the dialog's selects under it. The dialog's other
   text fields are not part of this (plan 2.10). */
body.tl-refresh .ui-dialog input.dropdown-input-text:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    height: auto; padding: 3px 24px 3px 5px; background: var(--tl-surface) none;
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: none;
    color: var(--tl-text); transition: border-color .15s ease;
}
body.tl-refresh .ui-dialog input.dropdown-input-text:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { border-color: var(--tl-slate); }
body.tl-refresh .ui-dialog input.dropdown-input-text:focus:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    border-color: var(--tl-brand); outline: 2px solid var(--tl-focus-ring); outline-offset: 1px;
}
body.tl-refresh .ui-dialog input.dropdown-input-text:is([readonly], [disabled], .disabled):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    background-color: var(--tl-surface-sunken); border-color: var(--tl-border); color: var(--tl-text-muted);
}
/* THE LIST IT OPENS (owner feedback, 2026-10-10, as above): the 2008 plugin (jquery.autocomplete.js) appends one
   div.ac_results to <body> per searching dropdown, so it is scoped by its own class. Today a grey #666-edged box of
   zebra rows in the system menu font, the row under the cursor filled navy with white text. Drawn as the command
   palette draws its rows (shell.css .tl-palette-row): a white card with the large shadow, 2px under the box, and the
   one highlighted row -- the plugin moves a single .ac_over with the mouse AND the arrow keys -- in Brand Wash with a
   3px Brand bar, so the state does not rest on the fill alone. Rows grow from 22px to 26px; the text keeps its size.
   WIDTH: the plugin sets it inline, from the box as drawn less the card's 1px edges (js/jquery.autocomplete.js
   show()), so with no side padding, content-box sizing and no 1px left nudge (the theme's margin-left) the card's edges
   meet the box's exactly -- in a dialog, on the page, and on the redesigned pages' pickers too.
   The list belongs to no page, so those pickers (tl-forms.css .tl-ui-combo, site-activity-company.css, neither of
   which draws a list of its own) get the same card when the new look is on. */
body.tl-refresh div.ac_results {
    box-sizing: content-box; margin: 2px 0 0; padding: 4px 0; overflow: hidden;
    background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow-lg); color: var(--tl-text);
}
body.tl-refresh div.ac_results li {
    padding: 5px 10px; background: none; color: var(--tl-text); font-family: var(--tl-font); line-height: 16px;
}
body.tl-refresh div.ac_results li.ac_over { background-color: var(--tl-brand-wash); box-shadow: inset 3px 0 0 var(--tl-brand); }

/* ---- 9. the help bubble beside a focused field: a white tooltip with a caret, not the green box (plan 2.7) -------- */
body.tl-refresh fieldset div.form-help-message {
    width: 220px; padding: 8px 10px; z-index: var(--tl-z-sticky);
    background: var(--tl-surface); border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow-lg); color: var(--tl-text); font-size: var(--tl-text-sm); line-height: 1.4;
}
body.tl-refresh fieldset div.form-help-message::before {
    content: ""; position: absolute; left: -6px; top: calc(50% - 5px); width: 9px; height: 9px;
    background: var(--tl-surface); border-left: 1px solid var(--tl-border-strong); border-bottom: 1px solid var(--tl-border-strong);
    transform: rotate(45deg);
}

/* ---- 10. buttons (plan 2.8) ----------------------------------------------------------------------------------------
   .form-button (FormActions' Save/Cancel bar and 173 views): each keeps ITS OWN icon -- the inline background-image
   says check, add, arrow or delete, and "positive" is also the class of Create, Continue and Permanently Remove.
   Positive becomes the brand-filled primary; negative the white secondary.
   An <input type="submit"> button is drawn the same (owner feedback, 2026-10-10: Billing Item Edit's "Save Changes" and
   "Save Changes and Copy + 1" are inputs, and 33 views have some; they kept the legacy grey box). And a button marked
   BOTH negative and positive -- the same page's "Cancel Changes", and five other views' -- is a cancel: drawn as the
   white secondary with its red cross, not filled as a primary (owner feedback, 2026-10-10). */
body.tl-refresh :is(button, a, input).form-button {
    min-height: 30px; margin-right: 8px; padding: 6px 14px 6px 36px; box-sizing: border-box;
    background-color: var(--tl-surface); background-position: 9px center; background-repeat: no-repeat;
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: none;
    color: var(--tl-text); font-family: inherit; font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); line-height: 1.3; text-decoration: none;
}
body.tl-refresh :is(button, a, input).form-button:hover { border-color: var(--tl-brand); color: var(--tl-brand-ink); }
body.tl-refresh :is(button, a, input).form-button.positive:where(:not(.negative)) {
    background-color: var(--tl-brand); border-color: var(--tl-brand);
    color: var(--tl-on-brand); font-weight: var(--tl-weight-semibold);
}
body.tl-refresh :is(button, a, input).form-button.positive:where(:not(.negative)):hover {
    background-color: var(--tl-entity-project-shade) !important; /* beats default.css's .positive hover, itself !important */
    border-color: var(--tl-entity-project-shade); color: var(--tl-on-brand);
}
/* An input cannot hold the ::before the white glyph below is drawn in, so an input primary with one of the four
   recognised icons shows its words alone, centred -- the coloured PNG does not read on the brand fill. */
body.tl-refresh input.form-button.positive:where(:not(.negative)):is([style*="check.png"], [style*="add.png"], [style*="arrow_right.png"], [style*="delete.png"]) {
    padding-left: 14px;
    background-image: none !important; /* beats the input's inline icon */
}
/* On the brand fill a coloured 16px PNG does not read, and CSS cannot put a white well under an inline background
   image. So the FOUR icons FormActions uses are recognised by their file name in the inline style and redrawn as a
   white glyph (a mask over currentColor); any other icon keeps its picture. A remove button (delete.png) is the
   destructive primary: Danger, not Brand (owner decision 7). */
body.tl-refresh :is(button, a).form-button.positive:where(:not(.negative)):is([style*="check.png"], [style*="add.png"], [style*="arrow_right.png"], [style*="delete.png"]) {
    position: relative;
    background-image: none !important; /* beats the button's inline icon */
}
body.tl-refresh :is(button, a).form-button.positive:where(:not(.negative)):is([style*="check.png"], [style*="add.png"], [style*="arrow_right.png"], [style*="delete.png"])::before {
    content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    background: currentColor;
    -webkit-mask: var(--rs-mask-glyph) center / contain no-repeat;
    mask: var(--rs-mask-glyph) center / contain no-repeat;
}
body.tl-refresh .form-button.positive[style*="check.png"] { --rs-mask-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.tl-refresh .form-button.positive[style*="add.png"] { --rs-mask-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.tl-refresh .form-button.positive[style*="arrow_right.png"] { --rs-mask-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.tl-refresh .form-button.positive[style*="delete.png"] {
    --rs-mask-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4.5h11M6 4.5V2.8h4v1.7M4.2 4.5l.8 9h6l.8-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: var(--tl-status-danger); border-color: var(--tl-status-danger);
}
body.tl-refresh .form-button.positive[style*="delete.png"]:hover {
    background-color: var(--tl-status-danger-ink) !important; /* beats default.css's .positive hover, itself !important */
    border-color: var(--tl-status-danger-ink);
}
body.tl-refresh :is(button, a, input).form-button.negative:hover {
    background-color: var(--tl-status-danger-wash) !important; /* beats default.css's .negative hover, itself !important */
    border-color: var(--tl-status-danger); color: var(--tl-text);
}
body.tl-refresh :is(button, a, input).form-button:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }
/* A DISABLED FORM BUTTON LOOKS DISABLED, AND STAYS SO UNDER THE POINTER (restyle sweep, 2026-10-12: User > Change
   Username and Two-Factor, whose Save waits for a valid name, and Create New Brokerage's buttons). Their scripts add
   .disabled, which default.css draws grey with !important (#7F7F7F on #CFCFCF). The primary's hover above outranks that
   fill, so under the pointer the disabled Save lit up as an active Brand Shade button with the grey text on it, 2:1.
   Sunken with Muted text in both states, as section 8's read-only field. The class is written twice so the rule also
   outranks the red delete primary's hover. */
body.tl-refresh :is(button, a, input).form-button.form-button:is(.disabled, :disabled),
body.tl-refresh :is(button, a, input).form-button.form-button:is(.disabled, :disabled):hover {
    background-color: var(--tl-surface-sunken) !important; /* beats default.css's .disabled fill and the primary hovers, all !important */
    border-color: var(--tl-border); cursor: default;
    color: var(--tl-text-muted) !important; /* beats default.css's .disabled grey text, itself !important */
}
body.tl-refresh div#form_actions { padding: 12px 0 4px; }

/* .btn (the Bootstrap 2 grey gradient button: "Lock Tract", "View this Tract on the Map"): the white secondary. The
   gradient goes; an icon class's own picture (icon-lock, icon-map...) stays. */
body.tl-refresh div#content a.btn:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *),
body.tl-refresh div#content button.btn:not([class*="btn-primary"]):not([class*="btn-outline"]):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    padding-top: 5px; padding-bottom: 5px; background-color: var(--tl-surface);
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: none; text-shadow: none;
    color: var(--tl-text); font-weight: var(--tl-weight-medium);
}
/* The gradient goes -- but not a picture a class gives an "icon btn" (restyle sweep, 2026-10-12): the chain of title's
   manual sort buttons (a.manualSort, the view's own <style>) and the file uploads' "Choose from OneDrive"
   (a.onedrive-launcher) lost theirs to this rule and kept only the empty 20px .icon leaves for it. Every "icon btn"
   has a picture, inline or from its class, so .icon is left out; .btn's gradient (0,1,0) still loses to the class's. */
body.tl-refresh div#content :is(a, button).btn:not([class*="icon-"]):not(.icon):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-image: none; }
body.tl-refresh div#content a.btn:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: var(--tl-surface-hover); border-color: var(--tl-brand); color: var(--tl-brand-ink); }
/* A .btn with a colour of its own keeps it (owner feedback, 2026-10-12: the User Approval Queue's buttons). The white
   secondary above took every legacy .btn, so User Approval's red Deactivate and Revoke Invitation -- white text, from
   the page's .colorWhite -- became empty white boxes, and its green Reinstate and Reactivate, and Billing Item
   Approval's green Approve, red De-Approve and amber Reject, lost the colour that says what each one does. Each is drawn
   in its status colour: Success Ink and Danger Ink with white text, the Warning amber with Ink text (white on amber is
   1.6:1, legacy-theme.css), Brand with white for a primary. Hovering darkens the fill a step toward Ink. And a .btn the
   page marks .bold keeps its weight, as semibold, as the section headers have it. */
body.tl-refresh div#content a.btn.btn-success:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: var(--tl-status-success-ink); border-color: var(--tl-status-success-ink); color: var(--tl-on-slate); }
body.tl-refresh div#content a.btn.btn-danger:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: var(--tl-status-danger-ink); border-color: var(--tl-status-danger-ink); color: var(--tl-on-slate); }
body.tl-refresh div#content a.btn.btn-warning:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: var(--tl-status-warning); border-color: var(--tl-status-warning); color: var(--tl-text); }
body.tl-refresh div#content a.btn.btn-primary:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: var(--tl-brand); border-color: var(--tl-brand); color: var(--tl-on-brand); }
body.tl-refresh div#content a.btn.btn-success:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: color-mix(in srgb, var(--tl-status-success-ink) 85%, var(--tl-text)); border-color: color-mix(in srgb, var(--tl-status-success-ink) 85%, var(--tl-text)); color: var(--tl-on-slate); }
body.tl-refresh div#content a.btn.btn-danger:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: color-mix(in srgb, var(--tl-status-danger-ink) 85%, var(--tl-text)); border-color: color-mix(in srgb, var(--tl-status-danger-ink) 85%, var(--tl-text)); color: var(--tl-on-slate); }
body.tl-refresh div#content a.btn.btn-warning:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: color-mix(in srgb, var(--tl-status-warning) 85%, var(--tl-text)); border-color: color-mix(in srgb, var(--tl-status-warning) 85%, var(--tl-text)); color: var(--tl-text); }
body.tl-refresh div#content a.btn.btn-primary:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: color-mix(in srgb, var(--tl-brand) 85%, var(--tl-text)); border-color: color-mix(in srgb, var(--tl-brand) 85%, var(--tl-text)); color: var(--tl-on-brand); }
body.tl-refresh div#content a.btn.bold:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { font-weight: var(--tl-weight-semibold); }
/* THE CYAN BUTTON IS THE PRIMARY (restyle sweep, 2026-10-12). .btn1-cyan (defaultResponsive.css) is a cyan fill with
   white text forced by !important. The white secondary above took the fill but could not lift the text, so every
   a.btn.btn1-cyan was an empty white box: the time-frame button that says which period an Admin Dashboard chart shows
   (Client Activity, Map Activity, Growth Chart; File Cleanup's charts -- their scripts move the class to the chosen
   one), the Import dialog's "Want to Upload Another?", and Trial Stats' "Activate your account" and "Download Now".
   Drawn as the Brand primary, as .btn-primary above: the class's own white text reads on it (6.2:1), so the chosen
   time frame still stands out from the white ones, and hovering darkens the fill a step toward Ink. */
body.tl-refresh div#content a.btn.btn1-cyan:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: var(--tl-brand); border-color: var(--tl-brand); }
body.tl-refresh div#content a.btn.btn1-cyan:hover:not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) { background-color: color-mix(in srgb, var(--tl-brand) 85%, var(--tl-text)); border-color: color-mix(in srgb, var(--tl-brand) 85%, var(--tl-text)); }
/* A .btn whose picture is given inline (class "icon btn" with a style background-image: the reports' Generate Report,
   Schedule... and download buttons, 90 in all) keeps it centred (owner feedback, 2026-10-10: "the icons for the report
   buttons are misaligned"). default.css's .icon pins the picture 2px from the top-left, with !important; the white
   secondary above is 4px taller than today's grey button, so the picture rode up against its top edge. Drawn as the
   icon-* buttons beside them already are (default.css .icon-pdf, .icon-xls): the picture 5px in and centred, the text
   30px in. The two "icon btn"s whose picture comes from their class rather than an inline style -- the chain of
   title's manual sort buttons and "Choose from OneDrive" -- are centred the same way (restyle sweep, 2026-10-12). */
body.tl-refresh div#content a.btn.icon:is([style*="background-image"], .manualSort, .onedrive-launcher):not(:where(.tl-ui, .tl-sa, .tl-sau, .tl-cu, .tl-sup, .tl-sh, .tl-nlog, .tl-inv, .tl-nu, .tl-eu, .tl-ep, .tl-mt, .tl-dx, .tl-te, .tl-pcard, .tl-filterbar, .tl-seg, .tl-supportbar, .tl-entity-head, .tl-pagetools, .tl-actionrow, .bs5) *) {
    padding-left: 30px !important; /* beats default.css's .icon padding, itself !important */
    background-position: 5px center !important; /* beats default.css's .icon position, itself !important */
}

/* The time quick-pick: Billing Item Edit's "0 hr" ... "8 hr" and ":00" ... ":45 min." (a.icon-button.generic.hours /
   .minutes; the page's script puts .selected on the chosen one in each group) (owner feedback, 2026-10-10). Today a
   green #CCFFCC square, the chosen one #43D845. Drawn as the shell's pills draw theirs: a white chip on the Strong
   Border, the pills' hover, and the chosen one in Brand Wash with Brand Ink text and a 2px Brand edge -- fill, text and
   the heavier edge, so not colour alone. The edge's second pixel is an inset shadow and the weight stays, so choosing a
   chip moves nothing. 4px of padding top and bottom takes the chip from 22px to the 24px WCAG 2.2 target height; the
   sides keep today's 3px, so no chip is wider: a 320px phone fits the nine hours exactly on one line today, and any
   extra width wrapped them onto two. The page's own <style> shows and hides the chips by the client's billing
   increment (display, font-size): neither is set here. */
body.tl-refresh div#content a.icon-button.generic:is(.hours, .minutes) {
    padding: 4px 3px; background-color: var(--tl-surface); background-image: none;
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: none;
    color: var(--tl-text) !important; /* beats default.css's a.icon-button colour, itself !important */
    line-height: 1.3; text-decoration: none;
}
body.tl-refresh div#content a.icon-button.generic:is(.hours, .minutes):hover {
    background-color: var(--tl-surface-hover); border-color: var(--tl-text-subtle);
}
body.tl-refresh div#content a.icon-button.generic:is(.hours, .minutes).selected {
    background-color: var(--tl-brand-wash); border-color: var(--tl-brand); box-shadow: inset 0 0 0 1px var(--tl-brand);
    color: var(--tl-brand-ink) !important; /* beats default.css's a.icon-button colour, itself !important */
}
body.tl-refresh div#content a.icon-button.generic:is(.hours, .minutes):focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 1px; }

/* ---- 11. feedback: the alert bar, the error summary, the help box (plan 2.9) ---------------------------------------
   The brand guide's status pattern: the words in Ink on the status Wash, the hue in a 4px rail and in the icon -- a
   mask over the status Ink, replacing exclamation.png / check.png / error.png / help.png. Same boxes, same places, same
   widths. Whether each is shown is left entirely to the page (the alert bar's display comes from its class and its
   inline style). */
body.tl-refresh div#alert {
    position: relative; min-height: 1.2em; height: auto; padding: 6px 10px 6px 34px;
    border: 0; border-bottom: 1px solid var(--tl-border); background-image: none;
    color: var(--tl-text); font-weight: var(--tl-weight-semibold);
}
body.tl-refresh div#alert a { color: var(--tl-text); }
body.tl-refresh div#alert.message { background-color: var(--tl-status-success-wash); box-shadow: inset 4px 0 0 var(--tl-status-success); }
body.tl-refresh div#alert.error { background-color: var(--tl-status-danger-wash); box-shadow: inset 4px 0 0 var(--tl-status-danger); }
body.tl-refresh div.validation-error {
    position: relative; margin-bottom: 6px; padding: 7px 10px 7px 34px;
    background: var(--tl-status-danger-wash); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    box-shadow: inset 4px 0 0 var(--tl-status-danger); color: var(--tl-text);
}
body.tl-refresh div.visible-help {
    position: relative; padding: 9px 12px 9px 36px;
    background: var(--tl-status-info-wash); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    box-shadow: inset 4px 0 0 var(--tl-status-info); color: var(--tl-text);
}
/* The icons. Each box is position:relative above, so its icon sits in the padding the box already leaves for it. */
body.tl-refresh :is(div#alert.message, div#alert.error, div.validation-error, div.visible-help)::before {
    content: ""; position: absolute; width: 16px; height: 16px;
    -webkit-mask: var(--rs-mask-status) center / 16px 16px no-repeat;
    mask: var(--rs-mask-status) center / 16px 16px no-repeat;
}
body.tl-refresh :is(div#alert.message, div#alert.error)::before { left: 12px; top: 50%; margin-top: -8px; }
body.tl-refresh div.validation-error::before { left: 11px; top: 8px; }
body.tl-refresh div.visible-help::before { left: 12px; top: 9px; }
body.tl-refresh div#alert.message::before {
    background-color: var(--tl-status-success-ink);
    --rs-mask-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M5.2 8.3l2 2 3.7-4.1'/%3E%3C/svg%3E");
}
body.tl-refresh :is(div#alert.error, div.validation-error)::before {
    background-color: var(--tl-status-danger-ink);
    --rs-mask-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 4.6v4.2M8 11.2v.1'/%3E%3C/svg%3E");
}
body.tl-refresh div.visible-help::before {
    background-color: var(--tl-status-info-ink);
    --rs-mask-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 7.4v4M8 4.9v.1'/%3E%3C/svg%3E");
}

/* ---- 12. jQuery UI: dialogs and the date picker, as the new pages' cards (plan 2.10) --------------------------------
   Both are appended to <body>, outside #content, so they are scoped by their own classes. The stock theme's blues
   (retired, brand guide section 13) go. */
body.tl-refresh .ui-widget, body.tl-refresh .ui-widget :is(input, select, textarea, button) { font-family: var(--tl-font); }
body.tl-refresh .ui-dialog {
    padding: 0; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: 6px;
    box-shadow: var(--tl-shadow-lg); color: var(--tl-text);
}
body.tl-refresh .ui-dialog .ui-dialog-titlebar {
    padding: 9px 12px; background: var(--tl-surface-raised); border: 0; border-bottom: 1px solid var(--tl-border);
    border-radius: 6px 6px 0 0; color: var(--tl-text);
}
body.tl-refresh .ui-dialog .ui-dialog-title { font-size: var(--tl-text-md); font-weight: var(--tl-weight-semibold); }
body.tl-refresh .ui-dialog .ui-dialog-titlebar-close {
    width: 24px; height: 24px; margin-top: -12px; right: 8px;
    background: none; border: 1px solid transparent; border-radius: var(--tl-radius);
}
body.tl-refresh .ui-dialog .ui-dialog-titlebar-close:hover { background-color: var(--tl-surface-hover); border-color: var(--tl-border); }
/* The close button is EMPTY on this site: jQuery UI builds its icon with .button(), and Bootstrap 5's bundle, loaded
   after it, takes over $.fn.button. So the X is drawn on the button itself, in Muted (Ink on hover); a sprite icon, if
   one ever appears inside, is blanked rather than drawn twice. */
body.tl-refresh .ui-dialog .ui-dialog-titlebar-close::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    background: var(--tl-text-muted);
    --rs-mask-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
    -webkit-mask: var(--rs-mask-close) center / contain no-repeat;
    mask: var(--rs-mask-close) center / contain no-repeat;
}
body.tl-refresh .ui-dialog .ui-dialog-titlebar-close:hover::before { background: var(--tl-text); }
body.tl-refresh .ui-dialog .ui-dialog-titlebar-close .ui-icon { background: none; }
body.tl-refresh .ui-dialog .ui-dialog-content { padding: 12px; color: var(--tl-text); font-size: var(--tl-text-base); }
body.tl-refresh .ui-dialog .ui-dialog-content dt {
    margin-top: 8px; color: var(--tl-text-muted); font-size: var(--tl-text-xs);
    font-weight: var(--tl-weight-semibold); letter-spacing: var(--tl-tracking-label); text-transform: uppercase;
}
body.tl-refresh .ui-dialog .ui-dialog-buttonpane {
    margin: 0; padding: 8px 12px; border-top: 1px solid var(--tl-border); background: var(--tl-surface);
    border-radius: 0 0 6px 6px;
}
body.tl-refresh .ui-dialog .ui-dialog-buttonpane button {
    margin: 0 0 0 8px; padding: 5px 14px; background: var(--tl-surface); border: 1px solid var(--tl-border-strong);
    border-radius: var(--tl-radius); color: var(--tl-text); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium);
}
body.tl-refresh .ui-dialog .ui-dialog-buttonpane button:hover { border-color: var(--tl-brand); color: var(--tl-brand-ink); background: var(--tl-surface-hover); }

body.tl-refresh #ui-datepicker-div {
    padding: 8px; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: 6px; box-shadow: var(--tl-shadow-lg);
    color: var(--tl-text); font-size: var(--tl-text-base);
}
body.tl-refresh #ui-datepicker-div .ui-datepicker-header {
    padding: 4px 0 8px; background: none; border: 0; border-bottom: 1px solid var(--tl-border);
    border-radius: 0; color: var(--tl-text);
}
body.tl-refresh #ui-datepicker-div .ui-datepicker-title { font-weight: var(--tl-weight-semibold); }
body.tl-refresh #ui-datepicker-div .ui-datepicker-title select { padding: 2px 4px; border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); }
body.tl-refresh #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) { top: 6px; border: 0; border-radius: var(--tl-radius); }
body.tl-refresh #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next):hover { background: var(--tl-surface-hover); }
body.tl-refresh #ui-datepicker-div th { color: var(--tl-text-muted); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-semibold); }
body.tl-refresh #ui-datepicker-div td a.ui-state-default {
    padding: 4px 0; background: none; border: 1px solid transparent; border-radius: var(--tl-radius);
    color: var(--tl-text); text-align: center; font-variant-numeric: tabular-nums;
}
body.tl-refresh #ui-datepicker-div td a.ui-state-default:hover { background: var(--tl-surface-hover); border-color: var(--tl-border); }
body.tl-refresh #ui-datepicker-div td a.ui-state-highlight { background: var(--tl-brand-wash); border-color: color-mix(in srgb, var(--tl-brand) 45%, transparent); }
body.tl-refresh #ui-datepicker-div td a.ui-state-active {
    background: var(--tl-brand); border-color: var(--tl-brand); color: var(--tl-on-brand);
    font-weight: var(--tl-weight-semibold);
}
/* The chosen day under the pointer stays the chosen day (restyle sweep, 2026-10-12). The day hover above outranks the
   rule just above (it has :hover too) and took its fill but not its white number, so the chosen day went blank,
   white on the hover's near-white. The primary button's hover shade, as section 10's. */
body.tl-refresh #ui-datepicker-div td a.ui-state-active:hover {
    background: var(--tl-entity-project-shade); border-color: var(--tl-entity-project-shade); color: var(--tl-on-brand);
}

/* ---- 13. index tiles: Reports, Manage and Queues (and Client > Roles' permission groups) ---------------------------
   RADPI's tile is a div.container with an h3 on top, sized, floated and spaced by each page's own <style> (300 x 210, a
   grey #E3E3E3 box in a slate edge). Drawn as the field sections are -- a white card, its h3 the card's header strip,
   its links the white secondary button -- with every size and place left to the page (owner, 2026-10-10: missed by
   the first pass). Matched by structure, an h3 child, because .container is also Bootstrap's layout class.
   The tiles are a fixed 210px tall and the Administration tile is nearly full, so the buttons keep today's 3px of
   vertical padding; border-box keeps their side padding inside the page's width:95%. */
body.tl-refresh div#content div.container:has(> h3) {
    background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow-sm);
}
body.tl-refresh div#content div.container:has(> h3) > h3 {
    margin: 0 0 10px; padding: 8px 10px;
    background: var(--tl-surface-raised); border-bottom: 1px solid var(--tl-border);
    border-radius: calc(var(--tl-radius) - 1px) calc(var(--tl-radius) - 1px) 0 0;
    color: var(--tl-text); font-size: var(--tl-text-md); font-weight: var(--tl-weight-semibold); line-height: 1.3;
}
body.tl-refresh div#content div.container:has(> h3) a.icon-button.index {
    box-sizing: border-box; padding: 3px 8px;
    background-color: var(--tl-surface); border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius);
    font-weight: var(--tl-weight-medium); line-height: 1.3;
    color: var(--tl-text) !important; /* beats default.css's a.icon-button colour, itself !important */
}
body.tl-refresh div#content div.container:has(> h3) a.icon-button.index:hover {
    background-color: var(--tl-surface-hover); border-color: var(--tl-brand);
    color: var(--tl-brand-ink) !important; /* beats default.css's a.icon-button colour, itself !important */
}
body.tl-refresh div#content div.container:has(> h3) li.disabledButton a.icon-button.index {
    background-color: var(--tl-surface-sunken); border-color: var(--tl-border); cursor: default;
    color: var(--tl-text-subtle) !important; /* beats default.css's a.icon-button colour, itself !important */
}
body.tl-refresh div#content div.container:has(> h3) hr { border-top-color: var(--tl-border); }
/* Administration keeps its own colour, as the TL Admin tab does (shell.css .tl-tab-admin): Success Ink, white text. */
body.tl-refresh div#content div.container.admin:has(> h3) { border-color: var(--tl-status-success); }
body.tl-refresh div#content div.container.admin:has(> h3) > h3 {
    background: var(--tl-status-success-ink); border-bottom-color: var(--tl-status-success-ink); color: var(--tl-on-slate);
}
/* Manage's "Manage Libraries" and "CSV Options" flyouts are tiles too, opened over the page on hover. */
body.tl-refresh div#content :is(div#library_menu, div#csv_menu) { box-shadow: var(--tl-shadow-lg); }

}