/* Settings share one workspace; the preview card owns only its content height. */
html[data-aim-local] .st-view {
  display: grid;
  grid-template: auto minmax(0, 1fr) / 180px minmax(0, 1fr);
  gap: var(--rc-space-6);
  inline-size: 100%;
  max-inline-size: 1920px;
  min-inline-size: 0;
  margin-inline: auto;
  padding: var(--rc-space-8);
  container: settings / inline-size;
}
html[data-aim-local] .st-view .st-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  align-items: center;
  gap: var(--rc-space-6);
  padding: 0 0 var(--rc-space-6);
  border-block-end: var(--rc-hairline);
}
html[data-aim-local] .st-view .st-title { display: grid; gap: var(--rc-space-2); }
html[data-aim-local] .st-view .st-title p { white-space: normal; }
html[data-aim-local] .st-view .st-searchrow { display: grid; gap: var(--rc-space-2); }
html[data-aim-local] .st-view .st-search-box { min-inline-size: 0; }
html[data-aim-local] .st-view .st-search { block-size: 44px; }
html[data-aim-local] .st-view .st-sync { margin: 0; }
html[data-aim-local] .st-view .st-tabbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--rc-space-6);
  min-block-size: 0;
  margin: 0;
  border: 0;
}
html[data-aim-local] .st-tabbar .st-tabs {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--rc-space-2);
  overflow: visible;
}
html[data-aim-local] .st-tabs .st-tab {
  justify-content: start;
  gap: var(--rc-space-3);
  min-block-size: 48px;
  block-size: auto;
  padding: var(--rc-space-3) var(--rc-space-4);
  border: 1px solid transparent;
  border-radius: var(--rc-r) !important;
  background: transparent;
  color: var(--rc-slate);
  font: 600 var(--rc-fs-15)/1.4 var(--rc-font-body) !important;
}
html[data-aim-local] .st-tabs .st-tab::after { content: none; }
html[data-aim-local] .st-tabs .st-tab:hover {
  background: var(--rc-paper-raise);
  color: var(--rc-ink);
}
html[data-aim-local] .st-tabs .st-tab.is-active {
  border-color: var(--rc-signal);
  background: var(--rc-selection-fill);
  color: var(--rc-ink);
}
html[data-aim-local] .st-tabs .st-tab svg { flex: none; }
html[data-aim-local] .st-tabbar .st-save {
  align-items: start;
  gap: var(--rc-space-2);
  margin: auto 0 0;
  padding: var(--rc-space-4);
  border-block-start: var(--rc-hairline);
  line-height: var(--rc-lh-body);
}
html[data-aim-local] .st-save i { flex: none; margin-block-start: 6px; }
html[data-aim-local] .st-save > span { display: block; }
html[data-aim-local] .st-view .st-main {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--rc-space-6);
  min-inline-size: 0;
  padding: 0;
}
html[data-aim-local] .st-view .st-main.is-wide { grid-template-columns: minmax(0, 1fr); }
html[data-aim-local] .st-view .st-main.is-wide .st-list { max-inline-size: none; }
html[data-aim-local] .st-view .st-list {
  min-inline-size: 0;
  max-inline-size: none;
  padding: 0 var(--rc-space-6) var(--rc-space-6);
  border: var(--rc-hairline);
  border-radius: var(--rc-r-panel) !important;
  background: var(--rc-paper-raise);
  scrollbar-gutter: stable;
  container: settings-editor / inline-size;
}
html[data-aim-local] .st-view .st-side {
  align-self: start;
  max-block-size: 100%;
  min-inline-size: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  container-type: inline-size;
}
html[data-aim-local] .st-side .st-stack,
html[data-aim-local] .st-side .st-stack.is-cross {
  inline-size: 100%;
  max-inline-size: none;
  padding: var(--rc-space-4);
  border: var(--rc-hairline);
  border-radius: var(--rc-r-panel);
  background: var(--rc-paper-raise);
  box-sizing: border-box;
}
html[data-aim-local] .st-side .st-bar {
  flex-wrap: wrap;
  block-size: auto;
  gap: var(--rc-space-2) var(--rc-space-3);
  padding: 0 0 var(--rc-space-4);
}
html[data-aim-local] .st-bar h2 { flex: 1 1 100%; }
html[data-aim-local] .st-side .st-bar p {
  margin: 0;
  white-space: normal;
  line-height: var(--rc-lh-body);
}
html[data-aim-local] .st-side .st-monitor {
  inline-size: min(100%, calc(min(600px, 70dvh) * var(--st-preview-aspect)));
  margin-inline: auto;
  overflow: hidden;
  border: var(--rc-hairline);
  border-radius: var(--rc-r);
  box-shadow: none;
}
html[data-aim-local] .st-monitor-corner { display: none; }
html[data-aim-local] .st-side .st-explain-card {
  min-block-size: 0;
  padding: var(--rc-space-4) 0 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-aim-local] .st-side .st-explain h4 { flex-wrap: wrap; }
html[data-aim-local] .st-side .st-explain h4 small { margin-inline-start: 0; white-space: normal; }
html[data-aim-local] .st-side .st-explain p { margin: 0; line-height: var(--rc-lh-body); }
html[data-aim-local] .st-tele { gap: var(--rc-space-4); }
html[data-aim-local] .st-tele dt { white-space: normal; font-size: var(--rc-fs-12); line-height: 1.5; }
html[data-aim-local] .st-tele dd { font-size: var(--rc-fs-20); line-height: 1.3; }
html[data-aim-local] .st-tele dd small { display: block; margin: var(--rc-space-1) 0 0; font-size: var(--rc-fs-12); }
html[data-aim-local] .st-rows {
  --st-line: var(--rc-rule);
  --st-line-2: var(--rc-rule-strong);
  --st-well: var(--rc-paper-raise);
}
html[data-aim-local] .st-rows .hall-dialog-section {
  display: grid;
  gap: var(--rc-space-2);
  padding: var(--rc-space-6) 0 var(--rc-space-4);
  margin: var(--rc-space-4) 0 0;
  font: 600 var(--rc-fs-20)/1.3 var(--rc-font-display) !important;
}
html[data-aim-local] .st-rows .hall-dialog-section::before { content: none; }
html[data-aim-local] .st-rows .hall-dialog-section-note {
  font: 400 var(--rc-fs-13)/1.5 var(--rc-font-body);
}
html[data-aim-local] .st-rows :is(.hall-field, .al-number-field) {
  gap: var(--rc-space-4);
  padding: var(--rc-space-4) 0;
  border: 0;
  border-block-end: var(--rc-hairline);
  border-radius: 0;
}
html[data-aim-local] .st-rows .hall-field-text { max-inline-size: 65ch; }
html[data-aim-local] .st-rows .hall-field-text b { font: 600 var(--rc-fs-15)/1.4 var(--rc-font-body) !important; }
html[data-aim-local] .st-rows .hall-field-text small { font-size: var(--rc-fs-13); line-height: 1.5; }
html[data-aim-local] .st-view.st-rows .st-list.st-brief :is(.hall-field-text small, .al-number-hint) {
  overflow: visible;
  white-space: normal;
}
html[data-aim-local] .st-rows .hall-choice { flex-wrap: wrap; }
html[data-aim-local] .st-rows .hall-choice .hall-field-text { flex-basis: min(16rem, 100%); }
html[data-aim-local] .st-rows .hall-choice-options { max-inline-size: 100%; }
html[data-aim-local] .st-rows :is(.hall-range, .hall-segment button, .hall-choice-options button) { min-block-size: 44px; }
html[data-aim-local] .st-rows .st-sens { block-size: 44px; }
html[data-aim-local] .st-rows .st-sens-step { inline-size: 44px; }
html[data-aim-local] .st-rows .hall-switch-track,
html[data-aim-local] .st-rows .hall-switch-track i { border-radius: var(--rc-r-small) !important; }
html[data-aim-local] .st-rows .hall-switch.is-on .hall-switch-track { background: var(--rc-signal); }
html[data-aim-local] .st-rows .hall-switch.is-on .hall-switch-track i { background: var(--rc-on-signal); }
html[data-aim-local] .st-view .hall-crosshair-profiles {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  flex-wrap: wrap;
}
html[data-aim-local] .st-view .hall-crosshair-profiles button { flex: 1 1 140px; }
html[data-aim-local] .st-view .hall-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  min-inline-size: 0;
  max-inline-size: 100%;
}
html[data-aim-local] .st-view .hall-color-swatches button {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--rc-r-small);
  cursor: pointer;
}
html[data-aim-local] .st-view .hall-color-swatches button:is(:hover, .is-active) { border-color: var(--rc-ink); }
html[data-aim-local] .st-view .hall-color-swatches button.is-active { outline: 2px solid var(--rc-signal); outline-offset: 2px; }
html[data-aim-local] .st-view .hall-ball-follow {
  min-block-size: 44px;
  padding: var(--rc-space-2) var(--rc-space-3);
  border: var(--rc-hairline);
}
html[data-aim-local] .st-view .hall-ball-follow.is-active { background: var(--rc-selection-fill); color: var(--rc-selection-text); border-color: var(--rc-signal); }
html[data-aim-local] .st-view .hall-color-field input { min-block-size: 44px; }
html[data-aim-local] .st-view .hall-color-field input[type=color] { flex: none; inline-size: 44px; }
@container settings-editor (max-width: 620px) {
  html[data-aim-local] .st-view.st-rows .hall-crosshair-mods { grid-template-columns: minmax(0, 1fr); }
  html[data-aim-local] .st-view.st-rows .hall-crosshair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-aim-local] .st-view :is(.hall-color-field, .hall-field:has(> .hall-swatches)) { flex-wrap: wrap; }
  html[data-aim-local] .st-view :is(.hall-color-field, .hall-field:has(> .hall-swatches)) .hall-field-text { flex-basis: 100%; }
  html[data-aim-local] .st-view .hall-swatches { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; flex-wrap: wrap; gap: var(--rc-space-2); }
  html[data-aim-local] .st-view .hall-color-field > div { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; flex-wrap: wrap; }
  html[data-aim-local] .st-view .hall-swatches button { inline-size: 32px; block-size: 32px; }
  html[data-aim-local] .st-view.st-rows .st-list .al-number-field {
    grid-template: "label" "hint" "ctl" / minmax(0, 1fr);
    gap: var(--rc-space-2);
  }
  html[data-aim-local] .st-view.st-rows .st-list .al-number-field input[type=range] { flex: 1; inline-size: auto; }
  html[data-aim-local] .st-view.st-rows .st-list .al-number-field input[type=number] { flex: none; inline-size: 62px; block-size: 44px; }
  html[data-aim-local] .st-view .hall-crosshair-grid label span { white-space: normal; overflow: visible; }
}
@container settings-editor (max-width: 420px) {
  html[data-aim-local] .st-view.st-rows .hall-crosshair-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 580px) {
  html[data-aim-local] .st-tele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  html[data-aim-local] .st-view { grid-template: auto auto minmax(0, 1fr) / minmax(0, 1fr); gap: var(--rc-space-4); padding: var(--rc-space-6); }
  html[data-aim-local] .st-view .st-tabbar { gap: var(--rc-space-3); }
  html[data-aim-local] .st-tabbar .st-tabs { flex-direction: row; flex-wrap: wrap; gap: var(--rc-space-2); }
  html[data-aim-local] .st-tabbar .st-save { margin: 0; padding: 0; border: 0; }
  html[data-aim-local] .st-save > span { display: inline; }
}
@container settings (max-width: 1050px) {
  html[data-aim-local] .st-view .st-main:not(.is-wide) {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    gap: var(--rc-space-6);
    grid-auto-rows: max-content;
    align-content: start;
  }
  html[data-aim-local] .st-main:not(.is-wide) > .st-list { overflow: visible; }
  html[data-aim-local] .st-main:not(.is-wide) > .st-side { overflow: visible; }
}
@media (max-width: 700px) {
  html[data-aim-local] .st-view { padding: var(--rc-space-4); }
  html[data-aim-local] .st-view .st-head { grid-template-columns: minmax(0, 1fr); gap: var(--rc-space-4); }
  html[data-aim-local] .st-tabs .st-tab { min-block-size: 44px; padding: var(--rc-space-2) var(--rc-space-3); }
  html[data-aim-local] .st-view .st-list { padding-inline: var(--rc-space-4); }
  html[data-aim-local] .st-side .st-stack { padding: var(--rc-space-4); }
  html[data-aim-local] .st-side .st-code { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "acts" "code" "msg"; }
  html[data-aim-local] .st-side .st-code > div { display: flex; flex-wrap: wrap; gap: var(--rc-space-2); }
}

/* Playtest settings retain the full explanation beside their controls. */
html[data-aim-local] .hall-dialog.is-settings .sd-list .hall-field-text small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
