/* Pathminder design system -- the pieces PM1's stylesheet does not have yet.
 *
 * WHAT THIS FILE IS
 * finder.css, beside this file, is the design system as PM1 implements it, vendored
 * and never edited here (design_system/VENDORED.md). The designer's design-system
 * drops sometimes run ahead of it: a component is specified, a page in this
 * repository needs it, and PM1 has not built it. That component is written HERE,
 * in the design system's own names (pm-*, and the designer's token names), so that
 * it is a design-system component from its first day -- reusable by the meeting
 * finder when that is rebuilt in this repository -- and not a page's private copy.
 *
 * IT SHOULD ONLY EVER SHRINK. When a re-sync of finder.css brings a piece that is
 * here, delete it from here; a test fails until it is (tests/portal/
 * test_components.py compares the names the two files define). Nothing that
 * belongs to one page goes in this file: portal-only layout is portal.css's.
 *
 * Loaded after finder.css and before portal.css (portal/templates/portal/base.html).
 * Same rules as finder.css and portal.css: every literal once, in a token; no hex
 * or px in a rule; hover inside @media (hover: hover) with :active repeating it;
 * one breakpoint at 768px. PM1's token dialect: a type token is weight/size/line
 * only, and the rule appends the family.
 *
 * WHAT IS HERE
 *   1. Status banner -- design-system drop 3 (2026-10-13), StatusBanner. The
 *      success tone only: it is the one tone a page uses. The designer specifies
 *      four (success, warning, error, quiet); the others are added, with their
 *      tokens, when a page needs one. Markup: templates/cotton/pm/status_banner.html.
 */

:root {
  /* ---- Status banner: the designer's four success colours, under the designer's
   * names (tokens/colors.css in the design-system drop). Status teal is for
   * banners only: never a pill, a rail or anything on the map. */
  --color-status-success-ink: #0f4a43;     /* its words, and Dismiss */
  --color-status-success-glyph: #17675d;
  --color-status-success-bg: #e3f2f0;
  --color-status-success-line: #8cc4bc;
  /* ... and its measurements, which the designer's component writes in place. */
  --mix-statusbanner-hover: 8%;            /* how much of the ink tints Dismiss under a pointer */
  --space-statusbanner: 14px 6px 14px 16px; /* Dismiss brings its own room on the right */
  --space-statusbanner-close: -11px 0;     /* ... and overhangs the padding above and below it */
  --size-statusbanner-glyph: 18px;
  --size-statusbanner-close-glyph: 14px;
  --line-statusbanner-glyph: 1.3;          /* the glyph on the lead's line height, so they share a first line */
  --measure-statusbanner: 640px;           /* its widest on desktop, padding and border included */
}

/* ==========================================================================
   Status banner (<c-pm.status-banner>)
   The outcome of something the person just did, said where they will notice it.
   Not .pm-banner, which is the finder's "this meeting is canceled" and
   announcement banner: a different thing with a different meaning.
   ========================================================================== */

/* The designer's values, measured against the host portal's Log out and Account
   mocks (handoff drops 7 and 8). Its sentences break where the words run out, as
   those mocks' do. On desktop it is at most 640px wide, edge to edge. */
.pm-statusbanner {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-chip);
  max-width: var(--measure-statusbanner);
  padding: var(--space-statusbanner);
  background: var(--color-status-success-bg);
  border: 1px solid var(--color-status-success-line);
  border-radius: var(--radius-card);
  /* Clear of the screen's edge when its script brings it into view. */
  scroll-margin: var(--gap-block);
}
.pm-statusbanner__glyph {
  flex: none;
  font-size: var(--size-statusbanner-glyph);
  line-height: var(--line-statusbanner-glyph);
  color: var(--color-status-success-glyph);
}
/* The lead, and the sentence 3px under it. */
.pm-statusbanner__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
  flex: 1;
  min-width: 0;
}
.pm-statusbanner__lead {
  font: var(--type-label) var(--font-text);
  color: var(--color-status-success-ink);
}
.pm-statusbanner__message {
  font: var(--type-meta) var(--font-text);
  color: var(--color-status-success-ink);
}
/* Dismiss: 44px to press. Its margin lets it overhang the banner's padding, so a
   banner with a lead alone is no taller for having it. Under a pointer it takes a
   tint of the banner's own ink (mixed here, so the ink is written once). */
.pm-statusbanner__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-tap-min);
  height: var(--size-tap-min);
  margin: var(--space-statusbanner-close);
  border-radius: var(--radius-inline);
  color: var(--color-status-success-ink);
}
.pm-statusbanner__close i { font-size: var(--size-statusbanner-close-glyph); line-height: 1; }
@media (hover: hover) {
  .pm-statusbanner__close:hover {
    background: color-mix(in srgb, var(--color-status-success-ink) var(--mix-statusbanner-hover), transparent);
  }
}
.pm-statusbanner__close:active {
  background: color-mix(in srgb, var(--color-status-success-ink) var(--mix-statusbanner-hover), transparent);
}
@media (max-width: 767px) {
  /* The whole width of its column, inside the 16px gutter. */
  .pm-statusbanner { max-width: none; }
}