@import url('tokens.css');

/* ============================================================================
   Agent page (ADR 0031, Template A) — the embedded MCP server settings surface.
   Page-specific classes follow the .cn-* / .acct-* convention (global, not CSS
   isolation, so they also reach elements rendered by the page's code-behind
   RenderFragment helpers and by the shared NumberField/Button). Every themed value
   reads a token; the bare px are the sanctioned structural-dimension exception.
   ============================================================================ */

/* The connection sub-panel dims + goes non-interactive while the master switch is off
   (same look as .ui-card.disabled). */
.agent-disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Eyebrow subheads spacing the Allowed-areas groups. */
.agent-eyebrow {
    margin-top: var(--space-8);
    margin-bottom: var(--space-1);
}

/* The port field: right-aligned text, fixed minimum width (100px). The shared NumberField puts
   this class on its <input>. */
.agent-port {
    text-align: right;
    min-width: 100px;
}

/* A snippet block: the read-only monospace code box + its Copy button on one row. */
.agent-snippet {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* The read-only code box on the recessed surface. */
.agent-code {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    color: var(--color-text);
    white-space: pre;
    overflow-x: auto;
}

/* The Claude Code command + endpoint boxes wrap; the config snippets stay on one line (with
   horizontal scroll). */
.agent-code.wrap {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: visible;
}

.agent-copy-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ============================================================================
   Connect a client — the picker and the stepped setup.

   The chooser is a row of rounded pills, one per client, the chosen one filled
   solid in the accent: a choice between known products, not a form's tab strip.
   Every pill wears the same house mark (a client's logo is that company's mark
   and the app embeds no outside artwork), so the mark is texture and the NAME
   is what tells the pills apart.

   Below it, the chosen client's setup is split into ROUTES — one per separate
   installation — and each route is a numbered list. That is what keeps the two
   products of one brand apart: two route heads, "Chat app" then "Command line",
   each with its own steps, under the sentence that says connecting one does not
   connect the other.
   ============================================================================ */

.agent-clients {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.agent-client {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--dur-quick) var(--ease-out),
                border-color var(--dur-quick) var(--ease-out),
                color var(--dur-quick) var(--ease-out);
}

/* The pill paints a fill of its own, so the hover wash layers OVER it as an image
   (a background-color would replace the fill). */
.agent-client:hover:not(.active) {
    background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
    color: var(--color-text);
}

.agent-client.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: var(--font-weight-semibold);
}

/* The house mark: quiet beside an unchosen name, and on the chosen pill it takes the
   pill's own ink so the fill reads as one solid shape. */
.agent-client-mark { color: var(--color-text-disabled); }
.agent-client:hover:not(.active) .agent-client-mark { color: var(--color-text-secondary); }
.agent-client.active .agent-client-mark { color: currentColor; }

/* The setup sits in its own band under the chooser. */
.agent-client-panel {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-stroke-subtle);
}

/* The standing sentence some clients open with carries the well's own vertical margin, which
   would double the band's padding at the top of the panel. */
.agent-client-panel > .ui-principle:first-child { margin-top: 0; }

/* ---- One route = one separate installation ----------------------------------- */

.agent-route + .agent-route {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-stroke-subtle);
}

/* The kind reads above the name (it reuses the shared .eyebrow), so "Chat app" and
   "Command line" separate two products of the same brand at a glance. */
.agent-route-kind { margin-bottom: var(--space-1); }

.agent-route-name {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.agent-route-lead {
    margin-top: var(--space-2);
    text-wrap: pretty;
}

/* ---- The numbered steps ------------------------------------------------------- */

.agent-steps {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    counter-reset: agent-step;
}

.agent-step {
    position: relative;
    padding-left: var(--space-8);
    padding-bottom: var(--space-5);
}

.agent-step:last-child { padding-bottom: 0; }

/* The ordinal, drawn from the list itself so no number is ever typed into the markup. */
.agent-step::before {
    counter-increment: agent-step;
    content: counter(agent-step);
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    font-family: var(--font-mono);
    font-size: var(--font-size-description);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* The rail joining a step to the one after it, so the list reads as a sequence. */
.agent-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: var(--space-2);
    width: 1px;
    background: var(--color-stroke-subtle);
}

.agent-step-title {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 22px;
}

.agent-step .field-description { margin-top: var(--space-1); }
.agent-step-action { margin-top: var(--space-3); }

/* A file path or a config name named inside a step's line. */
.agent-path {
    padding: 1px var(--space-2);
    border: 1px solid var(--color-stroke-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
}

/* ============================================================================
   Access console + capability ledger — the page's two reshaped sections. The
   surface reads as a permit board: a calm posture readout up top, then a ledger
   where every capability wears its CONSEQUENCE TIER (Read · Configure · Operate ·
   Restore). Colour is deliberately restrained — Read/Configure stay neutral; only
   Operate/Restore carry a SOFT semantic tint (the same caution/critical-bg tokens
   .ui-note-caution already uses), and the tally lights a tier dot only once that
   tier is actually armed. Legibility, not alarm.
   ============================================================================ */

/* ---- Access console ---------------------------------------------------------- */

/* On/off state pill beside the master switch: Open reads active (accent — "live /
   connected", never a danger colour), Sealed reads quiet (neutral). */
.agent-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-description);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.agent-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-neutral);
}

.agent-state.on { color: var(--color-accent-text); }
.agent-state.on .agent-state-dot { background: var(--color-accent); }

/* Eyebrow label above the promoted endpoint readout (which reuses .agent-snippet). */
.agent-field-label {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ---- Granted tally — the posture readout (a live function of the toggles) ----- */
.agent-tally {
    margin: var(--space-5) 0;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-stroke-subtle);
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.agent-tally-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
}

.agent-tally-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Unlit = quiet grey; a tier lights its own colour only once at least one of its
   capabilities is armed — so a plain read/configure setup shows no warning colour. */
.agent-tally-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-neutral);
}

.agent-tally-dot.lit.agent-tier-read,
.agent-tally-dot.lit.agent-tier-configure { background: var(--color-accent); }
.agent-tally-dot.lit.agent-tier-operate { background: var(--color-caution); }
.agent-tally-dot.lit.agent-tier-restore { background: var(--color-critical); }

.agent-tally-count {
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.agent-tally-label {
    font-size: var(--font-size-description);
    color: var(--color-text-secondary);
}

.agent-tally-sub { margin-top: var(--space-3); }
.agent-tally-live { color: var(--color-caution); font-weight: var(--font-weight-medium); }

/* The count and what of it is live are two readings in one line, so the separator between them is
   drawn here rather than written into the markup, where the compiler drops the space around it. */
.agent-tally-live::before {
    margin-inline: var(--space-2);
    content: "\00b7";
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

/* ---- Capability ledger ------------------------------------------------------- */

/* Intro sits tight above the first group eyebrow (the eyebrow's own 32px top margin
   is the between-group rhythm, too much directly under the intro sentence). */
.agent-areas-intro { margin-bottom: var(--space-3); }
.agent-areas-intro + .agent-eyebrow { margin-top: var(--space-4); }

.agent-cap-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.agent-cap-row + .agent-cap-row { border-top: 1px solid var(--color-stroke-subtle); }

.agent-cap-text { flex: 1 1 auto; min-width: 0; }
.agent-cap-text .field-description { margin-top: var(--space-1); }
.agent-cap-control { flex: 0 0 auto; padding-top: 1px; }

/* The consequence-tier chip — the page's signature. Fixed width so the chips form a
   scannable column down the ledger. Read/Configure are calm neutral (differentiated
   by the word itself + a small ink step); Operate/Restore carry a soft tint. */
.agent-tier {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 90px;
    margin-top: 1px;
    padding: 2px var(--space-3);
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.agent-tier-configure { color: var(--color-text); }
.agent-tier-operate { background: var(--color-caution-bg); color: var(--color-caution); }
.agent-tier-restore { background: var(--color-critical-bg); color: var(--color-critical); }