/* ==========================================================================
   Core — the one stylesheet every surface loads first
   The marketing site, CAA Console, the Passport and the dealership pages each link
   this, then their own sheet (site.css, console.css, passport.css, select.css).
   The link page links neither; it is one response and link.css.

   Three parts, in the order they cascade:

     1. Tokens  — spacing, radii, type sizes, motion timings, and the old
                  palette's names (--black, --carbon, --gunmetal, --champagne…).
                  Colour is not decided here any more: each surface declares
                  CAA Console's --console-* theme tokens, light and dark, and re-points
                  these names at them. tools/a11y.test.mjs checks every copy
                  against console.css.
     2. Base    — the reset, document defaults and the rules that keep
                  [hidden], focus rings and reduced motion correct everywhere.
     3. UI      — the shared primitives: wrap, band, button, panel, card,
                  choice, chip, field, badge, specs, toast. Written against
                  the names in part 1, so a surface restyles one by
                  re-pointing a name or overriding the rule in its own sheet.

   This used to be three files (tokens.css, base.css, ui.css), linked one
   after another by every shell. They are one file now in the same order, so
   nothing cascades differently and every page makes two fewer requests.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* --- The typeface ----------------------------------------------------------
   Each surface declares its own faces — Inter for text, Newsreader for
   headings, served from this origin so no font request reaches a third party
   before a visitor has chosen anything — and points --font at them. The value
   here is only the fallback for a page that forgets to.
   -------------------------------------------------------------------------- */
:root {
  /* --- Surface ramp -------------------------------------------------- */
  --black: #0a0a0a;      /* page ground */
  --carbon: #181818;     /* raised panel / alternating band */
  --gunmetal: #3a3a3a;   /* hairline rules and borders */
  --hairline: rgba(255, 255, 255, 0.1); /* top-edge highlight on panels */

  /* --- Ink ----------------------------------------------------------- */
  --white: #ffffff;
  --light: #e8e8e8;      /* body copy on dark */
  --grey: #8d8d8d;       /* secondary copy, inactive state */

  /* --- Brand accents --------------------------------------------------
     Each accent carries a fixed meaning across the whole system; they are
     never used decoratively. crimson = action + PPF, champagne = the brand
     voice (eyebrows, emphasis, money), blue = coating, whatsapp = the one
     channel the customer actually replies on. */
  --crimson: #b11217;
  --crimson-dark: #8f0e12;
  /* Crimson as *text* fails WCAG AA on the surface ramp: #b11217 on --black is
     2.80:1 — short of the 4.5:1 body-text floor, and short even of the 3:1 one
     for large text and UI. White on #b11217 is 7.07:1, so the brand red is
     right where it is a fill (buttons, badges, the skip link) and wrong
     wherever it is the ink — which included every error message on the site.
     Same hue, lifted to 5.71:1 on --black and 5.12:1 on the raised --carbon
     panel. For `color:` only; fill and border stay on --crimson above. */
  --crimson-text: #e85a5f;
  --champagne: #b98955;
  --blue: #1f5eff;
  /* Same problem as crimson, smaller margin: #1f5eff on --black is 3.87:1 —
     fine as a fill or a large-text accent, short of 4.5:1 for the 10px badge
     label that is its only `color:` use. Lifted to 5.35:1. */
  --blue-text: #4a7dff;
  --whatsapp: #25d366;

  /* Pillar accents, referenced by id so data and CSS agree. */
  --pillar-ppf: var(--crimson);
  --pillar-coating: var(--blue);
  --pillar-correction: var(--white);
  --pillar-wrap: var(--champagne);
  --pillar-detailing: var(--grey);

  /* --- Status ---------------------------------------------------------- */
  --ok: #2e9e5b;
  --warn: #d99a2b;

  /* --- Radii ---------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* --- Layout --------------------------------------------------------- */
  --pad: 20px;
  --maxw: 1280px;
  --maxw-prose: 820px;
  --maxw-narrow: 760px;

  /* The iOS home indicator, plus a margin: what a bar fixed to the foot of
     the screen (the configurator's estimate, the consent banner) clears. */
  --bar-inset: calc(14px + env(safe-area-inset-bottom));

  /* --- Type ----------------------------------------------------------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: var(--font);

  /* Fluid display sizes, taken from the design's clamp() pairs. */
  --fs-hero: clamp(40px, 11vw, 96px);
  --fs-h1: clamp(36px, 9vw, 72px);
  --fs-h2: clamp(28px, 6.5vw, 56px);
  --fs-h3: clamp(24px, 5.5vw, 40px);
  --fs-deck: clamp(16px, 4.2vw, 20px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 11px;

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t-base: 0.25s;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.6);
  --blur-glass: blur(24px) saturate(180%);
}

/* The old palette's scheme. Every surface now declares its own light and dark
   theme from CAA Console's --console-* tokens (console.css, site.css, passport.css,
   select.css, the link page) and resets color-scheme with it; this is the
   default only for a page that declares neither. */
:root {
  color-scheme: dark;
}

/* ==========================================================================
   2. Base — reset, document defaults and script-correctness rules
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--black);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100svh;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* The user-agent rule for [hidden] is `display: none` at the lowest possible
   specificity, so any component that sets its own `display` silently defeats
   it and renders an empty box. Restate it as a hard rule once, here, rather
   than remembering to guard every component that uses grid or flex. */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--champagne);
  text-decoration: none;
}

a:hover {
  color: var(--light);
}

::selection {
  background: var(--crimson);
  color: #fff;
}

input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.5;
}

/* Every interactive element gets the same visible focus ring. Removing the
   default without replacing it is how a keyboard user loses their place. */
:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden but still announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first tab stop on every surface. */
.skip-link {
  position: absolute;
  left: 14px;
  top: -60px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--crimson);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top var(--t-fast) var(--ease);
}

.skip-link:focus {
  top: 14px;
  color: #fff;
}

/* ==========================================================================
   3. UI — the shared primitives
   ========================================================================== */

/* The Claude Design source expresses everything as inline style attributes,
   which is right for a design file and wrong for a codebase. Every repeated
   inline treatment there becomes exactly one class here, so a change to (say)
   the panel edge happens once instead of in forty places. */

/* --- Layout ------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.wrap--prose {
  max-width: var(--maxw-prose);
}

.wrap--narrow {
  max-width: var(--maxw-narrow);
}

.band {
  padding-block: 72px;
}

.band--tight {
  padding-block: 48px;
}

.band--carbon {
  background: var(--carbon);
  border-top: 1px solid var(--gunmetal);
}

/* --- Eyebrow ------------------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  line-height: 1.4;
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  background: var(--crimson);
}

/* A bare label with no rule — used inside cards where the rule would fight
   the card's own left border. */
.label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
}

.label--crimson {
  color: var(--crimson-text);
}

.label--grey {
  color: var(--grey);
}

/* --- Display type ------------------------------------------------------- */
.display {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display--hero {
  font-size: var(--fs-hero);
  line-height: 0.95;
  max-width: 14em;
}

.display--1 {
  font-size: var(--fs-h1);
}

.display--2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.display--3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.display .accent {
  color: var(--champagne);
}

.deck {
  font-size: var(--fs-deck);
  line-height: 1.55;
  color: var(--light);
  text-wrap: pretty;
  max-width: 42ch;
}

.lede {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--grey);
  text-wrap: pretty;
  max-width: 44ch;
}

.quote {
  font-size: 18px;
  line-height: 1.5;
  color: var(--champagne);
  font-style: italic;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding-inline: 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--light);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

.btn--sm {
  height: 48px;
  padding-inline: 22px;
  font-size: var(--fs-xs);
}

.btn--md {
  height: 52px;
  padding-inline: 24px;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--crimson-dark);
  border-color: var(--crimson-dark);
  color: #fff;
}

.btn--ghost {
  border-color: var(--gunmetal);
  color: var(--light);
}

.btn--ghost:hover {
  border-color: var(--champagne);
  color: var(--white);
}

.btn--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--black);
}

.btn--whatsapp:hover {
  color: var(--black);
  filter: brightness(1.08);
}

.btn--outline-whatsapp {
  border-color: var(--whatsapp);
  color: var(--white);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Quiet uppercase text link with a trailing chevron, used for "All work ›". */
.textlink {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.underlink {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--light);
  border-bottom: 1px solid var(--gunmetal);
  padding-bottom: 4px;
}

.underlink:hover {
  border-bottom-color: var(--champagne);
}

/* --- Panels and cards ---------------------------------------------------- */
/* The signature surface: carbon fill, gunmetal edge, and a brighter top edge
   so a panel reads as lit from above rather than as a flat rectangle. */
.panel {
  background: var(--carbon);
  border: 1px solid var(--gunmetal);
  border-top-color: var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px 26px;
}


.card {
  background: var(--carbon);
  border: 1px solid var(--gunmetal);
  border-top-color: var(--hairline);
  border-radius: var(--r-md);
  padding: 26px 22px;
}


/* Card whose left edge carries a pillar accent. */
.card--accent {
  border-left: 3px solid var(--accent, var(--gunmetal));
}

a.card,
button.card {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--white);
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

a.card:hover,
button.card:hover {
  background: #101010;
  border-color: var(--gunmetal);
  border-left-color: var(--accent, var(--champagne));
  color: var(--white);
}

/* --- Rule grid -----------------------------------------------------------
   A grid whose 1px gaps show the container's gunmetal background, giving
   hairline dividers between cells without per-cell border bookkeeping. */
.rule-grid {
  display: grid;
  gap: 1px;
  background: var(--gunmetal);
  border: 1px solid var(--gunmetal);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 220px), 1fr));
}

.rule-grid > * {
  background: var(--black);
  padding: 24px 20px;
}

/* --- Spec list ------------------------------------------------------------
   Key on the left, value hard right, hairline between rows. Used for case
   specs, equipment, opening hours, passport attributes and Console detail panes. */
.specs {
  border-top: 1px solid var(--gunmetal);
}

.specs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gunmetal);
}

.specs__k {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.specs__v {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Client-owed notice ---------------------------------------------------
   A deliberate, visible blank. The design marks every fact the studio has not
   yet supplied — warranty terms, real reviews, the pickup fee — rather than
   inventing one, because an invented warranty term on a live site is a
   liability. Each block is driven by content.js and disappears on its own the
   moment the real value is filled in. */
.owed {
  border: 1px dashed var(--crimson);
  border-radius: var(--r-md);
  padding: 18px;
}

.owed__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson-text);
  margin-bottom: 8px;
}

.owed__body {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--light);
}

/* --- Chips and filters ----------------------------------------------------- */
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--gunmetal);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--light);
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--champagne);
}

.chip--filter {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chip[aria-pressed="true"] {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
}

/* --- Form controls --------------------------------------------------------- */
.field {
  width: 100%;
  height: 56px;
  padding-inline: 20px;
  background: var(--carbon);
  border: 1px solid var(--gunmetal);
  border-radius: var(--r-pill);
  color: var(--white);
  font-size: var(--fs-body);
  outline: none;
}

.field::placeholder {
  color: var(--grey);
}

.field:focus {
  border-color: var(--champagne);
}

.field--boxy {
  height: 48px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

textarea.field {
  height: auto;
  min-height: 110px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  line-height: 1.6;
  resize: vertical;
}

select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%),
    linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* Choice card — a radio or checkbox styled as a selectable panel. The real
   input stays in the DOM (hidden but focusable) so keyboard and screen-reader
   behaviour is the platform's, not a reimplementation. */
.choice {
  position: relative;
  display: block;
  min-height: 64px;
  padding: 16px 18px;
  background: var(--black);
  border: 1px solid var(--gunmetal);
  border-top-color: var(--hairline);
  border-left: 3px solid var(--accent, var(--gunmetal));
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.choice:hover {
  background: #101010;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice input:focus-visible ~ .choice__top {
  outline: 2px solid var(--champagne);
  outline-offset: 6px;
  border-radius: 4px;
}

.choice__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.choice__label {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--light);
}

.choice__price {
  font-size: var(--fs-xs);
  color: var(--champagne);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.choice__spec {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
}

.choice:has(input:checked) {
  background: var(--carbon);
  border-color: var(--champagne);
  border-left-color: var(--accent, var(--crimson));
}

.choice:has(input:checked) .choice__label {
  color: var(--white);
}

/* --- Glass bar ------------------------------------------------------------
   Shared by the tab bar, the estimate bar and the sheet. */
.glass {
  background: rgba(24, 24, 24, 0.8);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--gunmetal);
  border-top-color: rgba(255, 255, 255, 0.13);
  box-shadow: var(--shadow-float);
}

/* --- Badges ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--gunmetal);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

.badge--ok {
  border-color: rgba(46, 158, 91, 0.5);
  color: var(--ok);
}

.badge--warn {
  border-color: rgba(217, 154, 43, 0.5);
  color: var(--warn);
}

.badge--danger {
  border-color: rgba(177, 18, 23, 0.6);
  color: var(--crimson-text);
}

.badge--info {
  border-color: rgba(31, 94, 255, 0.5);
  color: var(--blue-text);
}


/* --- Grids ----------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr));
}

.grid--16 {
  gap: 16px;
}

.stack {
  display: grid;
  gap: var(--gap, 16px);
}

/* --- Empty state ------------------------------------------------------------ */
.empty {
  padding: 44px 22px;
  border: 1px dashed var(--gunmetal);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--grey);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* --- Notifications ----------------------------------------------------------
   Top right, stacked, and shaped like notifications rather than like a banner.

   These used to be centred at the top of the screen, 440px wide, which put
   every "Saved." directly over the heading of whatever had just been saved —
   the one part of the screen the person was looking at. Top right is out of
   the way of the content and is where the bell they can be re-read from
   lives, so a notice that fades has an obvious place to have gone.

   The host does not take pointer events; each notification does, so the page
   underneath stays clickable between them and the dismiss button still works. */
.toast-host {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 120;
  display: grid;
  gap: 10px;
  justify-items: end;
  width: min(380px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: rgba(24, 24, 24, 0.96);
  border: 1px solid var(--gunmetal);
  border-left: 3px solid var(--champagne);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-sm);
  color: var(--light);
}

/* Added by the timer a beat before the node is removed, so a notification
   fades out deliberately instead of vanishing between frames. It used to
   slide in and out as well; motion is colour and opacity only now. */
.toast[data-leaving="true"] {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .toast[data-leaving="true"] {
    transition: none;
  }
}

.toast__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(185, 152, 85, 0.16);
  color: var(--champagne);
  flex: none;
}

.toast__body {
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* The kind, above the message, so a glance answers "is this bad news?"
   without reading the sentence. */
.toast__label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 3px;
}

.toast__close {
  flex: none;
  border: 0;
  background: none;
  color: var(--dim);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  border-radius: 5px;
  transition: color var(--t-fast) var(--ease);
}

.toast__close:hover {
  color: var(--light);
}

.toast--ok {
  border-left-color: var(--ok);
}

.toast--ok .toast__icon {
  background: rgba(61, 176, 106, 0.16);
  color: var(--ok);
}

.toast--danger {
  border-left-color: var(--crimson);
}

.toast--danger .toast__icon {
  background: rgba(200, 42, 54, 0.16);
  color: var(--crimson-text);
}

.toast--warn {
  border-left-color: var(--amber, #d79a2b);
}

.toast--warn .toast__icon {
  background: rgba(215, 154, 43, 0.16);
  color: var(--amber, #d79a2b);
}

/* On a phone the notification spans the width it is given rather than sitting
   in a 380px column off the right edge. */
@media (max-width: 620px) {
  .toast-host {
    right: 12px;
    left: 12px;
    top: 12px;
    width: auto;
  }
}