/* Settings: a section rail beside the profile form, with preference panels. */
.settings-main {
  padding-top: 26px;
}
.settings-hero {
  min-height: 150px;
}
.settings-hero h1 {
  font-size: clamp(38px, 3.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.8px;
  margin: 10px 0 0;
}
.settings-hero .intro {
  max-width: 560px;
  font-size: 15px;
  margin-top: 10px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* A sticky element can only stick inside its containing block, which for a grid
   item is its own row. With the sections as siblings the nav sat in row one and
   stopped following as soon as the Profile panel ended, leaving the whole left
   column empty for the rest of the page. Wrapping the sections in one column
   makes this a true two-column, single-row grid, so the nav's containing block
   is the full page height. */
.s-side {
  padding: 8px;
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.s-nav {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 11px;
  background: none;
  color: inherit;
  text-align: left;
  padding: 11px 12px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    padding-left 0.2s ease;
}
.s-nav .icon {
  width: 19px;
  color: #93a6b3;
}
.s-nav b {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.s-nav small {
  display: block;
  font-size: 11px;
  color: #8fa2af;
  margin-top: 2px;
}
.s-nav .chev {
  width: 15px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* The indent is a transform, not padding: changing padding reflows the row, so
   every item the pointer passed while scrolling twitched its contents sideways. */
.s-nav {
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
.s-nav:hover {
  background: #ffffff08;
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .s-nav {
    transition: none;
  }
  .s-nav:hover {
    transform: none;
  }
}
.s-nav:hover .chev {
  opacity: 0.7;
}
.s-nav.active {
  border-color: #ff8a1e5c;
  background: linear-gradient(100deg, #ff6a0026, #ffffff05);
}
.s-nav.active .icon,
.s-nav.active b {
  color: #ff9c3d;
}
.s-nav.active .chev {
  opacity: 1;
}
.panel-sub {
  font-size: 12px;
  color: #9fb0bc;
  margin: 0 0 20px;
  padding-bottom: 14px;
  background-image: var(--rule-ember);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  line-height: 1.5;
}
.avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.big-avatar {
  width: 68px;
  height: 68px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #3d4d58;
  background: radial-gradient(circle at 35% 25%, #1b2a34, #0c1419);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.avatar-row small {
  display: block;
  font-size: 11px;
  color: #8fa2af;
  margin-top: 8px;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.fld {
  display: block;
  min-width: 0;
}
.fld.wide {
  grid-column: 1 / -1;
  position: relative;
}
.fld > span {
  display: block;
  font-size: 12px;
  color: #a9bbc8;
  margin-bottom: 7px;
}
.fld input,
.fld select,
.fld textarea,
.pref-row select,
.toggle-row select {
  width: 100%;
  border: 1px solid #2e3d47;
  border-radius: 10px;
  background: #0a1218c4;
  color: #e6eef4;
  font: inherit;
  font-size: 13px;
  padding: 11px 13px;
  min-width: 0;
  transition: border-color 0.2s ease;
}
.fld textarea {
  resize: vertical;
  min-height: 62px;
  line-height: 1.5;
}
.fld input:hover,
.fld select:hover,
.fld textarea:hover,
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  border-color: #ff8a1e88;
}
.fld select option,
.pref-row select option,
.toggle-row select option {
  background: #0c141a;
}
.counter {
  position: absolute;
  right: 2px;
  bottom: -18px;
  font-size: 11px;
  font-style: normal;
  color: #8496a3;
}
.settings-right {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.pref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.95fr);
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 12px;
  color: #c2cfd9;
}
.pref-row select,
.toggle-row select {
  padding: 9px 11px;
  font-size: 12px;
}
.toggle-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #ffffff10;
}
.toggle-row:first-of-type {
  border-top: 0;
}
.toggle-row > .icon {
  width: 19px;
  color: #ff9c3d;
}
.toggle-row b {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.toggle-row small {
  display: block;
  font-size: 11px;
  color: #8fa2af;
  margin-top: 2px;
}
/* Switch: a checkbox with a painted track, so it stays keyboard operable. */
.switch {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  position: relative;
  flex: none;
}
.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.track {
  display: block;
  width: 44px;
  height: 25px;
  border-radius: 30px;
  background: #2b3841;
  transition: background 0.22s ease;
  position: relative;
}
.track:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #b9c7d1;
  transition:
    transform 0.22s ease,
    background 0.22s ease;
}
.switch input:checked ~ .track {
  background: linear-gradient(120deg, #ff9500, #ff5f00);
}
.switch input:checked ~ .track:after {
  transform: translateX(19px);
  background: #fff;
}
.switch input:focus-visible ~ .track {
  outline: 2px solid #ff9800;
  outline-offset: 3px;
}
.row-btn {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-top: 1px solid #ffffff10;
  background: none;
  color: inherit;
  text-align: left;
  padding: 12px 0;
  transition:
    background 0.2s ease,
    padding-left 0.2s ease;
}
.row-btn:first-of-type {
  border-top: 0;
}
.row-btn > .icon {
  width: 19px;
  color: #ff9c3d;
}
.row-btn b {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.row-btn small {
  display: block;
  font-size: 11px;
  color: #8fa2af;
  margin-top: 2px;
}
.row-btn .chev {
  width: 15px;
  color: #6f8492;
  transition: transform 0.2s ease;
}
.row-btn:hover {
  background: linear-gradient(90deg, #ff8a1e12, transparent 70%);
  padding-left: 8px;
}
.row-btn:hover .chev {
  transform: translateX(3px);
  color: #ff9c3d;
}
.toggle-row.static .tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 30px;
  padding: 5px 11px;
  font-size: 11px;
  color: #4fdca0;
  border: 1px solid #2c5645;
  background: #0c1b15;
}
.toggle-row.static .tag:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.theme-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.theme {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  border: 1px solid #2e3d47;
  border-radius: 13px;
  background: #0a1218a8;
  color: #c2cfd9;
  padding: 15px 8px 13px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}
.theme .icon {
  width: 21px;
  margin-bottom: 4px;
}
.theme b {
  font-size: 12px;
  font-weight: 500;
}
.theme small {
  font-size: 11px;
  color: #8fa2af;
  text-align: center;
  line-height: 1.35;
}
.theme:hover {
  border-color: #ff8a1e66;
  transform: translateY(-2px);
}
.theme.active {
  border-color: #ff8a1e;
  background: #ff6a0018;
  color: #ffbb77;
}
.theme.active:after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(130deg, #ff9500, #ff5f00);
  color: #100c07;
  font-size: 12px;
}
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.settings-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
#save-note {
  margin: 0;
  font-size: 12px;
  color: #4fdca0;
  min-height: 18px;
  text-align: center;
}
.settings-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 20px;
  margin: 0;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    filter 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.settings-actions .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.8;
}
/* Same geometry as .primary and Investigation's .secondary: one secondary
   tier across the site rather than a pill here and a rect there. */
.ghost {
  border: 1px solid #33454f;
  border-radius: var(--r-md);
  background: #0a141aad;
  color: #d3dee6;
  font-size: 13px;
  min-height: 40px;
  padding: 0 16px;
  transition:
    border-color 0.2s ease,
    filter 0.2s ease;
}
.ghost:hover {
  border-color: #ff8a1e88;
  filter: brightness(1.1);
}
.settings-actions .ghost {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  color: #c5d2dc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.settings-actions .ghost:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  color: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.settings-actions .primary {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, #ff8a00, #ff4500);
  color: #ffffff;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 16px rgba(255, 69, 0, 0.35);
}
.settings-actions .primary:hover {
  background: linear-gradient(135deg, #ffa020, #ff5500);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 20px rgba(255, 69, 0, 0.5);
  transform: translateY(-1px);
}
.settings-actions button:active {
  transform: translateY(0);
}
.canvas {
  background: #04090d;
}
footer {
  margin-top: 18px;
  padding-top: 0;
}
@media (max-width: 1350px) {
  .settings-grid {
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr);
  }
  .settings-right {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 950px) {
  .settings-grid,
  .settings-right {
    grid-template-columns: minmax(0, 1fr);
  }
  .s-side {
    position: static;
  }
  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .field-grid,
  .theme-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-actions {
    flex-wrap: wrap;
  }
}

/* Fields the backend owns ------------------------------------------------- */

/* Email and role come from the signed-in account and cannot be changed here.
   Left looking like every other input they read as broken: you can click in,
   the caret appears, and nothing you type sticks. These say "not yours to
   edit" before you try. */
/* palette.css paints every field with --input-gradient from
   `.workspace-page :is(.fld input, ...)`, so this has to match that weight to
   win, otherwise a read-only field is indistinguishable from an editable one. */
.workspace-page .fld input[readonly] {
  background: #070d1273;
  border-color: #26313a;
  color: #9db0be;
  cursor: not-allowed;
}

.workspace-page .fld input[readonly]:hover,
.workspace-page .fld input[readonly]:focus {
  border-color: #26313a;
  box-shadow: none;
  transform: none;
}

.settings-page .select-trigger[disabled] {
  cursor: not-allowed;
  background: #0a12185c;
  color: #b6c5d1;
}

.settings-page .select-trigger[disabled] .select-caret {
  display: none;
}

/* One line under the pair, rather than a badge on each. */
.field-managed-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  font-size: 11px;
  color: #8fa2af;
}

.field-managed-note .icon {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  margin-right: 5px;
  opacity: 0.7;
}