/* Page-specific styles: agents-components-interactions */

/* ===== HERO THEME ===== */
.article-hero { background: linear-gradient(160deg, #071a0e 0%, #0d2015 55%, #122818 100%); }
.article-tag-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.tag-systems    { background: #1a4a20; }
.article-hero-sub { color: #7ec89a; }
.article-meta-date, .article-meta-read { color: #4a8a5a; }
.article-meta-sep { color: #2a4a2a; }
.article-cta { background: linear-gradient(135deg, #071a0e 0%, #0d2015 100%); border: 2px solid #1a4a20; }
.article-cta p { color: #7ec89a; }
.article-cta a.secondary { color: #7ec89a; border: 2px solid #2a5a30; }

/* ===== CALLOUT WARN ===== */
.callout.warn { border-color: #e8a030; background: #fffbf0; }
.callout.warn .callout-text { color: #6a3a00; }

/* ===== THREE ELEMENT PANELS ===== */
.element-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #dde8c8;
  margin: 36px 0;
}
.element {
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  border-right: 2px solid #dde8c8;
}
.element:last-child { border-right: none; }
.element-num {
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; color: #aaa;
}
.element-icon { font-size: 32px; }
.element-name { font-size: 18px; font-weight: 900; }
.element-role {
  font-size: 12px; font-weight: 700; color: #666;
  line-height: 1.45; padding-top: 4px;
}
.element-tag {
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1.5px; color: #fff;
  padding: 3px 10px; border-radius: 5px; margin-top: 4px;
}
.e-agents       { background: #f4fae8; }
.e-agents       .element-name { color: #2a7a0a; }
.e-agents       .element-tag  { background: #62b517; }
.e-interactions { background: #fafaf0; }
.e-interactions .element-name { color: #6a7a00; }
.e-interactions .element-tag  { background: #aaaa20; }
.e-components   { background: #f4f4ff; }
.e-components   .element-name { color: #3a3a8c; }
.e-components   .element-tag  { background: #5a5ab0; }
@media (max-width: 600px) {
  .element-trio { grid-template-columns: 1fr; }
  .element { border-right: none; border-bottom: 2px solid #dde8c8; }
  .element:last-child { border-bottom: none; }
}

/* ===== SYSTEMS TABLE ===== */
.table-scroll { overflow-x: auto; margin: 32px 0; border-radius: 12px; border: 2px solid #dde8c8; }
.systems-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 600px;
}
.systems-table thead tr {
  background: #0d2015;
}
.systems-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
}
.systems-table th.col-domain      { color: #d1db24; width: 18%; }
.systems-table th.col-agents      { color: #a8d878; width: 27%; }
.systems-table th.col-interactions{ color: #d1db24; width: 27%; }
.systems-table th.col-components  { color: #a8a8e8; width: 28%; }
.systems-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #e8f0d8;
  vertical-align: top;
  line-height: 1.55;
  font-weight: 600;
  color: #333;
}
.systems-table tr:last-child td { border-bottom: none; }
.systems-table tr:nth-child(even) td { background: #fcfdf8; }
.systems-table tr:nth-child(odd)  td { background: #fff; }
.systems-table td.col-domain {
  font-weight: 900; font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #1a2a0a;
}
.systems-table td.col-agents      { color: #2a5a0a; }
.systems-table td.col-interactions { color: #5a5a00; }
.systems-table td.col-components  { color: #2a2a7a; }

/* Highlight rows that link out to the people-process-tools deep dive */
.systems-table tr.row-ppt td, .systems-table tr.row-game td { background: #f4fae8; }
.systems-table tr.row-ppt td.col-domain, .systems-table tr.row-game td.col-domain {
  color: #4a8c11;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ppt-link-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #62b517;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
/* Economics row highlight */
.systems-table tr.row-econ td { background: #fffbf0; }
.systems-table tr.row-econ td.col-domain { color: #7a4a00; }

/* ===== DOMAIN EXAMPLE CARDS ===== */
.domain-examples {
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.domain-ex {
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border: 2px solid;
}
.domain-ex.ex-econ    { border-color: #d4a830; background: #fffbf0; }
.domain-ex.ex-org     { border-color: #a8c96a; background: #f4fae8; }
.domain-ex.ex-ecology { border-color: #6ab870; background: #f0faf0; }
.domain-ex-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.domain-ex-label {
  font-size: 9px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1.5px; color: #888; margin-bottom: 5px;
}
.domain-ex-title { font-size: 15px; font-weight: 900; color: #1a1a1a; margin-bottom: 6px; }
.domain-ex-body  { font-size: 13px; color: #444; line-height: 1.65; }
.domain-ex-lesson {
  font-size: 12px; font-weight: 800;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.ex-econ    .domain-ex-lesson { color: #8a5a00; }
.ex-org     .domain-ex-lesson { color: #4a7a10; }
.ex-ecology .domain-ex-lesson { color: #2a6a30; }

/* ===== FAILURE MODES ===== */
.failure-modes {
  margin: 28px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fm-card {
  border-radius: 12px;
  padding: 22px 22px;
  border: 2px solid;
}
.fm-card.fm-structural { border-color: #a8c96a; background: #f4fae8; }
.fm-card.fm-incentive  { border-color: #e8a030; background: #fffbf0; }
.fm-num {
  font-size: 28px; font-weight: 900; line-height: 1;
  margin-bottom: 8px;
}
.fm-structural .fm-num { color: #c8e898; }
.fm-incentive  .fm-num { color: #f0c860; }
.fm-type {
  font-size: 9px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; margin-bottom: 6px;
}
.fm-structural .fm-type { color: #4a8c11; }
.fm-incentive  .fm-type { color: #c07820; }
.fm-title { font-size: 15px; font-weight: 900; color: #1a1a1a; margin-bottom: 8px; line-height: 1.3; }
.fm-desc  { font-size: 13px; color: #444; line-height: 1.65; }
.fm-signature {
  font-size: 11px; font-weight: 800; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.08);
}
.fm-structural .fm-signature { color: #4a8c11; }
.fm-incentive  .fm-signature { color: #c07820; }
@media (max-width: 600px) {
  .failure-modes { grid-template-columns: 1fr; }
}

/* ===== DIAGRAM EXAMPLE ===== */
.diagram-example {
  margin: 24px 0;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #dde8c8;
  background: #fbfdf6;
}
.diagram-caption {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a8c5a;
  margin-bottom: 10px;
  text-align: center;
}
.diagram-example svg { width: 100%; height: auto; display: block; }

/* ===== INCENTIVE ALIGNMENT VISUAL ===== */
.alignment-visual {
  margin: 28px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #dde8c8;
}
.align-state {
  padding: 22px 24px;
  text-align: center;
}
.align-state.aligned     { background: #f4fae8; }
.align-state.misaligned  { background: #fff8f8; }
.align-divider {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #aaa;
  writing-mode: vertical-rl;
}
.align-label {
  font-size: 9px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; margin-bottom: 6px;
}
.aligned    .align-label { color: #4a8c11; }
.misaligned .align-label { color: #c04040; }
.align-title { font-size: 15px; font-weight: 900; color: #1a1a1a; margin-bottom: 8px; }
.align-desc  { font-size: 13px; color: #555; line-height: 1.6; }
.align-result {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1px; color: #fff;
  padding: 4px 12px; border-radius: 5px;
}
.aligned    .align-result { background: #62b517; }
.misaligned .align-result { background: #c04040; }
@media (max-width: 600px) {
  .alignment-visual { grid-template-columns: 1fr; }
  .align-divider { writing-mode: horizontal-tb; padding: 10px; }
}