/* Notice — the inline callout box (it-32.2).
 *
 * This is not a new look. It is the pattern that was copy-pasted inline into TEN templates
 * (a .float-card plus a 4px left border in a role color: primary = info, tertiary = warning,
 * error = error), finally given a name. Anything that needs to say something ABOUT the page —
 * a validation failure, a warning, an explanatory note — uses this.
 *
 * Design-system only: the float-card surface + MD3 role tokens. No new colors.
 *
 * Variants: --info (neutral / explanatory) · --warning (this needs your attention) ·
 * --error (this failed, or is broken).
 */

.notice {
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  border-left: 4px solid var(--md-sys-color-outline-variant);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.notice--info { border-left-color: var(--md-sys-color-primary); }
.notice--warning { border-left-color: var(--md-sys-color-tertiary); }
.notice--error { border-left-color: var(--md-sys-color-error); }

/* An icon + text row. The icon carries the variant's color — the body text stays on-surface, so a
 * long message is never a wall of red (which the pre-notice error callouts were). */
.notice__row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.notice__icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.4;
}

.notice--info .notice__icon { color: var(--md-sys-color-primary); }
.notice--warning .notice__icon { color: var(--md-sys-color-tertiary); }
.notice--error .notice__icon { color: var(--md-sys-color-error); }

.notice__title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

/* Compact variant — for a stack of short one-line notices (the it-32.2 rule-hazard flags), where
 * the full card padding would swamp the text. */
.notice--compact {
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.5rem;
  box-shadow: none;
  background: var(--md-sys-color-surface-container-low);
  font-size: var(--md-sys-typescale-body-small-size);
}
.notice--compact .notice__icon { font-size: 18px; }