/* Finperiti.Components.Ui, one stylesheet for every component. Link once: _content/Finperiti.Components.Ui/finperiti-ui.css. Themeable with --fui-* properties. */
.fui-cp { position: relative; display: inline-block; max-width: 100%; }
.fui-cp-swatch { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .6rem; font: inherit; cursor: pointer; border-radius: 6px;
    border: 1px solid var(--fui-line, #b8c7c6); background: var(--fui-card, #fff); color: var(--fui-fg, #1a1a1a); }
.fui-cp-swatch:focus-visible, .fui-cp-area:focus-visible, .fui-cp-option:focus-visible, .fui-cp-use:focus-visible { outline: 3px solid var(--fui-focus, #0e4f5e); outline-offset: 2px; }
.fui-cp-chip { width: 1.5rem; height: 1.5rem; border-radius: 4px; border: 1px solid var(--fui-line, #b8c7c6); }
.fui-cp-value { font-family: ui-monospace, monospace; }
.fui-cp-popup { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; box-sizing: border-box; width: 18rem; max-width: calc(100vw - 2rem);
    display: flex; flex-direction: column; gap: .6rem; padding: .75rem; border-radius: 8px; border: 1px solid var(--fui-line, #b8c7c6);
    background: var(--fui-card, #fff); color: var(--fui-fg, #1a1a1a); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.fui-cp-area { position: relative; width: 220px; max-width: 100%; height: 150px; border-radius: 4px; cursor: crosshair; touch-action: none;
    background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); }
.fui-cp-thumb { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.fui-cp-field { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; }
.fui-cp-field input { width: 100%; box-sizing: border-box; min-width: 0; padding: .25rem; font: inherit; }
.fui-cp-hue input { width: 220px; max-width: 100%; }
.fui-cp-inputs { display: flex; flex-direction: column; gap: .4rem; }
.fui-cp-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.fui-cp-error { margin: 0; color: var(--fui-error, #9b1c1c); font-size: .85rem; font-weight: 600; }
.fui-cp-warn { margin: .25rem 0 0; color: var(--fui-warn, #7a4a00); font-size: .85rem; font-weight: 600; }
.fui-cp-sub { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; }
.fui-cp-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.fui-cp-option { width: 1.6rem; height: 1.6rem; border-radius: 4px; border: 1px solid var(--fui-line, #b8c7c6); cursor: pointer; }
.fui-cp-option[aria-selected="true"] { outline: 2px solid var(--fui-focus, #0e4f5e); outline-offset: 1px; }
.fui-cp-contrast { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.fui-cp-contrast-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fui-cp-sample { display: inline-block; padding: 0 .5rem; border-radius: 3px; font-weight: 700; border: 1px solid var(--fui-line, #b8c7c6); }
.fui-cp-pass strong { color: var(--fui-pass, #1b5e20); }
.fui-cp-fail strong { color: var(--fui-error, #9b1c1c); }
.fui-cp-use { align-self: stretch; padding: .5rem; font: inherit; font-weight: 700; cursor: pointer; border-radius: 6px; border: 0; background: var(--fui-primary, #0e4f5e); color: var(--fui-on-primary, #fff); }
@media (max-width: 480px) { .fui-cp-popup { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto; max-height: 85vh; overflow-y: auto; } }
/* Actions (part of finperiti-ui.css).
   Colours, spacing and radius only through --fcw-* custom properties; the fallbacks are neutral. */

/* ActionButton ------------------------------------------------------------------------------------------ */
.fcw-action-wrap { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--fcw-space-8, 8px); }

.fcw-action {
    display: inline-flex; align-items: center; gap: var(--fcw-space-8, 8px); padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer;
    border: 1px solid var(--fcw-line-strong, #8aa4a8); border-radius: var(--fcw-radius, 6px);
    background-color: var(--fcw-secondary, #ffffff); color: var(--fcw-secondary-text, #1b2a2e);
}
.fcw-action-primary { background-color: var(--fcw-primary, #0e4f5e); border-color: var(--fcw-primary, #0e4f5e); color: var(--fcw-on-primary, #ffffff); }
.fcw-action-danger { background-color: var(--fcw-danger, #b3261e); border-color: var(--fcw-danger, #b3261e); color: var(--fcw-on-danger, #ffffff); }
.fcw-action:focus-visible, .fcw-typed-confirmation input:focus-visible { outline: 3px solid var(--fcw-focus, #1a73e8); outline-offset: 2px; }
.fcw-action:disabled { cursor: progress; opacity: .7; }

/* Looks unavailable by more than colour: muted, dashed border and a not-allowed cursor. Still focusable. */
.fcw-action-unavailable {
    background-color: var(--fcw-unavailable-bg, #eef2f2); color: var(--fcw-unavailable-text, #4d5f63);
    border: 1px dashed var(--fcw-line-strong, #8aa4a8); cursor: not-allowed;
}

.fcw-action-spinner {
    width: 1em; height: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
    animation: fcw-action-spin .8s linear infinite;
}
@keyframes fcw-action-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fcw-action-spinner { animation-duration: 2.4s; } }

.fcw-action-reason {
    display: none; position: absolute; z-index: 10; inset-block-start: 100%; inset-inline-start: 0; min-width: 12rem; max-width: min(22rem, 80vw);
    margin-block-start: var(--fcw-space-4, 4px); padding: var(--fcw-space-8, 8px) var(--fcw-space-12, 12px);
    border: 1px solid var(--fcw-line-strong, #8aa4a8); border-radius: var(--fcw-radius, 6px);
    background-color: var(--fcw-panel-raised, #ffffff); color: var(--fcw-text, #1b2a2e); font-size: .875rem; font-weight: 400; line-height: 1.4;
}
.fcw-action-wrap:hover .fcw-action-reason, .fcw-action-wrap:focus-within .fcw-action-reason { display: block; }

.fcw-action-explanation { color: var(--fcw-text, #1b2a2e); font-size: .875rem; }
.fcw-action-hint { color: var(--fcw-muted, #4d5f63); font-size: .875rem; }

/* TypedConfirmationField -------------------------------------------------------------------------------- */
.fcw-typed-confirmation { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fcw-space-8, 8px); }
.fcw-typed-confirmation-label { font-weight: 600; }

/* Reconnect (part of finperiti-ui.css).
   Colours, spacing and radius only through --fcw-* custom properties; the fallbacks are neutral. */

/* ReconnectModal ---------------------------------------------------------------------------------------- */
.components-reconnect-first-attempt-visible, .components-reconnect-repeated-attempt-visible, .components-reconnect-failed-visible,
.components-pause-visible, .components-resume-failed-visible, .components-rejoining-animation { display: none; }

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; }

#components-reconnect-modal {
    width: 22rem; max-width: calc(100vw - 2rem); margin: 20vh auto; padding: var(--fcw-space-32, 32px);
    border: 1px solid var(--fcw-line, #dbe6e5); border-radius: var(--fcw-radius, 6px);
    background-color: var(--fcw-panel, #ffffff); color: var(--fcw-text, #1b2a2e); box-shadow: var(--fcw-shadow-floating, 0 8px 24px rgba(0, 0, 0, .25));
    opacity: 0; transition: display .3s allow-discrete, overlay .3s allow-discrete; animation: components-reconnect-modal-fade-out .3s both;
}
#components-reconnect-modal[open] {
    animation: components-reconnect-modal-slide-up .4s cubic-bezier(.05, .89, .25, 1.02) .3s, components-reconnect-modal-fade-in .3s ease-in-out .3s;
    animation-fill-mode: both;
}
#components-reconnect-modal::backdrop { background-color: var(--fcw-backdrop, #0b2a31); opacity: .55; animation: components-reconnect-modal-fade-in .3s ease-in-out; }

@keyframes components-reconnect-modal-slide-up { 0% { transform: translateY(16px) scale(.98); } 100% { transform: translateY(0); } }
@keyframes components-reconnect-modal-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes components-reconnect-modal-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }

.components-reconnect-container { display: flex; flex-direction: column; align-items: center; gap: var(--fcw-space-16, 16px); }
#components-reconnect-modal p { margin: 0; text-align: center; }
#components-reconnect-modal button {
    padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--fcw-radius, 6px);
    border: 1px solid var(--fcw-primary, #0e4f5e); background-color: var(--fcw-primary, #0e4f5e); color: var(--fcw-on-primary, #ffffff);
}
#components-reconnect-modal button:hover { border-color: var(--fcw-primary-hover, #0a3b47); background-color: var(--fcw-primary-hover, #0a3b47); }
#components-reconnect-modal button:focus-visible { outline: 3px solid var(--fcw-focus, #1a73e8); outline-offset: 2px; }

.components-rejoining-animation { position: relative; width: 64px; height: 64px; }
.components-rejoining-animation div {
    position: absolute; border: 3px solid var(--fcw-accent, #2a9d8f); border-radius: 50%; opacity: 1;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, .2, .8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2) { animation-delay: -.5s; }
@keyframes components-rejoining-animation {
    0% { top: 32px; left: 32px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 32px; left: 32px; width: 0; height: 0; opacity: 0; }
    5% { top: 32px; left: 32px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 64px; height: 64px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal, #components-reconnect-modal[open], #components-reconnect-modal::backdrop { animation-duration: .01s; animation-delay: 0s; }
    .components-rejoining-animation div { animation-duration: 6s; }
}

/* Look of StatusPill (part of finperiti-ui.css). Themeable only through --fsp-* custom properties, each with a readable default; the host maps its own tokens onto them. */
:root {
    --fsp-panel: #ffffff;
    --fsp-radius-round: 999px;
    --fsp-status-ok: #1a6b32; --fsp-status-ok-surface: #e3f4e8; --fsp-status-ok-line: #a9d9b7;
    --fsp-status-warn: #7a4b00; --fsp-status-warn-surface: #fff1d6; --fsp-status-warn-line: #f0cf8a;
    --fsp-status-danger: #a0201c; --fsp-status-danger-surface: #fde6e4; --fsp-status-danger-line: #f1b3ae;
    --fsp-status-unknown: #4d5a60; --fsp-status-unknown-surface: #eceff1; --fsp-status-unknown-line: #cfd6da;
    --fsp-status-recorded: #5b2a86; --fsp-status-recorded-surface: #f0e7f8; --fsp-status-recorded-line: #d0b8e6;
}

/* Status pill: the glyph and the word carry the meaning too, never colour alone. */
.fsp-status-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.125rem 0.5rem 0.125rem 0.1875rem; border: 1px solid; border-radius: var(--fsp-radius-round); font-size: 0.85rem; font-weight: 650; line-height: 1.4; vertical-align: middle; }
.fsp-status-pill-glyph { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; flex: 0 0 auto; border-radius: var(--fsp-radius-round); background-color: var(--fsp-panel); font-size: 0.6875rem; font-weight: 800; line-height: 1; }
.fsp-status-pill-text { min-width: 0; overflow-wrap: anywhere; }
.fsp-status-pill-ok { color: var(--fsp-status-ok); background-color: var(--fsp-status-ok-surface); border-color: var(--fsp-status-ok-line); }
.fsp-status-pill-warn { color: var(--fsp-status-warn); background-color: var(--fsp-status-warn-surface); border-color: var(--fsp-status-warn-line); }
.fsp-status-pill-danger { color: var(--fsp-status-danger); background-color: var(--fsp-status-danger-surface); border-color: var(--fsp-status-danger-line); }
.fsp-status-pill-unknown { color: var(--fsp-status-unknown); background-color: var(--fsp-status-unknown-surface); border-color: var(--fsp-status-unknown-line); }
.fsp-status-pill-recorded { color: var(--fsp-status-recorded); background-color: var(--fsp-status-recorded-surface); border-color: var(--fsp-status-recorded-line); }


/* Look of DetailsList (part of finperiti-ui.css). Themeable only through --fdl-* custom properties, each with a readable default; the host maps its own tokens onto them. */
:root {
    --fdl-text: #1b2a30; --fdl-heading: #0e2f38; --fdl-muted: #55666c; --fdl-line: #dbe6e5;
}

/* Key/value rows and the details list (dl grid). */
.fdl-key-value-row { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); align-items: baseline; gap: 0.25rem 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--fdl-line); color: var(--fdl-text); }
.fdl-key-value-row:last-child { border-bottom: 0; }
.fdl-key-value-row-key { color: var(--fdl-muted); font-size: 0.85rem; font-weight: 700; overflow-wrap: anywhere; }
.fdl-key-value-row-value { min-width: 0; overflow-wrap: anywhere; }
.fdl-details-section { margin: 0 0 1rem; }
.fdl-details-section > h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--fdl-heading); }
.fdl-details { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0; color: var(--fdl-text); }
.fdl-details > dt { color: var(--fdl-muted); font-size: 0.85rem; font-weight: 700; overflow-wrap: anywhere; }
.fdl-details > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
    .fdl-key-value-row, .fdl-details { grid-template-columns: minmax(0, 1fr); }
}


/* Look of Dialog (part of finperiti-ui.css). Themeable only through --fdg-* custom properties, each with a readable default; the host maps its own tokens onto them. */
:root {
    --fdg-text: #1b2a30; --fdg-line: #dbe6e5;
    --fdg-panel: #ffffff; --fdg-panel-raised: #f3f7f7;
    --fdg-scrim: rgba(15, 23, 32, 0.55); --fdg-radius: 0.5rem;
}

/* Dialog. */
.fdg-dialog-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--fdg-scrim); }
.fdg-dialog { display: flex; flex-direction: column; width: min(42rem, 100%); max-height: min(85vh, 60rem); background: var(--fdg-panel); color: var(--fdg-text); border: 1px solid var(--fdg-line); border-radius: var(--fdg-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); outline: none; }
.fdg-dialog-head { display: flex; align-items: flex-start; gap: 0.5rem; padding: 1rem 1rem 0.5rem; border-bottom: 1px solid var(--fdg-line); }
.fdg-dialog-head h2 { flex: 1; margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.fdg-dialog-close { min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.4rem; border: 0; background: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.fdg-dialog-close:hover { background: var(--fdg-panel-raised); }
.fdg-dialog-body { flex: 1; overflow-y: auto; padding: 1rem; overscroll-behavior: contain; }
.fdg-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; border-top: 1px solid var(--fdg-line); }
@media (max-width: 36rem) {
    .fdg-dialog-scrim { padding: 0; align-items: stretch; }
    .fdg-dialog { width: 100%; max-height: none; border-radius: 0; }
}


/* Look of Skeleton (part of finperiti-ui.css). Themeable only through --fsk-* custom properties, each with a readable default; the host maps its own tokens onto them. */
:root {
    --fsk-text: #1b2a30; --fsk-muted: #55666c; --fsk-line: #dbe6e5; --fsk-line-strong: #b9c9c8;
    --fsk-panel: #ffffff; --fsk-panel-raised: #f3f7f7; --fsk-accent: #0b5563; --fsk-accent-soft: #e7f1ef; --fsk-on-accent: #ffffff;
    --fsk-radius: 0.5rem; --fsk-radius-small: 0.25rem; --fsk-radius-round: 999px;
    --fsk-status-ok: #1a6b32; --fsk-status-ok-surface: #e3f4e8; --fsk-status-ok-line: #a9d9b7;
    --fsk-status-warn: #7a4b00; --fsk-status-warn-surface: #fff1d6; --fsk-status-warn-line: #f0cf8a;
    --fsk-status-danger: #a0201c; --fsk-status-danger-surface: #fde6e4; --fsk-status-danger-line: #f1b3ae;
}

/* Loading state. */
.fsk-loading-state { margin: 0 0 1rem; padding: 1rem 1.5rem; border: 1px solid var(--fsk-line); border-radius: var(--fsk-radius); background-color: var(--fsk-panel); }
.fsk-loading-state-message { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; color: var(--fsk-muted); font-weight: 600; }
.fsk-loading-state-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--fsk-radius-round); background-color: var(--fsk-accent); animation: fsk-pulse 1.2s ease-in-out infinite; }
.fsk-loading-state-lines { display: flex; flex-direction: column; gap: 0.75rem; }
.fsk-loading-state-line { display: block; height: 0.75rem; border-radius: var(--fsk-radius-small); background: linear-gradient(90deg, var(--fsk-panel-raised) 0%, var(--fsk-line) 50%, var(--fsk-panel-raised) 100%); background-size: 200% 100%; animation: fsk-sweep 1.6s ease-in-out infinite; }
.fsk-loading-state-line:nth-child(2) { width: 82%; }
.fsk-loading-state-line:nth-child(3) { width: 64%; }
.fsk-loading-state-line:nth-child(4) { width: 74%; }
@keyframes fsk-sweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes fsk-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .fsk-loading-state-dot, .fsk-loading-state-line { animation: none; }
}

/* Empty state: calm, never a warning colour. */
.fsk-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 2rem 1.5rem; border: 1px dashed var(--fsk-line-strong); border-radius: var(--fsk-radius); background-color: var(--fsk-panel); text-align: center; }
.fsk-empty-state-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--fsk-radius-round); background-color: var(--fsk-panel-raised); color: var(--fsk-muted); font-size: 1.25rem; line-height: 1; }
.fsk-empty-state-message { max-width: 60ch; margin: 0; color: var(--fsk-muted); font-weight: 600; }
.fsk-empty-state-next { margin-top: 0.5rem; }

/* Notice: body text stays the ordinary text colour on a tinted fill; the tone is the stripe, fill and icon together. */
.fsk-notice { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid; border-left-width: 4px; border-radius: var(--fsk-radius); color: var(--fsk-text); }
.fsk-notice-icon { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; flex: 0 0 auto; border-radius: var(--fsk-radius-round); font-size: 0.75rem; font-weight: 800; }
.fsk-notice-body { min-width: 0; max-width: 90ch; }
.fsk-notice-information { border-color: var(--fsk-accent); background-color: var(--fsk-accent-soft); }
.fsk-notice-information .fsk-notice-icon { background-color: var(--fsk-accent); color: var(--fsk-on-accent); }
.fsk-notice-success { border-color: var(--fsk-status-ok-line); background-color: var(--fsk-status-ok-surface); }
.fsk-notice-success .fsk-notice-icon { background-color: var(--fsk-status-ok); color: var(--fsk-status-ok-surface); }
.fsk-notice-warning { border-color: var(--fsk-status-warn-line); background-color: var(--fsk-status-warn-surface); }
.fsk-notice-warning .fsk-notice-icon { background-color: var(--fsk-status-warn); color: var(--fsk-status-warn-surface); }
.fsk-notice-error { border-color: var(--fsk-status-danger-line); background-color: var(--fsk-status-danger-surface); }
.fsk-notice-error .fsk-notice-icon { background-color: var(--fsk-status-danger); color: var(--fsk-status-danger-surface); }


/* Look of TabStrip (part of finperiti-ui.css). Themeable with --ftb-* properties. */
.ftb-strip { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ftb-line, #dbe6e5); }
.ftb-tab {
    display: block; padding: 8px 14px; border-bottom: 3px solid transparent; color: var(--ftb-muted, #5b6b6e);
    font-weight: 650; text-decoration: none;
}
.ftb-tab:hover { color: var(--ftb-text, #1b2a2d); border-bottom-color: var(--ftb-line-strong, #b6c8c6); }
.ftb-tab:focus-visible { outline: 2px solid var(--ftb-accent, #0b5563); outline-offset: 2px; }
.ftb-tab-active, .ftb-tab-active:hover { color: var(--ftb-heading, #0e2f36); border-bottom-color: var(--ftb-accent, #0b5563); }
.ftb-vertical { flex-direction: column; gap: 4px; min-width: 11rem; border-bottom: 0; border-inline-end: 1px solid var(--ftb-line, #dbe6e5); }
.ftb-vertical .ftb-tab { border-bottom: 0; border-inline-end: 3px solid transparent; }
.ftb-vertical .ftb-tab:hover { border-inline-end-color: var(--ftb-line-strong, #b6c8c6); }
.ftb-vertical .ftb-tab-active, .ftb-vertical .ftb-tab-active:hover { border-inline-end-color: var(--ftb-accent, #0b5563); }

/* Look of RunLink (part of finperiti-ui.css). Themeable only through --frl-* custom properties, each with a readable default; the host maps its own tokens onto them. */
:root {
    --frl-link: #0b5563;
}

/* Pipeline run link. */
.frl-run-link { color: var(--frl-link, inherit); text-decoration: underline; }
.frl-run-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Look of GroupedMultiCombobox (part of finperiti-ui.css).
   Themeable with --fcb-* properties. The list grows to fit its widest row (never narrower than the input, never wider than the
   viewport), wraps long names and has no horizontal scroll; on phones it is full width. */
.fcb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fcb-anchor { position: relative; }
.fcb-input { width: 100%; box-sizing: border-box; color: var(--fcb-ink, inherit); background: var(--fcb-field, Field); border: 1px solid var(--fcb-line, color-mix(in srgb, CanvasText 25%, transparent)); border-radius: 6px; padding: 8px 10px; font: inherit; }
.fcb-input:focus-visible { outline: 2px solid var(--fcb-focus, Highlight); outline-offset: 1px; }
.fcb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fcb-summary { font-size: .85rem; font-weight: 600; margin-right: .25rem; }
.fcb-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: .85rem;
    font-weight: 600; background: var(--fcb-chip-bg, color-mix(in srgb, CanvasText 10%, Canvas)); color: var(--fcb-chip-fg, CanvasText);
    border: 1px solid var(--fcb-line, color-mix(in srgb, CanvasText 25%, transparent));
}
.fcb-hint { margin: 0; color: var(--fcb-ink-soft, inherit); font-size: .85rem; opacity: .75; font-weight: 400; }
.fcb-list {
    position: absolute; left: 0; top: 100%; z-index: 20; margin: 0;
    list-style: none; padding: 0; max-height: min(22rem, 60vh); overflow-y: auto; overflow-x: hidden; border-radius: 6px; box-sizing: border-box;
    border: 1px solid var(--fcb-line, color-mix(in srgb, CanvasText 25%, transparent)); background: var(--fcb-card, Canvas); color: var(--fcb-ink, CanvasText);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    width: max-content; min-width: 100%; max-width: calc(100vw - 2rem);
}
.fcb-list.fcb-up { top: auto; bottom: 100%; margin: 0; }
.fcb-field-summary { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fcb-ink, inherit); }
.fcb-option.fcb-selected { font-weight: 700; background: var(--fcb-selected-bg, color-mix(in srgb, CanvasText 8%, Canvas)); }
.fcb-all { border-bottom: 1px solid var(--fcb-line, color-mix(in srgb, CanvasText 25%, transparent)); font-weight: 700; padding-left: 10px; }
.fcb-panel-box { position: absolute; left: 0; top: 100%; z-index: 20; padding: 6px 10px; background: var(--fcb-card, Canvas); border: 1px solid var(--fcb-line, color-mix(in srgb, CanvasText 25%, transparent)); border-radius: 6px; }
@media (max-width: 40rem) { .fcb-list { width: 100%; max-width: 100%; } }
.fcb-group { list-style: none; margin: 0; padding: 0; }
.fcb-group-head { padding: 6px 10px; background: var(--fcb-head-bg, color-mix(in srgb, CanvasText 6%, Canvas)); border-top: 1px solid var(--fcb-line, color-mix(in srgb, CanvasText 25%, transparent)); font-weight: 700; }
.fcb-group-title { font-size: .9rem; margin: 0; }
.fcb-group-items { list-style: none; margin: 0; padding: 0; }
.fcb-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 28px; flex-wrap: wrap; overflow-wrap: anywhere; }
li.fcb-option { cursor: pointer; }
.fcb-option.fcb-disabled { color: var(--fcb-disabled-ink, color-mix(in srgb, CanvasText 62%, Canvas)); cursor: not-allowed; position: relative; }
.fcb-option.fcb-disabled .ftc, li.fcb-option.fcb-disabled { cursor: not-allowed; }
.fcb-disabled-cue { font-size: .8rem; font-style: italic; color: var(--fcb-disabled-ink, color-mix(in srgb, CanvasText 62%, Canvas)); }
.fcb-reason { display: none; position: absolute; left: 28px; top: 100%; z-index: 30; max-width: 20rem; padding: 4px 8px; border-radius: 4px; font-size: .85rem; font-weight: 400; background: var(--fcb-tip-bg, CanvasText); color: var(--fcb-tip-fg, Canvas); }
.fcb-option.fcb-disabled:hover > .fcb-reason, .fcb-option.fcb-disabled:focus-within > .fcb-reason, .fcb-option.fcb-disabled.fcb-active > .fcb-reason { display: block; }
.fcb-option:hover, .fcb-option.fcb-active { background: var(--fcb-active-bg, color-mix(in srgb, CanvasText 10%, Canvas)); }
.fcb-option.fcb-active { outline: 2px solid var(--fcb-focus, Highlight); outline-offset: -2px; }
.fcb-check-row .ftc { width: 100%; }
.fcb-check-row .ftc-label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fcb-none { margin: 0; opacity: .75; }
/* TristateCheckbox (part of finperiti-ui.css). Theme with --ftc-* properties. */
.ftc { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.ftc:focus-visible { outline: 2px solid var(--ftc-focus, Highlight); outline-offset: 2px; }
.ftc-box {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.1rem; height: 1.1rem; line-height: 1;
    border: 2px solid var(--ftc-border, CanvasText); border-radius: 3px; background: var(--ftc-bg, Canvas); color: var(--ftc-fg, CanvasText);
    font-weight: 800; font-size: .85rem;
}
.ftc-checked .ftc-box, .ftc-mixed .ftc-box { background: var(--ftc-on-bg, color-mix(in srgb, CanvasText 12%, Canvas)); }
.ftc-label { min-width: 0; overflow-wrap: anywhere; }