/* The Experimental and Beta pills (js/maturity.js, docs/feature-maturity.md). The .exp-tag's quiet style,
   rounded into a pill: small caps-like text on a hairline, never orange (that is the incident colour). */
.mat-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  padding: 0 6px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
  background: var(--card-2);
  cursor: help;
}
.mat-pill[hidden] { display: none; }
.mat-pill.mat-experimental {
  /* accent-ink, not accent: 9.5px text needs the stronger contrast on the soft fill in every theme. */
  color: var(--accent-ink, var(--accent));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft, var(--card-2));
}
h1 .mat-pill, h2 .mat-pill { position: relative; top: -1px; }
.menu button .mat-pill { margin-left: 4px; }
.nm-top .mat-pill { margin-left: 2px; }

/* The help dialog's list. */
.mat-sec { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); outline: none; }
.mat-sec h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.mat-sec .mat-pill { margin-left: 0; }
.mat-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mat-list li { display: grid; gap: 2px; font-size: 12px; }
.mat-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink); }
.mat-list small { color: var(--ink-2); }
.mat-list code { font-size: 11px; overflow-wrap: anywhere; }
.mat-state { font-weight: 600; }
.mat-state.on { color: var(--accent-ink, var(--accent)); }
.mat-state.off { color: var(--ink-3); }
.mat-note { margin-top: 8px; }

/* The Automations page's narrow nav: the page header beside it carries the same pill, so the nav's wraps
   under its title rather than being cut off. */
.fl-nav-title { flex-wrap: wrap; row-gap: 4px; }
.fl-nav-title .mat-pill { margin-left: 0; }