/* Review styling for the extracted pages. The markup is what matters for import;
   this only exists so the content is comfortable to read and audit in a browser. */
:root {
  --ink: #1b2021;
  --muted: #5d6b70;
  --line: #dfe5e3;
  --bg: #fbfaf7;
  --panel: #fff;
  --accent: #33683f;
  --accent-soft: #eef3ee;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1.5rem 5rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.page { max-width: 62rem; margin: 0 auto; }
.index { max-width: 84rem; }

.page-head { border-bottom: 2px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 2rem; }
.crumbs { font-size: .8rem; color: var(--muted); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; }
.crumbs a { color: var(--muted); }

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .6rem; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .75rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }

.summary {
  font-size: 1.05rem; font-weight: 400; color: var(--muted);
  margin: 0 0 .75rem; max-width: 46rem;
}
.source { font-size: .8rem; color: var(--muted); margin: 0; word-break: break-all; }

a { color: var(--accent); }

.body { max-width: 46rem; }
.body p { margin: 0 0 1rem; }
.body figure { margin: 1.5rem 0; }
.body figure img { max-width: 100%; height: auto; border-radius: 6px; display: block; }
.body figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }
.body ul, .body ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.body blockquote {
  margin: 1.25rem 0; padding: .5rem 0 .5rem 1rem;
  border-left: 3px solid var(--line); color: var(--muted);
}

/* Tables scroll on their own so the page never scrolls sideways. */
section.images, section.links, section.videos, section.prose-links, section.listing {
  overflow-x: auto;
}

table { border-collapse: collapse; width: 100%; font-size: .875rem; background: var(--panel); }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--accent-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
td.num { color: var(--muted); text-align: right; width: 2.5rem; white-space: nowrap; }
td.thumb { width: 6.5rem; }
td.thumb img { width: 6rem; height: 4rem; object-fit: cover; border-radius: 4px; display: block; background: var(--accent-soft); }
td.href { word-break: break-all; max-width: 20rem; font-size: .8rem; }
td.file { word-break: break-all; font-size: .78rem; max-width: 12rem; }
td.title { font-weight: 600; min-width: 11rem; }
td.summary { color: var(--muted); min-width: 14rem; }
td.tags, td.section, td.kind, td.caption, td.alt { color: var(--muted); font-size: .82rem; }

/* Link health markers — added by the pre-upload audit, see BROKEN-LINKS.md.
   Every one of these is review chrome: strip them before import. */
.link-issue {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  font: 600 .68rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: help;
}
.li-dead      { color: #b3261e; background: #fdecea; }  /* 404 / unreachable — definitely broken */
.li-malformed { color: #b3261e; background: #fdecea; }  /* double-escaped & in the markup */
.li-embed     { color: #a33d00; background: #fdf0e6; }  /* video exists, embedding blocked */
.li-check     { color: #7a5b00; background: #fdf6e0; }  /* 403 to our checker — verify by hand */

.link-audit {
  margin: 1rem 0 0;
  padding: .6rem .8rem;
  border-left: 3px solid #b3261e;
  background: #fdecea;
  color: #7d1a15;
  font-size: .85rem;
  line-height: 1.5;
}
.link-audit a { color: #7d1a15; }

/* index: the flag column is a count, not a link */
td.num .link-issue { margin-left: 0; }

/* Enhanced (upscaled) image previews — show the whole frame, not a cropped strip */
.images-enhanced .note { color: var(--muted); font-size: .85rem; margin: 0 0 .75rem; }
.images-enhanced td.thumb { width: 11rem; }
.images-enhanced td.thumb img { width: 10rem; height: auto; object-fit: contain; }

.kind, .pill {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
td.kind { background: none; }
tr.k-external td.kind { color: #8a5a12; }
tr.k-internal td.kind { color: #1f5d3a; }
tr.k-anchor   td.kind { color: #5a4b8a; }
tr.k-video    td.kind { color: #8a2f43; }
tr.k-asset    td.kind { color: #2f5f8a; }

/* Index */
.stats { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem 1rem; min-width: 6.5rem;
}
.stat .n { display: block; font-size: 1.5rem; font-weight: 650; line-height: 1.1; }
.stat .l { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1.25rem; }
.filters p { margin: 0 .4rem 0 0; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.filters button {
  font: inherit; font-size: .82rem; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .8rem; color: var(--ink);
}
.filters button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters button span { opacity: .6; margin-left: .2rem; }

.index-table td.title a { text-decoration: none; font-weight: 600; }
.index-table td.title .slug { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; }
.pill.t-hub { background: #e4efe6; color: #1f5d3a; }
.pill.t-article { background: #eceff3; color: #3c4a5a; }
.pill.t-utility { background: #f3eee4; color: #6b5a2f; }
.pill.t-video { background: #f6e8ec; color: #8a2f43; }
.pill.t-news { background: #e8eef6; color: #2f5f8a; }

@media (max-width: 700px) {
  body { padding: 1.25rem .9rem 3rem; }
  h1 { font-size: 1.5rem; }
}