/* Styles for the settings side: the device's settings (master and detail), the account, the
 * invitation and the diagnostics. Shared styles live in app.css; tokens in tokens.css. */

/* ---------- master and detail ---------- */

.settings-layout { display: grid; grid-template-columns: 1fr; gap: var(--l); align-items: start; }
@media (min-width: 721px) {
  .settings-layout { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--xl); }
  .settings-detail-head .back { display: none; }
}
@media (max-width: 720px) {
  .settings-layout.has-section .settings-list { display: none; }
  .settings-layout:not(.has-section) .settings-detail { display: none; }
}
.settings-detail-head { display: flex; align-items: center; gap: var(--s); min-height: 36px; }
.settings-detail-head h2 { font-size: var(--fs-title3); font-weight: 600; }

.rows { display: flex; flex-direction: column; }
.rows .setting-row { padding: 10px 0; }
.row-wrap.chosen .setting-row .title { font-weight: 600; }
.row-wrap.chosen .setting-row .plate { background: var(--accent); color: var(--on-accent); }
.row-wrap.lan-only { opacity: 0.45; }
.setting-row.static { cursor: default; }
.inline-setting { display: flex; flex-direction: column; gap: var(--s); padding: var(--xs) 0 var(--m); }
.inline-setting .setting-row { padding: 6px 0 0; }

.name-row { display: flex; align-items: baseline; gap: var(--m); }
.name-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.name-text .name { font-weight: 500; }
.name-text .system-name { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ---------- words ---------- */

.note { font-size: var(--fs-footnote); color: var(--text-secondary); }
.fine { font-size: var(--fs-caption); color: var(--text-tertiary); }
.bullet { display: flex; gap: var(--s); font-size: var(--fs-footnote); color: var(--text-secondary); }
.bullet > span:first-child { color: var(--text-tertiary); }
.warning-text { color: var(--warning); }
.danger-text { color: var(--danger); }
.session { font-size: var(--fs-subheadline); }
.session.up { color: var(--accent); }
.session.down { color: var(--warning); }
.uptodate { display: flex; align-items: center; gap: var(--s); font-size: var(--fs-subheadline); color: var(--accent); }

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

.segmented {
  display: flex;
  padding: 2px;
  border-radius: var(--r-small);
  background: var(--surface-sunken);
}
.segmented button {
  flex: 1;
  padding: 7px var(--s);
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-secondary);
  font-size: var(--fs-footnote);
  font-weight: 500;
  cursor: pointer;
}
.segmented button.selected { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.segmented button:disabled { cursor: default; opacity: 0.6; }

.toggle-row { display: flex; align-items: center; gap: var(--m); font-size: var(--fs-subheadline); }
.toggle-row.disabled { opacity: 0.6; }
.toggle-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toggle-hint { font-size: var(--fs-caption); color: var(--text-tertiary); }
.switch {
  position: relative;
  width: 46px; height: 28px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease;
}
.switch.on { background: var(--accent); }
.switch:disabled { cursor: default; }
.switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 160ms ease;
}
.switch.on .knob { transform: translateX(18px); }

.stepper-row { display: flex; align-items: center; gap: var(--m); font-size: var(--fs-subheadline); }
.stepper-label { flex: 1; }
.stepper-value { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.stepper { display: inline-flex; border-radius: var(--r-small); background: var(--surface-sunken); overflow: hidden; }
.stepper button {
  width: 36px; height: 30px;
  border: 0; background: none; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.stepper button + button { border-left: 1px solid var(--line); }
.stepper button:disabled { opacity: 0.35; cursor: default; }

.time-row, .select-row { display: flex; align-items: center; justify-content: space-between; gap: var(--m); font-size: var(--fs-subheadline); }
.time-row input[type="time"] {
  border: 0; padding: 6px 10px; border-radius: var(--r-small);
  background: var(--surface-sunken); color: var(--text); font-size: var(--fs-subheadline);
}
.slider-row { display: flex; align-items: center; gap: var(--m); font-size: var(--fs-caption); color: var(--text-tertiary); }
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.slider-value { font-size: var(--fs-title3); font-weight: 500; font-variant-numeric: tabular-nums; }

.inline-field { display: flex; gap: var(--s); align-items: center; }
.inline-field input {
  flex: 1; min-width: 0;
  border: 0; padding: 10px var(--m); border-radius: var(--r-small);
  background: var(--surface-sunken); color: var(--text); font-size: var(--fs-subheadline);
}
.btn.secondary.auto { width: auto; }

/* a list to pick one from */
.pick-row, .radio-row {
  display: flex; align-items: center; gap: var(--m);
  width: 100%; padding: 10px 0;
  border: 0; background: none; color: var(--text);
  text-align: left; font-size: var(--fs-body); cursor: pointer;
}
.pick-row > span:first-child { flex: 1; }
.pick-row:disabled { cursor: default; }
.radio-row .radio {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--text-tertiary);
}
.radio-row.chosen .radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px var(--accent); }
.radio-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.radio-title { font-size: var(--fs-body); }
.radio-sub { font-size: var(--fs-caption); color: var(--text-tertiary); }
.radio-value { font-size: var(--fs-subheadline); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.radio-indent { padding: 0 0 var(--s) 34px; }

.grant-list { display: flex; flex-direction: column; }
.grant-row { display: flex; align-items: center; gap: var(--m); padding: var(--s) 0; }
.grant-row + .grant-row { border-top: 1px solid var(--line); }
.grant-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.grant-email { font-size: var(--fs-subheadline); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.grant-sub { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ---------- the account ---------- */

.device-list { display: flex; flex-direction: column; }
.device-row { display: flex; align-items: center; gap: var(--m); padding: var(--s) 0; color: var(--text); }
.device-row:hover { text-decoration: none; }
.device-row + .device-row { border-top: 1px solid var(--line); }
.device-row .text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.device-row .sub { font-size: var(--fs-caption); color: var(--text-tertiary); font-family: var(--font-mono); }
.device-row .state { font-size: var(--fs-caption); color: var(--text-tertiary); }
.device-row .state.on { color: var(--accent); }

/* ---------- diagnostics ---------- */

.diag-tabs { max-width: 420px; }
.diag-toolbar { display: flex; flex-wrap: wrap; gap: var(--s); align-items: center; }
.diag-toolbar .btn.secondary { width: auto; padding: 8px var(--m); }
.diag-events { display: flex; flex-direction: column; gap: var(--s); }
.diag-event .meta { font-family: var(--font-mono); font-size: var(--fs-caption2); color: var(--text-tertiary); }
.diag-event .text { font-size: var(--fs-caption); word-break: break-word; }
.diag-calls { display: flex; flex-direction: column; }
.diag-call {
  display: flex; align-items: baseline; gap: var(--s);
  width: 100%; padding: var(--s) 0;
  border: 0; background: none; color: var(--text); text-align: left; cursor: pointer;
}
.diag-call + .diag-call, .diag-call-detail + .diag-call { border-top: 1px solid var(--line); }
.diag-call .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.diag-call .path { font-family: var(--font-mono); font-size: var(--fs-caption); word-break: break-all; }
.diag-call .when { font-family: var(--font-mono); font-size: var(--fs-caption2); color: var(--text-tertiary); }
.diag-call .outcome { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.diag-call .status { font-size: var(--fs-caption); font-weight: 500; color: var(--accent); }
.diag-call.failed .status { color: var(--danger); }
.diag-call .ms { font-size: var(--fs-caption2); color: var(--text-tertiary); }
.diag-call-detail { display: flex; flex-direction: column; gap: var(--s); padding: 0 0 var(--m); }
.diag-call-detail .code-block { max-height: 320px; overflow: auto; }
.diag-paths { display: flex; flex-direction: column; }
.diag-path {
  display: flex; align-items: center; gap: var(--s);
  width: 100%; padding: 6px 0;
  border: 0; background: none; color: var(--text); text-align: left; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-caption);
}
.diag-path:disabled { cursor: default; opacity: 0.6; }
.diag-path .path { flex: 1; }
.diag-path .at { font-size: var(--fs-caption2); color: var(--text-tertiary); font-family: var(--font); }
.toast {
  position: fixed; left: 50%; bottom: var(--xl);
  transform: translateX(-50%);
  padding: var(--s) var(--l);
  border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-footnote);
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}