/* Hormuz Mine Clearance: tool styles on shared/css/tsm.css tokens only. */
.hm-card { padding: 12px 14px 10px; }
.hm-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.hm-head h2 { margin: 0; font-size: 20px; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-card > .fine { margin-top: 4px; }
.hm-stripbox, .hm-chartbox { position: relative; margin-top: 8px; }
.hm-stripbox { background: var(--sea); border: 1px solid var(--rule); border-radius: 4px; }
#hm-strip, #hm-chart { display: block; width: 100%; height: auto; }
#hm-chart { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.hm-end { font: italic 12px var(--body); fill: var(--muted); }
.hm-band { fill: var(--panel); stroke: var(--coast); stroke-width: 1; }
.hm-pass { fill: var(--blue); opacity: .14; }
.hm-front { stroke: var(--blue); stroke-width: 2; }
.hm-rl { font: 11px var(--mono); fill: var(--muted); }
.hm-tick { font: 10.5px var(--mono); fill: var(--faint); }
.hm-c { fill: var(--faint); opacity: .55; }
.hm-c.seen { opacity: .18; }
.hm-m.live { fill: var(--bad); stroke: var(--panel); stroke-width: 1; }
.hm-m.found { fill: none; stroke: var(--accent); stroke-width: 2; }
.hm-m.done { stroke: var(--muted); stroke-width: 1.6; fill: none; }
.hm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.hm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.hm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; font-style: normal; }
.hm-legend .k-live { background: var(--bad); }
.hm-legend .k-found { border: 2px solid var(--accent); width: 11px; height: 11px; }
.hm-legend .k-done { width: auto; height: auto; color: var(--muted); font-weight: 700; line-height: 1; }
.hm-legend .k-c { background: var(--faint); opacity: .6; width: 5px; height: 5px; }
.hm-legend .k-pass { border-radius: 2px; background: color-mix(in srgb, var(--blue) 25%, var(--panel)); width: 16px; }
.hm-scrub { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; margin: 8px 0 4px; }
.hm-scrub input { width: 100%; accent-color: var(--brand-ink); }
.hm-scrub output { min-width: 64px; font-size: 13px; }
.hm-grid { stroke: var(--rule); stroke-width: 1; }
.hm-risk { fill: none; stroke: var(--bad); stroke-width: 2.2; stroke-linejoin: round; }
.hm-bench { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 4; }
.hm-bench-t { font: 600 11px var(--mono); fill: var(--ink); }
.hm-fin { stroke: var(--good); stroke-width: 2; }
.hm-fin-t { font: 600 11px var(--mono); fill: var(--good); }
.hm-cursor { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.hm-dot { fill: var(--panel); stroke: var(--bad); stroke-width: 2; }

/* Timeline card */
.hm-tl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.hm-tl li { border-left: 3px solid var(--c2); padding: 2px 0 2px 10px; font-size: 12.5px; }
.hm-tl li.hm-tl-force { border-left-color: var(--c1); }
.hm-tl .d { display: block; font: 11px var(--mono); color: var(--muted); }
.hm-tl b { display: block; font-size: 13.5px; line-height: 1.25; }
.hm-tl p { margin: 2px 0; color: var(--muted); }
.hm-tl a { font-size: 11.5px; overflow-wrap: anywhere; }

/* Panel */
.hm-src { font: 10.5px var(--mono); }
.hm-src a { color: var(--good); }
.hm-forces { display: flex; flex-direction: column; gap: 8px; }
.hm-force { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.hm-force .t { font-size: 13px; line-height: 1.3; }
.hm-force small { display: block; color: var(--muted); font-size: 11.5px; }
.hm-step { display: flex; align-items: center; gap: 4px; }
.hm-step .btn { padding: 3px 10px; font-size: 15px; }
.hm-step output { min-width: 26px; text-align: center; font-size: 14px; }
.hm-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-conf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-conf button { text-align: center; }
#hm-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#hm-presets small, .hm-seg small { color: var(--muted); }


.below h2.mt { margin-top: 22px; }
.below h3 { font-family: var(--display); font-size: 17px; margin: 14px 0 4px; }
.below .src li { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .hm-seg { grid-template-columns: minmax(0, 1fr); }
  #hm-presets { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Motion (both looks); see js/fx.js. ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
  .hm-fade { animation: hm-fade .5s .45s ease-out both; }
  @keyframes hm-clear { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent), inset 0 0 0 0 transparent; } 40% { box-shadow: 0 0 26px -4px color-mix(in srgb, var(--good) 70%, transparent), inset 0 0 0 1px var(--good); } 100% { box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent; } }
  .status.hm-clear { animation: hm-clear 1.4s ease-out; }
  .hm-front { transition: none; }
}

/* ---- Trailer look: the night plotting table. Tokens come from shared/css/trailer.css; these are the extras. ---- */
:root[data-skin="trailer"] .hm-stripbox { background: color-mix(in srgb, var(--sea) 85%, #000); border-color: var(--rule); box-shadow: inset 0 0 40px -10px #000; }
:root[data-skin="trailer"] .hm-band { fill: color-mix(in srgb, var(--blue) 5%, var(--sea)); stroke: var(--coast); }
:root[data-skin="trailer"] .hm-pass { fill: var(--blue); opacity: .1; }
:root[data-skin="trailer"] .hm-front { stroke: var(--blue); stroke-width: 2.5; filter: drop-shadow(0 0 5px var(--blue)); }
:root[data-skin="trailer"] .hm-m.live { stroke: none; filter: drop-shadow(0 0 3px var(--red)); }
:root[data-skin="trailer"] .hm-m.found { filter: drop-shadow(0 0 3px var(--accent)); }
:root[data-skin="trailer"] .hm-c { fill: var(--muted); }
:root[data-skin="trailer"] .hm-end, :root[data-skin="trailer"] .hm-rl { font-family: var(--mono); font-style: normal; letter-spacing: .06em; font-size: 10.5px; }
:root[data-skin="trailer"] .hm-risk { stroke: var(--red); stroke-width: 2.6; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--red) 70%, transparent)); }
:root[data-skin="trailer"] .hm-dot { fill: var(--red); stroke: var(--ink); filter: drop-shadow(0 0 6px var(--red)); }
:root[data-skin="trailer"] .hm-fin { filter: drop-shadow(0 0 4px var(--good)); }
:root[data-skin="trailer"] .hm-bench { stroke: var(--muted); }
:root[data-skin="trailer"] .hm-bench-t { fill: var(--muted); }
:root[data-skin="trailer"] .hm-cursor { stroke: var(--accent); opacity: .7; }
:root[data-skin="trailer"] .hm-legend .k-pass { background: color-mix(in srgb, var(--blue) 25%, var(--panel)); }
:root[data-skin="trailer"] #hm-read dt { font-family: var(--body); letter-spacing: 0; }
:root[data-skin="trailer"] #hm-read dd { white-space: nowrap; }
:root[data-skin="trailer"] #hm-read dt:nth-last-of-type(-n+3), :root[data-skin="trailer"] #hm-read dt:nth-of-type(8) { color: var(--ink); }
:root[data-skin="trailer"] #hm-read dd:nth-of-type(8) { color: var(--red); text-shadow: 0 0 12px color-mix(in srgb, var(--red) 60%, transparent); }
:root[data-skin="trailer"] #hm-read dd:nth-of-type(10) { color: var(--good); }
:root[data-skin="trailer"] .hm-tl li { --c1: var(--blue); --c2: var(--red); }
:root[data-skin="trailer"] .hm-head h2 { font-size: 24px; }