/* Mobile Forensics Learn pages: calculators, WAL timeline, location track.
 * Builds on ../../css/style.css and ../css/learn.css tokens. */
:root { --track: #1d4ed8; --track-2: #7c3aed; --wifi: #b45309; --cell: #b3261e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --track: #7aa7ff; --track-2: #c4a5ff; --wifi: #f2c14e; --cell: #ff8a80; }
}
:root[data-theme="dark"] { --track: #7aa7ff; --track-2: #c4a5ff; --wifi: #f2c14e; --cell: #ff8a80; }

/* ---------- calculators ---------- */
.calc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0 24px; max-width: 50rem; }
.calc h3 { margin: 0 0 8px; }
.calc label { display: block; font-weight: 600; font-size: .9rem; margin: 6px 0; }
.calc input[type="text"] { display: block; width: 100%; max-width: 24rem; font: 15px var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; margin-top: 4px; }
.calc .row { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.calc .row > label { flex: 1 1 14rem; }
.calcout { margin-top: 10px; overflow-wrap: anywhere; }
.calcout p { margin: 8px 0 0; }
table.cmp.mini { min-width: 0; font-size: .85rem; }
.tablewrap table.cmp.mini { min-width: 520px; }
table.cmp tr.ok td { background: var(--ok-soft); }

/* ---------- WAL timeline ---------- */
table.walt tr.cur td { background: var(--ok-soft); }
table.walt tr.stale td { color: var(--muted); font-style: italic; }

/* ---------- location track ---------- */
.mapbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 16px 0 24px; }
.mapopts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .9rem; margin-bottom: 8px; }
.mapsvg svg { display: block; width: 100%; height: auto; max-height: 460px; border-radius: 6px; }
.mapsvg .bg { fill: var(--surface-2); }
.mapsvg .track { fill: none; stroke: var(--track); stroke-width: 2.5; stroke-linejoin: round; }
.mapsvg .tk { fill: none; stroke: var(--track-2); stroke-width: 2; stroke-dasharray: 6 4; }
.mapsvg .tkpt { fill: var(--track-2); }
.mapsvg .pt { fill: var(--track); stroke: var(--surface); stroke-width: 1.5; }
.mapsvg .pt.wifi { fill: var(--wifi); }
.mapsvg .pt.cell { fill: var(--cell); }
.mapsvg .pt.off { opacity: .35; }
.mapsvg .pt.on { stroke: var(--text); stroke-width: 3; }
.mapsvg .acc { fill: var(--track); fill-opacity: .08; stroke: var(--track); stroke-opacity: .35; }
.mapsvg .acc.wifi { fill: var(--wifi); stroke: var(--wifi); }
.mapsvg .acc.cell { fill: var(--cell); fill-opacity: .06; stroke: var(--cell); stroke-dasharray: 4 3; }
.mapsvg .lbl, .mapsvg .scale text { font: 12px var(--mono); fill: var(--text); }
.mapsvg .scale line { stroke: var(--text); stroke-width: 2; }
.mapinfo { font-size: .88rem; margin: 8px 0; }
.maptable tr.warnrow td { color: var(--warn); }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); margin-right: 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.legend i.gps { background: var(--track); } .legend i.wifi { background: var(--wifi); } .legend i.cell { background: var(--cell); }
.legend i.tk { background: var(--track-2); border-radius: 1px; }