/* Waypoint settings stylesheet ownership. Loaded in the documented cascade. */

.settings-modal {
  width: min(980px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
}
.settings-modal .terminal-control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {

  .settings-modal .terminal-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {

  .settings-modal .terminal-control-grid { grid-template-columns: 1fr; }
}
.settings-modal {
  width: min(980px, calc(100% - 32px));
  max-height: min(92vh, 900px);
  overflow: auto;
}
.settings-modal .terminal-control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {

  .settings-modal .terminal-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {

  .settings-modal .terminal-control-grid { grid-template-columns: 1fr; }
}

#settingsModal .settings-modal {
  width: min(780px, calc(100vw - 36px));
  max-height: min(84vh, 820px);
  overflow: auto;
}

#settingsModal .terminal-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

#settingsModal .settings-uploads {
  margin-top: 6px;
}

@media (max-width: 720px) {

  #settingsModal .terminal-control-grid { grid-template-columns: 1fr; }
}
.search-engine-badge {
  flex: 0 0 38px;
  height: 38px;
  margin-left: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: rgba(255,255,255,.045);
  font: 950 18px var(--sans);
}
.settings-modal {
  width: min(900px, calc(100vw - 40px));
}
.search-engine-badge {
  color: var(--waypoint-green);
  font-size: 22px;
}


.settings-v11 { width: min(980px, calc(100vw - 36px)) !important; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.settings-tab { border-radius: 12px; padding: 9px 11px; color: var(--muted); background: rgba(0,0,0,.18); }
.settings-tab.active { color: var(--text); border-color: color-mix(in srgb, var(--waypoint-green, var(--accent)), transparent 52%); background: color-mix(in srgb, var(--waypoint-green, var(--accent)), transparent 88%); }
.settings-page { display: none; }
.settings-page.active { display: block; }
.custom-css-label { margin-top: 12px; }
.search-engine-badge { flex: 0 0 38px; height: 38px; margin-left: 12px; display: grid; place-items: center; border-radius: 50%; color: var(--waypoint-green, var(--accent)); background: rgba(255,255,255,.045); font: 950 18px var(--sans); }
@media (max-width: 640px) {
 .settings-tabs { gap: 6px; } .settings-tab { padding: 8px 9px; }
}


#settingsModal {
  align-items: unset !important;
  justify-content: unset !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
#settingsModal .settings-modal {
  position: fixed !important;
  left: var(--settings-left, 50%) !important;
  top: var(--settings-top, 6vh) !important;
  transform: translateX(-50%);
  pointer-events: auto !important;
}
#settingsModalTitle {
  cursor: move;
  user-select: none;
}
@media (max-width: 700px) {

  #settingsModal .settings-modal {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    top: 12px !important;
    transform: none !important;
  }
}
.color-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
}
.color-control input[type="color"] {
  width: 42px !important;
  height: 34px !important;
  padding: 2px !important;
  border-radius: 10px !important;
}
.color-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.section,
.modal-content,
.settings-modal,
.terminal-window,
.search,
.hero-image-card,
.mini-clock,
.weather-widget {
  background-color: var(--surface) !important;
}
.link:hover,
body.bookmark-list-layout .link:hover,
body.bookmark-grid-layout .link:hover,
.settings-tab.active,
button:hover,
.upload-btn:hover {
  background-color: var(--accent-hover) !important;
  border-color: color-mix(in srgb, var(--accent), transparent 45%) !important;
}
.search:focus-within,
.link:hover,
.section:hover,
.settings-tab.active {
  border-color: color-mix(in srgb, var(--accent), transparent 45%) !important;
}
.weather-place,
.mini-clock-date,
.settings-tab,
label {
  color: var(--custom-muted-text) !important;
}

#settingsModal .settings-modal,
#terminalModal .terminal-window,
.modal-content {
  background-color: color-mix(in srgb, var(--surface-strong) 92%, transparent) !important;
}

/* v1.5.0-dev1: Hero Evolution foundation */
.settings-context-note {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 70%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft), transparent 42%);
  color: color-mix(in srgb, var(--text), var(--muted) 18%);
  font: 750 12px/1.45 var(--sans);
}

/* Native Settings menus need an explicit readable popup palette. */
#settingsModal select {
  color-scheme: dark;
  color: var(--text) !important;
  background-color: color-mix(in srgb, var(--surface-strong), black 8%) !important;
}
#settingsModal select option,
#settingsModal select optgroup {
  color: var(--text);
  background-color: #0b111c;
}
#settingsModal select option:checked {
  color: #07110d;
  background-color: var(--accent);
}
.search,
input,
select,
textarea,
.settings-tab,
.workspace-summary-card {
  background-color: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  border-color: color-mix(in srgb, var(--card-border) 76%, transparent) !important;
}
.settings-tab:hover,
.settings-tab.active,
.ghost-btn:hover,
.section-action:hover,
.upload-btn:hover {
  background-color: color-mix(in srgb, var(--surface-hover) 80%, var(--accent) 10%) !important;
}
.settings-tab,
label { color: var(--text-secondary) !important; }
#settingsModal select option,
#settingsModal select optgroup {
  color: var(--text);
  background-color: var(--surface-elevated);
}
#settingsModal select option:checked {
  color: var(--bg);
  background-color: var(--accent-bright);
}
html[data-theme-scheme="light"] #settingsModal select {
  color-scheme: light;
}
html[data-theme-scheme="light"] #settingsModal select option,
html[data-theme-scheme="light"] #settingsModal select optgroup {
  color: var(--text);
  background-color: var(--surface-elevated);
}