/* Inställningar: textstorlek, mindre rörelse, hög kontrast, lugnt läge och inställningskortet. */

/* ---------- Textstorlek: rem följer roten, kroppstexten följer --ts ---------- */
:root { --ts: 1; }
html { font-size: calc(100% * var(--ts)); }
body { font-size: calc(17px * var(--ts)); }
html.text-large .hud, html.text-xlarge .hud { flex-wrap: wrap; }
html.text-large .pill.hide-s, html.text-xlarge .pill.hide-s { display: none; }
html.text-large .dialog, html.text-xlarge .dialog { max-height: 34dvh; overflow: auto; }
@media (max-width: 520px) {
  html.text-xlarge .hud .brand { font-size: 1.4rem; }
  html.text-large .card, html.text-xlarge .card { padding: .9rem .9rem; }
}

/* ---------- Mindre rörelse (åsidosätter systemet) ---------- */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}
html.reduce-motion #app.shake { animation: none !important; }

/* ---------- Hög kontrast ---------- */
html.high-contrast {
  --paper: #ffffff; --paper-2: #f2f2f2; --ink: #000000; --ink-soft: #1c1c1c;
  --accent: #a31000; --accent-2: #00514b; --good: #0b5d12; --bad: #a30000;
  --wood: #e0e0e0; --land: #ffe9a8; --land-edge: #000000; --sea: #d9f0ff;
}
@media (prefers-color-scheme: dark) {
  html.high-contrast {
    --paper: #000000; --paper-2: #101010; --ink: #ffffff; --ink-soft: #f0f0f0;
    --accent: #ff8a70; --accent-2: #6fe3d6; --good: #8dff8d; --bad: #ff9a9a;
    --wood: #1c1c1c; --land: #4a3a10; --land-edge: #ffffff; --sea: #06222e;
  }
}
html.high-contrast button { border-width: 3.5px; }
html.high-contrast button:focus-visible, html.high-contrast input:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
html.high-contrast small, html.high-contrast .card .sub { color: var(--ink); }
html.high-contrast .overlay { background: rgba(0, 0, 0, .8); }

/* ---------- Kortet ---------- */
.settings-card { gap: .7rem; }
.st-group { border: 2px dashed var(--ink-soft); border-radius: 14px; margin: 0; padding: .5rem .8rem .7rem; display: grid; gap: .5rem; min-width: 0; }
.st-group legend { font-family: 'Caveat', cursive; font-size: 1.4rem; color: var(--accent); padding: 0 .4rem; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.st-row input[type=range] { flex: 1 1 8rem; min-width: 6rem; accent-color: var(--accent-2); height: 1.6rem; }
.st-row output { min-width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.st-check { justify-content: flex-start; align-items: flex-start; cursor: pointer; }
.st-check input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--accent-2); flex: none; }
.st-check span { flex: 1; }
.st-seg { display: flex; gap: .3rem; flex-wrap: wrap; }
.st-seg button { padding: .25rem .7rem; box-shadow: none; }
.st-seg button.on { background: var(--accent-2); color: #fff; }
.settings-card input:focus-visible, .settings-card select:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.card button.danger { background: var(--bad); color: #fff7e8; }

.st-range { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.4rem; }
.st-range input { width: 100%; min-width: 0; }
@media (max-width: 760px) { .hud .icon { padding: .2rem .45rem; } }
@media (max-width: 520px) {
  html.text-xlarge .hud .pill { font-size: .78rem; }
  html.text-xlarge .hud .icon { font-size: .95rem; }
}