/**
 * Service status — the strip, the listings and the detail page.
 *
 * Replaces the .service-status-bars block that used to live in style.css.
 *
 * The brief asked for "lite tajtare/cleant" — tighter and cleaner, like
 * smsteknik.se/status. Three things do most of that work:
 *
 *   1. The feature is width-constrained and centred, so it stops stretching to
 *      the full Divi container on a wide screen. A 91-bucket strip across
 *      1600px reads as a stripe of noise; across 980px it reads as a chart.
 *   2. Incidents are hairline-separated rows with a state dot, not filled
 *      cards. A card spends a border, a background and 2em of padding per
 *      incident; a rule and a dot carry the same information for none of it.
 *   3. Quieter labels. Times, states and services sit at 10-11px uppercase in
 *      grey, so the incident title is the only thing asking to be read.
 *
 * Everything worth tuning is a token below — change it there, not inline.
 */

.service-status-bar,
.status-list,
.service-status-detail {
    --status-max-width: 980px;
    --status-rule: #e6e9ec;
    --status-rule-soft: #eff1f3;
    --status-muted: #6b7683;
    --status-ink: #1c2530;
    --status-radius: 4px;
    --status-label: 10px;

    /* Message typography. The body inherits Divi's paragraph size otherwise,
       which is larger than the heading above it and inverts the hierarchy. */
    --status-heading: 1.1rem;
    --status-body: 1rem;
    --status-meta: .95rem;
}

/* ---------------------------------------------------------------- the strip */

.service-status-bar {
    --bar-height: 34px;
    --bar-gap: 2px;
    --bar-radius: 3px;

    max-width: var(--status-max-width);
    margin: 0 auto;
}

.service-status-bar .bars {
    display: flex;
    gap: var(--bar-gap);
    height: var(--bar-height);
}

.service-status-bar .bar {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: 1px;
}

.service-status-bar .bar:first-child > :first-child { border-top-left-radius: var(--bar-radius); }
.service-status-bar .bar:first-child > :last-child  { border-bottom-left-radius: var(--bar-radius); }
.service-status-bar .bar:last-child  > :first-child { border-top-right-radius: var(--bar-radius); }
.service-status-bar .bar:last-child  > :last-child  { border-bottom-right-radius: var(--bar-radius); }

.service-status-bar .status {
    position: relative;
    display: grid;
    transition: opacity .12s ease;
}

.service-status-bar .status.state-operational { background: var(--status-operational); }
.service-status-bar .status.state-ongoing     { background: var(--status-ongoing); }
.service-status-bar .status.state-resolved    { background: var(--status-resolved); }
.service-status-bar .status.state-maintenance { background: var(--status-maintenance); }

.service-status-bar .status > a {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.service-status-bar .status:hover,
.service-status-bar .status:focus-within {
    opacity: .7;
}

/* Tooltip */

.service-status-bar .status-hover {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 9;
    min-width: 168px;
    max-width: 260px;
    padding: .7em .85em;
    background: #fff;
    border: 1px solid var(--status-rule);
    border-radius: var(--status-radius);
    box-shadow: 0 4px 16px rgba(20, 30, 40, .09);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    pointer-events: none;
    transition: opacity .15s, visibility 0s .15s;
}

.service-status-bar .status:not(:hover):not(:focus-within) .status-hover {
    visibility: hidden;
    opacity: 0;
}

.service-status-bar .status:hover .status-hover,
.service-status-bar .status:focus-within .status-hover {
    transition-delay: 0s;
}

/* Keep the tooltip inside the viewport at both ends of the strip. */
.service-status-bar .bar:nth-child(-n+3) .status-hover {
    left: 0;
    transform: none;
}

.service-status-bar .bar:nth-last-child(-n+3) .status-hover {
    left: auto;
    right: 0;
    transform: none;
}

.service-status-bar .status-hover h4 {
    font-size: 13px;
    line-height: 1.3;
    padding: 0 0 .25em;
    margin: 0;
    color: var(--status-ink);
}

.service-status-bar .status-hover .status-state {
    font-size: var(--status-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--status-muted);
}

.service-status-bar .status-hover .status-services,
.service-status-bar .status-hover .date-range {
    color: var(--status-muted);
    font-size: 11.5px;
}

.service-status-bar .status-hover .date-range {
    white-space: nowrap;
}

/* Scale and legend */

.service-status-bar .bar-scale {
    display: flex;
    justify-content: space-between;
    margin-top: .5em;
    font-size: 11px;
    color: var(--status-muted);
}

.service-status-bar .bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4em 1.2em;
    margin: .9em 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    color: var(--status-muted);
}

.service-status-bar .bar-legend li {
    display: flex;
    align-items: center;
    gap: .45em;
}

.service-status-bar .bar-legend li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: none;
}

.service-status-bar .bar-legend .state-operational::before { background: var(--status-operational); }
.service-status-bar .bar-legend .state-ongoing::before     { background: var(--status-ongoing); }
.service-status-bar .bar-legend .state-resolved::before    { background: var(--status-resolved); }
.service-status-bar .bar-legend .state-maintenance::before { background: var(--status-maintenance); }

/* ------------------------------------------------------------- the listings */

.status-list {
    max-width: var(--status-max-width);
    margin: 2em auto;
}

.status-list-title {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0 0 .5em;
    padding: 0;
}

.status-list .status-empty {
    color: var(--status-muted);
    margin: 0;
    padding: .5em 0;
    font-size: .95rem;
}

.status-list .status-items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--status-rule);
}

/* Rows, not cards: a hairline between each and a dot for state. */
.status-list .status-item {
    position: relative;
    padding: .9em 0 .9em 1.15em;
    border-bottom: 1px solid var(--status-rule-soft);
}

.status-list .status-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.4em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-resolved);
}

.status-list .status-item.state-ongoing::before     { background: var(--status-ongoing); }
.status-list .status-item.state-maintenance::before { background: var(--status-maintenance); }

.status-list .status-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3em .8em;
}

.status-list .status-item-head h3 {
    font-size: 1rem;
    line-height: 1.35;
    padding: 0;
    margin: 0;
}

.status-list .status-item-head h3 a {
    color: inherit;
    text-decoration: none;
}

.status-list .status-item-head h3 a:hover,
.status-list .status-item-head h3 a:focus {
    text-decoration: underline;
}

.status-list .status-tag {
    font-size: var(--status-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--status-muted);
}

.status-list .status-item-times {
    display: flex;
    flex-wrap: wrap;
    gap: .1em 1.4em;
    margin: .35em 0 0;
    font-size: .85rem;
}

.status-list .status-item-times div {
    display: flex;
    align-items: baseline;
    gap: .4em;
}

.status-list .status-item-times dt {
    font-size: var(--status-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--status-muted);
    font-weight: 700;
}

.status-list .status-item-times dd {
    margin: 0;
    /* Explicit, not inherited: a global dd rule would beat inheritance from
       the container and blow these up the way the detail summary did. */
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--status-ink);
}

.status-list .status-item-services {
    margin: .3em 0 0;
    font-size: .85rem;
    color: var(--status-muted);
}

.status-list .status-item-services .label {
    font-size: var(--status-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-right: .4em;
}

.status-list .status-item-services .service:not(:last-child)::after {
    content: ",";
}

.status-list .status-more {
    margin: .8em 0 0;
    font-size: .8rem;
    color: var(--status-muted);
}

/* Search and download */

.status-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6em 1em;
    margin: 0 0 1em;
    padding-bottom: .9em;
    border-bottom: 1px solid var(--status-rule);
}

.status-search .field {
    display: grid;
    gap: .2em;
}

.status-search label {
    font-size: var(--status-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--status-muted);
    font-weight: 700;
}

.status-search input[type="date"] {
    padding: .35em .5em;
    border: 1px solid #d5dbe0;
    border-radius: var(--status-radius);
    font-size: .85rem;
    line-height: 1.3;
}

.status-search .status-clear,
.status-search .status-download {
    font-size: .8rem;
    align-self: center;
}

.status-search .status-download {
    margin-left: auto;
}

/* -------------------------------------------------------------- detail page */

.service-status-detail .status-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em 2em;
    margin: .8em 0 1.1em;
    padding: 0 0 .9em;
    border-bottom: 1px solid var(--status-rule);
}

.service-status-detail .status-badge {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    color: var(--status-accent);
}

.service-status-detail .status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-accent);
    flex: none;
}

.service-status-detail .status-times {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    margin: 0;
    font-size: var(--status-meta);
}

.service-status-detail .status-times div {
    display: flex;
    align-items: baseline;
    gap: .45em;
}

.service-status-detail .status-times dt {
    font-size: var(--status-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--status-muted);
    font-weight: 700;
}

.service-status-detail .status-times dd {
    margin: 0;
    font-size: var(--status-meta);
    font-variant-numeric: tabular-nums;
}

.service-status-detail .services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    font-size: .85rem;
    color: var(--status-muted);
    margin: 0 0 .5em;
}

.service-status-detail .services span {
    background: #f4f6f7;
    border-radius: 2em;
    padding: .15em .7em;
    color: var(--status-ink);
}

.service-status-detail .status-facets {
    list-style: none;
    margin: 0 0 1.1em;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3em 1.8em;
    font-size: .85rem;
    color: var(--status-muted);
}

.service-status-detail .status-facets .facet-label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--status-label);
    font-weight: 700;
    margin-right: .4em;
}

.service-status-detail .status-threads {
    margin-top: 1.3em;
    display: grid;
    row-gap: 0;
}

.service-status-detail .status-threads .thread {
    padding: 1.2em 0;
    border-top: 1px solid var(--status-rule-soft);
}

.service-status-detail .status-threads .thread:first-child {
    padding-top: 0;
    border-top: 0;
}

.service-status-detail .status-threads .thread header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2em .9em;
    margin-bottom: .35em;
}

.service-status-detail .status-threads .thread header h4 {
    font-size: var(--status-heading);
    font-weight: 700;
    line-height: 1.35;
    padding: 0;
    margin: 0;
}

.service-status-detail .status-threads .thread .date-time {
    display: flex;
    gap: .7em;
    font-size: 11px;
    color: var(--status-muted);
    font-variant-numeric: tabular-nums;
}

.service-status-detail .status-threads .thread .thread-state {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

/* A resolved message is the one people scan for. The colours come from the
   article element, which carries the tellus_status_colors set as tokens. */
.service-status-detail .status-threads .thread.status-resolved .thread-state {
    color: var(--status-operational, #91bb2a);
}

.service-status-detail .status-threads .thread.status-maintenance .thread-state {
    color: var(--status-maintenance, #227dd8);
}

.service-status-detail .status-threads .thread p {
    font-size: var(--status-body);
    line-height: 1.6;
    margin-bottom: .8em;
}

.service-status-detail .status-threads .thread p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 700px) {
    .service-status-bar {
        --bar-height: 30px;
        --bar-gap: 1px;
    }

    /* 91 buckets under 4px each is mush; halve the resolution instead. */
    .service-status-bar .bar:nth-child(even) {
        display: none;
    }

    .status-list .status-item-times {
        gap: .1em 1em;
    }

    .status-search .status-download {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-status-bar .status,
    .service-status-bar .status-hover {
        transition: none;
    }
}

/* --------------------------------------------- overriding the old style.css
 *
 * style.css still carries the .single-service_status rules written for the
 * previous detail template. They are scoped one class shallower than these, so
 * these win. Kept here rather than relying on that block being deleted — the
 * capitalize rule in particular now actively damages content.
 *
 * The block in style.css (around lines 853-883, everything after
 * ".single-service_status main .container") is redundant once this is live and
 * can be deleted whenever convenient. Keep the .container rule.
 */

/* Headings are real message titles now, not the word "created". Capitalising
   every word turns "Uppdatering: planerat underhall" into Title Case. */
.single-service_status .service-status-detail .status-threads .thread header h4 {
    text-transform: none;
    font-size: var(--status-heading);
}

/* Divi sizes paragraphs site-wide; without this the message body comes out
   larger than the heading it sits under. */
.single-service_status .service-status-detail .status-threads .thread p {
    font-size: var(--status-body);
    line-height: 1.6;
}

/* Same for the summary values — the labels were sized, the values were not,
   so the dates inherited Divi and dwarfed the labels beside them. */
.single-service_status .service-status-detail .status-times,
.single-service_status .service-status-detail .status-times dd {
    font-size: var(--status-meta);
}

.single-service_status .service-status-detail .status-facets,
.single-service_status .service-status-detail .services {
    font-size: .85rem;
}

/* The state chip carries the colour; a fully green heading is too loud. */
.single-service_status .service-status-detail .status-threads .thread.status-resolved header h4 {
    color: inherit;
}

/* Spacing comes from the padded, rule-separated threads above. */
.single-service_status .service-status-detail .status-threads {
    margin-top: 1.3em;
    row-gap: 0;
}

.single-service_status .service-status-detail .services span {
    background: #f4f6f7;
    padding: .15em .7em;
}