/* Home Assistant blue, in both schemes. */
:root {
  --md-primary-fg-color: #41bdf5;
  --md-primary-fg-color--light: #6fcef8;
  --md-primary-fg-color--dark: #2a9fd6;
  --md-accent-fg-color: #ff9800;

  /* HA blue is too light to carry white text: white on #41bdf5 is 2.14:1.
     The header therefore runs on a navy struck from the same hue, and the
     blue stays an accent — on the active tab, the logo and the links. */
  --parcel-header-bg: #0d2a3a;
  --parcel-header-ink: #ffffff;

}

/* Same reason, on a white page: HA blue as link ink is 2.14:1. This is the
   same hue carried down to 5.5:1. The light blue stays for fills only.
   Scheme-scoped, because Material points the token at the primary colour from
   inside the scheme block and would win against :root. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #12719c;
}

/* Material paints secondary buttons in the primary colour, which on white is
   the same 2.14:1. */
[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #41bdf5;
  --md-accent-fg-color: #ffa726;
  --md-typeset-a-color: #6fcef8;
}

.md-header,
.md-tabs {
  background-color: var(--parcel-header-bg);
  color: var(--parcel-header-ink);
}

/* Material dims inactive tabs to 0.7, which on the old blue left them at
   1.7:1. On the navy that same dimming still clears AA. */
.md-tabs__link {
  opacity: 0.78;
}

.md-tabs__link:hover,
.md-tabs__link:focus {
  opacity: 1;
}

/* The one place the blue belongs in the header: whichever section you are in. */
.md-tabs__item--active .md-tabs__link {
  color: var(--md-primary-fg-color--light);
  opacity: 1;
}

/* Material floats this centred at the top of the viewport, over the first
   thing the reader scrolls back to. On the landing page, where the sidebar is
   hidden and the content runs full width, there is no margin for it to sit in
   — so it lands squarely on the aggregator card's text. A corner is the one
   place no column runs. */
.md-top,
[dir="ltr"] .md-top {
  /* !important because Material's JS rewrites `top` as an inline style on
     every scroll, to keep the button clear of the sticky header; and the
     grouped [dir] selector because that is how the theme wins the centring. */
  top: auto !important;
  bottom: 1.2rem;
  right: 1.2rem;
  margin-left: 0;
  transform: none;
}

/* Material's hidden state animates from a translate that also carried the
   -50% centring; without this it would snap back to the middle on the way out. */
.md-top[hidden] {
  transform: translateY(0.2rem);
}

/* A translucent-black field disappears on a dark header; lift it instead. */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.12);
}

.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: rgba(255, 255, 255, 0.22);
}

/* Same 2.14:1 failure, same cause: white on HA blue. Primary buttons take the
   header navy as their ink rather than white. */
.md-typeset .md-button--primary {
  color: var(--parcel-header-bg);
  border-color: var(--md-primary-fg-color);
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  color: var(--parcel-header-bg);
  background-color: var(--md-primary-fg-color--light);
  border-color: var(--md-primary-fg-color--light);
}

.md-typeset table:not([class]) img {
  vertical-align: middle;
}

.md-typeset table:not([class]) small {
  color: var(--md-default-fg-color--light);
  line-height: 1.4;
}

/* Wide tables scroll inside themselves rather than pushing the page sideways
   on a phone. Material sizes the inner table to its content, so widening only
   the wrapper leaves its edge running wider than the rows. */
.md-typeset__table {
  width: 100%;
}

.md-typeset__table table:not([class]) {
  display: table;
  width: 100%;
}

.md-typeset__scrollwrap {
  overflow-x: auto;
}

/* Grid cards on the landing page. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.4rem;
  transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0.4rem rgba(65, 189, 245, 0.25);
}

/* The hero buttons sit tighter together than Material's default. */
.md-typeset .md-button + .md-button {
  margin-left: 0.4rem;
}

/* ------------------------------------------------------------------ *
 * Carrier directory (docs/carriers.md)
 *
 * The grid is the page: logos first, then how you connect and where the
 * carrier runs. Selecting a card opens the detail dialog, which is where the
 * capability table lives — it used to be its own comparison page.
 * ------------------------------------------------------------------ */

:root {
  /* One hue per connection mechanism, held apart from the HA-blue accent so
     a filter chip and a connection badge never read as the same thing. */
  --carrier-account: #2f6ca8;
  --carrier-trackingnr: #1f7a5c;
  --carrier-apikey: #96591a;
  --carrier-card-bg: var(--md-default-bg-color);
  --carrier-line: var(--md-default-fg-color--lightest);
  /* Carrier logos are drawn for a light background and most are dark on
     transparent, so the plate stays light in both schemes. */
  --carrier-plate: #ffffff;
  /* The badge sits on that always-light plate, so it does not follow the
     scheme — the dialog, where it sits on the page, overrides it. */
  --carrier-beta: #4a4a4a;
  --carrier-beta-line: #9aa0a6;
}

[data-md-color-scheme="slate"] {
  --carrier-account: #8db8ea;
  --carrier-trackingnr: #6fd0a6;
  --carrier-apikey: #e6b06a;
  --carrier-card-bg: var(--md-code-bg-color);
  --carrier-line: var(--md-default-fg-color--lighter);
  --carrier-plate: #f4f6f8;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --- filter bar ---------------------------------------------------- */

/* Three controls that each answer a different question, so each carries its
   own label rather than leaving the reader to infer what a row of pills is
   for — align-items:end keeps their boxes on one baseline while the labels
   stack above them. */
.md-typeset .carriers-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem 0.9rem;
  margin: 1.2rem 0 0.8rem;
}

.md-typeset .carriers-filter__country,
.md-typeset .carriers-filter__search,
.md-typeset .carriers-filter__kinds {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.md-typeset .carriers-filter__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset .carriers-filter select,
.md-typeset .carriers-filter input[type="search"] {
  font-size: 0.75rem;
  font-weight: 600;
  /* 44px at Material's 20px root, matching the chips beside it. */
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.3rem;
  border: 2px solid var(--md-primary-fg-color);
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  min-width: 11rem;
}

.md-typeset .carriers-filter input[type="search"] {
  font-weight: 400;
}

.md-typeset .carriers-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.md-typeset .carrier-chip {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  /* Same 44px minimum: these were ~32px, which is a miss on a phone. */
  min-height: 2.2rem;
  padding: 0.3rem 0.9rem;
  border-radius: 1.1rem;
  border: 1px solid var(--carrier-line);
  background: var(--carrier-card-bg);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: background-color 125ms, color 125ms, border-color 125ms;
}

.md-typeset .carrier-chip:hover {
  border-color: var(--md-primary-fg-color);
  color: var(--md-default-fg-color);
}

.md-typeset .carrier-chip[aria-pressed="true"] {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #06222f;
}

.md-typeset .carriers-count {
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  margin: 0 0 1rem;
}

.md-typeset .carriers-count strong {
  color: var(--md-default-fg-color);
}

.md-typeset .carriers-empty {
  border: 1px dashed var(--carrier-line);
  border-radius: 0.4rem;
  padding: 1.2rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* --- the grid ------------------------------------------------------ */

/* 63 tiles and counting, so the tile is sized to be scanned rather than
   admired: enough columns that a country's carriers land on one screen. */
.md-typeset .carriers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.55rem;
}

.md-typeset .carrier-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  text-align: left;
  font: inherit;
  padding: 0.55rem;
  border: 1px solid var(--carrier-line);
  border-radius: 0.5rem;
  background: var(--carrier-card-bg);
  color: var(--md-default-fg-color);
  cursor: pointer;
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}

/* An author `display` beats the UA stylesheet's `[hidden] { display: none }`,
   so without this the filters set .hidden on cards that stayed visible. */
.md-typeset .carrier-card[hidden] {
  display: none;
}

.md-typeset .carrier-card:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .carrier-card {
    transition: none;
  }
  .md-typeset .carrier-card:hover {
    transform: none;
  }
}

/* A letterbox rather than a near-square: the plate was the tallest thing on
   the tile, which made a wall of white rectangles the first thing you saw. */
.md-typeset .carrier-plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  border-radius: 0.3rem;
  border: 1px solid var(--carrier-line);
  background: var(--carrier-plate);
}

.md-typeset .carrier-plate img {
  width: 58%;
  max-height: 68%;
  object-fit: contain;
}

.md-typeset .carrier-initial {
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
}

/* Solid amber on 32 of 63 tiles is a wall, not a flag — and amber is also
   --md-accent-fg-color, so "beta" and "accent" read as the same signal. A
   neutral outline still qualifies the tile without competing with its logo. */
.md-typeset .carrier-beta {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.05rem 0.3rem;
  border-radius: 0.15rem;
  border: 1px solid var(--carrier-beta-line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--carrier-beta);
}

.md-typeset .carrier-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.md-typeset .carrier-version {
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Seven rows are a second brand on another carrier's repo and inherit its
   logo, so Chronopost and Colissimo are two identical La Poste tiles. The
   blurb that explains it is visually hidden, which left the duplicate
   looking like a mistake. */
.md-typeset .carrier-parent {
  font-size: 0.6rem;
  line-height: 1.2;
  color: var(--md-default-fg-color--light);
  margin-top: -0.2rem;
}

.md-typeset .carrier-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.md-typeset .carrier-pill {
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.05rem 0.35rem;
  border-radius: 0.2rem;
  border: 1px solid currentcolor;
  white-space: nowrap;
}

.md-typeset .carrier-pill--account {
  color: var(--carrier-account);
}

.md-typeset .carrier-pill--trackingnr {
  color: var(--carrier-trackingnr);
}

.md-typeset .carrier-pill--apikey {
  color: var(--carrier-apikey);
}

.md-typeset .carrier-where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  margin-top: auto;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .carrier-flags {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* The blurb is what site search matches on and what a screen reader reads as
   part of the card's label; the card itself shows it in the dialog instead. */
.md-typeset .carrier-blurb {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* --- legend -------------------------------------------------------- */

.md-typeset .carriers-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 1.4rem 0 0;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .carriers-legend > div {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.md-typeset .carriers-legend dd {
  margin: 0;
}

/* --- detail dialog ------------------------------------------------- */

.carrier-dialog {
  width: min(47rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--carrier-line);
  border-radius: 0.6rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
  font-size: 0.8rem;
  line-height: 1.6;
}

.carrier-dialog:focus {
  outline: none;
}

.md-typeset .carrier-caps abbr {
  text-decoration: none;
  border-bottom: 1px dotted var(--md-default-fg-color--lighter);
}

.carrier-dialog::backdrop {
  background: rgba(10, 18, 24, 0.55);
}

.carrier-dialog__head {
  position: relative;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  /* Room for the close button, which is taken out of the flow below. */
  padding: 1rem 2.8rem 0 1rem;
}

.md-typeset .carrier-dialog .carrier-plate {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.4rem;
  aspect-ratio: 1;
}

.carrier-dialog__title {
  min-width: 0;
}

.md-typeset .carrier-dialog__title h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.md-typeset .carrier-dialog__title p {
  margin: 0;
  color: var(--md-default-fg-color--light);
}

/* The way out to the repo is the one thing people come here to click, so it
   sits with the title rather than in a footer. */
.md-typeset .carrier-dialog .carrier-repo {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Pinned rather than flexed: once the head wraps on a phone, `margin-left:auto`
   left the button stranded on a line of its own in the middle of the dialog. */
.carrier-dialog__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  /* 44px at Material's 20px root — a real touch target. */
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 0.3rem;
  background: none;
  color: var(--md-default-fg-color--light);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background-color 125ms, color 125ms;
}

.carrier-dialog__close:hover,
.carrier-dialog__close:focus-visible {
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
}

/* On a tile the badge is pinned to the corner; in the dialog it is a word in
   the title, and the nearest positioned ancestor is the dialog itself — which
   put it in the dialog's own top-right corner, over the border radius. */
.md-typeset .carrier-dialog .carrier-beta,
.md-typeset .carriers-legend .carrier-beta {
  position: static;
  /* Off the light plate and onto the page, so it follows the scheme here. */
  border-color: var(--md-default-fg-color--lighter);
  background: none;
  color: var(--md-default-fg-color--light);
}

.carrier-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem 1.2rem;
  margin: 0;
  padding: 1rem;
}

.md-typeset .carrier-facts dt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.25rem;
}

.md-typeset .carrier-facts dd {
  margin: 0;
}

/* Grid and flex children default to min-width:auto, which lets a long word
   (a region sentence, a repo name) widen the track instead of wrapping. */
.md-typeset .carrier-facts > div,
.carrier-dialog__title,
.carrier-capabilities {
  min-width: 0;
}

.md-typeset .carrier-connections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.carrier-connections li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.carrier-variant {
  font-weight: 700;
  font-size: 0.7rem;
}

.carrier-input,
.carrier-region {
  display: block;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.carrier-capabilities {
  padding: 0 1rem 0.4rem;
}

.md-typeset .carrier-capabilities h3 {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.md-typeset .carrier-note {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.carrier-table {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--carrier-line);
  border-radius: 0.4rem;
}

/* The class is load-bearing: Material styles `table:not([class])` into its
   own inline-block scroll container with max-width:100%, which caps the box
   but lets the rows spill out — the whole dialog then scrolled sideways.
   Naming the table opts out of that and leaves the scrolling to the wrapper. */
.md-typeset .carrier-table table.carrier-caps {
  display: table;
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  font-size: 0.7rem;
  background: none;
}

.md-typeset .carrier-caps th,
.md-typeset .carrier-caps td {
  padding: 0.4rem 0.6rem;
  text-align: center;
  white-space: nowrap;
}

.md-typeset .carrier-caps thead th {
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--carrier-line);
}

.md-typeset .carrier-caps tbody th {
  text-align: left;
  font-weight: 700;
}

.md-typeset .carrier-caps tbody tr + tr > * {
  border-top: 1px solid var(--carrier-line);
}

.md-typeset .carrier-caps .is-yes {
  color: var(--carrier-trackingnr);
}

/* On the dot only — on the cell it also scaled the field name that the narrow
   layout renders from data-label. */
.md-typeset .carrier-caps .is-yes > [aria-hidden] {
  font-size: 0.85rem;
}

.md-typeset .carrier-caps .is-no {
  color: var(--md-default-fg-color--lighter);
}

.md-typeset .carrier-dialog__foot {
  margin: 0;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--carrier-line);
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

/* Six capability columns do not fit a phone-width dialog. They used to scroll
   sideways with no scrollbar, fade or shadow, so half of them were simply
   invisible — the table becomes one labelled row per field instead. */
@media screen and (max-width: 36em) {
  .carrier-table {
    overflow-x: visible;
  }

  .md-typeset .carrier-table table.carrier-caps,
  .md-typeset .carrier-caps tbody,
  .md-typeset .carrier-caps tr,
  .md-typeset .carrier-caps tbody th,
  .md-typeset .carrier-caps td {
    display: block;
    width: auto;
    min-width: 0;
  }

  /* The column headers move into each row via td[data-label]. */
  .md-typeset .carrier-caps thead {
    display: none;
  }

  .md-typeset .carrier-caps tbody th {
    padding: 0.5rem 0.6rem 0.3rem;
    font-size: 0.75rem;
  }

  .md-typeset .carrier-caps td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.4rem 0.6rem;
    text-align: left;
    white-space: normal;
  }

  .md-typeset .carrier-caps td::before {
    content: attr(data-label);
    color: var(--md-default-fg-color--light);
  }

  /* The dot is enlarged to read as a marker in a dense column; stacked it
     only makes its own row 5px taller than the rest. */
  .md-typeset .carrier-caps .is-yes > [aria-hidden] {
    font-size: inherit;
  }

  /* One separator between every stacked field, none above the first. */
  .md-typeset .carrier-caps tbody tr + tr > *,
  .md-typeset .carrier-caps tbody th,
  .md-typeset .carrier-caps td {
    border-top: 1px solid var(--carrier-line);
  }

  .md-typeset .carrier-caps tbody > tr:first-child > *:first-child {
    border-top: 0;
  }
}

@media screen and (max-width: 30em) {
  /* Each control takes the full width rather than wrapping its label onto a
     line beside a squeezed box. */
  .md-typeset .carriers-filter select,
  .md-typeset .carriers-filter input[type="search"] {
    min-width: 0;
    width: 100%;
  }

  .md-typeset .carriers-filter__country,
  .md-typeset .carriers-filter__search,
  .md-typeset .carriers-filter__kinds {
    width: 100%;
  }

  .md-typeset .carriers-filter__pills .carrier-chip {
    flex: 1 1 5rem;
  }

  .carrier-dialog__head {
    flex-wrap: wrap;
  }
}

/* --- capabilities legend -------------------------------------------- */

/* The dash was explained in prose and the dot was not, which left the one
   marker that means "yes" as the unlabelled one. */
.md-typeset .carrier-caps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.2rem;
  margin: 0.45rem 0 0;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .carrier-caps-legend > span {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.md-typeset .carrier-caps-legend .is-yes {
  color: var(--carrier-trackingnr);
  font-size: 0.85rem;
  line-height: 1;
}

.md-typeset .carrier-caps-legend .is-no {
  color: var(--md-default-fg-color--lighter);
}

/* --- admonitions ---------------------------------------------------- *
 *
 * Material ships a hue per flavour, which gave the site blue notes, blue
 * info, green tips and purple examples — four colours that a reader cannot
 * learn anything from, because none of them marks a different kind of
 * consequence. Every aside that merely tells you something shares one hue;
 * amber is kept for the two places where ignoring the box breaks an
 * automation, and it is the only amber on the page.
 * ------------------------------------------------------------------ */

:root {
  --parcel-aside: #12719c;
}

[data-md-color-scheme="slate"] {
  --parcel-aside: #6fcef8;
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--parcel-aside);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: color-mix(in srgb, var(--parcel-aside) 12%, transparent);
  border-color: var(--parcel-aside);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--parcel-aside);
}

/* The recipe blocks are furniture — ten of them in a row, each holding a
   snippet the heading above already named. Purple made them the loudest
   thing on the longest page. */
.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: var(--md-default-fg-color--lighter);
}

.md-typeset .example > .admonition-title,
.md-typeset .example > summary {
  background-color: var(--md-default-fg-color--lightest);
  border-color: var(--md-default-fg-color--lighter);
}

.md-typeset .example > .admonition-title::before,
.md-typeset .example > summary::before {
  background-color: var(--md-default-fg-color--light);
}

/* --- step flow ------------------------------------------------------ */

/* The one-line "mail arrives → event fires → code lifted out" on /email/ was
   marked up as a blockquote, which is what Material greys out and indents as
   somebody else's words — so the diagram read as a stray quote. It is a
   diagram, so it gets a diagram's frame. */
.md-typeset .parcel-flow {
  /* Normal text flow, not flex: as flex items the trailing full stop became
     a box of its own and floated a gap away from the code span. */
  margin: 1.2rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--carrier-line);
  border-radius: 0.4rem;
  background: var(--md-code-bg-color);
  font-size: 0.72rem;
  line-height: 1.5;
}

.md-typeset .parcel-flow .twemoji {
  /* The arrows are the structure here, so they get the accent rather than
     the body colour the surrounding words use. */
  color: var(--md-primary-fg-color--dark);
  margin: 0 0.15rem;
  vertical-align: -0.15em;
}

.md-typeset .parcel-flow .twemoji svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* --- header title on a phone ---------------------------------------- */

/* "Home Assistant parcel integrations" is 34 characters and the header has
   room for about 20 at 375px, so Material truncated it to "Home Assistant
   parce…" on every page. Wrapping loses nothing; the two lines still clear
   the 2.4rem header. */
@media screen and (max-width: 30em) {
  .md-header__topic > .md-ellipsis {
    white-space: normal;
    font-size: 0.68rem;
    line-height: 1.15;
  }
}