/* ========================================
   Detail page content: entities, tags, resources, examples, concepts
   (split from main.css, PLAN-165 D9)
   ======================================== */

/* Detail Pages (Bit, Tag, Group, Card)
   ---------------------------------------- */
.bit-detail,
.tag-detail,
.card-detail {
  max-width: var(--max-width-prose);
}

/* Entity names are code — render them in the mono face (PLAN-159). */
.bit-detail > h1,
.tag-detail > h1,
.card-detail > h1,
.resource-detail > h1,
.mark-detail > h1 {
  font-family: var(--font-mono);
}

.tag-human-name {
  font-family: var(--font-sans);
}

.bit-detail h1,
.tag-detail h1,
.card-detail h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
}

/* Description Lists
   ---------------------------------------- */
dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  background-color: var(--color-bg-subtle);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

dt {
  font-weight: 600;
  color: var(--color-text-muted);
}

/* min-width: 0 lets a wide JSON block scroll inside the value instead of
   widening the grid, and the page, on a narrow phone. */
dd {
  min-width: 0;
  color: var(--color-text);
}

/* Sections within detail pages */
.description,
.properties,
.card-reference,
.groups,
.tags,
.aliases {
  margin-bottom: var(--space-8);
}

/* Tag List
   ---------------------------------------- */
.tag-list {
  list-style: none;
  padding: 0;
}

.tag-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.tag-list li:last-child {
  border-bottom: none;
}

/* Resource List
   ---------------------------------------- */
.resource-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.resource-list li {
  background-color: var(--color-bg-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.resource-list a {
  color: var(--color-text);
}

/* Resource names are entity names: monospace like the others. */
.resource-list a {
  font-family: var(--font-mono);
}

/* Tag Title (sigil + human name)
   ---------------------------------------- */
.tag-detail h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

/* A long tag name (@extractorExtractionTimestamp) wraps on a phone instead
   of widening the page. */
.tag-sigil {
  font-family: var(--font-mono);
  min-width: 0;
  overflow-wrap: anywhere;
}

.tag-human-name {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-text-muted);
}

.json-key-pattern {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* Reference Lists (used by bits)
   ---------------------------------------- */
.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 3 12rem;
  column-gap: var(--space-6);
}

.ref-list li {
  padding: var(--space-1) 0;
  break-inside: avoid;
  font-size: var(--text-sm);
}

.ref-list li[hidden] {
  display: none;
}

.ref-list-toggle {
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  color: var(--color-link);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ref-list-toggle:hover {
  border-color: var(--color-link);
}

/* Real Bit Examples (static Try-it fallback block)
   ---------------------------------------- */

.bitmark-example {
  max-height: 24rem;
  overflow: auto;
}

/* Structure (Grammar) Tree
   ---------------------------------------- */
.structure {
  margin-bottom: var(--space-8);
}

/* Syntax Skeleton + Detail Rail
   ---------------------------------------- */
.syntax {
  margin-bottom: var(--space-8);
}

.skeleton-block {
  margin-bottom: var(--space-2);
  line-height: 1.9;
}

.skeleton-value {
  color: var(--color-text-muted);
  font-style: italic;
}

.skeleton-group {
  font-style: italic;
}

.skeleton-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.mini-toc {
  display: none;
}

/* "On this page" (PLAN-287 D7): a small capitals title, links on a thin
   rule; the one being read (toc.js) has an indigo rule and its label wears
   the highlighter (D3). */
.mini-toc-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

.mini-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mini-toc a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12.5px;
}

.mini-toc a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.mini-toc a[aria-current="location"] {
  border-left-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 500;
}

.mini-toc a[aria-current="location"] span {
  background-color: var(--color-highlight);
  color: var(--color-on-highlight);
  padding: 0 3px;
  border-radius: 2px;
}

.detail-rail--toc-only {
  display: none;
}

/* Wide viewports: move the rail into the right column */
@media (min-width: 1100px) {
  .bit-detail,
  .tag-detail,
  .card-detail,
  .resource-detail,
  .mark-detail,
  .group-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
    column-gap: var(--space-12);
    align-items: start;
    max-width: none;
  }

  /* Running text keeps the 65ch measure per element; wide elements —
     tag tables, examples, card sections — and the title span the full
     content column (PLAN-170 width pass). */
  .bit-detail > *,
  .tag-detail > *,
  .card-detail > *,
  .resource-detail > *,
  .mark-detail > *,
  .group-detail > * {
    grid-column: 1;
    max-width: var(--max-width-prose);
  }

  .bit-detail > h1,
  .tag-detail > h1,
  .card-detail > h1,
  .bit-detail > .tag-section,
  .bit-detail > .try-it,
  .card-detail > .cards {
    max-width: none;
  }

  /* A separate third column: starts level with the title, divided from
     the prose by its own border, sticks below the header and scrolls
     internally when taller than the viewport (PLAN-170). */
  .bit-detail > .detail-rail,
  .tag-detail > .detail-rail,
  .card-detail > .detail-rail,
  .resource-detail > .detail-rail,
  .mark-detail > .detail-rail,
  .group-detail > .detail-rail,
  .concept-page.has-toc > .detail-rail {
    grid-column: 2;
    grid-row: 1 / span 40;
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    max-height: calc(100vh - var(--header-height) - var(--space-12));
    overflow-y: auto;
  }

  .detail-rail--toc-only {
    display: block;
  }

  .detail-rail .syntax h2 {
    margin-top: 0;
    font-size: var(--text-lg);
  }

  .detail-rail .skeleton-block {
    font-size: var(--text-xs);
  }

  .mini-toc:not([hidden]) {
    display: block;
    margin-top: var(--space-6);
  }

  .detail-rail--toc-only .mini-toc:not([hidden]) {
    margin-top: 0;
  }

  /* A hand-written page with "On this page" (PLAN-287 D7): the text keeps
     its measure, the rail sits at the right. */
  .concept-page.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
    column-gap: var(--space-12);
    align-items: start;
  }

  .concept-page.has-toc > * {
    grid-column: 1;
  }
}

/* Concept pages (PLAN-162 D)
   ---------------------------------------- */
.concept-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.concept-list a {
  font-weight: 600;
}

.concept-content {
  max-width: 65ch;
}

.concept-content h2 {
  margin-top: var(--space-8);
}

/* Tables in the hand-written pages (PLAN-287 D7): hairlines, a light head. */
.concept-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-sm);
}

.concept-content th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  padding: 7px 10px;
}

.concept-content td {
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  padding: 7px 10px;
}

/* The title row (PLAN-287 D7): the title, and beside it the proposal badge
   of a page for a feature no released parser has yet (PLAN-285 D4). */
.page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-6);
}

.page-title-row h1 {
  margin-bottom: 0;
}

.concept-status {
  margin: 0;
}

/* Callouts (admonitions, PLAN-274 D7b)
   ----------------------------------------
   One style, three kinds: a coloured left border and outline, a tinted
   title bar with an icon, the body below. Used by the deprecation notice
   (warning), the usage notes (note) and `> [!KIND]` quotes in concept
   Markdown (lib/callouts.js). */
.callout {
  --callout-color: var(--color-note);
  --callout-bg: var(--color-note-bg);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E");
  margin: 0 0 var(--space-6);
  padding: 0 var(--space-4) var(--space-1);
  border: 1px solid var(--callout-color);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.callout--tip {
  --callout-color: var(--color-tip);
  --callout-bg: var(--color-tip-bg);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1H9v1Zm3-19a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E");
}

.callout--warning {
  --callout-color: var(--color-warning);
  --callout-bg: var(--color-warning-bg);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z'/%3E%3C/svg%3E");
}

.callout > .callout-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background-color: var(--callout-bg);
  border: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--line-height-normal);
  letter-spacing: normal;
}

.callout > .callout-title::before {
  content: "";
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--callout-color);
  -webkit-mask: var(--callout-icon) center / contain no-repeat;
  mask: var(--callout-icon) center / contain no-repeat;
}

.callout > :last-child {
  margin-bottom: var(--space-3);
}

.callout ul {
  padding-left: var(--space-6);
}

.deprecation-version {
  font-weight: 400;
}

/* Display names and group pills (PLAN-176)
   ----------------------------------------
   The technical name is the primary label everywhere; the display name is
   secondary to it, and never replaces it. */

.entity-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* One line under the h1: the display name at heading weight, with the bit's
   group pills inline beside it (PLAN-176 D21). Replaces four stacked blocks —
   name, pills, a "Description" label and the text — with two. */
.entity-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: calc(-1 * var(--space-4)) 0 var(--space-3);
}

.entity-heading .entity-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-heading);
}

.entity-heading .pill-list {
  margin: 0;
}

/* The description now follows the heading line directly, with no label. */
.bit-detail > .description,
.group-detail > .description {
  margin-top: 0;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* At least 24 px tall: WCAG 2.5.8 target size (EAA). */
.group-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 24px;
  padding: 0 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 1em;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.group-pill:hover,
.group-pill:focus-visible {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.cell-groups .group-pill {
  margin-right: var(--space-1);
}

.tree-node-content .group-pill {
  margin-left: var(--space-1);
}

.empty-note {
  color: var(--color-text-muted);
  font-style: italic;
}

.tree-node-link-text {
  font-family: var(--font-sans);
}

/* Contextual Tag Table (PLAN-163)
   ----------------------------------------
   One section per group, in config order. Nothing collapses: the reader sees
   every row the config gives the bit, and the mini-TOC provides the jump. */
.tag-section {
  margin-bottom: var(--space-8);
}

.tag-section-heading {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
}

.tag-table .cell-name {
  /* Chain depth is data, not markup nesting: indent from --depth. */
  padding-left: calc(var(--space-4) + var(--depth, 0) * var(--space-4));
}

.tag-table .tag-row--chained .cell-name a::before {
  content: "└ ";
  color: var(--color-text-muted);
}

.tag-table .cell-count {
  white-space: nowrap;
}

.row-overridden {
  /* Theme-aware in both palettes: --color-primary is redefined for dark. */
  color: var(--color-primary);
  font-weight: 700;
}

/* `info`'s fifth column, as a marker rather than a column: only 5% of tag
   meanings set it, so a column would be blank on nearly every row
   (PLAN-176 D26). The literal token is kept — it is the config key a
   developer would search for — so it is not translated; the tooltip is. */
.always-emit {
  margin-left: var(--space-2);
  padding: 0 0.4em;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
  cursor: help;
}

/* Tag page: one section per meaning. */
.meaning + .meaning {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.meanings-note,
.resource-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* "Try it" — live bitmark ⇄ JSON editor (PLAN-171, PLAN-227)
   ---------------------------------------- */
.try-it {
  position: relative;
  margin-bottom: var(--space-8);
}

/* Collapsed by default: the heading is the toggle, with a chevron after it
   like the sidebar tree's. */
.try-it-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.try-it-summary::-webkit-details-marker {
  display: none;
}

.try-it-summary h2 {
  margin: 0;
}

.try-it-summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--color-heading);
  border-bottom: 2px solid var(--color-heading);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

.try-it-details[open] > .try-it-summary {
  margin-bottom: var(--space-4);
}

.try-it-details[open] > .try-it-summary::after {
  margin-top: -0.4rem;
  transform: rotate(45deg);
}

.try-it-summary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* The grid/flex display rules below would otherwise override the UA's
   [hidden] rule — the editor must stay invisible until the engine is
   ready (and forever without JS). */
.try-it [hidden] {
  display: none !important;
}

.try-it-version {
  position: absolute;
  top: 0.4rem;
  right: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* Stacked panes (D5 revised 2026-08-31): both are wide content — even a
   large monitor can't show bitmark and its JSON side by side usefully. */
.try-it-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.try-it-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.try-it-pane-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* The panes are bitmark editor package panes (PLAN-227): fixed height,
   scrolling inside. */
.try-it-pane bitmark-pane {
  display: block;
  height: 15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Bitmark token colours on the site's buckets (PLAN-227 D6), keyed by the
   parser's semantic token types, never bit/tag names. Heading, bold, italic
   and plain text keep the editor's text colour. */
.try-it-session {
  display: block;
  --bm-tok-bitSigil-color: var(--syntax-key);
  --bm-tok-bitType-color: var(--syntax-key);
  --bm-tok-bitFormat-color: var(--syntax-key);
  --bm-tok-bitResourceType-color: var(--syntax-key);
  --bm-tok-tagSigil-color: var(--syntax-key);
  --bm-tok-propertyKey-color: var(--syntax-key);
  --bm-tok-resourceType-color: var(--syntax-key);
  --bm-tok-tagText-color: var(--syntax-string);
  --bm-tok-attrKey-color: var(--syntax-string);
  --bm-tok-attrValue-color: var(--syntax-string);
  --bm-tok-imageSrc-color: var(--syntax-string);
  --bm-tok-url-color: var(--syntax-string);
  --bm-tok-frontmatter-color: var(--syntax-literal);
  --bm-tok-cardDivider-color: var(--syntax-literal);
  --bm-tok-sideDivider-color: var(--syntax-literal);
  --bm-tok-variantDivider-color: var(--syntax-literal);
  --bm-tok-footerDivider-color: var(--syntax-literal);
  --bm-tok-textDivider-color: var(--syntax-literal);
  --bm-tok-paragraphBreak-color: var(--syntax-literal);
  --bm-tok-headingSigil-color: var(--syntax-number);
  --bm-tok-listMarker-color: var(--syntax-number);
  --bm-tok-imageSigil-color: var(--syntax-number);
  --bm-tok-markSigil-color: var(--syntax-number);
  --bm-tok-attrSigil-color: var(--syntax-number);
  --bm-mod-unclosed-color: var(--color-error);
}

.try-it-controls {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.try-it-reset,
.try-it-template {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.try-it-reset:hover,
.try-it-template:hover {
  border-color: var(--color-link);
  color: var(--color-link);
}