/* =============================================================================
   RiskFlag Design System — component classes
   =============================================================================
   Styling for the first-party <x-rf-*> components that AdminLTE does not provide
   (page-header, empty-state, loading-overlay). Every value reads a SEMANTIC
   design token (see design-tokens.css) — never a raw hex, never a primitive.

   Loaded from layouts/_siteStyles.blade.php AFTER the tenant skin, so it always
   consumes the final (possibly skin-overridden) token values.

   CSP: classes only. No inline styles anywhere in the components that use these.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   <x-rf-page-header> — the canonical page header

   One full-bleed surface band above the page content:

     ● ORGANISATION                        Org > Module > This page
     (icon) Entity Type: Title (count)              [actions]

   The organisation is an OVERLINE above the title, so the reading order is
   org > page and the org stays salient wherever you are. The trail and the
   page's actions stack on the right, which gives the actions a fixed home
   instead of floating at the foot of the screen.

   It runs edge to edge, so the AdminLTE .content-header padding that would
   otherwise inset it is neutralised below. Its own gutter matches .content's
   (.5rem) + .container-fluid's (7.5px), which keeps the title aligned with the
   page content underneath.
   ------------------------------------------------------------------------ */
.content-header:has(.rf-page-header) {
  padding: 0;
}

.content-header:has(.rf-page-header) > div {
  padding-left: 0;
  padding-right: 0;
}

.rf-page-header {
  background: var(--rf-page-header-bg, var(--rf-surface));
  border-bottom: 1px solid var(--rf-border);
  margin-bottom: var(--rf-space-3);
}

.rf-page-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rf-space-2) var(--rf-space-3);
  padding: var(--rf-space-3) var(--rf-page-header-gutter);
}

/* Both columns run the same two rows, so their contents line up across the
   header however tall the buttons or the title happen to be. */
.rf-page-header__lead,
.rf-page-header__side {
  display: flex;
  flex-direction: column;
  gap: var(--rf-page-header-row-gap);
  min-width: 0;
}

.rf-page-header__org,
.rf-page-header__trail {
  min-height: var(--rf-page-header-row-overline);
  /* Pinned, not inherited: the app's body line-height is ~1.8, which made the
     trail row half a line taller than the overline beside it and pushed the
     whole right-hand column down. */
  line-height: 1.5;
}

.rf-page-header__headline,
.rf-page-header__actions {
  min-height: var(--rf-page-header-row-title);
}

/* The organisation, once per page: an overline, never in the title and never
   repeated in a banner below. The dot echoes the one the sidebar gives an org. */
.rf-page-header__org {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  max-width: 34rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--rf-font-size-sm);
  font-weight: var(--rf-font-weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rf-ink-muted);
}

.rf-page-header__org::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--rf-brand-accent);
}

/* The organisation's logo, wherever the shared logo component draws it: the box
   the image is fitted INTO, rather than a width on the image, because logos
   arrive as wide wordmarks and square badges alike and letting each set its own
   height makes the lines around it jump between organisations. This is the
   landing-page size; the page-header overline narrows it below. The org's chosen
   size (orgLogo--s<percent>, from org_logo_scale) multiplies both. */
.orgLandingLogo {
  max-height: calc(5rem * var(--orgLogoScale, 1));
  max-width: calc(14rem * var(--orgLogoScale, 1));
  width: auto;
  height: auto;
  object-fit: contain;
}

/* An org that has set a logo shows it here, on every page, so the organisation is
   presented the same way throughout. Constrained by both axes because the source is
   whatever image the org uploaded — a tall crest and a wide wordmark both have to
   land inside the overline row without pushing the title down.
   Sized in this stylesheet rather than orgLanding.css, which only the cases landing
   page loads; the header renders everywhere. Qualified by the overline so it outranks
   the .orgLandingLogo (max-height 5rem) that the shared logo component merges in —
   that sheet loads after this one, and at equal specificity it would otherwise win. */
.rf-page-header__org .rf-page-header__orgLogo {
  flex: none;
  max-height: calc(1.75rem * var(--orgLogoScale, 1));
  max-width: calc(10rem * var(--orgLogoScale, 1));
  width: auto;
  height: auto;
  object-fit: contain;
}

/* A logo is the org's mark already — the accent dot beside it reads as a stray
   bullet against someone's branding. */
.rf-page-header__org--withLogo::before {
  content: none;
}

.rf-page-header__headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rf-space-2);
  min-width: 0;
}

.rf-page-header__icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--rf-page-header-icon-color, var(--rf-ink-muted));
  flex: none;
}

/* An inline-SVG icon passed through the iconSlot (lucide glyphs) sizes to match
   the FontAwesome ones beside it. */
.rf-page-header__icon > svg {
  width: 1.35rem;
  height: 1.35rem;
}

.rf-page-header__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  min-width: 0;
  font-size: 1.6rem;
  /* Bold, matching the entity-type segment: a page with no type prefix has the
     title AS its primary label, so it should carry the same weight as the
     prefix would. `--type + --name` below drops the record name back to normal. */
  font-weight: var(--rf-font-weight-bold);
  line-height: 1.2;
  color: var(--rf-page-header-title-color, var(--rf-ink));
}

/* The entity type carries the weight; the record's own name sits back from it
   so "Top Level Claim: Bembridge House" reads as one label, not two titles.
   Without a type the name IS the title, so it keeps the full weight. */
.rf-page-header__type {
  font-weight: var(--rf-font-weight-bold);
}

.rf-page-header__type + .rf-page-header__name {
  font-weight: var(--rf-font-weight-normal);
  color: var(--rf-ink-muted);
}

/* The page's own count, beside the title rather than inside it, so the title
   stays a stable noun ("Tasks", not "Tasks (206)"). */
.rf-page-header__count {
  font-size: var(--rf-font-size-sm);
  border-radius: var(--rf-radius-pill);
  padding: .3rem .7rem;
}

.rf-page-header__subtitle {
  margin: 0;
  color: var(--rf-ink-muted);
  font-size: var(--rf-font-size-sm);
}

/* Trail above, buttons below — both right-aligned, both in the header band. */
.rf-page-header__side {
  align-items: flex-end;
  margin-left: auto;
}

.rf-page-header__trail {
  display: flex;
  align-items: center;
}

.rf-page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--rf-space-2);
}

.rf-page-header__breadcrumb.breadcrumb {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  background: transparent;
  border-radius: 0;
  justify-content: flex-end;
  font-size: var(--rf-font-size-sm);
}

/* One size for every header button, whatever a page passes in: they share a row
   with the title, so a full-height default button would push that row taller on
   one side only. Matches the title's line box. */
.rf-page-header__actions .btn {
  padding: .25rem .6rem;
  font-size: var(--rf-font-size-sm);
  line-height: 1.5;
}

.rf-page-header__actions .btn > i {
  font-size: var(--rf-font-size-sm);
}

/* A chevron reads as "descends into", where Bootstrap's slash reads as a path
   fragment. Bootstrap 4 has no divider variable, so it is the ::before rule. */
.rf-page-header__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  color: var(--rf-ink-faint);
  padding-right: var(--rf-space-2);
}

.rf-page-header__breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: var(--rf-space-2);
}

/* Long middle crumbs ellipsise; the current page never does — losing the end of
   the trail loses the one crumb that says where you are. */
.rf-page-header__breadcrumb .breadcrumb-item > a,
.rf-page-header__breadcrumb .breadcrumb-item > span {
  display: inline-block;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.rf-page-header__breadcrumb .breadcrumb-item:last-child > a,
.rf-page-header__breadcrumb .breadcrumb-item:last-child > span {
  max-width: none;
}

.rf-page-header__breadcrumb .breadcrumb-item.active > span {
  color: var(--rf-ink);
  font-weight: var(--rf-font-weight-medium);
}

/* Narrow: the right-hand stack drops under the title and left-aligns with it,
   rather than squeezing the trail into a column of single words. */
@media (max-width: 767.98px) {
  .rf-page-header__side {
    align-items: flex-start;
    margin-left: 0;
    width: 100%;
  }

  .rf-page-header__breadcrumb.breadcrumb { justify-content: flex-start; }
  .rf-page-header__actions { justify-content: flex-start; }
  .rf-page-header__title { font-size: 1.35rem; }
}


/* ---------------------------------------------------------------------------
   <x-rf-empty-state> — the canonical "no data yet" block
   icon + title + message + optional action, centred.
   ------------------------------------------------------------------------ */
.rf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--rf-space-5) var(--rf-space-3);
  color: var(--rf-ink-muted);
}

.rf-empty-state__icon {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--rf-ink-faint);
  margin-bottom: var(--rf-space-3);
}

.rf-empty-state__title {
  font-size: var(--rf-font-size-lg);
  font-weight: var(--rf-font-weight-medium);
  color: var(--rf-ink);
  margin: 0 0 var(--rf-space-1);
}

.rf-empty-state__message {
  margin: 0;
  max-width: 42rem;
  /* Full ink, not --rf-ink-muted: the empty state is transparent, so it can sit on
     off-tone areas (e.g. the dashboard widget bg) where muted grey drops below the
     WCAG AA 4.5:1 text threshold. Ink flips per theme and always clears it. */
  color: var(--rf-ink);
}

.rf-empty-state__action {
  margin-top: var(--rf-space-3);
}


/* ---------------------------------------------------------------------------
   <x-rf-loading-overlay> — the canonical full-panel loading state
   Overlays its nearest positioned ancestor (give that ancestor position:
   relative) and is toggled with the [hidden] attribute from JS.
   Use the --fixed modifier for a whole-viewport wait.
   ------------------------------------------------------------------------ */
.rf-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rf-space-2);
  background: var(--rf-scrim);
  border-radius: inherit;
  z-index: 10;
}

.rf-loading-overlay--fixed {
  position: fixed;
  z-index: 1080;
}

.rf-loading-overlay__spinner {
  font-size: 2rem;
  color: var(--rf-primary);
}

.rf-loading-overlay__label {
  color: var(--rf-ink-muted);
  font-weight: var(--rf-font-weight-medium);
}

/* Panels taller than the viewport: centring puts the spinner hundreds of pixels
   below the fold, so the viewer sees a dimmed panel and no sign of progress.
   This modifier pins the spinner near the panel's top instead, which is where
   the viewer is looking when the wait starts (they have just used the control
   above it). The scrim still covers the whole panel. */
.rf-loading-overlay--top {
  justify-content: flex-start;
  padding-top: var(--rf-space-5);
}

/* Toggled from JS via the standard hidden attribute. */
.rf-loading-overlay[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Top-bar text contrast (light mode). AdminLTE's navbar-light link colour is
   rgba(0,0,0,.5), which lands the header text (e.g. the signed-in user's name)
   at ~3.9:1 on the white bar — below WCAG AA. Nudge it over the line. Dark mode
   is handled separately in dark-mode.css (which loads later and wins there).
   ------------------------------------------------------------------------ */
.main-header.navbar-light .nav-link {
  color: rgba(0, 0, 0, 0.62);
}

/* ---------------------------------------------------------------------------
   Contextual help (help mode) — <x-help-mode>, help-mode.js
   Launched from the navbar "?" (#rfHelpLaunch) or the "?" in a modal header;
   the root (dimmer + frames + side panel) is hoisted to <body>. Frame geometry is
   set from JS via el.style; nothing here positions a frame.
   Z-order: the root sits ABOVE modals (1050 + 20 per stacked modal) so help
   for a dialog dims the dialog too; popovers ride inside the root.
   ------------------------------------------------------------------------ */
/* The navbar "?" is the launcher: it keeps its nav-link look and shows a
   pressed state while help is on. */
.nav-link.rf-help-launch[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 var(--rf-help-frame);
}

/* The "?" beside a modal's ×: same .close treatment, slightly smaller glyph.
   It comes FIRST in the header so Bootstrap's `margin-left: auto` on it pushes
   the pair right; the × that follows must not take a share of that space, or
   the "?" would end up mid-header. */
.modal-header .rf-help-modal-launch {
  margin-right: 0; /* Bootstrap's -1rem would pull the × over it. */
  padding-right: var(--rf-space-2);
  opacity: .5;
}
/* The button keeps the ×'s 1.5rem line box (a 1rem button was shorter, so the
   two floats aligned at the top and the ? sat high); the icon is centred in
   that box at 1rem, the ×'s visual weight. */
.modal-header .rf-help-modal-launch > i {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: top;
}
.modal-header .rf-help-modal-launch + .close {
  margin-left: var(--rf-space-1);
}
.modal-header .rf-help-modal-launch:hover,
.modal-header .rf-help-modal-launch:focus {
  opacity: .9;
}

.rf-help-mode {
  position: fixed;
  inset: 0;
  z-index: 1300;
  pointer-events: none;
}
.rf-help-mode__dimmer {
  position: absolute;
  inset: 0;
  background: var(--rf-scrim-dark);
  pointer-events: auto;
  cursor: default;
}
.rf-help-mode__frames {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A frame is a real button so it can take focus and be reached by keyboard. */
.rf-help-frame {
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 2px solid var(--rf-help-frame);
  border-radius: var(--rf-radius);
  background: transparent;
  box-shadow: 0 0 0 4px rgba(255, 193, 7, .25), 0 0 18px rgba(255, 193, 7, .45);
  pointer-events: auto;
  cursor: help;
  transition: box-shadow .15s ease;
}
.rf-help-frame:hover,
.rf-help-frame:focus,
.rf-help-frame--active {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 193, 7, .45), 0 0 26px rgba(255, 193, 7, .7);
}
.rf-help-frame--pinned {
  border-style: double;
  border-width: 4px;
}
/* A frame is clipped to what is on screen (a scrolled modal body, the
   viewport); the cut edge goes dotted and loses its glow so it reads as
   "continues off screen" rather than as a box ending there. */
.rf-help-frame--cut-top    { border-top-style: dotted;    border-top-left-radius: 0;    border-top-right-radius: 0; }
.rf-help-frame--cut-bottom { border-bottom-style: dotted; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rf-help-frame--cut-left   { border-left-style: dotted;   border-top-left-radius: 0;    border-bottom-left-radius: 0; }
.rf-help-frame--cut-right  { border-right-style: dotted;  border-top-right-radius: 0;   border-bottom-right-radius: 0; }
.rf-help-frame--cut-top,
.rf-help-frame--cut-bottom,
.rf-help-frame--cut-left,
.rf-help-frame--cut-right {
  box-shadow: none;
}

/* Pick-a-control: the outline that follows the pointer, and its key label. */
.rf-help-mode--picking .rf-help-mode__dimmer {
  cursor: crosshair;
}
.rf-help-picker {
  position: fixed;
  box-sizing: border-box;
  border: 2px dashed var(--rf-help-frame);
  border-radius: var(--rf-radius);
  pointer-events: none;
}
.rf-help-picker__label {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding: 0 var(--rf-space-1);
  font-family: var(--rf-font-mono);
  font-size: var(--rf-font-size-sm);
  color: var(--rf-on-warning);
  background: var(--rf-help-frame);
  border-radius: var(--rf-radius-sm) var(--rf-radius-sm) 0 0;
  white-space: nowrap;
}

/* Admins see anchors nobody has written up yet, so the gaps are visible. */
.rf-help-frame--missing {
  border-style: dashed;
  border-color: var(--rf-ink-faint);
  box-shadow: none;
}

.rf-help-popover {
  max-width: 360px;
  box-shadow: var(--rf-shadow-lg);
  pointer-events: auto;
  /* rfsc.css sets .popover to pre-wrap for plain-text tips; hint bodies are
     server-rendered HTML and would show their indentation as gaps. */
  white-space: normal;
}
.rf-help-hint__title {
  font-weight: var(--rf-font-weight-bold);
  margin-bottom: var(--rf-space-1);
}
.rf-help-hint__body > :last-child {
  margin-bottom: 0;
}
.rf-help-hint__more {
  display: inline-block;
  margin-top: var(--rf-space-2);
  font-size: var(--rf-font-size-sm);
}
.rf-help-hint--missing {
  color: var(--rf-ink-muted);
}
.rf-help-hint__edit {
  display: block;
  padding: 0;
  margin-top: var(--rf-space-2);
  font-size: var(--rf-font-size-sm);
}

/* User Guide callout diagrams: the help-mode frame over a capture. The
   frames sit inside the image's box (absolute, not fixed); the pointer
   anywhere over the diagram, or a pinned caption, lights it — the scrim dims the picture and each frame
   keeps its own region bright (manual.js paints the image into the frame's
   background, offset to its rectangle). Numbers are opt-in per callout. */
.rf-callout__wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.rf-callout__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--rf-radius);
}
.rf-callout__scrim {
  position: absolute;
  inset: 0;
  background: var(--rf-scrim-dark);
  border-radius: var(--rf-radius);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.rf-callout--lit .rf-callout__scrim,
.rf-callout__wrap:hover .rf-callout__scrim {
  opacity: 1;
}
.rf-callout .rf-help-frame {
  position: absolute;
  background-repeat: no-repeat;
  overflow: visible;
}
.rf-callout__number {
  position: absolute;
  top: -12px;
  left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--rf-space-1);
  border-radius: var(--rf-radius-pill);
  background: var(--rf-help-frame);
  color: var(--rf-ink);
  font-size: var(--rf-font-size-sm);
  font-weight: var(--rf-font-weight-bold);
  line-height: 1;
  box-shadow: var(--rf-shadow-sm);
  pointer-events: none;
}
.rf-callout__caption[hidden] {
  display: none;
}

/* Contextual Help editor page */
.rf-help-catalogue__stat {
  font-size: 1.75rem;
  font-weight: var(--rf-font-weight-bold);
}
.rf-help-catalogue__stat small {
  font-size: var(--rf-font-size-sm);
  font-weight: var(--rf-font-weight-normal);
  color: var(--rf-ink-muted);
}
.rf-help-catalogue__filter #helpHintFilter {
  max-width: 24rem;
}
.rf-help-catalogue__table code {
  white-space: nowrap;
}

/* Make room for the panel so nothing in scope sits under it: the page reflows
   narrower (frames are measured AFTER the body class lands, so they follow),
   and a scoped modal's dialog is slid left by help-mode.js from measured
   geometry — CSS cannot know the dialog's width against the viewport, and
   some dialogs pin theirs with !important. */
body.rf-help-mode-on .content-wrapper,
body.rf-help-mode-on .main-header {
  padding-right: var(--rf-help-panel-width);
}
body.rf-help-mode-on .main-footer {
  padding-right: calc(var(--rf-help-panel-width) + 1em);
}
body.rf-help-mode-on .modal.rf-help-scope .modal-dialog {
  transition: none;
}
/* The bow tie editor has no content wrapper to pad; its toolbar hugs the right
   edge, where the panel's minimised tab would cover the Help button. Measured
   after the body class lands, so frames follow. */
body.rf-help-mode-on .bowtie-toolbar {
  margin-right: 2.25rem;
}

/* Side panel: slides in from the right, over the dimmer. Minimise slides it
   off screen but leaves a tab, for a screen too narrow to share. */
.rf-help-panel {
  transition: transform .2s ease;
}
.rf-help-panel--minimised {
  transform: translateX(calc(100% - 2.25rem));
}
.rf-help-panel--minimised .rf-help-panel__header > :not(.rf-help-panel__minimise),
.rf-help-panel--minimised .rf-help-panel__body,
.rf-help-panel--minimised .rf-help-panel__footer {
  visibility: hidden;
}
.rf-help-panel__minimise {
  float: none;
  font-size: 1.25rem;
  margin-right: var(--rf-space-1);
}
body.rf-help-mode-on.rf-help-panel-minimised .content-wrapper,
body.rf-help-mode-on.rf-help-panel-minimised .main-header {
  padding-right: 2.25rem;
}
.rf-help-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--rf-help-panel-width), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--rf-help-panel-bg, var(--rf-surface));
  color: var(--rf-help-panel-ink, var(--rf-ink));
  box-shadow: var(--rf-shadow-lg);
  pointer-events: auto;
}
.rf-help-panel__header {
  display: flex;
  align-items: center;
  gap: var(--rf-space-2);
  padding: var(--rf-space-2) var(--rf-space-3);
  border-bottom: 1px solid var(--rf-border);
}
.rf-help-panel__title {
  flex: 1;
  margin: 0;
  font-size: var(--rf-font-size-lg);
  font-weight: var(--rf-font-weight-bold);
}
.rf-help-panel__close {
  float: none;
  font-size: 1.5rem;
}
.rf-help-panel__body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: var(--rf-space-3);
}
.rf-help-panel__footer {
  padding: var(--rf-space-2) var(--rf-space-3);
  border-top: 1px solid var(--rf-border);
  font-size: var(--rf-font-size-sm);
}
.rf-help-panel__heading {
  font-size: var(--rf-font-size-sm);
  font-weight: var(--rf-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rf-ink-muted);
  margin-bottom: var(--rf-space-2);
}
.rf-help-panel__topic,
.rf-help-panel__search,
.rf-help-panel__list,
.rf-help-panel__missing {
  margin-bottom: var(--rf-space-4);
}
.rf-help-panel__results {
  margin-top: var(--rf-space-2);
}
.rf-help-panel__results--busy {
  opacity: .5;
}
.rf-help-panel__results--empty:not(:empty)::after,
.rf-help-panel__results--empty:empty::after {
  content: 'No matching guide pages.';
  color: var(--rf-ink-muted);
  font-size: var(--rf-font-size-sm);
}
/* Guide search results in the panel. The endpoint's markup is shared with the
   manual pages, whose card styling (rfsc.css .searchResult, manual-search.css)
   is not loaded here: rfsc.css alone drew each hit as the aliceblue
   double-border card and ran the section name into the title. A compact list. */
.rf-help-panel__results .searchResult {
  border: 0;
  border-bottom: 1px solid var(--rf-border);
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: var(--rf-space-2) 0;
}
.rf-help-panel__results .searchResult:last-of-type {
  border-bottom: 0;
}
.rf-help-panel__results hr {
  display: none;
}
.rf-help-panel__results .manual-search-result a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.rf-help-panel__results .manual-search-section {
  font-size: var(--rf-font-size-sm);
  color: var(--rf-ink-muted);
}
.rf-help-panel__results .manual-search-section i {
  margin-right: var(--rf-space-1);
}
.rf-help-panel__results .manual-search-title {
  font-weight: var(--rf-font-weight-medium);
  color: var(--rf-link);
}
.rf-help-panel__results .manual-search-result a:hover .manual-search-title {
  text-decoration: underline;
}
.rf-help-panel__results .manual-search-snippet {
  font-size: var(--rf-font-size-sm);
  color: var(--rf-ink-muted);
  margin-top: var(--rf-space-1);
  line-height: 1.3;
}
.rf-help-panel__results .manual-search-snippet mark {
  background-color: #fff3cd;
  padding: 0 .15em;
  border-radius: 2px;
}
.rf-help-panel__item {
  padding: 0;
  text-align: left;
}
.rf-help-panel__missing code {
  font-size: var(--rf-font-size-sm);
}

/* <x-rf-required-mark /> — the asterisk after a required field's label text. */
.rf-required-mark {
  margin-left: .15em;
  font-weight: var(--rf-font-weight-bold);
}

/* ---------------------------------------------------------------------------
   The house theme: theme="riskflagsc" on <x-rf-modal> / <x-rf-card>.
   AdminLTE turns it into .bg-riskflagsc (modal header) and .card-riskflagsc
   (card), and until 2026-09-12 NOTHING defined either — 254 modals and 249
   cards asked for it and got AdminLTE's plain defaults. Decided the same day
   (option 3 of three prototyped live): a NEUTRAL header on the page's surface,
   matching the neutral page header above it, with a 3px brand rule as the
   accent. Never a filled navy bar — that is heavier than the chrome around it.
   danger / warning modal headers keep their fill: there the colour is the
   message. Guarded by NoLegacyDesignPatternsTest.
   ------------------------------------------------------------------------ */
.modal-header.bg-riskflagsc {
  background-color: var(--rf-surface);
  color: var(--rf-ink);
  border-top: 3px solid var(--rf-brand);
  border-bottom: 1px solid var(--rf-border);
}

.modal-header.bg-riskflagsc .modal-title {
  color: var(--rf-ink);
}

.card.card-riskflagsc {
  border-top: 3px solid var(--rf-brand);
}

/* Brand navy on the dark surface is nearly invisible; the accent carries it. */
body.dark-mode .modal-header.bg-riskflagsc,
body.dark-mode .card.card-riskflagsc {
  border-top-color: var(--rf-brand-accent);
}

/* The organisation's logo size, chosen on Organisation Appearance Options
   (org_logo_scale). One class per allowed step, so the choice reaches the page
   as a class under the CSP; each logo box multiplies its own base by the variable.
   The set must match App\Support\Organisation\OrgLogo::SCALES. */
.orgLogo--s50 { --orgLogoScale: .5; }
.orgLogo--s75 { --orgLogoScale: .75; }
.orgLogo--s100 { --orgLogoScale: 1; }
.orgLogo--s125 { --orgLogoScale: 1.25; }
.orgLogo--s150 { --orgLogoScale: 1.5; }
.orgLogo--s200 { --orgLogoScale: 2; }
.orgLogo--s250 { --orgLogoScale: 2.5; }
.orgLogo--s300 { --orgLogoScale: 3; }

/* The logo size preview on Organisation Appearance Options: two panes drawing
   the real image with the real classes, one per size the pages use. */
.orgLogoPreview__pane {
  border: 1px dashed var(--rf-border);
  border-radius: var(--rf-radius);
  padding: 1rem;
  min-height: 8rem;
}
.orgLogoPreview__caption {
  margin: 0 0 .75rem;
  font-size: var(--rf-font-size-sm);
  color: var(--rf-ink-muted);
}

/* A long From / To value in the activity log: shown whole, scrolling in its
   own box so the two cells stay level and the change is never cut off. */
.activityLog__value {
  display: block;
  max-height: 12rem;
  overflow-y: auto;
  padding-right: .25rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* The navbar's right-panel button (clipboard + restore list): icon, a count
   of what the panel holds, and a chevron that points left while the panel is
   off-screen to the right and turns to point right once it is open. */
.rf-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.rf-panel-toggle__count {
  font-size: .65rem;
  line-height: 1;
  padding: .2em .45em;
}
.rf-panel-toggle__chevron {
  font-size: .7em;
  transition: transform .2s ease;
}
.rf-panel-toggle--open .rf-panel-toggle__chevron {
  transform: rotate(180deg);
}

/* The right-hand panel (clipboard + restore list) stays in view while the page
   scrolls. AdminLTE pins it only in its fixed-sidebar layout; the full-width
   top-nav layout drops that class, leaving the panel absolute so its contents
   scroll off the top with the page. Pin it there the same way: under the fixed
   navbar, to the bottom of the viewport, scrolling its own contents. */
body.layout-top-nav .wrapper .control-sidebar {
  position: fixed;
  top: calc(3.5rem + 1px);
  bottom: 0;
  overflow-y: auto;
}

/* Document Template generator: an optional colour picker showing "none". */
.otdgColour--none {
  opacity: 0.35;
}

/* ---------------------------------------------------------------------------
   <x-safetycase.lockedNode>: a claim-tree node the viewer's access doesn't
   open, drawn on the claim pages as a dead element (DEPTH_GATING_SPEC.md §4.0).
   The tile keeps .VertAligner and .VertAlignerCode, so its shape and reference
   strip match the open tiles beside it, but not .VertAlignerTitle: a tenant
   skin paints that as an open tile. No hover lift (.rfInteractiveTile).
   ------------------------------------------------------------------------ */
.lockedNode {
  cursor: default;
}

.lockedNode__title {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  max-width: 200px;
  min-height: 100px;
  padding: 2px 10px;
  text-align: center;
  background: var(--rf-surface-muted);
  color: var(--rf-ink-muted);
}

.lockedNode__note {
  font-size: .85em;
}

.lockedNode--category {
  border-radius: 10px;
  background: var(--rf-surface-muted);
}

.lockedNode--category .lockedNode__heading {
  padding-top: 15px;
  padding-bottom: 15px;
  color: var(--rf-ink-muted);
}

/* The size of the score square it stands in for (.assessmentBadgeSquare). */
.lockedNode--square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  background: var(--rf-surface-muted);
  color: var(--rf-ink-muted);
}

.lockedNode--square > i {
  font-size: .6em;
}

/* A locked tile's scores, shown under a grant's score switch (§4.10): the open
   tile's icon strip, in the locked tile's muted colours. */
.lockedNode__scores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 200px;
  max-width: 200px;
  min-height: 1.5em;
  padding: 4px;
  border-top: 1px solid var(--rf-border);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background: var(--rf-surface-muted);
}

.lockedNode__scores .assessmentSummary {
  display: flex;
  align-items: center;
}