/* banner.css: Banner (component 21). Owner: group B (P2.T5).
   Padding --space-4 by --space-5, --radius-control, 1 px --border, 3 px inline-start marker in the tone colour, background the tone's
   subtle token. Icon --icon-md in the tone colour, --space-4 gap, message --type-body --text with an optional first sentence in weight
   600, one action and the dismiss at the inline-end. At small width the action drops below the message. */
[data-component="banner"] {
  display: grid;
  inline-size: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "icon body action dismiss";
  align-items: start;
  gap: var(--space-4);
  box-sizing: border-box;
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-inline-start: var(--border-width-accent) solid var(--info);
  border-radius: var(--radius-control);
  background: var(--info-subtle);
  color: var(--text);
  font: var(--type-body);
}
[data-component="banner"][data-tone="warning"] { background: var(--warning-subtle); border-inline-start-color: var(--warning); }
[data-component="banner"][data-tone="critical"] { background: var(--critical-subtle); border-inline-start-color: var(--critical); }
[data-component="banner"] > .icon { grid-area: icon; color: var(--info); }
[data-component="banner"][data-tone="warning"] > .icon { color: var(--warning); }
[data-component="banner"][data-tone="critical"] > .icon { color: var(--critical); }
.banner__body { grid-area: body; display: grid; gap: var(--space-3); min-inline-size: 0; }
.banner__message { margin: 0; max-inline-size: var(--size-prose); }
.banner__title { font-weight: 600; }
.banner__action {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: var(--size-control-sm);
  padding-block: 0;
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: var(--type-button);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.banner__action:hover,
.banner__action[data-force="hover"] { background: var(--surface-hover); text-decoration: none; }
.banner__action:active,
.banner__action[data-force="active"] { background: var(--border); }
.banner__action[aria-disabled="true"] { background: var(--surface-sunken); border-color: var(--border); color: var(--text-disabled); cursor: not-allowed; }
.banner__action--link { border: 0; background: none; padding-inline: 0; color: var(--brand); text-decoration: underline; text-underline-offset: var(--space-1); }
.banner__action--link:hover { background: none; color: var(--brand-hover); text-decoration: underline; }
.banner__dismiss {
  grid-area: dismiss;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-inline-size: var(--size-target-min);
  min-block-size: var(--size-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.banner__dismiss:hover,
.banner__dismiss[data-force="hover"] { background: var(--surface-hover); color: var(--text); }
.banner__dismiss:active,
.banner__dismiss[data-force="active"] { background: var(--border); }
.banner__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: var(--type-label);
  cursor: pointer;
}
.banner__toggle .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.banner__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.banner__toggle:hover { color: var(--brand-hover); text-decoration: underline; }
.banner__panel { padding-block: var(--space-3); padding-inline: var(--space-4); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); }

/* The stack: critical first, --space-3 apart. */
.banner-stack { display: grid; gap: var(--space-3); }
.banner-stack__more {
  justify-self: start;
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: var(--type-button);
  cursor: pointer;
}
.banner-stack__more:hover { background: var(--surface-hover); }

@media (width < 768px) {
  [data-component="banner"] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon body dismiss" ". action action";
  }
  .banner__action { justify-self: start; }
}
/* The same stacked layout on request (data-stacked), for a banner in a narrow container such as the kitchen sink's states grid. */
[data-component="banner"][data-stacked="true"] {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon body dismiss" ". action action";
}
[data-component="banner"][data-stacked="true"] .banner__action { justify-self: start; }