/* "Triangles all the way down" page. Shares the visual language and
   layout mechanics of ../portfolio/assets/portfolio.css and
   ../resume/assets/resume.css: CSS custom properties for theming,
   prefers-color-scheme dark mode, a 701px desktop breakpoint, the
   max-content + minmax(0, 1fr) header grid, and min-width: 0 on flex
   children. Palette is this page's own: forest-green accent, warm
   triforce-gold highlight.

   Each entry's own README.md renders inside a ".readme-box": a bordered
   window in a monospace font, so its tables and code blocks read the way
   they do in a text editor rather than getting smoothed into prose. */

:root {
  --page-bg: #f2f5f0;
  --surface: #e4ede2;
  --accent: #2f6b4a;
  --heading: #234f38;
  --on-accent: #ffffff;
  --text: #1b241e;
  --muted: #59665d;
  --border: #ccd8cc;
  --highlight: #b8892b;
  --link: #b8892b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0f1411;
    --surface: #18211b;
    --accent: #4fae7f;
    --heading: #86d4a8;
    --on-accent: #0b110d;
    --text: #e3ebe5;
    --muted: #99a89e;
    --border: #2f3a33;
    --highlight: #d9b45c;
    --link: #d9b45c;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

/* Page-wide default so any link renders consistently no matter which
   prose field it turns up in, not just the spots that got their own rule.
   The more specific link rules below (entry-code-link, entry-demo-link,
   ...) still win where a bolder, more prominent treatment is wanted. */
a {
  color: var(--link);
  text-decoration: underline;
}

.try-angles-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

@media (max-width: 420px) {
  .try-angles-page {
    padding: 2rem 1rem 3rem;
  }
}

.try-angles-title {
  color: var(--heading);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.try-angles-intro {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.try-angles-intro p {
  margin: 0 0 0.85em;
}

.try-angles-intro p:last-child {
  margin-bottom: 0;
}

.try-angles-intro a {
  color: var(--link);
  text-decoration: underline;
}

.try-angles-crosslinks {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 2.5rem;
}

.try-angles-crosslinks a {
  color: var(--link);
  text-decoration: underline;
}

/* --- Page layout: main list + coolness toggle + tag sidebar ---
   Mobile-first: a single flex column, in DOM order (coolness toggle, then
   entry list, then sidebar/tag filter). At the desktop breakpoint this
   switches to a named-area grid so the toggle can visually relocate to the
   top of the sidebar column without moving in the DOM. Same mechanic as
   ../../portfolio/assets/portfolio.css. */

.try-angles-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

#try-angles-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.cool-filter-mount {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* Nothing mounted (no coolFilter in the content JSON): don't leave an
   empty bordered strip above the list. */
.cool-filter-mount:empty {
  display: none;
}

.try-angles-sidebar {
  min-width: 0;
}

@media (min-width: 701px) {
  .try-angles-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
    grid-template-areas:
      "main cool"
      "main sidebar";
    align-items: start;
  }

  .cool-filter-mount {
    grid-area: cool;
    padding-bottom: 1em;
    border-bottom: none;
  }

  #try-angles-list {
    grid-area: main;
  }

  .try-angles-sidebar {
    grid-area: sidebar;
  }
}

/* --- Coolness filter (cool / booo-ring toggle) ---
   Same chip mechanic as the portfolio's potato size toggle; here the two
   icons differ in shape (carved Sierpinski vs plain slab) rather than size. */

.cool-filter {
  display: flex;
  gap: 0.75rem;
}

.cool-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--surface);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.6rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  transition: opacity 0.15s ease;
}

.cool-chip.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.cool-chip.is-muted {
  opacity: 0.4;
}

.cool-icon {
  display: inline-flex;
  color: var(--heading);
}

.cool-chip.is-active .cool-icon {
  color: var(--on-accent);
}

/* The boring slab stays deliberately flat and muted even while the cool
   chip is doing its triforce thing. */
.cool-icon-boring {
  color: var(--muted);
}

.cool-icon svg {
  display: block;
  width: 1.15rem;
  height: 1.04rem;
}

/* --- Accordion entries --- */

.entry {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}

.entry-header {
  width: 100%;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.5rem 1rem;
  background-color: var(--surface);
  color: var(--text);
  border: none;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.entry.is-open .entry-header {
  background-color: var(--accent);
  color: var(--on-accent);
}

.entry-name {
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

.tag-chip {
  /* Default fallback; actual per-tag colors are set inline via JS from
     TAG_COLORS in try-angles-data.js. */
  background-color: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* The "lame grey" tags stay hidden on the collapsed header (they're not
   the interesting part of the tag list at a glance) and only reveal once
   the entry is expanded. */
.tag-chip-collapsed-hidden {
  display: none;
}

.entry.is-open .tag-chip-collapsed-hidden {
  display: inline-block;
}

.entry-body {
  display: none;
  padding: 1.25rem;
  border-top: 1px solid var(--border);
}

.entry.is-open .entry-body {
  display: block;
}

.entry-blurb {
  margin: 0 0 1rem;
  color: var(--text);
}

/* --- Readme box: each entry's own README.md, rendered server-side and
   dropped in verbatim instead of a hand-written blurb. Styled like a little
   terminal/editor window: a title bar, then the file's own content in a
   fixed-width font so its tables and code blocks keep their shape. --- */

.readme-box {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 1rem;
  background-color: var(--page-bg);
}

.readme-box-titlebar {
  background-color: var(--surface);
  color: var(--muted);
  font-family: "Fira Code", "Cascadia Code", Fixedsys, ui-monospace, "SF Mono",
    "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.readme-box-body {
  padding: 1rem 1.25rem;
  font-family: "Fira Code", "Cascadia Code", Fixedsys, ui-monospace, "SF Mono",
    "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text);
  overflow-x: auto;
}

.readme-box-body > *:first-child {
  margin-top: 0;
}

.readme-box-body > *:last-child {
  margin-bottom: 0;
}

.readme-box-body h1,
.readme-box-body h2,
.readme-box-body h3 {
  color: var(--heading);
  font-size: 1em;
  margin: 1.25em 0 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}

.readme-box-body p {
  margin: 0 0 0.9em;
}

.readme-box-body ul,
.readme-box-body ol {
  margin: 0 0 0.9em;
  padding-left: 1.4em;
}

.readme-box-body li {
  margin-bottom: 0.3em;
}

.readme-box-body a {
  color: var(--link);
  text-decoration: underline;
}

.readme-box-body code {
  background-color: var(--surface);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

.readme-box-body pre {
  background-color: var(--surface);
  border-radius: 6px;
  padding: 0.75em 1em;
  overflow-x: auto;
  margin: 0 0 0.9em;
}

.readme-box-body pre code {
  background: none;
  padding: 0;
}

.readme-box-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 0.9em;
}

.readme-box-body th,
.readme-box-body td {
  border: 1px solid var(--border);
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: top;
}

.readme-box-body th {
  background-color: var(--surface);
}

.readme-box-body img,
.readme-box-body video {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  margin: 0.4em 0;
}

.readme-box-body .md-video-caption {
  display: block;
  color: var(--muted);
  font-size: 0.9em;
  margin: -0.2em 0 0.9em;
}

.entry-links {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.entry-links:last-child {
  margin-bottom: 0;
}

.entry-code-link,
.entry-demo-link {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
}

.entry-demo-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--highlight);
  cursor: pointer;
  text-decoration: underline;
}

.entry-demo-button:hover {
  color: var(--heading);
}

.entry-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* One small button per entry.proofs[] item (e.g. one per prompt-engineering
   technique): lighter-weight than the main demo button since there can be
   several of these on one entry. */
.entry-proofs {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.entry-proof-button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
}

.entry-proof-button:hover {
  color: var(--heading);
  border-color: var(--heading);
}

/* --- Artifact modal --- */

.artifact-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(8, 12, 10, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
}

.artifact-modal-overlay.is-hidden {
  display: none;
}

.artifact-modal {
  background-color: var(--surface);
  border-radius: 12px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
  color: var(--text);
}

.artifact-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.artifact-modal-close:hover {
  color: var(--heading);
}

.artifact-modal-heading {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--heading);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

.artifact-modal-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.artifact-modal-figure {
  margin: 0;
}

.artifact-modal-media {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  background-color: var(--page-bg);
}

.artifact-modal-caption {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.artifact-modal-page-link {
  display: inline-block;
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Tag filter (cloud + legend): same mechanic as the portfolio --- */

.tag-filter {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tag-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tag-filter-group-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.tag-filter-group-heading {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.tag-legend-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

.tag-legend-toggle:hover {
  color: var(--heading);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-cloud-chip {
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  /* Default fallback; actual per-tag colors are set inline via JS. */
  background-color: var(--accent);
  color: var(--on-accent);
}

.tag-cloud-chip.is-active {
  box-shadow: 0 0 0 2px var(--highlight);
}

.tag-cloud-chip.is-muted {
  opacity: 0.3;
}

.tag-legend {
  margin: 0;
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.82rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.tag-legend.is-visible {
  display: flex;
}

.tag-legend-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.25rem 0.3rem;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.tag-legend-row:hover {
  background-color: var(--page-bg);
}

.tag-legend-row.is-active {
  background-color: var(--page-bg);
  box-shadow: inset 2px 0 0 var(--highlight);
}

.tag-legend-row.is-muted {
  display: none;
}

.tag-legend-term {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--heading);
}

.tag-legend-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tag-legend-description {
  margin: 0 0 0 1.1rem;
  color: var(--muted);
}

/* --- Narrow phone tightening (kept last so it wins the cascade) --- */

@media (max-width: 420px) {
  .entry-header {
    padding: 0.85rem 1rem;
  }
}