/* ==========================================================================
   Components: cards, tables, forms, buttons, pills, flags, toasts, tabs.
   ========================================================================== */

/* --- card ----------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card > header {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--border);
}
.card > header h2, .card > header h3 { margin: 0; }
.card > header .right { margin-left: auto; }
.card-body { padding: var(--sp-4); }
.card-body.flush { padding: 0; }
.card > footer {
    padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* --- stat tile ------------------------------------------------------------ */

.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4);
    display: flex; flex-direction: column; gap: 2px;
    position: relative; overflow: hidden;
}
/* A 2px accent edge carries the tile's meaning without adding a second colour
   to the number itself, which has to stay readable. */
.stat::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--accent);
}
.stat.ok::before { background: var(--out-hit); }
.stat.warn::before { background: var(--out-denied); }
.stat.bad::before { background: var(--out-error); }
.stat.info::before { background: var(--out-miss); }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.stat-value { font-family: var(--font-display); font-size: 26px; line-height: 1.15; }
.stat-sub { font-size: 11px; color: var(--text-dim); }
.stat-value small { font-size: 13px; color: var(--text-dim); }

/* --- table ---------------------------------------------------------------- */

.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
    text-align: left; font-family: var(--font-display); font-weight: 400;
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-faint); padding: var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--border-strong); white-space: nowrap;
    background: var(--surface-2); position: sticky; top: 0; z-index: 2;
}
table.tbl td { padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr:hover { background: var(--surface-hover); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--font-mono); }
table.tbl td.mono { font-family: var(--font-mono); font-size: 12px; }
table.tbl.compact td, table.tbl.compact th { padding: 6px var(--sp-3); }
table.tbl .actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

.empty {
    padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--text-faint);
}
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: var(--sp-3); }

/* --- buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2); color: var(--text);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
                transform var(--speed) var(--ease);
}
.btn:hover { background: var(--surface-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }

.btn-primary {
    background: var(--accent-2); border-color: transparent;
    color: #fff;
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent-2) 84%, #fff); }

.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-icon { padding: 6px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* --- pills / badges ------------------------------------------------------- */

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    border: 1px solid transparent; white-space: nowrap;
}
.pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 6px;
}
.pill.plain::before { display: none; }

/* Semantic pills, keyed to the outcome tokens so the Sankey, the tables and
   the pills can never disagree about what colour a "hit" is. */
.pill-hit     { color: var(--out-hit);     background: color-mix(in srgb, var(--out-hit) 14%, transparent); }
.pill-miss    { color: var(--out-miss);    background: color-mix(in srgb, var(--out-miss) 14%, transparent); }
.pill-stale   { color: var(--out-stale);   background: color-mix(in srgb, var(--out-stale) 14%, transparent); }
.pill-denied  { color: var(--out-denied);  background: color-mix(in srgb, var(--out-denied) 16%, transparent); }
.pill-error   { color: var(--out-error);   background: color-mix(in srgb, var(--out-error) 14%, transparent); }
.pill-limited { color: var(--out-limited); background: color-mix(in srgb, var(--out-limited) 15%, transparent); }
.pill-active  { color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pill-draft   { color: var(--text-dim); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.pill-off     { color: var(--text-faint); background: color-mix(in srgb, var(--muted) 10%, transparent); }
.pill-warn    { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.pill-info    { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.pill-accent  { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.badge {
    display: inline-block; min-width: 18px; padding: 1px 6px;
    border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
    background: var(--surface-3); color: var(--text-dim); text-align: center;
}
.badge.hot { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }

.method {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; letter-spacing: .04em;
}
.method-get  { color: var(--out-miss); background: color-mix(in srgb, var(--out-miss) 15%, transparent); }
.method-post { color: var(--out-hit); background: color-mix(in srgb, var(--out-hit) 15%, transparent); }

/* --- forms ---------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-4); min-width: 0; }
.field > label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field .hint { font-size: 11px; color: var(--text-faint); line-height: 1.45; }
.field .err { font-size: 11px; color: var(--bad); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], input[type=search], input[type=datetime-local], select, textarea {
    font-family: var(--font-body); font-size: 13px;
    background: var(--bg-2); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 8px 10px; width: 100%;
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
input.mono, textarea.mono, select.mono { font-family: var(--font-mono); font-size: 12.5px; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; background: var(--surface); }
input[disabled], select[disabled], textarea[disabled] { opacity: .55; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
select { appearance: none; padding-right: 30px; background-repeat: no-repeat; background-position: right 10px center; }

/* Native checkbox/radio, recoloured rather than rebuilt: a custom control here
   would need JS to stay accessible and there is no benefit. */
input[type=checkbox], input[type=radio] { accent-color: var(--accent-2); width: 15px; height: 15px; }

.check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 13px; cursor: pointer; }
.check input { margin-top: 2px; flex: 0 0 auto; }
.check span { color: var(--text-dim); }

.inline-form { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-4); margin: 0 0 var(--sp-4); }
legend { font-family: var(--font-display); font-size: 12px; padding: 0 var(--sp-2); color: var(--accent); }

/* --- alerts / toasts ------------------------------------------------------ */

.alert {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: 13px; margin-bottom: var(--sp-4);
}
.alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.alert-ok   { border-color: color-mix(in srgb, var(--ok) 40%, transparent);   background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.alert-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.alert-bad  { border-color: color-mix(in srgb, var(--bad) 40%, transparent);  background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.alert-info { border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 10%, var(--surface)); }
.alert b { display: block; margin-bottom: 2px; }

/* --- flags ---------------------------------------------------------------- */

.flag { display: inline-flex; align-items: center; vertical-align: middle; }
.flag svg { width: 20px; height: 14px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px var(--border-strong); }
.flag-chip {
    display: inline-block; min-width: 20px; height: 14px; line-height: 14px;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    text-align: center; padding: 0 3px; border-radius: 2px;
    background: var(--surface-3); color: var(--text-dim);
    box-shadow: 0 0 0 1px var(--border-strong);
}
.flag-local-bg { fill: var(--accent); opacity: .18; }
.flag-local-fg { fill: var(--accent); opacity: .75; }
.flag-name { margin-left: var(--sp-2); }
.flag.lg svg, .flag.lg .flag-chip { width: 28px; height: 19px; line-height: 19px; }

/* --- tabs ----------------------------------------------------------------- */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); overflow-x: auto; }
.tabs a {
    padding: var(--sp-3) var(--sp-4); font-size: 13px; color: var(--text-dim);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* --- key/value list ------------------------------------------------------- */

.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--sp-2) var(--sp-4); font-size: 13px; }
.kv dt { color: var(--text-faint); font-size: 12px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* --- copy field ----------------------------------------------------------- */

.copy {
    display: flex; align-items: center; gap: var(--sp-2);
    background: var(--bg-2); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-mono); font-size: 12.5px; overflow: hidden;
}
.copy input { border: 0; background: none; padding: 0; font-family: var(--font-mono); font-size: 12.5px; }
.copy input:focus { background: none; }

/* --- pagination ----------------------------------------------------------- */

.pager { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; padding: var(--sp-4); flex-wrap: wrap; }
.pager a, .pager span {
    padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px;
    border: 1px solid var(--border); color: var(--text-dim);
}
.pager a:hover { background: var(--surface-hover); text-decoration: none; }
.pager .on { background: var(--accent-2); border-color: transparent; color: #fff; }
.pager .gap { border: 0; }

/* --- misc ----------------------------------------------------------------- */

.sep { height: 1px; background: var(--border); margin: var(--sp-4) 0; }
.vsep { width: 1px; background: var(--border); align-self: stretch; }

.tag {
    display: inline-block; padding: 1px 7px; border-radius: 4px;
    background: var(--surface-3); color: var(--text-dim);
    font-family: var(--font-mono); font-size: 11px;
}

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--ok); } .dot-bad { background: var(--bad); }
.dot-warn { background: var(--warn); } .dot-off { background: var(--text-faint); }

details.raw > summary { cursor: pointer; font-size: 12px; color: var(--text-dim); padding: var(--sp-2) 0; }
details.raw > summary:hover { color: var(--text); }

/* --- brand mark ----------------------------------------------------------- */

.bm { fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; }
.bm-hex   { stroke: var(--accent); stroke-width: 2.4; }
.bm-flake path { stroke: var(--text); stroke-width: 1.7; }
.bm-lead  { stroke: var(--accent-2); stroke-width: 2.1; }
.bm-pip   { fill: var(--brand-red); stroke: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }