/* Self-hosted Oxygen fonts (replaces the design book's Google Fonts @import). */
@font-face { font-family: 'Oxygen'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/oxygen-300.woff2') format('woff2'); }
@font-face { font-family: 'Oxygen'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/oxygen-400.woff2') format('woff2'); }
@font-face { font-family: 'Oxygen'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/oxygen-700.woff2') format('woff2'); }
@font-face { font-family: 'Oxygen Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/oxygen-mono-400.woff2') format('woff2'); }
/* ============================================================
   AEGIS tokens and components.
   Ported verbatim from the design book (aegis-design-system.html
   and aegis-dashboard.html). One material, form from light and
   shadow only, teal as a spotlight. The React components are thin
   wrappers over these classes, so this file stays the single
   source of truth.
   ============================================================ */
:root {
    --base: #242730;
    --shadow-d: #1b1d22;
    --shadow-l: #282b34;

    --text-main: #ffffff;
    --text-muted: #a0a4b8;
    --text-darker: #6b7085;

    --font-sans: 'Oxygen', system-ui, sans-serif;
    --font-mono: 'Oxygen Mono', ui-monospace, monospace;

    --accent: #4f9da2;
    --accent-deep: #316064;
    --green: #5e9d70;
    --red: #c25b5b;
    --yellow: #c99a52;

    --raised: 4px 4px 12px var(--shadow-d), -4px -4px 12px var(--shadow-l);
    --raised-hover: 5px 5px 15px var(--shadow-d), -5px -5px 15px var(--shadow-l);
    --raised-sm: 3px 3px 8px var(--shadow-d), -3px -3px 8px var(--shadow-l);
    --pressed: inset 4px 4px 12px var(--shadow-d), inset -4px -4px 12px var(--shadow-l);
    --pressed-sm: inset 3px 3px 8px var(--shadow-d), inset -3px -3px 8px var(--shadow-l);
    --pressed-key: inset 4px 4px 10px var(--shadow-d), inset -4px -4px 10px var(--shadow-l);

    /* The room a raised shadow needs around an item, so a clipping container (overflow) can widen its clip box
       by this much on every side and never slice an item's shadow. Covers the raised shadows' reach
       (--raised-sm ~11px, --raised ~14px) while staying inside the sidebar's own 16px padding. */
    --shadow-gutter: 14px;

    --flat: rgba(255, 255, 255, 0.04);
    --focus-ring: 0 0 0 2px var(--base), 0 0 0 4px rgba(79, 157, 162, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
/* Reset the default body margin: without this the .app (100vh) plus the browser's 8px body margins
   overflows the viewport by ~16px, leaving the page permanently scrollable by a small amount. */
html, body { margin: 0; padding: 0; }
.aegis, .aegis * { font-family: var(--font-sans); }
.aegis {
    background: var(--base);
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
.aegis h1, .aegis h2, .aegis h3, .aegis h4 { margin: 0; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; }
.aegis p { margin: 0; }
.aegis :focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Show the focus ring only for real keyboard focus. Suppress the browser's default outline on mouse
   click (a plain :focus that is not :focus-visible), and keep the heading that FocusOnNavigate focuses
   after each navigation silent, since it is a screen-reader target, not a control the user chose. */
.aegis :focus:not(:focus-visible) { outline: none; }
.aegis h1:focus { outline: none; box-shadow: none; }

.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* the design book builds controls from <div>. These components use real <button>
   elements for accessibility, so strip the native OS chrome that would otherwise
   paint its own background over the material (this is why an on toggle looked dark). */
.aegis button { -webkit-appearance: none; appearance: none; }

/* ---------- surfaces ---------- */
.card { background: var(--base); box-shadow: var(--raised); border-radius: 20px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card--interactive:hover { box-shadow: var(--raised-hover); transform: translateY(-2px); }
.well { background: var(--base); box-shadow: var(--pressed); border-radius: 12px; }
.well--sm { box-shadow: var(--pressed-sm); }
.chip { background: var(--flat); border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.chip--raised { box-shadow: var(--raised-sm); }

/* ---------- inputs ---------- */
.input { width: 100%; background: var(--base); box-shadow: var(--pressed); border: none; border-radius: 12px; color: var(--text-main); font-family: inherit; font-size: 14px; padding: 0.75rem 1rem; transition: box-shadow 0.25s ease; }
.input::placeholder { color: var(--text-darker); }
.input:focus { outline: none; box-shadow: var(--pressed), inset 0 0 0 1px rgba(79, 157, 162, 0.45); }

.select-wrap { position: relative; display: inline-block; }
.select { appearance: none; cursor: pointer; font-weight: 400; padding-right: 2.5rem; box-shadow: var(--raised-sm); }
.select:hover { box-shadow: var(--raised); }
.select-chevron { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--text-darker); pointer-events: none; }

/* kill the browser's generic number spinner everywhere */
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* a number field with real steppers: an inset track holding the value between two raised keys */
.stepper { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--base); box-shadow: var(--pressed-sm); border-radius: 12px; }
.stepper__input { width: 2.75rem; text-align: center; background: transparent; border: none; color: var(--text-main); font-family: inherit; font-size: 14px; padding: 0.4rem 0; -moz-appearance: textfield; }
.stepper__input:focus { outline: none; }
.stepper__btn { width: 30px; height: 30px; border-radius: 8px; background: var(--base); box-shadow: var(--raised-sm); border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease, box-shadow 0.2s ease; }
.stepper__btn .ic { width: 13px; height: 13px; }
.stepper__btn:hover { color: var(--text-main); box-shadow: var(--raised); }
.stepper__btn:active { box-shadow: var(--pressed-key); }
.stepper__btn:disabled { color: var(--shadow-l); cursor: default; box-shadow: var(--raised-sm); }

/* ---------- buttons ---------- */
.btn { background: var(--base); box-shadow: var(--raised-sm); border: none; border-radius: 12px; color: var(--text-muted); font-family: inherit; font-weight: 400; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.75rem 1.5rem; margin-top: 1rem; transition: color 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { color: var(--text-main); box-shadow: var(--raised); }
.btn:active { color: var(--text-main); box-shadow: var(--pressed-key); }
.btn--primary { color: var(--accent); box-shadow: var(--raised); font-size: 15px; font-weight: 700; padding: 0.85rem 2rem; }
.btn--primary:hover { box-shadow: var(--raised-hover); }
.btn--primary:active { box-shadow: var(--pressed-key); }
.btn--danger { color: var(--red); }
.btn--block { width: 100%; }

.icon-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--base); box-shadow: var(--raised-sm); border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: color 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0; }
.icon-btn:hover { color: var(--text-main); box-shadow: var(--raised); }
.icon-btn:active { color: var(--text-main); box-shadow: var(--pressed-key); }
.icon-btn--danger:hover { color: var(--red); }
.icon-btn--sm { width: 32px; height: 32px; font-size: 14px; }

/* quiet full-width add-a-row button */
.add-row { width: 100%; padding: 1.1rem; border: none; border-radius: 12px; background: var(--base); box-shadow: var(--raised-sm); color: var(--text-muted); font-family: inherit; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.75rem; transition: color 0.2s ease, box-shadow 0.2s ease; }
.add-row:hover { color: var(--text-main); box-shadow: var(--raised); }
.add-row:active { color: var(--text-main); box-shadow: var(--pressed-key); }

/* ---------- toggle (hardware) ---------- */
.toggle { width: 52px; height: 28px; background: var(--base); box-shadow: var(--pressed-sm); border-radius: 14px; position: relative; cursor: pointer; flex-shrink: 0; border: none; padding: 0; transition: background 0.3s ease, box-shadow 0.3s ease; }
/* the knob sits on top of the track, so it casts a real drop shadow to the bottom-right
   (light is top-left) with only a faint top-left highlight, not the big neumorphic light
   patch that read as a dark blob on the teal. Taller too, so it fills the track. */
.toggle-knob { width: 24px; height: 24px; border-radius: 50%; position: absolute; top: 2px; left: 2px; background: var(--base); box-shadow: 1.5px 2px 4px rgba(0, 0, 0, 0.3), -1px -1px 1.5px rgba(255, 255, 255, 0.06); transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.3s ease; }
.toggle.is-on { background: var(--accent); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25); }
/* the knob stays the material, it just slides, the teal track carries the on state */
.toggle.is-on .toggle-knob { transform: translateX(24px); }
.toggle--lg { transform: scale(1.1); transform-origin: left; }

/* ---------- segmented match toggle (any | all), the inset-active control ---------- */
.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; }
.segmented__opt { padding: 5px 14px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 400; color: var(--text-darker); background: transparent; border: none; cursor: pointer; transition: color 0.2s ease, box-shadow 0.2s ease; }
.segmented__opt.is-active { box-shadow: var(--pressed-sm); color: var(--accent); font-weight: 700; }

/* ---------- tags ----------
   Sentence case, quiet. Not uppercase letter-spaced pills. Severity stays subtle,
   role and entity color is data and is carried by a swatch plus the real name. */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 400; }
.tag .ic { width: 0.85em; height: 0.85em; }
.tag--red { background: rgba(194, 91, 91, 0.16); color: var(--red); }
.tag--yellow { background: rgba(201, 154, 82, 0.16); color: var(--yellow); }
.tag--neutral { background: var(--flat); color: var(--text-muted); }
/* a role tag carries its Discord color as a leading swatch, the label stays readable */
.tag--role { background: var(--flat); color: var(--text-main); font-weight: 700; }
.tag--role .swatch-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); }

/* ---------- entity chips and chip field ---------- */
.chipfield { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem; background: var(--base); box-shadow: var(--pressed-sm); border-radius: 12px; }
/* no grey pill: the swatch carries the color and the name carries the label */
.chip-entity { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.15rem; color: var(--text-main); font-size: 14px; }
.chip-entity__disc { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
/* the remove is a real little key pressed into the chip, not a bare white glyph */
.chip-entity__x { width: 18px; height: 18px; border-radius: 50%; background: var(--base); box-shadow: var(--raised-sm); border: none; color: var(--text-darker); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: color 0.2s ease, box-shadow 0.2s ease; }
.chip-entity__x .ic { width: 9px; height: 9px; stroke-width: 2.5; }
.chip-entity__x:hover { color: var(--red); box-shadow: var(--raised); }
.chip-entity__x:active { box-shadow: var(--pressed-key); }
.chip-add { width: 30px; height: 30px; border-radius: 50%; background: var(--base); box-shadow: var(--raised-sm); border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chip-add:hover { color: var(--text-main); box-shadow: var(--raised); }

/* ---------- small bits ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-darker); }
.eyebrow .crumb-current { color: var(--text-muted); }
.label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-darker); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.status-dot--glow { box-shadow: 0 0 8px rgba(79, 157, 162, 0.8); }
.mono { font-family: var(--font-mono); }

/* ---------- meter ---------- */
.meter { flex: 1; height: 12px; background: var(--base); box-shadow: var(--pressed); border-radius: 999px; overflow: hidden; }
.meter__fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* ---------- toast ---------- */
.toast { background: var(--base); box-shadow: var(--raised), 0 10px 30px rgba(0, 0, 0, 0.5); color: var(--text-main); padding: 16px 24px; border-radius: 16px; display: inline-flex; align-items: center; gap: 16px; font-weight: 400; }
/* The Blazor error toast floats at the bottom-right and is hidden until Blazor shows it (then dismissable),
   so it never sits in the page flow and gets buried under the fixed side panel. */
#blazor-error-ui { position: fixed; right: 24px; bottom: 24px; left: auto; top: auto; z-index: 1000; max-width: min(92vw, 30rem); display: none; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 4px; }

/* ---------- rule row (the contextual builder row) ---------- */
/* Top-align so every control's label sits on the top line (the kind dropdown, which now carries its own
   label, lines up with the field inputs, and a tall control's label stays readable at the top). */
.rule-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; }
.rule-row__fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; flex: 1; min-width: 0; }
.rule-row__remove { margin-left: auto; align-self: center; }
.field { display: inline-flex; flex-direction: column; gap: 0.3rem; }
.field .input { width: auto; min-width: 4rem; }
.field--num .input { width: 6rem; }
/* Tall controls (the entity picker, a message textarea) take a full line, so on wide screens they do not
   share a row with small controls like the self-delete toggle (which must stay below, with its timer). */
.field--grow { flex: 1 1 100%; min-width: 0; }
.field--grow .input, .field--grow .picker { width: 100%; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    .aegis *, .aegis *::before, .aegis *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}