/* ══ Appearance editor ═══════════════════════════════════════════════════
   The colour editor opened from the account menu, the drawer, the sign-in
   pill and the quick switcher (appearance.js). Built on the same tokens it
   edits, so the panel restyles itself live along with the page behind it.
   A right-hand drawer on wide screens, so the page stays in view; a bottom
   sheet on phones. */

.ap {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  font-family: var(--font-ui);
  color: var(--text-primary);
}
.ap__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ap__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  transform: translateX(24px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}
[dir="rtl"] .ap__panel { transform: translateX(-24px); }
.ap.is-open .ap__scrim { opacity: 1; }
.ap.is-open .ap__panel { transform: none; opacity: 1; }

@media (max-width: 640px) {
  .ap__panel {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 92dvh;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    transform: translateY(32px);
  }
  [dir="rtl"] .ap__panel { transform: translateY(32px); }
  .ap__panel::before {
    content: "";
    align-self: center;
    width: 36px;
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--line-strong);
    flex-shrink: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap__scrim, .ap__panel { transition: none; }
}
/* Use the same live viewport bounds as the floating controls. */
html.ios-standalone .ap {
  top: var(--app-top, 0px);
  bottom: auto;
  height: var(--app-h, 100dvh);
}
html.ios-standalone .ap__panel { max-height: 100%; }
@media (max-width: 640px) {
  /* Leave breathing room below the iPhone status bar and camera cutout. */
  html.ios-standalone .ap__panel {
    max-height: min(88dvh, calc(100% - env(safe-area-inset-top, 0px) - 20px));
  }
}

/* ── Header / footer ─────────────────────────────────────────────────── */
.ap__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line-subtle);
  flex-shrink: 0;
}
.ap__head-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.ap__head-icon svg { width: 20px; height: 20px; }
.ap__head-text { flex: 1; min-width: 0; }
.ap__head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ap__head p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); }

.ap__icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ap__icon-btn:hover { background: var(--fill-hover); color: var(--text-primary); }
.ap__icon-btn svg { width: 18px; height: 18px; }
.ap__icon-btn[hidden] { display: none; }

.ap__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 8px;
}

.ap__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-subtle);
  background: var(--surface-2);
  flex-shrink: 0;
}
.ap__foot-gap { flex: 1; }
.ap__foot .btn { min-height: 38px; }
.ap__ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 8px;
  margin-inline-start: -8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.ap__ghost:hover { color: var(--text-primary); background: var(--fill-hover); }
.ap__ghost svg { width: 15px; height: 15px; }

/* ── Sections ────────────────────────────────────────────────────────── */
.ap__section { margin-top: 22px; }
.ap__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ap__section-head h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ap__hint { margin: 8px 0 12px; font-size: 13px; color: var(--text-muted); }

.ap__chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.ap__chip-btn:hover { border-color: var(--accent-line); color: var(--text-primary); background: var(--accent-glow); }
.ap__chip-btn svg { width: 14px; height: 14px; }

/* ── Mode switch ─────────────────────────────────────────────────────── */
.ap__mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--fill-subtle);
}
.ap__mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.ap__mode button svg { width: 16px; height: 16px; }
.ap__mode button:hover { color: var(--text-primary); }
.ap__mode button.is-on {
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--line);
}

/* ── Theme cards ─────────────────────────────────────────────────────── */
.ap__themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ap-theme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  text-align: start;
  cursor: pointer;
  color: var(--text-secondary);
}
.ap-theme__art {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 75%;   /* 4:3 without aspect-ratio, which iOS Safari collapses here */
  border-radius: 10px;
  overflow: hidden;
  background: var(--p-bg);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ap-theme:hover .ap-theme__art { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.ap-theme.is-on .ap-theme__art { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-soft); }
.ap-theme__rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 18%;
  background: var(--p-card);
  border-inline-end: 1px solid var(--p-line);
}
.ap-theme__card {
  position: absolute;
  inset: 18% 10% 16% 28%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8%;
  border-radius: 5px;
  background: var(--p-card);
  box-shadow: 0 0 0 1px var(--p-line);
}
.ap-theme__card i { display: block; height: 4px; border-radius: 2px; background: var(--p-text); opacity: 0.85; }
.ap-theme__card i + i { width: 62%; opacity: 0.4; }
.ap-theme__card b { display: block; width: 46%; height: 8px; margin-top: auto; border-radius: 3px; background: var(--p-accent); }
.ap-theme__label {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  padding-inline-end: 18px;
}
.ap-theme__label small { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.ap-theme__check {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1.3), opacity 0.12s ease;
}
.ap-theme__check svg { width: 12px; height: 12px; }
.ap-theme.is-on .ap-theme__check { transform: none; opacity: 1; }
.ap-theme:focus-visible { box-shadow: none; }
.ap-theme:focus-visible .ap-theme__art { box-shadow: var(--focus-ring); }

/* ── Roles ───────────────────────────────────────────────────────────── */
.ap__roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ap__roles button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.ap__roles button:hover { color: var(--text-primary); border-color: var(--line-strong); }
.ap__roles button.is-on { color: var(--text-primary); border-color: var(--accent); background: var(--accent-glow); }
.ap__role-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45);
  flex-shrink: 0;
}

/* ── Picker ──────────────────────────────────────────────────────────── */
.ap-picker { display: flex; flex-direction: column; gap: 12px; transition: opacity var(--transition); }
.ap-picker.is-auto .ap-sv,
.ap-picker.is-auto .ap-hue { opacity: 0.45; }

.ap-sv {
  --x: 50%;
  --y: 50%;
  position: relative;
  height: 168px;
  border-radius: 12px;
  background:
    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
    var(--hue, red);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  .ap-sv { height: 200px; }
  .ap-sv__thumb { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
}
.ap-sv:focus-visible { box-shadow: var(--focus-ring); }
.ap-sv__thumb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transition: transform 0.12s ease;
}
.ap-sv.is-dragging .ap-sv__thumb { transform: scale(1.18); }

.ap-hue {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0 !important;
  touch-action: none;
  border: 0 !important;
  border-radius: 999px;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.ap-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ap-hue::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ap-hue:focus-visible { box-shadow: var(--focus-ring); }

.ap-fields { display: flex; align-items: center; gap: 8px; }
.ap-fields__swatch {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35);
  flex-shrink: 0;
}
.ap-fields__hex {
  flex: 1;
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.ap-fields__hex:focus-within { border-color: var(--accent); }
.ap-fields__hex span {
  padding: 0 10px;
  align-self: stretch;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-inline-end: 1px solid var(--line);
}
.ap .ap-fields__hex input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.ap .ap-fields__hex input.is-invalid { color: var(--danger); }

.ap-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.ap-switch[hidden] { display: none; }
.ap-switch--row { align-items: flex-start; margin-top: 14px; }
.ap-switch--row .ap-switch__track { margin-top: 1px; }
.ap-switch__text { display: flex; flex-direction: column; gap: 2px; color: var(--text-primary); font-weight: 600; }
.ap-switch__text small { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text-muted); }
.ap-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--line-strong);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.ap-switch__track span {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}
.ap-switch input:checked + .ap-switch__track { background: var(--accent); }
.ap-switch input:checked + .ap-switch__track span { transform: translateX(16px); }
[dir="rtl"] .ap-switch input:checked + .ap-switch__track span { transform: translateX(-16px); }
.ap-switch input:focus-visible + .ap-switch__track { box-shadow: var(--focus-ring); }

/* ── Swatches ────────────────────────────────────────────────────────── */
.ap__swatches { margin-top: 16px; }
.ap__swatches[hidden] { display: none; }
.ap__swatches-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ap__swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ap__swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow var(--transition-fast);
}
.ap__swatch:hover { transform: scale(1.1); }
.ap__swatch.is-on { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }

/* ── Preview ─────────────────────────────────────────────────────────── */
.ap-preview {
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line);
}
.ap-preview__bar {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: var(--surface-nav);
  border-bottom: 1px solid var(--line-subtle);
}
.ap-preview__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ap-preview__card {
  margin: 14px;
  padding: 14px;
  border-radius: 10px;
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--line);
}
.ap-preview__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-preview__top strong { font-size: 14px; color: var(--text-primary); }
.ap-preview__top em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--marker-fg);
}
.ap-preview__card p { margin: 6px 0 10px; font-size: 13px; color: var(--text-secondary); }
.ap-preview__progress { height: 6px; border-radius: 3px; background: var(--fill-subtle); overflow: hidden; }
.ap-preview__progress span { display: block; width: 64%; height: 100%; background: var(--accent); border-radius: inherit; }
.ap-preview__actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.ap-preview__btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 12.5px;
  font-weight: 600;
}
.ap-preview__link { font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* ── Readability ─────────────────────────────────────────────────────── */
.ap-contrast { display: flex; flex-direction: column; gap: 6px; }
.ap-contrast__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border-radius: 10px;
  background: var(--fill-subtle);
}
.ap-contrast__sample {
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.25);
}
.ap-contrast__label { font-size: 13px; color: var(--text-secondary); }
.ap-contrast__ratio { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.ap-contrast__badge {
  min-width: 64px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.ap-contrast__badge.is-great { background: var(--success-bg); color: var(--success); }
.ap-contrast__badge.is-good { background: var(--info-bg); color: var(--info); }
.ap-contrast__badge.is-low { background: var(--danger-bg); color: var(--danger); }
.ap-contrast__warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
}
.ap-contrast__warn > svg { width: 16px; height: 16px; flex-shrink: 0; }
.ap-contrast__warn > span { flex: 1; }
.ap-contrast__warn .ap__chip-btn { border-color: currentColor; color: inherit; }

@media (max-width: 380px) {
  .ap__head, .ap__body, .ap__foot { padding-inline: 16px; }
  .ap__themes { gap: 8px; }
  .ap-contrast__ratio { display: none; }
  .ap-contrast__row { grid-template-columns: auto 1fr auto; }
}

/* Entry points added to existing menus. */
.floating-actions .btn-lang.ap-open-pill svg { width: 14px; height: 14px; }

/* ── Profiles ────────────────────────────────────────────────────────── */
.ap__hint--top { margin: -4px 0 12px; }
.ap__note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--fill-subtle);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.ap-prof { position: relative; min-width: 0; }
.ap-prof .ap-theme { width: 100%; }
.ap-prof__del {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.ap-prof__del svg { width: 12px; height: 12px; }
.ap-prof:hover .ap-prof__del,
.ap-prof__del:focus-visible,
.ap-prof.is-confirm .ap-prof__del { opacity: 1; }
.ap-prof.is-confirm .ap-prof__del { background: var(--danger); }
@media (hover: none) { .ap-prof__del { opacity: 0.85; } }

.ap-theme--add .ap-theme__art {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed var(--line-strong);
}
.ap-theme--add:hover .ap-theme__art { border-color: var(--accent); box-shadow: none; }
.ap-theme__plus { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 300; line-height: 1; color: var(--accent); }
.ap-theme--add .ap-theme__label { color: var(--text-secondary); }
.ap-theme--add[hidden] { display: none; }

.ap-prof-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--fill-subtle);
}
.ap-prof-form[hidden] { display: none; }
.ap-prof-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ap .ap-prof-form__field input {
  height: 38px;
  padding: 0 12px !important;
  border-radius: 9px;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-1) !important;
  color: var(--text-primary);
  font-size: 14px;
}
.ap .ap-prof-form__field input:focus { border-color: var(--accent) !important; }
.ap-prof-form__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Background animation ────────────────────────────────────────────── */
.ap-ambient {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ap-ambient__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.ap-ambient__item:hover { color: var(--text-primary); border-color: var(--line-strong); transform: translateY(-1px); }
.ap-ambient__item.is-on { color: var(--text-primary); border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-soft); }
.ap-ambient__icon { display: inline-flex; line-height: 1; }
.ap-ambient__icon svg { width: 22px; height: 22px; }
.ap-ambient__item.is-on .ap-ambient__icon { color: var(--accent); }
.ap-level { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ap-level[hidden] { display: none; }
.ap-level__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ap-level__seg { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border-radius: 10px; background: var(--fill-subtle); }
.ap-level__seg button { min-height: 30px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.ap-level__seg button.is-on { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 0 0 1px var(--line); }

/* The ambient canvas sits under the whole interface (ambient.js). The page
   background moves from <body> to <html> so the canvas, painted between the
   two, shows through wherever the page is bare. */
#ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
#ambient-canvas[hidden] { display: none; }
html[data-ambient] { background: var(--bg-primary); }
html[data-ambient] body { background: transparent; }
/* On phones the fixed dashboard header shares the page's animated canvas.
   The opaque navigation surface and its blur otherwise hide that scene. */
@media (max-width: 1024px) {
  html[data-ambient] .screen.active > .topnav {
    background: transparent !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-bottom-color: var(--line-subtle);
  }
}

/* The sign-in screen is two full-height panels; with a scene on, the form's
   side lets it through and the hero side tints it, instead of hiding it. */
html[data-ambient] .login-form-section { background: transparent !important; }
html[data-ambient] .login-hero { background: color-mix(in srgb, var(--surface-1) 55%, transparent) !important; }
/* Solid boxes cut hard rectangles out of a scene. With one on, the surface
   ladder turns translucent inside the page, so every card, panel, field and
   well lets the scene through in its own tone, with no blur (a blurred box
   reads as a patch). The solid values are kept on <html> first, because the
   aliases (--bg-card and friends) resolve there and must be re-pointed too. */
html[data-ambient] {
  --s0: var(--surface-0); --s1: var(--surface-1); --s2: var(--surface-2); --s3: var(--surface-3);
}
html[data-ambient] body {
  --surface-0: color-mix(in srgb, var(--s0) 45%, transparent);
  --surface-1: color-mix(in srgb, var(--s1) 55%, transparent);
  --surface-2: color-mix(in srgb, var(--s2) 62%, transparent);
  --surface-3: color-mix(in srgb, var(--s3) 60%, transparent);
  --bg-primary: var(--surface-0);
  --bg-secondary: var(--surface-2);
  --bg-card: var(--surface-1);
  --bg-input: var(--surface-3);
}
/* Anything that floats over the page (dialogs, menus, sheets, panels) or
   stays pinned while content scrolls under it keeps solid surfaces. */
html[data-ambient] :is(.topnav, .modal-content, .ap__panel, .notif-panel, .account-menu,
  .chat-sheet, .drawer__panel, .palette__panel, .pdf-picker__panel, .thread-menu,
  .overlay, [role="dialog"], [role="menu"], [role="listbox"]) {
  --surface-0: var(--s0); --surface-1: var(--s1); --surface-2: var(--s2); --surface-3: var(--s3);
  --bg-primary: var(--s0); --bg-secondary: var(--s2); --bg-card: var(--s1); --bg-input: var(--s3);
}
/* The portal calendar is a page, not a floating box (it only carries
   role="dialog" for assistive tech), so the scene shows behind it like behind
   any other page. */
html[data-ambient] .pcal.pcal {
  --surface-0: color-mix(in srgb, var(--s0) 45%, transparent);
  --surface-1: color-mix(in srgb, var(--s1) 55%, transparent);
  --surface-2: color-mix(in srgb, var(--s2) 62%, transparent);
  --surface-3: color-mix(in srgb, var(--s3) 60%, transparent);
  --bg-primary: var(--surface-0); --bg-secondary: var(--surface-2); --bg-card: var(--surface-1); --bg-input: var(--surface-3);
  background: transparent;
}
/* A hover translation floats over the text it translates, so it needs a solid,
   frosted face; on the scene's translucent card colour the words beneath show
   through the tip. */
html[data-ambient] .activity-translation {
  background: color-mix(in srgb, var(--s1) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  color: var(--text-secondary) !important;
  border-radius: 12px !important;
}
/* The floating pill is small and always on top: frosted is right for it. */
html[data-ambient] .action-pill-container {
  background: color-mix(in srgb, var(--s1) 58%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}
/* The material toolbar sits on the scene like the page text does, with only
   its hairline; it turns to glass only while stuck with content under it. */
html[data-ambient] .mtoolbar:not(.is-stuck) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-ambient] .mtoolbar { transition: background-color .2s ease, border-radius .2s ease, box-shadow .2s ease; }
/* Stuck, it is a rounded pane of frosted glass: soft corners, a stronger blur
   so the page beneath reads as texture, and a faint rim instead of a hard rule.
   It reaches 10px past the text column on both sides so its corners clear the
   first and last controls, which stay where they were. */
html[data-ambient] .mtoolbar.is-stuck {
  background: color-mix(in srgb, var(--s0) 74%, transparent) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.2);
  backdrop-filter: blur(40px) saturate(1.2);
  border-radius: 14px !important;
  margin-inline: -10px;
  padding-inline: 10px !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 8px 24px -12px rgba(0, 0, 0, .45) !important;
}
/* The page-name button's hover plate follows the pane's soft corners. */
.mtoolbar__where, .mtoolbar__step, .mtoolbar__pdf, .mtoolbar__regen { border-radius: 10px !important; }
html[data-ambient] .mtoolbar.is-stuck .mtoolbar__progress {
  left: 14px; right: 14px; bottom: 0;
  border-radius: 2px;
  overflow: hidden;
}

/* While the background is being dragged (ambient.js) the drag cannot turn
   into a text selection. The cursor is left as it is. */
html.ambient-dragging, html.ambient-dragging * {
  -webkit-user-select: none !important;
  user-select: none !important;
}