/*
  AtticusBeta v6.9.20
  Cohesive contrast lock.

  Rules:
  - Light/paper surfaces always use dark green-charcoal text.
  - Dark/technical surfaces always use warm cream text.
  - Orange = primary/action emphasis.
  - Sage = secondary/status emphasis.
  - Background gradients always have a matching solid background-color so the
    runtime contrast guard can classify the surface correctly.
  - Styling only. No layout/geometry changes.
*/

:root {
  --ab20-paper: #F2ECE2;
  --ab20-paper-2: #E8E1D5;
  --ab20-paper-card: #F8F4EC;
  --ab20-ink: #18221D;
  --ab20-ink-2: #37443D;
  --ab20-dark: #0B100E;
  --ab20-dark-2: #111914;
  --ab20-dark-3: #1B261F;
  --ab20-dark-4: #26322B;
  --ab20-cream: #F2E6D3;
  --ab20-cream-2: #D8CDBD;
  --ab20-orange: #C77A4B;
  --ab20-orange-deep: #98502B;
  --ab20-orange-wash: #67422F;
  --ab20-sage: #A5B5A5;
  --ab20-sage-dark: #33463B;
  --ab20-sage-bright: #BCD0BE;
}

/* --------------------------------------------------------------------------
   Welcome-back modal: one Atticus palette, but not monochrome.
   -------------------------------------------------------------------------- */
.modal-panel:has(.personal-welcome-modal) {
  background-color: var(--ab20-dark-2) !important;
  background:
    radial-gradient(620px 280px at 14% 0%, rgba(199,122,75,.12), transparent 70%),
    radial-gradient(560px 260px at 86% 10%, rgba(165,181,165,.12), transparent 70%),
    linear-gradient(180deg, #1D2721, #101713) !important;
  color: var(--ab20-cream) !important;
  border-color: rgba(242,230,211,.20) !important;
}
.modal-panel:has(.personal-welcome-modal) > :is(h1,h2,h3),
.modal-panel:has(.personal-welcome-modal) .modal-title,
.personal-welcome-modal .welcome-back-logo,
.personal-welcome-modal .welcome-back-lede {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
.personal-welcome-modal .welcome-back-logo strong {
  color: var(--ab20-sage) !important;
  -webkit-text-fill-color: var(--ab20-sage) !important;
}
.personal-welcome-modal .welcome-back-logo em {
  color: var(--ab20-orange) !important;
  -webkit-text-fill-color: var(--ab20-orange) !important;
}
.personal-welcome-grid > section {
  border-width: 1px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
}
.personal-welcome-grid > section:nth-child(1) {
  background-color: #684532 !important;
  background: linear-gradient(145deg, #73503A, #573A2A) !important;
  border-color: rgba(226,154,105,.50) !important;
}
.personal-welcome-grid > section:nth-child(2) {
  background-color: #34483C !important;
  background: linear-gradient(145deg, #3D5145, #2A3C32) !important;
  border-color: rgba(165,181,165,.48) !important;
}
.personal-welcome-grid > section:nth-child(3) {
  background-color: var(--ab20-paper-card) !important;
  background: linear-gradient(145deg, #FAF6EE, #EDE5D8) !important;
  border-color: rgba(24,34,29,.20) !important;
}
.personal-welcome-grid > section:nth-child(4) {
  background-color: #252E29 !important;
  background: linear-gradient(145deg, #2D3831, #1B241F) !important;
  border-color: rgba(242,230,211,.20) !important;
}
.personal-welcome-grid > section:nth-child(1),
.personal-welcome-grid > section:nth-child(1) *,
.personal-welcome-grid > section:nth-child(2),
.personal-welcome-grid > section:nth-child(2) *,
.personal-welcome-grid > section:nth-child(4),
.personal-welcome-grid > section:nth-child(4) * {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
.personal-welcome-grid > section:nth-child(3),
.personal-welcome-grid > section:nth-child(3) * {
  color: var(--ab20-ink) !important;
  -webkit-text-fill-color: var(--ab20-ink) !important;
}
.personal-welcome-grid > section:nth-child(1) h3,
.personal-welcome-grid > section:nth-child(4) h3 {
  color: #F0AA79 !important;
  -webkit-text-fill-color: #F0AA79 !important;
}
.personal-welcome-grid > section:nth-child(2) h3 {
  color: #D4E0D2 !important;
  -webkit-text-fill-color: #D4E0D2 !important;
}
.personal-welcome-grid > section:nth-child(3) h3 {
  color: var(--ab20-orange-deep) !important;
  -webkit-text-fill-color: var(--ab20-orange-deep) !important;
}
#modalActions .modal-btn {
  background-color: var(--ab20-dark-4) !important;
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
  border-color: rgba(242,230,211,.28) !important;
}
#modalActions .modal-btn.action-walkthrough {
  background-color: var(--ab20-sage-dark) !important;
  color: #F5EEE2 !important;
  -webkit-text-fill-color: #F5EEE2 !important;
  border-color: rgba(165,181,165,.62) !important;
}
#modalActions [data-modal-close] {
  background-color: var(--ab20-orange) !important;
  background: linear-gradient(180deg, #D38655, #B9693E) !important;
  color: #17110D !important;
  -webkit-text-fill-color: #17110D !important;
  border-color: #A95E35 !important;
}

/* --------------------------------------------------------------------------
   Chat technical/code blocks: dark block = light copy, always.
   -------------------------------------------------------------------------- */
body .stage :is(.message,.response-content,.thread-messages) .code-card {
  background-color: var(--ab20-dark-2) !important;
  background: linear-gradient(180deg, #17221C, #0D1410) !important;
  color: var(--ab20-cream) !important;
  border-color: rgba(199,122,75,.50) !important;
}
body .stage :is(.message,.response-content,.thread-messages) .code-card .code-card-head {
  background-color: #29332D !important;
  background: linear-gradient(180deg, #303A34, #252E29) !important;
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
  border-color: rgba(242,230,211,.18) !important;
}
body .stage :is(.message,.response-content,.thread-messages) .code-card :is(pre,code) {
  background-color: var(--ab20-dark-2) !important;
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
body .stage :is(.message,.response-content,.thread-messages) .code-card pre *,
body .stage :is(.message,.response-content,.thread-messages) .code-card code * {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
body .stage :is(.message,.response-content,.thread-messages) .code-card .code-copy-button {
  background-color: var(--ab20-paper-card) !important;
  color: var(--ab20-ink) !important;
  -webkit-text-fill-color: var(--ab20-ink) !important;
  border-color: rgba(24,34,29,.30) !important;
}

/* --------------------------------------------------------------------------
   Apps: dark framing, light headings, paper app descriptions.
   -------------------------------------------------------------------------- */
body .stage > section.view.page-view[data-view="tools"] .tools-layout > .panel {
  background-color: var(--ab20-dark-3) !important;
  background: linear-gradient(180deg, #27332C, #17211C) !important;
  color: var(--ab20-cream) !important;
  border-color: rgba(242,230,211,.18) !important;
}
body .stage > section.view.page-view[data-view="tools"] .tools-layout > .panel > .panel-title,
body .stage > section.view.page-view[data-view="tools"] .tools-layout > .panel > h2 {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-filter-bar {
  background-color: var(--ab20-dark-2) !important;
  background: #111914 !important;
  border-color: rgba(242,230,211,.18) !important;
  color: var(--ab20-cream) !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-filter-bar :is(input,select,label) {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-filter-bar :is(input,select) {
  background-color: #0A0F0D !important;
  border-color: rgba(242,230,211,.26) !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-filter-bar select option {
  background-color: #0A0F0D !important;
  color: var(--ab20-cream) !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-library-row {
  background-color: var(--ab20-paper-card) !important;
  background: linear-gradient(180deg, #FBF8F1, #EFE8DC) !important;
  color: var(--ab20-ink) !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-library-row-main,
body .stage > section.view.page-view[data-view="tools"] .app-library-copy {
  color: var(--ab20-ink) !important;
  -webkit-text-fill-color: var(--ab20-ink) !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-library-title {
  color: #111A15 !important;
  -webkit-text-fill-color: #111A15 !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-library-subtitle {
  color: #243229 !important;
  -webkit-text-fill-color: #243229 !important;
}
body .stage > section.view.page-view[data-view="tools"] .app-library-description {
  color: #465249 !important;
  -webkit-text-fill-color: #465249 !important;
}

/* --------------------------------------------------------------------------
   Settings: light shell, dark technical modules with guaranteed cream text.
   -------------------------------------------------------------------------- */
body .stage > section.view.page-view[data-view="settings"] .settings-card {
  background-color: var(--ab20-paper-card) !important;
}
/* Establish dark text first on all ordinary settings content. */
body .stage > section.view.page-view[data-view="settings"] .settings-card,
body .stage > section.view.page-view[data-view="settings"] .settings-card :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,em,b,.settings-card-copy,.setting-copy,.setting-title,.range-value,.settings-subsection-title) {
  color: var(--ab20-ink) !important;
  -webkit-text-fill-color: var(--ab20-ink) !important;
}
body .stage > section.view.page-view[data-view="settings"] .settings-kicker,
body .stage > section.view.page-view[data-view="settings"] .form-field > label,
body .stage > section.view.page-view[data-view="settings"] .settings-pill {
  color: var(--ab20-orange-deep) !important;
  -webkit-text-fill-color: var(--ab20-orange-deep) !important;
}

/* Usage is deliberately a dark technical module. */
body .stage > section.view.page-view[data-view="settings"] [data-settings-card="usage"] .settings-usage-panel {
  background-color: var(--ab20-dark-3) !important;
  background: linear-gradient(180deg, #26322B, #17211C) !important;
  color: var(--ab20-cream) !important;
  border-color: rgba(242,230,211,.18) !important;
}
body .stage > section.view.page-view[data-view="settings"] [data-settings-card="usage"] .settings-usage-panel .usage-row {
  background-color: #1D2821 !important;
  background: linear-gradient(180deg, #222E27, #17211C) !important;
  border-color: rgba(242,230,211,.17) !important;
}
body .stage > section.view.page-view[data-view="settings"] [data-settings-card="usage"] .settings-usage-panel,
body .stage > section.view.page-view[data-view="settings"] [data-settings-card="usage"] .settings-usage-panel * {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
body .stage > section.view.page-view[data-view="settings"] [data-settings-card="usage"] .settings-usage-panel :is(small,.setting-copy,.usage-row span) {
  color: var(--ab20-cream-2) !important;
  -webkit-text-fill-color: var(--ab20-cream-2) !important;
}

/* Tier cards use the same dark technical surface and readable cream typography. */
body .stage > section.view.page-view[data-view="settings"] .settings-tier-row-card .settings-plan-option {
  background-color: #272D29 !important;
  background: linear-gradient(180deg, #343A35, #252B27) !important;
  color: var(--ab20-cream) !important;
  border-color: rgba(242,230,211,.20) !important;
}
body .stage > section.view.page-view[data-view="settings"] .settings-tier-row-card .settings-plan-option,
body .stage > section.view.page-view[data-view="settings"] .settings-tier-row-card .settings-plan-option * {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
body .stage > section.view.page-view[data-view="settings"] .settings-tier-row-card .settings-plan-option .plan-package-top > span {
  color: #F0AA79 !important;
  -webkit-text-fill-color: #F0AA79 !important;
}
body .stage > section.view.page-view[data-view="settings"] .settings-tier-row-card .settings-plan-option small {
  color: var(--ab20-cream-2) !important;
  -webkit-text-fill-color: var(--ab20-cream-2) !important;
}
body .stage > section.view.page-view[data-view="settings"] .settings-tier-row-card .settings-plan-option button {
  background-color: #111914 !important;
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
  border-color: rgba(199,122,75,.62) !important;
}
body .stage > section.view.page-view[data-view="settings"] .settings-tier-row-card .settings-plan-option button:disabled {
  background-color: #3A413C !important;
  color: #E9DECE !important;
  -webkit-text-fill-color: #E9DECE !important;
  border-color: rgba(233,222,206,.30) !important;
}

/* Profile setup remains dark inside the paper card. */
body .stage > section.view.page-view[data-view="settings"] .profile-setup-card,
body .stage > section.view.page-view[data-view="settings"] .profile-setup-card * {
  color: var(--ab20-cream) !important;
  -webkit-text-fill-color: var(--ab20-cream) !important;
}
body .stage > section.view.page-view[data-view="settings"] .profile-setup-card {
  background-color: var(--ab20-dark-4) !important;
}

/* Theme color controls: thin black outline only, no heavy black frame. */
body .stage > section.view.page-view[data-view="settings"] .form-field input[type="color"] {
  height: 42px !important;
  padding: 2px !important;
  background: transparent !important;
  border: 1px solid #111713 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  outline: none !important;
}
body .stage > section.view.page-view[data-view="settings"] .form-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 1px !important;
}
body .stage > section.view.page-view[data-view="settings"] .form-field input[type="color"]::-webkit-color-swatch {
  border: 0 !important;
  border-radius: 4px !important;
}
body .stage > section.view.page-view[data-view="settings"] .form-field input[type="color"]::-moz-color-swatch {
  border: 0 !important;
  border-radius: 4px !important;
}

/* Explicit background colors for permanent dark surfaces so the guard reads them correctly. */
.rail { background-color: #111914 !important; }
.topbar { background-color: #111914 !important; }
.core-legal-footer { background-color: #0B100E !important; }
.focus-console,
.thread-compose,
.thread-list,
.thread-main,
.thread-head { background-color: #111914 !important; }