/* =========================================================================
   Settings Panel — Variation B (Polished)
   Source: design_handoff_oceanbuilders/04_settings_panel/

   Loaded AFTER sc-redesign.css so its rules win the cascade. The legacy
   .sc-settings-panel / .sc-panel-* rules in sc-redesign.css that this
   replaces have been left in place — `!important` flags on a few
   layout properties below override them where needed. Eventually those
   legacy rules can be deleted; for now they're a fallback.

   Every rule here resolves color/spacing/type from ob-tokens.css; no
   one-off color values, no hand-tuned font sizes outside the token
   scale (with one or two exceptions called out in comments).
   ========================================================================= */

/* ── Panel shell ─────────────────────────────────────────────────── */

.sc-panel-overlay {
  background: rgba(15, 23, 42, 0.40) !important;
  backdrop-filter: blur(2px);
  z-index: 200 !important;
}

.sc-settings-panel {
  top: 0 !important;
  height: 100vh !important;
  width: var(--ob-sheet-w, 460px) !important;
  background: var(--neutral-0, #fff) !important;
  border-left: none !important;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18) !important;
  z-index: 201 !important;
  font-family: var(--font-sans);
  color: var(--ob-text);
}

/* ── Header (eyebrow + Settings title + close) ───────────────────── */

.sc-settings-panel .sc-panel-header {
  padding: 20px 22px 16px !important;
  height: auto !important;
  border-bottom: 1px solid var(--ob-border) !important;
  background: var(--neutral-0, #fff);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sc-settings-panel .sc-panel-header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-settings-panel .sc-panel-header-titles .sc-modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ob-muted);
  text-transform: uppercase;
}

.sc-settings-panel .sc-panel-header-titles > span:last-child {
  font-family: var(--ob-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ob-navy, #0E2D44);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sc-settings-panel .sc-modal-close {
  background: transparent;
  border: none;
  color: var(--ob-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-modal-close:hover {
  background: var(--neutral-100);
  color: var(--ob-text);
}

/* ── Body container ──────────────────────────────────────────────── */

.sc-settings-panel .sc-panel-body {
  padding: 0 !important;
  background: var(--neutral-0, #fff);
  overflow-y: auto;
}

/* ── Section (accordion) ─────────────────────────────────────────── */
/* Each section is a separator-divided block with a clickable header
   that toggles its `.collapsed` class. The header is styled like a
   list row — icon, label, +/- indicator. When expanded, an accent
   bar appears on the left edge and the label goes 600 + navy. */

.sc-settings-panel .sc-panel-section {
  border-bottom: 1px solid var(--ob-border) !important;
  position: relative;
}
.sc-settings-panel .sc-panel-section:last-child { border-bottom: none !important; }

/* Left accent bar — visible only when the section is expanded. */
.sc-settings-panel .sc-panel-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 3px;
  height: 30px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background var(--dur-1, 150ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-panel-section:not(.collapsed)::before {
  background: var(--ob-action, var(--ob-blue));
}

.sc-settings-panel .sc-panel-section-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 22px !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: var(--ob-text) !important;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-panel-section-header:hover {
  background: var(--ob-bg, var(--neutral-50));
}
.sc-settings-panel .sc-panel-section:not(.collapsed) .sc-panel-section-header {
  font-weight: 600 !important;
  color: var(--ob-navy, #0E2D44) !important;
}

/* Header structure: icon, label, +/− indicator */
.sc-settings-panel .sc-panel-section-header > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.sc-settings-panel .sc-panel-icon {
  width: 18px !important;
  height: 18px !important;
  vertical-align: 0 !important;
  margin-right: 0 !important;
  stroke: var(--ob-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  transition: stroke var(--dur-1, 150ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-panel-section:not(.collapsed) .sc-panel-icon {
  stroke: var(--ob-action, var(--ob-blue));
}

/* +/− indicator: two crossed bars; the vertical bar collapses
   (scaleY 0) when the section is expanded, leaving a minus. The old
   ▾ chevron is hidden since this replaces it. */
.sc-settings-panel .sc-panel-toggle {
  position: relative;
  width: 14px;
  height: 14px;
  color: var(--ob-muted);
  opacity: 0.5;
  font-size: 0;        /* hide the original ▾ glyph */
  flex-shrink: 0;
}
.sc-settings-panel .sc-panel-section:not(.collapsed) .sc-panel-toggle {
  color: var(--ob-action, var(--ob-blue));
  opacity: 1;
}
.sc-settings-panel .sc-panel-toggle::before,
.sc-settings-panel .sc-panel-toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.sc-settings-panel .sc-panel-toggle::before {
  /* horizontal bar — always visible */
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}
.sc-settings-panel .sc-panel-toggle::after {
  /* vertical bar — collapses when expanded */
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  transform: translateX(-50%) scaleY(1);
  transition: transform 180ms ease;
}
.sc-settings-panel .sc-panel-section:not(.collapsed) .sc-panel-toggle::after {
  transform: translateX(-50%) scaleY(0);
}

/* Section content: padding mirrors the header so labels and indicator
   line up vertically. The bottom padding gives a little breathing room
   before the divider. */
.sc-settings-panel .sc-panel-section-content {
  padding: 0 22px 22px !important;
  margin-top: -2px;
}

/* Hint helper, used by sub-groups + a few inline notes. */
.sc-settings-panel .sc-settings-hint {
  font-size: 12px;
  color: var(--ob-muted);
  line-height: 1.45;
}

/* ── Account: identity card ──────────────────────────────────────── */

.sc-settings-panel .sc-identity-card {
  border: 1px solid var(--ob-border);
  border-radius: 12px;
  padding: 16px;
  background: var(--ob-bg, var(--neutral-50));
  margin-bottom: 14px;
}
.sc-settings-panel .sc-identity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

/* Override the legacy round avatar size — the card variant uses 56px
   to match the polished design. The crop-modal avatar stays larger
   per its own rule. */
.sc-settings-panel .sc-identity-card .sc-account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ob-sand, #E9DCC4);
  color: var(--ob-deep, #0E2D44);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ob-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(14, 45, 68, 0.08);
  user-select: none;
}

.sc-settings-panel .sc-identity-meta {
  flex: 1;
  min-width: 0;
}
.sc-settings-panel .sc-identity-name {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sc-settings-panel .sc-identity-name:hover .sc-identity-pencil {
  opacity: 1;
}
.sc-settings-panel .sc-identity-pencil {
  width: 14px;
  height: 14px;
  color: var(--ob-muted);
  opacity: 0.6;
  transition: opacity var(--dur-1, 120ms) var(--ease-out, ease-out);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Inline edit input (visible while editing the name). */
.sc-settings-panel .sc-identity-name-input {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ob-text);
  background: var(--neutral-0, #fff);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-r-sm, 6px);
  padding: 6px 10px;
  outline: none;
}
.sc-settings-panel .sc-identity-name-input:focus {
  border-color: var(--ob-blue);
  box-shadow: var(--sh-focus);
}

.sc-settings-panel .sc-identity-email {
  font-size: 12px;
  color: var(--ob-muted);
  margin-top: 3px;
  word-break: break-all;
}

.sc-settings-panel .sc-identity-actions {
  display: flex;
  gap: 8px;
}
.sc-settings-panel .sc-identity-actions .sc-btn-secondary {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--ob-border);
  background: var(--neutral-0, #fff);
  color: var(--ob-text);
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              border-color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-identity-actions .sc-btn-secondary:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-200);
}

/* Time zone row — a single label/value pair separated from the
   identity card by a hairline. */
.sc-settings-panel .sc-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--ob-border);
  margin-bottom: 14px;
}
.sc-settings-panel .sc-info-row:last-of-type { border-bottom: 1px solid var(--ob-border); }
.sc-settings-panel .sc-info-label {
  color: var(--ob-muted);
  font-weight: 500;
}
.sc-settings-panel .sc-info-value {
  color: var(--ob-text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

/* Sign out — refined right-aligned text button (red), no border by
   default; on hover gets a soft red tint to confirm the destructive
   intent without screaming. */
.sc-settings-panel .sc-signout-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
.sc-settings-panel .sc-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #DC2626;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-signout-btn:hover {
  background: #FEF2F2;
  color: #B91C1C;
}
.sc-settings-panel .sc-signout-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* ── Preferences: subgroups ──────────────────────────────────────── */

.sc-settings-panel .sc-subgroup {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ob-border);
  margin-bottom: 14px;
}
.sc-settings-panel .sc-subgroup--last,
.sc-settings-panel .sc-subgroup:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.sc-settings-panel .sc-subgroup-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ob-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Pref row: title + helper on the left, control on the right. */
.sc-settings-panel .sc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}
.sc-settings-panel .sc-pref-row--divider {
  border-top: 1px solid var(--ob-border);
}
.sc-settings-panel .sc-pref-text { flex: 1; min-width: 0; }
.sc-settings-panel .sc-pref-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ob-text);
}
.sc-settings-panel .sc-pref-help {
  font-size: 12px;
  color: var(--ob-muted);
  margin-top: 2px;
  line-height: 1.45;
}
.sc-settings-panel .sc-pref-num {
  width: 64px;
  height: 36px;
  text-align: center;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--ob-border);
  border-radius: 8px;
  background: var(--neutral-0, #fff);
  color: var(--ob-text);
  outline: none;
  flex-shrink: 0;
}
.sc-settings-panel .sc-pref-num:focus {
  border-color: var(--ob-blue);
  box-shadow: var(--sh-focus);
}

/* Custom toggle switch. Wraps a hidden checkbox; the rail + thumb are
   pure CSS so existing change-event listeners keep firing. */
.sc-settings-panel .sc-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sc-settings-panel .sc-toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sc-settings-panel .sc-toggle-rail {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  cursor: pointer;
  transition: background var(--dur-1, 150ms) var(--ease-out, ease-out),
              border-color var(--dur-1, 150ms) var(--ease-out, ease-out);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.sc-settings-panel .sc-toggle-rail::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.06);
  transition: left 180ms ease, box-shadow var(--dur-1, 150ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-toggle-switch input[type="checkbox"]:checked + .sc-toggle-rail {
  background: var(--ob-action, var(--ob-blue));
  border-color: var(--ob-accent-dark, var(--ob-blue-600));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.sc-settings-panel .sc-toggle-switch input[type="checkbox"]:checked + .sc-toggle-rail::after {
  left: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 0 0 1px rgba(14, 45, 68, 0.1);
}
.sc-settings-panel .sc-toggle-switch input[type="checkbox"]:focus-visible + .sc-toggle-rail {
  box-shadow: var(--sh-focus);
}

/* Polished radio rows. Outer ring always visible; inner dot scales 0→1
   on check. The full row is the click target. Note: the existing
   markup uses <input type="radio"> + <span>; we hide the native input
   visually, render a custom dot via :checked + .sc-radio-dot. */
.sc-settings-panel .sc-radio-row {
  width: 100%;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
}
.sc-settings-panel .sc-radio-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 18px;
  height: 18px;
}
.sc-settings-panel .sc-radio-row .sc-radio-dot {
  /* sc-redesign.css has `.sc-radio-row > span { flex: 1 1 auto !important }`
     that catches every span child — including this dot — and stretches it
     into the full-width oval the user reported. We pin it back to a
     fixed 18×18 box with !important on flex/width/height to outrank
     that rule. The .sc-radio-text span keeps the original flex:1
     behavior because we don't override it. */
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  position: relative;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color var(--dur-1, 150ms) var(--ease-out, ease-out);
  box-sizing: border-box;
}
.sc-settings-panel .sc-radio-row .sc-radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ob-action, var(--ob-blue));
  transform: scale(0);
  transition: transform 150ms ease;
}
.sc-settings-panel .sc-radio-row input[type="radio"]:checked ~ .sc-radio-dot {
  border-color: var(--ob-action, var(--ob-blue));
}
.sc-settings-panel .sc-radio-row input[type="radio"]:checked ~ .sc-radio-dot::after {
  transform: scale(1);
}
.sc-settings-panel .sc-radio-row .sc-radio-text {
  flex: 1;
  min-width: 0;
}
.sc-settings-panel .sc-radio-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ob-text);
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.sc-settings-panel .sc-radio-row .sc-settings-hint {
  display: block;
  margin: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Maintenance button — full-width amber-tinted action. Destructive
   but reversible-ish, so amber not red. */
.sc-settings-panel .sc-maintenance-btn {
  width: 100%;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-maintenance-btn:hover {
  background: #FEF3C7;
}

/* ── Google Integration ──────────────────────────────────────────── */

.sc-settings-panel .sc-google-card {
  border: 1px solid var(--ob-border);
  border-radius: 12px;
  padding: 14px;
  background: var(--ob-bg, var(--neutral-50));
  margin-bottom: 12px;
}
.sc-settings-panel .sc-google-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sc-settings-panel .sc-google-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ob-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #4285F4;
  flex-shrink: 0;
}
.sc-settings-panel .sc-google-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ob-text);
}
.sc-settings-panel .sc-google-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  /* Default = checking. Real states get the modifier classes below. */
  background: var(--neutral-100);
  color: var(--ob-muted);
}
.sc-settings-panel .sc-google-pill--connected {
  background: #DCFCE7;
  color: #15803d;
}
.sc-settings-panel .sc-google-pill--disconnected {
  background: var(--neutral-100);
  color: var(--ob-muted);
}
.sc-settings-panel .sc-google-pill svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.sc-settings-panel .sc-google-help {
  font-size: 12px;
  color: var(--ob-muted);
  line-height: 1.55;
}
.sc-settings-panel .sc-google-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sc-settings-panel .sc-google-actions > button { flex: 0 1 auto; }
.sc-settings-panel .sc-google-actions > button:first-child { flex: 1 1 auto; }

/* ── Projects list (cards) ───────────────────────────────────────── */

.sc-settings-panel #panel-projects-list {
  display: grid;
  row-gap: 8px;
  margin-bottom: 12px;
}
.sc-settings-panel .sc-panel-project-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ob-border);
  border-radius: 10px;
  background: #fff;
}
.sc-settings-panel .sc-panel-project-bar {
  width: 8px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sc-settings-panel .sc-panel-project-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ob-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-settings-panel .sc-panel-project-count {
  font-size: 11px;
  color: var(--ob-muted);
  flex-shrink: 0;
}
.sc-settings-panel .sc-panel-manage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ob-action, var(--ob-blue));
  text-decoration: none;
}
.sc-settings-panel .sc-panel-manage-link:hover { text-decoration: underline; }

/* ── Scheduling Windows (cards with inline expand) ───────────────── */

.sc-settings-panel #windows-list {
  display: grid;
  row-gap: 8px;
  margin-bottom: 12px;
}
.sc-settings-panel .sc-win-card {
  border: 1px solid var(--ob-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur-1, 150ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-win-card.is-editing {
  border-color: var(--ob-action, var(--ob-blue));
}
.sc-settings-panel .sc-win-card-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.sc-settings-panel .sc-win-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sc-settings-panel .sc-win-meta {
  flex: 1;
  min-width: 0;
}
.sc-settings-panel .sc-win-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ob-text);
}
.sc-settings-panel .sc-win-default {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ob-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sc-settings-panel .sc-win-summary {
  font-size: 11px;
  color: var(--ob-muted);
  margin-top: 2px;
}
.sc-settings-panel .sc-win-chevron {
  color: var(--ob-muted);
  font-size: 14px;
  transition: transform var(--dur-1, 150ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-win-card.is-editing .sc-win-chevron {
  transform: rotate(90deg);
}

/* "+ Add window" dashed-border button */
.sc-settings-panel .sc-win-add-btn {
  width: 100%;
  border: 1px dashed var(--ob-border);
  background: transparent;
  padding: 10px;
  border-radius: 10px;
  color: var(--ob-muted);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-1, 120ms) var(--ease-out, ease-out),
              color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.sc-settings-panel .sc-win-add-btn:hover {
  border-color: var(--ob-action, var(--ob-blue));
  color: var(--ob-action, var(--ob-blue));
}

/* The existing #win-form uses a plain panel layout; promote it to a
   bordered card consistent with the new design. The form is shown
   either inline under a card (when editing) or below the list (when
   adding) — same selectors, same JS. */
.sc-settings-panel .sc-win-form {
  border: 1px solid var(--ob-action, var(--ob-blue));
  border-radius: 10px;
  background: var(--ob-bg, var(--neutral-50));
  padding: 12px;
  margin-top: 8px;
}
.sc-settings-panel .sc-win-form-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ob-muted);
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* Day picker pills inside the windows form. */
.sc-settings-panel .sc-day-picker {
  display: flex;
  gap: 4px;
}
.sc-settings-panel .sc-day-picker label {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--ob-border);
  border-radius: 6px;
  padding: 8px 0;
  cursor: pointer;
  background: #fff;
  color: var(--ob-muted);
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              color var(--dur-1, 120ms) var(--ease-out, ease-out),
              border-color var(--dur-1, 120ms) var(--ease-out, ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.sc-settings-panel .sc-day-picker label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sc-settings-panel .sc-day-picker label:has(input:checked) {
  background: var(--ob-action, var(--ob-blue));
  color: #fff;
  border-color: var(--ob-action, var(--ob-blue));
}

/* ════════════════════════════════════════════════════════════════════
   Mobile (≤ 768px) — full-screen takeover
   ────────────────────────────────────────────────────────────────────
   Desktop renders the settings panel as a 460px right-side sheet. On
   a phone (375px), that sheet would overflow the viewport. Override
   here to a full-width takeover — the panel becomes the whole screen
   while open, with its own header + close button. Sits above the
   mobile top bar (z-index 201 > 200) so the user gets a clean
   uninterrupted settings UI.

   Specificity bump (and !important) needed because the desktop rules
   above are themselves !important to win over the legacy
   sc-redesign.css block.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sc-settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: none !important;
    /* iOS Safari's 100vh doesn't shrink to account for the dynamic
       URL bar / tab bar at the bottom — content gets clipped behind
       it. 100dvh (dynamic viewport) IS aware of the chrome. Browsers
       that don't support dvh fall back to the desktop 100vh. */
    height: 100dvh !important;
  }
  /* Bottom breathing room inside the scrollable body so the last
     section's controls (e.g. + Add Window in Scheduling Windows)
     aren't tucked under the Safari URL bar. The safe-area inset
     covers the home-indicator when the URL bar is collapsed. */
  .sc-settings-panel .sc-panel-body {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Header: shrink the top padding (the safe-area would otherwise
     push it down too far) and bump the close button to a phone-sized
     tap target (≥ 40×40). Eyebrow + title scale unchanged. */
  .sc-settings-panel .sc-panel-header {
    padding: calc(env(safe-area-inset-top, 0) + 14px) 16px 14px !important;
  }
  .sc-settings-panel .sc-modal-close {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Body padding tightens to give the content the screen width. */
  .sc-settings-panel .sc-panel-section-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .sc-settings-panel .sc-panel-section-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Identity card: keep avatar + name on one row; the action buttons
     row stays a 1:1 split, just on smaller buttons. */
  .sc-settings-panel .sc-identity-actions .sc-btn-secondary {
    padding: 10px 8px;
    font-size: 12.5px;
  }

  /* Info row stacks label / value vertically when the row would
     otherwise crowd. Time-zone strings can be long ("America/
     Indiana/Indianapolis") and that single horizontal row would
     truncate the value with an ellipsis on a 375px viewport. */
  .sc-settings-panel .sc-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 0;
  }
  .sc-settings-panel .sc-info-value {
    text-align: left;
  }
}