/* Action and feedback colours stay distinct from the emerald/gold brand palette. */
:root {
  --status-info: #234f91;
  --status-info-bg: #edf4ff;
  --status-info-line: #91b2e2;
  --status-success: #17623b;
  --status-success-bg: #edf9f0;
  --status-success-line: #83bc98;
  --status-warning: #82500b;
  --status-warning-bg: #fff4db;
  --status-warning-line: #cba34e;
  --status-danger: #af2330;
  --status-danger-bg: #fff0f1;
  --status-danger-line: #de929b;
  --action-danger: #b42332;
  --action-danger-hover: #901b28;
  --action-success: #187047;
  --action-success-hover: #125537;
  --action-info: #285b9e;
  --action-info-hover: #1f477e;
  --action-warning: #f4c760;
  --action-warning-hover: #e8b745;
  --on-status-action: #fff;
  --on-warning-action: #493000;
  --neutral-line: #819086;
  --neutral-bg: #f3f5f2;
  --neutral-hover: #e5eae4;
  --status-focus: #2463aa;
  --status-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7v.1'/%3E%3C/g%3E%3C/svg%3E");
  --status-success-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m7.5 12 3 3 6-6'/%3E%3C/g%3E%3C/svg%3E");
  --status-warning-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 10 18H2L12 3ZM12 9v5M12 17v.1'/%3E%3C/g%3E%3C/svg%3E");
  --status-danger-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 2-6 6v8l6 6h8l6-6V8l-6-6H8ZM12 7v6M12 17v.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* The preferences script resolves System to the active light/dark theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --status-info: #aecbfa;
    --status-info-bg: #1b2c45;
    --status-info-line: #577cab;
    --status-success: #a2e0b8;
    --status-success-bg: #1a3a2a;
    --status-success-line: #528c66;
    --status-warning: #f3d28d;
    --status-warning-bg: #3b2e18;
    --status-warning-line: #a88749;
    --status-danger: #ffb5bf;
    --status-danger-bg: #42232c;
    --status-danger-line: #b76d7b;
    --action-danger: #f18a95;
    --action-danger-hover: #ffa3ad;
    --action-success: #9bd7b1;
    --action-success-hover: #b3e5c5;
    --action-info: #a7c8fa;
    --action-info-hover: #c1d9ff;
    --action-warning: #f4c760;
    --action-warning-hover: #ffda7d;
    --on-status-action: #17251e;
    --on-warning-action: #493000;
    --neutral-line: #799084;
    --neutral-bg: #223b30;
    --neutral-hover: #304d3f;
    --status-focus: #b1d2ff;
  }
}
:root[data-theme=dark] {
  --status-info: #aecbfa;
  --status-info-bg: #1b2c45;
  --status-info-line: #577cab;
  --status-success: #a2e0b8;
  --status-success-bg: #1a3a2a;
  --status-success-line: #528c66;
  --status-warning: #f3d28d;
  --status-warning-bg: #3b2e18;
  --status-warning-line: #a88749;
  --status-danger: #ffb5bf;
  --status-danger-bg: #42232c;
  --status-danger-line: #b76d7b;
  --action-danger: #f18a95;
  --action-danger-hover: #ffa3ad;
  --action-success: #9bd7b1;
  --action-success-hover: #b3e5c5;
  --action-info: #a7c8fa;
  --action-info-hover: #c1d9ff;
  --action-warning: #f4c760;
  --action-warning-hover: #ffda7d;
  --on-status-action: #17251e;
  --on-warning-action: #493000;
  --neutral-line: #799084;
  --neutral-bg: #223b30;
  --neutral-hover: #304d3f;
  --status-focus: #b1d2ff;
}

.notice, .outcome, [data-tone] {
  --feedback-text: var(--status-info);
  --feedback-bg: var(--status-info-bg);
  --feedback-line: var(--status-info-line);
  --feedback-icon: var(--status-info-icon);
}
.notice.success, .outcome.success, [data-tone=success] {
  --feedback-text: var(--status-success);
  --feedback-bg: var(--status-success-bg);
  --feedback-line: var(--status-success-line);
  --feedback-icon: var(--status-success-icon);
}
.notice.warning, .outcome.warning, [data-tone=warning] {
  --feedback-text: var(--status-warning);
  --feedback-bg: var(--status-warning-bg);
  --feedback-line: var(--status-warning-line);
  --feedback-icon: var(--status-warning-icon);
}
.notice.error, .notice.danger, .outcome.error, .outcome.danger, [data-tone=danger] {
  --feedback-text: var(--status-danger);
  --feedback-bg: var(--status-danger-bg);
  --feedback-line: var(--status-danger-line);
  --feedback-icon: var(--status-danger-icon);
}
.premium-body .notice, .premium-body .outcome {
  position: relative;
  color: var(--feedback-text);
  background: var(--feedback-bg);
  border: 1px solid var(--feedback-line);
  border-inline-start: 4px solid var(--feedback-text);
  border-radius: 9px;
  padding: 1rem 1rem 1rem 3rem;
  font-size: .9rem;
  line-height: 1.65;
}
.premium-body .notice::before, .premium-body .outcome::before {
  content: '';
  position: absolute;
  inset-inline-start: 1rem;
  top: 1.15rem;
  width: 1.2rem;
  height: 1.2rem;
  background: currentColor;
  mask: var(--feedback-icon) center / contain no-repeat;
}
.premium-body .notice a, .premium-body .outcome a {
  color: inherit;
  text-decoration: underline;
}
#storage-state[data-tone], #premium-save-status[data-tone] {
  color: var(--feedback-text);
  background: var(--feedback-bg);
  border: 1px solid var(--feedback-line);
  border-radius: 6px;
  padding: .4rem .65rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#storage-state[data-tone] {width: fit-content; max-width: 100%;}
#premium-save-status[data-tone] {font-size: 0.875rem;}
#storage-state[data-tone]::before, #premium-save-status[data-tone]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: .4em;
  vertical-align: -.12em;
  background: currentColor;
  mask: var(--feedback-icon) center / contain no-repeat;
}

/* Validation errors are red; a modelled funding warning remains amber. */
.premium-body .premium-validation {color: var(--status-danger);}
.premium-body [aria-invalid=true] {border-color: var(--status-danger)!important;}
.premium-body .home-quick-start [aria-invalid=true] {outline-color: var(--status-danger);}
.premium-body .gain {color: var(--status-success);}
.premium-body .loss {color: var(--status-danger);}

.premium-body button:is(.danger, .success, .warning, .info, .default) {
  background: var(--button-bg);
  color: var(--button-text, var(--on-status-action));
  border: 1px solid var(--button-bg);
  font-weight: 650;
}
.premium-body button.danger {--button-bg: var(--action-danger); --button-hover: var(--action-danger-hover);}
.premium-body button.success {--button-bg: var(--action-success); --button-hover: var(--action-success-hover);}
.premium-body button.info {--button-bg: var(--action-info); --button-hover: var(--action-info-hover);}
.premium-body button.warning {--button-bg: var(--action-warning); --button-hover: var(--action-warning-hover); --button-text: var(--on-warning-action);}
.premium-body button.default {--button-bg: var(--neutral-bg); --button-hover: var(--neutral-hover); --button-text: var(--text); border-color: var(--neutral-line);}
.premium-body button:is(.danger, .success, .warning, .info, .default):hover:not(:disabled) {
  background: var(--button-hover);
  border-color: var(--button-hover);
}
.premium-body button:is(.danger-outline, .remove) {
  color: var(--status-danger);
  border: 1px solid var(--status-danger-line);
  background: var(--surface);
}
.premium-body button:is(.danger-outline, .remove):hover:not(:disabled) {
  background: var(--status-danger-bg);
  border-color: var(--status-danger);
}
.premium-body button:is(.danger, .danger-outline, .success, .warning, .info, .default, .remove):focus-visible {
  outline: 3px solid var(--status-focus);
  outline-offset: 3px;
}
.premium-body button:is(.danger, .danger-outline, .success, .warning, .info, .default, .remove):disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* One dialog presents the scope, its consequences, and a single Delete action. */
.premium-body #delete-dialog {
  width: min(38rem, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.75rem;
  border: 1px solid var(--status-danger-line);
  border-radius: 16px;
  box-shadow: 0 24px 80px #0004;
}
#delete-dialog .delete-heading {display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem;}
#delete-dialog .delete-heading > div {min-width: 0;}
#delete-dialog .delete-heading h2 {font-size: 1.75rem; line-height: 1.2; margin: 0;}
#delete-dialog .delete-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--status-danger-line);
  border-radius: 50%;
  color: var(--status-danger);
  background: var(--status-danger-bg);
}
#delete-dialog .delete-icon svg {width: 1.35rem; height: 1.35rem;}
#delete-description {color: var(--muted); font-size: .95rem; margin: .55rem 0 0;}
#delete-dialog > label {color: var(--text); font-size: .9rem;}
#delete-scope {margin-top: .5rem; min-height: 48px;}
#delete-record-list {display: grid; gap: .5rem; margin: 1rem 0;}
#delete-record-list > label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  line-height: 1.6;
}
#delete-record-list > label:has(input:checked) {border-color: var(--status-danger-line); background: var(--status-danger-bg);}
#delete-record-list input[type=checkbox] {flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; min-height: 1.1rem; margin: .18rem 0 0; accent-color: var(--status-danger);}
#delete-dialog #delete-review {margin: 1.25rem 0;}
#delete-dialog .delete-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
#delete-dialog .delete-actions button {flex: 0 1 auto; min-width: 6.75rem; padding: .7rem 1.25rem;}
#delete-dialog #delete-cancel {color: var(--text); background: var(--neutral-bg); border-color: var(--neutral-line);}
#delete-dialog #delete-cancel:hover:not(:disabled) {background: var(--neutral-hover);}
#delete-dialog > .hint {font-size: 0.875rem; line-height: 1.65; margin: 1rem 0 0;}
@media (max-width: 540px) {
  .premium-body #delete-dialog {padding: clamp(16px, 4vw, 28px);}
  #delete-dialog .delete-heading {flex-direction: column; gap: .7rem; align-items: flex-start;}
  #delete-dialog .delete-heading > div {width: 100%;}
  #delete-dialog .delete-heading h2 {font-size: 1.5rem;}
  #delete-dialog .delete-icon {flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem;}
  #delete-dialog .notice {padding: .75rem;}
  #delete-dialog .notice::before {position: static; display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: .4em; vertical-align: -.18em;}
  #delete-dialog .delete-actions button {flex: 1 1 6rem; min-width: 0;}
}
@media (forced-colors: active) {
  .premium-body .notice, .premium-body .outcome, #storage-state[data-tone], #premium-save-status[data-tone] {border-color: CanvasText;}
  .premium-body button:is(.danger, .danger-outline, .success, .warning, .info, .default, .remove) {border-color: ButtonText;}
  #delete-record-list > label:has(input:checked) {outline: 2px solid Highlight;}
}