/* Base layout */
body { padding: var(--size-7); }

/* ---- Standardized per-page breadcrumb ---- */

.docs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1) var(--size-2);
  align-items: baseline;
  font-size: var(--font-size-0);
  color: var(--text-2);
  margin-block: 0 var(--size-3);

  & a {
    color: var(--text-2);

    &:hover {
      color: var(--text-1);
    }
  }

  & > .here {
    color: var(--text-1);
    font-weight: var(--font-weight-5);
  }
}

/* Public user guides and architecture docs use the app header styles from index.css. The header spans the page; main content keeps its centered reading column. UI library docs under /ui/docs/ do not have this header. */
body:has(> header) {
  padding: 0;                 /* drop the docs body gutter so the header spans full width */
}

/* Chrome that lives outside <main> (breadcrumb, footer guide nav, index
   feature links) aligns with the centered column. */
body:has(> header) > .docs-breadcrumb,
body:has(> header) > .role-nav,
body:has(> header) > .docs-feature {
  max-width: var(--size-lg);
  margin-inline: auto;
  padding-inline: var(--size-5);
}
body:has(> header) > .docs-breadcrumb {
  margin-block: var(--size-5) var(--size-3);   /* clear the header, keep gap to main */
}

/* The brand in that header is not the guide's heading — the guide title in <main>
   is, and it is the page's only <h1>. So these pages carry the brand as a <span>
   and restate the two type declarations index.css gives `body > header & h1`,
   which is why they look identical to the app's own header. Copying that
   brand as an `<h1 class="font-reading">` into a new guide re-creates the
   duplicate top-level heading this replaced. */
body > header .header-logo-name {
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-6);
}

@media (max-width: 640px) {
  body > header .header-logo-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Section cards */
section {
  margin-bottom: var(--size-4);
  padding: var(--size-4);
  background: var(--surface-2);
  border: var(--border-size-1) solid var(--border-color);
  border-radius: var(--radius-3);

  & > h2 {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-2);
  }

  & > p {
    margin: 0 0 1rem;
    color: var(--text-2);
    font-size: var(--font-size-0);
  }
}

/* API summary table */
table { border-collapse: collapse; }

th, td {
  padding: var(--size-1) var(--size-3);
  text-align: left;
}

/* Layout utilities */
.demo-row {
  display: flex;
  gap: var(--size-3);
  align-items: flex-start;
  flex-wrap: wrap;
}
.demo-row.center { align-items: center; }

.demo-col {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
  max-width: 24rem;
}

/* Two-column grid list used for API/term glossaries across the docs.
   dt is monospace (typically a token name), dd is muted body text. */
.definition-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--size-1) var(--size-3);
  margin: 0;

  & dt { font-family: var(--font-mono, monospace); }

  & dd {
    margin: 0;
    color: var(--text-2);
  }
}

/* Demo area (interactive result) */
.demo {
  position: relative;
  padding: var(--size-3);
  background: var(--surface-1);
  border-radius: var(--radius-2);
  border: var(--border-size-2) solid var(--indigo-3);

  /* Button / trigger row inside a demo: wraps, small gap. Pages override
     align-items when the row mixes controls of different sizes. */
  & > div {
    display: flex;
    gap: var(--size-2);
    flex-wrap: wrap;
  }

  &:not(:empty)::after {
    content: 'Result';
    position: absolute;
    top: var(--size-2);
    right: var(--size-3);
    font-size: 0.65rem; /* No token — deliberately tiny overlay label */
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-2);
    color: var(--text-2);
    opacity: 0.5;
  }
}

/* Variant × modifier grid on a component page: one row per variant, one
   column per modifier or state, and the live element in each cell. The
   headers name the classes, so the grid needs no code block. */
.demo-matrix {
  & th,
  & td {
    padding: var(--size-2) var(--size-3);
    vertical-align: middle;
  }

  & th {
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-5);
    color: var(--text-2);
  }
}

/* A wide grid scrolls inside its demo rather than widening the page. */
.demo:has(> .demo-matrix) { overflow-x: auto; }

/* Collapsible code */
.code-details {
  margin-top: var(--size-2);

  & > summary {
    padding: var(--size-1) 0;
    cursor: pointer;
    font-size: var(--font-size-0);
    color: var(--text-2);
  }

  & ui-code { margin-top: var(--size-2); }
  & ui-code + ui-code { margin-top: var(--size-1); }

  /* Text that continues after a code block starts a new step, so separate it. */
  & + p { margin-top: var(--size-3); }
}

/* ---- index.html landing grid ---- */

.docs-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--size-3);
  margin-block: var(--size-4);
}

.docs-index-card {
  /* Override the default section margin-bottom so grid gap controls spacing. */
  margin-bottom: 0;

  & h2 {
    font-size: var(--font-size-3);
    margin-block: 0 var(--size-1);

    & > a {
      color: inherit;
      text-decoration: none;

      &:hover { color: var(--brand); }
    }
  }

  & h3 {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-5);
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-3);
    margin-block: var(--size-3) var(--size-1);
  }

  & ul {
    margin: 0;
    padding-inline-start: var(--size-4);
    font-size: var(--font-size-1);

    & > li { margin-block: var(--size-1); }
  }
}

.docs-index-footer {
  margin-block: var(--size-6) var(--size-4);
  padding-block-start: var(--size-4);
  border-top: var(--border-size-1) solid var(--border-color);

  & h2 {
    font-size: var(--font-size-2);
    margin-block: 0 var(--size-2);
  }

  & ul {
    margin: 0;
    padding-inline-start: var(--size-5);
    font-size: var(--font-size-1);

    & > li {
      margin-block: var(--size-1);
      color: var(--text-2);
    }
  }
}

/* Sticky log panel */
#log {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-0);
  white-space: pre-wrap;
  background: var(--surface-1);
  padding: var(--size-3);
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--border-color);
  box-shadow: var(--shadow-3);
  max-height: 12rem; /* No token — panel-specific height cap */
  overflow-y: auto;
  margin-top: var(--size-7);
  position: sticky;
  bottom: 0;
  z-index: 1;

  &:empty { display: none; }
}