/* Minnesota Winter: the rest of the bulletin (src/apps/minnesota-winter.ts). Repo-authored, beside the design system's hand-written
   exhibits/mn-winter/artifact.css (decisions/027), which holds the sheet, its palette and the forms and results. This file adds what the
   reference page does not cover: the tabs, plates, fish gallery, tables and the Play Out on the Ice panel. Every rule is scoped to the artifact,
   so nothing here reaches the cabinet around it. Colour comes from the palette tokens artifact.css defines at the scope root. */

[data-artifact="mn-winter"] .mw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-artifact="mn-winter"] .mw-sec[hidden] { display: none; }
[data-artifact="mn-winter"] .mw-sec > h3, [data-artifact="mn-winter"] .mw-play-title { margin: 26px 0 8px; font: 700 18px/1.2 var(--mw-head); text-transform: uppercase; letter-spacing: .06em; color: var(--mw-ditto); }

/* The contents strip. With the script on it is a tab bar: one row that scrolls inside its own box and stays in view. */
[data-artifact="mn-winter"] .mw-nav { margin: 0 0 28px; }
[data-artifact="mn-winter"] .mw-nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; list-style: none; margin: 0; padding: 0; }
[data-artifact="mn-winter"] .mw-nav li { margin: 0; }
[data-artifact="mn-winter"] .mw-tab { display: inline-block; min-height: 44px; padding: 12px 2px 6px; border-bottom: 3px solid transparent; font: 700 14px/1.2 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--mw-ditto); white-space: nowrap; }
[data-artifact="mn-winter"] .mw-tab:hover { border-bottom-color: var(--mw-rule); }
[data-artifact="mn-winter"] .mw-tab[aria-selected="true"] { border-bottom-color: var(--mw-ditto); color: var(--mw-ink); }
.mw-tabs-on [data-artifact="mn-winter"] .mw-nav { position: sticky; top: 0; z-index: 2; background: var(--mw-stock); border-bottom: 2px solid var(--mw-ditto); }
.mw-tabs-on [data-artifact="mn-winter"] .mw-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
/* The tab already says "Dashboard"; the heading stays for screen readers only. */
.mw-tabs-on [data-artifact="mn-winter"] #dashboard-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The tool comes first: the sheet sits close under the hero and its masthead is trimmed, so the wind chill field is in the first screen. */
[data-artifact="mn-winter"] { margin-top: -32px; padding-top: 24px; }
[data-artifact="mn-winter"] .mw-mast { margin-bottom: 16px; padding: 10px 0 12px; }
[data-artifact="mn-winter"] .mw-title { font: 400 clamp(30px, 4.2vw, 44px)/1.02 var(--mw-title); }
[data-artifact="mn-winter"] .mw-nav { margin-bottom: 16px; }
@media (max-width: 40rem) {
  [data-artifact="mn-winter"] { margin-top: -16px; padding-top: 16px; }
}

/* Forms. */
[data-artifact="mn-winter"] .mw-feel { margin-top: 28px; max-width: none; }
[data-artifact="mn-winter"] .mw-range { width: 100%; min-height: 44px; margin: 0; padding: 0; accent-color: var(--mw-ditto); background: transparent; }
[data-artifact="mn-winter"] .mw-btn[hidden] { display: none; }
[data-artifact="mn-winter"] .mw-reaction { max-width: none; margin: 0 0 14px; }
[data-artifact="mn-winter"] #mw-feel-result[data-reaction="cold"], [data-artifact="mn-winter"] #mw-feel-result[data-reaction="uff-da"] { padding-left: 12px; border-left: 4px solid var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-weather-icon { width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; }
[data-artifact="mn-winter"] .mw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 18px; margin: 0 0 14px; }
[data-artifact="mn-winter"] .mw-facts div { padding-top: 6px; border-top: 1px dashed var(--mw-rule); }
[data-artifact="mn-winter"] .mw-facts dt { font: 700 12px/1.3 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--mw-muted); }
[data-artifact="mn-winter"] .mw-facts dd { margin: 0; font: 700 16px/1.3 var(--mw-type); }

/* Plates: the guide's pictures, run off in the sheet's own ink. */
[data-artifact="mn-winter"] .mw-plate { margin: 0; padding: 4px; border: 2px solid var(--mw-ditto); background: var(--mw-ditto-faint); }
[data-artifact="mn-winter"] .mw-plate img { display: block; width: 100%; height: auto; filter: grayscale(.9) contrast(1.05); }
[data-artifact="mn-winter"] .mw-hero { margin: 28px 0; }
[data-artifact="mn-winter"] .mw-hero img { aspect-ratio: 21 / 8; object-fit: cover; }
[data-artifact="mn-winter"] .mw-wide { margin: 0 0 20px; }
[data-artifact="mn-winter"] .mw-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 24px; margin: 0 0 20px; padding: 0; list-style: none; }
[data-artifact="mn-winter"] .mw-sec .mw-plates { max-width: none; }
[data-artifact="mn-winter"] .mw-sec .mw-plates > li { margin: 0; padding: 0; }
[data-artifact="mn-winter"] .mw-sec .mw-plates > li::before { content: none; }
[data-artifact="mn-winter"] .mw-card { margin: 0; }
[data-artifact="mn-winter"] .mw-card-name { margin: 10px 0 2px; font: 700 20px/1.2 var(--mw-head); letter-spacing: .04em; text-transform: uppercase; color: var(--mw-ink); }
[data-artifact="mn-winter"] .mw-card-cat { margin: 0 0 6px; font: 700 12px/1.3 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-card-text { margin: 0 0 8px; max-width: none; font: 400 15px/1.5 var(--mw-type); }

[data-artifact="mn-winter"] .mw-warning { padding: 12px 14px; background: var(--mw-ditto-faint); border-left: 6px solid var(--mw-danger); }

/* Tables scroll sideways inside their own box on a narrow screen instead of overflowing the sheet. */
[data-artifact="mn-winter"] .mw-table-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 24px; }
[data-artifact="mn-winter"] .mw-table { width: 100%; border-collapse: collapse; font: 400 15px/1.5 var(--mw-type); }
[data-artifact="mn-winter"] .mw-table caption { padding-bottom: 8px; text-align: left; font: 700 12px/1.3 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--mw-muted); }
[data-artifact="mn-winter"] .mw-table th, [data-artifact="mn-winter"] .mw-table td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mw-rule); }
[data-artifact="mn-winter"] .mw-table thead th { border-bottom-color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-bar { width: 8rem; max-width: 100%; height: 12px; accent-color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-records th { width: auto; font: 700 26px/1.05 var(--mw-type); white-space: normal; }
[data-artifact="mn-winter"] .mw-record-where { display: block; margin-top: 2px; font: 400 13px/1.4 var(--mw-type); color: var(--mw-muted); }

[data-artifact="mn-winter"] .mw-sec .mw-kit > li { padding-left: 0; }
[data-artifact="mn-winter"] .mw-sec .mw-kit > li::before { content: none; }
[data-artifact="mn-winter"] .mw-kit label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
[data-artifact="mn-winter"] .mw-kit input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--mw-ditto); }

[data-artifact="mn-winter"] .mw-divider { margin: 28px 0 0; border: 0; border-top: 1px dashed var(--mw-rule); }

/* The Play Out on the Ice panel where the old game was: the lake photo, two sentences and a link. */
[data-artifact="mn-winter"] .mw-play { margin: 0 0 28px; padding: 18px 20px; border: 2px solid var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-sec .mw-play-title { margin-top: 16px; }
[data-artifact="mn-winter"] .mw-play-photo { aspect-ratio: 21 / 9; }
[data-artifact="mn-winter"] .mw-play-photo img { height: 100%; object-fit: cover; }
[data-artifact="mn-winter"] .mw-play .mw-btn { display: inline-flex; align-items: center; text-decoration: none; }
[data-artifact="mn-winter"] .mw-card-play { margin: 0; max-width: none; font: 400 15px/1.5 var(--mw-type); }

/* Motion stands still for anyone who asks. */
@media (prefers-reduced-motion: reduce) {
  [data-artifact="mn-winter"] *, [data-artifact="mn-winter"] *::before, [data-artifact="mn-winter"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* On a phone each table row becomes a stacked block, so no column is cut off. */
@media (max-width: 40rem) {
  [data-artifact="mn-winter"] .mw-table caption { display: block; }
  [data-artifact="mn-winter"] .mw-table thead { position: absolute; left: -9999px; }
  [data-artifact="mn-winter"] .mw-table, [data-artifact="mn-winter"] .mw-table tbody, [data-artifact="mn-winter"] .mw-table tr, [data-artifact="mn-winter"] .mw-table th, [data-artifact="mn-winter"] .mw-table td { display: block; }
  [data-artifact="mn-winter"] .mw-table tr { padding: 8px 0; border-bottom: 1px solid var(--mw-ditto); }
  [data-artifact="mn-winter"] .mw-table th, [data-artifact="mn-winter"] .mw-table td { padding: 4px 0; border-bottom: 0; }
  [data-artifact="mn-winter"] .mw-table td[data-label]::before { content: attr(data-label) ": "; font: 700 12px/1.3 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--mw-muted); }
  [data-artifact="mn-winter"] .mw-play { padding: 14px 12px; }
}