/* Keyword guides (builder/minerals/topics.py, build_topics.py, the Africa pages in build_guides.py): maps, satellite
   views, bars, step diagrams, tabs, answer boxes and calculators, on top of minerals.css and guides.css. */
.answer { margin-top: 26px; padding: 18px 20px; border: 1px solid rgba(220, 255, 60, .28); border-radius: 14px;
  background: linear-gradient(180deg, rgba(220, 255, 60, .06), rgba(220, 255, 60, .015)); }
.answer .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.guide .answer p { margin-top: 6px; color: var(--text); font-size: 17px; line-height: 1.55; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 22px; }
.facts div { border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .025); }
.facts b { display: block; font-family: var(--head); font-size: 26px; letter-spacing: -.02em; line-height: 1.1; color: var(--text); }
.facts span { display: block; margin-top: 4px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.guide .facts b small { font-size: 15px; color: var(--muted); font-weight: 500; }

/* Maps */
.tmap { margin: 22px 0 0; }
.tm-box { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #0d1a1d 0%, #070c0e 70%); }
.tm-box svg { display: block; width: 100%; height: auto; }
.tm-land path { fill: #1d2d32; stroke: #33474d; stroke-width: .7; transition: fill .35s; }
.tm-land path.dim { fill: #10191c; stroke: #1d2a2e; }
.tm-land path.hi { fill: #26393f; }
.tm-land a path:hover, .tm-land path[data-t]:hover, .tm-land path.on { stroke: var(--lime); stroke-width: 1.4; }
.tm-land a:focus-visible path { stroke: var(--lime); stroke-width: 2; }
.tm-lab { fill: #75827e; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.tm-pt { fill: var(--c); fill-opacity: .9; stroke: #05080a; stroke-width: 1.5; cursor: pointer; transition: r .2s, opacity .3s, fill-opacity .2s; }
.tm-pt:hover, .tm-pt.on, .tm-pt:focus-visible { fill-opacity: 1; stroke: #fff; outline: none; }
.tm-pt.off { opacity: .08; pointer-events: none; }
.tm-tip { position: absolute; z-index: 2; max-width: 280px; padding: 9px 12px; border-radius: 10px; pointer-events: none;
  background: rgba(8, 13, 15, .94); border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 13px; line-height: 1.4; }
.tm-tip b { display: block; font-family: var(--head); font-size: 14.5px; color: var(--text); }
.tm-tip span { display: block; color: var(--muted); margin-top: 2px; }
.tm-filters, .tm-switch, .tsat-list, .ts-btns, .ttabs [role=tablist] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tm-filters button, .tm-switch button, .tsat-list button, .ts-btns button, .ttabs [role=tab] {
  font: 500 13px Inter, system-ui, sans-serif; color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid var(--line2);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.tm-filters button:hover, .tm-switch button:hover, .tsat-list button:hover, .ts-btns button:hover, .ttabs [role=tab]:hover { border-color: var(--lime); }
.tm-filters [aria-pressed=true], .tm-switch [aria-pressed=true], .tsat-list [aria-pressed=true], .ts-btns [aria-pressed=true], .ttabs [aria-selected=true] {
  background: var(--lime); color: #0b1200; border-color: var(--lime); }
.tm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); align-items: center; }
.tm-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.tm-legend .ramp { display: inline-block; width: 140px; height: 9px; border-radius: 99px; vertical-align: 0; margin: 0 8px;
  background: linear-gradient(90deg, #1f3034, #6b7f2a, #dcff3c); }
.tmap figcaption, .tsat figcaption { margin-top: 8px; font-size: 13px; color: var(--faint); line-height: 1.5; }
.tmap figcaption a, .tsat figcaption a { color: var(--muted); }

/* Satellite viewer */
.tsat { margin: 22px 0 0; }
.tsat-view { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #0a1013; aspect-ratio: 16 / 10; }
.tsat-view img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform 6s var(--ease); }
.tsat.loading img { opacity: .35; }
@media (prefers-reduced-motion: no-preference) { .tsat-view:hover img { transform: scale(1.04); } }
.tsat-scale { position: absolute; left: 12px; bottom: 12px; width: 25%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font: 500 12px var(--mono); color: var(--text); }
.tsat-scale b { font-weight: 500; padding: 2px 7px; border-radius: 6px; background: rgba(5, 8, 10, .72); }
.tsat-scale i { display: block; width: 100%; height: 6px; border: 2px solid #fff; border-top: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.tsat-list { margin: 10px 0 0; }
.tsat-cap { color: var(--muted); }

/* Bars */
.tbars { display: grid; gap: 7px; margin-top: 14px; }
.tb-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 92px; gap: 12px; align-items: center; font-size: 14px; }
.tb-l { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-l a { color: var(--text); text-decoration-color: rgba(220, 255, 60, .5); text-underline-offset: 3px; }
.tb-bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.tb-bar i { display: block; height: 100%; width: var(--w); background: var(--c, var(--lime)); border-radius: 99px; transition: width 1s var(--ease); }
.tbars.pre:not(.in) .tb-bar i { width: 0; }
.tb-v { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.tb-note { font-size: 13px; color: var(--faint); margin-top: 8px; }

/* Step diagrams */
.tsteps { margin: 22px 0 0; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: radial-gradient(120% 90% at 50% 0%, #0d1a1d 0%, #070c0e 70%); }
.tsteps svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.tsteps [data-part] { transition: opacity .5s, filter .5s; }
.tsteps[data-on] [data-part]:not(.lit) { opacity: .28; }
.tsteps [data-part].lit { filter: drop-shadow(0 0 6px rgba(220, 255, 60, .35)); }
.ts-cap { min-height: 3.2em; margin-top: 10px; color: #c9d4d0; font-size: 15px; line-height: 1.55; }
.ts-cap b { color: var(--text); }
.ts-play { float: right; margin-left: 8px; }

/* Tabs */
.ttabs { margin-top: 22px; }
.ttabs [role=tabpanel] { border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px 18px; background: rgba(255, 255, 255, .02); }

/* Calculators */
.calc { margin-top: 22px; border: 1px solid rgba(220, 255, 60, .28); border-radius: 14px; padding: 18px 20px; background: rgba(220, 255, 60, .03); }
.calc label { display: block; font-size: 14px; color: var(--muted); margin-top: 12px; }
.calc input[type=range] { width: 100%; accent-color: var(--lime); }
.calc fieldset { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.calc legend { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.calc fieldset label { margin: 0; display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border: 1px solid var(--line2); border-radius: 999px; color: var(--text); cursor: pointer; }
.calc fieldset label:has(input:checked) { border-color: var(--lime); background: rgba(220, 255, 60, .1); }
.calc fieldset input { accent-color: var(--lime); }
.calc output, .calc .out { display: block; }
.calc .outs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.calc .outs div { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; }
.calc .outs b { display: block; font-family: var(--head); font-size: 20px; color: var(--lime); }
.calc .outs span { font-size: 12.5px; color: var(--faint); }

/* Tables: rows a map point jumps to */
.tbl tr.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 30% { background: rgba(220, 255, 60, .16); } 100% { background: transparent; } }
.th-sort { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.th-sort::after { content: "↕"; font-size: 11px; color: var(--faint); }
th[aria-sort=ascending] .th-sort::after { content: "↑"; color: var(--lime); }
th[aria-sort=descending] .th-sort::after { content: "↓"; color: var(--lime); }
.th-sort:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
.guide .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.twocol > div { border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 14px; background: rgba(255, 255, 255, .02); }
.twocol h3 { color: var(--text); }
.guide ul.tlist, .guide ol.tlist { color: #c9d4d0; padding-left: 22px; margin-top: 10px; list-style: disc; }
.guide ol.tlist { list-style: decimal; }
.guide .tlist li { margin-top: 6px; }
.guide ul.srcs { list-style: none; padding: 0; margin-top: 10px; }
.guide ul.srcs li { margin-top: 6px; font-size: 14px; color: var(--muted); }
.guide ul.srcs a { color: var(--muted); text-underline-offset: 3px; }
.updated { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 14px; }
@media (max-width: 640px) {
  .tb-row { grid-template-columns: 96px 1fr 72px; gap: 8px; font-size: 13px; }
  .guide .twocol { grid-template-columns: 1fr; }
  .tm-lab { font-size: 16px; }
}
/* Tall maps (Africa) stay a readable size on wide screens */
.tmap.narrow .tm-box { max-width: 640px; margin: 0 auto; }