/*
 * orig.css — the five Apps Script apps' own look, on the risk-management service (v0.58.0, Flagler edition).
 *
 * Loaded LAST. Everything here is under `.rmx`, the class the shell puts on <body> while one of the five apps' pages is open
 * (appchrome.js), so the Apps home, Settings and the Signature pad keep the look they have. The values are the originals': CSS_Core.html
 * (the topbar, the form card, buttons, controls, the toast), CSS_Form.html, Footer_CSS.html, and each app's Dashboard.html / Index.html.
 * The one thing that is NOT copied is the district's blue: --brand-blue is the Appearance colour (--primary), --brand-accent the accent,
 * and the -700 / -50 shades are mixed from it. NO TENANT COLOUR OR NAME IS WRITTEN HERE. [I20]
 * Where an original colour could not be read (a 2.4:1 grey on the page), the next grey up is used and the file says so.
 * Sizes are rem on screen (px / 16) and pt in print (FONT_UNIT).
 */

/* ---------------------------------------------------------------- tokens and the page */
.rmx {
  --brand-blue: var(--primary);
  --brand-blue-700: color-mix(in srgb, var(--primary) 78%, #000);
  --brand-blue-50: color-mix(in srgb, var(--primary) 9%, #fff);
  --brand-accent: var(--accent);
  --grey-900: #101828;
  --grey-800: #1d2939;
  --grey-700: #344054;
  --grey-600: #475467;
  --grey-500: #667085;
  --grey-400: #98a2b3;
  --grey-300: #d0d5dd;
  --grey-200: #e4e7ec;
  --grey-100: #f2f4f7;
  --grey-50: #f9fafb;
  --success: #027a48;
  --success-bg: #ecfdf3;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --warning: #b54708;
  --warning-bg: #fffaeb;
  --bg-page: #f5f7fa;
  --bg-surface: #ffffff;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.08);
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.rmx {
  font-family: var(--font-family);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--grey-900);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
/* The shell's blue bar and tabs give way to the app's own header (appchrome.js). */
.rmx .rm-topbar, .rmx .rm-nav { display: none; }
.rmx .rm-view { max-width: 1100px; margin: 0 auto; padding: 0 20px 96px; }
.rmx.rmx-wide .rm-view { max-width: 1200px; }
.rmx.rmx-form .rm-view { max-width: none; padding: 0; }
/* The brand bar sits in the same column as the page under it (.dash-wrap: 1100px, the dashboard 1200px). */
.rmx:not(.rmx-form) .rmx-top { max-width: 1100px; margin: 0 auto; padding: 24px 20px 0; }
.rmx.rmx-wide:not(.rmx-form) .rmx-top { max-width: 1200px; }
.rmx :where(a) { color: var(--brand-blue); text-decoration: none; }
.rmx :where(a:hover) { text-decoration: underline; }
.rmx a:focus-visible, .rmx button:focus-visible, .rmx select:focus-visible, .rmx input:focus-visible, .rmx textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-blue) 40%, transparent); outline-offset: 2px; }

/* ---------------------------------------------------------------- the white bar of the form page (.topbar) */
.rmx-topbar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; height: 56px; padding: 0 24px; background: var(--bg-surface); border-bottom: 1px solid var(--grey-200); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 30; }
.rmx-nav { display: flex; align-items: center; gap: 4px; justify-self: start; }
.rmx .nav-link { display: inline-block; padding: 7px 12px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; color: var(--grey-600); text-decoration: none; transition: background-color 0.1s; }
.rmx .nav-link:hover { background: var(--grey-100); text-decoration: none; color: var(--grey-900); }
.rmx .nav-link.active { background: var(--brand-blue-50); color: var(--brand-blue); }
.rmx-topbar-user { justify-self: end; text-align: right; font-size: 0.75rem; color: var(--grey-600); max-width: 100%; min-width: 0; }

/* the email, a small menu */
.rmx-menu { position: relative; display: inline-block; max-width: 100%; }
.rmx .rmx-user { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 6px; background: transparent; border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 0.75rem; color: var(--grey-600); cursor: pointer; }
.rmx .rmx-user:hover { background: var(--grey-100); color: var(--grey-900); }
.rmx-user__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmx-user__caret { font-size: 0.625rem; flex: 0 0 auto; }
.rmx-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 11rem; padding: 4px; background: var(--bg-surface); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: left; }
.rmx .rmx-menu__item { display: block; width: 100%; padding: 8px 12px; background: transparent; border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 0.8125rem; color: var(--grey-700); text-align: left; cursor: pointer; }
.rmx .rmx-menu__item:hover, .rmx .rmx-menu__item:focus-visible { background: var(--brand-blue-50); color: var(--brand-blue); }

/* ---------------------------------------------------------------- the brand bar (.dash-brandbar) */
.dash-brandbar { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; border-bottom: 2px solid var(--grey-200); margin-bottom: 16px; }
.dash-brand-logo { height: 40px; width: auto; }
.dash-brand-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; line-height: 1.3; }
.dash-brand-title { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.5; color: var(--grey-900); }
.dash-brand-links { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 0.8125rem; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.dash-brand-links a { text-decoration: none; }
.dash-brand-links a[aria-current="page"] { font-weight: 600; }
.dash-brand-links .rmx-user { font-size: 0.71875rem; max-width: 240px; }

/* ---------------------------------------------------------------- the footer (Footer_CSS.html) */
.rmx #view-app > .foot { display: block; max-width: none; margin: 0; padding: 0; }
.rmx .foot > a, .rmx .foot > .foot-build, .rmx .foot > .foot-sops { display: none; }
.page-footer { margin-top: 48px; padding: 20px 24px 32px; text-align: center; color: var(--grey-500); font-size: 0.75rem; border-top: 1px solid var(--grey-200); }
.page-footer .footer-meta { margin-bottom: 6px; }
.page-footer .footer-meta .foot-sops { display: inline; position: relative; }
.page-footer .footer-meta .foot-sops:not([hidden])::before { content: " \00a0•\00a0 "; white-space: pre; }
.page-footer .footer-meta .foot-sops[hidden] { display: none; }
.page-footer .footer-meta a, .page-footer .footer-meta .rm-sopmenu__btn { color: var(--brand-blue); font-weight: 500; font-size: inherit; padding: 0; min-height: 0; }
.page-footer .footer-admin-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; font-size: 0.75rem; }
.page-footer .footer-admin-links a { color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.page-footer .footer-admin-links a:hover { text-decoration: underline; }
.page-footer .footer-admin-links .sep { color: var(--grey-300); }
.rmx-ic { width: 11px; height: 11px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .page-footer .footer-admin-links { gap: 4px 8px; font-size: 0.6875rem; } }
.rmx .rm-sopmenu__list { z-index: 40; }

/* ---------------------------------------------------------------- buttons (CSS_Core: button / .ghost / .danger) */
.rmx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--brand-blue); color: #fff; border: 1px solid var(--brand-blue); border-radius: var(--radius-sm); padding: 8px 16px; font: inherit; font-size: 0.8125rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.1s, border-color 0.1s; filter: none; }
.rmx .btn:hover:not(:disabled) { background: var(--brand-blue-700); border-color: var(--brand-blue-700); color: #fff; text-decoration: none; filter: none; }
.rmx .btn:disabled, .rmx .btn[disabled] { background: var(--grey-300); border-color: var(--grey-300); color: var(--grey-500); cursor: not-allowed; opacity: 1; }
.rmx .btn--quiet { background: var(--bg-surface); color: var(--grey-700); border-color: var(--grey-300); }
.rmx .btn--quiet:hover:not(:disabled) { background: var(--grey-50); border-color: var(--grey-400); color: var(--grey-900); }
.rmx .btn--stop { background: var(--danger); border-color: var(--danger); color: #fff; }
.rmx .btn--stop:hover:not(:disabled) { background: #912019; border-color: #912019; color: #fff; }

/* ---------------------------------------------------------------- the toast (.toast) */
.rmx .acc-toast { left: auto; right: 20px; bottom: 20px; transform: translateY(8px); max-width: 480px; padding: 10px 16px; border-radius: var(--radius-md); background: var(--success); color: #fff; font-size: 0.8125rem; font-weight: 500; box-shadow: var(--shadow-md); transition: opacity 0.18s, transform 0.18s; }
.rmx .acc-toast--show { transform: translateY(0); }
.rmx .acc-toast--error { background: var(--danger); }
@media (max-width: 480px) { .rmx .acc-toast { left: 12px; right: 12px; max-width: none; } }

/* ---------------------------------------------------------------- base controls (CSS_Core: FORM CONTROLS) */
.rmx :where(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="time"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], select, textarea) {
  width: 100%; border: 1px solid var(--grey-300); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 0.875rem; font-family: inherit; color: var(--grey-900); background: var(--bg-surface); transition: border-color 0.1s, box-shadow 0.1s;
}
.rmx :where(input, select, textarea):focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-50); }
.rmx :where(input[readonly], input:disabled, select:disabled, textarea:disabled) { background: var(--grey-50); color: var(--grey-600); cursor: not-allowed; }
/* the buttons the form engine draws (its mini buttons, link buttons, Remove) have CSS_Core's `button` as their base */
.rmx :where(.accf button, .form-card .stf-sec button, .form-card .etf-sec button, .form-card .drf-sec button, .form-card .fl-sec button) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--brand-blue); color: #fff; border: 1px solid var(--brand-blue); border-radius: var(--radius-sm); padding: 8px 16px; font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; }
.rmx :where(.accf button:disabled) { background: var(--grey-300); border-color: var(--grey-300); color: var(--grey-500); cursor: not-allowed; }

/* ---------------------------------------------------------------- the form card (CSS_Core: FORM CARD PARADIGM; Index.html) */
.form-card-wrap { max-width: 920px; margin: 24px auto; padding: 0 16px 24px; }
.form-card { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); overflow: hidden; border-top: 4px solid var(--brand-blue); }
.form-card .card-head { padding: 32px 32px 20px; text-align: center; }
.form-card .card-head .logo-img { max-height: 64px; width: auto; max-width: 100%; display: block; margin: 0 auto 16px; }
.form-card .card-head h1 { font-size: 1.625rem; font-weight: 700; color: var(--brand-blue); letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.3; }
.form-card .card-head .tagline { color: var(--grey-500); font-size: 0.875rem; margin: 0; }
.form-card .rm-proc { margin: 0; padding: 10px 32px; justify-content: center; font-size: 0.8125rem; border-top: 1px solid var(--grey-200); background: var(--bg-surface); }
.form-card .submitting-as { display: flex; align-items: center; gap: 10px; padding: 12px 32px; background: var(--grey-50); border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); font-size: 0.8125rem; color: var(--grey-600); }
.form-card .submitting-as .icon { color: var(--grey-400); font-size: 0.875rem; }
.form-card .submitting-as strong { color: var(--brand-blue); font-weight: 600; overflow-wrap: anywhere; }
.form-card .card-body { padding: 24px 32px 32px; display: block; }
.form-card .card-foot { padding: 16px 32px 24px; background: var(--grey-50); border-top: 1px solid var(--grey-200); display: block; }
.form-card .card-foot[hidden] { display: none; }
@media (max-width: 720px) {
  .form-card .card-head { padding: 24px 16px 16px; }
  .form-card .card-body { padding: 16px; }
  .form-card .card-foot { padding: 12px 16px 18px; }
  .form-card .submitting-as { padding: 10px 16px; }
  .form-card .rm-proc { padding: 10px 16px; }
  .form-card .card-head h1 { font-size: 1.375rem; }
  .rmx-topbar { gap: 12px; padding: 0 12px; }
  .form-card-wrap { padding: 0 8px 24px; }
}
.form-card .card-body > * + * { margin-top: 0; }
.form-card .card-body > .acc-type, .form-card .card-body > .acc-intro { margin: 0 0 18px; }

/* the Accident app's report-type chooser, intro, alerts, submit and success (Index.html <style>) */
.rmx .acc-type { padding: 18px 20px; border: 1px solid #c5d8e6; border-radius: 12px; background: linear-gradient(180deg, #f3f8fc 0%, #ffffff 100%); }
.rmx .acc-type__q { display: block; margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: var(--grey-900); }
.rmx .acc-type__q .accf-req { color: var(--danger); margin-left: 3px; }
.rmx .acc-type select { max-width: 440px; min-height: 48px; padding: 10px 14px; font-size: 1rem; font-weight: 600; color: var(--brand-blue-700); border: 2px solid var(--brand-blue); border-radius: 10px; background-color: #fff; cursor: pointer; }
.rmx .acc-type__hint { margin: 8px 0 0; font-size: 0.8125rem; color: var(--grey-600); }
.rmx .acc-intro__text { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.6; color: var(--grey-700); }
.acc-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #fedf89; border-left: 4px solid #f79009; border-radius: 10px; background: var(--warning-bg); }
.acc-notice__ic { font-size: 1.125rem; line-height: 1.3; }
.acc-notice__title { margin: 0 0 2px; font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warning); }
.acc-notice p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--grey-700); }
.acc-notice p.acc-notice__title { margin: 0 0 2px; color: var(--warning); }
.form-card .card-foot .notice--stop, .form-card .card-body .notice--stop { margin: 0 0 12px; padding: 11px 14px; border-radius: 10px; font-size: 0.84375rem; line-height: 1.5; background: var(--danger-bg); border: 1px solid #fda29b; color: var(--danger); font-weight: 600; }
.form-card .card-foot .acc-submit { display: flex; width: 100%; min-height: 48px; padding: 12px 16px; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.01em; border-radius: 10px; }
.form-card .card-foot .acc-foot-note { margin: 10px 0 0; text-align: center; font-size: 0.78125rem; color: var(--grey-600); }
.acc-success { text-align: center; padding: 36px 12px 28px; }
.acc-success__ic { width: 64px; height: 64px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--success-bg); color: var(--success); font-size: 2rem; font-weight: 700; box-shadow: 0 0 0 8px rgba(2, 122, 72, 0.06); }
.acc-success h2 { margin: 0 0 6px; font-size: 1.375rem; color: var(--grey-900); }
.acc-success__sub { max-width: 520px; margin: 0 auto 18px; font-size: 0.875rem; color: var(--grey-600); }
.acc-success__id { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 10px 16px; border: 1px dashed var(--grey-300); border-radius: 10px; background: var(--grey-50); }
.acc-success__id span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-500); }
.acc-success__id code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.0625rem; font-weight: 700; color: var(--brand-blue); background: transparent; padding: 0; user-select: all; }
.acc-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rmx .acc-success__actions .btn { min-height: 44px; padding: 10px 20px; border-radius: 10px; font-size: 0.875rem; font-weight: 600; }
.rmx .acc-success__actions .btn--quiet:last-child { border-color: transparent; color: var(--brand-blue); background: transparent; }
@media (max-width: 720px) {
  .rmx .acc-type { padding: 14px; }
  .rmx .acc-type select { max-width: none; }
  .acc-success__actions { flex-direction: column; align-items: stretch; }
}

/* the SOP "Procedure" row (v0.57.0) keeps its words; it sits as a thin band under the card's heading */
.rmx .rm-proc__k { color: var(--grey-600); }
.rmx .rm-sop { color: var(--brand-blue); }

/* ---------------------------------------------------------------- the Accident dashboard (Dashboard.html) */
.rmx .acc-toggle { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 5px; background: var(--grey-100); border: 1px solid var(--grey-200); border-radius: 12px; margin: 0 0 8px; }
.rmx .acc-toggle__btn { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 12px; min-height: 56px; padding: 12px 18px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--grey-600); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.12s, color 0.12s, box-shadow 0.12s; }
.rmx .acc-toggle__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.65); color: var(--grey-900); border-color: transparent; }
.rmx .acc-toggle__btn.is-active, .rmx .acc-toggle__btn.is-active:hover:not(:disabled) { background: var(--bg-surface); color: var(--brand-blue); border-color: var(--grey-200); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06); }
.rmx .acc-toggle__icon { font-size: 1.25rem; line-height: 1; }
.rmx .acc-toggle__count { min-width: 36px; padding: 3px 10px; border-radius: 999px; background: var(--grey-200); color: var(--grey-700); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.rmx .acc-toggle__btn.is-active .acc-toggle__count { background: var(--brand-blue); color: #fff; }
.rmx .acc-toggle__of { font-size: 0.75rem; font-weight: 500; color: var(--grey-500); margin-left: -6px; }
.rmx .acc-scope { font-size: 0.78125rem; color: var(--grey-500); margin: 0 2px 14px; }

.rmx .acc-controls { background: var(--bg-surface); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: 14px 16px 16px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.rmx .acc-search input[type="search"] { width: 100%; min-height: 0; border: 1px solid var(--grey-300); border-radius: 10px; padding: 12px 44px; font-size: 1rem; font-family: inherit; color: var(--grey-900); background: var(--bg-surface); }
.rmx .acc-search input[type="search"]:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-50); }
.acc-search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--grey-400); font-size: 1rem; pointer-events: none; line-height: 1; }
.rmx .acc-search__clear { right: 8px; width: 30px; height: 30px; background: var(--grey-100); color: var(--grey-600); font-size: 1.125rem; }
.rmx .acc-search__clear:hover { background: var(--grey-200); color: var(--grey-900); }
.rmx .acc-search__hint { font-size: 0.71875rem; color: var(--grey-500); margin: 6px 2px 0; }
.rmx .acc-filters { gap: 10px 12px; margin-top: 12px; }
.rmx .acc-filter > span { font-size: 0.65625rem; color: var(--grey-500); margin-bottom: 3px; }
.rmx .acc-filter select { min-height: 0; font-size: 0.8125rem; padding: 7px 8px; border: 1px solid var(--grey-300); border-radius: var(--radius-sm); }
.rmx .acc-filter select.is-set { border-color: var(--brand-blue); background: var(--brand-blue-50); color: var(--brand-blue); font-weight: 600; }

.rmx .acc-resultbar { gap: 10px; margin: 4px 0 12px; min-height: 30px; }
.rmx .acc-count { font-size: 0.8125rem; color: var(--grey-700); font-weight: 600; }
.rmx .acc-chip { gap: 2px; padding: 3px 3px 3px 10px; border: 0; background: var(--brand-blue-50); color: var(--brand-blue); font-size: 0.75rem; font-weight: 500; max-width: 100%; }
.rmx .acc-chip__text { max-width: 320px; }
.rmx .acc-chip button { min-width: 0; min-height: 24px; padding: 0 7px; font-size: 0.9375rem; background: transparent; border: 0; color: inherit; }
.rmx .acc-chip button:hover { background: color-mix(in srgb, var(--brand-blue) 12%, transparent); }
.rmx .acc-chips__clear { font-size: 0.75rem; color: var(--grey-600); padding: 3px 6px; }
/* every small button on the register is the original's .btn-row-action */
.rmx .acc-export, .rmx .acc-actions .btn, .rmx .acc-empty__actions .btn { background: transparent; border: 1px solid var(--grey-300); color: var(--grey-700); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 0.78125rem; font-weight: 500; line-height: 1.4; min-height: 0; }
.rmx .acc-export:hover:not(:disabled), .rmx .acc-actions .btn:hover:not(:disabled), .rmx .acc-empty__actions .btn:hover:not(:disabled) { background: var(--grey-50); border-color: var(--grey-400); color: var(--grey-900); }
.rmx .acc-actions .btn--primary, .rmx .acc-actions .btn--primary:hover:not(:disabled) { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.rmx .acc-actions .btn--primary:hover:not(:disabled) { background: var(--brand-blue-700); border-color: var(--brand-blue-700); }

.rmx .acc-sev { gap: 6px; padding: 3px 10px 3px 8px; border: 0; font-size: 0.75rem; }
.rmx .acc-sev::before { width: 8px; height: 8px; flex-basis: 8px; }
.rmx .acc-badge { padding: 3px 9px; font-size: 0.71875rem; border: 0; }
.rmx .acc-badge--import { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.rmx .acc-badge--edited { background: #f4f3ff; color: #5925dc; border: 1px solid #d9d6fe; }
.rmx .acc-badge--test { background: #fff4e0; color: #92600a; border: 1px solid #f5b948; font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; }
.rmx .acc-badge--type { background: var(--grey-100); color: var(--grey-700); }

.rmx .acc-cards { gap: 12px; }
.rmx .acc-card[data-id] { background: var(--bg-surface); border: 1px solid var(--grey-200); border-left: 6px solid var(--sev, #d0d5dd); border-radius: var(--radius-lg); padding: 14px 18px 12px 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow 0.12s; }
.rmx .acc-card[data-id]:hover { box-shadow: 0 3px 10px rgba(16, 24, 40, 0.08); border-top-color: var(--grey-300); border-right-color: var(--grey-300); border-bottom-color: var(--grey-300); }
.rmx .acc-card.is-focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 28%, transparent), 0 3px 10px rgba(16, 24, 40, 0.08); }
.rmx .acc-card.is-test { background: repeating-linear-gradient(135deg, #fff, #fff 14px, #fffbf2 14px, #fffbf2 28px); }
.rmx .acc-card__top { grid-template-columns: 168px minmax(0, 1fr) auto; gap: 6px 18px; }
.rmx .acc-date__main { font-size: 1rem; color: var(--grey-900); }
.rmx .acc-date__sub { font-size: 0.75rem; color: var(--grey-500); margin-top: 2px; }
.rmx .acc-name { font-size: 1.0625rem; }
.rmx .acc-name a { color: var(--brand-blue); }
.rmx .acc-loc { font-size: 0.8125rem; color: var(--grey-700); margin-top: 2px; }
.acc-loc__pin { color: var(--grey-400); margin-right: 3px; }
.rmx .acc-locraw { margin-left: 4px; background: var(--warning-bg); color: var(--warning); font-size: 0.65625rem; letter-spacing: 0.02em; vertical-align: 1px; }
.rmx .acc-matched { margin-top: 5px; font-size: 0.75rem; color: var(--grey-600); }
.rmx .acc-matched__tag { font-size: 0.625rem; color: var(--grey-500); }
.rmx .acc-badges { gap: 6px; max-width: 340px; }
.rmx .acc-meta { grid-template-columns: 1.4fr 1.3fr 0.75fr 0.75fr 0.9fr 1.5fr; gap: 10px 18px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--grey-200); }
.rmx .acc-cell__label { font-size: 0.625rem; color: var(--grey-500); margin-bottom: 1px; }
.rmx .acc-cell__value { font-size: 0.8125rem; color: var(--grey-900); }
.rmx .acc-cell__value.is-no { color: var(--grey-600); }
.rmx .is-empty { color: var(--grey-500); }
.rmx .acc-card[data-id] .acc-card__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grey-100); gap: 10px; justify-content: flex-start; }
.rmx .acc-id { font-size: 0.75rem; color: var(--grey-500); letter-spacing: 0.01em; }
.rmx .acc-actions { margin-left: auto; gap: 6px; }
.rmx .acc-more { flex-direction: column; gap: 6px; margin: 18px 0 4px; }
.rmx .acc-more .btn { min-width: 240px; }
.rmx .acc-more__note { font-size: 0.75rem; color: var(--grey-500); }
.rmx .acc-empty { background: var(--bg-surface); border: 1px dashed var(--grey-300); border-radius: var(--radius-lg); padding: 36px 24px 30px; color: var(--grey-600); }
.rmx .acc-empty .e-icon { font-size: 1.875rem; line-height: 1; margin-bottom: 8px; }
.rmx .acc-empty h3 { font-size: 1.0625rem; margin: 0 0 6px; color: var(--grey-900); }
.rmx .acc-empty p { margin: 6px auto; max-width: 640px; font-size: 0.875rem; }
.rmx .acc-empty .acc-chips { justify-content: center; margin: 10px 0 4px; }
.rmx .acc-empty__other { background: var(--brand-blue-50); border-radius: var(--radius-md); padding: 10px 14px; display: inline-block; color: var(--grey-900); }
.rmx .acc-empty__tip { font-size: 0.78125rem; color: var(--grey-500); }
.rmx .acc-empty__actions { margin-top: 12px; }
.rmx .acc-empty__actions:empty { display: none; }
@media (max-width: 1000px) {
  .rmx .acc-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rmx .acc-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rmx .rm-view { padding: 0 12px 80px; }
  .rmx:not(.rmx-form) .rmx-top { padding: 14px 12px 0; }
  .dash-brandbar { flex-wrap: wrap; }
  .dash-brand-links { margin-left: 0; width: 100%; justify-content: flex-start; }
  .rmx .acc-toggle__btn { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 6px; font-size: 0.875rem; }
  .rmx .acc-toggle__icon { display: none; }
  .rmx .acc-toggle__of { margin-left: 0; }
  .rmx .acc-filters { grid-template-columns: 1fr 1fr; }
  .rmx .acc-card[data-id] { padding: 12px 12px 10px 12px; }
  .rmx .acc-card__top { grid-template-columns: 1fr; gap: 6px; }
  .rmx .acc-date { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .rmx .acc-date__sub { margin-top: 0; }
  .rmx .acc-badges { justify-content: flex-start; max-width: none; }
  .rmx .acc-meta { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .rmx .acc-actions { margin-left: 0; width: 100%; }
  .rmx .acc-actions .btn, .rmx .acc-actions button { flex: 1 1 auto; justify-content: center; }
  .rmx .acc-resultbar__right { margin-left: 0; }
}
@media print {
  .dash-brand-links, .acc-controls, .acc-toggle, .acc-actions, .acc-more, .page-footer, .acc-toast { display: none !important; }
  .rmx .acc-card[data-id] { break-inside: avoid; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------------- the travel and drone dashboards (Dashboard.html of Student Travel, Employee Travel, Drone) */
/* the status pill is the original's .badge */
.rmx .fl-pill { display: inline-block; gap: 0; margin-right: 6px; padding: 2px 8px; border: 0; font-size: 0.6875rem; font-weight: 500; background: var(--grey-100); color: var(--grey-700); }
.rmx .fl-pill::before { content: none; }
.rmx .fl-pill--ok { background: var(--success-bg); color: var(--success); }
.rmx .fl-pill--warn { background: var(--warning-bg); color: var(--warning); }
.rmx .fl-pill--stop { background: var(--danger-bg); color: var(--danger); }
.rmx .fl-pill--muted { background: var(--grey-100); color: var(--grey-700); }
.rmx .acc-badge { font-weight: 500; }

/* the tab strip: underlined text tabs that scroll sideways on a phone */
.rmx .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--grey-200); margin-bottom: 16px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: none; padding: 0; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; }
.rmx .tabs::-webkit-scrollbar { display: none; }
.rmx .tabs .dash-tab { flex: 0 0 auto; white-space: nowrap; background: transparent; color: var(--grey-600); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 16px; min-height: 44px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; margin-bottom: -1px; }
.rmx .tabs .dash-tab:hover:not(:disabled) { background: var(--grey-50); color: var(--grey-900); }
.rmx .tabs .dash-tab.active { background: transparent; color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.rmx .tabs .dash-tab.active:hover:not(:disabled) { background: var(--grey-50); color: var(--brand-blue); }
.rmx .tabs .dash-tab:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }

/* the search row (.dash-controls) */
.rmx .dash-controls { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.rmx .dash-search-wrap { position: relative; flex: 0 1 340px; min-width: 200px; }
.rmx .dash-controls input[type="search"] { width: 100%; min-height: 0; border: 1px solid var(--grey-300); border-radius: var(--radius-sm); padding: 7px 32px; font-size: 0.8125rem; font-family: inherit; color: var(--grey-900); background: var(--bg-surface); }
.rmx .dash-controls input[type="search"]:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-50); }
.rmx .dash-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--grey-400); font-size: 0.8125rem; pointer-events: none; line-height: 1; }
.rmx .dash-result-count { font-size: 0.75rem; color: var(--grey-500); }
.rmx .dash-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rmx .card-sort { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--grey-500); }
.rmx .card-sort select { width: auto; min-height: 0; border: 1px solid var(--grey-300); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 0.78125rem; font-family: inherit; background: var(--bg-surface); }
.rmx .card-sort button { width: auto; min-height: 0; padding: 5px 9px; font-size: 0.75rem; background: transparent; border: 1px solid var(--grey-300); color: var(--grey-700); border-radius: var(--radius-sm); }
.rmx .card-sort button:hover:not(:disabled) { background: var(--grey-50); }
.rmx .scope-note { font-size: 0.75rem; color: var(--grey-500); margin: -4px 0 12px; }
.rmx .empty-state { text-align: center; padding: 48px 16px; color: var(--grey-500); }

/* the row buttons */
.rmx .btn-row-action { display: inline-block; min-height: 0; background: transparent; border: 1px solid var(--grey-300); color: var(--grey-700); border-radius: var(--radius-sm); padding: 3px 10px; font-size: 0.75rem; font-weight: 500; cursor: pointer; margin-left: 0; text-decoration: none; line-height: 1.5; }
.rmx .btn-row-action:hover:not(:disabled) { background: var(--grey-50); border-color: var(--grey-400); color: var(--grey-900); }
.rmx .btn-row-action:disabled { opacity: 0.55; cursor: default; }

/* the table (.data-table) */
.rmx :is(.st-table, .et-table, .dr-table) { width: 100%; border-collapse: collapse; background: var(--bg-surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.rmx :is(.st-table, .et-table, .dr-table) th { background: var(--grey-50); border-bottom: 1px solid var(--grey-200); padding: 9px 12px; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--grey-600); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rmx :is(.st-table, .et-table, .dr-table) td { border-bottom: 1px solid var(--grey-100); padding: 10px 12px; font-size: 0.8125rem; color: var(--grey-900); vertical-align: top; }
.rmx :is(.st-table, .et-table, .dr-table) tr:last-child td { border-bottom: 0; }
.rmx :is(.st-table, .et-table, .dr-table) tbody tr:hover td { background: var(--grey-50); }
.rmx :is(.st-table, .et-table, .dr-table) td a { font-weight: 500; }
.rmx :is(.st-sorthead, .et-sorthead, .dr-sorthead) { font-size: inherit; font-weight: 600; color: inherit; text-transform: inherit; letter-spacing: inherit; min-height: 0; }
.rmx :is(.st-sorthead, .et-sorthead, .dr-sorthead):hover { color: var(--brand-blue); text-decoration: none; }
.rmx :is(.st-sub, .et-sub, .dr-sub) { font-size: 0.6875rem; color: var(--grey-500); }
.rmx :is(.st-id, .et-id, .dr-id) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.625rem; letter-spacing: -0.01em; word-break: break-all; color: var(--grey-500); }
.rmx :is(.st-actions, .et-actions, .dr-actions) { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.rmx :is(.et-row, .dr-row, .st-row).is-focus td { background: var(--brand-blue-50); }

/* the completed trips, as cards (.trip-card) */
.rmx .st-cards { display: grid; gap: 12px; }
.rmx .st-card { position: relative; background: var(--bg-surface); border: 1px solid var(--grey-200); border-left: 4px solid var(--grey-300); border-radius: var(--radius-lg); padding: 14px 16px 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); display: block; }
.rmx .st-card:hover { border-color: var(--grey-300); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.07); }
.rmx .st-card--ok { border-left-color: var(--success); }
.rmx .st-card--stop { border-left-color: var(--danger); }
.rmx .st-card--warn { border-left-color: var(--warning); }
.rmx .st-card--archived { border-left-color: var(--grey-300); background: var(--grey-50); }
.rmx .st-card__top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rmx .st-date { flex: 0 0 auto; min-width: 150px; }
.rmx .st-date__main { font-size: 0.9375rem; font-weight: 700; color: var(--grey-900); line-height: 1.25; }
.rmx .st-date__sub { font-size: 0.71875rem; color: var(--grey-500); margin-top: 1px; }
.rmx .st-date__none { font-size: 0.8125rem; font-weight: 600; color: var(--grey-500); }
.rmx .st-head { flex: 1 1 300px; min-width: 220px; }
.rmx .st-name { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--brand-blue); text-decoration: none; }
.rmx .st-name:hover { text-decoration: underline; }
.rmx .st-head > .st-sub { font-size: 0.71875rem; color: var(--grey-500); margin-top: 2px; }
.rmx .st-badges { flex: 0 0 auto; margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rmx .st-meta { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 12px 0 0; }
.rmx .st-meta > div { min-width: 110px; display: block; }
.rmx .st-lbl { display: block; font-size: 0.59375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-500); font-weight: 600; }
.rmx .st-val { font-size: 0.8125rem; color: var(--grey-900); }
.rmx .st-val.is-empty { color: var(--grey-500); font-style: normal; }
.rmx .st-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grey-100); justify-content: flex-start; }
.rmx .st-foot .st-actions { margin-left: auto; }
.rmx .st-slip { display: inline-flex; align-items: center; gap: 8px; min-height: 0; font-size: 0.8125rem; font-weight: 400; color: var(--grey-700); padding: 4px 10px 4px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; cursor: pointer; }
.rmx .st-slip input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-blue); cursor: pointer; flex: 0 0 auto; }
.rmx .st-slip:hover { background: var(--grey-50); border-color: var(--grey-200); }
.rmx .st-slip.is-on { color: var(--success); font-weight: 600; background: transparent; border-color: transparent; }
.rmx .st-slip.is-readonly { cursor: default; background: transparent; }
.rmx .st-slip.is-readonly:hover { background: transparent; border-color: transparent; }
.rmx .st-slip.is-readonly input { cursor: not-allowed; }
.rmx .st-slip__by { font-size: 0.6875rem; color: var(--grey-500); font-weight: 400; }
@media (max-width: 720px) {
  .rmx .st-badges { margin-left: 0; width: 100%; justify-content: flex-start; }
  .rmx .st-foot .st-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .rmx .st-meta { gap: 12px 20px; }
  .rmx .dash-right { margin-left: 0; width: 100%; }
  .rmx .dash-search-wrap { flex: 1 1 100%; }
  /* the table becomes one card per request (the original ran sideways; this stays inside the page) */
  .rmx :is(.st-table, .et-table, .dr-table) { background: transparent; box-shadow: none; overflow: visible; }
  .rmx :is(.st-table, .et-table, .dr-table) tr { background: var(--bg-surface); border: 1px solid var(--grey-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 8px 12px; margin: 0 0 8px; }
  .rmx :is(.st-table, .et-table, .dr-table) td { border: 0; padding: 3px 0; }
  .rmx :is(.st-actions, .et-actions, .dr-actions) { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- the White Fleet dashboard (Dashboard.html of rmWhiteFleet) */
.rmx .sev-ems { --sev: #d92d20; --sev-ink: #b42318; --sev-bg: #fef3f2; }
.rmx .sev-injury { --sev: #ef6820; --sev-ink: #b93815; --sev-bg: #fef6ee; }
.rmx .sev-damage { --sev: #eaaa08; --sev-ink: #854a0e; --sev-bg: #fefbe8; }
.rmx .sev-incident { --sev: #98a2b3; --sev-ink: #475467; --sev-bg: #f2f4f7; }
.rmx .el-ELIGIBLE, .rmx .el-CLEARED { --sev: #12b76a; --sev-ink: #027a48; --sev-bg: #ecfdf3; }
.rmx .el-PENDING_REVIEW { --sev: #f79009; --sev-ink: #b54708; --sev-bg: #fffaeb; }
.rmx .el-DENIED, .rmx .el-REVOKED, .rmx .el-NOT_ELIGIBLE { --sev: #d92d20; --sev-ink: #b42318; --sev-bg: #fef3f2; }
.rmx .el-EXPIRED { --sev: #98a2b3; --sev-ink: #475467; --sev-bg: #f2f4f7; }
.rmx .el-SUPERSEDED, .rmx .el-UNLINKED { --sev: #d0d5dd; --sev-ink: #667085; --sev-bg: #f9fafb; }
.rmx .dr-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.rmx .dr-summary[hidden] { display: none; }
.rmx .dr-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; min-height: 0; width: auto; text-align: left; padding: 12px 14px; border: 1px solid var(--grey-200); border-left: 5px solid var(--sev, #d0d5dd); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--grey-900); cursor: pointer; font-weight: 400; }
.rmx .dr-tile:hover:not(:disabled) { background: var(--grey-50); border-color: var(--grey-300); border-left-color: var(--sev, #d0d5dd); color: inherit; }
.rmx .dr-tile.is-on { box-shadow: 0 0 0 2px var(--sev, #98a2b3); }
.rmx .dr-tile .n { display: block; font-size: 1.375rem; font-weight: 800; color: var(--grey-900); font-variant-numeric: tabular-nums; line-height: 1.3; }
.rmx .dr-tile .l { display: block; font-size: 0.75rem; font-weight: 600; color: var(--sev-ink, #475467); }
.rmx .dr-tile .s { display: block; font-size: 0.71875rem; color: var(--grey-500); margin-top: 2px; }
.rmx .review-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.71875rem; font-weight: 700; background: #fffaeb; color: #b54708; border: 1px solid #fedf89; }
.rmx .acc-cell__value.is-yes { color: var(--grey-900); font-weight: 600; }
.rmx .acc-cell__value.lic-bad { color: var(--danger); font-weight: 600; }
.rmx .fl-summary { font-size: 0.8125rem; color: var(--grey-700); font-weight: 600; }
/* the "my driving status" panel and the queue keep their words in the original's card styling */
.rmx .fl-mine, .rmx .fl-queue { background: var(--bg-surface); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 16px; margin: 0 0 12px; }
.rmx .fl-queue { border-left: 5px solid #f79009; background: var(--warning-bg); }
.rmx .fl-mine h3, .rmx .fl-queue h3 { font-size: 0.9375rem; margin: 0 0 6px; color: var(--grey-900); }
.rmx .fl-mine .btn--primary { min-height: 0; padding: 7px 14px; font-size: 0.8125rem; }
@media (max-width: 720px) {
  .rmx .dr-summary { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- the travel and drone forms (CSS_Form: .paf-form fieldset / legend / .field / .label-text) */
.rmx .form-card :is(.stf-sec, .etf-sec, .drf-sec) { background: transparent; border: 0; border-top: 1px solid var(--grey-100); border-radius: 0; box-shadow: none; padding: 18px 0 8px; gap: 12px; }
.rmx .form-card .card-body > :is(.stf-sec, .etf-sec, .drf-sec):first-of-type { border-top: 0; padding-top: 4px; }
.rmx .form-card :is(.stf-legend, .etf-legend, .drf-legend) { margin: 0; padding: 0; border: 0; font-size: 0.8125rem; font-weight: 600; color: var(--brand-blue); text-transform: uppercase; letter-spacing: 0.04em; }
.rmx .form-card :is(.stf-row, .etf-row, .drf-row) { flex-wrap: wrap; gap: 12px; }
.rmx .form-card :is(.stf-row, .etf-row, .drf-row) > :is(.stf-field, .etf-field, .drf-field) { flex: 1 1 220px; min-width: 160px; }
.rmx .form-card :is(.stf-field, .etf-field, .drf-field) { gap: 4px; }
.rmx .form-card :is(.stf-field, .etf-field, .drf-field) .acc-lbl { font-size: 0.75rem; font-weight: 500; color: var(--grey-600); line-height: 1.4; }
.rmx .form-card :is(.stf-req, .etf-req, .drf-req) { color: var(--danger); font-weight: 400; font-style: normal; margin-left: 2px; }
.rmx .form-card :is(.stf-sec, .etf-sec, .drf-sec) :is(input[type="text"], input[type="tel"], input[type="date"], input[type="email"], input[type="number"], select, textarea) { min-height: 0; padding: 7px 10px; font-size: 0.875rem; border: 1px solid var(--grey-300); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--grey-900); }
.rmx .form-card :is(.stf-sec, .etf-sec, .drf-sec) :is(input, select, textarea):focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-50); }
.rmx .form-card :is(.stf-sec, .etf-sec, .drf-sec) textarea { min-height: 80px; line-height: 1.5; }
.rmx .form-card :is(.stf-sec, .etf-sec, .drf-sec) input[readonly] { background: var(--grey-50); color: var(--grey-600); }
.rmx .form-card :is(.stf-yn, .etf-yn, .drf-yn, .stf-checks, .etf-checks, .drf-checks) .acc-check { min-height: 0; padding: 7px 10px; border: 1px solid var(--grey-300); border-radius: var(--radius-sm); background: var(--bg-surface); font-size: 0.875rem; font-weight: 400; }
.rmx .form-card :is(.stf-yn, .etf-yn, .drf-yn, .stf-checks, .etf-checks, .drf-checks) .acc-check:has(input:checked) { border-color: var(--brand-blue); background: var(--brand-blue-50); font-weight: 500; }
.rmx .form-card :is(.stf-ack, .etf-ack, .drf-ack) { padding: 10px 12px; border: 1px solid var(--grey-200); border-radius: var(--radius-md); background: var(--grey-50); font-size: 0.8125rem; }
.rmx .form-card :is(.stf-ack, .etf-ack, .drf-ack):has(input:checked) { background: var(--success-bg); border-color: var(--success); }
.rmx .form-card :is(.stf-drop, .etf-drop, .drf-drop) { padding: 14px 16px; border: 2px dashed var(--grey-300); border-radius: var(--radius-md); background: var(--grey-50); }
.rmx .form-card :is(.stf-drop, .etf-drop, .drf-drop):hover { border-color: var(--brand-blue); background: var(--brand-blue-50); }
.rmx .form-card :is(.stf-err, .etf-err, .drf-err) { color: var(--danger); font-size: 0.75rem; font-weight: 600; }
.rmx .form-card :is(.stf-sec, .etf-sec, .drf-sec) .acc-help { font-size: 0.75rem; color: var(--grey-500); }

/* ---------------------------------------------------------------- v0.59.0: the square mark on the form page's white bar; the landing page's footer line */
.rmx-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rmx-topbar-logo { height: 32px; width: auto; flex: none; }
body:not(.rmx) #foot-link { display: none; }

/* ---------------------------------------------------------------- v0.59.0: the square mark on the form page's white bar; the landing page's footer line */
.rmx-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rmx-topbar-logo { height: 32px; width: auto; flex: none; }
body:not(.rmx) #foot-link { display: none; }

/* ---------------------------------------------------------------- v0.59.0: record cards (Accident, White Fleet, Student Travel)
   The details row spreads evenly across the card's full width; a SHORT value never wraps (.is-short); the record's ID is its last column; the
   bottom row holds only the buttons, at the right. At 390 px the row is a tidy two-column grid. */
.rmx .acc-meta, .rmx .st-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 10px 18px; }
.rmx .st-meta > div { min-width: 0; }
.rmx .acc-cell { min-width: 0; }
.rmx .acc-cell__value.is-short, .rmx .st-val.is-short { white-space: nowrap; }
.rmx .acc-cell--id .acc-id { font-size: 0.75rem; color: var(--grey-600); overflow-wrap: anywhere; }
.rmx .acc-id__note { display: block; font-family: inherit; color: var(--grey-500); }
.rmx .st-meta__id .st-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--grey-600); overflow-wrap: anywhere; }
.rmx .acc-card[data-id] .acc-card__foot { justify-content: flex-end; }
.rmx .acc-card__foot .acc-actions { margin-left: auto; }
@media (max-width: 720px) {
  .rmx .acc-meta, .rmx .st-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
}
body:not(.rmx) .page-footer { margin: 0; padding: 4px 0 0; border-top: 0; text-align: left; flex: 1 0 100%; }