/* Settings menu: appearance, text size, grid.
 * Single source for every page. portfolio/template.html links this too,
 * so the built pages and the hand-written ones (/, /cv, /resume) cannot drift.
 * --rule falls back to --hairline for pages that do not define it. */
:root { --text-scale: 1; }
[data-grid="off"] body::before { display: none; }
.settings { position: fixed; top: 24px; right: 24px; left: auto; z-index: 130; }
.theme-toggle {
  position: static; z-index: 130;
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  padding: 4px; width: 24px; height: 24px; border-radius: 4px; outline: none;
  display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-panel {
  position: absolute; top: 34px; right: 0; min-width: 232px;
  background: var(--bg); border: 1px solid var(--rule, var(--hairline)); border-radius: 10px;
  padding: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.settings.is-open .settings-panel { opacity: 1; visibility: visible; transform: none; }
.settings-group + .settings-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.settings-label {
  display: block; margin: 0 0 8px; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.01em; color: var(--text-secondary); opacity: .75;
}
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--hairline); }
.seg button {
  flex: 1; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: -0.01em;
  padding: 5px 6px; border: 0; border-radius: 5px; background: none;
  color: var(--text-secondary); cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; line-height: 1; border: 1px solid var(--hairline);
  border-radius: 6px; background: none; color: var(--text); cursor: pointer;
}
.stepper button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper output { flex: 1; text-align: center; font-size: 12px; color: var(--text-secondary); letter-spacing: -0.01em; }
@media (max-width: 1023px) { .settings { display: none; } }