/* ============================================================
   v0.4.67.18: consolidated Settings menu (gear + popover).
   Tucks the theme + sound toggles, the language picker and the
   Google Calendar connection behind one gear to declutter the
   topbar. Everything is token-driven so it reads correctly in
   light AND dark (the moved calendar block used to be dark-only).
   Loaded before 24-theme-dark.css so the dark token overrides win.
   ============================================================ */
.settings-menu { position: relative; }

/* Gear trigger - matches the .theme-toggle / .sound-toggle pill chrome so it sits
   as one of the matched topbar controls. */
.settings-menu > summary.settings-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--chronos-card-bg);
  border: 1px solid var(--chronos-outline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.settings-menu > summary.settings-trigger::-webkit-details-marker { display: none; }
.settings-menu > summary.settings-trigger:hover {
  border-color: var(--chronos-violet);
  transform: translateY(-1px);
}
.settings-trigger .material-icons { font-size: 18px; color: var(--chronos-fg-primary); }
.settings-menu[open] > summary.settings-trigger { border-color: var(--chronos-violet); }
.settings-menu[open] > summary.settings-trigger .material-icons { color: var(--chronos-violet); }

.settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 264px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border-radius: 14px;
  background: var(--chronos-card-bg);
  border: 1px solid var(--chronos-outline);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-section {
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--chronos-chip-bg);
}
.settings-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronos-fg-muted);
  margin-bottom: 9px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.settings-row + .settings-row { margin-top: 9px; }
.settings-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--chronos-fg-primary);
}

/* ---- v0.5.1: subscription + credit wallet block ------------------------------
   Plan chip comes from the global .tier-badge classes (11-profile-modal.css);
   Plus/Pro are self-coloured gradients that read on any surface, but the FREE
   chip was inked for the dark profile card - re-ink it with panel tokens. */
.settings-sub .tier-badge { margin-left: 0; }
.settings-sub .tier-badge-free {
  background: var(--chronos-chip-bg);
  color: var(--chronos-fg-muted);
  border: 1px solid var(--chronos-outline);
}
.settings-sub-status {
  font-size: 12px;
  color: var(--chronos-fg-muted);
  margin: -2px 0 9px;
}
.settings-sub-credits {
  font-size: 13px;
  font-weight: 800;
  color: var(--chronos-fg-primary);
}
.settings-sub-manage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--chronos-violet);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s;
}
.settings-sub-manage:hover { filter: brightness(1.1); }

/* ---- Google Calendar block (token-driven re-skin of the old dark-only one) ---- */
.settings-cal-status {
  font-size: 12.5px;
  color: var(--chronos-fg-muted);
  margin-bottom: 9px;
  line-height: 1.35;
}
.settings-cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.settings-cal-connect {
  background: var(--chronos-violet);
  border: 1px solid transparent;
  color: #fff;
}
.settings-cal-connect:hover { filter: brightness(1.08); }
.settings-cal-disconnect {
  background: transparent;
  border: 1px solid var(--chronos-outline);
  color: var(--chronos-fg-primary);
}
.settings-cal-disconnect:hover { border-color: var(--chronos-violet); }
.settings-cal-locked {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--chronos-fg-muted);
}
.settings-cal-lock { font-size: 14px; }
.settings-cal-upgrade {
  color: var(--chronos-violet);
  font-weight: 800;
  text-decoration: none;
}
.settings-cal-upgrade:hover { text-decoration: underline; }

/* ---- Embedded language picker ----
   Flatten its dropdown into the panel flow (static, scrollable) and re-token its
   colours so it reads in both themes (the base menu hardcodes a white bg). */
.settings-section-lang .lang-picker { width: 100%; }
.settings-section-lang .lang-picker > summary {
  width: 100%;
  justify-content: space-between;
  height: 34px;
  border-color: var(--chronos-outline);
  color: var(--chronos-fg-primary);
  background: var(--chronos-card-bg);
}
.settings-section-lang .lang-picker > summary:hover {
  border-color: rgba(124, 58, 237, 0.45);
}
.settings-section-lang .lang-picker-menu {
  position: static;
  min-width: 0;
  margin-top: 6px;
  padding: 4px;
  max-height: 208px;
  overflow-y: auto;
  box-shadow: none;
  border-color: var(--chronos-outline);
  background: var(--chronos-card-bg);
}
.settings-section-lang .lang-picker-item { color: var(--chronos-fg-primary); }

@media (max-width: 720px) {
  /* v0.5.1.1: match the compacted one-row topbar (32px icon chips). */
  .settings-menu > summary.settings-trigger { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
  .settings-panel { width: 240px; }
}