/* notifications.css - every visual decision for notification cards (item 4).
 * Self-contained: card design changes never touch styles.css or any JS.
 * Severity tints stay in the app's palette family; the warning pair is
 * defined here so this file remains drop-in. */

:root {
  --notice-info-accent: #185fa5;   /* matches --user-accent */
  --notice-info-bg: #e6f1fb;
  --notice-notice-accent: #854f0b; /* matches --tool-accent */
  --notice-notice-bg: #faeeda;
  --notice-warning-accent: #a5341d;
  --notice-warning-bg: #fbe9e4;
}

#notifications {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #e6e4dc);
  max-height: 40%;
  overflow-y: auto;
  flex: 0 0 auto;
}
#notifications.has-cards { display: flex; }

.notice-card {
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-sm, 6px);
  padding: 7px 10px 8px;
  font-size: 12.5px;
  line-height: 1.45;
}
.notice-info    { border-color: var(--notice-info-accent);    background: var(--notice-info-bg); }
.notice-notice  { border-color: var(--notice-notice-accent);  background: var(--notice-notice-bg); }
.notice-warning { border-color: var(--notice-warning-accent); background: var(--notice-warning-bg); }

.notice-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.notice-sev {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.notice-info .notice-sev    { color: var(--notice-info-accent); }
.notice-notice .notice-sev  { color: var(--notice-notice-accent); }
.notice-warning .notice-sev { color: var(--notice-warning-accent); }

.notice-title {
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

.notice-dismiss {
  border: 0;
  background: transparent;
  padding: 0 2px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted, #6b6a63);
  cursor: pointer;
}
.notice-dismiss:hover { color: var(--text, #1f1f1d); background: transparent; }

.notice-detail {
  margin-top: 2px;
  color: var(--text, #1f1f1d);
  white-space: pre-wrap;
  word-break: break-word;
}

.notice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.notice-actions button {
  font-size: 11.5px;
  padding: 3px 9px;
}
.notice-fix { font-weight: 600; }
.notice-recover { font-weight: 600; }
.notice-fix-note {
  font-size: 10.5px;
  font-style: italic;
  color: var(--text-muted, #6b6a63);
}

/* dark mode (audit A12): the notice tints get night values that keep the
 * detail text (--text, #e8e6df in dark) at AA contrast on every card
 * background, and each accent readable against its own tint. */
body.dark {
  --notice-info-accent: #6cabe8;
  --notice-info-bg: #1c2c3d;
  --notice-notice-accent: #d9a35c;
  --notice-notice-bg: #35281a;
  --notice-warning-accent: #ef9a8d;
  --notice-warning-bg: #402320;
}