/* Admin (back office) design system. Linked from site_data/nav.php (login / reset / day.php link it
   themselves). No Bootstrap or main.css anywhere in admin since 11.10. Tokens come from the public site.css;
   the components are admin-density versions. Buttons are .act, cards are .box. Desktop only (1366 / 1920).
   Light / dark: the dark values are section 2b; a new surface takes the tokens (--box-bg, --field-bg, --control-bg,
   --pop-bg ...), never a literal white, or it stays white in the dark theme.
   Bump $admin_asset_v in site_data/nav.php on every change. */

/* 1. Type ------------------------------------------------------------------ */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter/latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter/latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Tokens (on <html data-brand>, set by nav.php) ---------------------------- */
[data-brand] { --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --input-radius: 8px; --rail-w: 248px; --env-h: 0px;
  --ok: #1E7F4F; --ok-tint: #E3F2EA; --warn: #A15C00; --warn-tint: #FCEFDC; --warn-line: #E9C98F; --warn-bg: #FFFBF3; --bad: #B42318; --bad-tint: #FBE7E5;
  --restricted: #6941C6; --restricted-tint: #F4EBFF; --restricted-line: #D6BBFB; --restricted-bg: #F9F5FF; } /* restricted (account-limited) features: violet, never the to-do / warning amber */
[data-brand] { --field-bg: #FFFFFF; --field-line: var(--line); --control-bg: #FFFFFF; --pop-bg: #FFFFFF; --on-accent: #FFFFFF; --tip-bg: var(--ink); --tip-ink: #FFFFFF; --st-tone: #6B7785; --st-tint: #E9EDF1; } /* the surfaces the dark theme (2b) re-colours: inputs, buttons, menus, text on the accent, tooltips, the neutral status dot */
[data-brand="drone"] { --rail-bg: #0B0B0B; --rail-ink: #C9CCD0; --rail-head: #6E7378; --rail-on: #FFFFFF; --rail-on-bg: rgba(47, 145, 158, .18); --rail-mark: #43A3AF;
  --work-bg: #F4F5F6; --box-bg: #FFFFFF; --line: #E3E5E7; --ink: #111111; --ink-muted: #5C5C5C; --accent: #2F919E; --accent-text: #23808C; --accent-soft: #A9CFD3; }
[data-brand="aircraft"] { --rail-bg: #00142E; --rail-ink: #C7D3DC; --rail-head: #6F8599; --rail-on: #FFFFFF; --rail-on-bg: rgba(157, 186, 202, .16); --rail-mark: #9DBACA;
  --work-bg: #F2F6F8; --box-bg: #FFFFFF; --line: #D5DEE4; --ink: #0B1F33; --ink-muted: #4F5D68; --accent: #001B3D; --accent-text: #0B4A7A; --accent-soft: #9DBACA; }
[data-brand] { --rail-owner: #D6BBFB; --rail-owner-bg: rgba(105, 65, 198, .28); --rail-owner-tint: rgba(105, 65, 198, .14); } /* the owner-only Tools link in the rail (section 4): the restricted violet, lightened for text on the dark rail */
[data-brand]:has(.env-banner) { --env-h: 28px; }

/* 2b. Dark theme: <html data-theme="dark"> (db.php, from the admin_theme cookie the top bar switch writes). Only the work
   area changes; the rail and the Tools flyout keep their own palette in both. Drone: neutral charcoal under the near-black
   rail, the brand teal kept. Plane: PlaneCover dark's navies (site.css section 12), the steel accent with navy ink on it.
   Status tones lighten, their tints turn translucent. Screen only: a printed page keeps the light tokens. */
@media screen {
  [data-brand][data-theme="dark"] { color-scheme: dark;
    --ok: #47C287; --ok-tint: rgba(71, 194, 135, .16); --warn: #F2A541; --warn-tint: rgba(242, 165, 65, .16); --warn-line: rgba(242, 165, 65, .42); --warn-bg: rgba(242, 165, 65, .08); --bad: #F97066; --bad-tint: rgba(249, 112, 102, .16);
    --restricted: #B692F6; --restricted-tint: rgba(182, 146, 246, .18); --restricted-line: rgba(182, 146, 246, .42); --restricted-bg: rgba(182, 146, 246, .08);
    --tip-bg: #E9EDF1; --tip-ink: #0B0F14; --st-tone: #8D99A6; --st-tint: rgba(141, 153, 166, .22); }
  [data-brand="drone"][data-theme="dark"] { --work-bg: #141619; --box-bg: #1C1F23; --line: #2E3338; --field-bg: #121417; --field-line: #3A4046; --control-bg: #24282D; --pop-bg: #23272C;
    --ink: #ECEEF0; --ink-muted: #A2A9AF; --accent: #2F919E; --accent-text: #5DBAC6; --accent-soft: #285F66; --on-accent: #FFFFFF; }
  [data-brand="aircraft"][data-theme="dark"] { --work-bg: #07111F; --box-bg: #0C1A2C; --line: #1F3450; --field-bg: #0A1626; --field-line: #2E4560; --control-bg: #13243A; --pop-bg: #10223A;
    --ink: #F2F6F8; --ink-muted: #A9B7C3; --accent: #9DBACA; --accent-text: #8DC2E8; --accent-soft: #33506B; --on-accent: #001B3D; }
  [data-theme="dark"] .rail { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07); } /* the page beside it is dark too */
  [data-theme="dark"] .top__search #searcher { box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, .45); } /* light has the shadow alone */
  [data-theme="dark"] .feed-file .ft-pdf { color: #F0625D; } [data-theme="dark"] .feed-file .ft-word { color: #7EA6E6; } [data-theme="dark"] .feed-file .ft-excel { color: #4CB782; }
  [data-theme="dark"] .feed-file .ft-ppt { color: #F08A68; } [data-theme="dark"] .feed-file .ft-image { color: #C29BE0; } [data-theme="dark"] .feed-file .ft-media { color: var(--warn); }
}
@media print { [data-brand][data-theme="dark"] { color-scheme: light; } } /* outranks header.php's color-scheme meta, so native controls print light too */

/* 3. Base + page layout. #wrapper keeps
   its padding for the fixed rail whatever main.js toggles. ------------------- */
[data-brand] body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--work-bg); -webkit-font-smoothing: antialiased; }
[data-brand] #wrapper, [data-brand] #wrapper.toggled { padding-left: var(--rail-w); padding-top: var(--env-h); transition: none; }
[data-brand] #page-content-wrapper { padding: 28px 32px 48px; }

.env-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: 28px; box-sizing: border-box; padding: 5px 16px; background: #C00; color: #FFF; text-align: center; font: 700 13px/18px var(--font); letter-spacing: .04em; white-space: nowrap; }
.env-banner__x { position: absolute; top: 0; right: 4px; height: 28px; padding: 0 10px; border: 0; background: none; color: inherit; font-size: 14px; cursor: pointer; opacity: .8; } .env-banner__x:hover { opacity: 1; } /* removes the banner; :has() above then drops --env-h. Back on the next page load. */

/* 4. Rail ------------------------------------------------------------------ */
.rail { position: fixed; top: var(--env-h); left: 0; bottom: 0; z-index: 1000; width: var(--rail-w); overflow-y: auto; display: flex; flex-direction: column; background: var(--rail-bg); color: var(--rail-ink); font-size: 14px; line-height: 1.4; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.rail a, .rail a:hover { text-decoration: none; }
.rail__brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 20px 12px; }
.rail__brand img { display: block; height: 30px; width: auto; }
.rail__sys { display: flex; gap: 2px; padding: 2px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rail__sys a { padding: 3px 7px; border-radius: 6px; color: var(--rail-head); }
.rail__sys a:hover { color: var(--rail-on); }
.rail__sys a.is-on { background: var(--rail-on-bg); color: var(--rail-on); }
.rail__group { margin: 14px 20px 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rail-head); }
.rail ul { margin: 0; padding: 0 10px; list-style: none; }
.rail li a { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 8px; color: var(--rail-ink); }
.rail li a:hover { background: rgba(255, 255, 255, .06); color: var(--rail-on); }
.rail li a.is-on { background: var(--rail-on-bg); color: var(--rail-on); font-weight: 600; box-shadow: inset 3px 0 0 var(--rail-mark); }
.rail li i { width: 18px; text-align: center; font-size: 15px; color: var(--rail-mark); }
.rail__n { margin-left: auto; min-width: 22px; box-sizing: border-box; padding: 1px 7px; border-radius: 999px; background: var(--rail-mark); color: var(--rail-bg); font-size: 12px; font-weight: 700; text-align: center; }
.rail__me { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 4px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); } /* signed-in user, under the Drone / Plane switch */
.rail__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rail-on-bg); color: var(--rail-on); font-size: 13px; font-weight: 700; }
.rail__who { min-width: 0; }
.rail__who b { display: block; color: var(--rail-on); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__who span { display: block; font-size: 12px; color: var(--rail-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__me > a { color: var(--rail-head); font-size: 16px; } .rail__me > a:hover { color: var(--rail-on); }
/* Restricted section (owner only, nav.php): the Tools link reads violet, like the Restricted marker on every tool page.
   Hover (or ArrowRight) opens the flyout (section 9n), click goes to tools/. */
.rail li a.rail__owner { background: var(--rail-owner-tint); color: var(--rail-owner); }
.rail li a.rail__owner i { color: var(--rail-owner); }
.rail li a.rail__owner:hover, .rail li a.rail__owner[aria-expanded="true"] { background: var(--rail-owner-bg); color: #FFFFFF; }
.rail li a.rail__owner.is-on { background: var(--rail-owner-bg); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--rail-owner); }
.rail li a.rail__owner .rail__n { background: var(--rail-owner); color: var(--rail-bg); }
.rail li a.rail__owner .rail__chev { width: auto; margin-left: auto; font-size: 11px; color: var(--rail-head); } .rail li a.rail__owner .rail__n + .rail__chev { margin-left: 8px; }
.rail li a.rail__owner:hover .rail__chev, .rail li a.rail__owner.is-on .rail__chev, .rail li a.rail__owner[aria-expanded="true"] .rail__chev { color: #FFFFFF; }

/* 5. Top bar + search (markup and handlers in site_data/nav.php) ------------ */
.top { position: sticky; top: var(--env-h); z-index: 900; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 32px; background: color-mix(in srgb, var(--work-bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top__search { position: relative; flex: 0 1 520px; margin: 0; }
.top__search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.top__search input { width: 100%; box-sizing: border-box; padding: 10px 40px; border: 1px solid var(--field-line); border-radius: var(--input-radius); background: var(--field-bg); font: 400 14px/1.4 var(--font); color: var(--ink); }
.top__search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.top__search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: none; box-shadow: none; font: 600 11px var(--font); color: var(--ink-muted); }
.top__search #searcher { position: absolute; z-index: 999; display: none; min-height: 34px; background: var(--pop-bg); top: calc(100% + 6px); left: 0; right: 0; width: auto; max-height: 70vh; overflow-y: auto; border-radius: var(--input-radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.top__search #searcherBar { position: sticky; bottom: 0; padding: 6px; text-align: center; background: var(--work-bg); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }
.top__theme { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); font-size: 18px; line-height: 1; cursor: pointer; } /* light / dark switch, right end of the bar: the moon in light, the sun in dark */
.top__theme:hover { background: rgba(128, 128, 128, .15); color: var(--ink); }
[data-theme="dark"] .top__theme .fa-moon, [data-theme="light"] .top__sun { display: none; }

/* 6. Page head ------------------------------------------------------------- */
.crumbs { margin: 0 0 6px; font-size: 13px; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); } .crumbs i { margin: 0 6px; font-size: 10px; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.head__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; font-size: 14px; color: var(--ink-muted); }
.head__meta b { font-weight: 600; color: var(--ink); }
.head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 7. Components ------------------------------------------------------------ */
.act { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--control-bg); color: var(--ink); font: 600 14px/1.3 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.act:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.act i { color: var(--accent); }
.act--primary, .act--primary:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .act--primary i { color: inherit; }
.act--danger, .act--danger:hover { color: var(--bad); } .act--danger i { color: inherit; } .act--danger:hover { border-color: var(--bad); }
.act--ghost { border-color: transparent; background: transparent; }
.act--sm { padding: 5px 10px; font-size: 13px; }
.act:disabled, .act.is-off { opacity: .45; pointer-events: none; }

.box { padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--box-bg); }
.box + .box { margin-top: 20px; } .cols > .box { margin-top: 0; } /* stacked boxes space out; grid columns do not */
.box--flush { padding: 0; overflow: hidden; }
.box__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.box--flush .box__head { padding: 16px 24px 0; }
.box__head h2 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.box__head h2 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.box__foot, .pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cols--even { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.cols > * > .box ~ .box { margin-top: 20px; } /* boxes stacked in a column; ~ because inline <script>s sit between them */
/* .cols--sticky: view pages whose side column is a short summary (referral Decision + Contact, policy Policy + Send to client) and
   whose main column holds everything that grows. On screens tall enough, the side follows the scroll; if it is still taller than
   the screen it scrolls inside itself. */
@media (min-height: 800px) {
  .cols--sticky > aside { position: sticky; top: calc(var(--env-h) + 80px); max-height: calc(100vh - var(--env-h) - 96px); overflow-y: auto; scrollbar-width: thin; }
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--box-bg); color: var(--ink); }
a.stat:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.stat__k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.stat__k i { color: var(--accent); }
.stat__v { margin-top: 6px; font-size: 28px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__v small { font-size: 18px; font-weight: 600; color: var(--ink-muted); }
.stat__d { margin-top: 6px; font-size: 13px; color: var(--ink-muted); }
/* .stat--todo: the dashboard's Referrals waiting / Expiring in 30 days while the count is above 0 (admin/index.php), warm card. */
.stat--todo { border-color: var(--warn-line); background: var(--warn-bg); } a.stat--todo:hover { border-color: var(--warn); } .stat--todo .stat__k i { color: var(--warn); }
.up { font-weight: 600; color: var(--ok); } .down { font-weight: 600; color: var(--bad); }

.tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--work-bg); font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink-muted); white-space: nowrap; }

.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--work-bg); }
.seg > a, .seg > button { padding: 4px 12px; border: 0; border-radius: 6px; background: none; font: 600 13px/1.4 var(--font); color: var(--ink-muted); white-space: nowrap; cursor: pointer; }
.seg > a:hover, .seg > button:hover { color: var(--ink); text-decoration: none; }
.seg > .is-on { background: var(--control-bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.list-table th, .list-table td { padding: 11px 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list-table th:first-child, .list-table td:first-child { padding-left: 24px; }
.list-table th:last-child, .list-table td:last-child { padding-right: 24px; }
.list-table th { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.list-table tbody tr:hover td { background: rgba(128, 128, 128, .06); }
.list-table tbody tr:last-child td { border-bottom: 0; }
.list-table td a:not(.act) { font-weight: 600; color: var(--accent-text); } /* not .act: a button in a cell keeps its own colours (this outranks .act--primary, whose text went accent on accent) */
.list-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.list-table .sub { display: block; font-size: 12px; color: var(--ink-muted); white-space: normal; } /* long insured names wrap under the ref instead of widening the table */
.list-table__empty { color: var(--ink-muted); }

.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-muted); }
.legend i { display: inline-block; width: 12px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }

/* List chrome. .filters is the form row above a list (search, selects, dates) inside a .box--flush;
   .pager is the list footer (count left, .pager__nav Back / Next .act--sm right, .is-off when there is no page).
   .table-wrap scrolls a wide .list-table sideways instead of letting .box--flush clip it. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.filters input[type="search"] { flex: 1 1 200px; max-width: 280px; }
.filters__to { font-size: 13px; color: var(--ink-muted); }
.brk-filters { padding-top: 0; } /* broker view: the box head margin alone spaces the search from the sub text */
.filters__end { margin-left: auto; }
.pager__nav { display: flex; gap: 8px; }
.table-wrap { overflow-x: auto; }

/* Status dot. Tones: --ok active / bound / accepted, --warn expiring / referred / pending,
   --bad cancelled / declined / lapsed unpaid, --neutral (default) expired / open quote / other. */
.st { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); white-space: nowrap; }
.st::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--st-tone)); box-shadow: 0 0 0 3px var(--tint, var(--st-tint)); }
.st--ok { --tone: var(--ok); --tint: var(--ok-tint); } .st--warn { --tone: var(--warn); --tint: var(--warn-tint); } .st--bad { --tone: var(--bad); --tint: var(--bad-tint); }

/* Facts panel: <dl class="kv"><dt>Label</dt><dd>Value<small>second line</small></dd></dl> */
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 14px; }
.kv dt { font-weight: 400; color: var(--ink-muted); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.kv dd small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.kv dd a:not(.act) { color: var(--accent-text); } /* not .act, as .list-table td a */
.box__sep { margin: 16px -24px 0; padding: 16px 24px 0; border-top: 1px solid var(--line); } /* ruled sub-section inside a .box */
/* Facts grid, for facts in a wide column (the .kv list is for the side column):
   <div class="facts"><div class="facts__g"><h3>Group</h3><dl><div><dt>Label</dt><dd>Value</dd></div>...</dl></div>...</div>.
   Label over value, as many columns as fit, groups ruled like .box__sep. Cells: .is-2 spans two columns, .is-wide the whole row;
   <dd class="is-empty">-</dd> for a blank value. */
.facts__g + .facts__g { margin: 16px -24px 0; padding: 16px 24px 0; border-top: 1px solid var(--line); }
.facts h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.facts dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 24px; margin: 0; }
.facts dt { font-size: 13px; color: var(--ink-muted); }
.facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.facts dd small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.facts dd.is-empty { font-weight: 400; color: var(--ink-muted); }
.facts .is-2 { grid-column: span 2; } .facts .is-wide { grid-column: 1 / -1; }
/* Drone referral: long free text clamps to 3 lines (quote_data.php clampText); claims as one card each. */
.clamp { margin: 0; font-weight: 400; white-space: pre-line; }
.clamp.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.clamp__more { margin-top: 4px; padding: 0; border: 0; background: none; font: 600 13px var(--font); color: var(--accent-text); cursor: pointer; }
.claims { display: grid; gap: 10px; margin-top: 4px; }
.claim { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--work-bg); }
.claim__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.claim__head .tag { font-weight: 600; } .claim__head span:not(.tag) { font-weight: 400; color: var(--ink-muted); }
.claim__head span.claim__amt { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.claim__meta { margin: 2px 0 6px; font-size: 13px; font-weight: 600; }
.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .actions-grid .act { justify-content: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; } .foot-links a { color: var(--ink-muted); }

/* Inline message: <div class="notice notice--warn"><i class="fal fa-exclamation-triangle"></i><div>Text</div></div>
   The border is even all round; the icon carries the tone and draws solid whatever its fal / fas class (FA Pro picks the style by weight). */
.notice { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--box-bg); font-size: 14px; color: var(--ink); }
.notice > i { flex: none; font-weight: 900; }
.notice--ok { border-color: var(--ok); background: var(--ok-tint); } .notice--ok > i { color: var(--ok); }
.notice--warn { border-color: var(--warn-line); background: var(--warn-bg); } .notice--warn > i { color: var(--warn); }
.notice--bad { border-color: var(--bad); background: var(--bad-tint); } .notice--bad > i { color: var(--bad); }
.notice--restricted { border-color: var(--restricted-line); background: var(--restricted-bg); } .notice--restricted > i { color: var(--restricted); } /* the fa-lock "Restricted feature" banner atop a restricted page */

/* Form layout. Controls themselves are styled bare in section 8 (rebuilt pages only).
   <div class="field"><label for="x">Label</label><input id="x"><p class="field__hint">...</p></div>;
   .fields is a grid of them; <label class="check"><input type="checkbox"> Text</label> for ticks. */
.field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.field + .field { margin-top: 14px; } .fields > .field { margin-top: 0; }
.field > label, .field__label { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.field > :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; }
.field__hint { margin: 0; font-size: 12px; color: var(--ink-muted); }
.field--error :is(input, select, textarea) { border-color: var(--bad); } .field--error .field__hint { color: var(--bad); }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
.check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; }

/* Modals: <dialog class="dlg"> opened by $(...).modal('show') (main.js falls back to showModal() when
   Bootstrap JS is absent). Children: .dlg__close (data-dismiss="modal"), .dlg__head h2, .dlg__body, .dlg__foot. */
dialog.dlg { width: min(560px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--box-bg); color: var(--ink); font: 400 15px/1.5 var(--font); box-shadow: 0 24px 64px rgba(0, 0, 0, .25); overscroll-behavior: contain; } /* contain: scrolling past either end does not scroll the page */
dialog.dlg--lg { width: min(860px, calc(100vw - 48px)); }
dialog.dlg::backdrop { background: rgba(10, 10, 10, .55); }
.dlg__head { display: flex; align-items: center; gap: 12px; padding: 16px 56px 16px 24px; border-bottom: 1px solid var(--line); }
.dlg__head h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; } .dlg__head h2 i { margin-right: 8px; color: var(--accent); }
.dlg__head h2 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.dlg__body { padding: 20px 24px; }
.dlg__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); }
.dlg__close { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); font-size: 18px; cursor: pointer; }
.dlg__close:hover { background: rgba(128, 128, 128, .15); color: var(--ink); }
/* Floating panel (.dlg--float, main.js dlgFloat): non-modal, no backdrop, above the rail and top bar; drag by the head, resize
   from the bottom-right corner. The head stays put and the body scrolls, without scrolling the page at either end. */
dialog.dlg--float { position: fixed; inset: 0; z-index: 1200; margin: auto; min-width: 320px; min-height: 160px; overflow: hidden; resize: both; }
dialog.dlg--float[open] { display: flex; flex-direction: column; }
dialog.dlg--float:focus { outline: none; }
.dlg--float .dlg__head { flex: none; cursor: move; user-select: none; touch-action: none; }
.dlg--float .dlg__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* 8. Pages (<body class="page-admin">) ---------- */
.page-admin, .page-admin *, .page-admin *::before, .page-admin *::after { box-sizing: border-box; }
body.page-admin { margin: 0; }
:where(.page-admin) a { color: var(--accent-text); text-decoration: none; } :where(.page-admin) a:hover { text-decoration: underline; } /* :where keeps this at element weight so every component's own link colour wins */
.page-admin h1, .page-admin h2, .page-admin h3, .page-admin p { margin-top: 0; }
.page-admin #pageLoader { position: fixed; inset: 0; z-index: 9999; display: none; background: rgba(10, 10, 10, .6); }
.page-admin #loader { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #FFFFFF; border-radius: 50%; animation: adm-spin .8s linear infinite; }
@keyframes adm-spin { to { transform: rotate(360deg); } }

/* Bare form controls and buttons at element weight (:where), so raw inputs in AJAX fragments get the admin
   look (matching .top__search input) and any class (.seg > button, .month-nav input ...) overrides it. */
:where(.page-admin) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="image"]), select, textarea) { max-width: 100%; margin: 0; padding: 8px 12px; border: 1px solid var(--field-line); border-radius: var(--input-radius); background: var(--field-bg); font: 400 14px/1.4 var(--font); color: var(--ink); }
:where(.page-admin) :where(input, select, textarea, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:where(.page-admin) :where(input, select, textarea):focus { border-color: var(--accent); }
:where(.page-admin) :where(input, select, textarea):is(:disabled, [readonly]) { background: var(--work-bg); color: var(--ink-muted); }
:where(.page-admin) ::placeholder { color: var(--ink-muted); opacity: .7; }
:where(.page-admin) textarea { width: 100%; min-height: 88px; resize: vertical; }
:where(.page-admin) :where(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; margin: 0; vertical-align: -3px; accent-color: var(--accent); }
:where(.page-admin) :where(button, input[type="submit"], input[type="button"], input[type="reset"]) { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--control-bg); font: 600 14px/1.3 var(--font); color: var(--ink); cursor: pointer; }
:where(.page-admin) :where(button, input[type="submit"], input[type="button"], input[type="reset"]):hover { border-color: var(--accent); }

/* Collapse: main.js toggles .show (upload widget; the "View" links in feed rows comm_send.php stored).
   Upload widget (site_data/upload/widget.php + file_feed.php): claim view files, comms modal attachments. */
.page-admin .collapse:not(.show) { display: none; }
.upl__attach { margin-top: 10px; }
.page-admin .uploadBox { margin-top: 10px; }
.page-admin .drop { position: relative; display: grid; place-items: center; min-height: 120px; border: 2px dashed var(--line); border-radius: 8px; background: var(--work-bg); text-align: center; font-size: 13px; color: var(--ink-muted); }
.page-admin .drop:hover, .page-admin .drop.is-over { border-color: var(--accent); } .page-admin .drop.is-over { background: color-mix(in srgb, var(--accent) 6%, var(--box-bg)); }
.page-admin .drop .cont i { font-size: 24px; color: var(--accent); }
.page-admin .drop .cont .tit { font-weight: 600; color: var(--ink); }
.page-admin .drop .cont .browse { font-weight: 600; color: var(--accent-text); }
.page-admin .drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.page-admin .drop .thumb { display: block; max-width: 160px; max-height: 48px; margin-bottom: 8px; } /* handleFileSelect() preview of a picked image */
.upl__progress { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--line); overflow: hidden; } .upl__bar { width: 0; height: 100%; background: var(--accent); }
.upl__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.upl__files .feed-file span { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upl__none { font-size: 14px; color: var(--ink-muted); }

/* Dashboard */
.perf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.perf__v { font-size: 26px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.legend__this { background: var(--accent); } .legend__last { background: var(--ink-muted); opacity: .6; } .legend__daily { height: 8px !important; background: var(--accent-soft); }
.month-nav { align-items: center; }
.month-nav input { width: 150px; padding: 2px 6px; border: 0; border-radius: 6px; background: var(--field-bg); font: 600 13px var(--font); color: var(--ink); }
.seg > .is-off { padding: 4px 12px; color: var(--ink-muted); opacity: .35; }

/* Top-bar search hits (site_data/search.php); [aria-selected=true] is the arrow-key choice */
.search-hit { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.search-hit:hover, .search-hit[aria-selected="true"] { background: var(--work-bg); color: var(--ink); text-decoration: none; }
.search-hit[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.search-hit__main { min-width: 0; }
.search-hit b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit__main > span { display: block; font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.search-hit__ref { font-size: 12px; color: var(--ink-muted); }
.search-hit .st { font-size: 12px; }
.search-hit--all { justify-content: center; font-size: 13px; font-weight: 600; color: var(--accent); }
.search-head, .search-empty { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.search-empty { font-weight: 400; } .search-empty b { color: var(--ink); }

/* 9. Page sections. Each page rebuild appends only inside its own block. --------------------------- */
/* 9a. Policies list (11.4) */
.pl-filters select { width: 190px; } /* company names are long; keep the filter row from stretching */
.pl-range { display: flex; align-items: center; gap: 10px; } /* the date range wraps as one unit */
#invoiceBody .list-table td:nth-child(2) { min-width: 200px; white-space: normal; } /* insured / broker wraps so the table fits 1366 */

/* 9b. Policy view (11.5) */
.pv-main, .pv-side { min-width: 0; }
.pv-side .kv { grid-template-columns: auto minmax(0, 1fr); } /* label column as wide as the longest label, not 130px */
.head h1 .tag { font-size: 12px; }
.tag.pv-tag--bad { border-color: var(--bad); background: var(--bad-tint); color: var(--bad); }
.tag.pv-tag--warn { border-color: var(--warn-line); background: var(--warn-tint); color: var(--warn); }
.tag.pv-tag--info { border-color: var(--accent-soft); background: var(--box-bg); color: var(--accent-text); }
.list-table .tag { margin-top: 4px; }
.pv-notice-btn { margin-left: 10px; }
.pv-trans td { vertical-align: top; }
.list-table .pv-docs { white-space: normal; font-size: 13px; line-height: 1.3; }
.pv-docs > * { margin: 2px 12px 4px 0; vertical-align: middle; }
.pv-docs > a { display: inline-block; } .pv-docs > a i, .pv-link i { margin-right: 4px; }
.pv-link { padding: 0; border: 0; background: none; font: 600 13px/1.3 var(--font); color: var(--accent-text); cursor: pointer; }
.pv-link:hover { text-decoration: underline; }
.pv-trans .sub { white-space: nowrap; }
.box:not(.is-all) .pv-older { display: none; }
.pv-icon { padding: 2px 5px; border: 0; border-radius: 6px; background: none; color: var(--ink-muted); font-size: 13px; line-height: 1; cursor: pointer; }
.pv-icon:hover { background: rgba(128, 128, 128, .12); color: var(--accent-text); }
/* Click-to-copy values (policy view): a hint in the .tip style above that reads Copied once clicked. */
.pv-copy { position: relative; border-radius: 4px; cursor: pointer; outline-offset: 2px; }
.pv-copy:hover, .pv-copy:focus-visible, .pv-copy.is-shown { color: var(--accent-text); }
.pv-copy::after { content: "Click to copy"; position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; padding: 6px 10px; border-radius: 6px; background: var(--tip-bg); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); font: 500 12px/1.4 var(--font); letter-spacing: normal; color: var(--tip-ink); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .12s, transform .12s, visibility .12s; }
.pv-copy:hover::after, .pv-copy:focus-visible::after, .pv-copy.is-shown::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .12s; }
.pv-copy.is-shown::after { transition-delay: 0s; }
.pv-copy.is-copied::after { content: "Copied"; } /* outlasts .is-shown by the fade, so a hint left behind fades out still reading Copied */
.pv-sub { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pv-p { margin: 0 0 10px; font-size: 13px; color: var(--ink-muted); }
.pv-p b { color: var(--ink); }
.pv-ok, .pv-ok b { color: var(--ok); } .pv-bad, .pv-bad b { color: var(--bad); }
.pv-h-icon { margin-right: 4px; color: var(--accent); }
.pv-restricted { border-color: var(--restricted-line); background: var(--restricted-bg); }
.pv-restricted .pv-h-icon { color: var(--restricted); }
.pv-restricted .box__head { flex-wrap: wrap; justify-content: flex-start; } .pv-restricted .box__head h2 { margin-right: auto; }
.pv-restricted .box__sep { border-top-color: var(--restricted-line); }
.pv-rw { display: grid; grid-template-columns: auto 130px; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.pv-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.pv-more[open] > summary { margin-bottom: 10px; }
.pv-more textarea { font: 12px/1.4 ui-monospace, Menlo, monospace; }
.pv-pre pre { margin: 0 0 12px; font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Calculation panel (site_data/calc_view.php): one ruled row per rater section, title left and workings right (stacked when
   the panel is narrow); operators in a gutter, "name value" pairs with the value in ink, results ruled and bold. */
.calc { container-type: inline-size; }
.calc__sec { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.calc__sec:first-child { padding-top: 0; border-top: 0; }
.calc__sec > div:only-child { grid-column: 1 / -1; max-width: 640px; } /* untitled: older raters, cancellations */
.calc__sec h3 { margin: 2px 0 0; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.calc__sec h4 { margin: 10px 0 2px; font-size: 13px; font-weight: 600; } .calc__sec div > h4:first-child { margin-top: 0; }
.calc__ln { display: flex; gap: 6px; font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.calc__op { flex: none; width: 1.1em; text-align: center; color: var(--ink-muted); }
.calc__x { min-width: 0; overflow-wrap: anywhere; }
.calc__v { font-weight: 600; color: var(--ink); white-space: nowrap; } .calc__v i { font-style: normal; font-weight: 400; color: var(--ink-muted); }
.calc__ln--res { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line); } .calc__ln--res .calc__v, .calc__ln--res .calc__op { font-weight: 700; color: var(--ink); }
.calc__note { margin: 1px 0; font-size: 13px; color: var(--ink-muted); }
.calc__kv { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.7; } .calc__kv span { color: var(--ink-muted); }
.calc__kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.calc hr { margin: 8px 0; border: 0; border-top: 1px dashed var(--line); }
.calc__gap { display: block; height: 10px; } .calc__gap + h4 { margin-top: 0; }
@container (max-width: 520px) { .calc__sec { grid-template-columns: minmax(0, 1fr); } }
.calc-manual { gap: 6px 0; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; }
.calc-manual dt:nth-last-of-type(1), .calc-manual dd:nth-last-of-type(1) { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.calc-none { margin: 0; color: var(--ink-muted); }
.pv-claim { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; }
.pv-claim h4 { margin: 0 0 10px; font-size: 14px; }
/* Policy card Claims row dialog (#pvClaims): every claim lodged on the policy, newest first (number links to the claim, status, date, cost, item - cause - location, narrative). */
.pv-claims { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.pv-claims li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.pv-claims__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-claims__head a { font-size: 14px; font-weight: 700; }
.pv-claims__meta { margin: 2px 0 0; color: var(--ink-muted); } .pv-claims__meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-claims .clamp { margin-top: 6px; }
.pv-claim + .pv-sub, p + .pv-sub { margin-top: 18px; }
dialog.dlg > .table-wrap .list-table td { white-space: normal; }

/* Feed timeline + composer (site_data/feed/feed.php, item.php). Global, not .page-admin.
   .feed-item--int is an internal note (<group_id>ints feed). */
.feed-filter__n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--line); font-size: 11px; line-height: 17px; text-align: center; color: var(--ink-muted); }
.feed-filter__n.is-set { background: var(--warn-tint); color: var(--warn); }
.feed-compose { margin: 0 0 8px; }
.feed-compose textarea { display: block; width: 100%; min-height: 72px; box-sizing: border-box; margin: 0; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--input-radius); background: var(--field-bg); font: 400 14px/1.45 var(--font); color: var(--ink); resize: vertical; }
.feed-compose.is-internal textarea { border-color: var(--warn-line); background: var(--warn-bg); }
.feed-compose__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .feed-compose__files:empty { display: none; }
.feed-compose__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.feed-compose__hint { margin-top: 6px; font-size: 12px; color: var(--ink-muted); }
.feed-compose.is-internal .feed-compose__hint { color: var(--warn); font-weight: 600; }
.feed-compose__end { display: flex; gap: 8px; margin-left: auto; }
.feed-progress { display: none; height: 2px; margin-top: 6px; background: var(--line); }
.feed-progress__bar { width: 0; height: 100%; background: var(--accent); }
.feed-file { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--control-bg); font-size: 13px; font-weight: 600; color: var(--accent-text); }
.feed-file:hover { border-color: var(--accent); text-decoration: none; }
.feed-file i { color: var(--accent); } .feed-file .delFil { color: var(--ink-muted); text-decoration: none; }
.feed-file .ft-pdf { color: #C62828; } .feed-file .ft-word { color: #2B579A; } .feed-file .ft-excel { color: #1E7145; } .feed-file .ft-ppt { color: #C43E1C; } .feed-file .ft-image { color: #7B3FA0; } .feed-file .ft-media { color: #A15C00; }
.feed-tl { position: relative; margin-top: 18px; padding-left: 28px; }
.feed-tl::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.feed-item { position: relative; margin: 0 0 14px; }
.feed-item::before { content: ""; position: absolute; left: -27px; top: 12px; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 50%; background: var(--box-bg); }
.feed-item--sys::before { top: 5px; background: var(--accent); }
.feed-item--int::before { border-color: var(--warn); }
.feed-item time { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.feed-item__sys { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 14px; }
.feed-item__sys .feed-item__text { margin: 0; }
.feed-item__card { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--box-bg); }
.feed-item--int .feed-item__card { border-color: var(--warn-line); background: var(--warn-bg); }
.feed-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.feed-item__head b { font-weight: 600; }
.feed-item__head time { margin-left: auto; }
.feed-item__head .tag { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.feed-item__head .tag.feed-item__int { border-color: var(--warn-line); background: var(--warn-tint); color: var(--warn); }
.feed-item__feed { font-size: 13px; color: var(--ink-muted); }
.feed-item__text { margin-top: 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.feed-item__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.feed-item__diffbtn { margin: 4px 0 0 8px; vertical-align: middle; }
/* View changes panel (feed/quote_difference.php): header line, Total headline, then Changes (before red, after green) and
   Premium (plain: it restates the changes' effect) as ruled groups of label / before / after rows. */
.qd-meta { margin: 0 0 14px; font-size: 13px; color: var(--ink-muted); } .qd-meta b { font-weight: 600; color: var(--ink); }
.qd-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--work-bg); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.qd-total > span:first-child { margin-right: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.qd-total del { text-decoration: none; } .qd-total b { font-size: 18px; color: var(--ink); } .qd-delta { font-weight: 600; }
.qd { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.qd col.qd__label { width: 30%; }
.qd th, .qd td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.qd th:first-child, .qd td:first-child { padding-left: 0; }
.qd tbody th { font-weight: 600; }
.qd-group th { padding-top: 20px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.qd tbody:first-of-type .qd-group th { padding-top: 0; }
.qd tbody td { font-variant-numeric: tabular-nums; }
.qd-old, .qd-new { padding: 1px 6px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.qd-old { background: var(--bad-tint); color: var(--bad); } .qd-new { background: var(--ok-tint); color: var(--ok); font-weight: 600; }
.qd-none { color: var(--ink-muted); }
.qd td small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-muted); }
.qd-item th { padding-bottom: 4px; border-bottom: 0; } .qd-item th span { font-weight: 400; color: var(--ink-muted); }
.qd-sub th { padding-left: 16px !important; font-weight: 400; color: var(--ink-muted); }
.tag.qd-tag--add, .tag.qd-tag--del { margin-left: 6px; font-size: 11px; vertical-align: 1px; }
.tag.qd-tag--add { border-color: var(--ok); background: var(--ok-tint); color: var(--ok); } .tag.qd-tag--del { border-color: var(--bad); background: var(--bad-tint); color: var(--bad); }
.qd-reasons { margin: 0; padding: 0; list-style: none; }
.qd-reasons li { position: relative; padding-left: 18px; } .qd-reasons li + li { margin-top: 4px; }
.qd-reasons li::before { position: absolute; left: 2px; font-weight: 700; }
.qd-add { color: var(--ok); } .qd-add::before { content: "+"; }
.qd-del { color: var(--bad); text-decoration: line-through; } .qd-del::before { content: "\2212"; }
.qd-kept { color: var(--ink-muted); } .qd-kept::before { content: "\2022"; }
.qd-empty { margin: 0; color: var(--ink-muted); }
.feed-menu { position: relative; }
.feed-menu > summary { padding: 0 6px; border-radius: 6px; list-style: none; color: var(--ink-muted); cursor: pointer; }
.feed-menu > summary::-webkit-details-marker { display: none; }
.feed-menu > summary:hover { background: rgba(128, 128, 128, .12); }
.feed-menu > button { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--pop-bg); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); font: 600 13px var(--font); color: var(--bad); cursor: pointer; }
.feed-more { display: flex; gap: 8px; margin: 0 0 14px; } /* Load More + Load all (post.php) */
.feed-end, .feed-loading { padding: 2px 0 12px; font-size: 13px; color: var(--ink-muted); }
.pv-activity > .foot-links { margin-top: 0; }

/* 9c. Quotes, referrals, expiring (11.6) */
/* List fragments (get_quotes / get_referrals) end with a pager row inside the tbody they are loaded into. */
.list-table tr.list-table__pager td { padding: 0; border-bottom: 0; white-space: normal; }
.list-table tbody tr.list-table__pager:hover td { background: none; }
/* Expiring: restricted Send notice column (restrictedUser only) reads as separate; renewal-notice HTML source. */
.list-table .send-notice-col { background: var(--restricted-bg); box-shadow: inset 2px 0 0 var(--restricted-line); }
.list-table tbody tr:hover td.send-notice-col { background: var(--restricted-tint); }
/* Referral view: Decision card (replaces the fixed bottom bar). Reasons are the quote's refer_reason <li> items. */
.reasons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.reasons li { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: 8px; background: var(--warn-bg); font-size: 14px; }
.reasons li::before { content: "\f071"; flex: none; font: 300 14px/1.5 "Font Awesome 5 Pro"; color: var(--warn); }
/* Special condition: the clause text sits under the label, one line while closed, in full (with its line breaks) open. */
.reasons__sc details { flex: 1; min-width: 0; }
.reasons__sc summary { position: relative; padding-right: 22px; list-style: none; cursor: pointer; } .reasons__sc summary::-webkit-details-marker { display: none; }
.reasons__sc summary::after { content: "\f107"; position: absolute; top: 0; right: 0; font: 300 16px/1.3 "Font Awesome 5 Pro"; color: var(--warn); }
.reasons__sc details[open] summary::after { content: "\f106"; }
.reasons__sc summary span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-muted); }
.reasons__sc details[open] summary span { margin-top: 4px; font-size: 13px; white-space: pre-line; color: inherit; }
.offer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--work-bg); font-size: 14px; }
.offer b { font-size: 20px; font-variant-numeric: tabular-nums; }
/* Plane: AIQ reasons as one labelled list (Client / aircraft rego), a plain premium row when there is no amount, a one-line hint. */
.decision__eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.uw-reasons { margin: 0 0 12px; padding: 4px 12px; border: 1px solid var(--warn-line); border-radius: 8px; background: var(--warn-bg); font-size: 14px; }
.uw-reasons div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.uw-reasons div + div { border-top: 1px solid var(--warn-line); }
.uw-reasons dt { font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--warn); overflow-wrap: anywhere; }
.uw-reasons dd { margin: 0; overflow-wrap: anywhere; } .uw-reasons dd:only-child { grid-column: 1 / -1; }
.offer--line { padding: 10px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.offer--line b { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.decision__hint { margin: 0; font-size: 13px; color: var(--ink-muted); } .decision__hint i { margin-right: 6px; }
.decision__acts { display: grid; gap: 8px; margin-top: 14px; }
.decision__acts > .act, .decision__acts .actions-grid .act { justify-content: center; padding: 10px 14px; }
.decision__acts .notice { margin: 0; }
.decision__done { margin: 0; }
.box--restricted { border-color: var(--restricted-line); background: var(--restricted-bg); } .box--restricted .box__head h2 i { color: var(--restricted); }
.box--restricted h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.box .field__hint + .act { margin-top: 12px; }
#decision + .box .kv { grid-template-columns: 120px minmax(0, 1fr); }
/* Decline dialog: previous reasons (decline_reasons.php) as pick cards. */
#decline_reason { width: 100%; } .decline__lead { margin: 14px 0 8px; font-size: 14px; }
#decline_list { max-height: 300px; overflow-y: auto; margin-bottom: 10px; }
.decline-picks, .cl-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.decline-pick, .cl-pick { display: grid; gap: 8px; align-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; line-height: 1.4; }
.decline-pick p, .cl-pick__text { max-height: 120px; overflow-y: auto; margin: 0; }
.decline-pick .act, .cl-pick .act { justify-self: start; }
/* Accept / Clauses dialog body (.acceptBody, referral view + policy view): recalculate.php (premium check), then
   clause_options.php (search, clause_list.php picks as .cl-pick cards, clause_feed.php current clauses as .cl-item). */
.rc-facts { display: grid; gap: 2px; margin: 0 0 16px; font-size: 14px; color: var(--ink-muted); } .rc-facts b { font-size: 16px; color: var(--ink); }
.rc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; } .rc-warn { font-weight: 600; color: var(--bad); }
.rc-override { margin-bottom: 16px; }
.rc-table { margin: 0 -24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-table .list-table td { padding-top: 6px; padding-bottom: 6px; } .rc-table input { width: 100%; padding: 5px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rc-acts, .cl-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .cl-acts .cl-back { margin-right: auto; }
.cl-search { width: 100%; } .cl-list { max-height: 500px; overflow-y: auto; margin: 12px 0; } .cl-text { margin-bottom: 12px; }
.cl-renew { text-align: right; }
.cl-item { position: relative; margin: 0 0 8px; padding: 10px 44px 10px 14px; border: 1px solid var(--warn-line); border-radius: 8px; background: var(--warn-bg); font-size: 14px; }
.cl-item p { margin: 4px 0 0; font-size: 12px; color: var(--ink-muted); }
/* Clause HTML (editor subset: p, br, strong, em, u, ul, ol, li) in the picks and the current clauses */
:is(.cl-pick__text, .cl-item .clause) :is(p, ul, ol) { margin: 0 0 4px; font-size: inherit; color: inherit; } :is(.cl-pick__text, .cl-item .clause) :is(ul, ol) { padding-left: 20px; }
:is(.cl-pick__text, .cl-item .clause) > :last-child { margin-bottom: 0; }
.cl-item__del { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); } .cl-item__del:hover { background: rgba(128, 128, 128, .15); color: var(--bad); }
#expiringTable :is(th, td) { padding-left: 12px; padding-right: 12px; } #expiringTable td:nth-child(2) { min-width: 200px; white-space: normal; } /* 8 columns fit 1366 */
.notice-src { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
pre.notice-src { max-height: 300px; overflow-y: auto; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--work-bg); white-space: pre-wrap; }
details.box__sep summary { font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
#reminderLogBody .box { padding: 16px 20px; } #reminderLogBody .box + .box { margin-top: 12px; } #reminderLogBody code { font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* 9d. Claims list + view (11.7) */
.cv-main { min-width: 0; }
.kv dd.cv-text { font-weight: 400; line-height: 1.55; }
.cv-bad { color: var(--bad); }
.cv-cost { display: flex; align-items: center; gap: 8px; }
.cv-cost__cur { font-weight: 600; color: var(--ink-muted); }
.cv-cost input { flex: 1 1 auto; min-width: 0; }
.cv-cost .act[hidden] { display: none; } /* shown on keyup, hidden again after a save */
.cv-dl a { margin-right: 12px; white-space: nowrap; }

/* 9e. Brokers list + view (11.7) */
/* CBS name lookup: main.js gtxSearch() inserts div.selectdown (gtx_search.php's .gtx-pick spans) after the input. */
.brk-gtx { position: relative; }
.selectdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px; max-height: 240px; overflow-y: auto; border-radius: 8px; background: var(--pop-bg); font-size: 14px; color: var(--ink-muted); }
.selectdown:has(span) { border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); padding: 4px 0; }
.gtx-pick { display: block; padding: 6px 12px; color: var(--ink); cursor: pointer; } .gtx-pick:hover { background: var(--work-bg); }
.selectdown__load { display: block; padding: 6px 12px; }
.dlg__foot .brk-response { align-self: center; margin-right: auto; font-size: 14px; } .brk-err { font-weight: 600; color: var(--bad); }
.dlg__foot .check { align-self: center; }
/* Staff rows: icon actions right-aligned; delete is a <details> confirm (.feed-menu). */
.list-table .brk-acts { width: 1%; text-align: right; }
.brk-acts > * { vertical-align: middle; } .brk-acts .act i { margin: 0; }
.brk-del { display: inline-block; } .brk-del > summary { padding: 5px 10px; font-size: 13px; line-height: 1.3; }

/* 9f. Reports + settings (11.7) */
.rp-filters { margin-bottom: 24px; } .rp-filters select { width: 170px; } .rp-filters #company { width: 240px; } .rp-filters #broker { width: 180px; }
.rp-range { display: flex; align-items: center; gap: 10px; }
.rp-stat { display: block; width: 100%; text-align: left; font: 400 15px/1.5 var(--font); cursor: pointer; } .rp-stat .stat__v { display: block; } /* stat cards are buttons: each redraws the chart */
.rp-stat:hover { border-color: var(--accent); } .rp-stat.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rp-chart { position: relative; height: 300px; }
.rp-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .rp-results .notice { margin-bottom: 20px; }
.list-table .ar-split { border-left: 1px solid var(--line); } .list-table th.ar-group { text-align: center; } /* Aerial Application report: the Selected / Not selected halves of the by-year table */
.set-grid { grid-template-columns: repeat(2, minmax(0, 520px)); }
.set-grid .act { margin-top: 18px; }
.set-msg { margin-left: 10px; font-size: 14px; font-weight: 600; } .set-msg .is-ok { color: var(--ok); } .set-msg .is-bad { color: var(--bad); }

/* 9h. Login + reset (11.7) */
/* Sign-in / forgot / reset gates (site_data/login_form.php, reset_form.php): no rail, one centred card. p rules carry .gate to beat .page-admin p. */
.gate { display: grid; place-items: center; min-height: 100vh; padding: calc(var(--env-h) + 24px) 24px 24px; }
.box.gate__card { width: 400px; max-width: 100%; padding: 32px 36px; box-shadow: 0 12px 32px rgba(0, 0, 0, .06); }
.gate__logo { display: block; width: 200px; height: auto; margin: 0 auto 24px; }
.gate__panel h1 { margin-bottom: 18px; font-size: 22px; line-height: 1.3; font-weight: 700; text-align: center; }
.gate .gate__lead { margin: -8px 0 18px; font-size: 14px; color: var(--ink-muted); text-align: center; }
.gate__panel .act { justify-content: center; width: 100%; margin-top: 18px; padding: 10px 14px; }
.gate .gate__msg { margin: 12px 0 0; font-size: 13px; font-weight: 600; } .gate__msg:empty { display: none; } .gate__msg--bad { color: var(--bad); }
.gate .gate__alt { margin: 16px 0 0; font-size: 13px; text-align: center; }
.gate input.error { border-color: var(--bad); background: var(--bad-tint); } /* validate.js addError() */

/* 9i. Accounting: invoicing / refunds (processing), received cash (task_securepay, task_iq) (11.8) */
/* Invoicing / refunds list (get_processing.php): insured wraps, CBS + refund controls stack in the last cell. */
.box--flush.acct-box { overflow: visible; } /* no .table-wrap: the Aged days <details> menu must not be clipped (fits 1366) */
.acct-list td.acct-who { min-width: 240px; white-space: normal; } .acct-who .tag { margin-left: 4px; }
.acct-list td { vertical-align: top; }
.acct-aged { display: flex; align-items: center; gap: 6px; min-height: 22px; margin-top: 4px; font-size: 13px; color: var(--ink-muted); } /* day count, then the method pill (SecurePay month / funded) or the chase menu: one line, pill and count centred on each other, the same height and left edge on every row */
.acct-aged .tag { margin: 0; } .acct-aged .tag:empty { display: none; } /* overrides .list-table .tag margin-top */
.acct-row { display: flex; align-items: center; gap: 6px; } .acct-row + .acct-row { margin-top: 6px; }
.acct-row input:not([type="checkbox"]) { width: 150px; padding: 5px 10px; font-size: 13px; }
.acct-row .act i { margin: 0; }
.acct-menu { position: relative; display: inline-block; }
.acct-menu > summary { margin-left: -6px; padding: 0 6px; border-radius: 6px; list-style: none; font-weight: 600; color: var(--accent-text); cursor: pointer; } .acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary:hover { background: rgba(128, 128, 128, .12); }
.acct-menu > div { position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 140px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--pop-bg); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.acct-menu > div button { padding: 6px 10px; border: 0; background: none; font-weight: 600; text-align: left; } .acct-menu > div button:hover { background: var(--work-bg); }
/* Invoice dialog (invoice_data.php): Details / Summary .seg in the head, money as label / right-aligned amount rows. */
#invoiceModal .dlg__head .seg { margin-left: auto; }
.acct-csv { margin: 0 0 12px; text-align: right; font-size: 13px; font-weight: 600; }
.acct-inv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } /* facts left, money right */
.acct-sum { padding-left: 32px; border-left: 1px solid var(--line); }
.acct-sum > dl + dl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.kv.acct-money { grid-template-columns: minmax(0, 1fr) auto; } .acct-money dd { text-align: right; font-variant-numeric: tabular-nums; }
.kv .acct-neg { color: var(--bad); }
.acct-total dt { font-weight: 700; color: var(--ink); } .acct-total dd { font-size: 17px; }
/* Received cash: the day iframe (day.php, its own document) sits in #invoiceBody. */
#invoiceBody > iframe { display: block; border: 0; }
body.acct-day { background: var(--box-bg); } .acct-day #embeder { padding: 4px 0; }
.acct-day__total { margin: 0 24px 8px; font-size: 14px; color: var(--ink-muted); } .acct-day__total b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 9j. Adjustments, undo, direct to broker (11.8) */
.adj-search { width: 100%; }
/* Search hits (site_data/adjustment_search.php, shared by adjustments + undo) */
.adj-hits { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.adj-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.adj-hit:last-child { border-bottom: 0; } .adj-hit:hover { background: var(--work-bg); text-decoration: none; }
.adj-hit b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adj-hit__ref { font-size: 13px; color: var(--ink-muted); } .adj-hit .st { font-size: 13px; }
.adj-hits__none { margin: 0; padding: 10px 14px; font-size: 14px; color: var(--ink-muted); }
/* Adjust form: derived table bleeds to the box edges; JS row states needs-pin / pinned; undo's row to delete */
.adj-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.adj-bleed { margin: 0 -24px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.adj-bleed:last-child { margin-bottom: -20px; border-bottom: 0; }
.adj-pin { margin-right: 12px; } .adj-pinval { width: 120px; }
.adj-hint { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--bad); } .adj-hint:empty { display: none; }
.list-table tr.adj-row-needs-pin td, .list-table tr.adj-row-target td { background: var(--bad-tint); }
.list-table tr.adj-row-pinned td { background: var(--warn-tint); }
.adj-checks { display: grid; gap: 10px; margin-bottom: 16px; } .adj-checks .field__hint { margin: 4px 0 0 24px; }
.adj-go { margin-top: 16px; }
.list-table.adj-history td { white-space: normal; vertical-align: top; }
.adj-chain :is(th, td) { padding-left: 12px; padding-right: 12px; } /* undo chain: 10 columns fit 1366 */
.adj-plan { margin: 0 0 16px; padding-left: 20px; font-size: 14px; } .adj-plan:empty { display: none; } .adj-plan li + li { margin-top: 4px; }
/* Direct to broker */
.adj-inline { display: flex; gap: 8px; } .adj-inline input { flex: 0 1 320px; }
.adj-results:not(:empty) { margin-top: 12px; }
.tp-kv { grid-template-columns: 130px minmax(0, 1fr) 130px minmax(0, 1fr); }
.box .tp-sessions { margin: 14px 0 0; font-size: 14px; }
.notice > div > ul { margin: 6px 0 0; padding-left: 20px; }

/* 9k. Policy doctor, anomalies, AIQ calls (11.8) */
.tag.dx-lock { border-color: var(--restricted-line); background: var(--restricted-tint); color: var(--restricted); } /* "Restricted" marker in the h1 of every restricted page */
.page-admin .dx-lead { max-width: 860px; margin: -8px 0 20px; font-size: 14px; color: var(--ink-muted); }
.adm-pw { display: flex; gap: 8px; } .adm-pw input { flex: 1; min-width: 0; font-family: monospace; } #addAdmin .fields + .field { margin-top: 14px; } /* Admin accounts: temporary password + Generate */
.page-admin .dx-sum { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 16px; }
.dx-mono { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.page-admin .dx-what { margin: 0 0 12px; font-size: 13px; color: var(--ink-muted); }
.page-admin .dx-clear { margin: 0; font-size: 14px; color: var(--ok); }
/* One invariant per <details>: summary = status dot + title, body = explanation + offending rows. */
.dx-check:not(:first-child) { border-top: 1px solid var(--line); }
.dx-check > summary { display: flex; align-items: center; gap: 12px; padding: 12px 24px; list-style: none; cursor: pointer; font-size: 14px; }
.dx-check > summary::-webkit-details-marker { display: none; }
.dx-check > summary::after { content: "\f107"; margin-left: auto; font: 300 16px/1 "Font Awesome 5 Pro"; color: var(--ink-muted); }
.dx-check[open] > summary::after { content: "\f106"; }
.dx-check > summary:hover { background: rgba(128, 128, 128, .05); }
.dx-check > summary > .st { flex: none; min-width: 64px; }
.dx-check > summary > b { font-weight: 600; }
.dx-check__body { padding: 0 24px 16px 100px; }
.dx-rows { border: 1px solid var(--line); border-radius: 8px; }
.dx-rows .list-table, .box--flush .list-table.dx-t { font-size: 13px; }
.dx-rows .list-table :is(th, td) { padding: 7px 12px; }
.list-table.dx-t :is(th, td) { padding: 8px 10px; vertical-align: top; }
.list-table .dx-wrap { min-width: 180px; white-space: normal; overflow-wrap: anywhere; }
.list-table .dx-muted { color: var(--ink-muted); }
.page-admin .dx-inset { margin: 0 24px 16px; } /* a line of text or notice inside a .box--flush */
.dx-find .dx-inset { margin-top: 14px; }
.dx-find .filters:last-child { border-bottom: 0; }
.filters .dx-q { flex: 0 1 420px; }
.page-admin .dx-gap { margin-top: 16px; }
.dx-policy + .box { margin-top: 16px; }
/* Doctor: the diagnosed policy's heading between the search box and the report boxes. */
.dx-policy { margin: 28px 0 0; }
.dx-policy h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; }
.dx-policy h2 span { font-weight: 400; color: var(--ink-muted); }
.dx-policy .head__meta { align-items: center; margin-top: 4px; }
.notice.dx-due { border-color: var(--accent-soft); } .notice.dx-due > i { color: var(--accent); } /* reminder due on the next cron run */
.list-table tr.dx-term td { padding-top: 10px; padding-bottom: 6px; background: var(--work-bg); font-size: 12px; font-weight: 700; color: var(--ink); }
.list-table tbody tr.dx-live td { background: var(--ok-tint); }
.list-table .dx-short { background: var(--warn-tint); color: var(--warn); font-weight: 600; } /* expire earlier than term end */
.tag.dx-live-tag { margin: 0 0 0 8px; border-color: var(--ok); background: var(--box-bg); color: var(--ok); }
.page-admin .dx-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-sep { border-top: 1px solid var(--line); }
.dx-sep + .dx-sep { border-top-width: 4px; border-top-color: var(--work-bg); }
/* AIQ calls: filter row, error rows, request / response blobs side by side. */
.dx-filters input[type="text"] { flex: 1 1 220px; max-width: 280px; }
.dx-filters select { max-width: 200px; } /* endpoint facets are full URLs */
.dx-range { display: flex; align-items: center; gap: 10px; }
.list-table tbody tr.dx-err td { background: var(--bad-tint); }
.list-table.dx-ids td.dx-mono { min-width: 150px; white-space: normal; } /* three uuids per row */
.list-table .dx-wrap.dx-narrow { min-width: 120px; }
.page-admin .dx-errs { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.dx-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.dx-pair > .box { margin-top: 0; }
pre.dx-blob { max-height: 620px; overflow: auto; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--work-bg); font-size: 11px; white-space: pre-wrap; }
.filters + pre.dx-blob { border-top: 0; } /* Logs: the filter row already rules it off */

/* 9l. Wordings, proposal catalogue, links, AIQ maintenance, how to (11.8) */
.own-narrow > * { max-width: 1040px; } /* single-column owner tools: keep line length readable at 1920 */
.own-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.own-inline { display: inline; margin: 0; }
.own-empty { margin: 0; padding: 0 24px 18px; font-size: 14px; color: var(--ink-muted); }
.own-errs { margin: 4px 0 0; padding-left: 18px; } .notice > .own-errs { margin-top: 0; }
.list-table td.own-wrap { min-width: 200px; white-space: normal; }
.list-table tbody tr.own-active td { background: var(--ok-tint); } .own-active .st { margin-left: 10px; }
.own-prose p, .own-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.own-prose p:last-child { margin-bottom: 0; }
.own-narrow :is(.own-prose, .notice, .kv) code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.kv small.own-mono { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.own-mw-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
/* Wordings */
.wr-table { font-size: 13px; } .wr-table :is(th, td) { padding-left: 10px; padding-right: 10px; } /* 9 drone columns fit 1366 */
.wr-table td.wr-file { white-space: normal; } .wr-table td.wr-file > :is(a, span:first-child) { white-space: nowrap; } /* combined name breaks at its <wbr> */
.wr-table td.wr-label { min-width: 150px; white-space: normal; }
.wr-table td.wr-created { width: 104px; white-space: normal; }
.wr-missing { display: block; font-size: 12px; font-weight: 600; color: var(--bad); }
.wr-modes { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.wr-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wr-fields .wr-field--wide { grid-column: span 2; }
.wr-fields input[type="file"] { font-size: 13px; }
.wr-hint { margin-top: 10px; }
/* How to: long-form process notes */
.own-h1-icon { color: var(--accent); }
.howto { max-width: 900px; font-size: 14px; line-height: 1.55; }
.howto h2 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; } .howto h2:first-of-type { margin-top: 18px; }
.howto ol, .howto ul { margin: 0 0 12px; padding-left: 22px; } .howto li { margin-bottom: 8px; } .howto li > ol, .howto li > ul { margin-top: 8px; }
.howto .note { font-size: 13px; color: var(--ink-muted); }
.howto .own-lead { margin: 0; }
.howto li.own-review { padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: 8px; background: var(--warn-bg); }
.howto .notice { display: block; margin: 16px 0; } .howto .notice p.note { margin: 6px 0 0; }

/* 9m. Articles (11.8) */
.art-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .art-form > .field { margin-top: 0; }
.art-w2 { grid-column: span 2; } .art-w3 { grid-column: span 3; } .art-w4 { grid-column: 1 / -1; }
.art-check { min-height: 38px; } /* lines the tick up with the inputs beside it */
.art-hero img { display: block; max-width: 240px; max-height: 135px; margin: 4px 0 4px; object-fit: cover; border-radius: 6px; }
.art-edit .tox-tinymce { border-color: var(--line); border-radius: var(--input-radius); } /* HugeRTE frame (its own oxide skin) */
.art-acts { display: flex; align-items: center; gap: 8px; margin-top: 20px; } .art-open { margin-left: auto; } .art-open small { font-weight: 400; color: var(--ink-muted); }
.art-list td.art-title { min-width: 220px; white-space: normal; }
.art-slug { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-muted); }
.art-list .st + .sub { margin-left: 19px; white-space: nowrap; } /* published date under the dot label */
.art-empty { margin: 0; padding: 0 24px 16px; }

/* Hover text for every [title] (nav.php script): the site's tooltip, shown after 120ms above the element (below it at the top edge). */
.tip { display: none; position: fixed; inset: auto; z-index: 1000; margin: 0; max-width: 280px; padding: 6px 10px; border: 0; border-radius: 6px; background: var(--tip-bg); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); font: 500 12px/1.4 var(--font); color: var(--tip-ink); white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; }
.tip.is-on { display: block; }

/* Search page (search/) */
.srch-list td:nth-child(2) { min-width: 240px; white-space: normal; } /* long insured names wrap so the table fits 1366 */
.srch-list td:nth-child(3) .sub { white-space: nowrap; }

/* 9n. Tools: the owner-only rail flyout (nav.php #toolsFly, opened from the Restricted section's Tools link) and the
   Tools hub (tools/). The flyout sits beside the rail in the rail's own palette; the hub is cards in the work area. */
.fly { position: fixed; top: var(--env-h); bottom: 0; left: var(--rail-w); z-index: 999; width: 620px; box-sizing: border-box; overflow-y: auto; padding: 20px 28px 24px; background: color-mix(in srgb, var(--rail-bg) 86%, #FFFFFF); color: var(--rail-ink); border-left: 1px solid rgba(255, 255, 255, .08); box-shadow: 12px 0 32px rgba(0, 0, 0, .3); font-size: 14px; line-height: 1.4; }
.fly[hidden] { display: none; }
.fly a, .fly a:hover { text-decoration: none; }
.fly__head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.fly__head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--rail-on); }
.fly__head small { font-size: 13px; color: var(--rail-head); }
.fly__head input { margin-left: auto; width: 220px; box-sizing: border-box; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--rail-on); font: 400 13px/1.4 var(--font); }
.fly__head input::placeholder { color: var(--rail-head); }
.fly__head input:focus { outline: 2px solid var(--rail-mark); outline-offset: 1px; }
.fly__head kbd { padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 4px; background: none; box-shadow: none; font: 600 11px var(--font); color: var(--rail-head); }
.fly__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.fly__g[hidden] { display: none; }
.fly .rail__group { margin: 8px 10px 4px; } .fly .fly__g + .fly__g .rail__group { margin-top: 16px; }
.fly ul { margin: 0; padding: 0; list-style: none; }
.fly li[hidden] { display: none; }
.fly li a { display: flex; align-items: center; gap: 12px; padding: 5px 10px; border-radius: 8px; color: var(--rail-ink); }
.fly li a:hover, .fly li a:focus-visible { background: rgba(255, 255, 255, .06); color: var(--rail-on); }
.fly li i { flex: none; width: 18px; text-align: center; font-size: 15px; color: var(--rail-mark); }
.fly li a > span:first-of-type { min-width: 0; }
.fly li a small { display: block; font-size: 12px; color: var(--rail-head); }
.fly li .rail__n { margin-left: auto; }

.tools-q { width: 260px; }
.tools-sec { margin-bottom: 28px; } .tools-sec[hidden] { display: none; }
.tools-sec h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.tools-sec h2 small { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tool { display: flex; align-items: flex-start; gap: 12px; min-height: 84px; padding: 14px 14px 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--box-bg); color: var(--ink); }
.tool[hidden] { display: none; }
.tool:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.tool__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--work-bg); color: var(--accent); font-size: 17px; }
.tool__t { min-width: 0; flex: 1; }
.tool__t b { display: block; font-weight: 600; }
.tool__d { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.tool .st { margin-top: 7px; font-size: 12px; white-space: nowrap; }
.tools-none { display: none; margin: 0; color: var(--ink-muted); } .tools-none.is-on { display: block; }