@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Inconsolata:wght@400;700&display=swap");

/* Anomander components. Every value comes from tokens.css. Slides size in cqw
   inside .ano-slide-frame so they scale with any container. */

body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); }

/* ---------- Slide shell ---------- */
.ano-slide-frame { container-type: inline-size; }
.ano-slide {
  aspect-ratio: 16 / 9; width: 100%; box-sizing: border-box; position: relative; overflow: hidden;
  background: var(--surface); color: var(--text); font-family: var(--font-sans);
  border-radius: var(--radius-lg); padding: 6cqw 7cqw; display: grid;
  box-shadow: inset 0 0 0 var(--stroke-hairline) var(--focus-dim);
}
.ano-kicker {
  font-family: var(--font-mono); font-size: 1.5cqw; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mist);
}
.ano-kicker::before {
  content: ""; display: inline-block; width: 2.4cqw; height: .2cqw; background: var(--focus);
  vertical-align: middle; margin-right: 1.2cqw;
}
.ano-slide-title { margin: 1cqw 0 0; font-size: 3.6cqw; line-height: 1.1; font-weight: 700; color: var(--ink); text-wrap: balance; }
.ano-slide-title .ano-em { color: var(--accent); }
.ano-slide-title .ano-watch { color: var(--rose); }
.ano-foot {
  position: absolute; left: 7cqw; right: 7cqw; bottom: 3.4cqw; display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 1.25cqw; letter-spacing: .04em; color: var(--faint);
}

/* Cover */
.ano-cover { align-content: end; gap: 2cqw; padding-bottom: 10cqw; }
.ano-cover-title { margin: 0; font-size: 6cqw; line-height: 1.02; font-weight: 700; color: var(--ink); max-width: 70%; text-wrap: balance; }
.ano-cover-title em { font-style: normal; color: var(--accent); }
.ano-cover p { margin: 0; font-size: 1.9cqw; color: var(--text); max-width: 55%; }

/* Bullets */
.ano-bullets { list-style: none; margin: 2.6cqw 0 0; padding: 0; display: grid; gap: 1.7cqw; }
.ano-bullets li { font-size: 1.75cqw; line-height: 1.4; padding-left: 2.4cqw; position: relative; }
.ano-bullets li::before { content: ""; position: absolute; left: 0; top: .75cqw; width: .9cqw; height: .2cqw; background: var(--teal); }
.ano-bullets b { color: var(--ink); font-weight: 700; }

/* ---------- Focus: one per slide ---------- */
.ano-focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: .5cqw; border-radius: var(--radius-lg); }

/* Option cards */
.ano-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; align-content: center; }
.ano-card {
  background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg);
  padding: 2.4cqw; display: grid; gap: 1.2cqw; align-content: start;
}
.ano-card.ano-focus { background: var(--surface-focus); border-color: var(--focus); }
.ano-card-tag { font-family: var(--font-mono); font-size: 1.3cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.ano-card.ano-focus .ano-card-tag { color: var(--accent); }
.ano-card h3 { margin: 0; font-size: 2.1cqw; font-weight: 700; color: var(--ink); }
.ano-card p { margin: 0; font-size: 1.5cqw; line-height: 1.45; }
.ano-card-cost { font-family: var(--font-mono); font-size: 1.5cqw; color: var(--teal); }

/* ---------- Status rows and chips ---------- */
.ano-rows { display: grid; gap: 1.1cqw; align-content: center; }
.ano-row { display: grid; grid-template-columns: 1fr 12cqw 15cqw; gap: 2cqw; align-items: center; padding: 1.2cqw 1.4cqw; border-bottom: var(--stroke-hairline) solid var(--line); }
.ano-row.ano-focus { border-bottom-color: transparent; }
.ano-row-name { font-size: 1.75cqw; color: var(--ink); }
.ano-row-note { display: block; font-size: 1.35cqw; color: var(--rose); margin-top: .3cqw; }
.ano-row-owner { font-family: var(--font-mono); font-size: 1.4cqw; color: var(--mist); }
.ano-chip {
  justify-self: end; font-family: var(--font-mono); font-size: 1.25cqw; letter-spacing: .1em; text-transform: uppercase;
  padding: .45cqw 1cqw; border-radius: var(--radius-md); border: var(--stroke-hairline) solid currentColor;
}
.ano-chip-done { color: var(--teal); }
.ano-chip-watch { color: var(--rose); }
.ano-chip-problem { color: var(--scarlet); }
.ano-chip-planned { color: var(--mist); border-style: dashed; }

/* ---------- Bar chart ---------- */
.ano-bars { display: grid; gap: 1.5cqw; align-content: center; }
.ano-bar { display: grid; grid-template-columns: 16cqw 1fr 8cqw; gap: 2cqw; align-items: center; }
.ano-bar.ano-focus { padding: .6cqw 1cqw; margin: 0 -1cqw; }
.ano-bar-label { font-size: 1.6cqw; }
.ano-bar-track { height: 2.4cqw; background: var(--surface-raised); border-radius: var(--radius-md); overflow: hidden; }
.ano-bar-fill { height: 100%; background: var(--accent-fill); border-radius: var(--radius-md); }
.ano-bar-value { font-family: var(--font-mono); font-size: 1.6cqw; text-align: right; font-variant-numeric: tabular-nums; color: var(--mist); }
.ano-bar-problem .ano-bar-fill { background: var(--scarlet-fill); }
.ano-bar-problem .ano-bar-label { color: var(--ink); }
.ano-bar-problem .ano-bar-value { color: var(--scarlet); }

/* ---------- Code (dark in both themes) ---------- */
.ano-code {
  margin: 0; background: var(--code-bg); color: var(--code-text); font-family: var(--font-mono);
  font-size: 14px; line-height: 1.6; padding: var(--space-4) 18px; border-radius: var(--radius-md);
  border-left: var(--stroke-focus) solid var(--focus); white-space: pre; overflow-x: auto;
}
.ano-slide .ano-code { font-size: 1.55cqw; padding: 2.4cqw 2.6cqw; border: var(--stroke-hairline) solid var(--focus); border-radius: .6cqw; align-self: center; overflow: hidden; }
.ano-k { color: var(--syntax-keyword); } .ano-t { color: var(--syntax-type); } .ano-s { color: var(--syntax-string); }
.ano-n { color: var(--syntax-number); } .ano-f { color: var(--syntax-function); } .ano-v { color: var(--syntax-variable); }
.ano-c { color: var(--syntax-comment); }

/* ---------- Documents ---------- */
.ano-page {
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.62;
  border-radius: var(--radius-sm); overflow: hidden; border: var(--stroke-hairline) solid var(--line);
}
.ano-band {
  background: var(--band); color: var(--band-text); border-bottom: var(--stroke-focus) solid var(--focus);
  padding: 36px var(--space-10) 30px; display: grid; gap: 10px;
}
.ano-band-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--band-mist); }
.ano-band h1 { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 700; color: var(--band-ink); text-wrap: balance; }
.ano-band-meta { font-family: var(--font-mono); font-size: 13px; color: var(--band-text); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ano-doc-body { padding: var(--space-8) var(--space-10) var(--space-10); display: grid; gap: 14px; }
.ano-doc-body p { margin: 0; max-width: 66ch; }
.ano-doc-label { margin: 6px 0 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.ano-doc-heading { margin: 10px 0 0; font-size: 19px; font-weight: 700; color: var(--accent); }
.ano-doc-body a { color: var(--link); text-underline-offset: 2px; }
.ano-inline-code { font-family: var(--font-mono); font-size: .95em; background: var(--surface-raised); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--accent); }

/* Callouts */
.ano-callout { padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0; display: grid; gap: var(--space-1); color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.ano-callout b { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.ano-callout-risk { border-left: var(--stroke-edge) solid var(--scarlet-fill); background: var(--scarlet-soft); }
.ano-callout-risk b { color: var(--scarlet); }
.ano-callout-note { border-left: var(--stroke-edge) solid var(--rose); background: var(--rose-soft); }
.ano-callout-note b { color: var(--rose); }

/* Tables */
.ano-table-wrap { overflow-x: auto; }
.ano-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ano-table th { text-align: left; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); font-weight: 700; border-bottom: 1.5px solid var(--ink); padding: 6px 10px 6px 0; }
.ano-table td { border-bottom: var(--stroke-hairline) solid var(--line); padding: 7px 10px 7px 0; }
.ano-table .ano-num { text-align: right; font-family: var(--font-mono); }