/* Hearthmist module styles: settings */

/* ---------- the gear in the top bar ---------- */

#settings-open { min-width: 34px; padding: 6px 8px; }
#settings-open .ic { width: 20px; height: 20px; vertical-align: 0; }

/* ---------- the dialog: a fixed frame, so moving between sections does not make it jump ---------- */

dialog#dlg.settings {
  max-width: 600px;
  height: min(700px, calc(100dvh - 32px));
  overflow: hidden;
}
dialog#dlg.settings #dlg-body { height: 100%; padding: 0; }

.settings { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.settings-head { flex: none; padding: 24px 28px 0; border-bottom: 1px solid var(--line); }

/* Sections of the dialog: the same idea as the panel's rail, laid on its side. Ember marks the one you are in. */
.settings-tabs { display: flex; gap: 2px; margin: var(--s3) 0 0 -12px; }
.settings-tabs button {
  flex: none;
  margin: 0 0 -1px;
  padding: 8px 12px 9px;
  background: none;
  border: 0;
  border-radius: var(--r) var(--r) 0 0;
  color: var(--muted);
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s;
}
.settings-tabs button:hover { color: var(--text); background: var(--panel-2); }
.settings-tabs button.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--ember); }
.settings-tabs button:focus-visible { outline-offset: -2px; }

.settings-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 28px var(--s5);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  overscroll-behavior: contain;
}
.settings-panel:focus-visible { outline-offset: -2px; }
.settings-panel > :first-child { margin-top: 0; }

.settings-foot {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: var(--s3) 28px var(--s4);
  border-top: 1px solid var(--line);
}
.settings-foot .btn { min-width: 104px; }

#dlg-body .settings-hint { margin-top: var(--s4); color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }

/* ---------- preferences: a label on the left, its control on the right edge ---------- */

.settings-row { display: flex; align-items: center; gap: var(--s4); min-height: 40px; padding: 7px 0; }
.sec + .settings-row { margin-top: var(--s1); }
.settings-text { flex: 1 1 auto; min-width: 0; }
.settings-text label { display: block; color: var(--text); line-height: 1.3; cursor: pointer; }
.settings-text small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.settings-ctl { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); flex: none; }

/* A switch is a checkbox. Squared, like every control; where the block sits says whether it is on. */
.settings-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.settings-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--muted);
  transition: transform 0.12s, background-color 0.12s;
}
.settings-switch:hover { border-color: var(--muted); }
.settings-switch:checked { background: var(--panel-3); border-color: var(--muted); }
.settings-switch:checked::before { transform: translateX(18px); background: var(--text); }

.settings-range {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 150px;
  height: 22px;
  margin: 0;
  background: none;
  cursor: pointer;
}
.settings-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--muted) var(--settings-fill, 0%), var(--ink) var(--settings-fill, 0%));
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 20px;
  margin-top: -7.5px;
  border: 0;
  border-radius: 2px;
  background: var(--text);
}
.settings-range::-moz-range-track { height: 5px; border-radius: 2px; background: var(--ink); }
.settings-range::-moz-range-progress { height: 5px; border-radius: 2px; background: var(--muted); }
.settings-range::-moz-range-thumb { width: 10px; height: 20px; border: 0; border-radius: 2px; background: var(--text); }
.settings-val { min-width: 2.9em; text-align: right; font-weight: 700; white-space: nowrap; }

.settings-select {
  min-height: 34px;
  max-width: 200px;
  padding: 4px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
  font: inherit;
  font-variant-numeric: inherit;
  cursor: pointer;
}
.settings-select:hover { background: var(--panel-3); border-color: var(--muted); }

/* ---------- the saved game ---------- */

.settings-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.stat + .settings-acts { margin-top: var(--s2); }

#dlg-body .settings-note { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
#dlg-body p.settings-note { margin-top: var(--s2); }
#dlg-body .settings-note.bad { color: var(--bad); }
.settings-note:empty { display: none; }

.settings-flabel { display: block; margin-top: var(--s4); color: var(--muted); font-size: var(--fs-small); }
.settings-area {
  display: block;
  width: 100%;
  min-height: 52px;
  max-height: 180px;
  margin-top: var(--s2);
  padding: 7px 10px;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text-2);
  font: 400 var(--fs-small)/1.4 var(--sans);
  overflow-wrap: anywhere;
  resize: vertical;
}
.settings-flabel + .settings-area { margin-top: var(--s1); }
.settings-area::selection { background: var(--line-2); color: var(--text); }

/* ---------- controls ---------- */

.settings-keys { margin-top: var(--s1); }
.settings-key { display: flex; align-items: baseline; gap: var(--s4); padding: 6px 0; }
.settings-key dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 5px; flex: none; width: 132px; color: var(--text); }
.settings-key dd { flex: 1 1 auto; min-width: 0; color: var(--text-2); }
.settings-key dt > span { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.settings-key dt i { color: var(--muted); font-size: var(--fs-small); font-style: normal; }
.settings-key kbd {
  min-width: 26px;
  padding: 1px 7px 2px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r);
  color: var(--text);
  font: 700 var(--fs-small)/1.35 var(--sans);
  text-align: center;
  white-space: nowrap;
}

/* ---------- about ---------- */

.settings-about { display: flex; align-items: center; gap: var(--s3); }
.settings-about h3 { font-family: var(--serif); font-size: var(--fs-title); font-weight: 400; line-height: 1.15; }
.settings-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--gold);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.settings-link:hover { color: var(--text); }

@media (max-width: 820px) {
  .settings-head { padding: 18px 20px 0; }
  .settings-tabs { margin-left: -10px; }
  .settings-tabs button { padding-inline: 10px; }
  .settings-panel { padding: var(--s4) 20px 20px; }
  .settings-foot { padding: 10px 20px 14px; }
  .settings-range { width: 104px; }
  .settings-key { gap: var(--s3); }
}

/* ---------- preference: text size ----------
   Large raises the type tokens by about an eighth, and with them everything set in them, which is every
   piece of text in the interface (labels drawn on the map keep their size). The panel is given a little
   more room to hold it. */

:root[data-text-size="large"] {
  --fs-micro: 14px;
  --fs-small: 15.5px;
  --fs-text: 17px;
  --fs-body: 18px;
  --fs-name: 19px;
  --fs-title: 23.5px;
  --fs-display: 31px;
  --rail-w: 68px;
  --panel-w: 440px;
}
:root[data-text-size="large"] dialog#dlg { max-width: 500px; }
:root[data-text-size="large"] .hud { max-width: min(320px, calc(100% - 24px)); }
:root[data-text-size="large"] dialog#dlg.settings { max-width: 660px; height: min(760px, calc(100dvh - 32px)); }
:root[data-text-size="large"] .settings-key dt { width: 148px; }

/* A phone has no width to spare: the stockpile and the top bar grow a step less, so both still fit. */
@media (max-width: 820px) {
  :root[data-text-size="large"] { --fs-micro: 13px; }
  :root[data-text-size="large"] .brand { font-size: calc(var(--fs-body) + 2px); }
  :root[data-text-size="large"] .res b { font-size: calc(var(--fs-body) - 1px); }
  :root[data-text-size="large"] #topbar .btn { font-size: calc(var(--fs-body) - 2px); }
  :root[data-text-size="large"] .settings-tabs button { padding-inline: 8px; font-size: calc(var(--fs-body) - 2px); }
}

/* ---------- preference: reduce motion ----------
   The same stilling the core applies when the device asks for it, on the player's say-so. */

:root[data-reduce-motion="1"] *,
:root[data-reduce-motion="1"] *::before,
:root[data-reduce-motion="1"] *::after { transition: none !important; animation: none !important; }