/* Frontmatter status chips (rendered by scripts/chips.py).
   Colour pairs are defined as variables so the dark-mode block only has to
   restate the palette, not every chip rule. */

:root {
  --chip-grey-bg:   #e8eaed; --chip-grey-fg:   #5f6368;
  --chip-blue-bg:   #e3f0fd; --chip-blue-fg:   #1a63c7;
  --chip-indigo-bg: #e9e6fb; --chip-indigo-fg: #5b3fd6;
  --chip-teal-bg:   #d9f2ee; --chip-teal-fg:   #0f766e;
  --chip-amber-bg:  #fdefd6; --chip-amber-fg:  #a15c00;
  --chip-green-bg:  #dcf3e3; --chip-green-fg:  #1a7f42;
  --chip-clay-bg:   #f3e9df; --chip-clay-fg:   #a6521a;
}

[data-md-color-scheme="slate"] {
  --chip-grey-bg:   #2b2f36; --chip-grey-fg:   #b6bcc6;
  --chip-blue-bg:   #16324f; --chip-blue-fg:   #7db4f0;
  --chip-indigo-bg: #2a2350; --chip-indigo-fg: #b3a3f5;
  --chip-teal-bg:   #12332f; --chip-teal-fg:   #5fd0c0;
  --chip-amber-bg:  #3a2c10; --chip-amber-fg:  #e6b35c;
  --chip-green-bg:  #12331f; --chip-green-fg:  #63c98a;
  --chip-clay-bg:   #37281c; --chip-clay-fg:   #d79a63;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.1rem 0 1.3rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  /* Fallback colour: any unknown/typo'd value still renders as a plain grey
     chip (visible, so mistakes get noticed). Specific rules below override. */
  background: var(--chip-grey-bg);
  color: var(--chip-grey-fg);
}

a.chip { text-decoration: none; }
a.chip:hover { filter: brightness(1.06); }

/* Stage — the spec lifecycle gate */
.chip--stage-backlog    { background: var(--chip-grey-bg);   color: var(--chip-grey-fg); }
.chip--stage-estimated  { background: var(--chip-blue-bg);   color: var(--chip-blue-fg); }
.chip--stage-locked-in  { background: var(--chip-indigo-bg); color: var(--chip-indigo-fg); }
.chip--stage-signed-off { background: var(--chip-teal-bg);   color: var(--chip-teal-fg); }
.chip--stage-building   { background: var(--chip-amber-bg);  color: var(--chip-amber-fg); }
.chip--stage-built      { background: var(--chip-green-bg);  color: var(--chip-green-fg); }

/* Status — how fresh the doc is vs shipped code */
.chip--status-shipped   { background: var(--chip-green-bg);  color: var(--chip-green-fg); }
.chip--status-partial   { background: var(--chip-amber-bg);  color: var(--chip-amber-fg); }
.chip--status-wip       { background: var(--chip-blue-bg);   color: var(--chip-blue-fg); }
.chip--status-deferred  { background: var(--chip-grey-bg);   color: var(--chip-grey-fg); }

/* Design track — where the module's design sits on in-progress → in-review → approved */
.chip--dstatus-in-progress { background: var(--chip-blue-bg);  color: var(--chip-blue-fg); }
.chip--dstatus-in-review   { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.chip--dstatus-approved    { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.chip--dstatus-missing     { background: var(--chip-clay-bg);  color: var(--chip-clay-fg); }

/* Spec track — where the spec page sits on draft → in-review → approved */
.chip--sstatus-draft       { background: var(--chip-grey-bg);  color: var(--chip-grey-fg); }
.chip--sstatus-in-review   { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.chip--sstatus-approved    { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.chip--sstatus-deferred    { background: var(--chip-grey-bg);  color: var(--chip-grey-fg); }

/* Build-ready gate — design AND spec both approved */
.chip--buildready {
  background: var(--chip-green-bg);
  color: var(--chip-green-fg);
  border-color: currentColor;
}

/* Missing design canon — visible so the gap gets noticed */
.chip--design-missing { background: var(--chip-clay-bg); color: var(--chip-clay-fg); }

/* Estimate — quiet, outlined */
.chip--estimate {
  background: transparent;
  border-color: currentColor;
  color: var(--chip-grey-fg);
  font-weight: 500;
}
.chip--estimate::before { content: "⏱"; opacity: 0.7; }

/* Linear ticket link */
.chip--linear { background: var(--chip-indigo-bg); color: var(--chip-indigo-fg); }
.chip--linear::before { content: "◇"; opacity: 0.7; }

/* Claude design link */
.chip--design { background: var(--chip-clay-bg); color: var(--chip-clay-fg); }


/* ============================================================================
   Vertical key-value metadata table — the format the hook renders (render_meta_table).
   The .chip* rules above support the alternative inline chip-row renderer.
   Borders/label background use Material's theme variables so they adapt to
   light/dark on their own; the dots reuse the --chip-*-fg colours.
   ========================================================================== */

.md-typeset .meta-table {
  border-collapse: collapse;
  margin: 0.2rem 0 1.4rem;
  font-size: 0.72rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.35rem;
  overflow: hidden;
}

.md-typeset .meta-table th,
.md-typeset .meta-table td {
  padding: 0.3rem 0.75rem;
  text-align: left;
  border: none;
  vertical-align: middle;
}

.md-typeset .meta-table tr:not(:last-child) th,
.md-typeset .meta-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .meta-table th {
  width: 1%;                       /* keep the label column as tight as its text */
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .meta-table td { color: var(--md-default-fg-color); }

/* Colour dot on the stage / status value */
.meta-dot {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  margin-right: 0.5em;
  background: var(--dot, var(--chip-grey-fg));
}

.meta-dot--stage-backlog    { --dot: var(--chip-grey-fg); }
.meta-dot--stage-estimated  { --dot: var(--chip-blue-fg); }
.meta-dot--stage-locked-in  { --dot: var(--chip-indigo-fg); }
.meta-dot--stage-signed-off { --dot: var(--chip-teal-fg); }
.meta-dot--stage-building   { --dot: var(--chip-amber-fg); }
.meta-dot--stage-built      { --dot: var(--chip-green-fg); }

.meta-dot--status-shipped   { --dot: var(--chip-green-fg); }
.meta-dot--status-partial   { --dot: var(--chip-amber-fg); }
.meta-dot--status-wip       { --dot: var(--chip-blue-fg); }
.meta-dot--status-deferred  { --dot: var(--chip-grey-fg); }

/* Design track dots */
.meta-dot--dstatus-in-progress { --dot: var(--chip-blue-fg); }
.meta-dot--dstatus-in-review   { --dot: var(--chip-amber-fg); }
.meta-dot--dstatus-approved    { --dot: var(--chip-green-fg); }
.meta-dot--dstatus-missing     { --dot: var(--chip-clay-fg); }

/* Spec track dots */
.meta-dot--sstatus-draft       { --dot: var(--chip-grey-fg); }
.meta-dot--sstatus-in-review   { --dot: var(--chip-amber-fg); }
.meta-dot--sstatus-approved    { --dot: var(--chip-green-fg); }
.meta-dot--sstatus-deferred    { --dot: var(--chip-grey-fg); }

/* Missing design canon, rendered inline in the meta table */
.md-typeset .meta-table .meta-missing {
  color: var(--chip-clay-fg);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Links inside the table */
.md-typeset .meta-table a.meta-link { text-decoration: none; font-weight: 500; }
.md-typeset .meta-table a.meta-link:hover { text-decoration: underline; }
.meta-link--linear { color: var(--chip-indigo-fg); }
.meta-link--design { color: var(--chip-clay-fg); }
.meta-link--xref { color: var(--md-accent-fg-color, var(--md-primary-fg-color)); }

/* Confidence — reuses the green / amber / grey palette */
.meta-dot--conf-high   { --dot: var(--chip-green-fg); }
.meta-dot--conf-medium { --dot: var(--chip-amber-fg); }
.meta-dot--conf-low    { --dot: var(--chip-grey-fg); }
.chip--conf-high   { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.chip--conf-medium { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.chip--conf-low    { background: var(--chip-grey-bg); color: var(--chip-grey-fg); }

/* Inline PIN-#### references auto-linked to Linear (scripts/pin_autolink.py). */
a.pin-ref {
  color: var(--md-typeset-a-color, #5b5bd6);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  white-space: nowrap;
}
a.pin-ref:hover { border-bottom-style: solid; }

/* Live Linear status + 8-week cycle chips in the per-page meta table (scripts/chips.py). */
.chip--lstatus {
  background: color-mix(in srgb, var(--md-default-fg-color, #333) 8%, transparent);
  color: var(--md-default-fg-color--light, #555);
  font-weight: 600;
}
/* Muted "· +N queued" note after the lead status chip on multi-ticket features. */
.lstatus-note {
  margin-left: 0.4em;
  color: var(--md-default-fg-color--light, #777);
  font-size: 0.82em;
  white-space: nowrap;
}
.chip--cycle {
  background: color-mix(in srgb, #5b5bd6 16%, transparent);
  color: #4a3fc0;
  font-weight: 700;
  letter-spacing: 0.02em;
}
:root:not([data-theme="light"]) .chip--cycle,
[data-theme="dark"] .chip--cycle { color: #b7b0ff; }

/* Wider content on large screens so multi-column feature tables show fully (not cut off). */
@media (min-width: 1400px) {
  .md-grid { max-width: min(92vw, 84rem); }
}

/* Gantt (roadmap timeline): the chart renders at natural width (useMaxWidth:false in the hook),
   so cap the box at the content width and let the chart scroll/pan horizontally inside it instead
   of spilling the page. `.md-typeset .mermaid` beats Material's own centered-diagram rule. Harmless
   for diagrams that already fit — they simply never overflow. */
.md-typeset .mermaid {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: left;
}