/* Lumen admin — brand accents in the cool chrome (teal stays the primary colour, pink the
   wayfinding accent). Loaded globally via UNFOLD["STYLES"] so it applies on every admin page
   (sidebar + forms), not just the dashboard. The Lumen design system is teal-primary /
   pink-secondary; pink is reserved for chrome accents and never touches the semantic status
   colours on the health cards. */

/* --- Design-system tokens (admin-wide) --------------------------------------------------------
   Named vars from docs/Design/Lumen Design System (standalone).html so the rules below reference the
   palette / gradient / radius / shadow scale instead of repeating hexes. These are brand IDENTITY
   tokens — the .lh-* status hues stay hand-written (semantic green/amber/red), never from here. */
:root {
  --lm-teal: #00bfae; --lm-azure: #2d9cff; --lm-violet: #7a5bff; --lm-pink: #ff2d8e;
  --lm-ink: #10211f; --lm-ink2: #5c6b69; --lm-ink3: #9ba9a7; --lm-line: rgba(16, 33, 31, .09);
  --lm-grad: linear-gradient(90deg, var(--lm-teal), var(--lm-azure), var(--lm-violet), var(--lm-pink));
  --lm-grad-v: linear-gradient(180deg, var(--lm-teal), var(--lm-azure), var(--lm-violet), var(--lm-pink));
  --lm-r-chip: 12px; --lm-r-row: 18px; --lm-r-card: 22px;
  --lm-sh-subtle: 0 4px 10px rgba(16, 33, 31, .04);
  --lm-sh-card: 0 14px 30px rgba(16, 33, 31, .05);
}

/* The rest of the design-system faces (Manrope 800 is declared below for the wordmark). Space Mono is
   the --mono for eyebrows/labels; Manrope 400/600/700 round out the body/UI weights. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/spacemono-700.woff2") format("woff2"); }

/* Manrope — the design system's --sans, self-hosted to match its standalone (no-CDN) approach. The
   brand wordmark's spec is Manrope 800; that's the only weight the wordmark needs. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/manrope-800.woff2") format("woff2");
}

/* The current sidebar item: pink text + a pink left marker, overriding Unfold's teal primary.
   Light text is #c71e70 (~5:1 on the cool base-50, meets AA); the marker bar stays hot pink. */
#nav-sidebar-inner a.active {
  color: #c71e70 !important;
  box-shadow: inset 3px 0 0 #ff2d8e;
}
.dark #nav-sidebar-inner a.active {
  color: #ff2d8e !important; /* hot pink is legible on the dark sidebar */
}

/* Pink focus ring on interactive controls (brand accent + a clearer keyboard-focus cue). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[type="submit"]:focus-visible {
  outline: 2px solid #ff2d8e !important;
  outline-offset: 1px;
}

/* --- Brand gradient ----------------------------------------------------------------------------
   The animated brand sheen (teal→azure→violet→pink) lives in two reserved spots: clipped to the
   sidebar "Lumen" wordmark, and as a thin stripe down the nav edge (below). Never body text or a
   large fill. The sheen animates by sweeping an oversized gradient's position (GPU-cheap, no layout
   repaint), gated behind prefers-reduced-motion. For the text clip, both -webkit-text-fill-color and
   color must be transparent (WebKit honours the former, Firefox the latter). */
.lumen-wordmark {
  background-image: linear-gradient(100deg, #00bfae, #2d9cff, #7a5bff, #ff2d8e);
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .lumen-wordmark {
    animation: lumenHueShift 6s linear infinite;
  }
}
@keyframes lumenHueShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Enlarged sidebar brand — a moderately bigger logo + wordmark. Sized via our own classes because
   Unfold's pruned Tailwind only ships the arbitrary h-[] / text-* values its own templates already use,
   so a fresh one would silently no-op (see the prebuilt-CSS-incomplete note). The wordmark's negative
   margin pulls "Server admin" up into a tight lockup — line-height alone can't close the font's
   descender leading (~10px), and "Lumen" has no descenders so nothing clips. */
.lumen-logo { height: 48px; width: auto; }
/* Wordmark type matches the design system's `.wordmark`: Manrope 800, tight tracking (its -4px @ 104px
   ≈ -0.038em). Overrides the template's `tracking-tight` + Unfold's inherited font/weight. */
.lumen-wordmark { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.038em; font-size: 1.5rem; line-height: 1.15; margin-bottom: -3px; }

/* The whole brand lockup is one link to the admin home (site_icon.html wraps logo + wordmark +
   subheader in a single <a>). Stretch it to the full header-row height so the entire block is the
   click target — no hover fill (the mark itself is affordance enough). */
.lumen-brand { align-self: stretch; text-decoration: none; }
/* Wordmark + subheader: left-aligned and hugging the logo. Pinned here because Unfold's pruned
   Tailwind may drop items-start / text-left, leaving the block stretched or centre-inherited. */
.lumen-brand-text { align-items: flex-start; text-align: left; }

/* Breathing room above and below the logo: the brand header row (Lumen's navigation_header.html
   override) carries .lumen-brand-row; its items-center centering splits this height symmetrically
   around the lockup. Replaces a fragile :has(.lumen-brand) selector. */
.lumen-brand-row { min-height: 92px; }

/* On the admin home only (navigation_header.html gates this on `lumen_home`), the sidebar drops
   its brand lockup: that page's banner carries the same mark and wordmark at 42px, ~180px away on
   nearly the same line, and two of them read as a duplicate rather than as branding. The row
   itself survives below xl because it holds the `close` glyph — the only sidebar control at that
   width. At xl the glyph is hidden, so the empty row goes with it. */
.lumen-brand-row.lumen-brand-row-bare { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 1280px) {
  .lumen-brand-row.lumen-brand-row-bare { display: none; }
  /* The row was also the sidebar's top spacing. Without it the search box sits flush under the
     4px brand band, clipped against the viewport edge. */
  #nav-sidebar-inner:has(.lumen-brand-row-bare) { padding-top: 40px; }
}

/* --- Admin clock: UK (server) over local ----------------------------------------------------
   Three columns — label · time · offset — so both rows align on every part instead of ragging.
   Only the 700 weight of Space Mono ships, so hierarchy is carried by SIZE and COLOUR: the UK
   time is the one large, dark element; its label, the local row and the offset step down to a
   muted ink. Digits explicitly reset `letter-spacing` — the banner's eyebrow row tracks at 1.8px
   and inheriting that turns a time into a spread-out row of characters. */
.lumen-clock {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: "Space Mono", ui-monospace, monospace;
  line-height: 1.25; letter-spacing: normal; text-transform: none;
}
/* The rows are their own grid so the drift note — which is wider than they are — cannot stretch
   their columns apart on the rare occasion it appears. */
.lumen-clock-rows {
  display: grid; grid-template-columns: auto auto auto;
  column-gap: .5em; row-gap: .1rem; align-items: baseline;
}
/* The line wrapper exists to colour a row's parts together; display:contents lets its three
   children sit in the grid's three columns instead of the wrapper occupying one cell. */
.lumen-clock-line { display: contents; }
.lumen-clock-time { font-variant-numeric: tabular-nums; letter-spacing: normal; }
.lumen-clock-label,
.lumen-clock-offset { text-transform: uppercase; letter-spacing: .1em; }
.lumen-clock-uk .lumen-clock-time { font-size: 1.35em; }
.lumen-clock-drift { text-transform: none; letter-spacing: normal; margin-top: .2rem; }
.lumen-clock-drift[hidden] { display: none; }

/* Sidebar variant: stacked under the lockup INSIDE the brand row, so it reads as part of the brand
   block rather than as the first nav item. The row's own px-3 + px-3 puts it on the 24px content
   rail — no padding of its own. */
/* padding-block, not a taller min-height on the row: the row centres its content, so this keeps the
   air above the lockup and below the clock equal without re-tuning .lumen-brand-row for both cases. */
.lumen-brand-stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: .85rem; padding-block: .85rem; }
.lumen-brand-stack > * { flex: none; max-width: 100%; }
/* Indented to the wordmark, not the mark: the lockup is the 48px logo (.lumen-logo) plus site_icon's
   gap-3, so the clock hangs under "Lumen" rather than under the circle. Written as that sum so it
   follows the logo if it is ever resized. */
.lumen-clock-sidebar {
  font-size: .6875rem;  /* 11px — the admin's small-text floor */
  margin-left: calc(48px + .75rem);
}
/* The brand hot pink on the time itself — the one coloured element, matching the mark's dot and the
   active nav link. Chosen for brightness over the -d ramp: it is 3.2:1 on the light sidebar, under
   the 4.5:1 AA bar for text this size (7.6:1 in dark). Deliberate for a glanceable clock in a
   single-operator console; do not copy this pink onto light-mode text that has to be read. */
.lumen-clock-sidebar .lumen-clock-uk .lumen-clock-time { color: #ff2d8e; }
.lumen-clock-sidebar .lumen-clock-uk .lumen-clock-label,
.lumen-clock-sidebar .lumen-clock-local { color: var(--color-base-500); }
.lumen-clock-sidebar .lumen-clock-drift { color: #8a5410; }
.dark .lumen-clock-sidebar .lumen-clock-uk .lumen-clock-label,
.dark .lumen-clock-sidebar .lumen-clock-local { color: var(--color-base-400); }
.dark .lumen-clock-sidebar .lumen-clock-drift { color: #facc15; }

/* The brand band is a hard 4px edge at y=0 with no margin of its own, so whatever comes first in
   the sidebar reads as hanging off it. A little air at the top lets the band be a rule rather
   than a ceiling. */
#nav-sidebar-inner { padding-top: 16px; }

/* Brand gradient band across the TOP of the nav — replaces the removed dashboard hero band, so the
   brand mark leads the primary navigation on every page. The full teal→azure→violet→pink palette, left
   to right; static (no ambient motion competing with the health cards' live-run poll). */
#nav-sidebar-inner { position: relative; }
#nav-sidebar-inner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 5; pointer-events: none;
  background-image: linear-gradient(90deg, #00bfae, #2d9cff, #7a5bff, #ff2d8e);
}

/* --- Sidebar grouping: clearer section-header → item hierarchy -------------------------------------
   Items previously sat at nearly the header's indent, so groups were hard to scan. Indent items further
   under their (bold) section header and give each group a little more air, so the header → item step
   reads at a glance. */
#nav-sidebar-inner ol { padding-left: 2.25rem; }
#nav-sidebar-apps > div { margin-bottom: .7rem; }
/* Tool links (Graph console, Companies House import) are the only icon-bearing items; a hairline sets
   them apart from the plain model-table links, so icons stay consistent within each group (all in the
   tools group carry one, none in the tables group do) rather than a lone icon among its siblings. */
.nav-tools-sep { list-style: none; height: 1px; margin: .35rem .75rem .35rem 0; background: var(--color-base-200); }
.dark .nav-tools-sep { background: var(--color-base-800); }

/* Explainer panels — the design-system's generous panel radius (18px "row"). The panel's bg/border
   already track the cool base ramp; the inner .lex-details card keeps its own styling in
   lumen-explainer.css. Overrides Unfold's `rounded-default` (this sheet loads after the prebuilt CSS). */
.lex-panel { border-radius: 18px; }

/* Licence reference — the "Excerpt + link only — body is never stored" group caption as a pink pill,
   pairing with the teal "may store" lane so the two licence groups read as the two Lumen brand
   colours. Pink #c71e70 keeps AA on the cool surface. The chip <span> is added in
   templates/admin/_licence_reference.html; the .lex-tcap--store caption stays plain teal text. The
   two-class selector out-specifies lumen-explainer.css's .lex-tcap--excerpt colour, so no edit there. */
.lex-tcap--excerpt .lex-tcap-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 9999px;
  color: #c71e70;
  background: color-mix(in srgb, #c71e70 12%, transparent);
}
.dark .lex-tcap--excerpt .lex-tcap-chip {
  color: #ff6fd8;
  background: color-mix(in srgb, #ff6fd8 16%, transparent);
}

/* --- Pagination ------------------------------------------------------------------------------
   The overridden pagination_default.html adds Prev/Next + a page range + a "Page X / N · count"
   line (stock was bare numbers, no prev/next, ellipsis-as-broken-link). These sit in Unfold's flex
   pagination bar (admin/pagination.html: flex flex-row grow items-center). */
.lumen-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.lumen-page-nav,
.lumen-page-nums a,
.lumen-page-current,
.lumen-page-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 .6rem; border-radius: 9999px;
  font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none;
  color: var(--lm-ink2);
}
.lumen-page-nums { display: inline-flex; align-items: center; gap: .15rem; margin: 0 .35rem; }
.lumen-page-nums a:hover,
.lumen-page-nav:hover {
  background: color-mix(in srgb, var(--color-primary-600) 12%, transparent);
  color: var(--color-primary-700);
}
.lumen-page-current { background: var(--color-primary-600); color: #fff; }
.lumen-page-nav.is-disabled { opacity: .4; pointer-events: none; }
.lumen-page-ellipsis { color: var(--lm-ink3); pointer-events: none; min-width: 24px; }
.lumen-page-count { margin-left: auto; padding-left: 1rem; color: var(--color-base-500); font-size: .8125rem; white-space: nowrap; }
.dark .lumen-page-nav,
.dark .lumen-page-nums a,
.dark .lumen-page-ellipsis { color: var(--color-base-400); }

/* --- Changelist: actionable links + row hover ------------------------------------------------
   Cell contents are Python-rendered (Unfold's items_for_result), so link styling goes via selectors.
   The first-column detail link ships with only .text-important (bold); the graph "Explore →" cell
   uses .lex-link (undefined until now). Both → teal + hover underline; rows get a soft teal hover. */
#result_list a.text-important { color: var(--color-primary-600); }
#result_list a.text-important:hover { text-decoration: underline; }
.dark #result_list a.text-important { color: var(--color-primary-300); }
.lex-link { color: var(--color-primary-700); text-decoration: none; }
.lex-link:hover { text-decoration: underline; }
.dark .lex-link { color: var(--color-primary-300); }
#result_list tbody tr.data-row:hover { background: color-mix(in srgb, var(--color-primary-500) 5%, transparent); }

/* --- Detail form: tighter rhythm + tamed empty textareas ------------------------------------- */
#content-main .form-field, #content-main .form-checkbox { margin-bottom: .65rem; }  /* Unfold ships mb-4 */
/* Auto-size textareas to content — kills the tall empty "Attributes {}" boxes. field-sizing is
   progressive (Chromium 123+); the min-height floor keeps older engines sane, max-height caps a body. */
#content-main form textarea { min-height: 4.5rem; max-height: 60vh; field-sizing: content; }
#content-main .readonly a { color: var(--color-primary-700); }
.dark #content-main .readonly a { color: var(--color-primary-300); }
#content-main fieldset.module { border-radius: var(--lm-r-row); }