/* Webhook admin. Used by the real service and copied into the static demo. Tokens live in theme.css. */

.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-4); padding: var(--s-12) var(--gutter) var(--s-8); border-bottom: 1px solid var(--line); }
.admin-head p { margin-top: var(--s-3); color: var(--ink-2); }
#key-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-label); }
#key-form input { width: 14rem; }
#error { padding-inline: var(--gutter); }
#error:not(:empty) { padding-block: var(--s-3); }

.tile.alert strong { color: var(--error); }

.admin-main { display: grid; gap: var(--s-12); padding: var(--s-10) var(--gutter) var(--s-12); }
.admin-main > section { min-width: 0; overflow-x: auto; }
.admin-main h2 { margin-bottom: var(--s-3); }
.admin-main h3 { margin: var(--s-6) 0 var(--s-2); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.section-head h2 { margin: 0; }
td.mono { overflow-wrap: anywhere; }

/* Static demo: the replay of recorded duplicates */

.buttons { display: flex; gap: var(--s-2); }
.admin-main .hint { margin-bottom: var(--s-3); }
#dup-result { display: flex; margin-top: var(--s-3); }
#dup-result[hidden] { display: none; }
#dup-effects { margin-top: var(--s-3); max-width: none; }
#dup-timing { margin-top: var(--s-1); max-width: none; }

.replay { padding: var(--s-10) var(--gutter); border-bottom: 1px solid var(--line); background: var(--surface); }
.replay > p { margin-top: var(--s-2); color: var(--ink-2); }
.replay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.replay-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; margin-top: var(--s-6); border: 1px solid var(--line); border-radius: var(--r); background: var(--line); }
.replay-counts > div { padding: var(--s-4); background: var(--surface); }
.replay-counts strong { display: block; font-size: var(--t-title); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.replay-counts span { color: var(--ink-3); font: 400 var(--t-label)/1.4 var(--mono); }
.replay-log { height: 9.5rem; margin-top: var(--s-4); }
.load { padding: var(--s-10) var(--gutter); border-top: 1px solid var(--line); }
.load > p { margin: var(--s-2) 0 var(--s-4); color: var(--ink-2); font-size: var(--t-small); }