/* ==================== AGENT CONSOLE (.ag-*) ==================== */
.ag-tabs { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ag-tab {
    background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
    padding: .45rem .9rem; font-size: .82rem; font-weight: 600; color: var(--text-soft);
    transition: all .12s ease; display: inline-flex; align-items: center; gap: .4rem;
}
.ag-tab i { font-size: .95rem; opacity: .75; }
.ag-tab.active i { opacity: 1; }
.ag-tab:hover { color: var(--text); border-color: #CBD6E8; }
.ag-tab.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.ag-running {
    background: #F5F8FF; border: 1px solid #DCE6FA; border-radius: var(--radius);
    padding: .8rem 1rem; font-size: .85rem; color: #274690; margin-top: .75rem;
}
.ag-result {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem 1rem; margin-top: .75rem; box-shadow: var(--shadow);
}
.ag-result div b { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.ag-result div span { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.ag-result .ok b   { color: var(--ok); }
.ag-result .warn b { color: var(--warn); }
.ag-result .bad b  { color: var(--bad); }

.ag-run { display: flex; align-items: center; gap: .7rem; padding: .55rem 1rem; border-bottom: 1px solid var(--border-soft); }
.ag-run:last-child { border-bottom: none; }
.ag-run-main { flex: 1; min-width: 0; font-size: .85rem; }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.ag-dot.ok   { background: var(--ok); }
.ag-dot.warn { background: var(--warn); }
.ag-dot.bad  { background: var(--bad); }

/* ---- rules / training ---- */
.ag-rule {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: .6rem; box-shadow: var(--shadow); overflow: hidden;
}
.ag-rule.off { opacity: .5; }
.ag-rule-head {
    display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; background: var(--surface-2);
    border-bottom: 1px solid var(--border); font-size: .88rem; flex-wrap: wrap;
}
.ag-rule-body {
    padding: .7rem .9rem; font-size: .84rem; color: var(--text-soft);
    line-height: 1.55; white-space: pre-wrap;
}
.ag-kind {
    font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: .14rem .45rem; border-radius: 5px;
}
.ag-kind.k-rule       { background: #EAF0FE; color: #1B4DB1; }
.ag-kind.k-skill      { background: #E3F7EB; color: #04682F; }
.ag-kind.k-example    { background: #EEF1F7; color: #4A5670; }
.ag-kind.k-correction { background: #FDF3E1; color: #8A5A08; }

/* ---- the prompt, verbatim ---- */
.ag-prompt {
    background: var(--navy-900); color: #D6E0F0; border-radius: var(--radius);
    padding: 1.1rem 1.25rem; font-size: .78rem; line-height: 1.6; white-space: pre-wrap;
    max-height: 640px; overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- decision audit ---- */
.ag-dec {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: .7rem; box-shadow: var(--shadow); overflow: hidden;
}
.ag-dec-head {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    padding: .5rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.ag-verdict {
    font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .16rem .5rem; border-radius: 5px;
}
.ag-verdict.v-proposed    { background: #E3F7EB; color: #04682F; }
.ag-verdict.v-shortlisted { background: #FDF3E1; color: #8A5A08; }
.ag-verdict.v-rejected    { background: #FDE9E8; color: #96201B; }
.ag-verdict.v-approved    { background: #E3F7EB; color: #04682F; }
.ag-verdict.v-unlinked    { background: #EEF1F7; color: #4A5670; }

.ag-dec-pair {
    display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem;
    font-size: .88rem; flex-wrap: wrap;
}
.ag-dec-pair span { font-weight: 600; }
.ag-dec-pair i { display: block; font-style: normal; font-size: .74rem; font-weight: 400; color: var(--text-soft); }
.ag-dec-pair .p-eff       { border-left: 3px solid var(--c-eff-ui); padding-left: .5rem; }
.ag-dec-pair .p-messenger { border-left: 3px solid var(--c-messenger-ui); padding-left: .5rem; }
.ag-vs { font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.ag-reason { padding: 0 .9rem .6rem; font-size: .86rem; line-height: 1.55; }
.ag-ev { padding: 0 .9rem .5rem; font-size: .8rem; }
.ag-ev b { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.ag-ev ul { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--text-soft); }
.ag-ev.against ul { color: #96201B; }
.ag-settle { padding: .5rem .9rem; background: #FDF9F0; border-top: 1px solid var(--border); font-size: .82rem; }
.ag-dec-foot { display: flex; gap: .4rem; padding: .55rem .9rem; border-top: 1px solid var(--border); }

/* ---- settings ---- */
.ag-settings { padding: .3rem 0; }
.ag-set {
    display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.ag-set:last-child { border-bottom: none; }
.ag-set > div { flex: 1; min-width: 0; }
.ag-set b { display: block; font-size: .87rem; font-weight: 600; }
.ag-set span { font-size: .78rem; color: var(--text-soft); }
.ag-switch {
    width: 42px; height: 24px; border-radius: 20px; border: none; background: #CBD5E1;
    position: relative; transition: background .15s ease; flex: 0 0 42px; padding: 0;
}
.ag-switch i {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ag-switch.on { background: var(--ok); }
.ag-switch.on i { transform: translateX(18px); }

/* ==================== AUDIT AT SCALE ==================== */
.ag-audit-list {
    background: var(--surface); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.ag-arow {
    display: grid; grid-template-columns: 96px 62px 1fr 1fr 86px 26px;
    gap: .65rem; align-items: center; padding: .5rem .9rem;
    border-bottom: 1px solid var(--border-soft); cursor: pointer;
    transition: background .12s ease;
}
.ag-arow:hover { background: var(--surface-3); }
.ag-arow.open  { background: var(--surface-2); }
.ag-arow:last-child { border-bottom: none; }

.ag-conf { font-weight: 700; font-size: .82rem; text-align: center; color: var(--text-soft); }
.ag-party { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ag-party img {
    width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain;
    border-radius: 50%; background: #fff; border: 1px solid var(--border); padding: 1px;
}
.ag-party-txt { min-width: 0; }
.ag-party-txt b {
    display: block; font-size: .85rem; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-party-txt span { font-size: .73rem; color: var(--text-soft); }
.ag-chev { color: var(--text-dim); transition: transform .15s ease; text-align: center; }
.ag-arow.open .ag-chev { transform: rotate(90deg); }

.ag-adetail {
    padding: .1rem .9rem .8rem; background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
}

@media (max-width: 1199.98px) {
    .ag-arow { grid-template-columns: 86px 54px 1fr 1fr 26px; }
    .ag-arow > .ag-when { display: none; }
}
@media (max-width: 767.98px) {
    .ag-arow { grid-template-columns: 86px 1fr 26px; }
    .ag-arow > .ag-conf { display: none; }
}

.ag-pager {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 0; font-size: .82rem; color: var(--text-soft);
}

/* ---- percentage input ---- */
.ag-pct-input { display: flex; align-items: center; gap: .35rem; }
.ag-pct-input input { width: 92px; text-align: right; }
.ag-pct-input span { font-size: .85rem; font-weight: 600; color: var(--text-soft); }

.ag-live-banner {
    display: flex; align-items: center; gap: .6rem;
    background: linear-gradient(90deg, rgba(0,166,81,.10), rgba(30,107,255,.06));
    border: 1px solid #C9E6D5; border-radius: var(--radius);
    padding: .7rem 1rem; margin-bottom: 1rem; font-size: .86rem;
}

/* ==================== AI USAGE & COST ==================== */

.ag-tier {
    font-size: .61rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: .14rem .45rem; border-radius: 5px;
}
.ag-tier.t-frontier { background: #EDE7FB; color: #4C2E95; }
.ag-tier.t-balanced { background: #EAF0FE; color: #1B4DB1; }
.ag-tier.t-fast     { background: #E3F7EB; color: #04682F; }
.ag-rate {
    font-size: .8rem; font-weight: 700; color: var(--text); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ag-rate i {
    font-style: normal; font-weight: 400; font-size: .68rem;
    color: var(--text-dim); display: block; text-align: right;
}

.ag-day {
    display: grid; grid-template-columns: 96px 1fr 120px 80px; gap: .7rem;
    align-items: center; padding: .45rem 1rem; font-size: .82rem;
    border-bottom: 1px solid var(--border-soft);
}
.ag-day:last-child { border-bottom: none; }
.ag-day-date { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ag-day-bar { background: var(--surface-3); border-radius: 4px; height: 8px; overflow: hidden; }
.ag-day-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ag-day-n { color: var(--text-soft); text-align: right; }
.ag-day-cost { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
            .ag-day { grid-template-columns: 84px 1fr 76px; }
    .ag-day > .ag-day-n { display: none; }
}

/* ==================== THE STANDING TEAM ==================== */
.ag-agent {
    display: grid; grid-template-columns: 52px 1fr 210px 108px;
    gap: 1rem; align-items: center;
    padding: 1rem 1.15rem; border-bottom: 1px solid var(--border-soft);
    transition: background .12s ease;
}
.ag-agent:last-child { border-bottom: none; }
.ag-agent:hover { background: var(--surface-3); }

.ag-avatar {
    width: 52px; height: 52px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff; position: relative;
    box-shadow: 0 3px 10px rgba(16,32,64,.18);
}
.ag-avatar::after {
    content: ''; position: absolute; inset: 0; border-radius: 15px;
    border: 1px solid rgba(255,255,255,.28);
}
.ag-avatar.discover { background: linear-gradient(140deg, #4C8DFF, #1E5FBF); }
.ag-avatar.judge    { background: linear-gradient(140deg, #8C6BE8, #5B3FD0); }
.ag-avatar.sweep    { background: linear-gradient(140deg, #23C3A6, #0E8F7A); }
.ag-avatar.recheck  { background: linear-gradient(140deg, #F0B355, #D8892A); }

.ag-agent-main { min-width: 0; }
.ag-agent-id {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem;
}
.ag-agent-id > b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.ag-agent-role {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim); background: var(--surface-3);
    padding: .16rem .5rem; border-radius: 5px;
}
.ag-engine {
    font-size: .68rem; font-weight: 700; padding: .16rem .5rem; border-radius: 5px;
    display: inline-flex; align-items: center; gap: .3rem;
}
.ag-engine i { font-size: .8rem; }
.ag-engine.model { background: #EDE7FB; color: #4C2E95; }
.ag-engine.rules { background: #E8F1EC; color: #2A6B49; }

.ag-agent-duty {
    font-size: .84rem; line-height: 1.55; color: var(--text-soft); max-width: 86ch;
}
.ag-agent-last {
    font-size: .78rem; color: var(--ok); margin-top: .35rem; font-weight: 600;
}
.ag-agent-last i { font-weight: 700; }

.ag-job-sched {
    font-size: .78rem; font-weight: 600; color: var(--text);
    background: var(--surface-3); padding: .4rem .6rem; border-radius: 8px;
    text-align: center; border: 1px solid var(--border-soft);
}
.ag-job-sched i {
    display: block; font-style: normal; font-weight: 400;
    font-size: .68rem; color: var(--text-soft); line-height: 1.35; margin-top: .15rem;
}
.ag-job-when { text-align: right; font-size: .76rem; color: var(--text-soft); }
.ag-job-when b { display: block; font-size: .95rem; color: var(--text); font-weight: 700; }

/* ---- coverage ---- */
.ag-cov {
    display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .7rem 1rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.ag-cov-label { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.ag-cov-bar { background: var(--surface-3); border-radius: 5px; height: 10px; overflow: hidden; }
.ag-cov-bar i {
    display: block; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, #23C3A6, #0E8F7A);
}
.ag-cov-n { font-size: .78rem; color: var(--text-soft); white-space: nowrap; }

/* ==================== TRAINING ==================== */
.ag-train-intro {
    padding: .7rem 1.1rem; font-size: .83rem; line-height: 1.6; color: var(--text-soft);
    border-bottom: 1px solid var(--border-soft); background: var(--surface-3);
}
.ag-train-intro b { color: var(--text); }

.ag-basehead {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: 0 1.1rem .5rem; font-size: .84rem;
}

.ag-basehead b { font-size: .88rem; font-weight: 700; }

.md-pill.on { background: #E3F7EB; color: #04682F; }

/* ==================== AUDIT: colour and legend ==================== */
.ag-audit-legend {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    padding: .55rem 1rem; font-size: .77rem; color: var(--text-soft);
    background: var(--surface-2); border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.ag-audit-legend i.lg {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem;
}
.ag-audit-legend i.v-proposed    { background: #2E9E5B; }
.ag-audit-legend i.v-rejected    { background: #D0453E; }
.ag-audit-legend i.v-shortlisted { background: #E0A030; }

.ag-arow { border-left: 3px solid transparent; }
.ag-arow.r-proposed    { border-left-color: #2E9E5B; }
.ag-arow.r-rejected    { border-left-color: #D0453E; }
.ag-arow.r-shortlisted { border-left-color: #E0A030; }
.ag-arow.r-approved    { border-left-color: #1E5FBF; }
.ag-arow.r-unlinked    { border-left-color: #9AA6BC; }

.ag-adetail { border-left: 3px solid var(--border); }
.ag-reason {
    padding: .8rem .9rem; font-size: .87rem; line-height: 1.65;
    background: var(--surface); border-radius: var(--radius);
    border: 1px solid var(--border-soft); margin-bottom: .6rem;
}
.ag-ev {
    border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: .5rem;
    border: 1px solid transparent;
}
.ag-ev:not(.against) { background: #F0FAF3; border-color: #CBE9D6; }
.ag-ev.against       { background: #FDF2F1; border-color: #F3D2CF; }
.ag-ev b { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.ag-ev:not(.against) b { color: #1E6B3F; }
.ag-ev.against b       { color: #96201B; }
.ag-settle {
    border-radius: var(--radius); border: 1px solid #EFDCB4;
    background: #FDF8EC; padding: .6rem .9rem; margin-bottom: .5rem;
}

/* ==================== SETTINGS ==================== */
.ag-cfg .panel-head { border-bottom: 1px solid var(--border); }
.ag-cfg.danger { border-color: #F0D6D3; }
.ag-cfg.danger .panel-head { background: #FDF4F3; }
.md-pill.warn { background: #FDF3E1; color: #8A5A08; }

.ag-cfg-warn {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .7rem 1.1rem; font-size: .82rem; line-height: 1.55;
    background: #FDF8EC; border-bottom: 1px solid var(--border-soft); color: var(--text-soft);
}
.ag-cfg-warn i { color: #C98A16; font-size: 1rem; margin-top: .05rem; }
.ag-cfg-warn b { color: var(--text); }

.ag-set {
    display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
    padding: .8rem 1.1rem; border-bottom: 1px solid var(--border-soft);
}
.ag-set:last-child { border-bottom: none; }
.ag-set:hover { background: var(--surface-3); }
.ag-set > div { min-width: 0; }
.ag-set b { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .1rem; }
.ag-set span { font-size: .78rem; color: var(--text-soft); line-height: 1.5; }

@media (max-width: 1199.98px) {
    .ag-agent { grid-template-columns: 46px 1fr; row-gap: .6rem; }
    .ag-agent > .ag-job-sched { grid-column: 2; text-align: left; }
    .ag-agent > .ag-job-when  { grid-column: 2; text-align: left; }
    .ag-cov { grid-template-columns: 1fr; }
}

/* ==================== TEAM GRID (2 x 2) ==================== */
.ag-team-head {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.ag-team {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.ag-card {
    position: relative; text-align: left; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 1.1rem 1.15rem 1rem; box-shadow: var(--shadow);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.ag-card:hover {
    transform: translateY(-2px); border-color: #C3D2E8;
    box-shadow: 0 10px 26px rgba(16,32,64,.13);
}
.ag-card:hover .ag-card-open { opacity: 1; transform: translateX(0); }

.ag-card-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.ag-card-id { min-width: 0; flex: 1; }
.ag-card-id b {
    display: block; font-size: 1.14rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
}
.ag-card-id .ag-agent-role { display: inline-block; margin-top: .2rem; }

/* ---- the robot ---- */
.ag-avatar {
    width: 58px; height: 58px; border-radius: 17px; flex: 0 0 58px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; position: relative; box-shadow: 0 4px 12px rgba(16,32,64,.2);
}
.ag-avatar::before {
    content: ''; position: absolute; inset: 0; border-radius: 17px;
    border: 1px solid rgba(255,255,255,.3);
}
.ag-avatar.sm {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; box-shadow: none;
}
.ag-avatar.sm::before { border-radius: 10px; }
.ag-robot { width: 62%; height: 62%; display: block; }

.ag-avatar.discover { background: linear-gradient(145deg, #5C97FF, #1E5FBF); }
.ag-avatar.judge    { background: linear-gradient(145deg, #9B7BF0, #5B3FD0); }
.ag-avatar.sweep    { background: linear-gradient(145deg, #2ACFB0, #0E8F7A); }
.ag-avatar.recheck  { background: linear-gradient(145deg, #F5BC63, #D8892A); }

/* duty icon, tucked on the corner */
.ag-badge {
    position: absolute; right: -5px; bottom: -5px;
    width: 23px; height: 23px; border-radius: 8px; font-size: .72rem;
    background: var(--surface); color: var(--text-soft);
    border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(16,32,64,.16);
    display: inline-flex; align-items: center; justify-content: center;
}
.ag-avatar.sm .ag-badge { display: none; }

/* ---- heartbeat ---- */
.ag-pulse { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.ag-pulse.ok   { background: var(--ok); box-shadow: 0 0 0 3px rgba(0,166,81,.16); }
.ag-pulse.run  { background: var(--accent); animation: agBeat 1.4s ease-in-out infinite; }
.ag-pulse.idle { background: #C4CEDD; }
@keyframes agBeat {
    0%,100% { box-shadow: 0 0 0 0 rgba(30,107,255,.5); }
    50%     { box-shadow: 0 0 0 6px rgba(30,107,255,0); }
}

.ag-card .ag-engine { align-self: flex-start; margin-bottom: .6rem; }
.ag-card .ag-agent-duty { font-size: .845rem; line-height: 1.6; flex: 1; }
.ag-card .ag-agent-last { margin-top: .6rem; }

.ag-card-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--border-soft);
}
.ag-foot-sched, .ag-foot-when { font-size: .71rem; color: var(--text-soft); line-height: 1.4; }
.ag-foot-sched b, .ag-foot-when b {
    display: block; font-size: .82rem; color: var(--text); font-weight: 700;
}
.ag-foot-when { text-align: right; white-space: nowrap; }

.ag-card-open {
    position: absolute; right: 1.15rem; top: 1.15rem; font-size: .74rem; font-weight: 700;
    color: var(--accent); opacity: 0; transform: translateX(-4px); transition: all .14s ease;
}

/* ==================== AGENT DETAIL ==================== */
/* .ag-det-title is gone with the dialog header it styled — the hero says the
   same thing one row lower. */
.ag-det-why {
    padding: .9rem 1.15rem; font-size: .87rem; line-height: 1.65; color: var(--text-soft);
    background: var(--surface-3); border-bottom: 1px solid var(--border-soft);
}
.ag-det-why b { display: block; color: var(--text); font-size: .74rem;
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem; }
.ag-det-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .6rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--border-soft);
}
.ag-det-stats b { display: block; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.ag-det-stats span {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim);
}
.ag-det-sched {
    display: flex; align-items: center; gap: .6rem; padding: .75rem 1.15rem;
    background: #F5F8FF; border-bottom: 1px solid var(--border-soft); font-size: .82rem;
}
.ag-det-sched i { color: var(--accent); font-size: 1.05rem; }
.ag-det-sched b { display: block; }
.ag-det-sched span { color: var(--text-soft); }
.ag-det-head {
    padding: .8rem 1.15rem .4rem; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
}
.ag-det-run {
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .55rem 1.15rem; border-bottom: 1px solid var(--border-soft);
}
.ag-det-run:last-child { border-bottom: none; }
.ag-det-run .ag-dot { margin-top: .4rem; }
.ag-det-run b { display: block; font-size: .84rem; font-weight: 600; }
.ag-det-run span { font-size: .75rem; color: var(--text-soft); }

@media (max-width: 1499.98px) { .ag-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .ag-team { grid-template-columns: 1fr; } }

/* ==================== MENTWY: TEACHING REVIEW ==================== */
.ag-avatar.mentor { background: linear-gradient(145deg, #F2789B, #C43D6B); }

.ag-count { font-size: .72rem; font-weight: 600; color: var(--text-dim); text-align: right; }
.ag-count.warn { color: var(--warn); }
.ag-count.over { color: var(--bad); }

.ag-teach-note {
    display: flex; gap: .6rem; align-items: flex-start;
    background: linear-gradient(100deg, #FDF0F4, #F7F3FD);
    border: 1px solid #F3D9E3; border-radius: var(--radius);
    padding: .75rem .9rem; margin-bottom: .9rem; font-size: .82rem; line-height: 1.6;
    color: var(--text-soft);
}
.ag-teach-note i { color: #C43D6B; font-size: 1.05rem; margin-top: .1rem; }
.ag-teach-note b { color: var(--text); }

.ag-rev-head {
    display: flex; gap: .65rem; align-items: flex-start; border-radius: var(--radius);
    padding: .8rem .95rem; margin-bottom: .9rem; border: 1px solid transparent;
}
.ag-rev-head i { font-size: 1.2rem; margin-top: .05rem; }
.ag-rev-head b { display: block; font-size: .92rem; }
.ag-rev-head span { font-size: .84rem; line-height: 1.6; color: var(--text-soft); }
.ag-rev-head.ok   { background: #EDF9F1; border-color: #C6E6D2; }
.ag-rev-head.ok i { color: #1E7A45; }
.ag-rev-head.warn   { background: #FDF6E9; border-color: #EFDCB4; }
.ag-rev-head.warn i { color: #C98A16; }
.ag-rev-head.bad   { background: #FDF0EF; border-color: #F2CFCB; }
.ag-rev-head.bad i { color: #C0392B; }

.ag-rev-yours {
    background: var(--surface-3); border-radius: var(--radius); padding: .6rem .8rem;
    font-size: .83rem; line-height: 1.6; color: var(--text-soft); margin-bottom: .8rem;
    border-left: 3px solid var(--border);
}
.ag-rev-yours b {
    display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim); margin-bottom: .2rem;
}

.ag-rev-block {
    border-radius: var(--radius); padding: .65rem .85rem; margin-bottom: .7rem;
    background: #FDF6E9; border: 1px solid #EFDCB4; font-size: .82rem;
}
.ag-rev-block.bad { background: #FDF0EF; border-color: #F2CFCB; }
.ag-rev-block b {
    display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim); margin-bottom: .3rem;
}
.ag-rev-block ul { margin: 0; padding-left: 1.1rem; color: var(--text-soft); line-height: 1.6; }
.ag-rev-conflict { margin-bottom: .4rem; }
.ag-rev-conflict b {
    font-size: .82rem; text-transform: none; letter-spacing: 0;
    color: #96201B; margin-bottom: .05rem;
}
.ag-rev-conflict span { font-size: .8rem; color: var(--text-soft); line-height: 1.55; }

.ag-rev-label {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim); margin: 1rem 0 .45rem;
}
.ag-rev-opt {
    display: flex; gap: .65rem; align-items: flex-start; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .65rem .8rem; margin-bottom: .5rem; transition: all .12s ease;
}
.ag-rev-opt:hover { border-color: var(--accent); }
.ag-rev-opt:has(input:checked) {
    border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30,107,255,.12);
    background: #F7FAFF;
}
.ag-rev-opt.best { border-left: 3px solid var(--ok); }
.ag-rev-opt.raw  { border-left: 3px solid var(--text-dim); }
.ag-rev-opt input { margin-top: .25rem; flex: 0 0 auto; }
.ag-rev-opt b { display: block; font-size: .86rem; margin-bottom: .15rem; }
.ag-rev-body { display: block; font-size: .82rem; line-height: 1.6; color: var(--text-soft); }
.ag-rev-why {
    display: block; font-size: .73rem; color: var(--text-dim); margin-top: .3rem; font-style: italic;
}

.ag-rev-chip {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-size: .66rem; font-weight: 700; padding: .18rem .5rem; border-radius: 5px;
}
.ag-rev-chip.ok   { background: #E3F7EB; color: #04682F; }
.ag-rev-chip.warn { background: #FDF3E1; color: #8A5A08; }
.ag-rev-chip.bad  { background: #FDE9E8; color: #96201B; }

/* ---- drafts waiting on the training page ---- */
.ag-draft-wrap {
    background: linear-gradient(100deg, #FDF0F4, #FAF6FE);
    border-bottom: 1px solid #F0D9E4; padding: .75rem .9rem;
}
.ag-draft-head {
    display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700;
    color: #A33260; margin-bottom: .55rem;
}
.ag-draft {
    display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left;
    background: var(--surface); border: 1px solid #F0D9E4; border-radius: var(--radius);
    padding: .55rem .75rem; margin-bottom: .4rem; transition: all .12s ease;
}
.ag-draft:last-child { margin-bottom: 0; }
.ag-draft:hover { border-color: #C43D6B; transform: translateX(2px); }
.ag-draft-body {
    flex: 1; min-width: 0; font-size: .82rem; color: var(--text-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-draft-go { font-size: .74rem; font-weight: 700; color: #C43D6B; white-space: nowrap; }

/* ---- instruction cards: colour by kind ---- */
.ag-rule { border-left: 3px solid var(--border); }
.ag-rule:has(.k-rule)       { border-left-color: #1B4DB1; }
.ag-rule:has(.k-skill)      { border-left-color: #04682F; }
.ag-rule:has(.k-example)    { border-left-color: #4A5670; }
.ag-rule:has(.k-correction) { border-left-color: #8A5A08; }

.ag-train-intro {
    background: linear-gradient(100deg, #EEF3FD, #F4F1FD);
    border-bottom: 1px solid #DCE5F6; color: var(--text-soft);
}

/* the assembled prompt reacting to a change on the left */
.ag-prompt { transition: box-shadow .3s ease; }
.ag-prompt.just-changed { animation: agRebuild 2.4s ease; }
@keyframes agRebuild {
    0%   { box-shadow: 0 0 0 0 rgba(0,166,81,.55); }
    18%  { box-shadow: 0 0 0 4px rgba(0,166,81,.30); }
    100% { box-shadow: 0 0 0 0 rgba(0,166,81,0); }
}
.md-pill.on { background: #E3F7EB; color: #04682F; }

/* nothing salvageable — offering a list of one rejected option is a false choice */
.ag-rev-dead {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--surface-3); border: 1px dashed var(--border);
    border-radius: var(--radius); padding: .85rem .95rem; margin-top: .9rem;
}
.ag-rev-dead i { color: var(--text-dim); font-size: 1.15rem; margin-top: .1rem; }
.ag-rev-dead b { display: block; font-size: .88rem; margin-bottom: .15rem; }
.ag-rev-dead span { font-size: .82rem; line-height: 1.6; color: var(--text-soft); }

/* an override should look like one */
.ag-rev-opt.raw:has(input:checked) {
    border-color: var(--warn); box-shadow: 0 0 0 2px rgba(224,160,48,.15); background: #FDFAF3;
}

/* ---- a labelled "live" chip, distinct from the bare .live dot ----
   layout.css owns `.live` as a 6px status dot. This is the chip form: its own
   class, so neither can quietly resize the other. */
.ag-live-chip {
    display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: #04682F; background: #E3F7EB; border-radius: 20px;
    padding: .18rem .55rem .18rem .45rem; white-space: nowrap;
}
.ag-live-chip i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
    flex: 0 0 6px; box-shadow: 0 0 0 0 rgba(0,166,81,.6);
    animation: livePulse 2.4s infinite;
}

/* ---- model rows: give every text block room to breathe ---- */

/* .ag-model and .ag-model-main were left dangling here with a trailing comma.
   CSS ignores the comment between, so the selector list ran on and they were
   silently styled as .ag-set-group — tiny, uppercase, letter-spaced. */
.ag-model, .ag-model-main { min-width: 0; }

/* ---- settings, now inside the agent dialog ---- */
.ag-set-group {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem 1.15rem .35rem; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
}
.ag-set-group.danger { color: #96201B; }
.ag-set.danger { background: #FDFAF9; }
.ag-set.danger b { color: #7A2E28; }
.ag-det-runs { border-top: 1px solid var(--border-soft); }

/* ==================== WHERE THE MONEY GOES ==================== */
.ag-mrow {
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--border-soft);
}
.ag-mrow:last-child { border-bottom: none; }
.ag-mrow-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ag-mrow-top b { font-size: 1rem; font-weight: 700; }
.ag-mrow-cost {
    margin-left: auto; font-size: 1.15rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.ag-mrow-share {
    height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden;
    margin-bottom: .5rem;
}
.ag-mrow-share i {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #8C6BE8, #5B3FD0);
}
.ag-mrow-meta {
    display: flex; gap: .8rem; flex-wrap: wrap; font-size: .77rem;
    color: var(--text-soft); margin-bottom: .45rem;
}
.ag-mrow-meta > span:first-child { font-weight: 600; color: var(--ok); }
.ag-mrow-why { font-size: .83rem; line-height: 1.6; color: var(--text-soft); }

.ag-considered { border-top: 1px solid var(--border); background: var(--surface-3); }
.ag-considered > summary {
    display: flex; align-items: center; cursor: pointer; list-style: none;
    padding: .55rem 1.1rem; font-size: .78rem; font-weight: 600; color: var(--text-soft);
}
.ag-considered > summary::-webkit-details-marker { display: none; }
.ag-considered[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.ag-considered .bi-chevron-down { transition: transform .15s ease; }
.ag-cons-row {
    display: grid; grid-template-columns: 150px 120px 1fr; gap: .7rem;
    padding: .5rem 1.1rem; border-top: 1px solid var(--border-soft); align-items: baseline;
}
.ag-cons-row b { font-size: .82rem; }
.ag-cons-rate {
    font-size: .76rem; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.ag-cons-why { font-size: .79rem; line-height: 1.55; color: var(--text-soft); }

.ag-day { grid-template-columns: 92px 1fr 52px 72px; }

/* ==================== SPEND: SO FAR vs REMAINING ==================== */
.ag-spend {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.ag-spend-nums { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ag-spend-nums > div b {
    display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.ag-spend-nums > div span {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim);
}
.ag-spend-nums > div.mid b { color: var(--warn); }
.ag-spend-nums > div.tot { margin-left: auto; text-align: right; }
.ag-spend-nums > div.tot b { color: var(--accent); }
.ag-spend-bar {
    height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden;
}
.ag-spend-bar i {
    display: block; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, #8C6BE8, #5B3FD0);
}
.ag-spend-note { display: block; font-size: .77rem; color: var(--text-soft); margin-top: .4rem; }

/* ==================== COVERAGE ==================== */
.ag-cov {
    display: block; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.ag-cov-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.ag-cov-head > b { font-size: .88rem; }
.ag-cov-pct {
    font-size: 1.05rem; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums;
}
.ag-cov-tag {
    margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 5px;
}
.ag-cov-tag.ok     { background: #E3F7EB; color: #04682F; }
.ag-cov-tag.behind { background: #FDE9E8; color: #96201B; }
.ag-cov-bar { height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.ag-cov-bar i {
    display: block; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, #2ACFB0, #0E8F7A);
}
.ag-cov-facts {
    display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: .5rem;
    font-size: .78rem; color: var(--text-soft);
}
.ag-cov-facts b { color: var(--text); font-weight: 700; }
.ag-cov-note { font-size: .77rem; color: var(--text-dim); margin-top: .3rem; }

/* ==================== SETTINGS AS VETTED CHOICES ==================== */

/* Was `.ag-set.stacked` on its own line above this, which made it a DESCENDANT
   selector — so a setting value outside a stacked row had no styling at all. */
.ag-set-fixed { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Which match level this threshold falls inside. A bare "99" on a screen whose
   queue is full of 0-3 chips reads as a leftover from the old percentage; the
   chip makes the two scales visibly one system. The number stays because these
   settings cut WITHIN a level — auto-link at 99, level 3 opening at 95 — and
   collapsing that to a level picker would widen what links unattended. */
.ag-set-lvl {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--border);
}
.ag-set-lvl > span {
    font-size: .7rem; color: var(--text-dim); font-variant-numeric: tabular-nums;
}

.ag-choices { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

/* Same dangling-selector fault: this only applied inside .ag-set.danger. */
.ag-choice-note { font-size: .74rem; color: var(--text-dim); font-style: italic; }

/* ==================== AGENT DIALOG: HERO ==================== */
.ag-det-hero {
    display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.15rem;
    color: #fff;
}
.ag-det-hero.discover { background: linear-gradient(135deg, #5C97FF, #1E5FBF); }
.ag-det-hero.judge    { background: linear-gradient(135deg, #9B7BF0, #5B3FD0); }
.ag-det-hero.sweep    { background: linear-gradient(135deg, #2ACFB0, #0E8F7A); }
.ag-det-hero.recheck  { background: linear-gradient(135deg, #F5BC63, #D8892A); }
.ag-det-hero.mentor   { background: linear-gradient(135deg, #F2789B, #C43D6B); }
.ag-det-hero > div { min-width: 0; }
.ag-det-hero b { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.ag-det-hero > div > span:first-of-type {
    display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
    opacity: .85; margin-bottom: .5rem;
}
.ag-det-hero .ag-engine { background: rgba(255,255,255,.22); color: #fff; }
.ag-avatar.lg {
    width: 68px; height: 68px; border-radius: 19px; flex: 0 0 68px;
    background: rgba(255,255,255,.18); box-shadow: none;
}
.ag-avatar.lg::before { border-radius: 19px; border-color: rgba(255,255,255,.4); }

/* ==================== AGENT DIALOG: THREE DISTINCT SECTIONS ====================
   Facts, controls and history were one undifferentiated stack of grey rows.
   Each now has its own ground colour and a labelled header, so it is obvious
   at a glance which parts can be changed and which are just reporting. */
.ag-sec { border-top: 1px solid var(--border); }
.ag-sec-head {
    display: flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem .55rem;
}
.ag-sec-head b {
    font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}
.ag-sec-head i { font-size: .95rem; }
.ag-sec-tag {
    margin-left: auto; font-size: .66rem; font-weight: 700;
    padding: .16rem .5rem; border-radius: 5px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
}
.ag-sec-tag.can-change { background: #EAF0FE; border-color: #C9D9F7; color: #1B4DB1; }

.ag-sec.info   { background: var(--surface); }
.ag-sec.info   .ag-sec-head { color: #4A5670; }
.ag-sec.config { background: #F7FAFF; }
.ag-sec.config .ag-sec-head { color: #1B4DB1; }
.ag-sec.log    { background: var(--surface-3); }
.ag-sec.log    .ag-sec-head { color: #3D5170; }

.ag-sec-why {
    padding: 0 1.15rem .7rem; margin: 0;
    font-size: .86rem; line-height: 1.65; color: var(--text-soft);
}

/* ---- timeline ---- */
.ag-timeline { position: relative; padding: .2rem 1.15rem .4rem; }
.ag-tl {
    display: grid; grid-template-columns: 76px 16px 1fr; gap: .55rem;
    align-items: start; position: relative; padding: .4rem 0;
}
.ag-tl-time {
    font-size: .72rem; color: var(--text-dim); text-align: right;
    padding-top: .1rem; white-space: nowrap;
}
.ag-tl-mark {
    width: 11px; height: 11px; border-radius: 50%; margin: .22rem auto 0;
    border: 2px solid var(--surface); position: relative; z-index: 1;
}
.ag-tl-mark.ok   { background: var(--ok); }
.ag-tl-mark.warn { background: var(--warn); }
.ag-tl-mark.bad  { background: var(--bad); }
/* the connecting rail */
.ag-tl::before {
    content: ''; position: absolute; left: 83px; top: 1.1rem; bottom: -.4rem;
    width: 2px; background: var(--border);
}
.ag-tl:last-child::before { display: none; }
.ag-tl-body { min-width: 0; padding-bottom: .1rem; }
.ag-tl-body b {
    display: block; font-size: .83rem; font-weight: 600; line-height: 1.45;
}
.ag-tl-body span { font-size: .72rem; color: var(--text-dim); }

.ag-tl-more {
    display: block; width: calc(100% - 2.3rem); margin: .2rem 1.15rem .9rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
    padding: .55rem; font-size: .82rem; font-weight: 600; color: var(--accent);
    transition: all .12s ease;
}
.ag-tl-more:hover { border-color: var(--accent); background: #F7FAFF; }
.ag-tl-more span {
    display: block; font-size: .72rem; font-weight: 400; color: var(--text-dim);
}
.ag-tl-end {
    padding: .3rem 1.15rem 1rem; font-size: .74rem; color: var(--text-dim); text-align: center;
}

.ag-sec.config .ag-set { border-bottom-color: #E1EAF9; }
.ag-sec.config .ag-set:hover { background: #EEF4FF; }

/* ==================== COST OVER TIME ====================
   Catch-up and ongoing are shown apart on purpose. Added together, a one-week
   expense reads as a permanent one. */
.ag-fc { padding: 1rem 1.15rem .9rem; }
.ag-fc-total { margin-bottom: .55rem; }
.ag-fc-total > span:first-child {
    display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-dim);
}
.ag-fc-total b {
    display: block; font-size: 2.1rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ag-fc-of { font-size: .8rem; color: var(--ok); font-weight: 600; }
.ag-fc-of.over { color: var(--bad); }

.ag-fc-bar {
    display: flex; height: 12px; border-radius: 6px; overflow: hidden;
    background: var(--surface-3); margin-bottom: .8rem;
}
.ag-fc-bar i { display: block; height: 100%; }
.ag-fc-bar i.catch { background: linear-gradient(90deg, #8C6BE8, #5B3FD0); }
.ag-fc-bar i.on    { background: var(--ok); }

.ag-fc-split { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ag-fc-part {
    background: var(--surface-3); border-radius: var(--radius); padding: .7rem .85rem;
    border-left: 3px solid var(--border);
}
.ag-fc-part.catch { border-left-color: #5B3FD0; }
.ag-fc-part.on    { border-left-color: var(--ok); }
.ag-fc-part b {
    display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.ag-fc-part > span {
    display: block; font-size: .78rem; font-weight: 600; color: var(--text-soft);
}
.ag-fc-part i {
    display: block; font-style: normal; font-size: .72rem; color: var(--text-dim);
    margin-top: .2rem;
}

.ag-fc-steady {
    display: flex; gap: .65rem; align-items: flex-start;
    background: #EDF9F1; border-top: 1px solid #C6E6D2; border-bottom: 1px solid #C6E6D2;
    padding: .8rem 1.15rem; margin: .3rem 0 0;
}
.ag-fc-steady i.bi { color: #1E7A45; font-size: 1.1rem; margin-top: .1rem; }
.ag-fc-steady b { display: block; font-size: .92rem; margin-bottom: .15rem; }
.ag-fc-steady span { font-size: .81rem; line-height: 1.6; color: var(--text-soft); }

.ag-fc-head {
    padding: .8rem 1.15rem .4rem; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
}
.ag-fc-month {
    display: grid; grid-template-columns: 80px 1fr 60px 72px; gap: .7rem;
    align-items: center; padding: .4rem 1.15rem; font-size: .82rem;
}
.ag-fc-month .m { color: var(--text-soft); }
.ag-fc-month .b { background: var(--surface-3); border-radius: 4px; height: 8px; overflow: hidden; }
.ag-fc-month .b i {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #8C6BE8, #5B3FD0);
}
.ag-fc-month .d { text-align: right; color: var(--text-dim); font-size: .76rem; }
.ag-fc-month .c { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) { .ag-fc-split { grid-template-columns: 1fr; } }

/* ==================== SETTINGS WITH CONSEQUENCES ====================
   Two of these move real money and several change how long things take. Each
   option carries its delta against the current selection, because "$150" means
   nothing without "$6.64 more than now". */
.ag-sec.config #agSettingsBody {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 0;
}
.ag-sec.config .ag-set-group { grid-column: 1 / -1; }

.ag-set {
    display: block; padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft);
}
.ag-set-label { margin-bottom: .55rem; }
.ag-set-label b {
    display: inline; font-size: .88rem; font-weight: 700; margin-right: .4rem;
}
.ag-set-label > span {
    display: block; font-size: .78rem; color: var(--text-soft); line-height: 1.55; margin-top: .15rem;
}
.ag-set-flag {
    display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; padding: .12rem .4rem; border-radius: 4px;
    background: #FDF3E1; color: #8A5A08; vertical-align: middle;
}
.ag-set.costs { background: #FFFDF8; }
.ag-set.danger { background: #FDFAF9; }
.ag-set.danger .ag-set-label b { color: #7A2E28; }
.ag-set:hover { background: #F4F8FF; }
.ag-set.danger:hover { background: #FCF5F4; }

.ag-choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.ag-choice {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: .34rem .6rem; font-size: .8rem; font-weight: 600; color: var(--text-soft);
    transition: border-color .13s ease, background .13s ease, box-shadow .13s ease, color .13s ease;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.ag-choice:hover { border-color: var(--accent); background: #F4F8FF; color: var(--accent); }

/* The chosen value. One treatment everywhere — inside the auto-link group this
   went alarm-red, so your own selection looked like a fault report. */
.ag-choice.on {
    background: var(--navy-800); border-color: var(--navy-800); color: #fff;
    box-shadow: 0 1px 4px rgba(16,32,64,.22);
}
.ag-choice.on:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* A setting that links records with no human review still deserves marking —
   as a ring on the selected chip, not by recolouring it. */
.ag-set.danger .ag-choice.on { box-shadow: 0 0 0 2px rgba(150,32,27,.32); }

.ag-choice i.d {
    font-style: normal; font-size: .66rem; font-weight: 700; white-space: nowrap;
    padding: .06rem .32rem; border-radius: 5px;
}
.ag-choice i.d.up   { background: #FDECEA; color: #A32B22; }   /* costs more */
.ag-choice i.d.down { background: #E6F7EC; color: #04682F; }   /* costs less */
.ag-choice i.d.same { background: var(--surface-3); color: var(--text-dim); }
.ag-choice i.d.now  { background: rgba(255,255,255,.22); color: #fff; }
.ag-choice.on i.d.up   { background: rgba(255,255,255,.22); color: #FFD9D6; }
.ag-choice.on i.d.down { background: rgba(255,255,255,.22); color: #C8F2D8; }
.ag-choice.on i.d.same { background: rgba(255,255,255,.18); color: rgba(255,255,255,.82); }

.ag-impact {
    display: flex; align-items: center; gap: .4rem; margin-top: .5rem;
    font-size: .76rem; font-weight: 600; padding: .3rem .55rem; border-radius: 6px;
}
.ag-impact.cost   { background: #FDF3E1; color: #8A5A08; }
.ag-impact.speed  { background: #EAF0FE; color: #1B4DB1; }
.ag-impact.volume { background: #EEF1F7; color: #4A5670; }
.ag-choice-note {
    font-size: .74rem; color: var(--text-dim); font-style: italic; margin-top: .3rem;
}

@media (max-width: 991.98px) {
    .ag-sec.config #agSettingsBody { grid-template-columns: 1fr; }
}

/* ==================== AUDITOR FINDINGS ==================== */
.ag-avatar.audit { background: linear-gradient(145deg, #7C8CA8, #46566F); }
.ag-det-hero.audit { background: linear-gradient(135deg, #8394AE, #46566F); }

.ag-finds {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); margin-bottom: 1rem; overflow: hidden;
}
.ag-finds-head {
    display: flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem;
    background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .86rem;
}
.ag-finds-head i { color: #46566F; font-size: 1.05rem; }
.ag-finds-head span { font-size: .72rem; color: var(--text-dim); }

.ag-find {
    display: grid; grid-template-columns: 24px 1fr auto; gap: .7rem;
    padding: .85rem 1.1rem; border-bottom: 1px solid var(--border-soft);
    border-left: 3px solid transparent;
}
.ag-find:last-child { border-bottom: none; }
.ag-find > i { font-size: 1.05rem; margin-top: .1rem; }
.ag-find.bad  { border-left-color: var(--bad);  background: #FDF7F6; }
.ag-find.bad > i  { color: var(--bad); }
.ag-find.warn { border-left-color: var(--warn); background: #FFFDF7; }
.ag-find.warn > i { color: #C98A16; }
.ag-find.ok   { border-left-color: #9AA6BC; }
.ag-find.ok > i   { color: #7C8CA8; }

.ag-find-body { min-width: 0; }
.ag-find-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ag-find-top b { font-size: .92rem; }
.ag-find-who {
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    background: var(--surface-3); border: 1px solid var(--border);
    padding: .1rem .4rem; border-radius: 4px; color: var(--text-dim);
}
.ag-find-body p {
    margin: .3rem 0 0; font-size: .83rem; line-height: 1.65; color: var(--text-soft);
    max-width: 100ch;
}
.ag-find-fix {
    margin-top: .5rem; font-size: .81rem; line-height: 1.6; color: var(--text-soft);
    background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
    padding: .5rem .7rem; max-width: 100ch;
}
.ag-find-fix b {
    display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim); margin-bottom: .15rem;
}
.ag-find-act { align-self: start; }

.ag-find-clear {
    display: flex; align-items: center; gap: .6rem;
    background: #EDF9F1; border: 1px solid #C6E6D2; border-radius: var(--radius);
    padding: .7rem 1rem; margin-bottom: 1rem; font-size: .82rem; color: var(--text-soft);
}
.ag-find-clear i { color: #1E7A45; font-size: 1.1rem; }

/* ---- recommended value, and getting back to it ---- */
.ag-rec {
    display: flex; align-items: center; gap: .35rem; margin-top: .45rem;
    font-size: .74rem; font-weight: 600;
}
.ag-rec.on  { color: #1E7A45; }
.ag-rec.off { color: #8A5A08; }
.ag-rec i { font-size: .8rem; }
.ag-rec-btn {
    background: none; border: none; padding: 0 0 0 .1rem;
    font-size: .74rem; font-weight: 700; color: var(--accent); text-decoration: underline;
}
.ag-rec-btn:hover { color: var(--navy-800); }

/* ---- findings the Auditor repaired itself ---- */
.ag-find.fixed { background: #F4FBF6; border-left-color: var(--ok); }
.ag-find.fixed > i { color: var(--ok); }
.ag-find-tag {
    font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    padding: .12rem .4rem; border-radius: 4px;
}
.ag-find-tag.fixed { background: #E3F7EB; color: #04682F; }
.ag-find-tag.human { background: #EAF0FE; color: #1B4DB1; }
.ag-find-fix.done { background: #EDF9F1; border-color: #C6E6D2; }
.ag-find-fix.done b { color: #1E7A45; }
.ag-find-why {
    display: flex; gap: .4rem; align-items: flex-start; margin-top: .45rem;
    font-size: .78rem; line-height: 1.55; color: var(--text-dim); max-width: 100ch;
}
.ag-find-why i { color: #7C8CA8; margin-top: .1rem; }

/* ==================== THE RATE EVERYTHING DERIVES FROM ====================
   One model is in use, so one rate matters. The other four in the catalogue
   changed nothing on this page, which is what made a five-row table read as an
   unexplained catalogue rather than the single thing it is: keep this current,
   or every figure above quietly stops being true. */
.ag-rate-box {
    display: flex; align-items: center; gap: .9rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .85rem 1.1rem; margin-top: 1rem;
}
.ag-rate-box > i { font-size: 1.1rem; color: var(--text-dim); }
.ag-rate-box.stale > i { color: #C98A16; }
.ag-rate-main { flex: 1; min-width: 0; }
.ag-rate-main b { display: block; font-size: .88rem; margin-bottom: .1rem; }
.ag-rate-main > span {
    font-size: .8rem; line-height: 1.6; color: var(--text-soft); max-width: 95ch; display: block;
}
.ag-rate-main .warn-text { display: inline; color: #8A5A08; }
.ag-rate-nums { display: flex; gap: 1.3rem; }
.ag-rate-nums b {
    display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.ag-rate-nums span {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim);
}
.ag-rate-box.stale { border-color: #EFDCB4; background: #FFFDF7; }

/* Same again — .ag-rate-box.stale was left dangling, so .ag-rate-when only
   styled inside a stale box. */
.ag-rate-when {
    margin-left: auto; white-space: nowrap; align-self: center;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    background: var(--surface-3); color: var(--text-dim);
    padding: .18rem .5rem; border-radius: 5px;
}
.ag-rate-when.stale { background: #FDF3E1; color: #8A5A08; }


/* ---- the Auditor's findings, summarised on the team page ----
   The full list used to sit here and pushed all six agents below the fold,
   reading as though the whole system were reporting rather than one agent.
   One line now; the detail lives inside the Auditor where it belongs. */
.ag-find-strip {
    display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
    gap: .6rem; width: 100%; text-align: left; border-radius: 10px;
    padding: .7rem 1rem; margin-bottom: .9rem; cursor: pointer;
    border: 1px solid var(--border-soft); background: var(--surface);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.ag-find-strip:hover { border-color: #C3D2E8; box-shadow: var(--shadow); }
.ag-find-strip > .bi:first-child { font-size: 1.15rem; }
.ag-find-strip b { font-size: .84rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.ag-find-strip span {
    font-size: .76rem; color: var(--text-dim); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-find-strip em {
    font-style: normal; font-size: .74rem; font-weight: 700; color: var(--accent);
    white-space: nowrap; display: flex; align-items: center;
}
.ag-find-strip.ok    > .bi:first-child { color: var(--ok); }
.ag-find-strip.ok    { background: linear-gradient(90deg, rgba(0,166,81,.06), var(--surface) 55%); }
.ag-find-strip.warn  > .bi:first-child { color: var(--warn); }
.ag-find-strip.warn  { background: linear-gradient(90deg, rgba(214,158,46,.09), var(--surface) 55%); }
.ag-find-strip.bad   > .bi:first-child { color: var(--bad); }
.ag-find-strip.bad   { background: linear-gradient(90deg, rgba(197,48,48,.09), var(--surface) 55%); }
.ag-find-strip.clear > .bi:first-child { color: var(--ok); }

@media (max-width: 991.98px) {
    .ag-find-strip { grid-template-columns: auto 1fr; }
    .ag-find-strip span, .ag-find-strip em { grid-column: 1 / -1; white-space: normal; }
}

/* the findings section inside the Auditor's own dialog */
.ag-sec.finds { border-left: 3px solid var(--accent); }
.ag-sec.finds .ag-finds { border: 0; margin: 0; }
.ag-sec.finds .ag-finds-head { display: none; }

/* ---- the Arbiter's own progress, alongside Sentinel's ----
   Two bars measuring different things, so they are visually distinct: Sentinel
   counts records patrolled, this counts pairs decided. The strip underneath
   exists because nothing in the app said how the two agents relate. */
.ag-cov.ag-arb { border-left: 3px solid var(--accent); margin-top: .75rem; }
.ag-cov.ag-arb .ag-cov-bar > i {
    background: linear-gradient(90deg, var(--accent), #6EA8FF);
}
.ag-cov-tag.work {
    background: #EEF3FF; border-color: #C7D8F7; color: #1B4FA8;
}
.ag-pair-note {
    display: flex; align-items: flex-start; gap: .5rem;
    border-top: 1px dashed var(--border-soft); margin-top: .55rem; padding-top: .5rem;
    font-size: .74rem; line-height: 1.5; color: var(--text-dim);
}
.ag-pair-note > .bi { font-size: .9rem; color: var(--accent); flex: 0 0 auto; margin-top: .1rem; }
.ag-pair-note b { color: var(--text); font-weight: 700; }

/* Brands without a square mark (Thumbies, CemSites) get a text tag instead, so
   an audit row always says which two companies were compared. Without it those
   rows showed a name and a city and nothing identifying the brand at all. */
.ag-party-co {
    flex: 0 0 auto; font-size: .58rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: .12rem .34rem; border-radius: 4px;
    background: var(--surface-3); color: var(--text-dim); white-space: nowrap;
}
.ag-party-co.co-thumbies { background: #EDF0F4; color: #45566A; }
.ag-party-co.co-cemsites { background: #EEF2F9; color: #4E5D78; }

/* The control column of a setting row: the toggle or choice buttons, the
   "recommended" note under them, and the level chip added in 0085. It was
   emitted by _settingRow() from the start and never had a rule, so those three
   pieces stacked as bare blocks with no spacing between them. */
.ag-set-ctl {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: .35rem; min-width: 0;
}
.ag-set-ctl > * { max-width: 100%; }
@media (max-width: 767.98px) {
    .ag-set-ctl { align-items: flex-start; }
}

/* ==================== AGENT SETTINGS: READABLE AT A GLANCE ====================
   The grid put four columns of wildly different text lengths side by side, so
   every cell grew to the tallest and the value ended up floating at the bottom
   right, far from the label it belonged to. A five-setting group left one card
   alone in a row with three empty cells beside it.

   Each setting is now a self-contained card: name and current value on one line,
   the explanation beneath, and anything interactive below that. Narrower columns
   mean fewer orphans and no cell stretched to match a neighbour. */
.ag-sec.config #agSettingsBody {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: .7rem; padding: .7rem .9rem 1rem;
    align-items: start;                 /* stop short cards stretching to the tallest */
}

.ag-set {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .8rem .9rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); border-right: 1px solid var(--border);
}
.ag-set:hover { border-color: #C8D6EE; background: var(--surface); }

/* name ......................... value */
.ag-set-head {
    display: flex; align-items: baseline; gap: .5rem;
    justify-content: space-between;
}
.ag-set-head > b {
    display: block; font-size: .84rem; font-weight: 700; line-height: 1.3;
    color: var(--text); margin: 0;
}
.ag-set-now {
    flex: 0 0 auto; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--text);
    align-self: center;
}
/* A toggle IS the value, so it sits in the same slot. */
.ag-set-head .ag-switch { flex: 0 0 42px; align-self: center; }

.ag-set-help {
    margin: 0; font-size: .755rem; line-height: 1.5; color: var(--text-soft);
}
.ag-set-body {
    display: flex; flex-direction: column; gap: .4rem; margin-top: .15rem;
}
.ag-set-lvl { margin-top: 0; padding-top: .4rem; }

/* Section headers span the grid and read as dividers, not as another card. */
.ag-sec.config .ag-set-group {
    grid-column: 1 / -1; padding: .55rem .15rem .1rem; margin: 0;
    border-bottom: 1px solid var(--border-soft);
}

/* AUTO-LINK creates links with no human review. It should not look like the
   paragraph above it. */
.ag-set-group.danger {
    color: #96201B; border-bottom-color: #F2CFCB;
}
.ag-set.danger {
    background: #FFFBFA; border-color: #F2CFCB;
    box-shadow: inset 3px 0 0 #C0392B;
}
.ag-set.danger:hover { border-color: #E9B4AE; }
.ag-set.danger .ag-set-head > b { color: #7A2E28; }

.ag-set.costs .ag-set-flag { align-self: flex-start; }

@media (max-width: 575.98px) {
    .ag-sec.config #agSettingsBody { grid-template-columns: 1fr; }
}

/* ==================== TEMPORARY: THE LEADERSHIP CAST ====================
   Portraits and borrowed first names for the six agents — presentation only,
   see CAST in agent.js. Deliberately the LAST block in this file: it has to
   win over .ag-card-id b and .ag-det-hero b, both of which set display:block,
   and keeping it in one contiguous chunk at the bottom means removing the joke
   is deleting this block and CAST. Nothing else references these classes.

   The photo sits INSIDE the avatar rather than replacing it, so each agent
   keeps the colour it is identified by everywhere else — the gradient becomes
   a frame. The drawn robot is still underneath: if a portrait 404s the img
   removes itself and the original face shows through, rather than an empty
   coloured square. */
.ag-face {
    position: absolute; inset: 3px;
    width: calc(100% - 6px); height: calc(100% - 6px);
    border-radius: 16px; object-fit: cover; object-position: 50% 14%;
    background: #fff; display: block;
}
.ag-avatar.sm .ag-face {
    inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 10px;
}
.ag-avatar.lg .ag-face {
    inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 18px;
}
/* The badge is a corner overlay and must stay above the photo. */
.ag-avatar .ag-badge { z-index: 2; }

/* A drawn robot only had to read as an icon; a face is worth looking at, so the
   avatar is larger everywhere it appears, and lifts on hover. The card itself
   already rises 2px on hover — the portrait rises further, so it reads as the
   thing you are about to open.

   THE HEADER IS REORGANISED FOR THIS SIZE. At 117px the portrait is taller than
   a name and one chip, so the engine chip was moved up out of its own row and
   now sits beside the role chip (see loadPipeline in agent.js) — otherwise the
   card carried a band of blank space next to every face. */
.ag-card .ag-avatar {
    width: 117px; height: 117px; flex: 0 0 117px; border-radius: 30px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ag-card .ag-avatar::before { border-radius: 30px; }
.ag-card .ag-face { border-radius: 27px; object-position: 50% 12%; }
.ag-card:hover .ag-avatar {
    transform: scale(1.07); box-shadow: 0 14px 30px rgba(16,32,64,.32); z-index: 3;
}
/* Bigger face, bigger duty badge, or it disappears against the corner. */
.ag-card .ag-badge {
    width: 30px; height: 30px; font-size: .92rem; border-radius: 10px;
    right: -6px; bottom: -6px;
}

/* Name, then role + engine on one wrapped row, vertically centred on the face. */
.ag-card-top { align-items: center; margin-bottom: .85rem; }
.ag-cast-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .55rem;
}
.ag-card-id .ag-agent-role { margin-top: 0; }
.ag-card .ag-cast-chips .ag-engine { margin: 0; align-self: auto; }
/* The heartbeat belongs at the top of a header this tall, not floating in its
   middle where it reads as attached to nothing. */
.ag-card .ag-pulse { align-self: flex-start; margin-top: .3rem; }

.ag-avatar.lg {
    width: 88px; height: 88px; flex: 0 0 88px; border-radius: 24px;
}
.ag-avatar.lg::before { border-radius: 24px; }
.ag-avatar.lg .ag-face { border-radius: 20px; }

/* .ag-avatar.sm had one caller — the dialog title bar — and that is gone, so
   the sizing overrides that lived here went with it. The base .ag-avatar.sm
   rules further up this file are untouched in case anything wants them back. */

/* "Bruce the Sentinel" — the borrowed name leads, "the" is quiet, and the real
   agent name keeps its weight because that is the one used everywhere else.
   The three spans need real space between them, and `display:flex` alone does
   not get it: `.ag-card-id b` and `.ag-det-hero b` are both more specific and
   force display:block, at which point a flex gap is not applied at all and the
   words run together as "HeathertheScout". So the selectors below carry the
   matching specificity, AND the separator keeps its own margins — the spacing
   then survives whichever display wins. */
.ag-card-id b.ag-cast-name,
.ag-det-hero b.ag-cast-name,
.ag-cast-name {
    display: flex; align-items: baseline; flex-wrap: wrap; row-gap: 0;
}
.ag-cast-first { font-weight: 800; }
.ag-cast-the {
    font-weight: 400; font-style: italic; font-size: .8em;
    opacity: .5; letter-spacing: .01em; margin: 0 .34em;
}
.ag-cast-real { font-weight: 700; }

/* Two names is a longer line than one word was: give it a little more size and
   let the role chip breathe under it instead of sitting against the descenders. */
.ag-card-id b.ag-cast-name { font-size: 1.3rem; line-height: 1.15; }
.ag-card-top { gap: 1.15rem; }
.ag-det-hero { gap: 1.15rem; }

/* ---- the dialog with no header ----
   The hero is now the first thing in the modal, so it has to carry the modal's
   own top corners; without overflow:hidden a square gradient pokes out past the
   rounded content. Bootstrap tooltips render on <body>, so nothing inside gets
   clipped by it. */
.ag-det-content { overflow: hidden; }
/* The close button has to stay legible over both the coloured hero AND the
   white body it sits above once the dialog is scrolled — hence the disc behind
   it rather than a bare X. */
.ag-det-close {
    position: absolute; top: .75rem; right: .8rem; z-index: 5;
    width: 32px; height: 32px; padding: 0; opacity: .9;
    border-radius: 50%; background-color: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(16, 32, 64, .28);
}
.ag-det-close:hover { opacity: 1; background-color: #fff; }
/* Nothing above the hero now, so it needs a little more room at the top, and
   the name must not run under the close button. */
.ag-det-hero { padding-top: 1.4rem; padding-right: 3.2rem; }