/* ═══════════════════════════════════════════════════════════════════
   DodecaGreen — Calculator-tool components
   Shared chassis for all interactive tools. Loads AFTER brand-v2.css.
   Reuses brand tokens (greens, parchment, IBM Plex / Newsreader, radii).
   Identity: forms, data tables, metric cards, gauges, charts, sessions.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Material-category palette — earthy, distinguishable, parchment-friendly.
     Shared with chart.js (CAT_COLORS) and the .role-badge tints below. */
  --cat-reagent:    #2e7d32;
  --cat-solvent:    #b8703a;
  --cat-catalyst:   #3f8a8a;
  --cat-workup:     #9a6a8e;
  --cat-byproduct:  #a85a43;
  --cat-other:      #6b7770;

  /* Result semantics — tuned to the brand greens + warm clay */
  --rate-excellent: #1b5e20;
  --rate-good:      #388e3c;
  --rate-moderate:  #b07d2e;
  --rate-poor:      #b0402f;
  --rate-poor-soft: #f6e6e0;
  --rate-mod-soft:  #f6efdd;
}

/* ── Tool intro / overview helpers ─────────────────────────── */
.tool-eyebrow .badge {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-800); background: var(--green-100);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}

/* Formula callout — mirrors the brand .eq-display */
.formula-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-700);
  border-radius: var(--radius-sm);
  padding: 15px 20px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 18px 0;
}

/* Comparison tables (sector / metric context) */
.metric-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.metric-compare-table thead tr { background: var(--green-100); }
.metric-compare-table th {
  padding: 9px 13px; text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--green-800);
  border-bottom: 1px solid var(--green-200);
}
.metric-compare-table td {
  padding: 9px 13px; vertical-align: top; line-height: 1.5;
  color: var(--slate); border-bottom: 1px solid var(--line-soft);
}
.metric-compare-table tbody tr:nth-child(even) { background: var(--paper); }
.metric-compare-table tbody tr:hover { background: var(--green-50); }
.metric-compare-table tr:last-child td { border-bottom: none; }
.metric-compare-table strong { color: var(--ink); font-weight: 600; }

/* Strengths / limitations cards */
.tl-sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 620px) { .tl-sl-grid { grid-template-columns: 1fr; } }
.tl-sl-card {
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 14.5px;
}
.tl-sl-card.strength   { background: var(--green-50);  border: 1px solid var(--green-200); }
.tl-sl-card.limitation { background: var(--clay-soft); border: 1px solid var(--clay-line); }
.tl-sl-card h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.tl-sl-card.strength h4   { color: var(--green-700); }
.tl-sl-card.limitation h4 { color: var(--clay-deep); }
.tl-sl-card ul { list-style: none; padding: 0; margin: 0; }
.tl-sl-card li { position: relative; padding-left: 18px; margin-bottom: 7px; line-height: 1.5; color: var(--slate); }
.tl-sl-card li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
}
.tl-sl-card.strength li::before   { background: var(--green-600); }
.tl-sl-card.limitation li::before { background: var(--clay); }

/* ═══════════════════════════════════════════════════════════════════
   FORM FIELDS  (experiment metadata)
   ═══════════════════════════════════════════════════════════════════ */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 4px;
}
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green-700);
}
.field-group input,
.field-group select,
.field-group textarea {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field-group textarea { resize: vertical; line-height: 1.55; }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px rgba(56,142,60,0.14);
  background: var(--surface);
}
.field-group input::placeholder,
.field-group textarea::placeholder { color: var(--mist); }

/* ═══════════════════════════════════════════════════════════════════
   COMPOUND INPUT TABLES
   ═══════════════════════════════════════════════════════════════════ */
.compound-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  margin-bottom: 12px;
}
.compound-table thead th {
  background: var(--green-800);
  color: #fff;
  padding: 10px 10px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.compound-table thead th:first-child { border-radius: var(--radius-xs) 0 0 0; }
.compound-table thead th:last-child  { border-radius: 0 var(--radius-xs) 0 0; }
.compound-table tbody tr { border-bottom: 1px solid var(--line-soft); transition: background .12s; }
.compound-table tbody tr:hover { background: var(--green-50); }
.compound-table td { padding: 8px 6px; vertical-align: middle; overflow: hidden; }
.compound-table input[type="text"],
.compound-table input[type="number"],
.compound-table select {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.compound-table input:focus,
.compound-table select:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 2px rgba(56,142,60,0.14);
  background: var(--surface);
}
.mwn-cell {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--green-800);
  font-size: 13.5px;
  white-space: nowrap;
}

/* ── Category badges (data palette) ───────────────────────── */
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.role-badge.reagent   { background: var(--green-100); color: var(--green-900); }
.role-badge.solvent   { background: #f3e7da; color: #8a4f23; }
.role-badge.catalyst  { background: #d9eaea; color: #2c6363; }
.role-badge.workup    { background: #efe3ed; color: #6e4763; }
.role-badge.byproduct { background: #f5e2db; color: #7d3b2a; }
.role-badge.other     { background: var(--line-soft); color: var(--slate); }
.role-badge.product   { background: var(--green-200); color: var(--green-900); }

/* ── Add / remove row controls ────────────────────────────── */
.btn-add {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 1px dashed var(--green-400);
  border-radius: 999px;
  background: transparent;
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.btn-add:hover { background: var(--green-50); border-color: var(--green-600); }
.btn-add svg { width: 14px; height: 14px; }
.btn-remove {
  background: none; border: none;
  color: var(--mist);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  line-height: 0;
  transition: background .15s, color .15s;
}
.btn-remove svg { width: 15px; height: 15px; }
.btn-remove:hover { background: var(--rate-poor-soft); color: var(--rate-poor); }

/* ── Live sum strip ───────────────────────────────────────── */
.sum-strip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  font-size: 14.5px;
  color: var(--slate);
  margin-top: 12px;
}
.sum-strip strong { color: var(--green-900); font-family: var(--font-mono); font-size: 13px; }
.sum-strip .sum-val {
  font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: 15px;
}
.sum-strip .sum-note { color: var(--stone); font-size: 12.5px; margin-left: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   RESULTS — metric cards, gauge, rating pill
   ═══════════════════════════════════════════════════════════════════ */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.metric-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  transition: background .25s, border-color .25s;
}
.metric-card.amber { background: var(--rate-mod-soft);  border-color: #e6cf99; }
.metric-card.warn  { background: var(--rate-poor-soft); border-color: #e0b3a6; }
.mc-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--green-700);
  margin-bottom: 8px;
}
.metric-card.amber .mc-label { color: var(--rate-moderate); }
.metric-card.warn  .mc-label { color: var(--rate-poor); }
.mc-value {
  font-family: var(--font-display);
  font-size: 42px; font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--green-900);
  line-height: 1;
}
.metric-card.amber .mc-value { color: var(--rate-moderate); }
.metric-card.warn  .mc-value { color: var(--rate-poor); }
.mc-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  margin-top: 8px;
}

/* E-factor gauge */
.gauge-wrap { margin: 22px 0 6px; }
.gauge-label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--stone);
  margin-bottom: 8px;
}
.gauge-outer {
  width: 100%;
  height: 30px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.gauge-inner {
  height: 100%;
  border-radius: 999px;
  transition: width .7s cubic-bezier(.4,0,.2,1), background .4s;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  color: #fff;
  min-width: 42px;
}
.gauge-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--mist);
  padding: 5px 2px 0;
}

/* Rating pill */
.ae-pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em;
  margin: 8px 0;
}
.ae-pill.excellent { background: var(--green-200); color: var(--green-900); }
.ae-pill.good      { background: var(--green-100); color: var(--green-800); }
.ae-pill.moderate  { background: var(--rate-mod-soft);  color: var(--rate-moderate); }
.ae-pill.poor      { background: var(--rate-poor-soft); color: var(--rate-poor); }

/* ═══════════════════════════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════════════════════════ */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 640px) { .chart-row { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.chart-card h4, .history-card h4 {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--stone);
  margin-bottom: 12px;
}
.chart-card .chart-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.btn-svg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green-800);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-svg:hover { background: var(--green-50); border-color: var(--green-300); }
.btn-svg svg { width: 12px; height: 12px; }

.history-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 20px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BREAKDOWN TABLE
   ═══════════════════════════════════════════════════════════════════ */
.breakdown-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.breakdown-table th {
  background: var(--green-100);
  color: var(--green-800);
  padding: 9px 12px; text-align: left;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 1px solid var(--green-200);
}
.breakdown-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--slate);
}
.breakdown-table tbody tr:hover { background: var(--green-50); }
.breakdown-table tr:last-child td { border-bottom: none; }
.breakdown-table tfoot td {
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--paper);
  color: var(--green-900);
  border-top: 1px solid var(--line);
}
.mass-bar { height: 9px; border-radius: 999px; display: inline-block; vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════════════
   INTERPRETATION  (left-accent rows, no icons)
   ═══════════════════════════════════════════════════════════════════ */
.interp-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 16px 0;
}
.interp-box h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--green-700);
  margin-bottom: 14px;
}
.interp-item {
  padding: 10px 0 10px 16px;
  border-left: 2px solid var(--green-300);
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
}
.interp-item:last-child { margin-bottom: 0; }
.interp-item.rate-excellent { border-left-color: var(--rate-excellent); }
.interp-item.rate-good      { border-left-color: var(--rate-good); }
.interp-item.rate-moderate  { border-left-color: var(--rate-moderate); }
.interp-item.rate-poor      { border-left-color: var(--rate-poor); }
.interp-item strong { color: var(--ink); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   SESSIONS
   ═══════════════════════════════════════════════════════════════════ */
.session-list {
  margin: 12px 0;
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.session-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.session-item:last-child { border-bottom: none; }
.session-item:hover { background: var(--green-50); }
.session-item strong { color: var(--ink); font-weight: 600; }
.session-meta { color: var(--stone); font-family: var(--font-mono); font-size: 11.5px; margin-top: 3px; }
.session-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-load, .btn-del-session {
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid;
  transition: background .15s, border-color .15s;
}
.btn-load { background: var(--green-50); color: var(--green-800); border-color: var(--green-200); }
.btn-load:hover { background: var(--green-100); border-color: var(--green-300); }
.btn-del-session { background: var(--surface); color: var(--rate-poor); border-color: #e0b3a6; line-height: 0; padding: 6px 8px; }
.btn-del-session svg { width: 13px; height: 13px; }
.btn-del-session:hover { background: var(--rate-poor-soft); }
.empty-sessions { padding: 22px; text-align: center; color: var(--mist); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   EXPORT + DESTRUCTIVE ACTIONS
   ═══════════════════════════════════════════════════════════════════ */
.export-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.btn-tool {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.btn-tool svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-tool.solid { background: var(--green-800); color: #fff; }
.btn-tool.solid:hover { background: var(--green-900); transform: translateY(-1px); }
.btn-tool.ghost { background: transparent; color: var(--slate); border-color: var(--line); }
.btn-tool.ghost:hover { border-color: var(--green-300); color: var(--green-800); background: var(--paper); }
.btn-tool.danger { background: transparent; color: var(--rate-poor); border-color: #e0b3a6; }
.btn-tool.danger:hover { background: var(--rate-poor-soft); }

/* ═══════════════════════════════════════════════════════════════════
   "SHOW ME HOW" / WORKED-EXAMPLE TOGGLE
   ═══════════════════════════════════════════════════════════════════ */
.example-toggle-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  background: transparent;
  color: var(--green-800);
  border: 1px solid var(--green-300);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
}
.example-toggle-btn:hover { background: var(--green-50); border-color: var(--green-500); }
.example-toggle-btn .ex-star { color: var(--green-600); font-size: 12px; }

/* Active (loaded → "clear") state: vivid red; brief green flash before cycling back */
@keyframes example-pulse {
  0%, 90%  { background: #fff0f0; border-color: #cc0000; color: #cc0000; }
  95%      { background: #f0fff4; border-color: #00aa00; color: #00aa00; }
  100%     { background: #fff0f0; border-color: #cc0000; color: #cc0000; }
}
.btn-example-active {
  animation: example-pulse 18s linear infinite;
  background: #fff0f0; border-color: #cc0000; color: #cc0000;
}
.btn-example-active .ex-star { color: #cc0000; }
.btn-example-active:hover { filter: brightness(0.96); }
@media (prefers-reduced-motion: reduce) { .btn-example-active { animation: none; } }

/* Small inline-help buttons inside section headers */
.collapsible-header .how-btn { font-size: 12px; padding: 6px 12px; }
.collapsible-header .hdr-actions { display: flex; align-items: center; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--green-800);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  z-index: 9999;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* ── Tooltip helper ───────────────────────────────────────── */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 5px 10px; border-radius: var(--radius-xs);
  font-family: var(--font-body); font-size: 12px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  z-index: 100;
}
[data-tip]:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  #toast, .btn-add, .btn-remove, .export-row, .gh-actions,
  .session-list, #session-mgmt-section, .chart-actions,
  .topnav-wrap, .site-footer, .guide-toc { display: none !important; }
}