/* The pal workspace: shared type, surfaces and controls across every page. */
body.pal-experience {
  --pal-paper: #ffffff;
  --pal-ink: #242424;
  /* Muted and faint pass WCAG AA (4.5:1) on paper, the sidebar and a hover fill. */
  --pal-muted: #666666;
  --pal-line: #e8e8e8;
  --pal-soft: #f5f5f5;
  --pal-sidebar: #f7f7f7;
  --pal-hover: #ededed;
  --pal-focus: #595959;
  --pal-elevated: #fff;
  --canvas: var(--pal-paper);
  --canvas-cool: var(--pal-sidebar);
  --surface: var(--pal-elevated);
  --surface-2: var(--pal-soft);
  --surface-sunken: var(--pal-soft);
  --ink: var(--pal-ink);
  --ink-body: #454545;
  --ink-muted: var(--pal-muted);
  --ink-faint: #6e6e6e;
  --hairline: var(--pal-line);
  --bg-hover: var(--pal-hover);
  --violet: var(--pal-focus);
  --ink-violet: var(--pal-ink);
  --tint-violet: var(--pal-soft);
  --grad-violet: linear-gradient(var(--pal-ink), var(--pal-ink));
  --icon-violet: linear-gradient(var(--pal-soft), var(--pal-soft));
  --glow-violet: 0 0 transparent;
  --glow-violet-hi: 0 0 transparent;
  --glow-icon-violet: 0 0 transparent;
  --inset-highlight: inset 0 0 0 1px var(--pal-line);
  --inset-floor: 0 0 transparent;
  --inset-well: inset 0 0 0 1px var(--pal-line);
  --inset-field: inset 0 0 0 1px var(--pal-line);
  --inset-cta-top: 0 0 transparent;
  --inset-cta-floor: 0 0 transparent;
  --inset-press-cta-top: 0 0 transparent;
  --shadow-rest: 0 0 transparent;
  --shadow-card: 0 0 transparent;
  --shadow-card-hover: 0 0 transparent;
  --shadow-hover: 0 0 transparent;
  --shadow-dialog: 0 24px 80px #1620191f, 0 2px 10px #1620190a;
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;
  --font-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font-ui);
  --sidebar-w: 220px;
  --gutter: 36px;
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-size: 14px;
}
@media(prefers-color-scheme:dark) {
  body.pal-experience:not([data-theme=light]) {
    --pal-paper: #1c1c1e; --pal-elevated: #252527; --pal-sidebar: #171719;
    --pal-ink: #f2f2f2; --pal-muted: #ababab; --pal-line: #363638;
    --pal-soft: #2c2c2e; --pal-hover: #323234; --pal-focus: #bdbdbd;
    --ink-body: #d9d9d9; --ink-faint: #929292;
    --shadow-dialog: 0 24px 80px #0006, 0 2px 10px #0003;
  }
}
html[data-theme=dark] body.pal-experience, body.pal-experience[data-theme=dark] {
  --pal-paper: #1c1c1e; --pal-elevated: #252527; --pal-sidebar: #171719;
  --pal-ink: #f2f2f2; --pal-muted: #ababab; --pal-line: #363638;
  --pal-soft: #2c2c2e; --pal-hover: #323234; --pal-focus: #bdbdbd;
  --ink-body: #d9d9d9; --ink-faint: #929292;
  --shadow-dialog: 0 24px 80px #0006, 0 2px 10px #0003;
}
html[data-theme=light] body.pal-experience, body.pal-experience[data-theme=light] {
  --pal-paper: #ffffff; --pal-elevated: #fff; --pal-sidebar: #f7f7f7;
  --pal-ink: #242424; --pal-muted: #666666; --pal-line: #e8e8e8;
  --pal-soft: #f5f5f5; --pal-hover: #ededed; --pal-focus: #595959;
  --ink-body: #454545; --ink-faint: #6e6e6e;
  --shadow-dialog: 0 24px 80px #1620191f, 0 2px 10px #1620190a;
}
body.pal-experience .sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w); flex-basis: var(--sidebar-w);
  background: var(--pal-sidebar); border-right: 1px solid var(--pal-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-bottom: 12px;
}
/* Selection needs both colors: inverse message bubbles cannot inherit one. */
.pal-experience .pal-words, .pal-experience .pal-detail-content { -webkit-user-select: text; user-select: text; }
.pal-experience::selection, .pal-experience ::selection { background: #b8d9f4; color: #182a3a; }
.pal-experience .rail-switch[aria-checked="true"] .rail-switch-knob,
.pal-experience .settings-toggle.is-on .settings-toggle-knob,
.pal-experience .goal-loop input:checked::before { background: var(--pal-paper); }
.pal-experience .nav { padding: 0 12px; gap: 3px; }
.pal-experience .tab { min-height: 37px; padding: 8px 11px; gap: 10px; font-size: 13px; font-weight: 550; border-radius: 8px; transition: none; }
.pal-experience .tab .ic { font-size: 16px; color: var(--pal-muted); transition: none; }
body.pal-experience .tab.is-active { background: var(--pal-hover); color: var(--pal-ink); box-shadow: none; }
.pal-experience .tab.is-active .ic { color: var(--pal-ink); }
.pal-experience .tab:hover { background: var(--pal-hover); }
/* Settings at the foot, above Talk to us and the account: where you go, not
   one of the pages. The same compact register as the links under it. */
.pal-experience .pal-settings-tab { margin: auto 12px 0; min-height: 34px; padding: 8px 11px; font-size: 12px; }
.pal-experience .pal-settings-tab .tab-label { font-size: inherit; }
.pal-experience .count { font-size: 11px; background: transparent; color: var(--pal-muted); padding: 0 3px; }
.pal-experience .count.is-urgent, .pal-experience .tab.is-active .count.is-urgent { background: var(--pal-soft); color: var(--pal-ink); }
.pal-experience #send-feedback { margin-top: 2px; }
.pal-experience .sidebar > .rail-link { min-height: 34px; padding: 8px 11px; }
.pal-experience .rail-link { margin-inline: 12px; padding: 9px 11px; font-size: 12px; gap: 10px; }
.pal-experience .rail-link .ic { font-size: 16px; }
.pal-experience .account-pill { margin: 5px 12px 0; padding: 9px 10px; gap: 10px; }
.pal-experience .account-avatar { width: 28px; height: 28px; font-size: 12px; background: var(--pal-hover); }
.pal-experience .account-name { font-size: 12px; }
.pal-experience .account-sub { font-size: 11px; color: var(--pal-muted); }
.pal-experience #credits-card { margin: 4px 14px; padding: 8px; background: transparent; box-shadow: none; }
.pal-experience .content, .pal-experience .view { background: var(--pal-paper); }
.pal-experience .content { padding-top: 0; }
/* Navigation must paint on its first frame. WebKit freezes the old opacity
   reveal at zero when a packaged window is hidden or fully covered. */
.pal-experience .view.is-active { animation: none; }
.pal-experience .view:not(.pal-view):not(.pal-settings):not(#view-session) { padding-top: calc(var(--titlebar) + 14px); }
.pal-experience .head { padding: 0 var(--gutter) 24px; margin-bottom: 0; border-bottom: 0; align-items: center; }
.pal-experience h1 { font: 720 28px/1.25 var(--font-ui); letter-spacing: -.8px; }
.pal-experience .sub { font-size: 14px; line-height: 1.6; color: var(--pal-muted); margin-top: 7px; }
.pal-experience .eyebrow { font-size: 11px; letter-spacing: .06em; color: var(--pal-muted); }
.pal-experience .btn, .pal-experience .pal-button {
  border: 1px solid var(--pal-line); background: var(--pal-elevated); color: var(--pal-ink);
  box-shadow: none; border-radius: 8px; padding: 6px 12px;
  /* 18 + 2x6 + 2x1 = 32: the compact control height the sidebar, chips and
     row actions already use. 7px around a 1.4 line drew header buttons 34px
     tall beside 32px chips on the same page. */
  font: 600 13px/18px var(--font-ui); min-height: 32px;
  transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.pal-experience .btn:hover, .pal-experience .pal-button:hover { background: var(--pal-soft); border-color: color-mix(in srgb,var(--pal-ink) 18%,var(--pal-line)); transform: none; filter: none; box-shadow: none; }
/* Dark buttons keep their ink on hover: the generic hover above paints the
   page's soft fill, which left their white label unreadable. */
.pal-experience :is(.pal-need-primary,.pal-hand-open,.pal-settings-save,.pal-safety-edit-save,.pal-needs-show,.pal-batch-approve,.pal-batch-exclude-all,.pal-guide-go,.pal-send):hover:not(:disabled) { background: color-mix(in srgb,var(--pal-ink) 86%,var(--pal-paper)); color: var(--pal-paper); border-color: transparent; }
.pal-experience .btn:active, .pal-experience .pal-button:active { transform: none; box-shadow: none; }
.pal-experience .btn.ghost { border-color: transparent; background: transparent; }
.pal-experience .btn.ghost:hover { background: var(--pal-soft); }
.pal-experience .btn.primary, .pal-experience .btn.cta, .pal-experience .dialog .btn.primary {
  background: var(--pal-ink); color: var(--pal-paper); border-color: var(--pal-ink); box-shadow: none;
}
.pal-experience .btn.primary:hover, .pal-experience .btn.cta:hover { opacity: .9; }
.pal-experience .btn.danger { color: var(--ink-danger); }
/* Loading hides the button label, so its spinner needs an explicit foreground. */
.pal-experience .btn.is-loading::after { color: var(--pal-ink); }
.pal-experience .btn:is(.primary,.cta).is-loading::after { color: var(--pal-paper); }
.pal-experience .btn.danger-solid.is-loading::after { color: #fff; }
.pal-experience button:disabled { cursor: default; opacity: .45; }
.pal-experience .chip { border: 1px solid transparent; box-shadow: none; border-radius: 7px; }
.pal-experience .chip.is-active { background: var(--pal-hover); color: var(--pal-ink); }
.pal-experience input, .pal-experience textarea, .pal-experience select { accent-color: var(--pal-focus); }
.pal-experience .field-input { background: var(--pal-paper); border: 1px solid var(--pal-line); box-shadow: none; border-radius: 8px; font: 400 14px/1.5 var(--font-ui); padding: 10px 12px; }
.pal-experience .field-input:focus { outline: none; border-color: var(--pal-focus); box-shadow: 0 0 0 2px color-mix(in srgb,var(--pal-focus) 10%,transparent); }
.pal-experience button:focus-visible, .pal-experience a:focus-visible, .pal-experience summary:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 3px; }
.pal-experience .scrim { background: #17201c30; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* 24px, the padding every full-bleed rule inside a dialog bleeds back out
   through (.dialog-actions, .pb-head, the What's new header and list all
   carry -24px). At 26px each of those rules stopped 2px short of both edges. */
.pal-experience .dialog { background: var(--pal-elevated); border: 1px solid var(--pal-line); box-shadow: var(--shadow-dialog); padding: 24px; border-radius: var(--radius-dialog); }
.pal-experience .dialog h2 { margin: 0 0 14px; padding: 0 30px 0 0; border: 0; font: 720 21px/1.3 var(--font-ui); letter-spacing: -.45px; }
.pal-experience .dialog .dialog-actions { border-color: var(--pal-line); background: transparent; }
.pal-experience .dialog-close { width: 30px; height: 30px; border-radius: 7px; color: var(--pal-muted); }
.pal-experience .dialog-close:hover { background: var(--pal-soft); color: var(--pal-ink); }
.pal-experience .dialog-lede { font-size: 14px; color: var(--pal-muted); }
.pal-experience .dialog.is-palette { padding: 0; border-radius: 14px; }
.pal-experience .palette-art { background: transparent; color: var(--pal-muted); }
.pal-experience .palette-row { min-height: 37px; border-radius: 7px; font-size: 14px; }
.pal-experience .palette-row.is-active { background: var(--pal-soft); }
.pal-experience .palette-row.is-active::before { display: none; }
.pal-experience .palette-foot { background: var(--pal-paper); border-color: var(--pal-line); color: var(--pal-muted); }
.pal-experience .feedback-kinds .chip { border-radius: 8px; }
.pal-experience .thanks-disc { background: var(--pal-soft); color: var(--pal-ink); box-shadow: none; }
/* A field's name in the pal is a sentence-case label, as in Settings and the
   play dialog. Only the size used to change here, so Import, New company and
   the rest kept the legacy uppercase, letter-spaced micro-label at 13px:
   "CSV", "COMPANY", a voice nothing else in the window speaks. */
.pal-experience .field label, .pal-experience .field-label { font-size: 13px; }
.pal-experience .field label { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--pal-ink); }
/* The page-top banner, in the chat's ask-row language: a hairline row on the
   page's paper, the cause's mark, its sentence with the context under it in
   muted type (never an uppercase eyebrow), the usual primary button and a
   ghost ×. Every tone is the same neutral surface. */
.pal-experience .notice, .pal-experience .notice.is-asks, .pal-experience .notice[data-tone] {
  margin: 12px 20px 0; padding: 10px 8px 10px 12px; gap: 12px;
  background: var(--pal-paper); color: var(--pal-ink);
  border: 1px solid var(--pal-line); border-radius: var(--radius-card); box-shadow: none;
}
.pal-experience .notice:hover { filter: none; }
.pal-experience .notice-art .need-logo, .pal-experience .notice-art .notice-logo {
  box-sizing: border-box; width: 26px; height: 26px; border-radius: 7px;
  background: var(--pal-soft); border: 1px solid var(--pal-line); box-shadow: none;
}
.pal-experience .notice-dot { background: var(--pal-muted); }
.pal-experience .notice-art:not([hidden]) + .notice-dot { display: none; }
.pal-experience .notice-copy { display: flex; flex-direction: column-reverse; gap: 1px; }
.pal-experience .notice-text { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--pal-ink); }
.pal-experience .notice-kicker {
  margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  opacity: 1; color: var(--pal-muted);
}
.pal-experience .notice-act {
  min-height: 32px; padding: 7px 12px; border: 1px solid var(--pal-ink); border-radius: var(--radius-btn);
  background: var(--pal-ink); color: var(--pal-paper); font: 600 13px/1.4 var(--font-ui);
}
.pal-experience .notice-act:hover { background: color-mix(in srgb, var(--pal-ink) 86%, var(--pal-paper)); }
.pal-experience .notice-close {
  width: 32px; height: 32px; margin-left: -4px; border-radius: var(--radius-btn);
  color: var(--pal-muted); opacity: 1;
}
.pal-experience .notice-close .ic { width: 14px; height: 14px; }
.pal-experience .notice-close:hover, .pal-experience .notice-close:focus-visible { background: var(--pal-soft); color: var(--pal-ink); }
.pal-experience .notice-close:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 1px; }
.pal-experience .toasts { bottom: 20px; }
/* Toast colors stay paired in both themes. The primary-button palette reverses
   in dark mode and cannot supply a background for this light foreground. */
.pal-experience .toast {
  background: #303033; color: #f7f7f8; border: 1px solid #48484c;
  border-radius: 10px; padding: 11px 15px; font-size: 13px;
  box-shadow: 0 6px 28px #0003;
}
.pal-experience .toast-action { color: inherit; border-radius: 4px; min-height: 28px; }
.pal-experience .toast-action:focus-visible { outline-color: #f7f7f8; }
.pal-experience .setup-mark .ic, .pal-experience .cloud-hero-tile.is-there { color: var(--pal-ink); }
.pal-experience .plan-flag,
.pal-experience .cloud-step.is-done .cloud-step-mark,
.pal-experience .connector-step[data-state="active"] .connector-step-mark {
  background: var(--pal-ink); color: var(--pal-paper);
}
/* Feedback and controls must be readable before a window's animation clock
   advances. Character expressions and progress indicators keep their motion. */
.pal-experience :is(.scrim,.dialog,.select-menu,.popover,.bulkbar,.setup,.whats-new-item,.toast,
  .thanks-disc,.thanks-title,.thanks-body,.thanks .btn,.palette-list.is-entering .palette-row) { animation: none; }
@media(max-width:1000px) { body.pal-experience { --sidebar-w: 190px; --gutter: 26px; } }
@media(max-width:760px) {
  body.pal-experience { --sidebar-w: 64px; --gutter: 22px; }
  body.pal-experience .sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); flex-basis:var(--sidebar-w); }
  .pal-experience .sidebar .tab-label, .pal-experience .sidebar .count,
  .pal-experience .sidebar .rail-link span, .pal-experience .sidebar .account-text, .pal-experience #credits-card { display: none; }
  .pal-experience .nav { padding: 0 9px; }
  .pal-experience .tab { justify-content: center; padding: 10px; width: 44px; min-height: 40px; gap: 0; }
  .pal-experience .pal-settings-tab { margin: auto 10px 0; width: 44px; font-size: 13px!important; padding:10px!important; }
  .pal-experience #send-feedback { display: flex; justify-content: center; margin: 2px 10px 0; padding:10px; }
  .pal-experience .account-pill { justify-content: center; margin: 4px 8px; padding:8px; }
  .pal-experience .head { align-items: flex-start; gap: 12px; padding-bottom: 20px; }
  .pal-experience h1 { font-size: 25px; }
  .pal-experience .scrim { padding: 16px; }
  .pal-experience .dialog { max-height: calc(100dvh - 32px); }
}
@media(prefers-reduced-motion:reduce) { .pal-experience *, .pal-experience *::before, .pal-experience *::after { animation-duration:0s!important; transition-duration:0s!important; scroll-behavior:auto!important; } }
.pal-experience .pal-settings-tab .pal-icon { width:16px; height:16px; flex:0 0 16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pal-experience:not(.pal-diagnostics) #memory-reindex { display:none; }
.pal-experience .popover { background:var(--pal-elevated); border:1px solid var(--pal-line); box-shadow:0 10px 38px #17201914; border-radius:10px; padding:6px; }
.pal-experience .popover-item { border-radius:6px; font-size:13px; min-height:34px; }
.pal-experience .popover-item:hover { background:var(--pal-soft); }
.pal-experience .card-profile { border:1px solid var(--pal-line); box-shadow:none; background:var(--pal-paper); padding:22px; border-radius:12px; }
.pal-experience .card-profile .card-title { font-size:17px; font-weight:700; }
.pal-experience .card-profile .card-sub { font-size:13px; }
.pal-experience .card-profile .icon { background:var(--pal-soft); box-shadow:none; }
.pal-experience .card-profile .card-actions { gap:4px; }
.pal-experience .profile-read-problem { background:var(--pal-soft); border-color:var(--pal-line); color:var(--pal-ink); border-radius:10px; }
.pal-experience .profile-read-problem-text .ic { color:var(--pal-failure-mark); }
.pal-experience .profile-read-problem.is-answered .profile-read-problem-text .ic { color:var(--pal-muted); }
.pal-experience .profile-read-problem .profile-read-problem-area { background:var(--pal-paper); }
.pal-experience .pal-profile-more { font-size:22px; line-height:1; letter-spacing:2px; }
.pal-experience .setup[data-manage=true] { max-width:920px; padding:0 0 24px; }
.pal-experience .setup[data-manage=true] h2 { font-size:25px; line-height:1.3; letter-spacing:-.7px; font-weight:650; }
.pal-experience .setup[data-manage=true] .setup-lede { font-size:14px; max-width:600px; }
/* Account's title is an h1, so it fell to the generic 720/28px above while
   every other page title in the window is 650/25px. */
.pal-experience #view-account .settings-title { font:650 25px/1.3 var(--font-ui); letter-spacing:-.6px; }
.pal-experience .settings-card { border:0; border-bottom:1px solid var(--pal-line); border-radius:0; box-shadow:none; padding-bottom:25px; background:transparent; }
.pal-experience .whats-new-head { background:var(--pal-paper); }
/* The pal's dialog padding would put a blank band above the header, which runs to the top edge. */
.pal-experience .dialog.is-whats-new { padding:0 24px 20px; }
.pal-experience .whats-new-kicker { background:var(--pal-soft); color:var(--pal-ink); }
.pal-experience :is(#view-profiles,#view-memory) > .head h1 { font-size:25px; line-height:1.3; font-weight:650; letter-spacing:-.7px; }
.pal-experience :is(#view-profiles,#view-memory) > .head { padding-bottom:24px; }
.pal-experience :is(#view-profiles,#view-memory) > .head .controls { height:auto; flex-wrap:wrap; }
.pal-experience .empty-glyph .pal-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:760px) { .pal-experience .card-profile .card-top { flex-wrap:wrap; } .pal-experience .card-profile .card-actions { width:100%; margin-top:12px; } }

.pal-experience .btn.danger-solid { background:#bb3737; border-color:#bb3737; color:#fff; box-shadow:none; }
.pal-experience .card-memory[data-status="archived"] { opacity:1; }
.pal-experience .account-stats { flex-wrap:wrap; }
.pal-experience .account-device { flex-wrap:wrap; gap:12px; }
@media(max-width:760px) {
  .pal-experience .pal-settings-account .account-meter-line { flex-wrap:wrap; }
  .pal-experience .pal-settings-account .account-credit-caption { white-space:normal; }
}
