/* /Components/Pages/Settings.razor.rz.scp.css */
/* Settings — the sketchbook's index page. Same rail + content DNA as the
   dashboard: a recessed pencil-dashed nav rail on the left, one sketch-cornered
   card per section on the right. The MCP cards push the metaphor further:
   scopes are stickers, statuses are hand-stamps, the one-time secret is a
   taped-on amber post-it, snippets are little terminal windows. GlassPanel
   renders the card element itself (outside this component's CSS scope), hence
   the ::deep hops. */

/* ---- Layout ---------------------------------------------------------- */

.settings-body[b-elb5aqaip9] {
    display: grid;
    /* No align-items: start — the stretched grid cell is what gives the
       sticky rail its travel range (same trick as .dashboard-body.with-rail). */
    grid-template-columns: 220px minmax(0, 960px);
    gap: 24px;
    justify-content: center;
}

.settings-content[b-elb5aqaip9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.settings-anchor[b-elb5aqaip9] {
    /* Clear the topbar when a rail link scrolls a section into view. */
    scroll-margin-top: 96px;
    /* Cards settle onto the page one after the other — a single orchestrated
       moment on load, not a scattered effect. */
    animation: settings-rise-b-elb5aqaip9 0.4s ease-out backwards;
}

.settings-anchor:nth-child(2)[b-elb5aqaip9] { animation-delay: 0.06s; }
.settings-anchor:nth-child(3)[b-elb5aqaip9] { animation-delay: 0.12s; }
.settings-anchor:nth-child(4)[b-elb5aqaip9] { animation-delay: 0.18s; }

@keyframes settings-rise-b-elb5aqaip9 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .settings-anchor[b-elb5aqaip9] { animation: none; }
}

.settings-anchor[b-elb5aqaip9]  .settings-card {
    padding: 26px 30px 30px;
    border: var(--sketch-border-w) solid var(--sketch-border);
    border-radius: var(--sketch-radius-a);
}

/* Alternate the pencilled corners so the stack doesn't look stamped from the
   same mould — the cards' counterpart to the gallery's a/b radii. */
.settings-anchor:nth-child(even)[b-elb5aqaip9]  .settings-card {
    border-radius: var(--sketch-radius-b);
}

/* ---- Section rail ---------------------------------------------------- */

.settings-rail[b-elb5aqaip9] {
    position: sticky;
    top: 96px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    background: var(--quindi-surface-0);
    border: var(--sketch-border-w) dashed var(--sketch-border);
    border-radius: var(--sketch-radius-b);
    max-height: calc(100vh - 128px);
    overflow-y: auto;
}

.settings-rail-title[b-elb5aqaip9] {
    padding: 2px 10px 10px;
    font-family: var(--font-hand);
    font-size: 16px;
    color: var(--quindi-text-soft);
}

.settings-rail-link[b-elb5aqaip9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--quindi-text-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.settings-rail-link:hover[b-elb5aqaip9] {
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    text-decoration: none;
}

.settings-rail-link:focus-visible[b-elb5aqaip9] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.settings-rail-link.is-active[b-elb5aqaip9] {
    background: var(--accent-soft);
    color: var(--accent);
    /* A subtly pencilled corner marks the "you are here" ink. */
    border-radius: var(--sketch-radius-a);
}

.settings-rail-link svg[b-elb5aqaip9] { flex: 0 0 auto; }

/* ---- Card heads ------------------------------------------------------- */

.settings-card-head[b-elb5aqaip9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.settings-card-lede[b-elb5aqaip9] { min-width: 0; }

.settings-title[b-elb5aqaip9] {
    display: inline-block;
    margin: 0;
    padding-bottom: 8px;
    font-family: var(--font-hand);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--quindi-text);
    background-image: var(--squiggle);
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 6px;
}

.settings-desc[b-elb5aqaip9] {
    margin: 6px 0 0;
    color: var(--quindi-text-soft);
    font-size: 13px;
    line-height: 1.5;
}

.settings-footnote[b-elb5aqaip9] {
    margin: 14px 0 0;
    color: var(--quindi-text-soft);
    font-size: 12.5px;
}

/* ---- Profile ---------------------------------------------------------- */

/* The identity sheet: the same dot-grid paper as the canvas, with the name in
   the hand face — exactly how collaborators see you on a shared board. */
.profile-row[b-elb5aqaip9] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.4px) 0 0 / 18px 18px,
        var(--quindi-surface-0);
    border: var(--sketch-border-w) dashed var(--sketch-border);
    border-radius: var(--sketch-radius-sm);
}

.profile-avatar[b-elb5aqaip9] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    background: var(--accent);
    color: var(--quindi-on-accent);
    font-family: var(--font-hand);
    font-size: 28px;
    line-height: 1;
    border-radius: var(--sketch-radius-a);
    transform: rotate(-3deg);
    box-shadow: 0 6px 18px rgba(0, 214, 143, 0.25);
    transition: transform 0.2s ease;
}

.profile-row:hover .profile-avatar[b-elb5aqaip9] { transform: rotate(2deg); }

@media (prefers-reduced-motion: reduce) {
    .profile-avatar[b-elb5aqaip9] { transition: none; }
}

.profile-identity[b-elb5aqaip9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.profile-name[b-elb5aqaip9] {
    font-family: var(--font-hand);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.profile-email[b-elb5aqaip9] {
    color: var(--quindi-text-soft);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}

/* Role = the same hand-stamp the token statuses wear: one stamp system. */
.profile-role[b-elb5aqaip9] {
    flex: 0 0 auto;
    padding: 3px 12px 2px;
    border: 1.5px dashed rgba(0, 214, 143, 0.45);
    border-radius: var(--sketch-radius-a);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-hand);
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

/* ---- Libraries placeholder -------------------------------------------- */

.settings-soon[b-elb5aqaip9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 24px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1.4px) 0 0 / 18px 18px,
        var(--quindi-surface-0);
    border: var(--sketch-border-w) dashed var(--sketch-border);
    border-radius: var(--sketch-radius-sm);
    color: var(--quindi-text-soft);
    text-align: center;
}

.settings-soon svg[b-elb5aqaip9] { opacity: 0.7; }

.settings-soon p[b-elb5aqaip9] {
    margin: 0;
    font-family: var(--font-hand);
    font-size: 16px;
}

/* ---- MCP tokens -------------------------------------------------------- */

/* Sub-headings inside the token card: the sketchbook's handwriting, one step
   below the squiggled card title. */
.mcp-settings h3[b-elb5aqaip9] {
    margin: 0 0 4px;
    font-family: var(--font-hand);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--quindi-text);
}

/* Security note: a pencilled margin note with the shield inked in green. */
.mcp-security-note[b-elb5aqaip9] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 15px;
    border: var(--sketch-border-w) dashed var(--sketch-border);
    border-radius: var(--sketch-radius-sm);
    background: var(--quindi-surface-0);
    color: var(--quindi-text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.mcp-security-note svg[b-elb5aqaip9] {
    flex: 0 0 auto;
    box-sizing: content-box;
    padding: 8px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--sketch-radius-sm);
    transform: rotate(-3deg);
}

/* Feature-state chips: a coloured dot instead of a shouting banner. */
.mcp-feature-state[b-elb5aqaip9] {
    position: relative;
    margin-top: 12px;
    padding: 9px 14px 9px 32px;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    background: var(--quindi-surface-0);
    color: var(--quindi-text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.mcp-feature-state strong[b-elb5aqaip9] {
    margin-right: 4px;
    color: var(--quindi-text);
}

.mcp-feature-state[b-elb5aqaip9]::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--quindi-amber);
    box-shadow: 0 0 0 3px var(--quindi-amber-soft);
}

.mcp-feature-state.is-enabled[b-elb5aqaip9]::before {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.mcp-live-region[b-elb5aqaip9] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* One-time secret: an amber post-it taped onto the page. Handle with care. */
.mcp-secret[b-elb5aqaip9] {
    position: relative;
    margin: 26px 2px 6px;
    padding: 20px 20px 16px;
    border: 1.5px solid rgba(255, 176, 32, 0.5);
    border-radius: var(--sketch-radius-sm);
    background: linear-gradient(180deg, rgba(255, 176, 32, 0.16), rgba(255, 176, 32, 0.06));
    transform: rotate(-0.4deg);
    animation: mcp-secret-drop-b-elb5aqaip9 0.35s ease-out;
}

/* The strip of tape holding the note down. */
.mcp-secret[b-elb5aqaip9]::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 96px;
    height: 22px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

@keyframes mcp-secret-drop-b-elb5aqaip9 {
    from { opacity: 0; transform: translateY(-8px) rotate(-2deg); }
    to { opacity: 1; transform: translateY(0) rotate(-0.4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mcp-secret[b-elb5aqaip9] { animation: none; }
}

.mcp-secret-heading[b-elb5aqaip9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mcp-settings .mcp-secret-heading h3[b-elb5aqaip9] {
    font-size: 19px;
    color: var(--quindi-amber);
}

.mcp-secret p[b-elb5aqaip9] {
    margin: 4px 0 0;
    color: var(--quindi-text-soft);
    font-size: 13px;
}

.mcp-secret textarea[b-elb5aqaip9] {
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0;
    padding: 12px;
    resize: vertical;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    background: #050505;
    color: var(--quindi-text);
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.mcp-token-reference[b-elb5aqaip9] {
    margin-top: 12px;
    color: var(--quindi-text-soft);
    font-size: 13px;
}

.mcp-create-blocked[b-elb5aqaip9] {
    margin: 0 0 10px;
    color: var(--quindi-amber);
    font-size: 13px;
}

/* Create form: a fresh sheet of dot-grid paper — the canvas signature — where
   a new key gets drawn. */
.mcp-create[b-elb5aqaip9] {
    margin-top: 26px;
    padding: 20px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.4px) 0 0 / 18px 18px,
        var(--quindi-surface-0);
    border: var(--sketch-border-w) dashed var(--sketch-border);
    border-radius: var(--sketch-radius-sm);
}

.mcp-create-fields[b-elb5aqaip9] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mcp-create-fields:disabled[b-elb5aqaip9] { opacity: 0.72; }

.mcp-form-grid[b-elb5aqaip9] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr);
    gap: 14px;
    margin: 14px 0 0;
}

.mcp-form-grid label > span[b-elb5aqaip9] {
    display: block;
    margin-bottom: 6px;
    color: var(--quindi-text-soft);
    font-size: 13px;
}

/* Scope stickers: dashed outlines that ink solid green once granted. */
.mcp-scope-grid[b-elb5aqaip9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 0;
}

.mcp-scope-option[b-elb5aqaip9] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 13px 14px;
    background: var(--quindi-surface);
    border: var(--sketch-border-w) dashed var(--quindi-border);
    border-radius: var(--sketch-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mcp-scope-option:hover[b-elb5aqaip9] { border-color: var(--sketch-border); }

.mcp-scope-option:has(input:checked)[b-elb5aqaip9] {
    border-style: solid;
    border-color: rgba(0, 214, 143, 0.55);
    background: linear-gradient(180deg, rgba(0, 214, 143, 0.1), rgba(0, 214, 143, 0.03));
}

.mcp-scope-option:has(input:focus-visible)[b-elb5aqaip9] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.mcp-scope-option.is-locked[b-elb5aqaip9] { cursor: default; }

.mcp-scope-option input[b-elb5aqaip9] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--accent);
}

.mcp-scope-copy strong[b-elb5aqaip9] {
    display: block;
    font-size: 13.5px;
}

.mcp-scope-copy small[b-elb5aqaip9] {
    display: block;
    margin-top: 3px;
    color: var(--quindi-text-soft);
    line-height: 1.45;
}

/* The read scope can't be taken away — say so in the margin, in pencil. */
.mcp-scope-badge[b-elb5aqaip9] {
    position: absolute;
    top: -10px;
    right: 12px;
    padding: 1px 9px;
    font-family: var(--font-hand);
    font-size: 12px;
    color: var(--accent);
    background: var(--quindi-surface);
    border: 1.5px dashed rgba(0, 214, 143, 0.45);
    border-radius: var(--radius-sm);
    transform: rotate(2deg);
}

.mcp-create-footer[b-elb5aqaip9] {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ---- Token list -------------------------------------------------------- */

.mcp-token-list[b-elb5aqaip9] { margin-top: 26px; }

.mcp-token-list h3[b-elb5aqaip9] { margin-bottom: 10px; }

.mcp-token-row[b-elb5aqaip9] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 10px;
    border-top: var(--sketch-border-w) dashed var(--quindi-border);
    transition: background 0.12s ease;
}

.mcp-token-row:hover[b-elb5aqaip9] { background: var(--quindi-surface-0); }

/* Each token is a little key tag clipped to the page. */
.mcp-token-key[b-elb5aqaip9] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: var(--quindi-text-soft);
    background: var(--quindi-surface-0);
    border: var(--sketch-border-w) dashed var(--sketch-border);
    border-radius: var(--sketch-radius-a);
    transform: rotate(-4deg);
}

.mcp-token-row:nth-child(even) .mcp-token-key[b-elb5aqaip9] { transform: rotate(3deg); }

.mcp-token-row.is-inactive .mcp-token-key[b-elb5aqaip9] { opacity: 0.45; }

.mcp-token-row.is-inactive .mcp-token-title strong[b-elb5aqaip9] { color: var(--quindi-text-soft); }

.mcp-token-main[b-elb5aqaip9] {
    flex: 1;
    min-width: 0;
}

.mcp-token-title[b-elb5aqaip9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status = a hand-stamp: dashed outline, slight tilt, the hand face. */
.mcp-token-status[b-elb5aqaip9] {
    flex: 0 0 auto;
    padding: 2px 10px 1px;
    font-family: var(--font-hand);
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--quindi-text-soft);
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
    border-radius: var(--sketch-radius-sm);
    transform: rotate(-2deg);
}

.mcp-token-status.is-active[b-elb5aqaip9] {
    color: var(--accent);
    border-color: rgba(0, 214, 143, 0.5);
    background: var(--accent-soft);
}

.mcp-token-status.is-expired[b-elb5aqaip9] {
    color: var(--quindi-amber);
    border-color: rgba(255, 176, 32, 0.4);
    background: var(--quindi-amber-soft);
}

.mcp-token-status.is-revoked[b-elb5aqaip9] {
    color: var(--quindi-red);
    border-color: rgba(229, 72, 77, 0.45);
    background: rgba(229, 72, 77, 0.1);
}

.mcp-token-meta[b-elb5aqaip9] {
    margin-top: 5px;
    color: var(--quindi-text-soft);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.mcp-token-meta code[b-elb5aqaip9],
.mcp-token-reference code[b-elb5aqaip9] {
    padding: 1px 6px;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-xs);
    background: #050505;
    font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Empty / loading / guest states share the blank-sheet look. */
.mcp-empty[b-elb5aqaip9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 26px 20px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1.4px) 0 0 / 18px 18px,
        var(--quindi-surface-0);
    border: var(--sketch-border-w) dashed var(--quindi-border);
    border-radius: var(--sketch-radius-sm);
    color: var(--quindi-text-soft);
    text-align: center;
    font-family: var(--font-hand);
    font-size: 16px;
}

.mcp-empty p[b-elb5aqaip9] { margin: 0; }

.mcp-empty svg[b-elb5aqaip9] {
    opacity: 0.6;
    transform: rotate(-8deg);
}

.mcp-empty span[b-elb5aqaip9] {
    font-family: var(--font-sans);
    font-size: 12.5px;
}

/* ---- Connect Claude ---------------------------------------------------- */

.mcp-connect-intro[b-elb5aqaip9] {
    margin: 0;
    color: var(--quindi-text-soft);
    font-size: 13.5px;
    line-height: 1.6;
}

.mcp-connect-intro code[b-elb5aqaip9],
.mcp-connect-steps code[b-elb5aqaip9] {
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.07);
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The four steps are a genuine sequence, so they earn their numbers:
   hand-drawn badges joined by a dashed pencil spine. */
.mcp-connect-steps[b-elb5aqaip9] {
    list-style: none;
    counter-reset: mcp-step;
    display: grid;
    gap: 30px;
    margin: 22px 0 0;
    padding: 0;
    color: var(--quindi-text-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

.mcp-connect-steps > li[b-elb5aqaip9] {
    counter-increment: mcp-step;
    position: relative;
    min-height: 40px;
    padding-left: 56px;
}

.mcp-connect-steps > li[b-elb5aqaip9]::before {
    content: counter(mcp-step);
    position: absolute;
    left: 0;
    top: -3px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-family: var(--font-hand);
    font-size: 19px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 2px solid var(--accent);
    border-radius: var(--sketch-radius-a);
    transform: rotate(-3deg);
}

.mcp-connect-steps > li:nth-child(even)[b-elb5aqaip9]::before {
    transform: rotate(2.5deg);
    border-radius: var(--sketch-radius-b);
}

.mcp-connect-steps > li:not(:last-child)[b-elb5aqaip9]::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 42px;
    bottom: -26px;
    border-left: 2px dashed rgba(0, 214, 143, 0.3);
}

/* Step titles in the hand face, body copy quiet below them. */
.mcp-step-title[b-elb5aqaip9] {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-hand);
    font-size: 17px;
    font-weight: 400;
    color: var(--quindi-text);
}

/* Snippets: a miniature terminal window — traffic lights, lang tag, copy. */
.mcp-snippet[b-elb5aqaip9] {
    margin: 10px 0;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    background: #050505;
    overflow: hidden;
}

.mcp-snippet-bar[b-elb5aqaip9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--quindi-border-soft);
}

.mcp-snippet-dots[b-elb5aqaip9] {
    display: inline-flex;
    gap: 5px;
}

.mcp-snippet-dots i[b-elb5aqaip9] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.mcp-snippet-dots i:nth-child(1)[b-elb5aqaip9] { background: rgba(229, 72, 77, 0.55); }
.mcp-snippet-dots i:nth-child(2)[b-elb5aqaip9] { background: rgba(255, 176, 32, 0.55); }
.mcp-snippet-dots i:nth-child(3)[b-elb5aqaip9] { background: rgba(0, 214, 143, 0.55); }

.mcp-snippet-lang[b-elb5aqaip9] {
    margin-right: auto;
    font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quindi-text-soft);
}

.mcp-snippet-copy[b-elb5aqaip9] {
    padding: 3px 10px;
    font-size: 12px;
    gap: 5px;
}

.mcp-snippet pre[b-elb5aqaip9] {
    margin: 0;
    padding: 12px 14px;
    font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--quindi-text);
    overflow-x: auto;
}

.mcp-snippet pre code[b-elb5aqaip9] {
    padding: 0;
    border-radius: 0;
    background: none;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 920px) {
    .settings-body[b-elb5aqaip9] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* The rail becomes a horizontal chip strip above the sections. */
    .settings-rail[b-elb5aqaip9] {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        max-height: none;
        padding: 10px;
        border-radius: var(--sketch-radius-sm);
    }

    .settings-rail-title[b-elb5aqaip9] { display: none; }

    .settings-rail-link[b-elb5aqaip9] {
        padding: 6px 12px;
        border: 1px dashed var(--quindi-border);
        border-radius: var(--radius-sm);
    }

    .settings-rail-link.is-active[b-elb5aqaip9] {
        border-color: transparent;
        border-radius: var(--radius-sm);
    }
}

@media (max-width: 680px) {
    .settings-card-head[b-elb5aqaip9],
    .mcp-secret-heading[b-elb5aqaip9],
    .mcp-token-row[b-elb5aqaip9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .mcp-form-grid[b-elb5aqaip9],
    .mcp-scope-grid[b-elb5aqaip9] { grid-template-columns: 1fr; }

    .mcp-secret[b-elb5aqaip9] { transform: none; }

    .settings-anchor[b-elb5aqaip9]  .settings-card { padding: 20px 18px 22px; }
}