/* room_settings -- structural rules for the redesigned screen. Tokens only; see design_tokens.yml.
 *
 * The page is a list of rules with their current value showing, not a stack of
 * labelled inputs: a host scans the right-hand column to see how the room is
 * set, and taps a row to change it. Every control here is still the native
 * one -- a <select>, a checkbox, a radio -- wearing the row's clothes.
 */

/* ------------------------------------------------------------------ header */

.rk-settings__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rk-settings__back {
  width: var(--space-7);
  height: var(--space-7);
}

.rk-settings__heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.rk-settings__title {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  text-transform: var(--title-transform);
  line-height: 1.2;
}

.rk-settings__sub {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* A section title may carry a note at its far end ("Guests see these"). The
   title text is the flex item the chrome lets grow, so the note rides inside it
   and is pushed to the opposite edge. */
.rk-settings .rk-panel__chrome-title-text:has(.rk-settings__chrome-meta) {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.rk-settings__chrome-meta {
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--ink-muted);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  text-overflow: ellipsis;
}

.rk-settings__form { gap: var(--space-4); }

.rk-settings__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.rk-settings__fieldset > legend {
  padding: 0;
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------- segmented */

/* One sunken track, one raised option: the same well and shard every other
   control here is made of. Radios underneath, so the group submits exactly
   what the old <select> did. */
.rk-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-sunken);
  border: var(--edge-width) solid var(--edge-inset-top);
  border-radius: var(--edge-radius);
}

.rk-seg__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 42px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--edge-radius-sm);
  color: var(--ink-secondary);
  font-family: var(--control-font);
  font-size: var(--control-size);
  letter-spacing: var(--control-tracking);
  text-align: center;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.rk-seg__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.rk-seg__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.rk-seg__hint {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rk-seg__option:has(.rk-seg__input:checked) {
  background: var(--surface-raised);
  color: var(--ink-primary);
  box-shadow: var(--control-icon-shadow);
}

.rk-seg__option:has(.rk-seg__input:focus-visible) { box-shadow: var(--focus-shadow); }

.rk-seg__option:has(.rk-seg__input:disabled) { cursor: not-allowed; }

.rk-seg__option:has(.rk-seg__input:disabled:not(:checked)) { opacity: 0.55; }

/* -------------------------------------------------------------------- rows */

.rk-settings__rules { display: flex; flex-direction: column; }

.rk-settings__rules > * + *,
.rk-setting-group__body,
.rk-setting-group__body > * + * {
  border-top: var(--edge-width) solid var(--edge-hairline);
}

.rk-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--panel-pad);
  color: var(--ink-primary);
}

.rk-setting--toggle,
.rk-setting--summary { cursor: pointer; }

.rk-setting--summary { list-style: none; }
.rk-setting--summary::-webkit-details-marker { display: none; }

.rk-setting__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rk-setting__name {
  color: var(--ink-primary);
  font-size: var(--text-md);
  line-height: var(--body-line);
}

.rk-setting__help {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: var(--body-line);
}

.rk-setting__help a {
  color: inherit;
  text-decoration: none;
}

.rk-setting__help a:hover,
.rk-setting__help a:focus-visible { color: var(--accent); }

/* The value column: accent, display face, a chevron that says "tap me". */
.rk-setting__value {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  max-width: 60%;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: var(--control-tracking);
  white-space: nowrap;
}

.rk-setting__chevron {
  flex: 0 0 auto;
  transition: transform var(--motion-base) var(--ease);
}

.rk-setting-group[open] > .rk-setting--summary .rk-setting__chevron { transform: rotate(90deg); }

/* The native <select>, stripped to its text so the row's value *is* the
   control. field-sizing lets it hug the chosen option instead of the widest. */
.rk-setting__select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  margin: 0;
  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-1);
  background: none;
  border: 0;
  border-radius: var(--edge-radius-sm);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: right;
  text-overflow: ellipsis;
  field-sizing: content;
  cursor: pointer;
}

.rk-setting__select + .rk-setting__chevron {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

/* The dropdown itself is painted by the browser from these two colours. */
.rk-setting__select option {
  color: var(--ink-primary);
  background: var(--bg-page);
}

.rk-setting__select:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
}

.rk-setting__select:disabled { opacity: 0.7; cursor: not-allowed; }

.rk-setting-group__body { background: var(--surface-row); }

/* ------------------------------------------------------------------ toggle */

.rk-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 48px;
  height: 28px;
  margin: 0;
  background: var(--surface-sunken);
  border: var(--edge-width) solid var(--edge-hairline);
  border-radius: var(--edge-radius-pill);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.rk-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--edge-radius-pill);
  background: var(--ink-muted);
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.rk-toggle:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.rk-toggle:checked::before {
  transform: translateX(20px);
  background: var(--ink-on-accent);
}

.rk-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
}

.rk-toggle:disabled { opacity: 0.6; cursor: not-allowed; }

/* -------------------------------------------------------------------- look */

.rk-setting__swatches {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  margin-right: var(--space-1);
}

.rk-setting__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--edge-radius-pill);
  background: var(--rk-swatch);
  box-shadow: 0 0 0 var(--edge-width) var(--edge-hairline);
}

/* The theme list opens in place under its row, so it loses the floating
   menu's frame and sits as one more band of the panel. */
.rk-settings .rk-skin-picker__menu--inline {
  margin: 0;
  padding: var(--space-2);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------------------------------------------------------------- save bar */

.rk-settings__bottom {
  display: flex;
  flex-direction: column;
}

/* A dark pane of the page itself, floated over the content: the page colour
   at less than full opacity is painted by a layer behind the text so the copy
   stays fully inked, and the blur makes what scrolls beneath read as depth. */
.rk-savebar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--edge-width) solid var(--edge-hairline);
  border-radius: var(--edge-radius);
  box-shadow: var(--edge-shadow-float);
  isolation: isolate;
  -webkit-backdrop-filter: var(--surface-blur);
  backdrop-filter: var(--surface-blur);
}

.rk-savebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--bg-page);
  opacity: 0.85;
}

.rk-savebar[hidden] { display: none; }

.rk-savebar__count {
  min-width: 0;
  color: var(--accent-secondary);
  font-size: var(--text-sm);
}

.rk-savebar__save {
  height: var(--space-7);
  padding: 0 18px;
  gap: 6px;
  border-radius: var(--edge-radius-sm);
  font-size: var(--text-sm);
}