/*
 * Hand-written CSS for the custom admin pages.
 *
 * Filament ships a compiled stylesheet containing only the utilities its own
 * components use — arbitrary Tailwind classes are NOT in it, and Node 18 on
 * this box is too old to compile a Filament theme. So these pages use their
 * own `wl-` namespace instead.
 */

.wl-stack { display: flex; flex-direction: column; gap: 1.75rem; }

.wl-note {
    border-radius: .75rem;
    border: 1px solid rgb(251 191 36 / .35);
    background: rgb(254 252 232);
    padding: 1rem 1.15rem;
    font-size: .875rem;
    line-height: 1.55;
    color: rgb(120 53 15);
}
.wl-note strong { display: block; margin-bottom: .2rem; font-weight: 650; }

.wl-h {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: rgb(3 7 18);
}
.wl-sub { margin-top: .3rem; font-size: .8125rem; color: rgb(107 114 128); }

.wl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .wl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wl-stat {
    border-radius: .75rem;
    background: #fff;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04);
    ring: 1px;
    border: 1px solid rgb(0 0 0 / .06);
}
.wl-stat-label {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: rgb(107 114 128);
}
.wl-stat-value {
    margin-top: .3rem; font-size: 1.65rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: rgb(3 7 18); line-height: 1.1;
}
.wl-stat-foot { margin-top: .15rem; font-size: .75rem; color: rgb(156 163 175); }

.wl-tablewrap {
    overflow-x: auto;
    border-radius: .75rem;
    background: #fff;
    border: 1px solid rgb(0 0 0 / .06);
    box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

.wl-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.wl-table th, .wl-table td { padding: .7rem 1rem; text-align: left; white-space: nowrap; }
.wl-table thead th {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: rgb(107 114 128);
    border-bottom: 1px solid rgb(0 0 0 / .08);
    background: rgb(249 250 251);
}
.wl-table tbody tr + tr td { border-top: 1px solid rgb(0 0 0 / .05); }
.wl-table tbody tr:hover td { background: rgb(249 250 251); }
.wl-table td.wl-num, .wl-table th.wl-num { text-align: right; font-variant-numeric: tabular-nums; }
.wl-table tfoot td {
    border-top: 2px solid rgb(0 0 0 / .12);
    font-weight: 650; font-variant-numeric: tabular-nums;
}
.wl-name { font-weight: 600; color: rgb(3 7 18); }
.wl-meta { display: block; font-size: .75rem; color: rgb(156 163 175); font-weight: 400; }
.wl-wrap { white-space: normal; max-width: 26rem; }

.wl-bar { height: .4rem; width: 8rem; border-radius: 999px; background: rgb(229 231 235); overflow: hidden; }
.wl-bar > i { display: block; height: 100%; border-radius: 999px; background: #A81D45; }
.wl-barrow { display: flex; align-items: center; gap: .6rem; }

.wl-badge {
    display: inline-block; border-radius: 999px; padding: .15rem .55rem;
    font-size: .6875rem; font-weight: 650; letter-spacing: .01em;
}
.wl-badge--t1 { background: rgb(220 252 231); color: rgb(22 101 52); }
.wl-badge--t2 { background: rgb(219 234 254); color: rgb(30 64 175); }
.wl-badge--t3 { background: rgb(254 243 199); color: rgb(146 64 14); }
.wl-badge--rej { background: rgb(254 226 226); color: rgb(153 27 27); }
.wl-badge--none { background: rgb(243 244 246); color: rgb(107 114 128); }

.wl-gap-lg { color: #A81D45; font-weight: 700; }
.wl-gap-md { color: rgb(180 83 9); font-weight: 650; }
.wl-gap-sm { color: rgb(107 114 128); }
.wl-row-alert td { background: rgb(255 241 242) !important; }

.wl-delta { display: block; font-size: .6875rem; font-weight: 500; }
.wl-delta--up { color: rgb(21 128 61); }
.wl-delta--down { color: #A81D45; }

.wl-empty { font-size: .875rem; color: rgb(107 114 128); }

/* Venture detail */
.wl-detail { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .wl-detail { grid-template-columns: 3fr 2fr; align-items: start; } }

.wl-panel {
    border-radius: .75rem; background: #fff; padding: 1.35rem 1.5rem;
    border: 1px solid rgb(0 0 0 / .06); box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.wl-panel + .wl-panel { margin-top: 1.25rem; }
.wl-eyebrow {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: rgb(107 114 128);
}
.wl-prose {
    margin-top: .6rem; font-size: .9375rem; line-height: 1.65;
    color: rgb(31 41 55); white-space: pre-line; overflow-wrap: anywhere;
}
.wl-prose--muted { color: rgb(156 163 175); font-style: italic; }

.wl-kv { margin-top: .75rem; display: grid; gap: .4rem .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wl-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wl-kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed rgb(0 0 0 / .07); }
.wl-kv dt { font-size: .75rem; color: rgb(107 114 128); }
.wl-kv dd { font-size: .8125rem; text-align: right; color: rgb(17 24 39); overflow-wrap: anywhere; }
.wl-kv dd.wl-unset { color: rgb(156 163 175); font-style: italic; }

.wl-flag {
    display: block; margin-top: .4rem; font-size: .8125rem; color: #A81D45;
}

.wl-scorelist { margin-top: .5rem; }
.wl-scorelist > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .4rem 0; border-bottom: 1px solid rgb(0 0 0 / .05); font-size: .8125rem;
}
.wl-scorelist .wl-mark { font-variant-numeric: tabular-nums; font-weight: 650; }
.wl-scorelist .wl-of { color: rgb(156 163 175); font-weight: 400; }
.wl-total { display: flex; justify-content: space-between; padding-top: .7rem; margin-top: .3rem; border-top: 2px solid rgb(0 0 0 / .12); font-weight: 700; }

/* Brand lockup in the panel topbar / sidebar */
/* Both logos are dark ink on transparency, so on the dark panel they vanish.
   Each ships a light variant; only one of the pair is ever displayed. */
.wl-brand .wl-logo-dark, .wl-sparklab .wl-logo-dark { display: none; }
.dark .wl-logo-light { display: none; }
.dark .wl-logo-dark { display: block; }

.wl-brand { display: flex; align-items: center; gap: .6rem; }
.wl-brand img { height: 1.5rem; width: auto; display: block; }
.wl-brand span {
    padding-left: .6rem;
    border-left: 1px solid rgb(0 0 0 / .12);
    font-size: .8125rem; font-weight: 650; letter-spacing: -.01em;
    color: rgb(3 7 18); white-space: nowrap;
}
.dark .wl-brand span { color: #fff; border-left-color: rgb(255 255 255 / .18); }

/* "a product of Spark Lab", top right of the panel */
/* No auto margin: that stole the spacer Filament uses to push the user
   menu right, leaving the avatar stranded mid-topbar. */
.wl-sparklab { display: flex; align-items: flex-end; gap: .5rem; padding-right: 1rem; }
/* Bottom-aligned: the image's lower edge is the wordmark's baseline, and the
   caption is dropped by its own descender so the two baselines meet. */
.wl-sparklab span { font-size: .6875rem; line-height: 1; color: rgb(107 114 128); white-space: nowrap; transform: translateY(2px); }
.wl-sparklab img { height: 1.25rem; width: auto; display: block; }
.dark .wl-sparklab span { color: rgb(156 163 175); }
@media (max-width: 640px) { .wl-sparklab span { display: none; } }

/* A venture shown under its founder's name because none was collected. */
.wl-fallback { font-style: italic; color: rgb(107 114 128); }

/* ---------------------------------------------------------------------------
   Reference readings — the tab strip shared by rubric v3 and Stage 0, and the
   Stage 0 surface itself.
   --------------------------------------------------------------------------- */

.wl-tabs { display: flex; gap: .25rem; border-bottom: 1px solid rgb(0 0 0 / .1); margin-bottom: .25rem; }
.dark .wl-tabs { border-bottom-color: rgb(255 255 255 / .12); }

.wl-tab {
    padding: .5rem .9rem; margin-bottom: -1px;
    font-size: .8125rem; font-weight: 600; letter-spacing: -.01em;
    color: rgb(107 114 128); text-decoration: none;
    border-bottom: 2px solid transparent;
}
.wl-tab:hover { color: rgb(31 41 55); }
.dark .wl-tab:hover { color: rgb(229 231 235); }

.wl-tab--on { color: #A81D45; border-bottom-color: #A81D45; }
.dark .wl-tab--on { color: #F0A0B8; border-bottom-color: #F0A0B8; }

/* The rubric itself, collapsed by default: a reader checks a call against the
   rule without leaving the table or opening the source document. */
.wl-rubric summary {
    cursor: pointer; font-size: .8125rem; font-weight: 650;
    letter-spacing: -.01em; color: rgb(31 41 55);
}
.dark .wl-rubric summary { color: rgb(229 231 235); }
.wl-rubric-h {
    margin-top: 1rem; font-size: .8125rem; font-weight: 650;
    letter-spacing: -.01em; color: rgb(31 41 55);
}
.dark .wl-rubric-h { color: rgb(229 231 235); }

/* No classification without a supporting quote — so the quote is a column. */
.wl-quote { font-style: italic; color: rgb(75 85 99); }
.dark .wl-quote { color: rgb(156 163 175); }

/* ---------------------------------------------------------------------------
   Dark theme.

   The rules above were written light-only, so every surface here was a white
   slab with near-black text on Filament's dark panel. This block is purely
   additive — it overrides colour, never layout, so light mode cannot regress.

   Surfaces are translucent white rather than a fixed hex: that way they sit
   correctly on whatever background Filament's dark palette actually paints,
   instead of guessing at it and banding against it.

   Anything added below with a colour needs a counterpart here. There is a test
   that fails if one is missed.
   --------------------------------------------------------------------------- */

.dark .wl-h { color: rgb(244 244 245); }
.dark .wl-sub { color: rgb(161 161 170); }
.dark .wl-empty { color: rgb(161 161 170); }
.dark .wl-eyebrow { color: rgb(161 161 170); }
.dark .wl-fallback { color: rgb(161 161 170); }

/* Cards, panels and the table shell */
.dark .wl-stat,
.dark .wl-panel,
.dark .wl-tablewrap {
    background: rgb(255 255 255 / .04);
    border-color: rgb(255 255 255 / .08);
    box-shadow: none;
}
.dark .wl-stat-label { color: rgb(161 161 170); }
.dark .wl-stat-value { color: rgb(244 244 245); }
.dark .wl-stat-foot { color: rgb(113 113 122); }

/* The caveat note: amber on cream is unreadable inverted, so it becomes a
   tinted panel rather than a bright slab. */
.dark .wl-note {
    background: rgb(120 53 15 / .22);
    border-color: rgb(251 191 36 / .28);
    color: rgb(253 230 138);
}

.dark .wl-table thead th {
    color: rgb(161 161 170);
    background: rgb(255 255 255 / .03);
    border-bottom-color: rgb(255 255 255 / .1);
}
.dark .wl-table tbody tr + tr td { border-top-color: rgb(255 255 255 / .07); }
.dark .wl-table tbody tr:hover td { background: rgb(255 255 255 / .04); }
.dark .wl-table tfoot td { border-top-color: rgb(255 255 255 / .16); }
.dark .wl-name { color: rgb(244 244 245); }
.dark .wl-meta { color: rgb(161 161 170); }

.wl-input {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    font: inherit;
    line-height: 1.45;
    color: rgb(24 24 27);
    background: rgb(255 255 255);
    border: 1px solid rgb(212 212 216);
    border-radius: 0.375rem;
    resize: vertical;
}
.wl-input::placeholder { color: rgb(161 161 170); }
.wl-input:focus { outline: 2px solid rgb(159 18 57); outline-offset: -1px; border-color: rgb(159 18 57); }

.dark .wl-prose { color: rgb(228 228 231); }
.dark .wl-prose--muted { color: rgb(161 161 170); }

.dark .wl-kv > div { border-bottom-color: rgb(255 255 255 / .09); }
.dark .wl-kv dt { color: rgb(161 161 170); }
.dark .wl-kv dd { color: rgb(228 228 231); }
.dark .wl-kv dd.wl-unset { color: rgb(113 113 122); }

.dark .wl-scorelist > div { border-bottom-color: rgb(255 255 255 / .07); }
.dark .wl-scorelist .wl-of { color: rgb(113 113 122); }
.dark .wl-total { border-top-color: rgb(255 255 255 / .16); }

.dark .wl-bar { background: rgb(255 255 255 / .1); }

/* Tier badges: the light fills are near-white and glare on a dark panel.
   Tinted grounds with a light foreground keep the same colour coding. */
.dark .wl-badge--t1 { background: rgb(22 101 52 / .3); color: rgb(134 239 172); }
.dark .wl-badge--t2 { background: rgb(30 64 175 / .3); color: rgb(147 197 253); }
.dark .wl-badge--t3 { background: rgb(146 64 14 / .3); color: rgb(252 211 77); }
.dark .wl-badge--rej { background: rgb(153 27 27 / .3); color: rgb(252 165 165); }
.dark .wl-badge--none { background: rgb(255 255 255 / .07); color: rgb(161 161 170); }

/* The brand crimson fails contrast on a dark ground; lift it the same way the
   active tab does. */
.dark .wl-gap-lg { color: #F0A0B8; }
.dark .wl-gap-md { color: rgb(252 211 77); }
.dark .wl-gap-sm { color: rgb(161 161 170); }
.dark .wl-flag { color: #F0A0B8; }
.dark .wl-delta--up { color: rgb(134 239 172); }
.dark .wl-delta--down { color: #F0A0B8; }

/* A judge and the reference landing in different tiers — the row that wants
   a second look. Kept as a tint, not the light rose wash. */
.dark .wl-row-alert td { background: rgb(159 18 57 / .2) !important; }

/* Selection overview widget.
   Four tier cards need their own column count: .wl-grid is three-up, which
   would orphan Reject onto its own row. Geometry only. */
.wl-grid--4 { margin-top: 1rem; }
@media (min-width: 640px) { .wl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wl-spaced { margin-top: 1.5rem; }

/* An inline gloss beside a label — distinct from .wl-note, which is the
   amber caveat callout and far too loud for this. */
.wl-hint { display: block; font-size: .75rem; color: rgb(107 114 128); margin-top: .1rem; }
.dark .wl-hint { color: rgb(113 113 122); }

/* Intake page: file picker, buttons, and the inline validation line. */
.wl-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.wl-btn {
    border-radius: .5rem; padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
    background: rgb(168 29 69); color: #fff; border: 1px solid rgb(168 29 69);
    cursor: pointer;
}
.wl-btn:disabled { opacity: .5; cursor: not-allowed; }
.dark .wl-btn { background: rgb(190 40 82); border-color: rgb(190 40 82); color: rgb(255 241 245); }

.wl-file { font-size: .8125rem; color: rgb(55 65 81); }
.dark .wl-file { color: rgb(212 212 216); }

.wl-warn { color: rgb(159 18 57); }
.dark .wl-warn { color: rgb(253 164 175); }

/* A secondary button: same shape, no fill, so the pair does not read as two
   equally weighted actions. */
.wl-btn--quiet {
    background: transparent; color: rgb(168 29 69);
    border-color: rgb(168 29 69 / .4); text-decoration: none;
    display: inline-flex; align-items: center;
}
.dark .wl-btn--quiet { background: transparent; color: rgb(253 164 175); border-color: rgb(253 164 175 / .35); }


/* ==========================================================================
   Live selection dashboard
   --------------------------------------------------------------------------
   An instrument, not a poster. The bar carries the shape of the round, the
   tier cards carry the result, and everything else is set quieter on purpose.

   Tier colours arrive as inline custom properties (--c light, --cd dark) from
   config('composite.bands') — they belong to the BAND, not to the stylesheet,
   so the bar, the cards and the matrix cannot drift apart.
   ========================================================================== */

.wl-dash {
    border-radius: .9rem;
    background: #fff;
    border: 1px solid rgb(0 0 0 / .07);
    box-shadow: 0 1px 2px rgb(0 0 0 / .04);
    padding: 1.6rem 1.75rem 1.9rem;
    color: rgb(3 7 18);
}
.dark .wl-dash { background: rgb(24 24 27); border-color: rgb(255 255 255 / .08); color: rgb(244 244 245); }

.wl-dash-head {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-start; justify-content: space-between;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid rgb(0 0 0 / .07);
}
.dark .wl-dash-head { border-bottom-color: rgb(255 255 255 / .08); }

.wl-dash-eyebrow {
    font-size: .625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .13em; color: rgb(168 29 69);
}
.dark .wl-dash-eyebrow { color: rgb(240 92 134); }

.wl-dash-title {
    margin: .3rem 0 0; font-size: 1.4rem; font-weight: 680;
    letter-spacing: -.022em; line-height: 1.15; color: rgb(3 7 18);
}
.dark .wl-dash-title { color: rgb(250 250 250); }

.wl-dash-meta { margin: .45rem 0 0; font-size: .8125rem; line-height: 1.55; color: rgb(107 114 128); max-width: 80ch; }
.dark .wl-dash-meta { color: rgb(161 161 170); }

.wl-dash-sep { color: rgb(209 213 219); padding: 0 .15rem; }
.dark .wl-dash-sep { color: rgb(82 82 91); }

.wl-dash-tools { display: flex; gap: .5rem; flex-wrap: wrap; }

/* -- the composition bar ------------------------------------------------- */

.wl-composition {
    margin-top: 1.5rem;
    display: flex; gap: 2px; height: .7rem; width: 100%;
    background: transparent;
}
.dark .wl-composition { background: transparent; }

.wl-composition-seg {
    flex: 0 0 var(--w); min-width: 2px; border-radius: 2px;
    background: var(--c);
    transform-origin: left center;
    animation: wl-composition-in .55s cubic-bezier(.2, .8, .2, 1) both;
}
.dark .wl-composition-seg { background: var(--cd); }

.wl-composition-seg:nth-child(2) { animation-delay: .04s; }
.wl-composition-seg:nth-child(3) { animation-delay: .08s; }
.wl-composition-seg:nth-child(4) { animation-delay: .12s; }
.wl-composition-seg:nth-child(5) { animation-delay: .16s; }
.wl-composition-seg:nth-child(6) { animation-delay: .20s; }

@keyframes wl-composition-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wl-composition-seg { animation: none; } }

.wl-legend {
    margin: .75rem 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: .3rem 1.35rem;
    font-size: .75rem; color: rgb(107 114 128);
}
.dark .wl-legend { color: rgb(161 161 170); }

.wl-legend li { display: inline-flex; align-items: baseline; gap: .4rem; }
.wl-legend b { font-weight: 660; font-variant-numeric: tabular-nums; color: rgb(3 7 18); }
.dark .wl-legend b { color: rgb(244 244 245); }

.wl-legend-dot {
    width: .5rem; height: .5rem; border-radius: 2px;
    background: var(--c); align-self: center;
}
.dark .wl-legend-dot { background: var(--cd); }

.wl-legend-share { font-variant-numeric: tabular-nums; color: rgb(156 163 175); }
.dark .wl-legend-share { color: rgb(113 113 122); }

/* -- the result ---------------------------------------------------------- */

.wl-tiers {
    margin-top: 1.75rem;
    display: grid; gap: .85rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 820px) { .wl-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wl-tier {
    position: relative;
    padding: 1.1rem 1.25rem 1.15rem 1.5rem;
    border-radius: .6rem;
    background: rgb(250 250 249);
    border: 1px solid rgb(0 0 0 / .06);
    border-left: 3px solid var(--c);
}
.dark .wl-tier { background: rgb(39 39 42); border-color: rgb(255 255 255 / .07); border-left-color: var(--cd); }

.wl-tier-name {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--c);
}
.dark .wl-tier-name { color: var(--cd); }

.wl-tier-count {
    margin-top: .2rem; font-size: 2.5rem; font-weight: 700; line-height: 1;
    letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: rgb(3 7 18);
}
.dark .wl-tier-count { color: rgb(250 250 250); }

.wl-tier-share { margin-top: .3rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: rgb(107 114 128); }
.dark .wl-tier-share { color: rgb(161 161 170); }

.wl-tier-foot {
    margin-top: .55rem; padding-top: .55rem; font-size: .6875rem; line-height: 1.45;
    color: rgb(140 146 156); border-top: 1px dashed rgb(0 0 0 / .09);
}
.dark .wl-tier-foot { color: rgb(113 113 122); border-top-color: rgb(255 255 255 / .1); }

/* -- context: framing, not result ---------------------------------------- */

.wl-context {
    margin-top: 1.35rem; padding-top: 1.15rem;
    border-top: 1px solid rgb(0 0 0 / .07);
    display: grid; gap: 1rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 820px) { .wl-context { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .wl-context { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dark .wl-context { border-top-color: rgb(255 255 255 / .08); }

/* min-width:0 lets a grid track shrink; without it a long single word like
   SUSTAINABILITY cannot wrap and runs straight over the next column's label. */
.wl-context-item { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.wl-context-value {
    font-size: 1.15rem; font-weight: 660; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: rgb(55 65 81);
}
.dark .wl-context-value { color: rgb(228 228 231); }

.wl-context-label {
    font-size: .6875rem; font-weight: 640; text-transform: uppercase;
    letter-spacing: .08em; color: rgb(107 114 128);
    overflow-wrap: anywhere; hyphens: auto;
}
.dark .wl-context-label { color: rgb(161 161 170); }

.wl-context-note { font-size: .6875rem; line-height: 1.4; color: rgb(156 163 175); }
.dark .wl-context-note { color: rgb(113 113 122); }

/* -- blocks -------------------------------------------------------------- */

.wl-block { margin-top: 2rem; }

.wl-block-title {
    margin: 0; font-size: .95rem; font-weight: 660;
    letter-spacing: -.012em; color: rgb(3 7 18);
}
.dark .wl-block-title { color: rgb(244 244 245); }

.wl-block-note { margin: .25rem 0 .9rem; font-size: .78125rem; line-height: 1.5; color: rgb(107 114 128); max-width: 70ch; }
.dark .wl-block-note { color: rgb(161 161 170); }

/* -- the matrix ---------------------------------------------------------- */

.wl-matrix {
    width: 100%; border-collapse: collapse; font-size: .8125rem;
    color: rgb(31 41 55);
}
.dark .wl-matrix { color: rgb(228 228 231); }

.wl-matrix thead th {
    padding: .5rem .75rem; text-align: right;
    font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: rgb(107 114 128); border-bottom: 1px solid rgb(0 0 0 / .12);
}
.dark .wl-matrix thead th { color: rgb(161 161 170); border-bottom-color: rgb(255 255 255 / .14); }

.wl-matrix thead th:first-child { text-align: left; }

.wl-matrix tbody th {
    padding: .7rem .75rem .7rem 0; text-align: left; font-weight: 600;
    color: rgb(31 41 55); border-bottom: 1px solid rgb(0 0 0 / .06);
    max-width: 27rem;
}
.dark .wl-matrix tbody th { color: rgb(228 228 231); border-bottom-color: rgb(255 255 255 / .07); }

.wl-matrix tbody td {
    padding: .7rem .75rem; text-align: right;
    font-variant-numeric: tabular-nums; font-weight: 620;
    border-bottom: 1px solid rgb(0 0 0 / .06);
}
.dark .wl-matrix tbody td { border-bottom-color: rgb(255 255 255 / .07); }

/* Shading is relative to its own ROW, so a row reads as a distribution across
   the tiers. ONE hue for every cell: the column header already says which
   tier it is, and shading by tier colour as well as by magnitude made a Tier
   1 cell of 5 look heavier than a Tier 2 cell of 7. */
.wl-matrix-cell {
    background: color-mix(in srgb, #9E1B42 calc(var(--fill) * 17%), transparent);
    color: rgb(31 41 55);
}
.dark .wl-matrix-cell { background: color-mix(in srgb, #F05C86 calc(var(--fill) * 26%), transparent); color: rgb(244 244 245); }

.wl-matrix-total {
    color: rgb(107 114 128); background: transparent;
    border-left: 1px solid rgb(0 0 0 / .08);
}
.dark .wl-matrix-total { color: rgb(161 161 170); background: transparent; border-left-color: rgb(255 255 255 / .1); }

/* -- reasons ------------------------------------------------------------- */

.wl-reasons { margin: 0; display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 820px) { .wl-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }

.wl-reasons > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .55rem 0; border-bottom: 1px dashed rgb(0 0 0 / .09);
    color: rgb(31 41 55);
}
.dark .wl-reasons > div { border-bottom-color: rgb(255 255 255 / .1); color: rgb(228 228 231); }

.wl-reasons dt { font-size: .8125rem; font-weight: 600; }
.wl-reasons dd { margin: 0; font-size: .9375rem; font-weight: 680; font-variant-numeric: tabular-nums; }

/*
 * The three-stage funnel.
 *
 * Every bar is drawn as a share of ALL applications, so the pool visibly
 * narrows down the page: the shape carries the story before a number is read,
 * the way .wl-composition does on the superseded dashboard.
 *
 * Three segment kinds, because a funnel has three fates and not two:
 *   out      — decided against, and gone
 *   through  — decided for, and carried to the next stage
 *   pending  — undecided, and still flowing. Drawn hollow: it is not a
 *              rejection, and colouring it as one would misread the pool.
 */

.wl-funnel { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.15rem; }

.wl-funnel-row { display: flex; flex-direction: column; gap: .45rem; }

.wl-funnel-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}

.wl-funnel-label {
    font-size: .6875rem; font-weight: 640; letter-spacing: .07em;
    text-transform: uppercase; color: rgb(107 114 128);
}
.dark .wl-funnel-label { color: rgb(161 161 170); }

.wl-funnel-n {
    font-size: 1.35rem; font-weight: 660; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; color: rgb(3 7 18);
}
.dark .wl-funnel-n { color: rgb(244 244 245); }
.wl-funnel-n small {
    margin-left: .4rem; font-size: .75rem; font-weight: 500;
    color: rgb(107 114 128);
}
.dark .wl-funnel-n small { color: rgb(161 161 170); }

.wl-funnel-track {
    display: flex; gap: 2px; height: 1.15rem; width: 100%;
    /* The full pool, faint, so a shortened bar is measured against 323 rather
       than floating in empty space. Without it the narrowing loses its anchor. */
    background: rgb(0 0 0 / .045);
    border-radius: 3px;
}
.dark .wl-funnel-track { background: rgb(255 255 255 / .05); }

.wl-funnel-seg {
    flex: 0 0 var(--w); min-width: 3px; border-radius: 3px;
    transform-origin: left center;
    animation: wl-funnel-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.wl-funnel-row:nth-child(2) .wl-funnel-seg { animation-delay: .06s; }
.wl-funnel-row:nth-child(3) .wl-funnel-seg { animation-delay: .12s; }
.wl-funnel-row:nth-child(4) .wl-funnel-seg { animation-delay: .18s; }

@keyframes wl-funnel-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wl-funnel-seg { animation: none; } }

.wl-funnel-seg--through { background: rgb(159 18 57); }
.dark .wl-funnel-seg--through { background: rgb(244 63 94); }

.wl-funnel-seg--out { background: rgb(212 212 216); }
.dark .wl-funnel-seg--out { background: rgb(63 63 70); }

.wl-funnel-seg--pending {
    /* Hatched, not hollow: three consecutive outlines read as nothing
       happening, but a texture reads as work in progress. */
    background: repeating-linear-gradient(
        -45deg,
        rgb(159 18 57 / .28) 0 5px,
        rgb(159 18 57 / .07) 5px 10px
    );
    box-shadow: inset 0 0 0 1px rgb(159 18 57 / .35);
}
.dark .wl-funnel-seg--pending {
    background: repeating-linear-gradient(
        -45deg,
        rgb(244 63 94 / .32) 0 5px,
        rgb(244 63 94 / .08) 5px 10px
    );
    box-shadow: inset 0 0 0 1px rgb(244 63 94 / .4);
}

.wl-funnel-note {
    display: flex; flex-wrap: wrap; gap: .25rem 1.1rem;
    font-size: .75rem; color: rgb(107 114 128);
}
.dark .wl-funnel-note { color: rgb(161 161 170); }
.wl-funnel-note b {
    font-weight: 640; font-variant-numeric: tabular-nums; color: rgb(3 7 18);
}
.dark .wl-funnel-note b { color: rgb(244 244 245); }
.wl-funnel-note a { color: rgb(159 18 57); text-decoration: underline; text-underline-offset: 2px; }
.dark .wl-funnel-note a { color: rgb(244 63 94); }

/* -- panel progress, judge by judge -------------------------------------- */

.wl-panel { margin-top: .8rem; display: flex; flex-direction: column; gap: .4rem; }

.wl-panel-row { display: flex; align-items: center; gap: .75rem; }

.wl-panel-name {
    flex: 0 0 8.5rem; min-width: 0; font-size: .75rem; font-weight: 600;
    color: rgb(55 65 81); overflow-wrap: anywhere;
}
.dark .wl-panel-name { color: rgb(212 212 216); }

.wl-panel-track {
    flex: 1 1 auto; height: .3rem; border-radius: 999px;
    background: rgb(0 0 0 / .07); overflow: hidden;
}
.dark .wl-panel-track { background: rgb(255 255 255 / .1); }

.wl-panel-fill {
    display: block; width: var(--w, 0%); height: 100%; border-radius: 999px;
    background: rgb(159 18 57);
}
.dark .wl-panel-fill { background: rgb(225 29 72); }

.wl-panel-n {
    flex: 0 0 auto; font-size: .75rem; font-weight: 640;
    font-variant-numeric: tabular-nums; color: rgb(3 7 18);
}
.dark .wl-panel-n { color: rgb(244 244 245); }
.wl-panel-n small { font-weight: 500; color: rgb(156 163 175); }
.dark .wl-panel-n small { color: rgb(113 113 122); }

/* Tiers before anyone has scored: three places set, none filled. */
.wl-ghosts { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wl-ghost {
    border-radius: .75rem; padding: 1rem 1.1rem;
    border: 1.5px dashed rgb(0 0 0 / .12);
    background: transparent;
}
.dark .wl-ghost { border-color: rgb(255 255 255 / .14); }

.wl-ghost-name {
    font-size: .6875rem; font-weight: 640; letter-spacing: .07em;
    text-transform: uppercase; color: rgb(161 161 170);
}
.dark .wl-ghost-name { color: rgb(113 113 122); }

.wl-ghost-dash {
    margin-top: .3rem; font-size: 1.5rem; font-weight: 660;
    color: rgb(212 212 216);
}
.dark .wl-ghost-dash { color: rgb(63 63 70); }

/* The reason a card stopped. Set apart from the applicant's own words: it is
   our verdict on her application, not part of it. */
.wl-stopped {
    border-left: 3px solid rgb(212 212 216);
    padding-left: .9rem;
}
.dark .wl-stopped { border-left-color: rgb(63 63 70); }

.dark .wl-input {
    color: rgb(228 228 231);
    background: rgb(39 39 42);
    border-color: rgb(63 63 70);
}
.dark .wl-input::placeholder { color: rgb(113 113 122); }
.dark .wl-input:focus { outline-color: rgb(244 63 94); border-color: rgb(244 63 94); }

/* Paging between applications. Geometry and opacity only — no colour, so it
   needs no dark counterpart and cannot drift between the two themes. */
.wl-pager { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.wl-pager-end { opacity: .45; pointer-events: none; }

/* Application funnel strip on the dashboard: one card per step, arrows between. */
/* Columns follow the panel's own width, not the window's: the dashboard sets two
   panels side by side, and eight forced columns crushed each label to one word a line. */
.wl-steps { margin-top: 1.25rem; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); list-style: none; padding: 0; }
.wl-step { position: relative; padding: .8rem .85rem; border-radius: .6rem; border: 1px solid rgb(0 0 0 / .08); background: rgb(255 255 255); }
.dark .wl-step { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); }
.wl-step-n { font-size: 1.6rem; font-weight: 650; line-height: 1.1; color: rgb(159 18 57); font-variant-numeric: tabular-nums; }
.dark .wl-step-n { color: rgb(244 63 94); }
.wl-step-label { margin-top: .3rem; font-size: .78rem; font-weight: 600; color: rgb(17 24 39); }
.dark .wl-step-label { color: rgb(228 228 231); }
.wl-step-rate { margin-top: .25rem; font-size: .7rem; color: rgb(107 114 128); }
.dark .wl-step-rate { color: rgb(161 161 170); }
.wl-step-note { margin-top: .25rem; font-size: .7rem; font-style: italic; color: rgb(107 114 128); }
.dark .wl-step-note { color: rgb(161 161 170); }

.wl-link { color: rgb(159 18 57); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.dark .wl-link { color: rgb(244 63 94); }

/* ==========================================================================
   Selection journey (App\Filament\Pages\SelectionJourney)
   One stream narrows down the left edge: plum while in the running, teal once
   scored at the final, coral for what peeled away, dashed for the steps ahead.
   ========================================================================== */

.wl-jr { display: grid; gap: 1.75rem; max-width: 72rem; }

.wl-jr-title { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #4A2E3D; font-variant-numeric: tabular-nums; }
.dark .wl-jr-title { color: rgb(244 244 245); }
.wl-jr-title--sm { font-size: 1.2rem; }

.wl-jr-lede { margin: .5rem 0 0; max-width: 72ch; font-size: .875rem; line-height: 1.6; color: rgb(87 83 78); }
.dark .wl-jr-lede { color: rgb(161 161 170); }

.wl-jr-figure {
    margin: 0; padding: 1.25rem 1rem .5rem; border-radius: .75rem;
    background: #FBF6F0; border: 1px solid #E0D3C4;
    overflow-x: auto;
}
.dark .wl-jr-figure { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .09); }
.wl-jr-svg { display: block; width: 100%; min-width: 34rem; height: auto; font-family: inherit; }

.wl-jr-bar { fill: #4A2E3D; }
.dark .wl-jr-bar { fill: #C9A3B8; }
.wl-jr-bar--final { fill: #2C7A70; }
.dark .wl-jr-bar--final { fill: #5FBFB1; }
.wl-jr-keep { fill: #4A2E3D; fill-opacity: .16; }
.dark .wl-jr-keep { fill: #C9A3B8; fill-opacity: .16; }
.wl-jr-peel { fill: #E38470; fill-opacity: .85; }
.dark .wl-jr-peel { fill: #F09A86; fill-opacity: .8; }
.wl-jr-join { fill: #2C7A70; fill-opacity: .7; }
.dark .wl-jr-join { fill: #5FBFB1; fill-opacity: .7; }
.wl-jr-ahead { fill: none; stroke: #4A2E3D; stroke-opacity: .45; stroke-dasharray: 5 4; stroke-width: 1.25; }
.dark .wl-jr-ahead { stroke: #C9A3B8; }

.wl-jr-n { font-size: 19px; font-weight: 700; fill: #4A2E3D; font-variant-numeric: tabular-nums; }
.dark .wl-jr-n { fill: rgb(244 244 245); }
.wl-jr-label { font-size: 11.5px; fill: rgb(87 83 78); }
.dark .wl-jr-label { fill: rgb(161 161 170); }
.wl-jr-label--ahead { font-size: 12.5px; font-weight: 600; }
.wl-jr-drop { font-size: 12px; fill: #A4503E; }
.dark .wl-jr-drop { fill: #F09A86; }
.wl-jr-drop--ahead { fill: rgb(120 113 108); font-style: italic; }
.dark .wl-jr-drop--ahead { fill: rgb(113 113 122); }
.wl-jr-in { font-size: 12px; fill: #2C7A70; }
.dark .wl-jr-in { fill: #5FBFB1; }

.wl-jr-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.wl-jr-stage { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .9rem; padding: .95rem 0; border-top: 1px solid #E0D3C4; }
.dark .wl-jr-stage { border-top-color: rgb(255 255 255 / .08); }
.wl-jr-num {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; color: #fff; background: #4A2E3D; font-variant-numeric: tabular-nums;
}
.dark .wl-jr-num { color: rgb(24 24 27); background: #C9A3B8; }
.wl-jr-stage--ahead .wl-jr-num { background: transparent; color: #4A2E3D; border: 1.5px dashed #4A2E3D; }
.dark .wl-jr-stage--ahead .wl-jr-num { color: #C9A3B8; border-color: #C9A3B8; background: transparent; }
.wl-jr-stage-name { margin: .2rem 0 0; font-size: .95rem; font-weight: 650; color: rgb(28 25 23); display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.dark .wl-jr-stage-name { color: rgb(244 244 245); }
.wl-jr-stage-count { font-size: .95rem; font-weight: 700; color: #4A2E3D; font-variant-numeric: tabular-nums; }
.dark .wl-jr-stage-count { color: #C9A3B8; }
.wl-jr-stage-rule { margin: .3rem 0 0; max-width: 72ch; font-size: .85rem; line-height: 1.55; color: rgb(87 83 78); }
.dark .wl-jr-stage-rule { color: rgb(161 161 170); }
.wl-jr-stage-flow { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wl-jr-chip { font-size: .75rem; line-height: 1.3; padding: .2rem .55rem; border-radius: 999px; }
.wl-jr-chip--out { background: #FBE6E0; color: #8A3B2C; }
.dark .wl-jr-chip--out { background: rgb(227 132 112 / .16); color: #F4B3A5; }
.wl-jr-chip--in { background: #DDEFEC; color: #1F5A52; }
.dark .wl-jr-chip--in { background: rgb(95 191 177 / .16); color: #8FD6CB; }
.wl-jr-stage-link { display: inline-block; margin-top: .45rem; font-size: .8rem; }

.wl-jr-pools { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 1024px) { .wl-jr-pools { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.wl-jr-caption { caption-side: top; text-align: left; padding: .7rem .9rem; font-size: .85rem; font-weight: 650; color: #4A2E3D; }
.dark .wl-jr-caption { color: #C9A3B8; }

.wl-jr-method { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: .6rem; max-width: 80ch; font-size: .875rem; line-height: 1.6; color: rgb(68 64 60); }
.dark .wl-jr-method { color: rgb(212 212 216); }
.wl-jr-method strong { color: #4A2E3D; }
.dark .wl-jr-method strong { color: #C9A3B8; }
@media (min-width: 1024px) { .wl-jr-pools--method { grid-template-columns: minmax(0, 1fr); } }