/* Series chrome, layered on design.css (palette, type scale, --font-mono): kind/difficulty/area tags, dependency links, Read-next box.
   Uses PaperMod's CSS variables so it follows light/dark automatically. */

.theorem-meta {
  margin-top: 8px;
  line-height: 2.1;
}

.theorem-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--secondary);
  margin-right: 8px;
}

.theorem-kind,
.theorem-difficulty,
.theorem-area {
  display: inline-block;
  font-size: 12px;
  padding: 1px 8px;
  margin-right: 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
  text-decoration: none !important;
  white-space: nowrap;
}

/* Kind is the calibration signal, so it gets the only filled treatment. */
.theorem-kind {
  background: var(--code-bg);
  color: var(--primary);
  font-weight: 600;
}

.theorem-difficulty {
  color: var(--secondary);
  font-family: var(--font-mono);
  cursor: help;
}

.theorem-area {
  color: var(--secondary);
  border-color: transparent;
  padding-left: 2px;
  padding-right: 2px;
}

.theorem-kind:hover,
.theorem-difficulty:hover,
.theorem-area:hover {
  color: var(--primary);
  border-color: var(--secondary);
}

.theorem-deps {
  font-size: 13px;
  color: var(--secondary);
  margin-top: 4px;
  line-height: 1.7;
}

.theorem-deps > span {
  font-weight: 600;
  margin-right: 4px;
}

.theorem-deps > span:not(:first-child) {
  margin-left: 10px;
}

/* An unwritten dependency is shown, not hidden: it is a to-do that the plan
   says must be restated in two sentences anyway. */
.dep-unwritten {
  font-family: var(--font-mono);
  opacity: 0.55;
  cursor: help;
  border-bottom: 1px dotted var(--secondary);
}

.read-next {
  margin: 40px 0 8px;
  padding: 16px 20px;
  border-left: 3px solid var(--secondary);
  background: var(--code-bg);
  border-radius: 0 6px 6px 0;
}

.read-next-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--secondary);
  margin-bottom: 6px;
}

.read-next-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.read-next-why {
  font-size: 14px;
  color: var(--secondary);
}

.read-next-why p {
  margin: 0;
}

/* Boxed formal statements and L3 proof sketches. The plan settles that these
   are inline boxes, never collapsibles: they must survive print. */
.formal,
.sketch {
  margin: 22px 0;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--code-bg);
}

.formal::before,
.sketch::before {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--secondary);
  margin-bottom: 8px;
}

.formal::before { content: "Formally"; }
.sketch::before { content: "Proof sketch"; }

.formal > :last-child,
.sketch > :last-child { margin-bottom: 0; }

/* The index page: a dense table is the point, so let it use the full width. */
.index-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.index-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--secondary);
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
}

.index-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.index-table tr:hover td { background: var(--code-bg); }

.index-part-heading td {
  font-weight: 700;
  padding-top: 20px;
  background: none !important;
}

@media print {
  .read-next { border: 1px solid #999; background: none; }
  .theorem-deps a { text-decoration: none; color: inherit; }
}

/* ------------------------------------------------------------------------
   Alignment with design.css. The chrome (tags, deps, index) is the machine-
   readable layer of a post, so it takes the monospace register wholesale
   while the prose stays serif.

   These carry `.theorem-meta` on the front for a reason: the tags render
   inside PaperMod's `.post-meta`, whose `.post-meta a` rule is specificity
   (0,1,1) and silently beats a bare `.theorem-kind` (0,1,0). Without the
   extra class every colour below loses to the theme's grey, which is a
   failure that looks exactly like the CSS not being loaded at all.
   ------------------------------------------------------------------------ */

.theorem-kind,
.theorem-difficulty,
.theorem-area,
.read-next-label,
.formal::before,
.sketch::before {
  font-family: var(--font-mono);
}

.theorem-meta a.theorem-kind {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Kinds are a closed vocabulary, so brackets mark them as a literal token
   rather than a word in the sentence -- the same convention PLAN.md uses. */
.theorem-kind::before { content: "["; opacity: 0.55; }
.theorem-kind::after  { content: "]"; opacity: 0.55; }

.theorem-meta a.theorem-area {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--secondary);
}

.theorem-meta a.theorem-difficulty {
  color: var(--secondary);
}

.theorem-meta a.theorem-kind:hover,
.theorem-meta a.theorem-difficulty:hover,
.theorem-meta a.theorem-area:hover {
  color: var(--primary);
  border-color: var(--secondary);
}

.theorem-deps { font-family: var(--font-mono); font-size: 12px; }

.read-next { border-left-color: var(--accent); }

.formal::before, .sketch::before { color: var(--accent); }

.index-table { font-family: var(--font-mono); font-size: 13px; }