/* Compendium detail: technologies, upgrades, relics and special commands.

   Masthead extras and body for the tech-like detail kinds
   (compendium/partials/tech_masthead.html, tech_body.html,
   tech_link_list.html). Loaded in the <head> of the Compendium browser, Tech
   Tree and Combat Simulator, and again from tech_masthead.html so the Events
   pages that embed the modal get it too (the second link is a cache hit).

   The layout reuses the unit codex language as-is: the masthead cost row and
   fact strip (compendium-detail.css), the gold cell grid, cell titles, Rules
   disclosure, tech cards, info note and Continue row
   (compendium-unit-detail.css). This sheet only adds what those do not
   cover, scoped to .cmp-entry--tech or to the .cmp-tech-* classes, so no
   shared .compendium-* class and no unit rule is restyled. */

/* The masthead and History tokens compendium-detail.css scopes to units. */
.cmp-entry--tech {
  --cmp-text-caption: rgba(241, 228, 198, 0.6);
  --cmp-text-fact-label: rgba(241, 228, 198, 0.66);
  --cmp-text-availability: rgba(241, 228, 198, 0.68);
  --cmp-text-quote: #f8efdb;
  --cmp-fact-border: rgba(235, 199, 119, 0.72);
  --cmp-fact-rule: rgba(213, 177, 101, 0.28);
  --cmp-notes-fill: rgba(14, 14, 15, 0.6);
  --cmp-inset-ring: inset 0 0 0 2px rgba(8, 8, 9, 0.8), inset 0 0 0 3px rgba(213, 177, 101, 0.24);
  --cmp-tech-icon-ring: rgba(213, 177, 101, 0.42);
}

/* The fact strip's column count follows the masthead copy width (see the
   unit rule in compendium-detail.css). */
.cmp-entry--tech .cmp-entry-masthead-copy {
  align-self: stretch;
  container: cmp-masthead / inline-size;
}

/* Fact cells share the strip by content, not in equal tracks: a short Age
   gives its spare width to a long god path ("Tlaloc (Huitzilopochtli,
   Quetzalcoatl)") instead of breaking it mid-word. The narrow two-column
   layout (container query in compendium-detail.css) is unchanged. */
.cmp-entry--tech .cmp-entry-facts {
  grid-auto-columns: minmax(0, auto);
}

@container cmp-masthead (max-width: 440px) {
  .cmp-entry--tech .cmp-entry-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cmp-entry--tech .cmp-entry-section-head > h3 {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

.cmp-tech-fact-more {
  color: var(--cmp-text-note);
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* ---- Cost row: resources, devotion, research / execution time ------------ */
.cmp-tech-cost > .cmp-tech-time:first-child {
  margin-left: 0;
}

.cmp-tech-devotion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  margin: 0;
}

.cmp-entry-cost-list + .cmp-tech-devotion {
  margin-left: 22px;
}

.cmp-tech-devotion-verb {
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.cmp-tech-devotion-unit {
  color: var(--site-text);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.cmp-tech-devotion .cmp-entry-fact-link {
  min-height: 0;
}

/* ---- Body ----------------------------------------------------------------- */
.cmp-tech-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  min-width: 0;
}

/* ---- Effects: one cell per subject ------------------------------------------
   Two columns of subject cells on the unit's gold grid; an odd last cell (or
   a lone one) takes the whole row, and a cell that wide flows its lines into
   two columns instead of stretching label and value 900px apart. */
.cmp-tech-effect-summary-note {
  margin: 0 0 0.75rem;
  color: var(--cmp-text-note);
}

.cmp-tech-effect-summary {
  display: grid;
  gap: 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cmp-hairline);
  background: var(--cmp-fill-cell);
}

.cmp-tech-effect-summary > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--cmp-hairline);
}

.cmp-tech-effect-summary > li:last-child { border-bottom: 0; }
.cmp-tech-effect-summary-targets { color: var(--site-gold); }
.cmp-tech-effect-breakdown > summary { margin: 0 0 1rem; color: var(--site-gold); cursor: pointer; }

@media (max-width: 620px) {
  .cmp-tech-effect-summary > li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

.cmp-combat.cmp-tech-effect-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cmp-combat.cmp-tech-effect-grid > .cmp-combat-cell {
  grid-column: auto;
}

.cmp-combat.cmp-tech-effect-grid > .cmp-combat-cell:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.cmp-combat.cmp-tech-effect-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.cmp-tech-effect-cell {
  container: cmp-effect / inline-size;
}

.cmp-tech-subject {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  margin-bottom: 8px;
}

.cmp-tech-subject-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--cmp-tech-icon-ring);
  border-radius: var(--site-radius-md);
  background: rgba(0, 0, 0, 0.28);
  object-fit: contain;
}

.cmp-combat-title.cmp-tech-subject-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--cmp-unit-text-title);
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Many subjects sharing one list of effects (a relic reaching seventeen
   fortress units) read as a sentence, not as a wall of capitals. */
.cmp-combat-title.cmp-tech-subject-name.is-list {
  font-family: var(--site-font-body);
  font-size: 0.9375rem;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.cmp-tech-subject-link {
  padding: 0;
  border: 0;
  color: var(--site-gold);
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-transform: inherit;
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.cmp-tech-subject-link:is(:hover, :focus-visible) {
  color: var(--site-gold-strong);
  text-decoration-color: currentColor;
}

.cmp-tech-subject-sep {
  color: var(--cmp-unit-text-title);
}

.cmp-tech-subject-note {
  flex: none;
  color: var(--cmp-text-note);
  cursor: help;
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
}

.cmp-tech-effect-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-tech-effect-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--cmp-hairline);
}

.cmp-tech-effect-row:last-child {
  border-bottom: 0;
}

.cmp-tech-effect-text {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}

.cmp-tech-effect-label {
  color: var(--cmp-text-label);
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* A whole-sentence line ("Spawns Relic Monkey ×6 at each Temple") reads as
   the value itself. */
.cmp-tech-effect-row.is-line .cmp-tech-effect-label {
  color: var(--cmp-unit-text-row);
  font-size: 1.0625rem;
}

.cmp-tech-effect-meta {
  color: var(--cmp-text-note);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.cmp-tech-effect-change {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--site-gold-strong);
  font-size: 1.5rem;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

.cmp-tech-effect-row.is-text .cmp-tech-effect-change {
  max-width: 55%;
  font-size: 1.125rem;
  line-height: 1.25;
  white-space: normal;
}

.cmp-tech-inline-link {
  display: inline;
  padding: 0;
  border: 0;
  color: var(--site-gold);
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.cmp-tech-inline-link:is(:hover, :focus-visible) {
  color: var(--site-gold-strong);
  text-decoration-color: currentColor;
}

/* Engine identifiers: hidden until the section's disclosure is open. */
.cmp-tech-raw {
  display: none;
  margin: 0;
  color: var(--site-text-soft);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cmp-tech-raw code,
code.cmp-tech-raw {
  color: var(--site-gold);
  font-size: 0.75rem;
}

.cmp-tech-raw--subject {
  margin: -2px 0 6px;
}

.cmp-tech-effects:has(.cmp-rules-toggle[open]) .cmp-tech-raw {
  display: block;
}

@container cmp-effect (min-width: 640px) {
  .cmp-tech-effect-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  /* Row-major flow: the second-to-last line has nothing below it. */
  .cmp-tech-effect-row:nth-last-child(2) {
    border-bottom: 0;
  }
}

/* ---- Linked entries (Requires, Unlocks, Used at, Result ...) ------------- */
.cmp-tech-cell > .cmp-combat-title {
  margin-bottom: 6px;
}

.cmp-tech-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-tech-link {
  min-width: 0;
  border-bottom: 1px solid var(--cmp-hairline);
}

.cmp-tech-link:last-child {
  border-bottom: 0;
}

.cmp-tech-link-in {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
}

button.cmp-tech-link-in {
  cursor: pointer;
}

.cmp-tech-link-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cmp-tech-icon-ring);
  border-radius: var(--site-radius-md);
  background: rgba(0, 0, 0, 0.28);
  object-fit: contain;
  transition: border-color 180ms ease;
}

.cmp-tech-link-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.cmp-tech-link-name {
  color: var(--site-text);
  font-size: 1.0625rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

button.cmp-tech-link-in .cmp-tech-link-name {
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

button.cmp-tech-link-in:is(:hover, :focus-visible) .cmp-tech-link-name {
  color: var(--site-gold-strong);
  text-decoration-color: currentColor;
}

button.cmp-tech-link-in:is(:hover, :focus-visible) .cmp-tech-link-icon {
  border-color: var(--site-border-strong);
}

.cmp-tech-link-meta {
  color: var(--cmp-text-note);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.cmp-tech-link.is-current .cmp-tech-link-name {
  color: var(--site-gold-strong);
}

/* ---- Relic: summons, campaign callout, pick-up note ----------------------- */
.cmp-tech-card.is-static {
  cursor: default;
}

.cmp-tech-card.is-static:is(:hover, :focus-visible) {
  border-color: var(--site-border-strong);
  box-shadow: var(--cmp-unit-card-inset);
  transform: none;
}

/* The pick-up note follows the summons (or opens the section) without the
   Rules note's top margin. */
.cmp-tech-relic .cmp-tech-note {
  margin-top: 0;
}

.cmp-tech-relic .cmp-tech-summons + .cmp-tech-note {
  margin-top: 16px;
}

.cmp-tech-callout {
  margin: 0 0 16px;
  padding: 13px 18px;
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  color: var(--cmp-text-prose);
  background: var(--cmp-fill-cell);
  box-shadow: var(--cmp-inset-ring);
  font-size: 1rem;
  line-height: 1.55;
}

.cmp-tech-callout-label {
  margin-right: 8px;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cmp-tech-empty {
  margin: 0;
  color: var(--cmp-text-note);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 760px) {
  .cmp-combat.cmp-tech-effect-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-entry-cost-list + .cmp-tech-devotion {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .cmp-tech-effect-change {
    font-size: 1.3125rem;
  }

  .cmp-tech-effect-row.is-text .cmp-tech-effect-change {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-tech-subject-link,
  .cmp-tech-inline-link,
  .cmp-tech-link-icon,
  button.cmp-tech-link-in .cmp-tech-link-name {
    transition: none;
  }
}

/* Slice G (tech_reverse.py): a cost factor's own estimate after its line
   ("×0.666 · ≈100 Wood, 100 Gold"), and who gets the entry free. */
.cmp-reverse-note {
  display: block;
  color: var(--site-text-soft);
  font-size: 0.75rem;
}

.cmp-tech-free {
  margin-top: 4px;
}