/* ==========================================================================
   USGN Brand Restyle — generated from the USGN Design Guidelines
   Additive stylesheet only. Targets stable ids/classes the app's own
   JavaScript relies on (#proj_list, #postHeaders, .header2, .filter, etc.)
   rather than literal color attribute VALUES — those were confirmed to
   vary per tenant (e.g. TR.nav_header is #99bbe8 on one site, #87B6DA on
   another). Load this file LAST (after all other stylesheets) so it wins
   cascade ties over the legacy inline <style> blocks and other linked
   stylesheets.

   Assumes any other per-tenant "demo" theme stylesheets (demoblue.css,
   demogreen.css, demodark.css, etc.) are removed from the page — this
   stylesheet fully replaces that theming role. If one of those is still
   linked, its rules may still win specificity/order ties on some elements.

   The legacy utility link bar (.nav_header — "Toggle Left Nav / Edit My
   Info / Admin Area / ...") is hidden unconditionally, in all media.

   ---- Implicit <tbody> gotcha (found via live screenshot, not caught by
   the lxml/cssselect verification used throughout this file) ----
   None of this app's legacy tables include an explicit <tbody> tag. lxml
   parses that literally, so a selector like `table > tr` verified as a
   clean 1-match in Python -- but real browsers insert an implicit <tbody>
   between <table> and <tr> per the HTML5 parsing spec whenever one isn't
   authored explicitly, which silently breaks any `table > tr` (direct-
   child) selector: the tr's real parent is that inserted <tbody>, not the
   table. Confirmed live-broken on Group List and Select Report/Trigger
   (their title-row background never applied, leaving hardcoded white text
   invisible on white). Every rule in this file using a direct-child `>`
   between a table and a `tr` is now written as a pair -- the original
   `table > tr` form plus a `table > tbody > tr` form -- so it matches
   regardless of whether a given browser/page ends up with an implicit
   tbody or not. (Selectors like `tr:has(> td...)` or `table:has(...)
   tr` are NOT affected -- the vulnerable shape is specifically a `>`
   directly between `table` and `tr`.) If you add a new rule anchored off
   a table's direct-child tr, add both forms the same way.

   ---- Reconciliation pass against USGN Design Guidelines.htm ----
   The guidelines doc specifies Inter as the brand typeface, but nothing in
   this legacy app ever loads it as a webfont, so every page up to this
   point has silently rendered on the plain system-font fallback instead.
   Loaded here via @import (no HTML edit required, consistent with the
   additive-only constraint) -- gracefully degrades to the existing
   fallback stack if a deployment can't reach Google Fonts (e.g. an
   air-gapped intranet install), so this is a pure upgrade with no failure
   mode. This changes typography on every page already styled in this file,
   not just new ones -- flagged prominently in handoff-notes.md as the
   highest-visual-impact change in this pass; trivially reversible by
   dropping the @import and the leading 'Inter' below.

   Also added: the full success/warning/info semantic token set + their
   *-bg pairs, --usgn-error-bg, --usgn-blue-700, and --usgn-cyan-100 -- all
   already defined in the guidelines doc's :root but never carried over
   into this file (only --usgn-error made the cut previously). Nothing
   references them yet; they exist so the two open, deliberately-deferred
   decisions elsewhere in this file (a real badge/status-color scheme for
   "Approval Status" on the form-builder summary page, and a possible
   .btn-danger-style treatment for destructive actions like "Remove Firm")
   can be implemented directly against these tokens once the user confirms
   the real-world value sets, instead of re-deriving hex values from the
   doc again at that point. */
/* ==========================================================================
   TABLE OF CONTENTS -- for partial/per-client rollout planning
   ==========================================================================
   This file is organized as one contiguous rule block per legacy page/
   feature, each opened by a banner comment (either "---------- Title
   ----------" or a longer "====...====" block). Every section below also
   carries its own "ROLLOUT:" tag (search the file for "ROLLOUT:" to jump
   between them) classifying it as:
     CORE          -- every client needs this (site header/nav/menus,
                       global reset, footer). Never split these out.
     SHARED        -- reused by several pages that aren't otherwise related
                       (e.g. the Filters/.header2 toolbar treatment, or the
                       add-category/add-firm formcolor title bar). Keep
                       bundled with whichever of its consumer pages ship.
     PAGE-SPECIFIC -- tied to exactly one cgi endpoint/page. Safe to leave
                       out entirely for a client that doesn't expose that
                       page (Group Admin, Menu Builder, Contact Directory,
                       Report Builder, etc. are each fully self-contained).

   To ship a subset for a smaller client: keep everything tagged CORE, add
   the SHARED sections whose consumer page(s) you're keeping, then include
   only the PAGE-SPECIFIC sections for the pages that client actually uses.
   Rule order within the file does NOT matter for cascade purposes except
   where a section's own comments explicitly call out a source-order tie
   (rare, and always noted right next to the rule) -- sections can be lifted
   out as complete, contiguous blocks.

   Section map (title -- cgi/page -- classification):
     Base                                        -- (global)        -- CORE
     Top header band                             -- #site_header    -- CORE
     Filters                                     -- (shared)        -- SHARED
     Grid card wrapper + action bars             -- (shared)        -- SHARED
     Data grid                                   -- #proj_list/#postHeaders -- SHARED
     Vertical ("flipped") log view header column -- form_builder_log.cgi -- PAGE-SPECIFIC
     Download options                            -- log view export -- PAGE-SPECIFIC
     Footer                                      -- #site_footer    -- CORE
     Project name / nav                          -- (shared snippet)-- CORE
     [Project home content area -- removed; now lives per-tenant in each
      Project Home custom-HTML fragment, see the pointer comment where
      this section used to be]
     SlickGrid log view filter row               -- SlickGrid logs  -- PAGE-SPECIFIC
     Admin page contrast fix                     -- admin.cgi       -- PAGE-SPECIFIC
     Form entry / summary                        -- form_builder.cgi / form_builder_data.cgi -- PAGE-SPECIFIC
     Form page centering + title/subtitle        -- form_builder.cgi / form_builder_data.cgi -- PAGE-SPECIFIC
     Summary/view mode: CheckBox and Matrix       -- form_builder_data.cgi -- PAGE-SPECIFIC
     User Administration                         -- admin_pass2.cgi -- PAGE-SPECIFIC
     Group list                                   -- admin_group.cgi -- PAGE-SPECIFIC
     Create New User Group                       -- admin_group.cgi -- PAGE-SPECIFIC
     Copy Group                                   -- admin_group.cgi -- PAGE-SPECIFIC
     Editing Group                                -- admin_group.cgi -- PAGE-SPECIFIC
     Add/Remove Users to Group                    -- admin_group.cgi -- PAGE-SPECIFIC
     Password Configuration / Constraints         -- admin_pwconfig.cgi -- PAGE-SPECIFIC
     Menu Select / Build                          -- build_menu.cgi  -- PAGE-SPECIFIC
     Menu Editor                                  -- build_menu.cgi  -- PAGE-SPECIFIC
     Shared "form" dialog title bar               -- (shared)        -- SHARED
     Add / Remove Category                        -- admin_siteconfig.cgi -- PAGE-SPECIFIC
     Firm Information Form                        -- saveFirm.cgi    -- PAGE-SPECIFIC
     Select a Firm for Editing or Removing        -- firmForm.cgi    -- PAGE-SPECIFIC
     Master Contact Directory                     -- contact.cgi     -- PAGE-SPECIFIC
     Choose A Form -- shared shell                -- show_forms.cgi  -- PAGE-SPECIFIC
     Form Layout Editor                           -- build_form.cgi  -- PAGE-SPECIFIC
     New Form dialog                              -- build_form.cgi  -- PAGE-SPECIFIC
     Select A Report / Select A Trigger           -- show_reports.cgi / report_triggers.cgi -- PAGE-SPECIFIC
     Build Report: New                            -- build_report.cgi -- PAGE-SPECIFIC
     Report Layout Editor                         -- build_report.cgi -- PAGE-SPECIFIC
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --usgn-navy:#005898;
  --usgn-navy-700:#003D69;
  --usgn-navy-100:#E4EEF6;
  --usgn-blue:#0070B8;
  --usgn-blue-700:#005A94;
  --usgn-cyan:#28A8E0;
  --usgn-cyan-700:#1C86B4;
  --usgn-cyan-100:#E7F5FC;
  --usgn-gray-900:#17242F;
  --usgn-gray-800:#263640;
  --usgn-gray-700:#48575F;
  --usgn-gray-500:#7C8B93;
  --usgn-gray-300:#C6D0D6;
  --usgn-gray-200:#DEE6EA;
  --usgn-gray-100:#F2F6F8;
  --usgn-white:#FFFFFF;
  --usgn-success:#2E9E5B;
  --usgn-success-bg:#E6F5EC;
  --usgn-warning:#C98A1E;
  --usgn-warning-bg:#FCF2DE;
  --usgn-error:#D14343;
  --usgn-error-bg:#FAE6E6;
  --usgn-info: var(--usgn-cyan);
  --usgn-info-bg: var(--usgn-cyan-100);
  --usgn-font: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --usgn-radius: 8px;
  --usgn-radius-sm: 4px;
  --usgn-radius-lg: 14px;
  --usgn-radius-pill: 999px;
  /* ---- Added in the dedup pass: these hold literal values that were
     previously hand-retyped identically across many separate rule blocks
     (card shadow x17, focus-ring shadow x33, field border x37, select
     chevron background-image x11) -- consolidated here so each value has
     one source of truth. Purely a "same value, one name" extraction; no
     visual change. ---- */
  --usgn-shadow-card: 0 1px 2px rgba(23,36,47,0.06);
  --usgn-focus-ring: 0 0 0 3px var(--usgn-navy-100);
  --usgn-field-border: 1.5px solid var(--usgn-gray-300);
  --usgn-chevron-svg: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2348575F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
/* ROLLOUT: CORE -- global reset/typography tokens. Every client needs this. */
body{
  font-family: var(--usgn-font) !important;
  background: var(--usgn-gray-100) !important;
  margin: 0 !important;
}
table, td, tr, input, select, a, font{ font-family: var(--usgn-font) !important; }
a{ color: var(--usgn-navy); }
a:hover{ color: var(--usgn-cyan-700); }
#site_content{ padding: 0 22px 22px !important; }

/* ---------- Top header band ---------- */
/* ROLLOUT: CORE -- #site_header (logo/date bar, project nav, dynamic menu bars, user/search rows). Present on every page, every client. */
#site_header{
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
  padding-bottom: 2px;
}
#site_header table{ background: transparent !important; }
/* Site-specific logo/date bar: a separate table from the project-info/menu
   one above, native markup <tr bgcolor='#ffffff'> around the logo image
   plus a date cell with the stable id #tt_today. Confirmed on at least one
   tenant (not present in every reference sample) that the bare
   "#site_header table{background:transparent}" rule above -- written for
   the project-info/menu table, not this one -- was also stripping this
   table's native white background, letting #site_header's gradient show
   through behind the logo instead. This is more specific (adds the
   :has(#tt_today) id match), so it wins over that rule regardless of
   source order. No-op on any tenant that doesn't have this bar at all. */
#site_header table:has(#tt_today){ background: var(--usgn-white) !important; }
TR.project_info{ background: transparent !important; }
TR.project_info TD.name{
  color: var(--usgn-white) !important;
  font-size: 1.15em !important;
  letter-spacing: .01em;
  padding: 10px 12px !important;
}
TR.project_info TD.info{ color: rgba(255,255,255,0.85) !important; }
/* Legacy utility link bar (Toggle Left Nav / Edit My Info / Admin Area / etc.)
   is always hidden, in all media -- not just print. */
TR.nav_header{ display: none !important; }
/* Dynamic menu bar row(s) -- #GlobalMenu, #MainMenu, or any other similarly
   structured menu row the app injects. The app can add more than one of
   these (confirmed: #GlobalMenu and #MainMenu use an identical wrapper), and
   their content/count is dynamic, so this is matched structurally via the
   div.mBar every one of them wraps -- not by a specific id or color value
   (that value was also confirmed to differ per tenant: #99bbe8 vs #87B6DA). */
/* NOTE: .mBar is never a direct child of the <td> -- both confirmed samples
   nest it one level deeper (e.g. <td id="GlobalMenu"><div id="mnuGlobal
   Container"><div id="mnuGlobalBase" class="mBar">) -- so this matches via
   plain descendant combinators, not ">", to survive that wrapper div
   regardless of its id. */
#site_header tr:has(td div.mBar){ background: var(--usgn-white) !important; border-bottom: 1px solid var(--usgn-gray-200) !important; }
#site_header tr:has(td div.mBar) > td, #site_header tr:has(td div.mBar) td > div{ background: transparent !important; }
#site_header tr:has(td div.mBar) > td{ padding: 5px 10px !important; }
/* Confirmed live from two real menus (#GlobalMenu -- icon-only top-level
   buttons; #MainMenu -- text-label top-level buttons): both render through
   the same .mBar/.mBtn/.mnu/.mItem/.mItemT/.mItemA/.mItemS class system, so
   one ruleset here covers both, plus any future menu using the same
   convention. Each menu instance also injects its own per-instance
   <style id="..."> block scoped like "#GlobalMenu div.mBar {...}", pulling
   from the site's subhcolor/subhcolor2 admin config values -- confirmed
   #99bbe8/#000000 on MainMenu, a different pair on GlobalMenu. Bare class
   selectors + !important reliably win over that regardless of load order,
   since it's re-injected each time the menu (re)renders.

   Deliberately NOT touching display/visibility/position/top/left on .mnu
   -- menu-2.0.js manages show/hide and placement directly via inline
   styles on those elements (onmouseover="return m_over(event)" etc.);
   overriding them here would break the menu's actual behavior. */
.mBar{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
}
.mBar a.mBtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 11px !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--usgn-navy) !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.mBar a.mBtn:first-child{ margin-right: 6px !important; }
.mBar a.mBtn:hover{ background: var(--usgn-navy-100) !important; color: var(--usgn-navy) !important; }
/* Active state (this button's flyout is currently open) -- referenced only
   in the app's own injected default CSS, never seen actually applied in a
   sample, but styled defensively since menu-2.0.js almost certainly toggles
   it. */
.mBar a.mBtnA, .mBar a.mBtnA:hover{ background: var(--usgn-navy) !important; color: var(--usgn-white) !important; }
.mBar a.mBtn img{ height: 22px !important; width: auto !important; max-width: none !important; vertical-align: middle !important; }

/* Flyout dropdown panels. Positioned via inline style by menu-2.0.js --
   only visual chrome is styled here. */
.mnu{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(23,36,47,0.18) !important;
  padding: 4px !important;
  font-family: var(--usgn-font) !important;
  z-index: 5000 !important;
}
.mnu a.mItem{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border: none !important;
  border-radius: 5px !important;
  color: var(--usgn-gray-900) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.mnu a.mItem:hover{ background: var(--usgn-navy-100) !important; color: var(--usgn-navy) !important; }
/* Label wrapper used on items that also have a submenu arrow (.mItemA
   sibling). .mItem is itself the flex row (space-between), so this just
   needs to not add its own competing spacing -- the legacy markup sets a
   calculated inline padding-right on some of these (a pre-flex alignment
   hack), which !important here neutralizes. */
.mItemT{
  display: inline-flex !important;
  align-items: center !important;
  padding-right: 0 !important;
}
.mItemT img{ vertical-align: middle !important; max-height: 20px !important; width: auto !important; }
/* Submenu indicator arrow ("▶") */
.mItemA{ flex-shrink: 0; color: var(--usgn-gray-500) !important; font-size: 10px !important; }
.mnu a.mItem:hover .mItemA{ color: var(--usgn-navy) !important; }
/* Separator -- appears as either a bare <div class="mItemS"> or, per the
   app's own default CSS, potentially an <a class="mItemS">; styled
   generically so it works either way. */
.mItemS{
  display: block !important;
  height: 0 !important;
  border: none !important;
  border-top: 1px solid var(--usgn-gray-200) !important;
  margin: 4px 6px !important;
  padding: 0 !important;
}
/* Any other colored, class-less divider row directly in the header table
   (e.g. the 1px black spacer rows between menu rows) — caught by attribute
   PRESENCE, not value, and excluded from rows already styled by class/
   structure above. */
#site_header tr[bgcolor]:not(.nav_header):not(.user):not(.project_info):not(:has(td div.mBar)){
  background: rgba(255,255,255,0.15) !important;
}
TR.user{ background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.9) !important; }
TR.user A{ color: var(--usgn-white) !important; font-weight: 600; }
TR.user A:hover{ color: var(--usgn-cyan) !important; }
/* Some tools (confirmed so far: the Milestone Editor, "Delivery Milestones:
   Milestone Editor V2.0") duplicate the project name into this row as their
   own `<div class="name projNameDup">`, stacked above the "Justin Wilkins :
   logout / QR" line -- that div carries no spacing rules from this file (or,
   as far as could be confirmed without a reference page for this specific
   tool, from anywhere else), so it renders with whatever margin/line-height
   the browser/page default happens to give it, on top of the row's own
   padding -- making this row noticeably taller than every other #site_header
   row. Tightened here without touching the title's own font-size/weight (the
   ask was to shrink the row, not the title): a no-op on any page that
   doesn't have this div at all. */
TR.user td{ padding: 3px 10px !important; line-height: 1.3 !important; }
TR.user .projNameDup{ margin: 0 !important; padding: 0 !important; line-height: 1.25 !important; }
/* #logout_time: an empty `<div>` the page's own JS fills in with a countdown
   ("Session expires in..."-type text). Hidden outright per request, purely
   to claw back more of this row's height -- a no-op on any page where this
   id never renders any content anyway. */
#logout_time{ display: none !important; }
/* QR link: matched by its onclick handler (no id/class of its own). Hidden
   per request. NOTE, same limitation already documented elsewhere in this
   file (item 42, the a.navlink "|" separators): the literal " - " right
   after this link in the markup is a bare text node with no wrapping
   element, so CSS has no way to select or hide it -- hiding the link alone
   will leave a dangling "-" behind it. That needs a small HTML edit to
   actually remove (outside this project's additive-CSS-only constraint
   unless approved) -- flag if that's wanted. */
TR.user a[onclick*="generate_qr_code"]{ display: none !important; }
.search{ color: var(--usgn-white) !important; background: rgba(255,255,255,0.12); border-radius: 999px; }
.search:hover{ background: var(--usgn-cyan-700) !important; color: var(--usgn-white) !important; }

/* ---------- Filters ---------- */
/* ROLLOUT: SHARED -- .filters_container is reused by most log/list pages. Include for any client using log/grid views (nearly everyone). */
.filters_container{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  padding: 14px 16px !important;
  margin: 16px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}
.filter_container{
  color: var(--usgn-gray-700) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}
select.filter{
  display: block; margin-top: 6px;
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  padding: 7px 10px !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
}
select.filter:focus{ outline: none; border-color: var(--usgn-blue) !important; box-shadow: var(--usgn-focus-ring); }
input.filter_btn{
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-weight: 700 !important;
  font-family: var(--usgn-font) !important;
  cursor: pointer;
}
input.filter_btn:hover{ background: var(--usgn-navy-700) !important; }
/* "Folders - Search - Adv. Filter" row: hide the plain '-' separator text by
   zeroing the containing cell's font-size (matched structurally via :has, so
   it only affects the cell that actually holds these links), then give the
   links their own size back plus a chip/button treatment. */
td:has(> a.header2){ font-size: 0 !important; }
a.header2{
  display: inline-flex !important;
  align-items: center;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  padding: 5px 10px !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
a.header2:hover{ background: var(--usgn-navy-100) !important; color: var(--usgn-navy-700) !important; text-decoration: none !important; }

/* ---------- Grid card wrapper + action bars ---------- */
/* ROLLOUT: SHARED -- generic .header2 toolbar/pagination-bar treatment, reused across most log/list pages. */
/* Matched structurally (contains a .header2 cell) with the old exact-value
   selector kept as a harmless fallback for browsers without :has() support. */
table:has(td.header2),
table[bgcolor="#E8E8E8" i]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-collapse: collapse !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
}
/* Neutralize the native beveled cell borders the legacy border="1" HTML
   attribute draws between rows -- those render as an odd tinted seam once
   the row backgrounds are recolored, independent of the outer border above. */
table:has(td.header2) td, table:has(td.header2) tr,
table[bgcolor="#E8E8E8" i] td, table[bgcolor="#E8E8E8" i] tr{
  border: none !important;
}
/* Navy action bar ("Create New / Search / Flip Logs / Extended Sorting").
   Tighter outer padding since the pills below carry their own spacing, and
   font-size:0 hides the plain '-' separator text nodes -- the pills reset
   their own font-size so they stay fully legible. */
td.header2{ background: var(--usgn-navy) !important; padding: 6px 10px !important; font-size: 0 !important; }
td.header2 a{
  display: inline-flex !important;
  align-items: center;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-white) !important;
  padding: 5px 12px !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
td.header2 a:hover{ background: rgba(255,255,255,0.16) !important; color: var(--usgn-white) !important; }

/* Pagination bar ("Viewing X of Y | Previous - Next"). Only the cell that
   actually holds the Previous/Next links gets the font-size:0 treatment
   (matched via :has, not by column position/width) so "Viewing X of Y"
   stays untouched at normal size. */
tr.header2{ background: var(--usgn-navy) !important; }
tr.header2 td{ color: var(--usgn-white) !important; padding: 6px 10px !important; }
tr.header2 td:has(> a){ font-size: 0 !important; }
tr.header2 a{
  display: inline-flex !important;
  align-items: center;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-white) !important;
  padding: 5px 12px !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
tr.header2 a:hover{ background: rgba(255,255,255,0.16) !important; color: var(--usgn-white) !important; }

/* ---------- Data grid ---------- */
/* ROLLOUT: SHARED -- #proj_list (main project list grid) and #postHeaders (standard/non-SlickGrid log view column headers). Needed by any client using either. */
#proj_list{ background: var(--usgn-white) !important; }
#postHeaders{ background: var(--usgn-navy) !important; }
#postHeaders td{ padding: 10px 12px !important; }
#postHeaders a.b{ color: var(--usgn-white) !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; }
/* Bug fix (standard/non-SlickGrid log views, e.g. "Due Diligence Documents (Log)"):
   each column-sort link in this row is marked up as
   <a class="mBtn nonBtn nonBtn2 b">, so it also matches a.nonBtn's "raised
   pseudo-button" treatment below (written for the Group admin form's
   per-section Save/Reset links, an unrelated page) -- that rule's white
   background + navy border was sitting on top of this row's own navy
   background, leaving the white a.b label text nearly invisible against it
   (only the sort-direction icon stayed visible) -- this is what was
   rendering as a row of blank/bordered boxes. Confirmed via grep that
   .nonBar/.nonBtn2/#postHeaders never appear in the SlickGrid log view
   sample, so this override is scoped to #postHeaders and can't affect
   SlickGrid-based logs. */
#postHeaders a.nonBtn{
  display: inline-flex !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 2px !important;
  margin: 0 !important;
}
#postHeaders a.nonBtn:hover{
  background: rgba(255,255,255,0.15) !important;
  color: var(--usgn-white) !important;
}
#proj_list tr[pid] td{
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--usgn-gray-200) !important;
  color: var(--usgn-gray-700) !important;
  font-size: 13.5px !important;
}
/* Zebra rows: any row carrying a bgcolor value (regardless of what it is)
   is the alternate/shaded row in this template. */
#proj_list tr[pid][bgcolor]{ background: var(--usgn-gray-100) !important; }
#proj_list tr[pid]:not([bgcolor]){ background: var(--usgn-white) !important; }
#proj_list tr[pid]:hover, #proj_list tr[pid]:hover td{ background: var(--usgn-navy-100) !important; }

/* ---------- Vertical ("flipped") bid/log view header column ---------- */
/* ROLLOUT: PAGE-SPECIFIC -- form_builder_log.cgi's vertical/transposed log
   view only (reference: "vertical bid log view.html", "View All Bids").

   This app renders the same #post_table data three different ways,
   distinguished by a class the app itself already puts on the table (the
   "Flip Logs" menu item toggles it): class="flipoff" is the standard,
   row-per-record layout -- its single header ROW already has the stable
   id #postHeaders, fully covered above. class="flipon" is this vertical
   layout, where the table is transposed: every FIELD gets its own row, and
   that row's first cell is the "header" (holds the field's label/sort
   link) with every other cell holding one bidder's value for that field.
   There is no #postHeaders-equivalent id here -- confirmed via lxml this
   table only ever carries the bare class, never that id -- so each
   header cell has to be matched structurally instead: it's the only <td>
   in this table whose direct child is a <div class="nonBar"> (every data
   cell is a plain <td>/<td class="b">, never wrapping a .nonBar). Paired
   with the native bgcolor="#cccccc" the app already puts on that same
   cell as a harmless fallback for browsers without :has() support, same
   dual-selector convention used for the "Grid card wrapper" section above.
   Confirmed via lxml this table/its class/both selectors never appear on
   the standard (flipoff) or grid/SlickGrid log view samples -- grid views
   never render #post_table at all (that id only exists there inside a
   dead, commented-out leftover <style> block from an earlier iteration),
   so none of this can leak onto SlickGrid-based logs.

   Same underlying bug as #postHeaders above, just never caught there
   because #postHeaders gave it a scope to hide behind: every header link
   here is markup identical to the standard view's
   <a class="mBtn nonBtn nonBtn2 b">, so with no page-specific override it
   falls through to the bare a.nonBtn rule far below (written for the Group
   admin form's per-section Save/Reset links, a completely unrelated page)
   and renders as a raised outlined-navy pseudo-button -- the "why are
   these buttons" look flagged from the screenshot. Fixed the same way as
   #postHeaders: strip a.nonBtn's button chrome back to plain text inside
   this table specifically, then give the header cell itself the navy
   background + the same white/bold/uppercase small-caps treatment used for
   the standard view's column headers, so both layouts read as the same
   design regardless of orientation. */
#post_table.flipon td:has(> div.nonBar),
#post_table.flipon td[bgcolor="#cccccc" i]{
  background: var(--usgn-navy) !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}
/* The bare .nonBar rule elsewhere in this file (written for the Group
   admin form's centered single-button layout) sets display:block and
   center-aligned text -- fine there, wrong here where this div fills a
   header cell that should read left-aligned like any other column header. */
#post_table.flipon .nonBar{
  display: block !important;
  text-align: left !important;
}
#post_table.flipon a.nonBtn{
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}
#post_table.flipon a.nonBtn:hover{
  background: rgba(255,255,255,0.15) !important;
  color: var(--usgn-white) !important;
}
#post_table.flipon a.b{
  color: var(--usgn-white) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Follow-up fix from a live screenshot: the header column rendered as a huge
   navy box, far wider than any label needed (confirmed empty space, not
   wrapped/overflowing text). Root cause: this table carries a native
   width="100%" HTML attribute with no <colgroup>/column widths of its own,
   so the browser's plain (non-fixed) table-layout algorithm hands ALL
   leftover width, beyond what the 3 bidder columns' own content needs, to
   whichever column looks "flexible" -- here, the header column, since
   nothing on it constrains its width. Fixed with the standard shrink-to-
   content table trick: an explicit small width (which the algorithm only
   honors as a MINIMUM, never as a way to actually shrink below the column's
   real content) paired with white-space:nowrap (so that minimum is the
   label's true single-line width, not a word-wrapped shorter one) --
   together these tell the browser "never treat this column as the one that
   absorbs extra space." Scoped via the plain :first-child (not the :has()/
   attribute pair above) since every row's first cell is always the header
   cell here, structurally, with no exception -- simpler and needs no
   fallback of its own. The freed-up width flows to the 3 already-sized
   bidder columns instead, same as the standard (flipoff) view. */
#post_table.flipon td:first-child{
  width: 1% !important;
  white-space: nowrap !important;
}

/* Follow-up from a live screenshot: the header cell's text and the bidder
   values sitting next to it in the same row didn't line up -- a few px off
   on every row. Root cause: the header cell above got vertical-align:middle
   AND 10px/12px padding, but the bidder-value cells (plain <td class="b">,
   no CSS at all until now) were still on the browser's untouched defaults
   (0 padding, native valign="middle"). Both being "middle" should in theory
   center on the same point regardless of one side having padding and the
   other not -- but real rendering didn't bear that out here, and rather
   than keep tuning the header in isolation and hoping the box-model math
   works out, the reliable fix is to give both sides of the row the exact
   same padding/vertical-align values, so there's no asymmetry left for the
   browser to resolve differently. Also doubles as the padding these value
   cells needed anyway (they had none at all before) for the row-divider/
   zebra treatment right below. */
#post_table.flipon td.b{
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

/* ---------- Vertical/standard log view: row dividers, zebra striping, hover ----------
   ROLLOUT: PAGE-SPECIFIC -- form_builder_log.cgi, both non-SlickGrid layouts.
   Neither layout had anything distinguishing one row from the next (no
   border, no shading), which gets hard to track once a log has more than a
   handful of fields/records -- especially in the vertical layout, where the
   header column is one unbroken block of navy with no seams between fields.
   Grid/SlickGrid views are untouched (confirmed above: #post_table never
   renders there at all). */

/* Vertical (flipon): a hairline divider between every field-row, on both the
   navy header side (a subtle light line, since a gray-200 line would barely
   show against navy) and the white value side (the standard gray-200 hairline
   used elsewhere in this file). :not(:last-child) so the final row doesn't
   double up a line against the footer/pagination bar right below the table. */
#post_table.flipon tr:not(:last-child) td:has(> div.nonBar),
#post_table.flipon tr:not(:last-child) td[bgcolor="#cccccc" i]{
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}
#post_table.flipon tr:not(:last-child) td.b{
  border-bottom: 1px solid var(--usgn-gray-200) !important;
}
/* Zebra striping -- alternate rows get a subtle shift so a field can be
   tracked across 3+ bidder columns without losing the row. Higher
   specificity than the base header/value rules above via the extra
   :nth-child pseudo-class, so it wins on tie regardless of source order. */
#post_table.flipon tr:nth-child(even) td:has(> div.nonBar),
#post_table.flipon tr:nth-child(even) td[bgcolor="#cccccc" i]{
  background: var(--usgn-navy-700) !important;
}
#post_table.flipon tr:nth-child(even) td.b{
  background: var(--usgn-gray-100) !important;
}
/* Row hover -- the whole strip (header + every bidder's value) highlights
   together, not just the sort link inside the header cell (that link still
   keeps its own existing hover treatment above). Placed after the zebra
   rule so hover wins the tie on an even row too. */
#post_table.flipon tr:hover td:has(> div.nonBar),
#post_table.flipon tr:hover td[bgcolor="#cccccc" i]{
  background: var(--usgn-navy-700) !important;
}
#post_table.flipon tr:hover td.b{
  background: var(--usgn-navy-100) !important;
}

/* Standard (flipoff): the same divider/zebra/hover treatment, applied to the
   record rows below #postHeaders (already styled above). Matched via
   :not(#postHeaders) rather than an id/class pattern on the data rows
   themselves -- confirmed via lxml this table's only other <tr>s are the
   3 real bidder rows, so excluding the one known header id is sufficient
   and doesn't depend on the record rows' own (non-stable, per-post) ids. */
#post_table.flipoff tr:not(#postHeaders):not(:last-child) td{
  border-bottom: 1px solid var(--usgn-gray-200) !important;
}
#post_table.flipoff tr:not(#postHeaders) td{
  padding: 10px 12px !important;
  vertical-align: middle !important;
}
#post_table.flipoff tr:not(#postHeaders):nth-of-type(even){
  background: var(--usgn-gray-100) !important;
}
#post_table.flipoff tr:not(#postHeaders):hover{
  background: var(--usgn-navy-100) !important;
}

/* ---------- Vertical log view: zero-post empty-state header column ----------
   ROLLOUT: PAGE-SPECIFIC -- form_builder_log.cgi vertical (flipon) layout only,
   and only when a log has no posts/records yet.
   Reported from a live screenshot + full view-source paste (Pay Application
   Log, vertical view, projectID=2/FormID=116/LogID=Log5): with zero bidders,
   every <tr> renders with ONLY the header/label <td> -- no sibling <td
   class="b"> value cells at all (confirmed via the pasted markup: 1 <td>
   per <tr>, vs. 4 <td>s per <tr> -- header + 3 bidders -- in the populated
   case verified earlier for the row-alignment/zebra work above). The
   existing shrink-to-content fix above (td:first-child{width:1%}) relies on
   there being an unconstrained sibling column to hand the table's
   width="100%" leftover space to; with no sibling at all, the single column
   IS the table's entire content width, so the browser has nowhere else to
   put the leftover space and stretches that one navy column across the
   full table width regardless of its own width value -- hence the
   screen-wide navy bar the screenshots showed.
   Fixed one level up: cap the TABLE itself (not just the cell) to a
   sensible shrink-to-content size for this specific zero-post shape, so
   there's no 100%-wide box left to stretch into. Matched via :only-child
   (true only in the zero-post shape -- confirmed via a direct DOM walk,
   since cssselect can't parse a pseudo-class argument inside :has(), a
   known library-only parsing gap, not a real-browser limitation) rather
   than any post-count check, so this can't misfire once records exist
   again: the populated case's header cell is :first-child but always has
   3 sibling td.b cells, so :only-child never matches it there (confirmed
   0 rows out of 27 have only 1 <td>). Standard and grid views are
   untouched, same as every other .flipon-scoped rule above -- confirmed
   #post_table.flipon has zero matches on either view's markup. */
#post_table.flipon:has(td:only-child){
  width: auto !important;
  min-width: 260px !important;
  max-width: 360px !important;
}
#post_table.flipon td:only-child{
  width: auto !important;
}

/* ---------- Download options ---------- */
/* ROLLOUT: PAGE-SPECIFIC -- log view's "Download in Excel/CSV/..." export list only. */
/* Original markup is a vertical list: "Download in<br>- Excel<br>- CSV<br>..."
   Collapse it into a single-row chip group: hide the <br> line breaks, zero
   out the plain "Download in" / "- " text nodes (can't be styled apart from
   each other since neither is wrapped in a tag), then reintroduce a compact
   label via ::before and turn each link into a small pill button. */
.download_options{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  padding: 10px 12px !important;
  max-width: none !important;
  width: fit-content;
  font-size: 0 !important;
}
.download_options br{ display: none !important; }
.download_options::before{
  content: "Download:";
  font-size: 11.5px;
  font-weight: 700;
  color: var(--usgn-gray-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 2px;
}
.download_options a{
  display: inline-flex !important;
  align-items: center;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-navy-100) !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}
.download_options a:hover{ background: var(--usgn-navy) !important; color: var(--usgn-white) !important; }

/* ---------- Footer ---------- */
/* ROLLOUT: CORE -- #site_footer, present on every page. */
#site_footer{ background: var(--usgn-gray-100) !important; border-top: 1px solid var(--usgn-gray-200) !important; margin-top: 24px !important; }
/* Any bgcolor'd cell inside the footer is a divider line in this template,
   whatever its literal value. */
#site_footer td[bgcolor]{ background: var(--usgn-gray-200) !important; }
/* Any colored <font> tag inside the footer is the muted copyright/attribution
   text — site 2 uses #000000 for this, site 1 uses #9E9E9E, so match on
   presence of the attribute, not its value. */
#site_footer font[color]{ color: var(--usgn-gray-500) !important; }
#footerbottom a[href="http://www.usgn.net" i]{ color: var(--usgn-navy) !important; font-weight: 700 !important; }
#footerbottom a[href="http://www.usgn.net" i]:hover{ color: var(--usgn-cyan-700) !important; }
#site_footer a[href="http://www.usgn.net" i]{ color: var(--usgn-navy) !important; font-weight: 700 !important; }
#site_footer a[href="http://www.usgn.net" i]:hover{ color: var(--usgn-cyan-700) !important; }

/* ---------- Project name / nav (project_name.html snippet) ----------
/* ROLLOUT: CORE -- reusable project-name nav snippet included on most pages.
   Replaces the old #project_name hover-menu skin. Pure CSS, no JS
   dependency (same hover-to-reveal interaction as before), plus
   :focus-within so keyboard users tabbing into the menu links can reach
   them. Requires the updated project_name.html markup (new class names:
   .usgn-pnav__*) — the old #project_name > ul > li.top_level markup won't
   pick up this styling. */
#project_name, #project_name *{ box-sizing: border-box !important; }
#project_name{
  font-family: var(--usgn-font) !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 999 !important;
}
.usgn-pnav__list{ margin: 0 !important; padding: 0 !important; list-style: none !important; }
.usgn-pnav__item{ position: relative !important; z-index: 999 !important; }

.usgn-pnav__trigger{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  cursor: default !important;
  user-select: none;
}
.usgn-pnav__chevron{ transition: transform .15s; flex-shrink: 0; }
.usgn-pnav__item:hover .usgn-pnav__trigger,
.usgn-pnav__item:focus-within .usgn-pnav__trigger{ background: var(--usgn-navy-700) !important; }
.usgn-pnav__item:hover .usgn-pnav__chevron,
.usgn-pnav__item:focus-within .usgn-pnav__chevron{ transform: rotate(180deg); }

.usgn-pnav__menu{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(23,36,47,0.16) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.usgn-pnav__item:hover .usgn-pnav__menu,
.usgn-pnav__item:focus-within .usgn-pnav__menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.usgn-pnav__menu li + li{ margin-top: 2px !important; }
.usgn-pnav__menu a{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  color: var(--usgn-gray-900) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.usgn-pnav__menu a:hover, .usgn-pnav__menu a:focus{ background: var(--usgn-navy-100) !important; color: var(--usgn-navy) !important; }
.usgn-pnav__icon{ flex-shrink: 0; color: var(--usgn-gray-700); }
.usgn-pnav__menu a:hover .usgn-pnav__icon, .usgn-pnav__menu a:focus .usgn-pnav__icon{ color: var(--usgn-navy); }

/* ---------- Project home content area (projhome.cgi, below the menu bars) ----------
   REMOVED from this shared file -- previously lived here as a generic
   `#site_content > table:has(#proj_home_image_td)` conversion (two-column
   table -> responsive flex row, photo styled as a card). Moved into each
   tenant's own self-contained Project Home custom-HTML fragment instead
   (project_home_custom_html.html / project_home_custom_html_2.html in this
   same folder, each scoped via :has(#projTab) so it only ever touches the
   table holding that specific fragment), for two reasons: (1) it's
   unverifiable from here whether any given tenant is actually running
   this file's content as their live /css/client.css at all (per the
   rename-to-deploy note at the top of this file), which made debugging a
   real "photo won't sit beside the tabs" bug on a second tenant
   impossible to reason about with confidence; (2) this keeps the
   convention already established for these fragments' own tab-widget CSS
   -- self-contained, no dependency on this shared file being deployed or
   not conflicting with it. See handoff-notes.md (the item covering this
   removal) for the full story. */

/* ---------- SlickGrid log view: filter (header) row height ----------
/* ROLLOUT: PAGE-SPECIFIC -- SlickGrid-based log views only (does not touch standard log views).
   On log view pages (log view.html), this file loads BEFORE usgn.slick.css and
   the slickgrid library's own slick.grid.css (client.css is linked near the top
   of the page; those two are linked much further down, near the grid markup).
   Normally that load order would let their rules win cascade ties -- but
   usgn.slick.css only sets .slick-headerrow-column height, not the row's own
   containers (.slick-headerrow / .slick-headerrow-columns), which fall back to
   slick.grid.css's default (~25px). That's too short for the filter
   inputs/selects and the per-column tooltip icon, which is why the icon visibly
   overflowed above/below the blue filter bar. !important here beats both of
   those later, non-important rules regardless of link order -- can't touch
   usgn.slick.css directly, so the whole fix lives here instead. */
.slick-headerrow,
.slick-headerrow-columns{
  height: 34px !important;
}
.slick-headerrow-column{
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.slick-headerrow-column input{
  height: 26px !important;
  line-height: 26px !important;
  box-sizing: border-box !important;
}
/* Native <select> filter dropdowns (the "Select Filter" boxes): usgn.slick.css
   never sized these at all (its input rule only covers input[type=text/number]),
   so they were rendering at whatever height the browser's own OS-chrome select
   control wants -- typically bigger than our 26px text inputs, and often not
   fully shrinkable via height/line-height alone since the native control's
   padding/chrome floor is browser-drawn, not CSS box model. appearance:none
   strips that native chrome entirely so height/padding fully control the
   rendered size (and matches height with the plain filter inputs), then a
   small inline SVG chevron (same style as the .usgn-pnav__chevron elsewhere
   in this file) replaces the native dropdown arrow that appearance:none
   removes. */
.slick-headerrow-column select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  line-height: 26px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 20px 0 6px !important;
  border: 1px solid var(--usgn-gray-300, #C6D0D6) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  background-color: var(--usgn-white, #fff) !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 10px 6px !important;
}
/* Safety net for anything else that might live in a filter cell (icons,
   custom widgets) that isn't a plain input/select -- keeps it from ever
   visually exceeding the row, whatever it turns out to be. */
.slick-headerrow-column > *{
  max-height: 26px !important;
  box-sizing: border-box !important;
}
/* The info/tooltip icon in the first filter cell is taller than the old 25px
   row -- flex centering on the parent above now keeps it vertically centered;
   this just stops it from stretching to the row's full height. */
.slick-headerrow-column:first-child img{
  width: 18px !important;
  height: auto !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
}

/* ---------- Admin page (admin.cgi): white-on-light-background contrast fix ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin.cgi only.
   .adminBodyHeader / a.adminLink3 / .bookmarks are hardcoded white in this page's own
   inline <style> block (in the <head>). That only reads correctly against a dark/colored
   page background -- almost certainly one of the per-tenant "demo" theme stylesheets this
   restyle replaces (see the note at the top of this file: demoblue.css, demogreen.css,
   etc., commented out in the page's own markup). Now that the page background is this
   theme's light gray/white, that white text is washed out.

   Confirmed these three class names aren't used on the project home or log view pages
   already restyled (only appear in admin page.html), so recoloring them here is scoped
   to this page and can't affect the others. */
.adminBodyHeader{
  color: var(--usgn-navy) !important;
}
a.adminLink3{
  color: var(--usgn-navy) !important;
}
a.adminLink3:hover{
  color: var(--usgn-cyan-700) !important;
}
.bookmarks{
  color: var(--usgn-navy) !important;
}
a.bookmarks:hover{
  color: var(--usgn-cyan-700) !important;
}

/* Follow-up fix from a live screenshot: the left admin nav column (Client
   Management / User Management / .../ Password Management / .../ Speed
   Test) was wrapping several of its longer labels onto two lines. Root
   cause is a native HTML WIDTH=125 attribute, repeated on every cell in
   this nav's own table -- confirmed via grep unique to this page (no other
   reference file in this folder uses width=125 anywhere), so every
   selector below is anchored off that value plus this page's own
   a.adminLink class rather than a generic column-position heuristic:
     - table[width="125"] is the nav's own inner table (confirmed via lxml:
       exactly 1 such table app-wide, and it contains all 22 a.adminLink
       items plus the 4 section-header cells, so :has(a.adminLink) is a
       belt-and-suspenders anchor, not strictly required for uniqueness).
     - Its 20 empty "divider" cells (the thin bgcolor=#CCCCCC rows between
       every item) each separately carry the same width=125 attribute --
       that's what was actually fixing this column at 125px in the
       browser's table-layout algorithm, more than the table's own width
       did. Confirmed via lxml: exactly 20 such cells inside this table.
     - The table's own single outer wrapping cell (confirmed via lxml:
       exactly 1 td[width="125"] app-wide has a <table> as a direct child --
       every other td[width="125"] is one of the 20 empty divider cells
       above) also needs freeing, or the inner table would just get
       clipped/wrapped again by its own parent.
   Widening this column doesn't crowd the page: the sibling cell to its
   right is a fixed 20px spacer image, and the actual content pane after
   that has no width attribute at all, so it simply absorbs whatever space
   is left -- confirmed via reading the surrounding table structure.

   FOLLOW-UP FIX (live screenshot showed a large empty gap open up between
   the now-narrow white nav box and the dashed vertical spacer line to its
   right -- the nav box itself was correctly sized, but the space around it
   wasn't). Root cause: the OUTER wrapping cell sits in a DIFFERENT table
   than the inner nav table -- one declared `width=100%` -- and originally
   its native WIDTH=125 was the only thing keeping it from being treated as
   a flexible column there; every leftover pixel of that outer table's
   100% was going entirely to the real content `<TD>` on the far right
   (the only other column with no width attribute at all). Switching that
   outer cell to `width:auto` (the first fix above) removed its firm
   sizing, so it became a SECOND flexible column in that same 100%-wide
   table -- browsers split leftover space across every flexible column
   instead of giving it all to the content pane, so the nav's outer cell
   was handed a chunk of width its own (now-narrow) content never asked
   for, rendering as the visible gap. Fixed with the same shrink-to-content
   trick already used elsewhere in this file for this exact class of bug
   (see the vertical bid-log-view header column, item 34 in handoff-
   notes.md): `width:1%` is only ever honored as a MINIMUM by the table
   layout algorithm, never as a way to shrink below the cell's real content
   -- but critically, a cell with ANY explicit width (even 1%) is no longer
   "flexible" for leftover-space purposes, so this one stops competing with
   the content `<TD>` for the outer table's extra space. Split into its own
   rule (rather than folded into the `width:auto` group above) since these
   two cells sit in different tables and need different values. */
table[width="125"]:has(a.adminLink),
table[width="125"]:has(a.adminLink) td[width="125"]{
  width: auto !important;
}
td[width="125"]:has(> table){
  width: 1% !important;
  white-space: nowrap !important;
}
table[width="125"]:has(a.adminLink) a.adminLink,
table[width="125"]:has(a.adminLink) td.adminLink2{
  white-space: nowrap !important;
}

/* ---------- Form entry / summary (form_builder.cgi + form_builder_data.cgi) ----------
/* ROLLOUT: PAGE-SPECIFIC -- form_builder.cgi / form_builder_data.cgi (form entry + summary views). Needed by any client with active forms (nearly everyone).
   Covers both form-builder templates: the editable entry/edit form ("sample form
   Entry.html") and the read-only summary/view form ("sample form Summary.htm").
   Both samples share the same #form / #form_body ids and .propLabel/.propValue
   label-value column classes, so this section targets those stable ids/classes.
   The outer #form table (bgcolor="#E8E8E8") already gets the standard card
   treatment from the "Grid card wrapper" rules above (table[bgcolor="#E8E8E8" i])
   -- confirmed present on both samples, no new rule needed for that shell. */

/* Top title/breadcrumb bar: "Drawings (Log) - Forms - <Project> - <State>".
   The entry sample renders this as a bare <th bgcolor="navy">; the summary
   sample as <tr class="header"><td bgcolor="navy">. Matched on the literal
   "navy" keyword (not a hex value) plus tr.header -- both samples confirm this
   is a hardcoded template default, unlike the hex bgcolor values elsewhere in
   the app that were confirmed tenant-configurable. Not hiding the plain " - "
   separator text here (unlike the a.header2 bars below) since .header is
   reused on a nested <font> around "(Log)" in the summary sample -- zeroing
   font-size on the shared class would risk hiding that label text too, so the
   separators are just recolored to read cleanly on navy instead. */
th[bgcolor="navy" i],
td[bgcolor="navy" i],
tr.header{
  background: var(--usgn-navy) !important;
}
th[bgcolor="navy" i],
tr.header td{
  padding: 9px 14px !important;
}
.header, .headerPrint, font.header, font.headerPrint{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--usgn-white) !important;
  text-decoration: none !important;
}
a.header:hover, a.headerPrint:hover{
  color: var(--usgn-cyan) !important;
}

/* "Post New / Edit / Delete / Copy / Thread / View Thread / Print Preview /
   Logs / Search" toolbar row (id="form_header" in both samples, plus a
   repeated id="form_footer" row at the bottom of the summary sample only).
   a.header2 already gets full pill-button treatment from the bare a.header2
   rule above (originally written for the log view's "Folders - Search" bar),
   which applies here automatically since both samples confirm these links
   carry the same a.header2 class -- no new anchor styling needed. The one new
   thing here: the toolbar's own wrapping element (entry: bare <th> + nested
   <table id="form_header">; summary: <tr id="form_header"><td class="header2">
   + nested <table>) both hardcode the same literal bgcolor="#b8b8b8"
   (confirmed in both samples, the same kind of template-constant literal as
   the confirmed #E8E8E8 on the outer #form table), so it's recolored here to
   the theme's neutral gray-100 instead of flat mid-gray. */
th[bgcolor="#b8b8b8" i],
table[bgcolor="#b8b8b8" i]{
  background: var(--usgn-gray-100) !important;
}

/* Bug fix (caught via screenshot: text was rendering nearly invisible,
   pale-white-on-pale-gray): in the summary sample, #form_header's OUTER
   element is a <td class="header2"> (confirmed above, "Grid card wrapper +
   action bars" section) -- that rule was written for the log view's own
   navy pill bar, where td.header2 IS the navy-background element, so it
   also paints its <a> descendants white (td.header2 a{color:white}, a
   higher-specificity rule than the bare a.header2{color:navy} above since
   it's two combined selectors vs one). Here though, that td.header2's navy
   background is invisible -- covered by the nested bgcolor="#b8b8b8" table
   (recolored to gray-100 just above) sitting on top of it -- so the anchors
   were left white-on-gray-100, i.e. unreadable. #form_header's and
   #form_footer's a.header2 links need the *other* convention (navy
   text on a light background), so it's forced back here with an ID-scoped
   override (ID beats any number of classes, so this reliably wins over
   td.header2 a regardless of source order) without touching the log
   view's original td.header2/tr.header2 behavior anywhere else. */
#form_header a.header2, #form_footer a.header2{
  color: var(--usgn-navy) !important;
  background: transparent !important;
}
#form_header a.header2:hover, #form_footer a.header2:hover{
  background: var(--usgn-navy-100) !important;
  color: var(--usgn-navy-700) !important;
}

/* Summary/view mode only: the exact same toolbar above renders TWICE --
   once at #form_header (right under the title bar) and again at
   #form_footer (bottom of the form, confirmed present only in the summary
   samples -- "sample form Summary.htm" and "all tools form summary.html" --
   never in the entry-mode samples). That's redundant, so the top copy is
   hidden and the bottom copy is pinned to the bottom of the viewport
   instead, so it's reachable while scrolling through a long form without
   jumping back up or down. Scoped via :has(#form_footer) so entry mode's
   own #form_header (which has no #form_footer counterpart) is untouched. */
#form:has(#form_footer) #form_header{
  display: none !important;
}
#form_footer td{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  background: var(--usgn-white) !important;
  box-shadow: 0 -2px 8px rgba(23,36,47,0.12) !important;
  padding: 10px !important;
}

/* Form title ("Drawings"). Neither sample's own inline <style> block defines
   .formtitle (only .header/.header2/.propLabel/.propValue/#printLink are
   defined there), so it likely relies on an external stylesheet not included
   in this handoff and renders as unstyled black text today. */
#form_body .formtitle{
  font-family: var(--usgn-font) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--usgn-navy) !important;
  padding: 4px 0 12px !important;
  border-bottom: 2px solid var(--usgn-gray-200) !important;
  margin-bottom: 4px !important;
}

/* Body background: #form_body hardcodes bgcolor="#edf1e2" (pale green) in
   both samples, matching the same tint used on individual field inline
   styles below -- swapped for the theme's white card interior. */
#form_body{
  background: var(--usgn-white) !important;
}

/* Field label / value columns. .propValue is reused on nested elements too
   (e.g. a <tr class="propValue"> inside the Comments textarea's helper
   table), so this is a class selector, not scoped to just <td>. */
#form_body td.propLabel{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--usgn-gray-700) !important;
  padding: 0 12px 0 4px !important;
}
#form_body .propValue{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--usgn-gray-900) !important;
  padding: 0 4px !important;
}

/* Section divider <hr>s used throughout the Spacer rows -- default browser hr
   renders as a thick 3D inset rule; restyled as a hairline matching the card
   border color used elsewhere in this file. */
#form_body hr{
  border: none !important;
  border-top: 1px solid var(--usgn-gray-200) !important;
  margin: 6px 0 !important;
}

/* Text / number / date inputs, selects, textareas. Several of these
   (Currency1, _Date2, TextArea3) hardcode an inline
   background-color:#edf1e2;color:#517513 pair per-field in both samples (a
   tenant "editable field" color, matching the .propValue tint above) --
   !important is required to win over that inline style, consistent with
   this file's convention throughout. Native size/width is deliberately left
   alone (not overridden): some fields are intentionally narrow (Currency1's
   size=3) and others wide (Text16/17's size=40), so forcing a uniform width
   would break that. */
#form_body input[type="text"],
#form_body input[type="password"],
#form_body input:not([type]),
#form_body select,
#form_body textarea{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
}
#form_body input[type="text"]:focus,
#form_body input[type="password"]:focus,
#form_body input:not([type]):focus,
#form_body select:focus,
#form_body textarea:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Same appearance:none + inline chevron treatment as the SlickGrid filter
   selects above, for a consistent dropdown look app-wide. Excludes
   multiple/size selects (e.g. a file tool's attachments listbox, confirmed
   in "all tools form.html" as select.file[multiple][size="5"]) since those
   render as a scrollable list box regardless of appearance -- a dropdown
   chevron floating in the corner of a list box doesn't make sense there;
   they still get the base border/font/radius styling above, just not this
   chevron treatment. */
#form_body select:not([multiple]):not([size]){
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 28px !important;
  background-color: var(--usgn-white) !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}

/* Checkboxes ("Skip This Notification" / "Test Notification") and radios
   (Radio1: Original/Revision/Delta/Bulletin/Addendum) -- accent-color
   recolors the native control in current evergreen browsers without needing
   to replace the control's markup, which isn't editable here. */
#form_body input[type="checkbox"],
#form_body input[type="radio"]{
  accent-color: var(--usgn-navy) !important;
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
#form_body label{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  vertical-align: middle !important;
}

/* File inputs (PDF / CAD File / Revit File / Image File(s)). The native file
   picker's own "Choose File" sub-control is restyled via ::file-selector-button
   (broadly supported in current evergreen browsers, degrades to the browser
   default in anything older -- no functional loss either way). The "Remove"
   link shares the same .file class but is an <a>, not the <input>, so it's
   styled separately just below. */
#form_body input.file{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-700) !important;
}
#form_body input.file::file-selector-button{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  margin-right: 10px !important;
  cursor: pointer !important;
}
#form_body input.file::file-selector-button:hover{
  background: var(--usgn-navy-700) !important;
}
#form_body a.file{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-gray-500) !important;
  text-decoration: none !important;
}
#form_body a.file:hover{
  color: var(--usgn-error) !important;
}

/* Date field helper icon + "mm/dd/yyyy" hint text, matched by proximity to
   the date input (name="_Date2" in this sample) via its "_Date" prefix --
   that prefix is the form-builder engine's own naming convention for date
   fields generally, not specific to this one field, and is used here instead
   of an id since the entry page's cells don't carry per-field ids (only the
   summary page's td's do). */
#form_body input[name^="_Date"] ~ img{
  vertical-align: middle !important;
  margin: 0 4px !important;
  opacity: .6 !important;
}
#form_body input[name^="_Date"] ~ span{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  color: var(--usgn-gray-500) !important;
  vertical-align: middle !important;
}

/* Validation note ("* NOTE: One Drawing per pdf, please.") -- recolored from
   the raw font color="red" to the theme's error red. */
#form_body font[color="red" i]{
  color: var(--usgn-error) !important;
  font-family: var(--usgn-font) !important;
}
/* Summary-sample-only "Publish Original/Revised Drawing" section labels
   (font size=3 color=gray, in the propLabel column) -- styled as an eyebrow
   label matching the design guidelines' small-caps section-label convention.
   The paired propValue column's "_________________________" is the same
   font[color=gray] tag used purely as a fake divider line; hidden outright
   since #form_body hr already provides a real divider elsewhere in this same
   form, and the eyebrow label to its left is enough section separation on
   its own. */
#form_body td.propLabel font[color="gray" i]{
  color: var(--usgn-gray-500) !important;
  font-family: var(--usgn-font) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
#form_body .propValue font[color="gray" i]{
  display: none !important;
}

/* Submit / Cancel buttons -- plain <input type="button"> with no class,
   distinguished only by their value= label. That label is a stable, literal
   convention of this templating engine (not tenant-configurable button
   text), consistent across both samples. */
#form_body input[type="button"]{
  font-family: var(--usgn-font) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
  border-radius: var(--usgn-radius) !important;
  cursor: pointer !important;
  margin: 4px !important;
}
#form_body input[type="button"][value="Submit"]{
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
  border: none !important;
}
#form_body input[type="button"][value="Submit"]:hover{
  background: var(--usgn-navy-700) !important;
}
#form_body input[type="button"][value="Cancel"]{
  background: transparent !important;
  color: var(--usgn-gray-700) !important;
  border: var(--usgn-field-border) !important;
}
#form_body input[type="button"][value="Cancel"]:hover{
  background: var(--usgn-gray-100) !important;
  color: var(--usgn-gray-900) !important;
}

/* .button / .buttons: form-side CTA links styled to look like buttons via a
   page-level inline <style> (confirmed e.g. on "Upload Revision(s)" and,
   per earlier work on this file, "Create Change Order"/"Create Invoice"/
   "Approve/Reject This Post" elsewhere) -- original recipe was a flat,
   dated light-blue (#87B6DA) fill with a gray drop-shadow on the text and a
   typo'd -moz-border-border-radius that never did anything. Re-themed here
   to match the same solid-navy pill convention already used for
   input.filter_btn and the Submit button above, so every button-styled
   control in a form reads as one consistent family. Scoped to #form_body
   specifically (per request) rather than left bare, since .button/.buttons
   are common, generic class names that could exist unstyled/differently
   outside the form-builder pages this file doesn't cover. */
#form_body .button, #form_body .buttons{
  display: inline-block;
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-family: var(--usgn-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
#form_body .button:hover, #form_body .buttons:hover{
  background: var(--usgn-navy-700) !important;
  color: var(--usgn-white) !important;
}

/* ---------- Form page: centering + prominent title/subtitle ----------
/* ROLLOUT: PAGE-SPECIFIC -- same form_builder.cgi/form_builder_data.cgi pages as the section above; keep the two together.
   Informed by formstyle.css (a previous, now-superseded form stylesheet the
   user still had a copy of) and "all tools form.html" (a form exercising
   many more tool/field types than the two samples above: Matrix, Calculate,
   Currency, Approval/signature, a richer multi-file Attach widget, Company/
   Contact/Role reference selects, Task, Reference counts, a code block). */

/* Center #form on the page. formstyle.css did this the same way (margin
   auto) but also set background:transparent/border:0 on #form, to blend it
   into a background image on #site_content that this design doesn't use --
   that part is NOT carried over, since #form's white-card look (see
   table[bgcolor="#E8E8E8" i] above) is intentional here. Table width varies
   per form (700 in the two form_builder samples, 950 in "all tools
   form.html"), but margin auto centers it regardless of that value since the
   HTML width attribute still gives the table intrinsic sizing; max-width
   keeps it from overflowing on narrower viewports. */
#form{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

/* Form title / subtitle (div.formTitle|formtitle, div.subTitle|subtitle --
   both casings defined defensively in formstyle.css, carried over here since
   CSS class selectors are case-sensitive, unlike the attribute-value
   matches used elsewhere in this file). formstyle.css rendered both as a
   flat tenant-color (the old formcolor, #7FA0CB) banner at 25px/20px.

   HISTORY (kept for context, not because any of it is still live):
   (1) first re-themed as a centered navy/blue/cyan gradient title banner
       (matching #site_header's gradient) with a solid navy-700 subtitle
       band underneath;
   (2) tried a white-card/left-accent-border variant (background:white,
       border-left:4px solid navy on the title, small uppercase navy
       "eyebrow" subtitle) -- reverted back to (1) per explicit request
       before shipping;
   (3) explored several more centered directions (flat solid navy, a soft
       tinted banner, a minimal underline-only treatment, a muted two-tone
       vertical gradient) -- landed on a flattened version of the muted
       vertical-gradient option, below.

   CURRENT: flat solid navy title (no gradient at all) -- chosen specifically
   so this bar matches the existing td[bgcolor="navy" i]/tr.header breadcrumb
   bar above it (same var(--usgn-navy), not a different shade), rather than
   sitting right next to it in a visibly different navy like navy-700 did
   during review. Reserves the site's one multi-hue gradient for
   #site_header alone, per the "don't repeat the brand gradient everywhere"
   reasoning discussed with the user. Subtitle drops the old solid navy-700
   band for a quiet gray-100/navy-700 pairing -- the same light-chip
   convention already used elsewhere in this file (e.g. the propHeader
   hover treatment), not a new one-off. */
#form_body .formTitle, #form_body .formtitle{
  display: block !important;
  font-family: var(--usgn-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  text-align: center !important;
  letter-spacing: .01em !important;
  padding: 14px 20px !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  margin: 4px 0 10px !important;
  text-shadow: none !important;
}
#form_body .subTitle, #form_body .subtitle{
  display: block !important;
  font-family: var(--usgn-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy-700) !important;
  background: var(--usgn-gray-100) !important;
  text-align: center !important;
  letter-spacing: .01em !important;
  padding: 8px 16px !important;
  border-radius: var(--usgn-radius) !important;
  margin: 0 0 10px !important;
  text-shadow: none !important;
}

/* Smaller inline sub-heading (span.smallsubtitle), red inline note
   (div.note -- same role as the font[color=red] "* NOTE" text handled
   above, just as a dedicated class instead), and a legacy fake-hr div
   (div.horizontalrule) -- all three defined in formstyle.css but not
   actually used in either sample seen so far; re-themed defensively in case
   another form page uses them. */
#form_body .smallsubtitle{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
}
#form_body .note{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--usgn-error) !important;
}
#form_body .horizontalrule{
  background: var(--usgn-gray-200) !important;
  height: 1px !important;
  border: none !important;
  margin: 6px 0 !important;
}

/* Calculate / Currency numeric fields: right-align (reads more naturally as
   a number). Calculate fields specifically are computed rather than
   directly typed (there's a "=" recalculate trigger link next to them in
   "all tools form.html"), so shown borderless like plain output text rather
   than an editable-looking field, same distinction formstyle.css made. */
#form_body [id^="Calculate"] .propValue input,
#form_body [id^="Currency"] .propValue input{
  text-align: right !important;
}
#form_body [id^="Calculate"] .propValue input{
  border: none !important;
  background: transparent !important;
}

/* File tool's "Attach" button (input.file[type="button"], distinct from the
   file picker itself -- confirmed in "all tools form.html") and its
   attachments listbox (select.file, a real multi-select list box, excluded
   from the dropdown-chevron treatment above). */
#form_body input.file[type="button"]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  margin-left: 8px !important;
  cursor: pointer !important;
}
#form_body input.file[type="button"]:hover{
  background: var(--usgn-navy-700) !important;
}
#form_body select.file option{
  padding: 4px 6px !important;
}
#form_body select.file option:checked{
  background: var(--usgn-navy-100) !important;
  color: var(--usgn-navy) !important;
}

/* Generic per-field helper text (id ending in "_note", e.g. Approval1_note's
   "Type your password to Approve") -- styled like the .hint convention from
   the design guidelines. */
#form_body [id$="_note"]{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  color: var(--usgn-gray-500) !important;
}

/* ---------- Summary/view mode: CheckBox and Matrix tools ----------
/* ROLLOUT: PAGE-SPECIFIC -- form_builder_data.cgi, only relevant if a client's forms use the CheckBox or Matrix field tools.
   Confirmed via "all tools form summary.html" (the read-only view of the
   same form as "all tools form.html"). These two tools render completely
   different markup in summary mode than in entry mode -- there are no
   inputs to style, just plain text/list/table markup -- so the entry-mode
   rules above (input[type=checkbox], the Matrix input[type=text] rule)
   don't apply here at all and these tools were rendering with raw browser
   defaults. */

/* CheckBox tool summary: a plain <ul><li type="disc"|"circle"> list (the
   disc/circle alternation appears to be a rendering artifact of the tool,
   not a meaningful distinction, so both are unified here). Default browser
   list indent (~40px) reads as oddly deep-indented next to every other
   field's flush-left text, so it's replaced with a tight custom navy dot
   bullet (same small circular-dot idea as .badge::before in the design
   guidelines) and a much smaller hanging indent.
   Note: list-style:none has to be set on the <li> itself, not just the
   parent <ul> -- the type="disc"/"circle" attribute on each <li> is a
   presentational hint tied directly to that element, which otherwise wins
   over a value merely inherited from the ul and was rendering as a native
   bullet stacked right next to the custom ::before dot (confirmed via
   screenshot: two dots per line). */
#form_body td.propValue ul{
  margin: 4px 0 !important;
  padding-left: 0 !important;
}
#form_body td.propValue ul li{
  list-style: none !important;
  list-style-type: none !important;
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  line-height: 1.7 !important;
  padding-left: 18px !important;
  position: relative !important;
}
#form_body td.propValue ul li::before{
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 9px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--usgn-navy) !important;
}

/* Matrix tool: a small spreadsheet-like grid, rendered as a plain
   <table class="propValue matrix"> in both modes -- summary mode
   (border="1", default browser 3D-beveled border) holds plain numbers;
   entry mode (border="0", confirmed in "all tools form.html") holds an
   <input type="text"> per cell. The earlier "neutralize native cell
   borders" rule (table[bgcolor="#E8E8E8" i] td) already strips borders from
   every td here since it's a descendant of the outer #form table -- which
   left the numbers/inputs floating with no grid lines at all. This adds
   back a deliberate, uniform hairline grid (gray-200 borders) applied the
   same way to every cell, with no special-cased header row/column, since
   whether the first row/column of a given Matrix instance is actually a
   header isn't guaranteed. The higher specificity here (id + class + type)
   safely wins over that earlier border:none rule regardless of source
   order. */
#form_body table.matrix{
  border-collapse: collapse !important;
  margin-top: 4px !important;
}
#form_body table.matrix td{
  border: 1px solid var(--usgn-gray-200) !important;
  padding: 5px 8px !important;
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
}
/* Entry-mode cells: the <input> fills the cell exactly (no gap, no separate
   inner border) so the cell's own gray-200 border reads as a single grid
   line rather than a bordered input floating inside a bordered cell. Cell
   padding moves onto the input itself. */
#form_body table.matrix td:has(input){
  padding: 0 !important;
}
#form_body table.matrix td input[type="text"]{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  background: transparent !important;
}
#form_body table.matrix td input[type="text"]:focus{
  outline: none !important;
  background: var(--usgn-navy-100) !important;
}

/* ---------- User Administration (admin_pass2.cgi, "user admin.html") ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin_pass2.cgi only.
   A two-panel legacy widget: left panel is the Grouplist/Userlist browser
   (sort links + a big multi-select listbox + a prev/search/next row), middle
   panel is a "Functions:" list of action buttons. Both panels' outer <td>
   AND their nested inner <table> hardcode the same literal bgcolor="#005898"
   (this page's own pre-restyle dark theme), and the header row inside each
   hardcodes bgcolor="#FFFFFF" for contrast against that navy body.

   Scope note: bgcolor="#005898" and bgcolor="#FFFFFF" both appear on OTHER
   pages too (the #GlobalMenu/#MainMenu nav bar rows use the same navy hex;
   admin page.html has an unrelated white spacer row), so every selector
   below is deliberately anchored through the page-unique `.mojo` class
   (confirmed via grep: `mojo`, `adminText`, `adminLinks`, `actButton`,
   `searcher`, `font.admin`, `.userText`, and all the ids below appear only
   in user admin.html, nowhere else in the app) rather than matching the
   bgcolor values bare -- a bare `[bgcolor="#005898"]` rule would have also
   repainted every page's global nav bar. All selectors verified against the
   real DOM with lxml/cssselect: 2 panels, 2 inner tables, 1 left-panel body
   row, 2 header rows, 4 font.admin labels, 9 adminLinks, 12 actButtons, 3
   searcher links, 1 datalist select, 2 userDesc/groupDesc blocks. */

/* Panel -> white card (background, border, radius, shadow match the card
   language used everywhere else in this file). Padding is 0 here so the
   header row's divider (below) can span the card's full width; body rows
   get their own padding restored further down. */
td.mojo[bgcolor="#005898" i]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  padding: 0 !important;
  vertical-align: top !important;
}
/* Inner table/row that also carry the navy bgcolor go transparent so the
   card background above shows through as one flat surface, not two stacked
   navy rectangles. */
td.mojo[bgcolor="#005898" i] table[bgcolor="#005898" i],
td.mojo[bgcolor="#005898" i] tr[bgcolor="#005898" i]{
  background: transparent !important;
}
td.mojo[bgcolor="#005898" i] table[bgcolor="#005898" i]{
  border-collapse: collapse !important;
  width: 100% !important;
}
/* Neutralize the inner table's native border=1/bordercolor beveled cell
   borders (left panel only carries these, harmless no-op on the right
   panel's border=0 table) -- same "strip native cell borders now that the
   surface is a themed card" idea as the grid/form sections above. */
td.mojo[bgcolor="#005898" i] table[bgcolor="#005898" i] td{
  border: none !important;
}

/* Center the whole widget on the page (was width=100%, edge-to-edge). Scoped
   via :has() to the one outer <table> that wraps both the userDesc/groupDesc
   row and the two panels -- confirmed via manual parent-walk (cssselect's
   :has() doesn't accept this argument shape in the Python test library, a
   known gap noted elsewhere in this file; real browsers support it) that
   both panel <td>s share this exact table as their nearest table ancestor,
   and #site_content has only this one direct-child <table>, so nothing else
   on the page is affected. */
#site_content table:has(td.mojo[bgcolor="#005898" i]){
  width: auto !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

/* Trailing spacer column (a bare `<td width=100%>&nbsp;</td>`, the third
   cell in the panels row after the two `.mojo` panels) -- this is what was
   making the centered table above look off-center: it silently soaked up
   all the remaining space out to max-width, so the visible panels stayed
   bunched at the left edge of an otherwise-centered but much wider box.
   Matched via adjacent-sibling off the middle panel (verified unique to
   this exact row) and removed outright since the two real panels no longer
   need a flex spacer once the table itself is centered. */
td.mojo[bgcolor="#005898" i][width="200"] + td{
  display: none !important;
}

/* Left Grouplist/Userlist panel a bit wider than its native width=350 --
   the sort-link toolbar (7 pills: Full Name / * / Username / Email / UID /
   Phone / Search) was wrapping to a second line at 350px. */
td.mojo[bgcolor="#005898" i][width="350"]{
  width: 460px !important;
}

/* Middle "Functions" panel a bit wider than its native width=200 (confirmed
   unique vs. the left panel's width=350 via the same attribute). The nested
   table[bgcolor="#005898"] rule above already sets width:100%, so it fills
   this wider td automatically. Widened slightly further (280->300) so
   "Group Functions:" / "User Functions:" have room on one line -- paired
   with the white-space:nowrap safety net on font.admin below. */
td.mojo[bgcolor="#005898" i][width="200"]{
  width: 300px !important;
}

/* Header strip ("Grouplist"/"Userlist" via #groupTitle, and "Functions:") --
   was plain white-on-navy contrast before; now that the whole panel is
   white, it gets its own bottom divider instead so it still reads as a
   section header. */
td.mojo[bgcolor="#005898" i] tr[bgcolor="#FFFFFF" i]{
  background: var(--usgn-white) !important;
  border-bottom: 1px solid var(--usgn-gray-200) !important;
}
td.mojo[bgcolor="#005898" i] tr[bgcolor="#FFFFFF" i] td{
  padding: 10px 14px !important;
}
/* font.admin covers both panel titles and the "Group Functions:"/"User
   Functions:" subheadings in the middle panel -- one rule, since all four
   play the same "section label" role. This is also the fix for the
   washed-out/mismatched "Groups" title color reported from the live page:
   this page's own inline <style> never sets a color for .admin at all, so
   it was falling through to whatever admin_pass.css (not included in this
   folder, so not directly editable) happens to set -- forced to the theme
   navy here instead. */
font.admin{
  font-family: var(--usgn-font) !important;
  color: var(--usgn-navy) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: .01em;
  white-space: nowrap !important;
}

/* Body padding: restore breathing room now that the outer card's own
   padding was zeroed above. Left panel's single content row carries its own
   bgcolor="#005898" (handled separately from the middle panel's plain rows,
   which have no bgcolor at all). */
td.mojo[bgcolor="#005898" i] tr[bgcolor="#005898" i] > td.mojo{
  padding: 14px !important;
}
td.mojo[bgcolor="#005898" i] table[bgcolor="#005898" i] tr:not([bgcolor]) > td.mojo{
  padding: 1px 14px !important;
}
/* The real source of the oversized gap between Functions-panel buttons
   (reported from a live screenshot -- input.actButton/#done's own
   margin/padding above is only ~1-4px, nowhere near what was showing):
   each cell is markup like `<td class=mojo>&nbsp;&nbsp;&nbsp; <input
   class=actButton ...></td>` -- plain nbsp text directly followed by the
   button on the same inline line in the original markup. Converting the
   button to display:block (so it fills the row) pushed that leading nbsp
   text onto its own line ABOVE the button, at the cell's default
   (un-set, browser-default-size) text size -- effectively inserting a
   whole extra text line's height before every single button. Neutralized
   the same way this file already hides other purely-decorative inline
   text (the "&nbsp;-&nbsp;" separators in a.header2/a.adminLinks bars):
   font-size:0 on the cell, relying on input.actButton/#done already
   setting their own explicit font-size (12.5px / 13px) to stay fully
   legible regardless. Verified via direct DOM walk: matches exactly the
   13 button-holding cells (12 actButton + Done) inside the two .mojo
   panels' own bgcolor="#005898" tables, and does not match the
   "Hide Disabled Users" checkbox+label row (a checkbox, not a block
   button, so it never had this problem) or the plain "&nbsp;" spacer
   rows. */
td.mojo[bgcolor="#005898" i] table[bgcolor="#005898" i] td.mojo:has(> input[type="button" i]){
  font-size: 0 !important;
}

/* Sort/view link toolbar ("Full Name * - Username - Email - UID - Phone -
   Search" and "View User Groups / View Firms") -- same "hide the plain '-'
   separator text via font-size:0, give the links their own pill-chip
   treatment" idea as a.header2 elsewhere in this file, scoped to the two
   stable wrapping ids so it can't leak onto any other .adminLinks element. */
#userLinks, #groupViewLinks{
  font-size: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
}
a.adminLinks{
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--usgn-font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-navy-100) !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
a.adminLinks:hover{
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
}

/* Group/user listbox (select#datalist.adminText, size=31 multi-select) --
   plain bordered/rounded field treatment matching every other select in
   this file. */
select.adminText{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 4px !important;
  background: var(--usgn-white) !important;
  /* Overrides the element's own inline style="width:350px" (plus a
     width=350 HTML attribute) so it fills the wider panel above instead of
     staying pinned at the old fixed width. */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
select.adminText:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
select.adminText option:checked{
  background: var(--usgn-navy-100) !important;
  color: var(--usgn-navy) !important;
}

/* Prev/Search/Next row under the listbox (a.searcher x3: "<<", "Search",
   ">>"). This is the other half of the reported color-conflict: this page's
   own <style> never sets a color for .searcher either, so it was falling
   through to whatever the page's own searcher.css (not in this folder)
   defines -- forced to the theme navy/cyan link convention here instead,
   consistent with a.adminLinks and the rest of the page. */
a.searcher{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  text-decoration: none !important;
}
a.searcher:hover{
  color: var(--usgn-cyan-700) !important;
}

/* Function buttons (12x input.actButton: Show Group Users, Administer
   Group, Add/Edit/Copy/Delete/Enable/Disable User(s), Reset Password(s),
   Set Homepage(s), User Projects, Become User) -- outlined navy secondary
   button, full width of the panel, stacked list. */
input.actButton{
  display: block !important;
  width: 100% !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin: 1px 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}
input.actButton:hover{
  background: var(--usgn-navy-100) !important;
}
input.actButton:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  border-color: var(--usgn-gray-300) !important;
  color: var(--usgn-gray-500) !important;
}
/* "Done" (#done) is the one action button with no class in the markup --
   given the primary (solid navy) treatment to read as the panel's main
   confirm action, one level up from the outlined actButtons above. */
#done{
  display: block !important;
  width: 100% !important;
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
}
#done:hover{
  background: var(--usgn-navy-700) !important;
}

/* "Hide Disabled Users" checkbox + label. */
#td_hide_disabled input[type="checkbox"]{
  accent-color: var(--usgn-navy) !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
#td_hide_disabled label{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  color: var(--usgn-gray-900) !important;
  vertical-align: middle !important;
}

/* Top helper text blocks (#userDesc / #groupDesc, both wrapping a
   .userText row): font[size="2"]/<b> is the bold instruction label ("To Add
   a User:", "Group View:"), font[size="1"] is the plain description that
   follows it. */
#userDesc font[size="2"], #groupDesc font[size="2"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
}
#userDesc font[size="2"] b, #groupDesc font[size="2"] b{
  color: var(--usgn-navy) !important;
}
#userDesc font[size="1"], #groupDesc font[size="1"]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  color: var(--usgn-gray-700) !important;
}

/* ---------- Group list ("Choose a Group", admin_group.cgi list view, "group list.html") ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin_group.cgi list view. Part of the Group Admin page family (see also: Create/Copy/Edit Group, Add-Remove Users below).
   Inside #site_content: one outer <table border=1 width=100%> with two rows -- a title
   row (<tr bgcolor=#FFFFFF>, nested table holding a <font color=#ffffff> title + a
   white-styled "Help" link) and a body row holding a <table bgcolor=#005898> "navy
   panel" (the same panel-to-card pattern used in the User Administration section)
   containing a big select[name=GroupID] listbox, two width=7 spacer gutter cells (left
   alone -- see task), and 5 unclassed input[type=button]s distinguished only by their
   name= attribute.

   Scope check done first: grepped every other reference HTML file for select[name=
   GroupID] (also appears in edit group.html, but only as a hidden <input>, never a
   <select> -- confirmed via grep the string "select[name=GroupID" / "select name=GroupID"
   is unique to this page) and for the 5 button name= values (new_group/edit_group/
   del_group/copy_prompt/view_users -- unique to this page). Both bgcolor="#005898" and
   bgcolor="#FFFFFF" independently appear on many other pages (nav bars, User
   Administration panels, footer dividers), so neither is matched bare anywhere below --
   every rule here is anchored through the page-unique select[name="GroupID"] anchor,
   same defensive approach as the User Administration section's .mojo scoping. */

/* Outer table: center on the page (was width=100%, edge-to-edge) and treat as the
   overall white card container, same "table:has(td.header2)" card recipe used
   elsewhere in this file. IMPORTANT: the bare selector table:has(select[name=
   GroupID]) actually matches TWO tables on this page -- the true outer table AND
   the nested navy-panel table two levels down (both have select[name=GroupID] as a
   descendant, since :has() checks descendants at any depth, not just direct
   children) -- confirmed by walking the parsed DOM directly in Python (cssselect's
   Python test library can't even parse a :has() argument that is itself an
   attribute selector, a confirmed library gap, not a real browser limitation, so
   this had to be checked structurally either way). Styling BOTH tables identically
   here would double up the white-card border/shadow into a "card inside a card"
   look, so this rule is anchored to #site_content's directly-owned table only (the
   inner navy panel is never a direct child of #site_content -- it's nested inside
   the outer table's own <td>), same ">"-scoped pattern this file used to use for
   the (since-removed, now per-fragment) Project Home photo-column conversion.
   Verified via direct DOM walk: exactly 1 direct-child table of
   #site_content, and it does contain select[name=GroupID] as a descendant. */
#site_content > table:has(select[name="GroupID"]){
  width: auto !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  border-collapse: collapse !important;
  box-shadow: var(--usgn-shadow-card) !important;
}
table:has(select[name="GroupID"]) td,
table:has(select[name="GroupID"]) tr{
  border: none !important;
}
/* Title row bug: <tr bgcolor=#FFFFFF> holding a <font color=#ffffff> title -- the
   exact same invisible white-on-white pattern found and fixed earlier this session
   (see the "font.admin"/Groups header note and #form_header a.header2 fix). Fixed the
   same way: give the row the real gradient banner background it was clearly meant to
   sit on, and leave the white text/link exactly as-is rather than recoloring the text
   dark.

   First attempt used tr:has(font[color=#ffffff]), but that's the same double-match
   trap as edit group.html's propHeader row below: the descendant form of :has()
   matched BOTH the true title <tr bgcolor=#FFFFFF> AND the plain inner <tr> of the
   nested title table (font is a descendant of both, at different depths) --
   confirmed via direct DOM walk (2 matches). Rewritten below using a direct-child
   combinator off the outer table instead (> tr[bgcolor="#FFFFFF" i]), which only the
   true title row satisfies (the inner nested-table <tr> is several levels deep, not
   a direct child of the outer table) -- re-verified via direct DOM walk: exactly 1
   match. The bgcolor value itself is never matched bare anywhere else in this file
   (tr bgcolor=#FFFFFF also appears as an unrelated header row in user admin.html),
   so it's anchored through the select[name=GroupID] table + direct-child combinator
   the same way the rest of this section is scoped. cssselect's Python test library
   can't parse :has() with an attribute-selector argument (confirmed gap, not a real
   browser limitation, same note as above) nor the [attr=value i] case-insensitive
   flag, so this whole compound selector was verified by walking the parsed DOM
   directly in Python instead. */
#site_content > table:has(select[name="GroupID"]) > tr[bgcolor="#FFFFFF" i],
#site_content > table:has(select[name="GroupID"]) > tbody > tr[bgcolor="#FFFFFF" i]{
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
}
#site_content > table:has(select[name="GroupID"]) > tr[bgcolor="#FFFFFF" i] td,
#site_content > table:has(select[name="GroupID"]) > tbody > tr[bgcolor="#FFFFFF" i] td{
  padding: 12px 16px !important;
}
#site_content > table:has(select[name="GroupID"]) > tr[bgcolor="#FFFFFF" i] table,
#site_content > table:has(select[name="GroupID"]) > tbody > tr[bgcolor="#FFFFFF" i] table{
  background: transparent !important;
  width: 100% !important;
}
#site_content > table:has(select[name="GroupID"]) > tr[bgcolor="#FFFFFF" i] font[color="#ffffff" i],
#site_content > table:has(select[name="GroupID"]) > tbody > tr[bgcolor="#FFFFFF" i] font[color="#ffffff" i]{
  font-family: var(--usgn-font) !important;
  font-size: 15px !important;
  letter-spacing: .01em !important;
}
/* The "Help" link shares the exact same inline style="font: 8pt Arial;color:white" as
   edit group.html's own propHeader-row Help link (confirmed via grep: this literal
   inline style string appears on only these two pages) -- styled the same way here,
   independently scoped to this page's own table anchor. */
#site_content > table:has(select[name="GroupID"]) > tr[bgcolor="#FFFFFF" i] a[style*="color:white" i],
#site_content > table:has(select[name="GroupID"]) > tbody > tr[bgcolor="#FFFFFF" i] a[style*="color:white" i]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  opacity: .9;
}
#site_content > table:has(select[name="GroupID"]) > tr[bgcolor="#FFFFFF" i] a[style*="color:white" i]:hover,
#site_content > table:has(select[name="GroupID"]) > tbody > tr[bgcolor="#FFFFFF" i] a[style*="color:white" i]:hover{
  opacity: 1;
  text-decoration: underline !important;
}

/* Navy panel -> white card (blend flat into the outer card above, same idea as the
   User Administration .mojo panels going background:transparent). Padding restored on
   its real content cells only; the two width=7 gutter cells are explicitly zeroed so
   they stay the narrow spacers they were before -- task explicitly calls these out as
   "leave alone". */
table:has(select[name="GroupID"]) table[bgcolor="#005898"]{
  background: transparent !important;
  width: 100% !important;
}
table:has(select[name="GroupID"]) table[bgcolor="#005898"] td:not([width="7"]){
  padding: 14px !important;
}
table:has(select[name="GroupID"]) table[bgcolor="#005898"] td[width="7"]{
  padding: 0 !important;
}

/* select[name=GroupID]: size=20 real listbox (not a dropdown), so base field styling
   only -- no appearance:none/chevron treatment, consistent with the
   :not([multiple]):not([size]) exclusion used for listboxes elsewhere in this file. */
select[name="GroupID"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
select[name="GroupID"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* The 5 action buttons (Create a New Group / Edit Group / Delete Group / Copy Group
   To... / View Group's Users) share no class, only distinguished by name= -- scoped
   via the same table:has(select[name=GroupID]) anchor per the task's suggested
   approach. Tight outlined-navy secondary treatment, matching input.actButton's
   just-tuned tight vertical rhythm from the User Administration section. The
   inline style="width:130px" on each <input> is overridden by width:100% !important
   here (a plain !important external rule always wins over a non-!important inline
   style, regardless of specificity). */
table:has(select[name="GroupID"]) input[type="button"]{
  display: block !important;
  width: 100% !important;
  max-width: 170px !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin: 1px 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}
/* Same leftover-<br> bug as menu select.html's button stack (item 14) --
   the markup separates these 5 buttons with a trailing <br> each, a relic
   of the old inline-button layout; now that they're display:block, every
   <br> adds a redundant extra blank line on top of the block-level break.
   Confirmed via direct DOM walk: exactly 5 <br> children in the one <td>
   that holds all 5 buttons. */
table:has(select[name="GroupID"]) td:has(> input[type="button"]) > br{
  display: none !important;
}
table:has(select[name="GroupID"]) input[type="button"]:hover{
  background: var(--usgn-navy-100) !important;
}

/* ---------- Create New User Group (admin_group.cgi create form, "create group.html") ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin_group.cgi create form. Part of the Group Admin page family.
   Inside #site_content: a beveled 3D-bordered outer <table border=1 borderColorDark=...
   width=640> wrapping a form with its own inner <table border=1 cellspacing=0
   cellpadding=3 align=center> holding a Group Name text input, a Copy Group select
   (name=src_gid), 4 real label+checkbox pairs, and Create/Cancel buttons distinguished
   by value=.

   Scope check done first: grepped every other reference HTML file for src_gid,
   copy_users/copy_menus/copy_forms/copy_reports, and the outer table's bordercolor=
   "#888888"/inner table's cellpadding="3" attribute values -- all confirmed unique to
   this page. The one exception: input[name="group_name"] is ALSO present on edit
   group.html (its own Group Name field, different table entirely) -- both pages
   legitimately want the exact same field look, but to avoid this one rule silently
   double-applying across two independently-scoped page sections (and interacting with
   edit group.html's own field rules on specificity ties), the group_name rule below is
   anchored through this page's own unique table[cellpadding="3"] anchor rather than
   left bare; edit group.html gets its own separate, separately-scoped copy further
   down in this file. */
table[bordercolor="#888888"]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}
table[bordercolor="#888888"] td{
  border: none !important;
}
table[cellpadding="3"]{
  border: none !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}
/* Native border="1" on this inner table (no bordercolor attribute given, unlike
   the outer bevel table above) was still rendering the browser's default
   beveled cell borders -- shared by copy group.html's own #group_copy_table,
   which uses the exact same cellpadding="3" attribute on its own inner
   field table (confirmed via grep + lxml: this selector already matches both
   pages' inner tables), so this one fix removes the same visible border on
   both pages at once. */
table[cellpadding="3"] td,
table[cellpadding="3"] th{
  border: none !important;
  padding: 10px 14px !important;
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
}
/* Label column ("Group Name:" / "Copy Group:") -- excludes the final row's
   colspan=2 button cell, which gets its own centered treatment just below. */
table[cellpadding="3"] tr > td:first-child:not([colspan]){
  font-weight: 700 !important;
  color: var(--usgn-gray-700) !important;
  text-align: right !important;
  white-space: nowrap !important;
  vertical-align: top !important;
}
table[cellpadding="3"] td[colspan="2"]{
  text-align: center !important;
  padding-top: 14px !important;
}

table[cellpadding="3"] input[name="group_name"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 260px !important;
}
table[cellpadding="3"] input[name="group_name"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* select[name=src_gid]: a plain single dropdown (no multiple/size attribute), so it
   gets the full appearance:none + inline chevron treatment, same base64 SVG chevron
   used throughout this file. */
select[name="src_gid"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 260px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 28px !important;
  background-color: var(--usgn-white) !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}
select[name="src_gid"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* 4 real label+checkbox pairs (copy_users/copy_menus/copy_forms/copy_reports) --
   accent-color convention, scoped to this page's table anchor since bare
   input[type=checkbox]/label selectors would otherwise reach into every other page's
   checkboxes/labels. */
table[cellpadding="3"] input[type="checkbox"]{
  accent-color: var(--usgn-navy) !important;
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
table[cellpadding="3"] label{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  margin-right: 14px !important;
  vertical-align: middle !important;
}

/* Create (primary solid navy) / Cancel (secondary outline), distinguished by value=
   exactly like the #form_body input[type=button][value=Submit]/[value=Cancel]
   convention already established in this file, just re-scoped to this page's own
   table anchor instead of #form_body (which doesn't exist here). */
table[cellpadding="3"] input[type="button"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  margin: 0 4px !important;
}
table[cellpadding="3"] input[type="button"][value="Create"],
table[cellpadding="3"] input[type="button"][value="Copy"]{
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
  border: none !important;
}
table[cellpadding="3"] input[type="button"][value="Create"]:hover,
table[cellpadding="3"] input[type="button"][value="Copy"]:hover{
  background: var(--usgn-navy-700) !important;
}
table[cellpadding="3"] input[type="button"][value="Cancel"]{
  background: var(--usgn-white) !important;
  color: var(--usgn-navy) !important;
  border: 1.5px solid var(--usgn-navy) !important;
}
table[cellpadding="3"] input[type="button"][value="Cancel"]:hover{
  background: var(--usgn-navy-100) !important;
}

/* ---------- Copy Group ("Copying Group '...'", admin_group.cgi copy form, "copy group.html") ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin_group.cgi copy form. Part of the Group Admin page family.
   Shares the exact same outer bevel-table markup as Create New User Group above
   (identical border="1" borderColorDark/borderColorLight/bordercolor="#888888"
   attributes) and the exact same cellpadding="3" inner field table -- confirmed
   via grep + lxml both already match this page for free, so the white card,
   border removal, base td font/padding, checkbox accent-color, and Cancel
   button are inherited automatically with no new CSS. This page uses <th> for
   its label column instead of create group.html's plain <td> though (a
   genuine markup difference, not tenant config), and has its own stable
   #group_copy_table id -- confirmed unique via grep -- so the few genuinely
   new bits below are scoped through that id directly rather than the
   attribute-based anchors above. */
#group_copy_table th{
  font-weight: 700 !important;
  color: var(--usgn-gray-700) !important;
  white-space: nowrap !important;
}
/* Radios (Overwrite/Merge Permissions) -- scoped to this id so it can't reach
   into any other page's radios. */
#group_copy_table input[type="radio"]{
  accent-color: var(--usgn-navy) !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
/* select[name=dst_gid]: a plain single dropdown, same appearance:none + inline
   chevron treatment as select[name=src_gid] on the Create New User Group page. */
select[name="dst_gid"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 260px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 28px !important;
  background-color: var(--usgn-white) !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}
select[name="dst_gid"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* ---------- Editing Group (admin_group.cgi edit form, "edit group.html") ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin_group.cgi edit form. Part of the Group Admin page family; also covers pass mgmt.html's shared propHeader pattern (see Password Configuration below).
   The big one: an outer <table width=640 cellpadding=0 cellspacing=0 bgcolor=#005898
   bordercolor=#000000 border=1> wraps one direct inner <table width=100%
   bgcolor=#005898 cellpadding=1 cellspacing=0 border=0> holding a long single-column
   property list (~80 propLabel/propValue rows, 21 propSep section dividers, 98 Yes/No
   radios, 29 selects, and 22 .nonBtn pseudo-button "Save"/"Reset" links) -- all built
   on classes (.propHeader/.propSep/.propLabel/.propValue/.nonBar/.nonBtn) defined in
   THIS page's own inline <style> block.

   Scope check done first: grepped every other reference HTML file for propHeader,
   propSep, nonBar, nonBtn -- confirmed 0 matches anywhere else, so those four classes
   are used bare below with no risk of leaking onto another page. .propLabel/.propValue
   ARE reused elsewhere (the #form_body-scoped form-builder pages, and project home
   page.html) but those existing rules are scoped under #form_body, an id this page
   never has -- and to keep the reverse direction just as safe (these NEW rules must
   not leak onto those OTHER pages either), every .propLabel/.propValue rule below is
   additionally anchored through table:has(td.propHeader), confirmed unique to this
   page. The outer/inner table pair both carry bgcolor=#005898, which independently
   appears all over the app (nav bars, User Administration's .mojo panels, group
   list.html's panel) -- distinguished here not via :has() but via each table's own
   cellpadding value (outer=0, inner=1), confirmed via grep to be a unique combination
   with bgcolor=#005898 found only on these two exact lines of this one page. */

/* Outer table: the overall card container -- centered (640 already fits comfortably,
   so only margin:auto is needed, no width/max-width change). Inner table goes
   transparent so it reads as one flat surface with the outer card, same "mojo panel"
   idea as the User Administration section. Native border=1 beveled cell borders on
   both tables stripped. */
table[bgcolor="#005898"][cellpadding="0"]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}
table[bgcolor="#005898"][cellpadding="1"]{
  background: transparent !important;
}
table[bgcolor="#005898"][cellpadding="0"] td,
table[bgcolor="#005898"][cellpadding="1"] td{
  border: none !important;
}

/* propHeader row bug: <tr valign=top bgcolor=#FFFFFF> holding <td class=propHeader>
   (which this page's own <style> sets to color:white) -- the identical invisible
   white-on-white bug as group list.html's title row above, fixed the same way: real
   gradient banner background, white text left exactly as-is. Matched via
   :has(> td.propHeader) -- the direct-child form of :has() -- rather than a plain
   :has(td.propHeader), because the plain descendant form matches TWO rows here: the
   actual title <tr> AND its own ancestor <tr> (the outer table's single top-level
   row that wraps the whole <form>...<table> content), since td.propHeader is a
   descendant of both at different depths. Confirmed via direct DOM walk in Python
   (matches jumped from 2 down to the correct 1 once restricted to a direct child).
   Also matched via :has() rather than the bare bgcolor value (also a plain spacer/
   header row elsewhere on this and other pages). */
tr:has(> td.propHeader){
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
}
tr:has(> td.propHeader) td{
  padding: 12px 16px !important;
}
/* Second markup variant of the exact same header pattern, found on pass mgmt.html:
   its very FIRST section header puts class="propHeader" directly on the <tr> itself
   (<tr valign=middle align=center class=propHeader><td colspan=2><a class=help2>...)
   rather than on a child <td> like every other propHeader row in this file (including
   this same page's other 4 section headers, which DO use the td-based pattern and so
   are already covered by tr:has(> td.propHeader) above). Confirmed via lxml this
   tr.propHeader form only exists on pass mgmt.html (edit group.html's one propHeader
   is on a td, not a tr), so no collision risk. */
tr.propHeader{
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
}
tr.propHeader td{
  padding: 12px 16px !important;
}
.propHeader{
  font-family: var(--usgn-font) !important;
  font-size: 16px !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  /* pass mgmt.html's own inline <style> additionally hardcodes
     background-color:#FFFFFF directly on .propHeader (shared with .propLabel/
     .propValue in one comma-separated rule in that page's own <head>) -- since
     that applies straight to the propHeader <td> itself, it was painting a solid
     white rectangle OVER the gradient banner set on the parent <tr> above (a
     cell's own background always paints over its row's background), which is
     why those section-header bands rendered as blank white gaps with invisible
     white-on-white text instead of a visible navy banner. Forcing transparent
     here lets the row's gradient show through in all cases. Confirmed harmless
     on edit group.html: that page's own .propHeader rule never sets a
     background-color at all, so this is a no-op there. */
  background: transparent !important;
}
.propHeader a{
  color: var(--usgn-white) !important;
  text-decoration: underline !important;
}
/* Hover color for links inside a propHeader banner (a.help2 on pass mgmt.html,
   plain <a> on edit group.html) -- neither page's own hover rule is safe to fall
   back to here: pass mgmt.html's own a.help2:hover targets navy, which would be
   invisible against this navy gradient background; edit group.html's generic
   a:hover targets a light blue that's merely adequate. Cyan reads clearly on the
   navy/blue/cyan gradient and matches this file's established hover-brightens-
   to-cyan convention used elsewhere (e.g. the global a:hover rule). */
.propHeader a:hover{
  color: var(--usgn-cyan) !important;
}
/* Same shared "Help" link inline style as group list.html above (style="font: 8pt
   Arial;color:white" -- confirmed via grep to appear only on these two pages). Kept
   consistent with the > direct-child form above even though this particular rule is
   a descendant (not row-background) selector, so it reads unambiguously alongside
   it. */
tr:has(> td.propHeader) a[style*="color:white"]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  opacity: .9;
}
tr:has(> td.propHeader) a[style*="color:white"]:hover{
  opacity: 1;
  text-decoration: underline !important;
}

/* .propSep: ~20 section-divider rows ("Common", "General Administrative
   Permissions", "Schedule Administrative Permissions", etc.), each holding a bare
   <hr width=60%>. Styled as the established eyebrow-label convention (bold,
   uppercase, navy, small, letter-spaced) matching #form_body td.propLabel
   font[color=gray] elsewhere in this file; the <hr> restyled as the standard
   hairline gray-200 divider, same recipe as #form_body hr, just re-scoped here since
   #form_body doesn't exist on this page. */
.propSep{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 14px 0 6px !important;
}
.propSep hr{
  border: none !important;
  border-top: 1px solid var(--usgn-gray-200) !important;
  margin: 6px auto !important;
}

/* .propLabel / .propValue base typography -- anchored to table:has(td.propHeader)
   per the scope note above. background:white added defensively: edit group.html's
   own propLabel/propValue never set a background-color at all (already sitting on
   this page's white card, so this is a no-op there), but pass mgmt.html's own
   inline <style> hardcodes background-color:#005898 (navy) directly on both
   classes, with propLabel's text forced to black on top of it -- black-on-navy is
   nearly unreadable, and propValue's text (inherited white from the shared
   .propHeader/.propLabel/.propValue rule in that page's own style) is also
   overridden to gray-900 below, which would be equally unreadable against that
   same navy without this override. */
table:has(td.propHeader) td.propLabel{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--usgn-gray-700) !important;
  background: var(--usgn-white) !important;
  padding: 7px 12px 7px 4px !important;
}
table:has(td.propHeader) td.propLabel a{
  color: var(--usgn-gray-700) !important;
  text-decoration: none !important;
  cursor: help !important;
}
table:has(td.propHeader) td.propLabel a:hover{
  color: var(--usgn-navy) !important;
}
table:has(td.propHeader) td.propValue{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  padding: 7px 4px !important;
}

/* Text inputs (Group Name, Password Expiration Days/Date) -- matched by name= since
   Group Name carries no type attribute at all in this page's markup. Anchored to
   table:has(td.propHeader) specifically so this does NOT merge with create
   group.html's own, separately-themed input[name="group_name"] rule above (same
   name= attribute, two unrelated forms) -- see the scope note at the top of this
   section. */
table:has(td.propHeader) input[name="group_name"],
table:has(td.propHeader) input[name="pw_exp_days"],
table:has(td.propHeader) input[name="pw_exp_date"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
}
table:has(td.propHeader) input[name="group_name"]:focus,
table:has(td.propHeader) input[name="pw_exp_days"]:focus,
table:has(td.propHeader) input[name="pw_exp_date"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* All 29 selects (1 single "Default Menu" dropdown + 28 multiple/size permission
   listboxes -- FORM, REPORTS, TRIGGERS, MENUS, MenuIDs, PWD_CONFIG, SITE_CONFIG,
   GROUP_PERMS, USER, USER_PROJECTS, PROJECT, PROFILE, PROJECT_GROUPS,
   CREATE_SCHEDULES, TASK, EVENT, DATA_FILE, CONF_DOC_CENTER, DOC_CENTER, DRAWING,
   IMAGE, RFI, ADDENDUM, PRESENTATION, BIDDER, TRANSMITTALS) get base field styling.
   Same idea as #form_body select[multiple] elsewhere: border/font/radius only, no
   dropdown chevron on the real listboxes. */
table:has(td.propHeader) select{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 5px !important;
  box-sizing: border-box !important;
}
table:has(td.propHeader) select:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Only the single non-multiple/non-size "Default Menu" select gets the
   appearance:none + inline chevron treatment -- a floating dropdown arrow doesn't
   make sense on the 28 real scrollable listboxes, same exclusion logic as
   #form_body select:not([multiple]):not([size]) above. */
table:has(td.propHeader) select:not([multiple]):not([size]){
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 26px !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}

/* 96 live Yes/No radios (48 pairs) -- plain "Yes"/"No" text follows each radio
   directly, no <label> wrapper in this page's markup, so only the control itself
   can be themed. (A raw grep for "type=radio" finds 98 -- 2 of those are inside an
   HTML comment, the commented-out "Status" block a few rows above the Common
   section, so they're not live DOM elements; confirmed via lxml, which parses 96.) */
table:has(td.propHeader) input[type="radio"]{
  accent-color: var(--usgn-navy) !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle !important;
  margin: 0 4px 0 0 !important;
}

/* .nonBar / a.nonBtn: legacy pseudo-buttons (a real <a>, faked into a raised 3D
   button via border:2px outset in this page's own <style>), used as a per-section
   "Save" convenience trigger after every one of the ~20 permission sections, plus a
   genuine Save+Reset pair at the very end of the whole form (confirmed via grep: 22
   total a.nonBtn anchors = 20 lone Saves + the final 2-anchor pair).

   Judgment call: giving all 20 repeated per-section Saves the solid-navy primary
   look would visually dominate the page with 20 heavy navy blocks stacked down a
   long form, and would bury the actual final submit action at the bottom under 20
   identical-looking siblings. So the base rule below gives every a.nonBtn the
   lighter, tight outlined-navy secondary treatment (same visual weight as
   input.actButton in the User Administration section) -- then the genuine final
   pair is promoted with two overrides matched structurally (not by position/index,
   which would be fragile): every OTHER div.nonBar on this page holds exactly one
   a.nonBtn, so a.nonBtn:has(+ a.nonBtn) (an anchor immediately followed by another
   .nonBtn sibling) uniquely matches the final "Save", and a.nonBtn + a.nonBtn
   uniquely matches "Reset" right after it. The final Save becomes solid-navy
   primary, Reset becomes a neutral gray outline -- together reading as the one true
   call-to-action at the bottom, while cursor:pointer + inline-flex sizing is applied
   to all of them since they're real <a> tags, not <button>s, and need padding to
   work as a button. */
.nonBar{
  display: block !important;
  text-align: center !important;
}
a.nonBtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 4px 14px !important;
  margin: 1px 3px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
a.nonBtn:hover{
  background: var(--usgn-navy-100) !important;
  color: var(--usgn-navy) !important;
}
a.nonBtn:active{
  background: var(--usgn-navy-100) !important;
}
/* Final "Save" (has a Reset sibling immediately after it) -> primary solid navy. */
a.nonBtn:has(+ a.nonBtn){
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
  border: none !important;
  padding: 9px 20px !important;
  font-size: 13.5px !important;
}
a.nonBtn:has(+ a.nonBtn):hover{
  background: var(--usgn-navy-700) !important;
  color: var(--usgn-white) !important;
}
/* "Reset" (immediately follows another .nonBtn) -> neutral gray outline, secondary
   to the final Save. */
a.nonBtn + a.nonBtn{
  background: var(--usgn-white) !important;
  color: var(--usgn-gray-700) !important;
  border: var(--usgn-field-border) !important;
  padding: 9px 20px !important;
  font-size: 13.5px !important;
}
a.nonBtn + a.nonBtn:hover{
  background: var(--usgn-gray-100) !important;
  color: var(--usgn-gray-900) !important;
}

/* ---------- Add/Remove Users to Group (admin_group.cgi add/remove-users view, "add_remove_users.html") ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin_group.cgi add/remove-users view. Part of the Group Admin page family.
   A brand-new, currently completely unstyled page (no CSS classes at all in its own
   markup, only a couple of inline styles) -- one legacy beveled outer <TABLE BORDER
   WIDTH=640 HEIGHT=250 bordercolorlight=#B9B9B9 bordercolordark=black> wrapping a
   <form name=form1> with an inner <table cellpadding=2> laying out: a top "Administer
   Groups" breadcrumb link, a left column (Firm Categories / Firms / Add-Remove Firm's
   Users / Users+Search listboxes), a right column (Group Users listbox), an
   Add User(s)/Remove User(s) row, and a final Done button row.

   Scope check done first (per the standing rule -- this app reuses generic-looking
   class/attribute values across otherwise-unrelated pages): grepped every other
   reference HTML file for bordercolorlight/bordercolordark (both attribute NAMES
   appear elsewhere -- log view.html and the four form-builder samples all use
   bordercolorlight="#000000"/bordercolordark="#000000"; create group.html/copy
   group.html use a completely different attribute, bordercolor="#888888" -- no
   overlap in VALUE with this page's own #B9B9B9), and confirmed bordercolorlight=
   "#B9B9B9" (this exact value) is unique to this page -- 0 matches anywhere else.
   Also grepped select name=CategoryID/FirmID/PersonID/groupPersons, the onclick=
   "return addFirms()"/"removeFirms()"/"addPersons()"/"removePersons()"/"searchWin()"
   handler strings, and the two literal inline-style strings "font-size:9pt;font-
   weight:bold" (breadcrumb) and "font-size:7.5pt" (Search link) -- all confirmed
   unique to this page, 0 matches elsewhere. The one attribute value that ISN'T
   unique on its own is value="Done" on an <input type=button> -- user admin.html
   also has a Done button with that same value, but that one carries its own
   id="done" and is styled via that id elsewhere in this file, so there's no actual
   selector collision -- still, every rule below is scoped through the page's own
   unique table[bordercolorlight="#B9B9B9"] anchor anyway (matching this file's
   established "double-scope defensively, even when the child selector would already
   be unique on its own" pattern used throughout), so nothing here could ever reach
   into that other page's button regardless.

   Since the anchor here is a plain attribute selector on the table itself (not a
   :has() wrapping an attribute-selector argument, the specific shape that trips up
   cssselect's Python test library elsewhere in this file), every selector below
   parsed and ran directly through cssselect with no manual DOM-walk workaround
   needed -- EXCEPT the case-insensitive [attr=value i] form actually used in the
   shipped CSS (browsers treat legacy attribute values case-insensitively via the
   "i" flag, matching this file's convention elsewhere for hex values), which
   cssselect's Python library still can't parse (confirmed same gap noted throughout
   this file). Verified instead by testing the exact-case equivalent
   (table[bordercolorlight="#B9B9B9"], no "i") against the real DOM -- confirmed the
   attribute is preserved by lxml with that exact case, "#B9B9B9", so the case-
   sensitive test is a faithful proxy for what the shipped case-insensitive selector
   matches in a real browser. Verified counts (all against the real DOM): 1 outer
   table, 12 td / 5 tr under it (native border neutralization), 1 Done button, 4
   select[multiple] listboxes (CategoryID/FirmID/PersonID/groupPersons), 7
   font[size="2"] b elements (4 plain labels: "Firm Categories:", "Firms:", "Users:",
   "Group Users:" -- confirmed via manual itertext() walk to contain no descendant
   <a>; plus 3 action-link wrappers: "Add / Remove Firm's Users", "Add User(s)",
   "Remove User(s)" -- confirmed to each contain a descendant <a>), 6 total <a>
   elements under the table (1 breadcrumb + 2 Add/Remove-firm links + 1 Search link +
   1 Add User(s) + 1 Remove User(s) -- matches the manual count of the markup
   exactly), 1 breadcrumb link, 1 Search link. */

/* Outer beveled table -> standard white card, centered (native WIDTH=640 already
   fits comfortably per this session's established convention for the other
   width=640 legacy pages -- create group.html / copy group.html / edit group.html --
   so only margin:0 auto is needed here too, no width/max-width override). The bare
   BORDER attribute (no value, equivalent to border=1) draws the browser's default
   beveled cell borders once cell backgrounds/spacing change, same as every other
   bevel-table fixed elsewhere in this file -- neutralized the same way. */
table[bordercolorlight="#B9B9B9" i]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}
table[bordercolorlight="#B9B9B9" i] td,
table[bordercolorlight="#B9B9B9" i] tr{
  border: none !important;
}
/* The single direct-child <TD> (holding the whole <CENTER><form>...) had zero
   padding of its own (no cellpadding on the outer table) -- now that it's a white
   card, content was sitting flush against the card edge. Restores the same card-
   interior breathing room used on other cards in this file. */
table[bordercolorlight="#B9B9B9" i] > tr > td,
table[bordercolorlight="#B9B9B9" i] > tbody > tr > td{
  padding: 16px 20px !important;
}

/* "Administer Groups" breadcrumb link at the top -- scoped via its own unique
   inline style (font-size:9pt;font-weight:bold, confirmed nowhere else in the app)
   rather than position, since it's the only styled element in that row. No existing
   dedicated breadcrumb/back-link convention was found elsewhere in this file to
   reuse, so this is a new small navy pill with a leading "back" chevron, styled
   lightly enough to read as a secondary navigational link rather than a primary
   action. */
table[bordercolorlight="#B9B9B9" i] a[style*="font-size:9pt;font-weight:bold" i]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  padding: 4px 9px !important;
  margin-bottom: 6px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
table[bordercolorlight="#B9B9B9" i] a[style*="font-size:9pt;font-weight:bold" i]::before{
  content: "\2190";
  font-size: 11px;
}
table[bordercolorlight="#B9B9B9" i] a[style*="font-size:9pt;font-weight:bold" i]:hover{
  background: var(--usgn-navy-100) !important;
  color: var(--usgn-navy-700) !important;
}

/* Bold field labels ("Firm Categories:" / "Firms:" / "Users:" / "Group Users:") --
   all four are <font size=2><b>...</b></font> with no descendant <a> (confirmed via
   a manual itertext()/xpath walk of the 7 total font[size=2] b elements on this
   page: 4 plain-text labels, 3 that wrap an action link instead -- see verification
   note above). One rule covers all 7 (typography only: family/size/weight/color) --
   this is safe to apply even to the 3 link-wrapping ones because the <a> elements
   inside them carry their own explicit color from this file's global `a{color:navy}`
   rule, which always wins over a merely-inherited parent color regardless of
   !important or source order (an element's own specified value beats an inherited
   one), so the labels below don't fight the link styling just underneath.
   Judgment call per the task: styled as gray-700 bold, matching the same weight/
   role as #form_body td.propLabel elsewhere in this file (a plain field-label
   convention), rather than the uppercase/letter-spaced navy "eyebrow" treatment
   used for full section dividers like .propSep -- these are simple inline field
   labels, not section headers. */
table[bordercolorlight="#B9B9B9" i] font[size="2"] b{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--usgn-gray-700) !important;
}
/* The 3 action links living inside those bold labels ("Add"/"Remove" Firm's Users,
   "Add User(s)", "Remove User(s)") plus the standalone "Search" link (a sibling of
   the "Users:" <b>, not nested inside it, scoped via its own unique inline style
   font-size:7.5pt) -- simpler navy-bold-link-with-hover treatment rather than a
   pill/chip button, per the task's own suggestion: these read as inline text next
   to a label ("Add / Remove Firm's Users") rather than a dedicated toolbar, so a
   chip button on each side of the "/" would look visually noisy. Color already
   comes from this file's global a/a:hover rule (navy default, cyan-700 hover); the
   only new thing needed is an underline on hover for clearer link affordance, since
   the page's own inline <style> (`A { text-decoration: none }`) removes the
   underline unconditionally. */
table[bordercolorlight="#B9B9B9" i] font[size="2"] b a,
table[bordercolorlight="#B9B9B9" i] a[style*="font-size:7.5pt" i]{
  text-decoration: none !important;
}
table[bordercolorlight="#B9B9B9" i] font[size="2"] b a:hover,
table[bordercolorlight="#B9B9B9" i] a[style*="font-size:7.5pt" i]:hover{
  text-decoration: underline !important;
}

/* The 4 real multi-select listboxes (CategoryID/FirmID/PersonID/groupPersons) --
   standard field border/radius/color treatment, WITHOUT the appearance:none +
   chevron trick (reserved for single dropdowns elsewhere in this file), consistent
   with the :not([multiple]):not([size]) exclusion logic used throughout. Each
   carries its own inline style="width:Npx" plus a matching width=N HTML attribute
   (270/270/270/320) that size the layout intentionally -- left completely alone
   (no width property set here at all) rather than fought; box-sizing:border-box is
   added so the padding this rule adds lives inside that existing width rather than
   expanding it. */
table[bordercolorlight="#B9B9B9" i] select[multiple]{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
table[bordercolorlight="#B9B9B9" i] select[multiple]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* "Done" button (plain <input type=button>, no class/id) -- the one button on this
   page, standard primary solid-navy treatment. Scoped through the table anchor
   (rather than a bare input[type=button][value=Done]) specifically because
   user admin.html also has a value="Done" button -- that one's already handled via
   its own id=done elsewhere in this file, so there'd be no real collision either
   way, but scoping here keeps this rule unambiguously tied to just this page,
   matching the double-scoping convention used throughout this file. */
table[bordercolorlight="#B9B9B9" i] input[type="button"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 22px !important;
  cursor: pointer !important;
}
table[bordercolorlight="#B9B9B9" i] input[type="button"]:hover{
  background: var(--usgn-navy-700) !important;
}

/* ---------- Password Configuration / Constraints (admin_pwconfig.cgi, "pass mgmt.html") ----------
/* ROLLOUT: PAGE-SPECIFIC -- admin_pwconfig.cgi only.
   Another beveled outer <table border=1 width=630 height=250 bordercolorlight=#005898
   bordercolordark=black> (confirmed via grep: this exact bordercolorlight value is
   unique to this page -- 0 matches in any other reference file) wrapping an unnamed
   inner <table align=center cellspacing=1 cellpadding=2> that holds the 5-section
   propHeader/propLabel/propValue property list (see the propHeader/propLabel/
   propValue fixes above -- this page is the reason those shared rules needed the
   background overrides, since its own inline <style> hardcodes background colors
   those other pages' versions never did), plus a second, completely bare <table>
   at the bottom (no attributes at all) holding just the Undo/Save buttons.

   Scope check done first: table:has(td.propHeader) alone matches BOTH this page's
   inner table AND its outer bevel table (td.propHeader is a descendant of both, at
   different depths -- confirmed via direct DOM walk, same double-match trap noted
   elsewhere in this file for :has()). Styling the table element itself through that
   bare selector would incorrectly double-apply, so the inner table below is instead
   matched via table[bordercolorlight="#005898"] table:has(td.propHeader) -- a
   compound selector that can only ever match a <table> nested inside the
   page-unique outer table, which the outer table itself can never satisfy (it
   would have to be its own descendant) -- confirmed via lxml: exactly 1 match.

   **FOLLOW-UP FIX (during the firm/category/contact-dir reskin pass)**: two brand
   new reference files added to the folder for that work -- edit firm.html and its
   byte-identical duplicate edit source.html -- turned out to share this EXACT same
   bordercolorlight="#005898"/bordercolordark="black"/width="630"/height="250"
   attribute combination on their own outer table (confirmed via lxml). Those two
   pages didn't exist in the reference set when the "unique" claim above was
   originally verified, so it was true at the time but is no longer true now. Left
   bare, every rule below would have also silently reformatted edit firm.html's much
   simpler listbox+buttons dialog -- worst concretely: the bare `select` rule would
   have painted an appearance:none dropdown chevron onto firm_id's real size=6
   listbox, the exact bug class the file's `:not([multiple]):not([size])` convention
   exists to prevent. Fixed by adding `[border="1"]` to every selector in this
   section: pass mgmt.html's outer table is the only one of the three with a real
   `border="1"` (edit firm.html/edit source.html both use bare `<TABLE BORDER ...>`,
   which parses to `border=""`), so this fully disambiguates without changing this
   page's own behavior at all. Re-verified via lxml against all three files: the
   narrowed selector still matches exactly 1 table on pass mgmt.html (identical to
   before) and 0 on edit firm.html / edit source.html. Brace balance reconfirmed
   equal (341 `{` / 341 `}`) after this edit. Edit firm.html gets its own separate
   rule block further down in this file, anchored via `[border=""]` instead. */
table[border="1"][bordercolorlight="#005898" i]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
  height: auto !important;
}
table[border="1"][bordercolorlight="#005898" i] > tr > td,
table[border="1"][bordercolorlight="#005898" i] > tbody > tr > td{
  padding: 20px !important;
}
/* Inner property-list table -- blends flat into the outer card (no separate
   border/shadow of its own, avoiding a "card inside a card" look), native
   cellspacing=1 collapsed away. */
table[border="1"][bordercolorlight="#005898" i] table:has(td.propHeader){
  background: transparent !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}
table[border="1"][bordercolorlight="#005898" i] table:has(td.propHeader) td{
  border: none !important;
}

/* 11 plain single-select dropdowns (password length/count fields, grace logins,
   history depth, security questions, login failures, lockout action) -- full
   appearance:none + inline-chevron treatment, same base64 SVG chevron used
   throughout this file, since none of them carry multiple/size attributes. */
table[border="1"][bordercolorlight="#005898" i] select{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 5px 26px 5px 8px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--usgn-white) !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
table[border="1"][bordercolorlight="#005898" i] select:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* Password Expiration Days -- the one plain text input on this page. */
table[border="1"][bordercolorlight="#005898" i] input[type="text"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
}
table[border="1"][bordercolorlight="#005898" i] input[type="text"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* "Notify Admin on Failure Action" -- the one checkbox on this page. */
table[border="1"][bordercolorlight="#005898" i] input[type="checkbox"]{
  accent-color: var(--usgn-navy) !important;
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
}

/* Undo Changes (secondary outline) / Save Changes (primary solid navy) --
   distinguished by value=, same convention as every other button pair in this
   file. Scoped through the outer table anchor even though these exact value=
   strings are already unique app-wide (confirmed via grep), matching this file's
   habit of double-scoping defensively regardless. */
table[border="1"][bordercolorlight="#005898" i] input[type="button"][value="Save Changes"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 20px !important;
  margin: 0 4px !important;
  cursor: pointer !important;
}
table[border="1"][bordercolorlight="#005898" i] input[type="button"][value="Save Changes"]:hover{
  background: var(--usgn-navy-700) !important;
}
table[border="1"][bordercolorlight="#005898" i] input[type="button"][value="Undo Changes"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 9px 20px !important;
  margin: 0 4px !important;
  cursor: pointer !important;
}
table[border="1"][bordercolorlight="#005898" i] input[type="button"][value="Undo Changes"]:hover{
  background: var(--usgn-navy-100) !important;
}


/* ==========================================================================
   Menu Select / Build (build_menu.cgi -- "Select A Menu or Build One")
   ROLLOUT: PAGE-SPECIFIC -- build_menu.cgi (menu list/select view).
   reference: menu select.html. Same single-panel-dialog shape already used
   for create group.html / copy group.html / edit group.html /
   add_remove_users.html (native border=1, width=640) -- the title bar's
   bgcolor="#000000" here is a hardcoded template black, not one of the
   tenant subhcolor/formbgcolor values.

   Scope-checked via grep: `table[width="640"][cellpadding="2"][cellspacing="0"]`
   as a direct child of #site_content is unique to this page -- no other
   reference file uses that exact attribute combination. This also keeps it
   safely distinct from the #site_header spacer row that separately uses
   bgcolor="#000000" (that spacer always carries style="height:1px" and
   lives inside #site_header, a different table entirely -- confirmed via
   lxml that our scoped selector never matches it). ========================================================================== */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-collapse: collapse !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  margin: 0 auto !important;
}
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] td{
  border: none !important;
}
/* Title bar ("Select A Menu or Build One") -- given the same gradient
   banner used for every other page-title row in this file; the existing
   white <font> text is left exactly as-is since it already reads correctly
   against this background. */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] tr[bgcolor="#000000" i]{
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
}
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] tr[bgcolor="#000000" i] td{
  padding: 10px 14px !important;
}
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] tr[bgcolor="#000000" i] font{
  font-size: 14px !important;
  letter-spacing: .01em;
}
/* Inner unnamed table (holds the MenuID listbox, action buttons, and the
   Prev/Search/Next row) -- flattened so it reads as one card surface
   instead of a table nested inside a table. */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] table{
  background: transparent !important;
}
/* MenuID listbox (size=7, native inline width:250px left untouched -- same
   "don't override an intentionally fixed column width" convention used for
   the multi-select listboxes on add_remove_users.html). No chevron: this is
   a real multi-row listbox, not a single dropdown. */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] select{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px !important;
}
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] select:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Edit / Delete / Make Default / New / Done -- stacked outlined-navy
   secondary buttons, same rhythm as the 5-button stack on group list.html's
   navy panel. Inline style="width:90px" on each is overridden the same way
   (a plain !important external rule beats a non-!important inline style). */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] input[type="button"]{
  display: block !important;
  width: 100% !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  text-align: center !important;
}
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] input[type="button"]:hover{
  background: var(--usgn-navy-100) !important;
}
/* The 5 buttons above are separated by <br> tags in the markup (a relic of
   the old inline-button layout) -- now that they're display:block, each
   <br> adds a redundant extra blank line on top of the block-level break,
   nearly doubling the visual gap. Hidden via :has(), scoped to only the
   button-holding td (confirmed via direct DOM walk: 4 br's there) so the
   legend text's own intentional "P - ...<br>C - ..." line break, in a
   different td entirely, is untouched. */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] td:has(> input[type="button"]) > br{
  display: none !important;
}
/* "Done" (name=back_butt) -- given the file's established primary
   (solid-navy) treatment for this literal button label, matching #done on
   user admin.html and the Done button on add_remove_users.html. */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] input[type="button"][value="Done" i]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] input[type="button"][value="Done" i]:hover{
  background: var(--usgn-navy-700) !important;
}
/* "P - Project Menu / C - Corporate Portal Menu" legend text (inline
   style="...font-size:7.5pt...position:absolute..."), the only
   position:absolute element on this page -- recolored as small gray hint
   text, positioning left untouched. */
#site_content > table[width="640"][cellpadding="2"][cellspacing="0"] div[style*="position:absolute"]{
  font-family: var(--usgn-font) !important;
  color: var(--usgn-gray-500) !important;
  line-height: 1.5 !important;
}
/* a.searcher (Prev/Search/Next, x3) needs no new CSS here -- already
   covered app-wide by the bare a.searcher rule added for user admin.html. */


/* ==========================================================================
   Menu Editor (build_menu.cgi edit mode -- "Editing Menu: <name>")
   ROLLOUT: PAGE-SPECIFIC -- build_menu.cgi edit mode.
   reference: edit menu.html. A 3-column power-user editor (prebuilt-menu
   listbox / menu-structure listbox + reorder controls / selected-item
   properties) plus a bottom control bar (Preview, Advanced raw-text editor,
   Menu Properties, Save/Abort).

   Scope check: every class/id targeted below (.NewDiv, .menu_pos, .Text,
   .label, .MiniButton, .ArrowButton, .PrebuiltMenuListSelect,
   #MenuItemRoles, #PreviewRole, #MenuEditButtonBar, #AdvancedTab,
   #advanced, #preview, #style, #divMenuData1, #divMenuLayout1,
   #MiniButtonTable) was grepped against every other reference file in the
   folder and confirmed to exist ONLY on this page, so these are used
   bare/unscoped below rather than double-anchored.

   NOT touched: .menu_pos / .menu_pos div (position:relative/absolute -- an
   invisible sizing overlay driven by sizer.min.js's __sizers callbacks,
   same "don't fight the JS" caution as .mnu's positioning elsewhere in this
   file) and #AdvancedTab/.Hidden's show/hide toggle (driven by
   adv_toggle(), plain display:none -- left alone).

   MARKUP BUG caught during verification: the outer ".NewDiv" wrapper that's
   meant to float/group the 3 columns is never actually closed with its own
   </div> in the source -- confirmed via lxml that #MenuEditButtonBar (and
   two trailing stray <br>s right before </form>) end up genuinely nested
   INSIDE that wrapper in the parsed DOM, not as separate siblings below it.
   Real browsers parse unclosed generic <div>s the same permissive way, so
   this isn't just a parser quirk -- it reflects the actual rendered
   structure. Handled below by giving #MenuEditButtonBar flex-basis:100%
   (forcing it onto its own row under the 3 cards regardless of where it
   falls in the DOM) and hiding the two orphaned <br>s (empty flex items
   that served no purpose once this is flex/wrap instead of float). ========================================================================== */

/* Outer wrapper: distinguished from the 3 identically-classed inner columns
   via the file's established ":has(> X)" direct-child pattern (same
   reasoning as edit group.html/pass mgmt.html's propHeader disambiguation)
   -- only the wrapper has a direct-child .NewDiv. */
.NewDiv:has(> .NewDiv){
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 16px !important;
  float: none !important;
}
.NewDiv:has(> .NewDiv) > br{
  display: none !important;
}
.NewDiv:has(> .NewDiv) > .NewDiv{
  float: none !important;
  flex: 1 1 300px !important;
  min-width: 280px !important;
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
}

/* Prebuilt-menu / menu-structure / Groups listboxes (all size=20 or
   multiple). The page's own <style> already gives every <select> a bare
   min-width:350px -- respected here, just layered with the theme's field
   border/radius/color on top. */
select[name="MenuData"], select[name="MenuLayout"], #MenuItemRoles{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 4px !important;
}
select[name="MenuData"]:focus, select[name="MenuLayout"]:focus, #MenuItemRoles:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* "Preview As" role dropdown (#PreviewRole) -- the one plain single select
   on this page (not multiple/size) -- gets the same appearance:none +
   inline-chevron treatment used for every other single dropdown app-wide. */
#PreviewRole{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  background-color: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 5px 26px 5px 8px !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
#PreviewRole:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* Name / Link text fields (input.Text, column 3). Page's own style already
   sets input.Text{width:100%}; layered with field chrome here. */
input.Text{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
}
input.Text:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* Field labels (td.label: Name / Link / Type / Groups). */
.label{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--usgn-gray-700) !important;
  padding-top: 6px !important;
}

/* Checkboxes / radios (Open in New Window, Relative/Static, Preview, Allow
   Styles) -- accent-color recolor, same convention used throughout this
   file. */
.NewDiv input[type="checkbox"], .NewDiv input[type="radio"],
#MenuEditButtonBar input[type="checkbox"]{
  accent-color: var(--usgn-navy) !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
.NewDiv label, #MenuEditButtonBar label{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  vertical-align: middle !important;
}

/* Reorder / navigation controls next to the menu-structure listbox:
   input.MiniButton ("/\" move up, "\/" move down) and a.ArrowButton
   (Close Selected / Close All / Expand Selected / Expand All) render at
   near-illegible native sizes (5pt/7pt) per the page's own <style> --
   sized up to a small but legible control, still compact enough to sit
   beside a 20-row listbox. */
input.MiniButton{
  font-family: var(--usgn-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 4px !important;
  width: 28px !important;
  height: 22px !important;
  padding: 0 !important;
  cursor: pointer !important;
}
input.MiniButton:hover{
  background: var(--usgn-navy-100) !important;
}
a.ArrowButton{
  display: inline-block !important;
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  text-decoration: none !important;
  padding: 2px 5px !important;
}
a.ArrowButton:hover{
  color: var(--usgn-cyan-700) !important;
}

/* Generic <input type=button> actions inside the 3 columns (Expand/Close
   x2, Relative/Static/External Link, Separator, New Menu, Update, Delete)
   -- none carry a class, so distinguished only by their stable value=
   label per this engine's own convention (same reasoning as #form_body's
   Submit/Cancel). "Update" (linkSave, column 3's confirm action) is this
   section's primary; every other utility action here is the standard
   outlined-navy secondary. */
.NewDiv input[type="button"]{
  display: inline-block !important;
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  margin: 2px 4px 2px 0 !important;
  cursor: pointer !important;
}
.NewDiv input[type="button"]:hover{
  background: var(--usgn-navy-100) !important;
}
.NewDiv input[type="button"][value="Update" i]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
.NewDiv input[type="button"][value="Update" i]:hover{
  background: var(--usgn-navy-700) !important;
}
/* "Apply Groups to Sub Menus/Links" and "Advanced" (toggle link) both
   inherit the file's global a{color:navy}/a:hover{color:cyan-700} rule
   already -- no new CSS needed for either. */

/* Bottom control bar. Per the markup bug noted above, this is genuinely a
   4th child of the same flex wrapper as the 3 column cards (not a separate
   section below it) -- flex-basis:100% forces it onto its own row
   regardless, then it gets the same card treatment as the columns above. */
#MenuEditButtonBar{
  flex: 1 1 100% !important;
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
}
#MenuEditButtonBar > div{
  margin-bottom: 10px !important;
}
#MenuEditButtonBar input[type="button"]{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 7px 16px !important;
  margin-right: 6px !important;
  cursor: pointer !important;
}
#MenuEditButtonBar input[type="button"]:hover{
  background: var(--usgn-navy-100) !important;
}
/* "Save" (name=finished) is the editor's one true primary/commit action
   for the whole form. */
#MenuEditButtonBar input[type="button"][value="Save" i]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
#MenuEditButtonBar input[type="button"][value="Save" i]:hover{
  background: var(--usgn-navy-700) !important;
}
/* Advanced raw-text editor sub-panel (toggled via adv_toggle(), plain
   display:none/block -- not touched here). Its own "Update" is that
   sub-panel's confirm action, given the same primary treatment as
   linkSave's Update above, scoped separately so it doesn't read as a
   second competing "Save" next to the real one. */
#AdvancedTab{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--usgn-gray-200) !important;
}
#AdvancedTab input[type="button"][value="Update" i]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
#AdvancedTab input[type="button"][value="Update" i]:hover{
  background: var(--usgn-navy-700) !important;
}
#advanced{
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: 12.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-gray-100) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
#advanced:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* ==========================================================================
   Shared "form" dialog title bar -- tenant formcolor, hardcoded bgcolor="#7FA0CB"
   ROLLOUT: SHARED -- used by both Add/Remove Category and Firm Information Form below; keep with whichever (or both) of those ship.
   on both add category.html (Add/Remove Category, action=changeCategory.cgi)
   and add firm.html (Firm Information Form, action=saveFirm.cgi). Confirmed
   via grep: this exact hex is used nowhere else in the app. Both pages give it
   the identical treatment (their title row is the first <tr> of their own
   outer bevel table in both markups), so it's written once here as a bare
   rule rather than duplicated per page below. ========================================================================== */
td[bgcolor="#7FA0CB" i]{
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
  padding: 12px 20px !important;
  border-radius: var(--usgn-radius) var(--usgn-radius) 0 0 !important;
}
td[bgcolor="#7FA0CB" i] font{
  font-size: 14px !important;
  letter-spacing: .01em;
}

/* ==========================================================================
   Add / Remove Category (admin_siteconfig.cgi category editor, action=
   ROLLOUT: PAGE-SPECIFIC -- admin_siteconfig.cgi category editor.
   changeCategory.cgi, reference: "add category.html", "Add / Remove Category")

   Outer <table border=1 cellpadding=0 cellspacing=0 width=650 bordercolor=
   bordercolorlight=bordercolordark="#000000"> wrapping a title row (the shared
   formcolor banner above) and one inner <table border=0 cellpadding=0
   cellspacing=0 width=650 height=26 bgcolor="#E4E4E4"> that holds everything
   else: an Add-Category text field + Add button, a "before" ordering dropdown,
   a horizontal rule, a remCategory size=15 multi-select + Move Up/Move Down/
   Remove buttons, and a final Done button.

   Scope check done first (grepped every other reference file): the outer
   table's full 4-attribute combination (bordercolor/bordercolorlight/
   bordercolordark="#000000" + width="650") is unique to this page even though
   bordercolorlight/bordercolordark="#000000" alone is shared with log view.html
   and the form-builder samples (confirmed via lxml: exactly 1 match, this
   page only) -- used bare below rather than needing a further anchor.
   bgcolor="#E4E4E4" is unique app-wide on its own (0 matches elsewhere). The
   3 field names (addCategory/before/remCategory) and the 4 button names
   (Add/move_up/move_down/Remove) are all confirmed unique via grep too. ========================================================================== */
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="650"]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="650"] > tr > td,
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="650"] > tbody > tr > td{
  border: none !important;
}
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="650"] > tr > td:not([bgcolor="#7FA0CB" i]),
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="650"] > tbody > tr > td:not([bgcolor="#7FA0CB" i]){
  padding: 18px 20px !important;
}
/* Inner field table -- flattened so it blends into the outer card (no double
   border/shadow), same "card inside a card" avoidance used throughout this
   file. */
table[bgcolor="#E4E4E4" i]{
  background: transparent !important;
  height: auto !important;
}
/* "Add Category:" / "Edit/Remove Category:" section labels (<FONT SIZE=2><B>). */
table[bgcolor="#E4E4E4" i] font[size="2"] b{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--usgn-gray-800) !important;
}
/* Instructional helper text ("The ordering of the contacts directory..."). */
table[bgcolor="#E4E4E4" i] div[style*="font-size: 9pt" i]{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-700) !important;
  line-height: 1.5 !important;
}
table[bgcolor="#E4E4E4" i] hr{
  border: none !important;
  border-top: 1px solid var(--usgn-gray-200) !important;
  margin: 12px 0 !important;
}
table[bgcolor="#E4E4E4" i] input[name="addCategory"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
}
table[bgcolor="#E4E4E4" i] input[name="addCategory"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* "before" -- the one plain single dropdown on this page (no multiple/size),
   full appearance:none + inline-chevron treatment. */
table[bgcolor="#E4E4E4" i] select[name="before"]{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background-color: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 28px 7px 10px !important;
  box-sizing: border-box !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}
table[bgcolor="#E4E4E4" i] select[name="before"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* remCategory -- a real size=15 multi-select listbox, base field treatment
   only, no chevron. */
table[bgcolor="#E4E4E4" i] select[name="remCategory"]{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px !important;
}
table[bgcolor="#E4E4E4" i] select[name="remCategory"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Add / Move Up / Move Down / Remove -- all secondary outlined-navy, same
   weight as every other in-page action button in this file. "Done" (below)
   is reserved as the page's one true primary/exit action, matching the
   file's established literal-value convention for that word. */
table[bgcolor="#E4E4E4" i] input[type="submit"]{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
}
table[bgcolor="#E4E4E4" i] input[type="submit"]:hover{
  background: var(--usgn-navy-100) !important;
}
/* Move Up / Move Down / Remove are display:block (full-width stack, matching
   the file's established button-stack rhythm elsewhere); the 3 leftover <br>
   tags separating them in the markup are now redundant next to a block-level
   break and are hidden, same fix applied repeatedly elsewhere in this file
   (confirmed via lxml: exactly 3 <br> in this one td, all inside it). */
table[bgcolor="#E4E4E4" i] td:has(> input[name="move_up"]) input[type="submit"]{
  display: block !important;
  width: 100% !important;
  margin: 3px 0 !important;
}
table[bgcolor="#E4E4E4" i] td:has(> input[name="move_up"]) > br{
  display: none !important;
}
/* "Done" (name=Back, value=" Done ") -- primary solid navy, the file's
   established treatment for this literal button label app-wide. */
table[bgcolor="#E4E4E4" i] input[value=" Done " i]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 22px !important;
  cursor: pointer !important;
}
table[bgcolor="#E4E4E4" i] input[value=" Done " i]:hover{
  background: var(--usgn-navy-700) !important;
}

/* ==========================================================================
   Firm Information Form (saveFirm.cgi, reference: "add firm.html",
   ROLLOUT: PAGE-SPECIFIC -- saveFirm.cgi.
   "New Firm Infomation" / "Firm Information Form")

   Outer <table border=1 cellpadding=0 cellspacing=0 width=630 bordercolor=
   bordercolorlight=bordercolordark="#000000"> wrapping the shared formcolor
   title banner (above) and one inner <table border=0 cellpadding=0
   cellspacing=0 width=630 bgcolor="#c5d5ed"> (tenant formbgcolor) holding
   the Firm Name / Category / Add-Remove-Category link / Address 1 / Address 2
   / City / State / Zip / Phone / Fax fields and the Submit/Back buttons.

   Scope check done first: the outer table's 4-attribute combo (bordercolor/
   bordercolorlight/bordercolordark="#000000" + width="630") is confirmed
   unique via lxml (exactly 1 match, this page only, same reasoning as add
   category.html's width="650" version above). bgcolor="#c5d5ed" is unique
   app-wide. CategoryID as a plain <select size=1> (not the multiple/size=5
   version on add_remove_users.html, nor the hidden <input> on contact
   dir.html) and select[name="state"] are both confirmed unique via lxml. The
   7 field names / 2 button values (Submit / " Back ") are all confirmed
   unique via grep. ========================================================================== */
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="630"]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="630"] > tr > td,
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="630"] > tbody > tr > td{
  border: none !important;
}
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="630"] > tr > td:not([bgcolor="#7FA0CB" i]),
table[bordercolor="#000000" i][bordercolorlight="#000000" i][bordercolordark="#000000" i][width="630"] > tbody > tr > td:not([bgcolor="#7FA0CB" i]){
  padding: 18px 20px !important;
}
/* Inner field table -- flattened to blend into the outer card. */
table[bgcolor="#c5d5ed" i]{
  background: transparent !important;
}
/* The 9 field labels (<B>* Firm Name</B>, etc.) -- plain bold text, no class. */
table[bgcolor="#c5d5ed" i] b{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--usgn-gray-800) !important;
}
/* The 7 visible text fields (firm/address1/address2/city/zip/phoneNum/faxNum
   -- some carry an explicit type=text, some omit type entirely, so matched by
   exclusion instead: every <input> in this table that ISN'T the Submit/Back
   buttons at the bottom). */
table[bgcolor="#c5d5ed" i] input:not([type="button"]){
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
}
table[bgcolor="#c5d5ed" i] input:not([type="button"]):focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* CategoryID / state -- both plain single dropdowns, full appearance:none +
   inline-chevron treatment. */
table[bgcolor="#c5d5ed" i] select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background-color: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 28px 7px 10px !important;
  box-sizing: border-box !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}
table[bgcolor="#c5d5ed" i] select:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* "Add / Remove Category" popup-window link (opens changeCategory.cgi via
   w_open(), confirmed the only <a> in this table). */
table[bgcolor="#c5d5ed" i] a{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
/* Submit (primary solid navy) / Back (secondary outline) -- distinguished by
   value=, same convention as every other button pair in this file. Back's
   value carries literal leading/trailing spaces in the markup (value=" Back "). */
table[bgcolor="#c5d5ed" i] input[type="button"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  margin: 0 4px !important;
}
table[bgcolor="#c5d5ed" i] input[type="button"][value="Submit"]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
table[bgcolor="#c5d5ed" i] input[type="button"][value="Submit"]:hover{
  background: var(--usgn-navy-700) !important;
}
table[bgcolor="#c5d5ed" i] input[type="button"][value=" Back "]{
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
}
table[bgcolor="#c5d5ed" i] input[type="button"][value=" Back "]:hover{
  background: var(--usgn-navy-100) !important;
}

/* ==========================================================================
   Select a Firm for Editing or Removing (firmForm.cgi list view, reference:
   ROLLOUT: PAGE-SPECIFIC -- firmForm.cgi (also covers the byte-identical edit source.html).
   "edit firm.html" -- byte-identical to "edit source.html" also sitting in
   this folder, confirmed via diff; whatever's written here applies equally
   correctly to both, so edit source.html isn't called out separately).

   Single-panel dialog, same native shape as create group.html / copy
   group.html / edit group.html / add_remove_users.html / menu select.html
   (<TABLE BORDER WIDTH="630" HEIGHT="250" bordercolorlight="#005898"
   bordercolordark="black">) holding a firm_id size=6 listbox and Add Firm /
   Edit Firm / Remove Firm / Done buttons.

   IMPORTANT collision, caught during scope-check: this exact bordercolorlight
   /bordercolordark/width/height combination is ALSO used by pass mgmt.html's
   outer table (confirmed via lxml against all three files) -- pass mgmt.html
   just didn't share it with anything when that page's own section was
   written, since edit firm.html/edit source.html weren't in the reference
   set yet at the time. See the "FOLLOW-UP FIX" note added to the pass
   mgmt.html section above: that page's rules were retroactively narrowed
   with `[border="1"]` (its real attribute value) specifically so they don't
   also reach the two pages here, which both use a bare `<TABLE BORDER ...>`
   that parses to `border=""`. This page's own rules below are anchored the
   mirror-image way, `[border=""]`, confirmed via lxml to match only edit
   firm.html / edit source.html and 0 matches on pass mgmt.html. ========================================================================== */
table[border=""][bordercolorlight="#005898" i]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
  height: auto !important;
}
table[border=""][bordercolorlight="#005898" i] > tr > td,
table[border=""][bordercolorlight="#005898" i] > tbody > tr > td{
  padding: 24px 20px !important;
}
/* "Select a Firm for Editing or Removing" -- the one font[size=3] on this
   page, promoted to a proper card heading. */
table[border=""][bordercolorlight="#005898" i] font[size="3"]{
  font-family: var(--usgn-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--usgn-gray-900) !important;
}
/* firm_id -- a real size=6 listbox, base field treatment only, no chevron
   (the inline style="width:400" is left untouched, same "don't fight an
   intentional column width" convention used for every other real listbox in
   this file). */
table[border=""][bordercolorlight="#005898" i] select[name="firm_id"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px !important;
}
table[border=""][bordercolorlight="#005898" i] select[name="firm_id"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Add Firm / Edit Firm / Remove Firm -- secondary outlined-navy, same weight
   as every other in-page action button. Remove Firm is kept at the same
   weight rather than a destructive/red treatment: no danger-button pattern
   has been introduced anywhere else in this file (only the shared
   --usgn-error token, used solely for validation text), so this stays
   consistent with every other "Remove"/"Delete" button styled so far. */
table[border=""][bordercolorlight="#005898" i] input[type="button"],
table[border=""][bordercolorlight="#005898" i] input[type="submit"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  margin: 4px 4px 0 0 !important;
}
table[border=""][bordercolorlight="#005898" i] input[type="button"]:hover,
table[border=""][bordercolorlight="#005898" i] input[type="submit"]:hover{
  background: var(--usgn-navy-100) !important;
}
/* "Done" -- primary solid navy, this file's established literal-value
   convention for that word app-wide. */
table[border=""][bordercolorlight="#005898" i] input[type="button"][value="Done"]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
table[border=""][bordercolorlight="#005898" i] input[type="button"][value="Done"]:hover{
  background: var(--usgn-navy-700) !important;
}

/* ==========================================================================
   Master Contact Directory (contact.cgi, reference: "contact dir.html")
   ROLLOUT: PAGE-SPECIFIC -- contact.cgi.

   A single flat listing (no JS grid/pagination -- the page's own hint text
   says "Press Ctrl+F to initiate a search"): an outer plain <table border=0
   width=650> holding, per category: a navy banner row (<td bgcolor="#005898">
   containing <a class=cat>), a firm sub-row (a 2-cell inner table, each
   <td class=info bgcolor="#EBEEF5"> -- left cell has the firm name/address,
   right cell has phone/fax), then a run of contact cards (<td bgcolor=
   "#FFFFFF" width="160"> each wrapping a small 2-column table with the
   person's name/title/phone/mobile/fax/email) or a plain "No Contacts" line.

   Scope check done first: class=cat / class=firm / class=info (lowercase,
   this page's own inline <style>) are confirmed to exist nowhere else in the
   app as literal class values (grep's "TD.info" hits on every other page are
   a false-positive match against unrelated CSS SOURCE TEXT -- the pre-existing
   "TR.project_info TD.info{...}" selector already in this file, not a real
   class="info" attribute). bgcolor="#EBEEF5" and bgcolor="#FFFFFF" combined
   with width="160" are both confirmed unique to this page via grep/lxml.
   Every rule below is additionally scoped under #site_content anyway, per
   this file's established "double-scope defensively" habit.

   Verified via lxml before writing: 11 category banners (each containing
   exactly 1 a.cat), 34 firm rows (each with exactly 2 td.info[bgcolor=EBEEF5],
   the first always containing exactly 1 a.firm), 11 contact-card cells across
   6 rows (5 rows of 2, 1 row of 1 -- confirmed no row has more than 2), and
   32 "No Contacts" labels (<font size=1><b>...</b></font>, confirmed the only
   b-inside-font[size=1] on this page and the only page in the app with any). ========================================================================== */
/* Outer listing table -- centered, given breathing room. Distinguished from
   this same page's own bgcolor="#E4E4E4"-style tables (n/a here) and from
   every inner sub-table via the absence of a bgcolor attribute (confirmed via
   lxml: exactly 1 match, this table only). */
table[border="0"][width="650"][cellspacing="0"][cellpadding="0"]:not([bgcolor]){
  margin: 20px auto !important;
}
/* "Master Contact Directory" page heading. */
#site_content font[color="navy" i][size="3"]{
  font-family: var(--usgn-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--usgn-navy) !important;
  letter-spacing: -.01em;
}
/* "Add Firm" / "Edit/Remove Firm" intro links -- no class in this page's own
   markup (unlike admin page.html's classed a.adminLink/a.adminLink3 pointing
   at the same editFirm.cgi href, excluded below via :not([class])) -- styled
   as small navy pills, same recipe as add_remove_users.html's breadcrumb link. */
a[href="firmForm.cgi?projectID=0&popup=0"],
a[href="editFirm.cgi?projectID=0" i]:not([class]){
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
a[href="firmForm.cgi?projectID=0&popup=0"]:hover,
a[href="editFirm.cgi?projectID=0" i]:not([class]):hover{
  background: var(--usgn-navy-100) !important;
  color: var(--usgn-navy-700) !important;
}
/* "Show Disabled Contacts" link. */
a[href="contact.cgi?projectID=0&popup=0"]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
/* "Press Ctrl+F to initiate a search" hint text -- a plain (no bold, no
   link) font[size=1]. CAUGHT DURING VERIFICATION: a bare "#site_content
   font[size=1] with no b/a descendant" heuristic is NOT safe app-wide --
   edit menu.html's footer copyright line and user admin.html's 3
   #userDesc/#groupDesc description blocks (already deliberately styled
   gray-700 by an existing rule earlier in this file) both independently
   match that same shape and would have been silently overridden. Narrowed
   instead to also require a later sibling matching the outer listing
   table's own unique attribute signature (border=0/width=650/cellspacing=0/
   cellpadding=0/no bgcolor, both elements sit as siblings under this page's
   one unclosed top <b>, a DOM quirk noted in the section header above) --
   confirmed via direct DOM walk (Python's cssselect can't parse a `:has()`
   whose argument is itself an attribute selector, the same library gap
   noted throughout this file) that this compound now matches exactly 1
   element across every reference file, this page only. */
font[size="1" i]:not(:has(b)):not(:has(a)):has(~ table[border="0"][width="650"][cellspacing="0"][cellpadding="0"]:not([bgcolor])){
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-style: italic !important;
  color: var(--usgn-gray-500) !important;
}
/* Category banner (<td bgcolor="#005898"> containing <a class=cat>) -- this
   page's own inline <style> sets `A.cat{color:#000000}`, i.e. black text
   directly on a navy background, the same "invisible text" bug class flagged
   repeatedly elsewhere in this file (there: white-on-white; here: black-on-
   navy) -- fixed the same way, by giving the row real contrast instead of
   fighting the color. Scoped via :has(a.cat) rather than the bare bgcolor
   value, since a.cat is page-unique and this makes the anchor self-evidently
   safe regardless of bgcolor="#005898" reuse elsewhere in the app (nav bars,
   etc.) -- confirmed via lxml: 11 matches, one per category, no double-match
   (each td.:has(a.cat) is a single leaf-level cell, not nested inside another
   matching td). */
#site_content td[bgcolor="#005898" i]:has(a.cat){
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
  padding: 10px 16px !important;
  border-radius: var(--usgn-radius) var(--usgn-radius) 0 0 !important;
}
#site_content a.cat{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--usgn-white) !important;
}
#site_content a.cat:hover{
  color: var(--usgn-cyan) !important;
  text-decoration: underline !important;
}
/* Firm sub-row: 2 sibling td.info[bgcolor=EBEEF5] cells (address+phone/fax)
   read as one unified white card sitting directly under the category banner
   -- confirmed via lxml that every one of the 34 firm rows has exactly these
   2 cells as its only children, so :first-child/:last-child reliably target
   the true left/right edges (no :has() double-match risk here since there's
   no nesting -- these are plain siblings). */
#site_content td.info[bgcolor="#EBEEF5" i]{
  background: var(--usgn-white) !important;
  border-top: 1px solid var(--usgn-gray-200) !important;
  border-bottom: 1px solid var(--usgn-gray-200) !important;
  padding: 12px 20px !important;
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-700) !important;
  line-height: 1.6 !important;
}
#site_content td.info[bgcolor="#EBEEF5" i]:first-child{
  border-left: 1px solid var(--usgn-gray-200) !important;
  border-radius: 0 0 0 var(--usgn-radius) !important;
}
#site_content td.info[bgcolor="#EBEEF5" i]:last-child{
  border-right: 1px solid var(--usgn-gray-200) !important;
  border-radius: 0 0 var(--usgn-radius) 0 !important;
}
#site_content a.firm{
  font-family: var(--usgn-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
}
#site_content a.firm:hover{
  color: var(--usgn-cyan-700) !important;
}
/* Contact cards (<td bgcolor="#FFFFFF" width="160">). Adjacent-sibling
   combinators (not :has() descendant matching) merge each row's shared edge
   so two side-by-side cards read as one continuous pair rather than a double
   border down the middle; a lone card in a 1-cell row is untouched by either
   rule and keeps its full all-around radius, which is the correct look
   there too (confirmed via lxml: 5 rows of 2 cards, 1 row of 1). */
#site_content td[bgcolor="#FFFFFF" i][width="160"]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}
#site_content td[bgcolor="#FFFFFF" i][width="160"]:has(+ td[bgcolor="#FFFFFF" i][width="160"]){
  border-right: none !important;
  border-radius: var(--usgn-radius) 0 0 var(--usgn-radius) !important;
}
#site_content td[bgcolor="#FFFFFF" i][width="160"] + td[bgcolor="#FFFFFF" i][width="160"]{
  border-left: none !important;
  border-radius: 0 var(--usgn-radius) var(--usgn-radius) 0 !important;
}
#site_content td[bgcolor="#FFFFFF" i][width="160"] td.info{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  color: var(--usgn-gray-700) !important;
  line-height: 1.7 !important;
}
/* Contact name (<a name="...">, no href -- an anchor target, not a link, so
   the global a/a:hover rule never applies to it regardless of specificity;
   themed directly here instead). */
#site_content td[bgcolor="#FFFFFF" i][width="160"] td.info a[name]{
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  font-size: 13px !important;
}
/* "No Contacts" labels. */
#site_content font[size="1" i] > b{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: var(--usgn-gray-500) !important;
}


/* ==========================================================================
   Choose A Form -- shared shell (show_forms.cgi, two alternate skins)
   ROLLOUT: PAGE-SPECIFIC -- show_forms.cgi, both the old listbox skin and the new Dojo tree skin.
   reference: `old form selector.html` ("Select A Form or Build One", a
   plain size=30 <select> + button column) and `new form selector.html`
   (same title/page, but a Dojo tree-folder browser instead of the listbox --
   the two are togglable in-app via the "Old Version"/tree-default toggle).
   Both pages' body markup is otherwise completely different, but they share
   one identical outer-table signature: <table bgcolor="#005898" border="1"
   cellpadding="2" cellspacing="0" width="100%"> with a white title row
   (<tr bgcolor="#FFFFFF">) holding a white <font><b>Select A Form or Build
   One</b></font>. Verified via lxml: this exact attribute combination
   (bgcolor=#005898 + border=1 + width=100%, anywhere under #site_content)
   matches exactly 1 table in each of these two files and 0 in every other
   reference file in the folder -- safe to use as a bare descendant anchor
   (not :has(), so no double-match risk: the anchor matches the table
   itself, by its own attributes, and only one table per page has them).
   Descendant rather than direct-child because `old form selector.html`
   wraps its copy in an extra <font face=Arial> the new version doesn't
   have. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-collapse: collapse !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tr > td,
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tbody > tr > td{
  border: none !important;
}
/* Title row: white-on-white bug, same class flagged repeatedly elsewhere in
   this file (group list.html, edit group.html, contact dir.html, etc.) --
   the row is meant to sit on a navy/gradient banner, but this template
   hardcodes bgcolor="#FFFFFF" on the row directly. Given the real gradient
   banner background; existing white <font><b> text left exactly as-is. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tr[bgcolor="#FFFFFF" i],
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tbody > tr[bgcolor="#FFFFFF" i]{
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tr[bgcolor="#FFFFFF" i] td,
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tbody > tr[bgcolor="#FFFFFF" i] td{
  padding: 10px 14px !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tr[bgcolor="#FFFFFF" i] font,
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] > tbody > tr[bgcolor="#FFFFFF" i] font{
  font-size: 14px !important;
  letter-spacing: .01em;
}
/* Body row's own nested tables (the field/button layout on the old page,
   the tree+button layout on the new page) flattened so they read as one
   card surface instead of tables-inside-a-table. Overridden per-page below
   where a nested table needs its own distinct look (old page's Legend
   table, new page's .treeTable). */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] table{
  background: transparent !important;
}

/* ---- old form selector.html only ---- */

/* FormID listbox (size=30, native inline width:500px left untouched, same
   "don't fight an intentional fixed width" convention used throughout this
   file). Real listbox, not a dropdown -- no chevron. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] select[name="FormID"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] select[name="FormID"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Up/Down movers (type=submit, class=upDownBtn, value="/\"/"\/") -- these
   are literally the same reorder-arrow convention already styled for
   edit menu.html's .MiniButton / edit form.html's .mover (small square
   outlined-navy icon buttons), reused here for visual consistency. */
.upDownBtn{
  display: block !important;
  font-family: var(--usgn-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 4px !important;
  width: 28px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 2px auto !important;
  cursor: pointer !important;
}
.upDownBtn:hover{
  background: var(--usgn-navy-100) !important;
}
/* Use / Edit / New / Delete / Import / Back action column -- stacked
   outlined-navy secondary buttons, same rhythm as group list.html's/menu
   select.html's button stacks. Judgment call: "Use" (name=ex_form) is
   promoted to the solid-navy primary treatment since it's the actual "open
   this form" action a user is here to take -- flag in case the user wants
   all 6 kept at equal visual weight instead (that was this control's
   original, undifferentiated look). Applied to both this page and the
   "new form selector.html" tree version below so the two skins stay
   visually consistent with each other. */
.actionBtn{
  display: block !important;
  width: 100% !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  text-align: center !important;
}
.actionBtn:hover{
  background: var(--usgn-navy-100) !important;
}
input.actionBtn[value="Use" i]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
input.actionBtn[value="Use" i]:hover{
  background: var(--usgn-navy-700) !important;
}
/* Leftover <br> tags between the now-block upDownBtn/actionBtn buttons --
   same bug class as items 14-16 (menu select.html, group list.html):
   confirmed via lxml, 1 <br> between the 2 upDownBtn and 5 <br>s among the
   6 actionBtn buttons, all inside their own two <td>s. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] td:has(> input.upDownBtn) > br,
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] td:has(> input.actionBtn) > br{
  display: none !important;
}
/* Legend table ("Legend: / (n/N) Recent posts.../ * Static form.../
   G Global form / P Project specific form") -- tr.legend's markup is
   confirmed unique to this page (the identical bare CSS rule also sits,
   unused, in a couple of other pages' own boilerplate <style> blocks, but
   no other reference file actually markups a <tr class=legend>). Styled as
   a small reference key: header row as a bold eyebrow label, item rows as
   compact two-column gray text. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] tr.legend{
  font-family: var(--usgn-font) !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] tr.legend:first-child td{
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--usgn-gray-500) !important;
  padding-bottom: 4px !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] tr.legend:not(:first-child) td{
  font-size: 12px !important;
  color: var(--usgn-gray-700) !important;
  padding: 1px 6px 1px 0 !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] tr.legend:not(:first-child) td:first-child{
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  text-align: center !important;
}
/* "View Summary" link -- the surrounding <font size=1> renders at a
   near-illegible ~10px; bumped to a legible small size. Anchored via the
   href (confirmed unique app-wide) rather than the bare font[size=1]
   heuristic, since that heuristic already collides with unrelated elements
   on other pages (see the contact dir.html note elsewhere in this file). */
#site_content a[href^="form_summary.cgi"] font[size="1" i]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
}

/* ---- new form selector.html only ---- */

/* Dojo tree-folder browser card (class=treeTable, confirmed unique to this
   page via grep). Only the purely cosmetic border/background is touched --
   the tree's own sizing/scroll behavior is driven by sizer.min.js against
   #sizer_box and .dojo_box, which is left completely alone (same "don't
   fight the JS" caution as .menu_pos elsewhere in this file). */
.treeTable tbody tr td{
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
}
/* Use / Edit / New / Delete / Import / Info / Back action column -- these
   7 buttons carry no class at all (unlike old form selector.html's
   .actionBtn), so they're scoped through the shared shell anchor plus
   :not([class]) (confirmed via lxml: 8 unclassed buttons match under this
   anchor on this page -- the 7 listed plus "Old Version" below -- and 0 on
   old form selector.html, whose equivalent buttons all carry .actionBtn/
   .upDownBtn classes already handled above). Same stacked secondary-button
   treatment as .actionBtn, with "Use" promoted to primary for parity with
   the old page. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input[type="button"]:not([class]){
  display: block !important;
  width: 100% !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  text-align: center !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input[type="button"]:not([class]):hover{
  background: var(--usgn-navy-100) !important;
}
/* Note: the [type="button"] here isn't redundant -- it's load-bearing.
   Without it, this selector's specificity ((1,4,2), one attribute less
   than the general :not([class]) rule's (1,5,2)) would silently lose to
   the general rule despite appearing later in the file and despite both
   being !important -- specificity is compared before source order, always,
   in the important layer same as the normal one. Adding [type="button"]
   brings it to an exact (1,5,2) tie, which source order then correctly
   resolves in this rule's favor. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input[type="button"][name="ex_form" i]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input[type="button"][name="ex_form" i]:hover{
  background: var(--usgn-navy-700) !important;
}
/* "Old Version" (name=go_old) -- a view-switching utility action, not a
   form-workflow action like the 7 above, so it's deliberately kept at a
   lighter, muted weight (gray-700 outline rather than navy). No extra
   divider/margin added on top of that -- the markup already has 5 native
   blank <br>s (confirmed via lxml) separating it from the New Window
   checkbox above, which is more than enough visual separation on its own;
   adding a CSS divider too would double the gap, the exact bug class
   flagged repeatedly elsewhere in this file for display:block buttons. */
/* [type="button"] here is likewise load-bearing, same specificity-tie
   reasoning as the ex_form rule above -- without it this would lose to the
   general :not([class]) rule regardless of !important/source order. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input[type="button"][name="go_old" i]{
  color: var(--usgn-gray-700) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input[type="button"][name="go_old" i]:hover{
  background: var(--usgn-gray-100) !important;
}
/* Leftover <br> tags between the now-block buttons -- same bug class as
   old form selector.html above, but a different DOM shape here: unlike
   that page (where <form> wraps <td>s), this page's <form> is nested
   *inside* a single <td> and directly parents the buttons/checkbox/<br>s
   (confirmed via lxml: form.getparent().tag == 'td', and the buttons/brs
   are the form's direct children, not a td's) -- so the earlier
   td:has(>input)>br pattern doesn't apply; matched via adjacent-sibling
   combinator instead, which doesn't care what the shared parent is.
   Confirmed via lxml: exactly one <br> immediately follows each of the 7
   action buttons, and none follows "Old Version" (the last element). */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input[type="button"]:not([class]) + br{
  display: none !important;
}
/* "New Window" checkbox + label. */
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] input#new_window{
  accent-color: var(--usgn-navy) !important;
}
#site_content table[bgcolor="#005898" i][border="1"][width="100%" i] label[for="new_window"]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  color: var(--usgn-gray-700) !important;
}


/* ==========================================================================
   Form Layout Editor (build_form.cgi -- "Editing Form: <name>")
   ROLLOUT: PAGE-SPECIFIC -- build_form.cgi (form layout editor).
   reference: `edit form.html`. A two-column tool palette: the left "Toolkit"
   listbox (available tool types) and right "Form Layout" listbox (the
   form's actual field order), plus reorder/search/property controls and a
   bottom link bar. This page's own title/breadcrumb bar (<td bgcolor=navy>
   holding <a class="header">Project Bid Form (Log) - Forms - ... </a>)
   turned out to already be fully covered for free: confirmed via lxml that
   it's the exact same td[bgcolor="navy" i] + .header markup already styled
   for log view.html / sample form Entry.html / all tools form.html back in
   item 5 -- no new CSS needed for it here. */

/* Outer table (bare <table width="100%" border="1" cellspacing="0"
   cellpadding="1">, no bgcolor of its own -- confirmed via lxml this exact
   attribute combination is unique to this page) -- standard white card. */
#site_content > table[width="100%" i][border="1"][cellspacing="0"][cellpadding="1"]{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
}
#site_content > table[width="100%" i][border="1"][cellspacing="0"][cellpadding="1"] > tr > td,
#site_content > table[width="100%" i][border="1"][cellspacing="0"][cellpadding="1"] > tbody > tr > td{
  border: none !important;
  padding: 14px !important;
}
/* Toolkit / Form Layout listboxes (size=22 multiple, native inline
   width:150px/400px and font-size:0.85em left untouched). Real multi-row
   listboxes, not dropdowns -- no chevron. */
#site_content select[name="toolkit"], #site_content select[name="formLayout"]{
  font-family: var(--usgn-font) !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 4px !important;
}
#site_content select[name="toolkit"]:focus, #site_content select[name="formLayout"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Move layout item up/down ("/\\"/"\\/", class=mover) -- same small square
   reorder-arrow recipe as edit menu.html's .MiniButton and old form
   selector.html's .upDownBtn above. */
input.mover{
  font-family: var(--usgn-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 4px !important;
  width: 28px !important;
  height: 22px !important;
  padding: 0 !important;
  cursor: pointer !important;
}
input.mover:hover{
  background: var(--usgn-navy-100) !important;
}
/* "Add Tool" / "Info" / "Properties" / "Duplicate" / "Delete" / "Search" /
   "Select All" (input.btn, type=button, 7 total confirmed via lxml) --
   unlike every other button convention elsewhere in this file, these sit
   inline in a compact toolbar (text and a small counter field share the
   same line as "Add Tool", radios share a line under "Search"), so they're
   deliberately kept as small inline pill buttons rather than full-width
   blocks. Overrides the page's own inline <style> (.btn{font-size:.8em},
   div.btn A{border:1px outset black; background-color:buttonface}) which
   drew native 3D beveled buttons. */
input.btn[type="button"]{
  display: inline-block !important;
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin: 2px 2px 2px 0 !important;
  cursor: pointer !important;
}
input.btn[type="button"]:hover{
  background: var(--usgn-navy-100) !important;
}
/* "Name" / "Label" / "Value" search-type radios (input.btn, type=radio, 3
   total) -- the shared .btn class only ever set font-size/font-family on
   the page's own inline <style>, harmless on a radio, so no override needed
   there; just themed to match every other radio in this file. */
input.btn[type="radio"]{
  accent-color: var(--usgn-navy) !important;
}
#site_content label[for^="searchType"]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  color: var(--usgn-gray-700) !important;
  margin-right: 8px !important;
}
/* "Form Properties" / "Form Info" / "Edit Log Views" / "Forms" / "Entry" /
   "Log" (div.btn wrapping a plain <a>, 6 total confirmed via lxml) -- same
   small pill treatment as input.btn above, replacing the page's own raised
   3D-outset link-button look, for one consistent toolbar language across
   both the <input> and <a> controls on this page. */
div.btn > a{
  display: inline-block !important;
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  text-decoration: none !important;
}
div.btn > a:hover{
  background: var(--usgn-navy-100) !important;
  color: var(--usgn-navy-700) !important;
}
/* Small text fields: the tool-count stepper (name=toolCount, size=1
   maxlength=1, native inline width:20px left untouched) and the Name/
   Label/Value search box (name=search, sized live by sizer.min.js via
   __sizers.push, no native size/width in the markup to preserve). */
#site_content input[name="toolCount"], #site_content input[name="search"]{
  font-family: var(--usgn-font) !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
}
#site_content input[name="toolCount"]{
  text-align: center !important;
}
#site_content input[name="toolCount"]:focus, #site_content input[name="search"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}


/* ==========================================================================
   New Form dialog (build_form.cgi "New" action -- "Build Form: New")
   ROLLOUT: PAGE-SPECIFIC -- build_form.cgi new-form dialog.
   reference: `new form.html`. Same single-panel-dialog family as Create New
   User Group / Copy Group -- confirmed via lxml its outer table
   (bordercolor="#888888" + borderColorDark/borderColorLight, width=640) and
   inner field table (cellpadding="3", align=center) are attribute-for-
   attribute identical to create group.html's, so the white card, border
   removal, base td/label typography, the label-column right-align/bold
   treatment, and the Create/Cancel buttons all already apply here for free
   via the existing bare `table[bordercolor="#888888"]`/`table[cellpadding="3"]`
   rules above -- no new CSS needed for any of that. The `a.searcher` Prev/
   Search/Next row (Copy Form's typeahead) is likewise already covered by
   the bare rule from user admin.html. What's actually new on this page:
   the Form Name text input, the Form Layout dropdown, the Copy Form
   dropdown, the 3 Form Type radios, and their descriptive hint text --
   none of which share a signature with anything styled previously.
   Scope-checked via grep: name="formType"/"formImport"/"scope" and the
   exact-case, no-color `font[face="arial" size="1"]` hint spans are all
   confirmed unique to this page across the whole folder. */

/* Form Name (name=title) -- standard text field treatment, matching the
   sibling group_name/src_gid fields' width on the same table shape. */
table[cellpadding="3"] input[name="title"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 260px !important;
}
table[cellpadding="3"] input[name="title"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Form Layout (Static/Logged) and Copy Form (a plain dropdown despite its
   ~400 options -- no multiple/size attribute, so it's a real single
   dropdown, not a listbox) -- both get the full appearance:none + inline
   chevron treatment, same recipe as select[name="src_gid"] above. Copy
   Form additionally pairs with its own Prev/Search/Next `a.searcher` row,
   but that's an independent control sitting above it in the markup, not a
   reason to withhold the chevron from the dropdown itself. */
table[cellpadding="3"] select[name="formType"],
table[cellpadding="3"] select[name="formImport"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 260px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 28px !important;
  background-color: var(--usgn-white) !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}
table[cellpadding="3"] select[name="formType"]:focus,
table[cellpadding="3"] select[name="formImport"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}
/* Form Type radios (scope1/2/3: All Projects Unique / Global / Project
   Only) -- same accent-color convention as this table's checkboxes above;
   no parallel input[type=radio] rule existed on this shared table anchor
   before now (only checkboxes did), so this is additive, not an override. */
table[cellpadding="3"] input[type="radio"]{
  accent-color: var(--usgn-navy) !important;
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
/* Each radio's inline descriptive text ("Form appears on all projects,
   contains project specific data", etc.) is its own <font face="arial"
   size="1"> sibling inside the <label>, not covered by the bare `label`
   typography rule above since font[] carries its own explicit face/size --
   an element's own specified value beats one merely inherited from an
   ancestor label, same rule noted elsewhere in this file for the
   Add/Remove Users breadcrumb links. Styled as small gray-700 hint text,
   the same role as the .hint convention in the design guidelines doc. */
table[cellpadding="3"] label font[face="arial" i][size="1"]{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  color: var(--usgn-gray-500) !important;
  font-style: normal !important;
}


/* ==========================================================================
   Select A Report / Select A Trigger (show_reports.cgi, report_triggers.cgi)
   ROLLOUT: PAGE-SPECIFIC -- show_reports.cgi / report_triggers.cgi.
   reference: `select report.html` ("Select A Report or Build One") and
   `trigger.html` ("Select A Trigger or Build One"). Same family as `group
   list.html` (item 11): a plain bordered outer table (no bgcolor of its
   own) with a white title row, wrapping a <table bgcolor="#005898"> "navy
   panel" that holds a big listbox, a width=7 gutter cell, and a button
   column. Simpler than group list.html's title row -- no nested table or
   Help link here, just a bare <font> directly inside the <td>.

   Confirmed via lxml that both pages' outer tables (border="1"
   cellpadding="1" cellspacing="0" width="100%", no bgcolor, a direct child
   of #site_content) are attribute-for-attribute identical to `edit
   form.html`'s own outer table (already styled in item 18 as a standard
   white card) -- so both pages inherit that card look, plus the `> tr > td
   { border:none; padding:14px }` pair, for FREE from the existing bare
   `#site_content > table[width="100%" i][border="1"][cellspacing="0"]
   [cellpadding="1"]` rule -- same "shares the exact shell" situation as
   copy group.html/new form.html (items 13/21). Re-verified this doesn't
   regress edit form.html (still matches exactly those 3 files).

   What's new below is the incremental centering plus each page's own navy
   panel and its contents, scoped through a page-unique select[name=...]
   anchor -- never bare, since bgcolor="#005898" + cellpadding="2" +
   cellspacing="0" + width="100%" together is ALSO group list.html's own
   navy-panel signature (confirmed via lxml) -- an unscoped rule here would
   have leaked onto that page's listbox panel. Button name= values (ex_query/
   ed_query/del_query/new_query/tr_query/back_butt) are reused across menu
   select.html/old form selector.html/new form selector.html too (confirmed
   via lxml), so those are never matched bare either. */

/* Centering, same 1040px convention as group list.html's own listbox+button
   dialog -- the base white-card background/border/radius/shadow already
   comes from the shared rule noted above, so only what differs (width/
   margin/border-collapse) is re-declared here. Judgment call, flag if the
   user wants these left full-width instead. */
#site_content > table:has(select[name="ReportID"]),
#site_content > table:has(select[name="TriggerID"]){
  width: auto !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
}
table:has(select[name="ReportID"]) td,
table:has(select[name="ReportID"]) tr,
table:has(select[name="TriggerID"]) td,
table:has(select[name="TriggerID"]) tr{
  border: none !important;
}

/* Title row bug: <tr bgcolor=#FFFFFF> holding a white <font> title -- the
   same invisible white-on-white pattern fixed the same way everywhere else
   in this file (real gradient banner background, white text left as-is).
   Direct-child combinator off the outer table -- confirmed via lxml exactly
   1 match per page; no nested title table here (unlike group list.html), so
   no double-match risk from :has()'s descendant form. */
#site_content > table:has(select[name="ReportID"]) > tr[bgcolor="#FFFFFF" i],
#site_content > table:has(select[name="ReportID"]) > tbody > tr[bgcolor="#FFFFFF" i],
#site_content > table:has(select[name="TriggerID"]) > tr[bgcolor="#FFFFFF" i],
#site_content > table:has(select[name="TriggerID"]) > tbody > tr[bgcolor="#FFFFFF" i]{
  background: linear-gradient(120deg, var(--usgn-navy) 0%, var(--usgn-blue) 60%, var(--usgn-cyan) 100%) !important;
}
#site_content > table:has(select[name="ReportID"]) > tr[bgcolor="#FFFFFF" i] font[color="#ffffff" i],
#site_content > table:has(select[name="ReportID"]) > tbody > tr[bgcolor="#FFFFFF" i] font[color="#ffffff" i],
#site_content > table:has(select[name="TriggerID"]) > tr[bgcolor="#FFFFFF" i] font[color="#ffffff" i],
#site_content > table:has(select[name="TriggerID"]) > tbody > tr[bgcolor="#FFFFFF" i] font[color="#ffffff" i]{
  font-family: var(--usgn-font) !important;
  font-size: 15px !important;
  letter-spacing: .01em !important;
}

/* Navy panel -> flat/transparent, blending into the outer card (same idea
   as group list.html's own navy panel). Padding restored on real content
   cells only; the width=7 gutter cell explicitly zeroed so it stays the
   narrow spacer it was before. */
table:has(select[name="ReportID"]) table[bgcolor="#005898"],
table:has(select[name="TriggerID"]) table[bgcolor="#005898"]{
  background: transparent !important;
  width: 100% !important;
}
table:has(select[name="ReportID"]) table[bgcolor="#005898"] td:not([width="7"]),
table:has(select[name="TriggerID"]) table[bgcolor="#005898"] td:not([width="7"]){
  padding: 14px !important;
}
table:has(select[name="ReportID"]) table[bgcolor="#005898"] td[width="7"],
table:has(select[name="TriggerID"]) table[bgcolor="#005898"] td[width="7"]{
  padding: 0 !important;
}

/* select[name=ReportID]/[TriggerID]: size=15 real listboxes (not dropdowns),
   base field styling only, no chevron -- same convention as select[name=
   GroupID]. */
select[name="ReportID"], select[name="TriggerID"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
select[name="ReportID"]:focus, select[name="TriggerID"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* Action-button columns -- Execute/Edit/Delete/New/Triggers/Back (select
   report.html, 6 buttons, name=ex_query/ed_query/del_query/new_query/
   tr_query/back_butt) and New/Edit/Delete/Back (trigger.html, 4 buttons,
   name=new_query/ed_query/del_query/back_butt) -- no shared class,
   distinguished only by name=, so scoped through each page's own
   select[name=...] table anchor. Stacked outlined-navy secondary, same
   rhythm as group list.html/menu select.html's button stacks. Judgment
   call: "Execute" (the actual "run this report" action) is promoted to the
   solid-navy primary treatment, same reasoning as "Use" on old/new form
   selector.html -- trigger.html has no equivalent single primary action
   (New/Edit/Delete/Back read as equal-weight management actions, like
   group list.html's 5 buttons), so nothing is promoted there; flag in case
   the user wants select report.html's buttons kept at equal weight
   instead. */
table:has(select[name="ReportID"]) input[type="button"],
table:has(select[name="ReportID"]) input[type="submit"],
table:has(select[name="TriggerID"]) input[type="button"]{
  display: block !important;
  width: 100% !important;
  max-width: 170px !important;
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin: 1px 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}
table:has(select[name="ReportID"]) input[type="button"]:hover,
table:has(select[name="ReportID"]) input[type="submit"]:hover,
table:has(select[name="TriggerID"]) input[type="button"]:hover{
  background: var(--usgn-navy-100) !important;
}
table:has(select[name="ReportID"]) input[value="Execute" i]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
table:has(select[name="ReportID"]) input[value="Execute" i]:hover{
  background: var(--usgn-navy-700) !important;
}
/* Leftover <br> tags between the now-block buttons -- same bug class as
   items 14-16/group list.html. Confirmed via lxml: 5 <br>s among select
   report.html's 6 buttons, 3 among trigger.html's 4 (in both, every button
   but the last, "Back", has a trailing <br>). */
table:has(select[name="ReportID"]) td:has(> input[type="button"], > input[type="submit"]) > br,
table:has(select[name="TriggerID"]) td:has(> input[type="button"]) > br{
  display: none !important;
}

/* Footnote row (select report.html only -- "Reports with an asterisk (*)
   are not complete and may only be edited, not executed.", a font[size=1]
   inside the navy panel's own second row; confirmed via lxml 0 matches on
   trigger.html, which has no such row). Styled as small hint text, same
   role as the design guidelines' .hint convention. */
table:has(select[name="ReportID"]) table[bgcolor="#005898"] td[colspan="3"] font{
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  color: var(--usgn-gray-500) !important;
  font-style: italic !important;
}

/* a.searcher (Prev/Search/Next under the ReportID listbox) needs no new CSS
   here -- already covered app-wide by the bare rule added for user admin.
   html. trigger.html has no searcher block at all (confirmed via lxml: 0
   .searcher elements on that page). */


/* ==========================================================================
   Build Report: New (build_report.cgi "New" action -- reference: `new
   ROLLOUT: PAGE-SPECIFIC -- build_report.cgi new-report dialog.
   report.html`, "Build Report: New"). Confirmed via lxml its outer table
   (border="1" bordercolordark="#222222" bordercolorlight="#DDDDDD"
   bordercolor="#888888" cellspacing="1" cellpadding="2" width="640") and
   inner field table (border="1" cellspacing="0" cellpadding="3"
   align="center") are attribute-for-attribute identical to create group.
   html's/new form.html's/copy group.html's -- so the white card, border
   removal, base td font/padding, and the Cancel button all already apply
   here for free via the existing bare `table[bordercolor="#888888"]`/
   `table[cellpadding="3"]` rules -- no new CSS needed for any of that.

   One real gap found in the existing shared rule (not new to this page):
   this page's Create button is `<input type="submit" value="Create"
   name="createNew">` -- type=submit, not type=button like create group.
   html's/new form.html's own Create buttons -- so the existing `table
   [cellpadding="3"] input[type="button"][value="Create"]` rule doesn't
   reach it. A parallel type=submit rule is added below rather than
   editing the existing one, so create group.html/new form.html/copy
   group.html (all type=button there, confirmed via lxml) are completely
   unaffected. */
table[cellpadding="3"] input[type="submit"][value="Create"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  margin: 0 4px !important;
  background: var(--usgn-navy) !important;
  color: var(--usgn-white) !important;
  border: none !important;
}
table[cellpadding="3"] input[type="submit"][value="Create"]:hover{
  background: var(--usgn-navy-700) !important;
}

/* Report Name (name="name") -- standard text field, same recipe as
   group_name/title above. Confirmed via lxml input[name="name"] appears
   nowhere else in the folder, so no extra scoping needed beyond the shared
   table anchor already required for consistency. */
table[cellpadding="3"] input[name="name"]{
  font-family: var(--usgn-font) !important;
  font-size: 14px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 260px !important;
}
table[cellpadding="3"] input[name="name"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* Report Data / Layout / Copy Report dropdowns -- three plain single
   selects (no multiple/size attribute), so all get the full appearance:
   none + inline chevron treatment, same recipe as select[name="src_gid"]
   above. The :not([multiple])/:not([size]) guards are defensive, matching
   this file's convention elsewhere -- edit report.html's OWN reportData/
   reportLayout fields (big multiple/size=30 listboxes, a completely
   different page with no table[cellpadding="3"] element at all) are
   already excluded structurally since they don't share this table anchor;
   the attribute guards are extra insurance in case a future page reuses
   this exact table shape with a listbox variant of these same names. */
table[cellpadding="3"] select[name="reportData"]:not([multiple]),
table[cellpadding="3"] select[name="reportLayout"]:not([size]),
table[cellpadding="3"] select[name="copyReportID"]{
  font-family: var(--usgn-font) !important;
  font-size: 13.5px !important;
  color: var(--usgn-gray-900) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  width: 260px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 28px !important;
  background-color: var(--usgn-white) !important;
  background-image: var(--usgn-chevron-svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}
table[cellpadding="3"] select[name="reportData"]:focus,
table[cellpadding="3"] select[name="reportLayout"]:focus,
table[cellpadding="3"] select[name="copyReportID"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* "Copy Report:" label (the shared table's generic td typography rule
   already covers it, but it's not first-child so it misses the bold/
   right-align label treatment every other label on this table gets) --
   scoped via the page's own unique tr.top_line (confirmed via lxml: this
   class appears exactly once in the whole folder, on this page's own
   inline <style>), :last-child picking out this one cell (4th of 4 tds in
   that row). The "- or -" divider (the one td[rowspan="2"] anywhere in a
   table[cellpadding="3"], confirmed via lxml) gets a small centered
   eyebrow-style treatment instead of plain body text. */
table[cellpadding="3"] tr.top_line > td:last-child{
  font-weight: 700 !important;
  color: var(--usgn-gray-700) !important;
  vertical-align: top !important;
}
table[cellpadding="3"] td[rowspan="2"]{
  text-align: center !important;
  color: var(--usgn-gray-500) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* a.searcher (Prev/Search/Next above the Copy Report dropdown) needs no new
   CSS -- already covered app-wide by the bare rule from user admin.html. */


/* ==========================================================================
   Report Layout Editor (build_report.cgi "Editing Report: <name>" --
   ROLLOUT: PAGE-SPECIFIC -- build_report.cgi edit mode (report layout editor).
   reference: `edit report.html`, "Editing Report: Change Orders (Forms)").
   The reports counterpart to `edit form.html`'s Form Layout Editor (item
   18): a left "Report Data" listbox (available fields to pull in) and
   right "Report Layout" listbox (the report's actual row/column
   definitions), plus reorder/view/add controls for each, a live preview
   pane, and a bottom Save/Save-and-Run/Cancel bar. Unlike every other
   dialog in this file, the page supplies almost NO distinguishing classes
   or ids on its own wrapper markup -- the outer <table> is completely
   bare (no border/bgcolor/width attributes at all).

   Anchor: confirmed via a direct lxml DOM walk that `input[name=
   "reportProperties"]` exists exactly once in the whole folder, only on
   this page, so every rule below is scoped through `form[name="form1"]:has
   (input[name="reportProperties"])` -- form[name=form1] alone is reused on
   select report.html/new report.html/trigger.html too (their own,
   unrelated forms), so the bare form selector is never used by itself.
   (cssselect's Python test library can't parse :has() with an attribute-
   selector argument, a confirmed gap noted throughout this file, not a
   real browser limitation -- verified instead by walking the parsed DOM
   directly: exactly 1 match, this page only.)

   Several field names here collide with OTHER pages' own, unrelated
   controls once other-page classes are stripped away -- confirmed via
   lxml, always double-checked before assuming a name is safe to match
   bare: dataView/dataUp/layoutView/layoutUp also exist on edit menu.html
   (its own Expand/Close tree buttons, scoped there under .NewDiv);
   moveLayoutUp/moveLayoutDown also exist on edit form.html (class=mover)
   and edit menu.html (class=MiniButton) -- this page's own copies carry no
   class at all; layoutDelete also exists on edit form.html (class=btn);
   id="preview" also exists on edit menu.html (scoped there under
   #MenuEditButtonBar). None of these are matched bare below. */

/* Outer table -> standard white card. SECOND follow-up fix (first
   screenshot showed the padding gap fixed below; a second screenshot
   showed the real, bigger culprit still standing): this table has no
   native `width`/`cellpadding` HTML attributes at all (confirmed via lxml
   -- unlike edit form.html's own toolkit table, which already had a native
   width="100%" this file was just riding along on), so forcing `width:100%`
   here via CSS handed the browser's plain (non-fixed) table-layout
   algorithm a page-wide box to fill across only 4 columns -- 2 of which
   (the reportData select / reportLayout select) have their own committed
   350px inline width, and 2 of which (the narrow searcher/reorder-arrow
   columns) have no width commitment at all. With nothing else to absorb
   the remainder, the browser gave ALL of the leftover width to those two
   *already-narrow* columns, stretching them to ~600px each -- exactly the
   "huge gap, especially before the arrows" the screenshot showed (the
   small `:nth-child(2)/(4)` padding fix below was correct but tiny next to
   this). Fixed by dropping the forced width -- the table now sizes to its
   real content (~800px) instead of stretching to fill the page -- and
   giving the two narrow columns an explicit, small width so they can no
   longer be treated as "flexible" by the layout algorithm even if the
   table's width changes again later. */
form[name="form1"]:has(input[name="reportProperties"]) > table{
  background: var(--usgn-white) !important;
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius) !important;
  box-shadow: var(--usgn-shadow-card) !important;
  border-collapse: collapse !important;
  width: auto !important;
  margin: 0 auto !important;
}
/* Base padding for every direct td (the colspan=4 rows -- action-button bar,
   preview checkboxes, preview pane, Report Properties/Excel Import, Save/
   Cancel -- only ever have ONE td per row, so they're untouched by the
   :nth-child overrides just below and simply get this top/bottom-heavy,
   narrow-horizontal padding as their card breathing room). */
form[name="form1"]:has(input[name="reportProperties"]) > table > tr > td,
form[name="form1"]:has(input[name="reportProperties"]) > table > tbody > tr > td{
  border: none !important;
  padding: 10px 8px !important;
}
/* FOLLOW-UP FIX #1 (reported from a live screenshot: "too much space
   between the two columns, especially between column 2 and the arrows"):
   the 3-row grid at the top of this page (label row / select row /
   action-button row, confirmed via lxml each has exactly 4 <td> children,
   unlike every row below them which is a single colspan=4 td) is laid out
   as 4 columns in ONE table -- [1] Report Data content, [2] a narrow
   column holding only the reportData searcher/sizer, [3] Report Layout
   content, [4] a narrow column holding only the reportLayout reorder
   arrows. The base padding rule above is written for the table's role as
   the outer white card, so it was applying that same full padding to
   narrow columns [2] and [4] too, on both sides -- stacked on top of
   column [1]'s/[3]'s own padding, reading as a bigger gap than intended.
   Also given an explicit width now (see the table-width note above) so
   these two columns can't be handed the page's leftover width again.
   Columns [2]/[4] are confirmed via lxml to exist ONLY in these 3 rows
   (:nth-child(2)/(4) never matches inside a colspan=4 row, since those
   have just one td each), so this is scoped safely without an extra
   class/id to key on. */
form[name="form1"]:has(input[name="reportProperties"]) > table > tr > td:nth-child(2),
form[name="form1"]:has(input[name="reportProperties"]) > table > tbody > tr > td:nth-child(2),
form[name="form1"]:has(input[name="reportProperties"]) > table > tr > td:nth-child(4),
form[name="form1"]:has(input[name="reportProperties"]) > table > tbody > tr > td:nth-child(4){
  width: 46px !important;
  padding: 10px 2px !important;
}
form[name="form1"]:has(input[name="reportProperties"]) > table > tr > td:nth-child(1),
form[name="form1"]:has(input[name="reportProperties"]) > table > tbody > tr > td:nth-child(1),
form[name="form1"]:has(input[name="reportProperties"]) > table > tr > td:nth-child(3),
form[name="form1"]:has(input[name="reportProperties"]) > table > tbody > tr > td:nth-child(3){
  padding: 10px 6px !important;
}

/* Report Data / Report Layout listboxes (size=30, reportData additionally
   multiple) -- real multi-row listboxes, base field styling only, no
   chevron, same recipe as edit form.html's toolkit/formLayout selects. */
form[name="form1"]:has(input[name="reportProperties"]) select[name="reportData"],
form[name="form1"]:has(input[name="reportProperties"]) select[name="reportLayout"]{
  font-family: var(--usgn-font) !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 4px !important;
}
form[name="form1"]:has(input[name="reportProperties"]) select[name="reportData"]:focus,
form[name="form1"]:has(input[name="reportProperties"]) select[name="reportLayout"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* Move layout item up/down ("/\\"/"\\/", unclassed here) -- same small
   square reorder-arrow recipe as input.mover/.upDownBtn/.MiniButton
   elsewhere in this file. */
form[name="form1"]:has(input[name="reportProperties"]) input[name="moveLayoutUp"],
form[name="form1"]:has(input[name="reportProperties"]) input[name="moveLayoutDown"]{
  display: block !important;
  font-family: var(--usgn-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 4px !important;
  width: 28px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
}
form[name="form1"]:has(input[name="reportProperties"]) input[name="moveLayoutUp"]:hover,
form[name="form1"]:has(input[name="reportProperties"]) input[name="moveLayoutDown"]:hover{
  background: var(--usgn-navy-100) !important;
}

/* Every other button (17 confirmed via lxml: View/Up/Add as Data/Add as
   Text/Add as Joined Data/Add as Joined Text/Add Spacer on the Data side;
   View/Up/Add New/Update/Delete on the Layout side; Report Properties/
   Excel Import; Save/Save and Run; Cancel) -- the markup deliberately
   groups several of these onto the same line via inline <br> placement
   (e.g. "Add as Data"/"Add as Text" share a line), unlike the stacked
   full-width columns used for CRUD dialogs elsewhere in this file, so
   these are kept as small inline pill buttons instead -- same idiom as
   edit form.html's input.btn toolbar. Base rule gives every one of them
   the lighter outlined-navy secondary look (this also covers "Cancel" and
   "Report Properties"/"Excel Import" with no extra rule needed); "Save"/
   "Save and Run" (both name=finished, confirmed via lxml) are promoted to
   solid-navy primary as the two real commit actions on this page. */
form[name="form1"]:has(input[name="reportProperties"]) input[type="button"]:not([name="moveLayoutUp"]):not([name="moveLayoutDown"]){
  display: inline-block !important;
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  margin: 2px 4px 2px 0 !important;
  cursor: pointer !important;
}
form[name="form1"]:has(input[name="reportProperties"]) input[type="button"]:not([name="moveLayoutUp"]):not([name="moveLayoutDown"]):hover{
  background: var(--usgn-navy-100) !important;
}
form[name="form1"]:has(input[name="reportProperties"]) input[name="finished"]{
  color: var(--usgn-white) !important;
  background: var(--usgn-navy) !important;
  border: none !important;
}
form[name="form1"]:has(input[name="reportProperties"]) input[name="finished"]:hover{
  background: var(--usgn-navy-700) !important;
}

/* "Add New" layout-name text field (name="layoutText", the one visible
   text input on this page besides the hidden addText field -- confirmed
   via lxml unique). */
form[name="form1"]:has(input[name="reportProperties"]) input[name="layoutText"]{
  font-family: var(--usgn-font) !important;
  font-size: 13px !important;
  color: var(--usgn-gray-900) !important;
  background: var(--usgn-white) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 6px !important;
  padding: 5px 8px !important;
  box-sizing: border-box !important;
}
form[name="form1"]:has(input[name="reportProperties"]) input[name="layoutText"]:focus{
  outline: none !important;
  border-color: var(--usgn-blue) !important;
  box-shadow: var(--usgn-focus-ring) !important;
}

/* Preview / Inline / 3 Rows checkboxes (ids preview/preview_inline/
   preview_3rows, all wrapped in their own <label for=...>) -- accent-color
   convention, plus label typography. [for^="preview"] is a case-sensitive
   prefix match (no "i" flag), so it can't accidentally reach edit menu.
   html's differently-cased #PreviewRole select id even outside this page's
   own scope; the form[name="form1"]:has(...) anchor keeps it fully
   contained regardless. */
form[name="form1"]:has(input[name="reportProperties"]) input[type="checkbox"]{
  accent-color: var(--usgn-navy) !important;
}
form[name="form1"]:has(input[name="reportProperties"]) label[for^="preview"]{
  font-family: var(--usgn-font) !important;
  font-size: 12.5px !important;
  color: var(--usgn-gray-700) !important;
  margin-right: 14px !important;
}

/* Live preview pane (#divPreviewWrapper/#divPreview, shown/hidden and
   sized via sizer.min.js's __sizers.push -- left completely alone, same
   "don't fight the JS" caution as .menu_pos/.treeTable elsewhere; only the
   cosmetic border/background is touched, confirmed unique ids via grep). */
#divPreviewWrapper{
  border: 1px solid var(--usgn-gray-200) !important;
  border-radius: var(--usgn-radius-sm) !important;
  background: var(--usgn-white) !important;
}

/* Excel Import popup (#excel-form, a jQuery UI dialog opened via the
   "Excel Import" button above, hidden until then) -- only the header-rows
   count field and the two upload action links are styled; the upload
   widget's own layout containers (#container/#filelist/#sheets/
   #summary_table, float-based per the page's own inline styles) are left
   alone, same "don't fight the JS" caution as the preview pane above. All
   ids confirmed unique via grep. */
#header_rows{
  font-family: var(--usgn-font) !important;
  border: var(--usgn-field-border) !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  box-sizing: border-box !important;
}
#uploader_pick, #uploader_upload{
  display: inline-block !important;
  font-family: var(--usgn-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--usgn-navy) !important;
  background: var(--usgn-white) !important;
  border: 1.5px solid var(--usgn-navy) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin-right: 6px !important;
  text-decoration: none !important;
}
#uploader_pick:hover, #uploader_upload:hover{
  background: var(--usgn-navy-100) !important;
}