/* ============================================================
   Settings screen — "Forged Lantern". Loaded after ui-encyclopedia.css: it reuses
   .pveHead / .pveTabs / .pveTab (sub-tab rows), .collFilters .searchBox (search) and
   .panel. Sub-tab buttons keep .devSubTabBtn / .setIntfCatTabBtn + .active for the
   handlers in ui/settings.js. Cards are full width (aligned left under the tabs).
   Sliders paint their filled part from `--p` (set by ui/settings.js paintRange);
   checkboxes inside #settingsScreen are drawn as switches (still real checkboxes).
   Cursors: never a bare value (CLAUDE.md §4). See docs/subsystems/settings-ui.md.
   ============================================================ */

.stCard{ margin: 0 0 16px; }
#settingsScreen .panel h2{ margin: 0 0 6px; }
#settingsScreen .panel .hint{ border: 0; padding: 0; margin: 0 0 10px; }

/* ---------- tab row: 6 pills; on phones a 3x2 grid (never scrolls) ---------- */
.stHead .pveTabs.six{ flex-wrap: nowrap; }
@media (max-width: 600px){
  .stHead .pveTabs.six{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 2px; border-radius: 22px; }
  .stHead .pveTabs.six .pveTab{ padding: 0 4px; min-height: 40px; font-size: .88rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) and (hover: none), (max-width: 600px) and (pointer: coarse){
  .stHead .pveTabs.six{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stHead .pveTabs.six .pveTab{ font-size: .8rem; }
}
/* Controls / Mouse are useless without a keyboard / mouse (same test as ui/settings.js hasFinePointer) */
@media (hover: none), (pointer: coarse){
  #settingsSubNav .devSubTabBtn[data-sub="controls"], #settingsSubNav .devSubTabBtn[data-sub="mouse"]{ display: none; }
}

/* ---------- sliders + switches ---------- */
#settingsScreen input[type="range"]{
  -webkit-appearance: none; appearance: none; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: var(--cur-click, pointer); touch-action: pan-y; accent-color: var(--accent);
}
#settingsScreen input[type="range"]::-webkit-slider-runnable-track{
  height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), hsl(var(--h) 14% 24%) var(--p, 50%));
}
#settingsScreen input[type="range"]::-moz-range-track{ height: 8px; border-radius: 999px; background: hsl(var(--h) 14% 24%); }
#settingsScreen input[type="range"]::-moz-range-progress{ height: 8px; border-radius: 999px; background: var(--accent); }
#settingsScreen input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: var(--accent-hi);
  border: 3px solid hsl(var(--h) 25% 8%); box-shadow: 0 0 0 1px var(--accent), 0 2px 8px #0008;
}
#settingsScreen input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent-hi); border: 3px solid hsl(var(--h) 25% 8%); box-shadow: 0 0 0 1px var(--accent);
}
#settingsScreen input[type="range"]:focus-visible{ outline: none; }
#settingsScreen input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 4px hsl(var(--h) 90% 60% / .35); }

#settingsScreen input[type="checkbox"]{
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 46px; height: 26px; margin: 0; padding: 0;
  border-radius: 999px; border: 1px solid var(--c-line); background: hsl(var(--h) 14% 22%); cursor: var(--cur-click, pointer);
  transition: background var(--t-fast), border-color var(--t-fast);
}
#settingsScreen input[type="checkbox"]::after{
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-dim);
  transition: transform var(--t-fast), background var(--t-fast);
}
#settingsScreen input[type="checkbox"]:checked{ background: var(--accent); border-color: var(--accent-hi); }
#settingsScreen input[type="checkbox"]:checked::after{ transform: translateX(20px); background: var(--accent-ink, #10140f); }
#settingsScreen input[type="checkbox"]:focus-visible{ outline: none; box-shadow: 0 0 0 3px hsl(var(--h) 90% 60% / .35); }
/* Volume rows are also used by the in-battle Audio modal (#battleAudioOverlay): generic base first, Settings' own look scoped below */
.settingsVolumeRow{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.settingsVolumeRow:last-child{ margin-bottom: 0; }
.settingsVolumeLabel{ flex: none; min-width: 100px; font: 600 .78rem var(--f-body); color: var(--c-dim); }
.settingsVolumeRow input[type="range"]{ flex: 1; min-width: 120px; }
.settingsMuteInline{ display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; cursor: var(--cur-click, pointer); }
#settingsScreen .settingsMuteInline, .gfxCheck{
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; flex: none; white-space: nowrap;
  font: 500 .95rem var(--f-body); color: var(--c-text); cursor: var(--cur-click, pointer); user-select: none;
}
@media (prefers-reduced-motion: reduce){
  #settingsScreen input[type="checkbox"], #settingsScreen input[type="checkbox"]::after{ transition: none; }
}

/* ---------- Audio ---------- */
#settingsScreen .settingsVolumeRow{
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; padding: 6px 0; margin: 0;
  border-top: 1px solid var(--c-line);
}
#settingsScreen .settingsVolumeRow:first-of-type{ border-top: 0; }
#settingsScreen .settingsVolumeLabel{ min-width: 0; font: 600 .95rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--c-text); }
@media (max-width: 640px){
  #settingsScreen .settingsVolumeRow{ grid-template-columns: 1fr auto; }
  #settingsScreen .settingsVolumeLabel, #settingsScreen .settingsVolumeRow input[type="range"]{ grid-column: 1 / -1; }
}

/* ---------- Graphics ---------- */
.gfxPresets{ display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.gfxPresetBtn{
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--c-line); background: hsl(var(--h) 16% 8% / .8);
  color: var(--c-dim); font: 600 .9rem var(--f-body); cursor: var(--cur-click, pointer); transition: all var(--t-fast);
}
.gfxPresetBtn:hover{ color: var(--c-text); border-color: var(--accent); }
.gfxPresetBtn.active{ background: var(--accent); border-color: var(--accent-hi); color: var(--accent-ink, #10140f); font-weight: 700; }
.gfxRows{ display: flex; flex-direction: column; gap: 0; max-width: none; }
.gfxRow{
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 3.4em; align-items: center; gap: 6px 20px; padding: 6px 0; border-top: 1px solid var(--c-line);
}
.gfxRow > label:first-child{ width: auto; font: 600 .95rem var(--f-body); color: var(--c-text); }
.gfxRow:has(select){ grid-template-columns: 150px minmax(0, 220px); }
.gfxRow:has(.gfxCheck){ display: flex; flex-wrap: wrap; gap: 0 28px; }
.gfxRow input[type="range"]{ min-width: 0; }
.gfxVal{ width: auto; text-align: right; font: 700 .95rem var(--f-body); font-variant-numeric: tabular-nums; color: var(--accent-hi); }
.gfxTest{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 14px; max-width: none; }
.gfxTest .hint{ margin: 0; }
.gfxStage{
  position: relative; flex: 1 0 100%; width: 100%; max-width: none; height: 150px; margin-top: 4px; border: 1px solid var(--c-line);
  border-radius: var(--r-md, 14px); overflow: hidden; background: radial-gradient(ellipse at 50% 60%, hsl(var(--h) 25% 12%), hsl(var(--h) 25% 5%));
}
@media (max-width: 640px){
  .gfxRow, .gfxRow:has(select){ grid-template-columns: minmax(0, 1fr) 3.4em; }
  .gfxRow > label:first-child{ grid-column: 1 / -1; }
  .gfxRow:has(select) > select{ grid-column: 1 / -1; }
}

/* ---------- Controls ---------- */
.controlsList{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 10px 0 0; }
.controlsRow{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; padding: 6px 0; border-top: 1px solid var(--c-line); }
.controlsList .controlsAction{ min-width: 0; overflow-wrap: anywhere; font: 500 .95rem var(--f-body); color: var(--c-text); }
.controlsList .controlsKey{
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--c-line); border-bottom-width: 3px; background: hsl(var(--h) 16% 10%); color: var(--accent-hi); font: 700 .85rem var(--f-body);
}
.controlsList .controlsKey.unbound{ opacity: .55; font-style: italic; }
.controlsList .controlsKey.capturing{ border-color: var(--accent-hi); color: var(--c-text); }
.controlsList .controlsChangeBtn{ min-height: 40px; padding: 0 16px; font-size: .8rem; }
.controlsConfirmRow{ margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--c-line); display: flex; }
.controlsActions{ margin-top: 14px; }
@media (max-width: 900px){ .controlsList{ grid-template-columns: 1fr; } }

/* ---------- Profile ---------- */
/* Identity (portrait + name) on the left, the account-sync line on the
   right, on the same line; the sync line drops below on narrow screens. */
.profileHeaderRow{ display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; }
.profileHeaderRow .profileIdentityRow{ flex: 1 1 260px; min-width: 0; }
.profileSyncStatus{ margin: 0 0 0 auto; flex: 0 1 auto; max-width: 100%; text-align: right; }
.profileIdentityRow{ display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.profileIdentityPortrait{ display: inline-block; width: 76px; height: 76px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid var(--accent); box-shadow: var(--sh-1); }
.profileIdentityPortrait .heroPortrait{ width: 100%; height: 100%; }
.profileIdentityPortraitEmpty{ display: flex; align-items: center; justify-content: center; font-size: 2rem; background: hsl(var(--h) 16% 10%); }
.profileIdentityName{ flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; font: 700 1.5rem var(--f-display); color: var(--c-text); cursor: var(--cur-click, pointer); }
.profileIdentityName:hover{ color: var(--accent-hi); }
.profileRenameInput{ flex: 1 1 200px; max-width: 340px; min-height: 44px; }
#settingsProfileGrid{ margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; }
#settingsProfileGrid .collectionCard{
  position: relative; padding: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--c-line); background: #0b0e0c;
  transition: transform var(--t-med, .2s) var(--ease, ease), border-color var(--t-med, .2s);
}
#settingsProfileGrid .collectionCard:hover{ transform: translateY(-3px); border-color: var(--accent); }
#settingsProfileGrid .collectionCard.active{ border-color: var(--accent-hi); box-shadow: 0 0 0 3px hsl(var(--h) 90% 60% / .28); }
#settingsProfileGrid .cc-icon{ position: absolute; inset: 0; }
#settingsProfileGrid .heroPortrait{ display: block; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; object-fit: cover; }
#settingsProfileGrid span.heroPortrait.heroArtFallback{ font-size: 2rem; }
#settingsProfileGrid .cc-name{ display: none; }
#settingsProfileGrid .cc-lvlBadge{ top: auto; left: auto; right: 2px; bottom: 2px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: var(--accent); border: 0; color: var(--accent-ink, #10140f); }
@media (max-width: 600px){
  .profileIdentityPortrait{ width: 64px; height: 64px; }
  .profileIdentityName{ font-size: 1.25rem; }
  #settingsProfileGrid{ grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; }
}

/* ---------- Interface + Mouse ---------- */
.uiZoomSetting{ display: none; margin-bottom: 16px; }
@media (min-width: 901px) and (pointer: fine){
  .uiZoomSetting{ display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto; gap: 14px 20px; align-items: center; }
}
.uiZoomSetting .stZt{ display: flex; flex-direction: column; gap: 2px; }
.uiZoomSetting label{ font: 700 1.05rem var(--f-display); color: var(--c-text); }
.uiZoomSetting .hint{ margin: 0; font-size: .8rem; }
.uiZoomSetting .stRange{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.uiZoomSetting .stRange input{ flex: 1; min-width: 0; width: auto; }
.uiZoomSetting .uiZoomValue{ min-width: 7.5em; text-align: right; font: 700 .95rem var(--f-body); font-variant-numeric: tabular-nums; color: var(--accent-hi); }
.uiZoomSetting button{ flex: none; width: auto; min-height: 44px; padding: 0 22px; }

.settingsMouseOptions{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 12px 20px; }
.settingsMouseOptions .hint{ margin: 0; }
#settingsInterfacePanel .pveTabs.sm, #settingsMousePanel .pveTabs.sm{ margin-bottom: 12px; }
#settingsInterfacePanel .collFilters, #settingsMousePanel .collFilters{ margin: 6px 0 18px; }

#settingsInterfaceGrid, #settingsMouseGrid{ gap: 16px; }
#settingsInterfaceGrid{ grid-template-columns: repeat(auto-fill, minmax(calc(clamp(220px, 17vw, 300px) / var(--ui-zoom, 1)), 1fr)); }
#settingsMouseGrid{ grid-template-columns: repeat(auto-fill, minmax(calc(clamp(210px, 16vw, 280px) / var(--ui-zoom, 1)), 1fr)); }
#settingsInterfaceGrid .collectionCard, #settingsMouseGrid .collectionCard{
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 22px; text-align: center;
  border: 1px solid var(--c-line); background-color: hsl(var(--h) 16% 8% / .82); background-image: var(--grain); box-shadow: var(--sh-1);
  transition: transform var(--t-med, .2s) var(--ease, ease), border-color var(--t-med, .2s), box-shadow var(--t-med, .2s);
}
#settingsInterfaceGrid .collectionCard:hover, #settingsMouseGrid .collectionCard:hover{ transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--sh-2); }
#settingsInterfaceGrid .collectionCard.locked, #settingsMouseGrid .collectionCard.locked{ opacity: 1; }
#settingsInterfaceGrid .collectionCard.locked .settingsIntfThumb, #settingsMouseGrid .collectionCard.locked .ptrStates{ filter: grayscale(.7) brightness(.7); }
#settingsInterfaceGrid .settingsIntfThumb{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; border-radius: 0; box-shadow: none; object-fit: cover; }
#settingsInterfaceGrid span.settingsIntfThumb.heroArtFallback{ display: grid; place-items: center; aspect-ratio: 16 / 9; font-size: 2rem; background: hsl(var(--h) 16% 10%); box-shadow: none; }
#settingsMouseGrid .cc-icon{ background: radial-gradient(circle at 50% 45%, hsl(var(--h) 25% 16%), hsl(var(--h) 25% 6%)); padding: 18px 10px; }
.ptrStates{ display: flex; align-items: center; justify-content: space-around; gap: 4px; min-height: 56px; }
.ptrStates img, .ptrStates img.ptrMain{ width: 34px; height: 34px; -webkit-user-drag: none; user-select: none; }
.ptrStates .ptrSystem{ font-size: 2rem; line-height: 1; }
#settingsInterfaceGrid .cc-name, #settingsMouseGrid .cc-name{ margin: 0; padding: 12px 14px 0; font: 700 1rem/1.15 var(--f-display); color: var(--c-text); }
#settingsInterfaceGrid .cc-lvl, #settingsMouseGrid .cc-lvl{ margin: 2px 0 0; padding: 0 14px 14px; font: 500 .78rem var(--f-body); color: var(--c-dim); }
#settingsInterfaceGrid .collectionCard:has(.cc-lvlBadge), #settingsMouseGrid .collectionCard:has(.cc-lvlBadge){ border-color: var(--accent-hi); box-shadow: 0 0 0 2px var(--accent), var(--sh-2); }
#settingsInterfaceGrid .collectionCard:has(.cc-lvlBadge) .cc-lvl, #settingsMouseGrid .collectionCard:has(.cc-lvlBadge) .cc-lvl{ color: var(--accent-hi); }
#settingsInterfaceGrid .cc-lvlBadge, #settingsMouseGrid .cc-lvlBadge{
  top: 10px; left: auto; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: var(--accent); border: 0; color: var(--accent-ink, #10140f);
}
.ptrDetailStates{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.ptrDetailStates figure{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 .68rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
.ptrDetailStates img{ width: 64px; height: 64px; background: rgba(0, 0, 0, .25); border: 1px solid var(--c-line); border-radius: 8px; padding: 6px; }
@media (max-width: 600px){
  #settingsInterfaceGrid, #settingsMouseGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #settingsMouseGrid .ptrStates{ flex-wrap: wrap; gap: 8px 4px; }
  #settingsMouseGrid .ptrStates img, #settingsMouseGrid .ptrStates img.ptrMain{ width: 36px; height: 36px; }
  #settingsInterfaceGrid .cc-name, #settingsMouseGrid .cc-name{ font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce){
  #settingsInterfaceGrid .collectionCard, #settingsMouseGrid .collectionCard, #settingsProfileGrid .collectionCard{ transition: none; }
}

/* global button rules stretch buttons in some containers: keep these natural-width */
.gfxPresetBtn{ flex: 0 0 auto; width: auto; }
.gfxTest button, .controlsActions button, .profileIdentityRow button, .uiZoomSetting button{ width: auto; flex: none; }
.gfxRow select{ min-height: 44px; width: 100%; max-width: 220px; }
.controlsConfirmRow{ width: 100%; }