/*
 * The MCP host's human pages. Tokens are taken from client/styles.js so this
 * host tracks the Coffee Chats application: cream page, white cards, espresso
 * ink, clay accent, Hanken Grotesk body, Plus Jakarta Sans display.
 *
 * Human login and consent pages keep default-src 'none' and do not reach a third
 * party for fonts; the family names below fall back to the system stack. The
 * public landing opts into Google Fonts on its own (discovery/pages.js).
 */

:root {
  /* colors (client/styles.js) */
  --mcp-cream: #FFFBF6;
  --mcp-white: #FFFFFF;
  --mcp-black: #111111;
  --mcp-ink-deep: #2A1710;
  --mcp-body-ink: #3A2A22;
  --mcp-espresso: #2B1B12;
  --mcp-coffee: #4A2C1D;
  --mcp-mocha: #6B3F2A;
  --mcp-latte: #C8A27A;
  --mcp-border: #E7DCCB;
  --mcp-hairline: #E8DECE;
  --mcp-surface: #FFF9EE;
  --mcp-sand: #F4E8DA;
  --mcp-muted: #7B665C;
  --mcp-clay: #E14E2C;
  /* Text-safe accent. --mcp-clay is 3.83:1 on cream as text; this clears AA. */
  --mcp-accent-text: #AE3315;
  --mcp-success: #2D6A3E;
  --mcp-success-light: #E8F5E9;
  --mcp-error: #8B3A3A;
  --mcp-error-light: #FFEBEE;
  --mcp-warning: #B8860B;
  --mcp-warning-light: #FFF9E6;
  --mcp-warning-strong: #8A5A00;
  --mcp-focus: #8B6F47;
  --mcp-disabled: #D0C4B4;

  /* Legacy aliases used by earlier passes */
  --mcp-ink: var(--mcp-espresso);
  --mcp-cream-dark: var(--mcp-border);
  --mcp-accent: var(--mcp-clay);
  --mcp-success-on-dark: #7FB069;

  /* spacing (spacing.*) */
  --mcp-space-xs: 4px;
  --mcp-copy-button-size: 2rem;
  --mcp-copy-button-offset: 0.5rem;
  --mcp-space-sm: 8px;
  --mcp-space-md: 12px;
  --mcp-space-lg: 16px;
  --mcp-space-xl: 24px;
  --mcp-space-xxl: 32px;
  --mcp-space-xxxl: 48px;

  /* radius (radius.*) */
  --mcp-radius-xs: 8px;
  --mcp-radius-sm: 10px;
  --mcp-radius-md: 12px;
  --mcp-radius-lg: 16px;
  --mcp-radius-pill: 999px;
  --mcp-radius: var(--mcp-radius-md);

  /* typography */
  --mcp-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mcp-font-display: "Plus Jakarta Sans", var(--mcp-font);
  --mcp-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* shadows (shadow, AuthPage card) */
  --mcp-shadow: 0 6px 10px rgba(0, 0, 0, 0.06);
  --mcp-shadow-card: 0 10px 34px rgba(42, 23, 16, 0.06);

  /* shorthand for older rules */
  --mcp-space: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--mcp-font);
  font-size: 16px;
  line-height: 22px;
  color: var(--mcp-body-ink);
  background: var(--mcp-cream);
  -webkit-font-smoothing: antialiased;
}

.mcp-page {
  max-width: 28.75rem;
  margin: 0 auto;
  padding: var(--mcp-space-xl) var(--mcp-space-lg) var(--mcp-space-xxxl);
}

/* App header (AuthPage / AppBar lockup, same-origin image). */
.mcp-header {
  margin: 0 0 var(--mcp-space-xl);
}

.mcp-header__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mcp-header__link:hover {
  text-decoration: none;
}

.mcp-header__link:focus-visible {
  outline: 3px solid var(--mcp-clay);
  outline-offset: 2px;
  border-radius: var(--mcp-radius-xs);
}

.mcp-header__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}

.mcp-host-label {
  margin: calc(-1 * var(--mcp-space-md)) 0 var(--mcp-space-lg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mcp-muted);
}

/* Technical metadata folded at the foot of human pages. */
.mcp-details {
  margin-top: var(--mcp-space-xl);
  padding-top: var(--mcp-space-lg);
  border-top: 1px solid var(--mcp-hairline);
}

.mcp-details__summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--mcp-muted);
  cursor: pointer;
  list-style: none;
}

.mcp-details__summary::-webkit-details-marker {
  display: none;
}

.mcp-details__summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 0.15em;
  transition: transform 120ms ease;
}

.mcp-details[open] > .mcp-details__summary::before {
  transform: rotate(90deg);
}

.mcp-details__content {
  margin-top: var(--mcp-space-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--mcp-muted);
}

.mcp-details__content .mcp-status {
  margin-bottom: var(--mcp-space-md);
}

.mcp-details__content dl {
  margin-top: var(--mcp-space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .mcp-details__summary::before {
    transition: none;
  }
}

h1 {
  font-family: var(--mcp-font-display);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mcp-ink-deep);
  margin: 0 0 var(--mcp-space-lg);
}

h2 {
  font-family: var(--mcp-font);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--mcp-ink-deep);
  margin: 0 0 var(--mcp-space-sm);
}

h3 {
  font-family: var(--mcp-font);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--mcp-ink-deep);
  margin: var(--mcp-space-md) 0 var(--mcp-space-xs);
}

.mcp-lead {
  font-size: 16px;
  line-height: 22px;
  color: var(--mcp-body-ink);
  margin: 0 0 var(--mcp-space-xl);
}

/* Auth card (AuthPage card). */
.mcp-auth-card {
  background: var(--mcp-white);
  border: 1px solid var(--mcp-hairline);
  border-radius: var(--mcp-radius-lg);
  box-shadow: var(--mcp-shadow-card);
  padding: var(--mcp-space-xl);
  margin-top: var(--mcp-space-xxl);
}

.mcp-divider {
  display: flex;
  align-items: center;
  gap: var(--mcp-space-md);
  margin: var(--mcp-space-lg) 0;
}

.mcp-divider__line {
  flex: 1;
  height: 1px;
  background: var(--mcp-hairline);
}

.mcp-divider__label {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--mcp-muted);
}

/* Google sign-in (AuthPage googleButton + GoogleLogo paths). */
.mcp-google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mcp-space-sm);
  width: 100%;
  min-width: 0;
  padding: 13px var(--mcp-space-lg);
  border: 1px solid var(--mcp-border);
  border-radius: var(--mcp-radius-sm);
  background: var(--mcp-white);
  color: var(--mcp-body-ink);
  font-family: var(--mcp-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

.mcp-google-button:hover {
  background: var(--mcp-cream);
  border-color: var(--mcp-latte);
}

.mcp-google-button:focus-visible {
  outline: 3px solid var(--mcp-clay);
  outline-offset: 2px;
}

.mcp-google-button__icon {
  display: flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mcp-google-logo {
  display: block;
  width: 20px;
  height: 20px;
}

/* Settings-style card (ConnectedAgents). */
.mcp-settings-card {
  background: var(--mcp-white);
  border: 1px solid var(--mcp-border);
  border-radius: var(--mcp-radius-md);
  padding: var(--mcp-space-lg);
  margin-top: var(--mcp-space-lg);
}

section,
article {
  margin-bottom: var(--mcp-space-lg);
  padding: var(--mcp-space-lg);
  background: var(--mcp-white);
  border: 1px solid var(--mcp-border);
  border-radius: var(--mcp-radius-md);
  box-shadow: var(--mcp-shadow);
  overflow: hidden;
}

.mcp-settings-card section,
.mcp-settings-card article,
.mcp-auth-card section,
.mcp-auth-card article {
  box-shadow: none;
  border: none;
  padding: 0;
  background: transparent;
}

section > *:last-child,
article > *:last-child {
  margin-bottom: 0;
}

a {
  color: var(--mcp-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--mcp-clay);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--mcp-coffee);
  text-decoration-color: var(--mcp-coffee);
}

code {
  font-family: var(--mcp-font-mono);
  font-size: 0.9em;
  background: rgba(200, 162, 122, 0.16);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre {
  margin: 0 0 var(--mcp-space-lg);
  padding: 0.85rem 1rem;
  background: var(--mcp-espresso);
  border-radius: calc(var(--mcp-radius-md) - 4px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

pre code {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--mcp-cream);
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.mcp-copyable {
  position: relative;
  margin: 0 0 var(--mcp-space-lg);
}

/*
 * The copy button is absolutely positioned over the top right corner of the
 * block, so the block reserves a column for it: the button's own width, the
 * offset it sits at, and a gap so a wrapped line never runs up against it.
 * Change the button's width or offset and change these two values with it.
 */
.mcp-copyable > pre {
  margin-bottom: 0;
  padding-right: calc(var(--mcp-copy-button-size) + var(--mcp-copy-button-offset) + 0.75rem);
}

.mcp-copy-button {
  position: absolute;
  top: var(--mcp-copy-button-offset);
  right: var(--mcp-copy-button-offset);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mcp-copy-button-size);
  height: var(--mcp-copy-button-size);
  min-width: 0;
  flex: none;
  padding: 0;
  border: 1px solid var(--mcp-border);
  border-radius: calc(var(--mcp-radius-md) - 6px);
  background: var(--mcp-cream);
  color: var(--mcp-coffee);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.mcp-copy-button:hover {
  background: var(--mcp-border);
}

.mcp-copyable > pre + .mcp-copy-button {
  border-color: rgba(255, 251, 246, 0.28);
  background: rgba(255, 251, 246, 0.1);
  color: var(--mcp-cream);
}

.mcp-copyable > pre + .mcp-copy-button:hover {
  background: rgba(255, 251, 246, 0.2);
}

.mcp-copy-button.is-copied {
  color: var(--mcp-success);
  border-color: currentColor;
  background: transparent;
}

.mcp-copyable > pre + .mcp-copy-button.is-copied {
  color: var(--mcp-success-on-dark);
  border-color: currentColor;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .mcp-copy-button {
    transition: none;
  }
}

/*
 * Per-application setup steps on the landing page (discovery/pages.js).
 *
 * The served HTML is five stacked panels, each with an h3 heading, and an empty
 * mount point for the tab row. views/assets/tabs.js fills that row and sets
 * data-mcp-tabs-ready on the section, which is the only signal this block uses:
 * with no script the row collapses, every panel shows, and the headings stay
 * visible. The row is a flex line that wraps, so five labels fit a phone.
 *
 * Each label now carries the application's own mark before the name
 * (discovery/pages.js): an 18px square and 4px of separation on every pill,
 * 110px of row that the labels alone did not need.
 *
 * The five labels have to sit on one row from 480px up. From 560px up the page
 * column is 32rem and the row has 430px inside the card; at 13px type the five
 * pills with their marks measured 469px and Cursor dropped to a row of its own,
 * so the type below is 12px, the side padding 6px and the gap 2px, which brings
 * the row to 425px. Between 480px and 560px the column is the viewport rather
 * than 32rem, so the row is tighter still: there the marks are drawn at 16px and
 * the row reaches 12px further into the card's padding on each side, which is
 * 415px of pills in 422px of space. A 360px phone still wraps them 3 and 2,
 * which is intended. Widen a label, or grow a mark, and measure the row again.
 */
.mcp-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 var(--mcp-space-lg);
}

.mcp-tabs__list:empty {
  display: none;
}

button.mcp-tab {
  width: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: var(--mcp-space-sm) 6px;
  border: 1px solid var(--mcp-border);
  border-radius: var(--mcp-radius-pill);
  background: var(--mcp-surface);
  color: var(--mcp-coffee);
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

button.mcp-tab:hover {
  background: var(--mcp-sand);
  opacity: 1;
}

/*
 * The selected pill used to be filled with espresso and lettered in cream. The
 * marks are published in their owners' own colours and are not ours to invert,
 * and two of the three are near-black, so a dark fill swallowed the OpenAI
 * blossom and the Cursor cube. The selected pill is light instead, and says so
 * with a dark ring instead. Heavier letters would say it too, but the row has no
 * width to spare for the few pixels bold type adds.
 */
button.mcp-tab[aria-selected="true"] {
  background: var(--mcp-white);
  border-color: var(--mcp-espresso);
  box-shadow: inset 0 0 0 1px var(--mcp-espresso);
  color: var(--mcp-espresso);
}

button.mcp-tab[aria-selected="true"]:hover {
  background: var(--mcp-white);
}

/*
 * An application's own mark, drawn beside its name in the tab row and in the
 * panel heading a reader without JavaScript sees. The box is the 18 by 18 the
 * HTML asks for; `object-fit: contain` keeps a mark that is taller than it is
 * wide (the Cursor cube) inside that box at its own proportions instead of
 * stretching it. No colour is applied here: the files are used as published.
 */
.mcp-mark {
  flex: none;
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 3px;
  vertical-align: -4px;
}

/*
 * The narrow band where the page column is the viewport: the row has 32px less
 * room here than it does at 560px, so the marks step down to 16px and the row
 * alone reaches into the card's padding. The card keeps its padding for
 * everything else, and the negative margin stops inside the card's border, so
 * nothing is clipped by the card's `overflow: hidden`.
 */
@media (max-width: 559px) {
  .mcp-tabs__list {
    margin-left: calc(-1 * var(--mcp-space-md));
    margin-right: calc(-1 * var(--mcp-space-md));
  }

  .mcp-tabs__list .mcp-mark {
    width: 16px;
    height: 16px;
  }
}

.mcp-tab-panel {
  margin-top: var(--mcp-space-lg);
}

.mcp-tab-panel:focus-visible {
  outline: 3px solid var(--mcp-clay);
  outline-offset: 4px;
  border-radius: var(--mcp-radius-xs);
}

.mcp-tab-panel > *:last-child {
  margin-bottom: 0;
}

/* Under the tab row the panel heading repeats its own tab label, so it is left
 * in the accessibility tree and taken off the screen. */
[data-mcp-tabs-ready="true"] .mcp-tab-panel {
  margin-top: 0;
}

[data-mcp-tabs-ready="true"] .mcp-tab-panel > h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

dl {
  margin: 0;
}

dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mcp-muted);
  margin-top: var(--mcp-space-sm);
}

dd {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--mcp-body-ink);
}

.mcp-origin {
  font-family: var(--mcp-font-mono);
  font-size: 13px;
  word-break: break-all;
  color: var(--mcp-muted);
}

.mcp-identity {
  font-size: 13px;
  color: var(--mcp-muted);
}

.mcp-status {
  display: inline-block;
  padding: var(--mcp-space-xs) var(--mcp-space-md);
  border-radius: var(--mcp-radius-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin: 0 0 var(--mcp-space-lg);
}

.mcp-status--pending,
.mcp-status--loading,
.mcp-status--pending_approval {
  background: var(--mcp-sand);
  color: var(--mcp-coffee);
}

.mcp-status--succeeded,
.mcp-status--ready {
  background: var(--mcp-success-light);
  color: var(--mcp-success);
}

.mcp-status--failed,
.mcp-status--denied,
.mcp-status--expired,
.mcp-status--conflict,
.mcp-status--cancelled {
  background: var(--mcp-error-light);
  color: var(--mcp-error);
}

.mcp-status--uncertain,
.mcp-status--confirmation,
.mcp-status--useraction {
  background: var(--mcp-warning-light);
  color: var(--mcp-warning-strong);
}

.mcp-status--blocked,
.mcp-status--unavailable {
  background: var(--mcp-sand);
  color: var(--mcp-coffee);
}

.mcp-form {
  margin: 0;
}

.mcp-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: var(--mcp-space-xs);
  color: var(--mcp-ink-deep);
}

.mcp-form input[type="email"],
.mcp-form input[type="number"],
.mcp-form textarea {
  width: 100%;
  padding: 13px var(--mcp-space-md);
  margin-bottom: var(--mcp-space-md);
  border: 1px solid var(--mcp-border);
  border-radius: var(--mcp-radius-sm);
  background: var(--mcp-white);
  color: var(--mcp-body-ink);
  font: inherit;
}

.mcp-form input[type="email"]:focus,
.mcp-form input[type="number"]:focus,
.mcp-form textarea:focus {
  outline: 1px solid rgba(74, 44, 29, 0.35);
  outline-offset: -1px;
  border-color: var(--mcp-border);
}

.mcp-form--inline {
  margin-top: 0;
}

.mcp-form--magic button[type="submit"] {
  margin-top: var(--mcp-space-xs);
}

button,
.mcp-link {
  display: inline-block;
  font: inherit;
  cursor: pointer;
}

button {
  width: 100%;
  padding: 14px var(--mcp-space-xl);
  border: none;
  border-radius: var(--mcp-radius-sm);
  background: var(--mcp-black);
  color: var(--mcp-cream);
  font-family: var(--mcp-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

button:hover {
  opacity: 0.92;
}

button.mcp-button--secondary {
  background: var(--mcp-sand);
  color: var(--mcp-ink-deep);
  border: 1px solid var(--mcp-hairline);
  box-shadow: none;
}

button.mcp-button--secondary:hover {
  background: var(--mcp-border);
  opacity: 1;
}

button:focus-visible,
.mcp-link:focus-visible {
  outline: 3px solid var(--mcp-clay);
  outline-offset: 2px;
}

.mcp-link {
  color: var(--mcp-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mcp-link:hover {
  color: var(--mcp-coffee);
}

.mcp-error {
  color: var(--mcp-error);
  font-weight: 600;
}

.mcp-note,
.mcp-meta,
.mcp-purpose {
  color: var(--mcp-muted);
  font-size: 14px;
  line-height: 20px;
}

.mcp-empty {
  display: flex;
  flex-direction: column;
  gap: var(--mcp-space-xs);
}

.mcp-empty__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--mcp-body-ink);
}

.mcp-connection-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mcp-connection {
  padding: var(--mcp-space-md) 0 0;
  margin: 0;
  border-top: 1px solid var(--mcp-border);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.mcp-connection:first-child {
  border-top: none;
  padding-top: 0;
}

.mcp-connection__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mcp-space-md);
}

.mcp-connection__identity {
  flex: 1;
  min-width: 0;
}

.mcp-connection h2 {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 2px;
}

.mcp-connection-status {
  display: flex;
  align-items: center;
  gap: var(--mcp-space-xs);
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--mcp-muted);
}

.mcp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.mcp-status-dot--connected {
  background: var(--mcp-success);
}

.mcp-status-dot--off {
  background: var(--mcp-border);
}

.mcp-connection-last-used {
  margin: var(--mcp-space-xs) 0 0;
  font-size: 13px;
  color: var(--mcp-muted);
}

.mcp-permissions-heading {
  margin: var(--mcp-space-sm) 0 var(--mcp-space-xs);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mcp-muted);
}

.mcp-permissions-list {
  margin: 0;
  padding-left: 1.25rem;
}

.mcp-permissions-list li {
  font-size: 13px;
  line-height: 19px;
  color: var(--mcp-body-ink);
}

.mcp-connection-list .mcp-form--inline {
  flex-shrink: 0;
}

.mcp-connection-list .mcp-form--inline button {
  width: auto;
  min-width: 0;
  padding: var(--mcp-space-sm) var(--mcp-space-md);
  font-size: 14px;
  font-weight: 400;
  color: var(--mcp-body-ink);
}

ul {
  margin: var(--mcp-space-xs) 0 0;
  padding-left: 1.25rem;
}

.mcp-action-list,
.mcp-decision-list {
  display: flex;
  flex-direction: column;
  gap: var(--mcp-space-md);
}

.mcp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 480px) {
  .mcp-page {
    padding: var(--mcp-space-xxl) var(--mcp-space-xl);
    max-width: 32rem;
  }

  button:not(.mcp-google-button):not(.mcp-copy-button):not(.mcp-toast__close):not(.mcp-tab) {
    width: auto;
    min-width: 12rem;
  }

  .mcp-form--magic button[type="submit"],
  .mcp-form:not(.mcp-form--inline) button[type="submit"]:not(.mcp-google-button) {
    width: 100%;
    min-width: 0;
  }
}

/*
 * Sign-in and consent pages (.mcp-page--auth). One card holding the summary,
 * the permissions, the forms and the folded details. On a phone the areas
 * stack in reading order; on a wide screen the permissions take a right-hand
 * column so the normal case fits one viewport without scrolling.
 */
.mcp-page--auth .mcp-header {
  margin-bottom: var(--mcp-space-lg);
}

.mcp-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--mcp-space-xl);
}

.mcp-auth section {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.mcp-auth h1 {
  font-size: 26px;
  line-height: 32px;
  margin: 0;
}

.mcp-auth__summary {
  display: flex;
  flex-direction: column;
  gap: var(--mcp-space-md);
}

.mcp-auth__summary > p {
  margin: 0;
}

.mcp-auth .mcp-client h2 {
  margin: 0;
  font-size: 18px;
}

.mcp-auth .mcp-account {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--mcp-space-xs);
  font-size: 14px;
  line-height: 20px;
}

.mcp-auth .mcp-account h2 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--mcp-muted);
}

.mcp-auth .mcp-account p {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mcp-auth .mcp-scopes h2 {
  margin: 0 0 var(--mcp-space-sm);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mcp-muted);
}

.mcp-resource {
  margin: 0 0 var(--mcp-space-md);
  font-size: 13px;
  line-height: 18px;
  color: var(--mcp-muted);
  overflow-wrap: anywhere;
}

.mcp-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mcp-space-sm) var(--mcp-space-xl);
  font-size: 14px;
  line-height: 20px;
}

.mcp-scope-list li {
  position: relative;
  padding-left: 16px;
  overflow-wrap: anywhere;
}

.mcp-scope-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--mcp-clay);
}

.mcp-scope-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mcp-scope-chips li {
  padding: 2px var(--mcp-space-sm);
  border-radius: var(--mcp-radius-pill);
  background: var(--mcp-sand);
  font-family: var(--mcp-font-mono);
  font-size: 12px;
  line-height: 20px;
  color: var(--mcp-coffee);
  overflow-wrap: anywhere;
}

.mcp-auth__actions {
  display: flex;
  flex-direction: column;
  gap: var(--mcp-space-md);
}

.mcp-auth__actions > p {
  margin: 0;
}

.mcp-auth .mcp-auth-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mcp-auth .mcp-form input[type="email"] {
  margin-bottom: var(--mcp-space-sm);
}

.mcp-auth .mcp-form .mcp-note {
  margin: 0 0 var(--mcp-space-md);
}

.mcp-auth .mcp-divider {
  margin: var(--mcp-space-lg) 0;
}

.mcp-actions {
  display: flex;
  flex-direction: column;
  gap: var(--mcp-space-md);
}

.mcp-manage {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.mcp-auth .mcp-details {
  margin-top: 0;
  padding-top: var(--mcp-space-md);
}

.mcp-page--auth button {
  min-height: 48px;
}

/* Inline alert: the no-JavaScript fallback for the toast. */
.mcp-alert {
  margin: 0;
  padding: 10px var(--mcp-space-md);
  border-radius: var(--mcp-radius-sm);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.mcp-alert--error {
  background: var(--mcp-error-light);
  color: var(--mcp-error);
}

.mcp-alert--info {
  background: var(--mcp-sand);
  color: var(--mcp-coffee);
}

/* Submit feedback (views/forms.js). */
button.is-busy {
  cursor: progress;
  pointer-events: none;
}

button.is-busy::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: var(--mcp-space-sm);
  vertical-align: -3px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mcp-spin 700ms linear infinite;
}

.mcp-google-button.is-busy::before {
  margin-right: 0;
}

.mcp-google-button.is-busy .mcp-google-button__icon {
  display: none;
}

button:disabled,
button:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes mcp-spin {
  to { transform: rotate(360deg); }
}

@keyframes mcp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Toasts (views/forms.js). Top-center on desktop, full width on a phone. */
.mcp-toast-region {
  position: fixed;
  top: var(--mcp-space-sm);
  left: var(--mcp-space-lg);
  right: var(--mcp-space-lg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--mcp-space-sm);
  pointer-events: none;
}

.mcp-toast {
  display: flex;
  align-items: center;
  gap: var(--mcp-space-sm);
  padding: 2px 2px 2px var(--mcp-space-lg);
  border-radius: var(--mcp-radius-md);
  border-left: 4px solid var(--mcp-latte);
  background: var(--mcp-espresso);
  color: var(--mcp-cream);
  box-shadow: 0 10px 30px rgba(42, 23, 16, 0.2);
  pointer-events: auto;
  animation: mcp-fade-in 150ms ease-out;
}

.mcp-toast--error {
  border-left-color: var(--mcp-clay);
}

.mcp-toast__text {
  flex: 1;
  margin: 0;
  padding: 10px 0;
  font-size: 14px;
  line-height: 20px;
}

button.mcp-toast__close {
  flex-shrink: 0;
  width: 44px;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--mcp-radius-sm);
  background: transparent;
  color: var(--mcp-cream);
  font-size: 22px;
  line-height: 1;
}

button.mcp-toast__close:hover {
  background: rgba(255, 251, 246, 0.12);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  button.is-busy::before {
    animation-duration: 1.6s;
  }

  .mcp-toast {
    animation: none;
  }
}

@media (min-width: 640px) {
  .mcp-page--auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    max-width: 30rem;
    padding: var(--mcp-space-xl);
  }

  .mcp-auth {
    padding: var(--mcp-space-xxl);
    background: var(--mcp-white);
    border: 1px solid var(--mcp-hairline);
    border-radius: var(--mcp-radius-lg);
    box-shadow: var(--mcp-shadow-card);
  }

  .mcp-toast-region {
    top: var(--mcp-space-lg);
    left: 50%;
    right: auto;
    width: 28rem;
    transform: translateX(-50%);
  }
}

@media (min-width: 960px) {
  .mcp-page--split {
    max-width: 62rem;
  }

  .mcp-auth--split {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "summary scopes"
      "actions scopes"
      "meta scopes";
    column-gap: var(--mcp-space-xxxl);
  }

  .mcp-auth--split .mcp-auth__summary { grid-area: summary; }
  .mcp-auth--split .mcp-auth__actions { grid-area: actions; }
  .mcp-auth--split .mcp-auth__meta { grid-area: meta; align-self: end; }

  .mcp-auth--split .mcp-auth__scopes {
    grid-area: scopes;
    padding-left: var(--mcp-space-xxxl);
    border-left: 1px solid var(--mcp-hairline);
    margin-left: calc(-1 * var(--mcp-space-xl));
  }

  .mcp-auth--split .mcp-scope-list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mcp-space-sm) var(--mcp-space-xl);
    font-size: 13px;
    line-height: 18px;
  }

  .mcp-auth--split .mcp-scope-list li::before {
    top: 6px;
  }
}

@media (min-width: 1200px) {
  .mcp-page--split {
    max-width: 72rem;
  }

  .mcp-auth--split {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  }

  .mcp-auth--split .mcp-scope-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mcp-signature {
  white-space: pre-wrap;
}