/* ==========================================================================
   CostGuard – Service status page
   ──────────────────────────────────────────────────────────────────────────
   Page-only rules for /{culture}/status. The hero, the split rows, the band,
   the icon tile, the panel surface and the type all come from
   /css/costguard-public.css; this file adds the status badge, the overall
   panel, the component rows and the legend.

   Every selector sits under .cg-status. No colour literals: every value
   resolves through --cg-*, and the five status colours are the
   --cg-status-* tokens of /css/costguard-theme.css. Logical properties only,
   so RTL needs no second rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Status badge

   An icon and a label on a tint of the status colour. The colour is picked
   from data-status, which is the status name, so the markup carries no colour
   class. Anything without a recognized name reads as Unknown.
   -------------------------------------------------------------------------- */

.cg-status .cg-status-badge {
    --cg-status-colour: var(--cg-status-unknown);

    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cg-status-colour) 12%, transparent);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--cg-status-colour);
}

.cg-status .cg-status-badge i {
    font-size: 1rem;
    line-height: 1;
}

.cg-status .cg-status-badge-lg {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.cg-status .cg-status-badge-lg i {
    font-size: 1.125rem;
}

.cg-status [data-status="Operational"] {
    --cg-status-colour: var(--cg-status-operational);
}

.cg-status [data-status="Degraded"] {
    --cg-status-colour: var(--cg-status-degraded);
}

.cg-status [data-status="Outage"] {
    --cg-status-colour: var(--cg-status-outage);
}

.cg-status [data-status="Maintenance"] {
    --cg-status-colour: var(--cg-status-maintenance);
}

.cg-status [data-status="Unknown"] {
    --cg-status-colour: var(--cg-status-unknown);
}

/* --------------------------------------------------------------------------
   Overall panel

   One panel, centred under the hero. A bar of the overall status colour runs
   along its inline-start edge; the badge inside still says the status in
   words.
   -------------------------------------------------------------------------- */

.cg-status .cg-status-overall {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--cg-pub-space-4);
    border-inline-start: 4px solid var(--cg-status-colour, var(--cg-status-unknown));
}

.cg-status .cg-status-overall .cg-pub-display {
    margin-block: var(--cg-pub-space-3) var(--cg-pub-space-1);
}

.cg-status .cg-status-overall .cg-pub-body {
    max-width: 40rem;
    font-size: 1.0625rem;
}

.cg-status .cg-status-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem var(--cg-pub-space-3);
    width: 100%;
    margin: var(--cg-pub-space-3) 0 0;
    padding-top: var(--cg-pub-space-2);
    border-top: 1px solid var(--cg-border);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cg-pub-muted);
}

.cg-status .cg-status-meta time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cg-pub-ink);
}

/* --------------------------------------------------------------------------
   Component rows

   Four rows separated by hairlines: icon tile, name and description, badge.
   On a phone the badge drops under the text instead of squeezing it.
   -------------------------------------------------------------------------- */

.cg-status .cg-pub-split .cg-pub-display {
    margin-bottom: var(--cg-pub-space-2);
}

.cg-status .cg-pub-split .cg-pub-lead {
    max-width: none;
}

.cg-status .cg-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cg-status .cg-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cg-pub-space-2);
    padding-block: var(--cg-pub-space-3);
    border-top: 1px solid var(--cg-border);
}

.cg-status .cg-status-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.cg-status .cg-status-row:last-child {
    padding-bottom: 0;
}

.cg-status .cg-status-row .cg-pub-icon {
    margin-bottom: 0;
}

.cg-status .cg-status-row-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.cg-status .cg-status-row-text .cg-pub-title {
    margin-bottom: 0.125rem;
}

.cg-status .cg-status-row-text .cg-pub-body {
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Legend on the band
   -------------------------------------------------------------------------- */

.cg-status .cg-status-legend-intro {
    margin-top: var(--cg-pub-space-1);
}

.cg-status .cg-status-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--cg-pub-space-4) var(--cg-pub-space-4);
    list-style: none;
    margin: var(--cg-pub-space-4) 0 0;
    padding: var(--cg-pub-space-4) 0 0;
    border-top: 1px solid var(--cg-border-strong);
}

.cg-status .cg-status-legend-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cg-pub-space-1);
}

.cg-status .cg-status-legend-item .cg-pub-body {
    font-size: 0.9375rem;
}

.cg-status .cg-status-note {
    margin-top: var(--cg-pub-space-4);
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Contact row
   -------------------------------------------------------------------------- */

.cg-status .cg-status-contact-link {
    margin-top: var(--cg-pub-space-3);
}