/* Callouts and coverage chips — two tinted surfaces that were written inline.
 *
 * Both had the same shape in the markup: a pale background, a matching border
 * two steps up, and dark text of the same family. That triple is one component
 * decision, not three colour choices, and it was repeated at every site.
 *
 * They share a file because they share a palette: a callout and a coverage chip
 * of the same meaning are the same tint at different sizes.
 *
 * ON THE VALUES
 * The chips move onto tokens the design system already held rather than adding
 * a fourth green and a second yellow. Two are worth knowing about: the partial
 * chip's background and border shift by dE 5.5 and 6.2, because this page used
 * Tailwind's `yellow` family where the rest of the product uses `amber` for the
 * same meaning. Those two families are the palette duplication we have been
 * removing, so the chips join amber rather than the design system growing a
 * yellow branch to preserve the difference.
 */

/* Callouts ------------------------------------------------------------------
 * A tinted note panel: pale ground, a matching border two steps up, and dark
 * text of the same family.
 *
 * WHY THIS NOW OWNS ITS LAYOUT
 * It used to set only the tint, on the reasoning that padding, radius and
 * border width were the call site's business. The evidence went the other way:
 * after that decision the tree held 44 tinted boxes written as 31 distinct
 * class strings, while .callout itself was adopted exactly 4 times — all in one
 * file, and all still writing `p-4 rounded-lg border` beside it. A class that
 * saves two utilities out of five does not get reached for. It now sets the
 * whole box, and the call site says only which tone and which size.
 *
 * Reached through the callout() macro, which also places the icon 28 of the 44
 * boxes lead with.
 */
.callout {
    /* Block, not flex. A callout whose body is a heading plus a paragraph must
       stack; only the icon variant needs a row, and it says so. Getting this
       backwards would have laid every multi-child callout out side by side. */
    display: block;
    padding: 1rem;
    border: 1px solid var(--callout-border);
    border-radius: var(--radius-md);
    background-color: var(--callout-bg);
    color: var(--callout-fg);
    font-size: var(--fs-base);
    line-height: 1.5;
}

/* --- sizes --------------------------------------------------------------- */
.callout--sm {
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-sm);
}

.callout--lg {
    padding: 1.5rem;
}

/* --- tones --------------------------------------------------------------- */
.callout--info {
    --callout-bg: var(--status-info-bg);
    --callout-border: var(--info-border);
    --callout-fg: var(--status-info-fg);
}

.callout--warning {
    --callout-bg: var(--banner-warning-bg);
    --callout-border: var(--banner-warning-border);
    --callout-fg: var(--status-warning-fg);
}

.callout--danger {
    --callout-bg: var(--status-danger-bg);
    --callout-border: var(--danger-border);
    --callout-fg: var(--status-danger-fg);
}

.callout--success {
    --callout-bg: var(--status-online-bg);
    --callout-border: var(--flash-success-border);
    --callout-fg: var(--status-online-fg);
}

/* The row layout: children sit side by side, the body taking the remaining
   width so long text wraps under itself rather than under whatever leads.
   --with-icon is the row plus an icon; --row is the row on its own, for a
   callout whose lead is something else (the landing banner's status pulse). */
.callout--with-icon,
.callout--row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.callout--sm.callout--with-icon,
.callout--sm.callout--row {
    gap: 0.5rem;
}

/* Cross-axis alignment. Distinct from --center, which is text-align: one is
   where the row sits, the other is where the words sit. */
.callout--align-center {
    align-items: center;
}

.callout--align-center > svg,
.callout--align-center > i {
    margin-top: 0;
}

/* align-items:flex-start puts the icon flush with the body box, which sits a
   hair above the first line's cap height, and a long body would otherwise
   squeeze it. Every hand-rolled icon row wrote `flex-shrink-0 mt-0.5` for this;
   it is one rule, not eight call sites. */
.callout--with-icon > svg,
.callout--with-icon > i {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.callout__body {
    flex: 1;
    min-width: 0;
}

.callout--center {
    display: block;
    text-align: center;
}

/* Coverage chips ------------------------------------------------------------
 * How completely a control is covered: strong / full / partial / none. The
 * template used to branch four ways and emit a different tint per branch; it
 * now emits the grade and this decides.
 */
.coverage-chip {
    background-color: var(--chip-bg);
    border-color: var(--chip-border);
    color: var(--chip-fg);
}

/* strong and full are the same grade visually; they are kept as separate
 * classes because the data distinguishes them and a future design may too. */
.coverage-chip--strong,
.coverage-chip--full {
    --chip-bg: var(--coverage-strong-bg);
    --chip-border: var(--policy-stricter-bg);
    --chip-fg: var(--chart-green-darkest);
}

.coverage-chip--partial {
    --chip-bg: var(--warning-soft-bg);
    --chip-border: var(--banner-warning-border);
    --chip-fg: var(--warning-darkest-fg);
}

/* Also the fallback: any grade the template does not recognise renders here
   rather than unpainted. */
.coverage-chip--none {
    --chip-bg: var(--status-neutral-bg);
    --chip-border: var(--border-base);
    --chip-fg: var(--gw-marker-border);
}