/* m4p Container Monitoring – design system
   Calm, industrial, close to metals4printing.com: white ground, primary blue, logo gradient as a thin accent. */

/* ---------- Fonts (self-hosted Barlow, SIL OFL 1.1 – see fonts/barlow/OFL.txt) ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow/barlow-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
    --m4p-blue: #0d5196;
    --m4p-blue-hover: #0a4580;
    --m4p-blue-press: #083a6c;
    --m4p-blue-tint: #e8f0f8;
    --m4p-gradient: linear-gradient(90deg, #0b5196 0%, #79b65c 100%);

    --white: #ffffff;
    --grey-50: #f5f5f5;
    --grey-200: #dcdcdc;
    --grey-400: #a6a6a6;
    --grey-600: #555555;
    --ink: #1e2a36;            /* body text: deep steel blue-grey, pairs with the primary blue */

    --status-ready: #2e9e5b;
    --status-close: #e0a800;
    --status-wait: #c8372d;
    --status-required: #808080;
    --status-ready-tint: #eaf6ef;
    --status-close-tint: #fdf6e0;
    --status-wait-tint: #fbecea;
    --status-required-tint: #f2f2f2;
    --status-ready-ink: #1d6b3d;
    --status-close-ink: #6b5100;
    --status-wait-ink: #9b261e;
    --status-required-ink: #4a4a4a;

    --radius: 8px;
    --radius-sm: 4px;
    --shell: 1200px;
    --gutter: 16px;
    --appbar-h: 60px;

    --font: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
    --shadow-hover: 0 4px 14px rgba(13, 81, 150, 0.12);
    --focus: 0 0 0 3px rgba(13, 81, 150, 0.35);
}

@media (min-width: 768px) {
    :root { --gutter: 32px; --appbar-h: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; box-shadow: none; }

a { color: var(--m4p-blue); }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus); }

.icon { flex: none; display: inline-block; vertical-align: middle; }

.shell {
    width: 100%;
    max-width: calc(var(--shell) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.accent-line { height: 3px; background: var(--m4p-gradient); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--m4p-blue); color: var(--white); }
.btn--primary:hover { background: var(--m4p-blue-hover); }
.btn--primary:active { background: var(--m4p-blue-press); }
.btn--primary:disabled { background: #7e9fc2; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ---------- App bar ---------- */
.appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--m4p-blue);
    color: var(--white);
    padding-top: env(safe-area-inset-top);
}
.appbar + .accent-line { position: sticky; top: calc(var(--appbar-h) + env(safe-area-inset-top)); z-index: 10; }

.appbar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--appbar-h);
}

.appbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

/* The logo keeps its own colours on a small white plate, like a nameplate on the blue bar. */
.appbar__plate {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    background: var(--white);
    border-radius: var(--radius-sm);
}
.appbar__plate img { width: 46px; height: auto; }

.appbar__title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 3px 10px 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.live__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5fd08c;
}
.live__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #5fd08c;
    animation: live-pulse 2s ease-out infinite;
}
.live--off .live__dot, .live--off .live__dot::after { background: var(--grey-400); animation: none; }
.live--sim { background: #7b2fbe; color: #fff; }
.live--sim .live__dot, .live--sim .live__dot::after { background: #e3d0f5; animation: none; }

@keyframes live-pulse {
    0% { transform: scale(1); opacity: 0.75; }
    80%, 100% { transform: scale(2.8); opacity: 0; }
}

.appbar__user {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex: none;
}
.appbar__name {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.88);
}
.appbar__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.appbar__logout:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
.appbar__logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (min-width: 560px) {
    .appbar__inner, .appbar__brand { gap: 12px; }
    .appbar__plate img { width: 62px; }
    .appbar__title { font-size: 19px; }
    .appbar__logout { padding: 0 14px; }
    .appbar__logout span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 900px) {
    .appbar__name { display: inline-flex; }
}

/* ---------- Offline banner ---------- */
.offline-banner {
    background: var(--status-close-tint);
    border-bottom: 1px solid #ecd27a;
    color: var(--status-close-ink);
    font-weight: 600;
    font-size: 15px;
}
.offline-banner__inner { display: flex; align-items: center; gap: 10px; min-height: 44px; }

/* ---------- Main ---------- */
.main { padding-top: 28px; padding-bottom: 56px; }
@media (min-width: 768px) { .main { padding-top: 44px; } }

/* ---------- Overview header ---------- */
.overview-head {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}
.page-title {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.page-lede {
    margin-top: 8px;
    max-width: 52ch;
    color: var(--grey-600);
    font-size: 16px;
}

/* Status tally: how many containers sit in each release state. */
.tally {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    overflow: hidden;
}
.tally__item {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 10px 14px 11px;
    border-top: 3px solid var(--tally-color);
    margin-top: -1px;
    background: var(--white);
}
.tally__item:nth-child(odd) { border-right: 1px solid var(--grey-200); }
.tally__item:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--grey-200); }
.tally__count {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tally__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--tally-ink);
}
.tally__label .icon { color: var(--tally-color); }
.tally__item--zero .tally__count { color: var(--grey-400); }
.tally__item--ready { --tally-color: var(--status-ready); --tally-ink: var(--status-ready-ink); }
.tally__item--close { --tally-color: var(--status-close); --tally-ink: var(--status-close-ink); }
.tally__item--wait { --tally-color: var(--status-wait); --tally-ink: var(--status-wait-ink); }
.tally__item--required { --tally-color: var(--status-required); --tally-ink: var(--status-required-ink); }

@media (min-width: 900px) {
    .overview-head { grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 32px; }
    .page-title { font-size: 38px; }
    .tally { grid-template-columns: repeat(4, minmax(118px, auto)); }
    .tally__item { border-right: 1px solid var(--grey-200); }
    .tally__item:last-child { border-right: 0; }
    .tally__item:nth-child(n+3) { box-shadow: none; }
}

/* ---------- Release badge ---------- */
.badge {
    --b-color: var(--status-required);
    --b-tint: var(--status-required-tint);
    --b-ink: var(--status-required-ink);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 4px 11px 4px 5px;
    border: 1px solid var(--b-color);
    border-radius: 999px;
    background: var(--b-tint);
    color: var(--b-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--b-color);
    color: var(--white);
}
.badge__label { overflow: hidden; text-overflow: ellipsis; }
.badge--ready { --b-color: var(--status-ready); --b-tint: var(--status-ready-tint); --b-ink: var(--status-ready-ink); }
.badge--close { --b-color: var(--status-close); --b-tint: var(--status-close-tint); --b-ink: var(--status-close-ink); }
.badge--close .badge__icon { color: #3d2e00; }
.badge--wait { --b-color: var(--status-wait); --b-tint: var(--status-wait-tint); --b-ink: var(--status-wait-ink); }
.badge--required { --b-color: var(--status-required); --b-tint: var(--status-required-tint); --b-ink: var(--status-required-ink); }

/* Large: solid status plate for the detail page. */
.badge--lg {
    gap: 12px;
    padding: 10px 20px 10px 10px;
    border-radius: var(--radius);
    background: var(--b-color);
    color: var(--white);
    font-size: 22px;
}
.badge--lg .badge__icon { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.22); color: var(--white); }
.badge--lg.badge--close { color: #2e2300; }
.badge--lg.badge--close .badge__icon { background: rgba(0, 0, 0, 0.1); color: #2e2300; }

/* ---------- Container cards ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}
@media (min-width: 768px) { .cards { gap: 20px; } }

.card {
    --rail: var(--status-required);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 18px 14px 22px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
    box-shadow: inset 5px 0 0 var(--rail);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { border-color: #9fb8d3; box-shadow: inset 5px 0 0 var(--rail), var(--shadow-hover); }
.card:focus-visible { box-shadow: inset 5px 0 0 var(--rail), var(--focus); }
.card--ready { --rail: var(--status-ready); }
.card--close { --rail: var(--status-close); }
.card--wait { --rail: var(--status-wait); }
.card--required { --rail: var(--status-required); }

.card__head { display: flex; align-items: flex-start; gap: 12px; }
.card__id { min-width: 0; flex: 1; }
.card__powder {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    overflow-wrap: anywhere;
}
.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin-top: 4px;
    color: var(--grey-600);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.card__meta b { font-weight: 600; color: var(--ink); }
.card__chevron { margin-top: 2px; color: var(--grey-400); transition: color 0.15s ease, transform 0.15s ease; }
.card:hover .card__chevron { color: var(--m4p-blue); transform: translateX(2px); }

.card__release {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 12px;
}
.card__delta {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.card__delta-label { margin-right: 4px; color: var(--grey-600); font-weight: 500; }

.card__climate { padding-top: 12px; border-top: 1px solid var(--grey-200); }
.card__ambient { margin: 0 0 8px; color: var(--grey-600); font-size: 12px; font-weight: 600; }
.card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}
.card__metrics > div { min-width: 0; padding-right: 8px; }
.card__metrics > div + div { padding-left: 12px; border-left: 1px solid var(--grey-200); }
.card__metrics dt { color: var(--grey-600); font-size: 13px; font-weight: 500; }
.card__metrics dd {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.card__foot {
    margin-top: auto;
    color: var(--grey-600);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.card--skeleton {
    min-height: 236px;
    background: var(--grey-50);
    box-shadow: none;
}

/* ---------- Notices / empty states ---------- */
.notice {
    padding: 16px 18px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: var(--grey-50);
    color: var(--grey-600);
}

.empty { max-width: 560px; padding: 40px 0; }
.empty__title { font-size: 30px; font-weight: 600; line-height: 1.15; }
.empty__text { margin: 12px 0 28px; color: var(--grey-600); font-size: 17px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field__label { font-size: 15px; font-weight: 600; }
.field__input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #b9b9b9;
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 17px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field__input:hover { border-color: var(--grey-600); }
.field__input:focus { outline: none; border-color: var(--m4p-blue); box-shadow: var(--focus); }
.field__input:disabled { background: var(--grey-50); }

.form-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-left: 3px solid var(--status-wait);
    border-radius: var(--radius-sm);
    background: var(--status-wait-tint);
    color: var(--status-wait-ink);
    font-size: 15px;
    font-weight: 500;
}
.form-error .icon { margin-top: 2px; }

/* ---------- Login ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; }

.login__aside { display: none; }

.login__panel {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px 40px;
    border-top: 3px solid transparent;
    border-image: var(--m4p-gradient) 1;
}
.login__form { width: 100%; max-width: 380px; display: grid; gap: 20px; }
.login__logo { width: 120px; height: auto; margin-bottom: 8px; }
.login__title { font-size: 32px; font-weight: 600; line-height: 1.1; }
.login__intro { margin-top: -8px; color: var(--grey-600); }
.login__form .btn { margin-top: 4px; }
.login__hint {
    padding-top: 16px;
    border-top: 1px solid var(--grey-200);
    color: var(--grey-600);
    font-size: 13px;
    line-height: 1.45;
}

@media (min-width: 960px) {
    .login { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .login__aside {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--m4p-blue);
        color: var(--white);
        overflow: hidden;
    }
    .login__aside-inner { position: relative; padding: 0 56px 64px; max-width: 560px; }
    .login__claim { font-size: 44px; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
    .login__lede { margin-top: 16px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); max-width: 40ch; }
    .login__chart { flex: 1; width: 100%; min-height: 0; padding: 48px 0 24px; }
    .login__aside > .accent-line { height: 4px; }
    .login__panel { align-items: center; padding: 48px; border-top: 0; }
    .login__logo { width: 140px; }
}

/* ---------- Boot screen (before WebAssembly starts) ---------- */
.boot {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 22px;
    padding: 24px;
}
.boot__logo { width: 132px; height: auto; }
.boot__bar { width: 180px; height: 3px; background: var(--grey-200); border-radius: 2px; overflow: hidden; }
.boot__bar span {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: var(--m4p-gradient);
    transition: width 0.2s ease;
}
.boot__text { color: var(--grey-600); font-size: 14px; }

/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px var(--gutter);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--status-wait-tint);
    border-top: 3px solid var(--status-wait);
    color: var(--status-wait-ink);
    font-weight: 500;
}
#blazor-error-ui .reload { margin-left: 8px; font-weight: 600; color: var(--m4p-blue); }
#blazor-error-ui .dismiss {
    position: absolute;
    right: 12px;
    top: 6px;
    border: 0;
    background: none;
    font-size: 22px;
    cursor: pointer;
}

/* =====================================================================
   Container detail page
   ===================================================================== */

.btn--secondary { background: var(--white); color: var(--m4p-blue); border-color: var(--m4p-blue); }
.btn--secondary:hover { background: var(--m4p-blue-tint); }

.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--grey-600);
    cursor: pointer;
}
.iconbtn:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }

.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    background: var(--white);
    color: var(--grey-600);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}
.tag--warn { border-color: #ecd27a; background: var(--status-close-tint); color: var(--status-close-ink); }
.tag--sample { border-color: #b9cde3; background: var(--m4p-blue-tint); color: var(--m4p-blue); }
.tag--live { gap: 6px; border-color: #9fdcb7; background: #e9f8ef; color: #1d6b3d; }
.tag__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #2fa864; }

.card__ambient-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card__ambient-row .card__ambient { margin: 0; }
.section-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.backlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: -4px;
    padding: 4px 6px 4px 4px;
    border-radius: var(--radius-sm);
    color: var(--m4p-blue);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.backlink:hover { background: var(--m4p-blue-tint); }

/* ---------- Layout ---------- */
.detail { display: grid; gap: 24px; }
.detail__main { display: grid; gap: 20px; min-width: 0; }

@media (min-width: 1100px) {
    .detail { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 32px; }
    .detail__sim {
        position: sticky;
        top: calc(var(--appbar-h) + 3px + 24px);
        width: 340px;
        /* short beamer screens (e.g. 768 px): keep "Zurücksetzen" reachable */
        max-height: calc(100vh - (var(--appbar-h) + 3px + 24px) - 16px);
        max-height: calc(100dvh - (var(--appbar-h) + 3px + 24px) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---------- Header ---------- */
.detail-head { display: grid; gap: 6px; }
.detail-head .backlink { justify-self: start; margin-bottom: 6px; }
.detail-head__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
}
.detail-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 4px 0 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.detail-head__meta > div { display: flex; gap: 6px; }
.detail-head__meta dt { color: var(--grey-600); }
.detail-head__meta dd { margin: 0; font-weight: 600; }

@media (min-width: 768px) {
    .detail-head__title { font-size: 38px; }
}

/* ---------- Release card ---------- */
.release {
    --r-color: var(--status-required);
    --r-tint: var(--status-required-tint);
    display: grid;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: inset 0 5px 0 var(--r-color);
    overflow: hidden;
}
.release--ready { --r-color: var(--status-ready); --r-tint: var(--status-ready-tint); }
.release--close { --r-color: var(--status-close); --r-tint: var(--status-close-tint); }
.release--wait { --r-color: var(--status-wait); --r-tint: var(--status-wait-tint); }

.release__status {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 22px 18px 18px;
    background: var(--r-tint);
}
.release__status .badge--lg { max-width: 100%; white-space: normal; }
.release__advice { max-width: 56ch; color: var(--ink); font-size: 16px; line-height: 1.45; }

.release__facts { display: grid; gap: 8px; padding: 16px 18px; border-top: 1px solid var(--grey-200); }
.release__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
.release__line b { font-weight: 600; white-space: nowrap; }
/* Phones: the three values as columns (label above value) instead of a wrapping line. */
@media (max-width: 559px), (min-width: 1100px) {
    .release__line { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 12px; }
    .release__line > span:not(.release__sep) { display: grid; gap: 1px; }
    .release__line .release__k { font-size: 13px; }
    .release__sep { display: none; }
}
.release__k { color: var(--grey-600); font-weight: 500; }
.release__sep { color: var(--grey-400); }
.release__when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    color: var(--grey-600);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.release__action { display: grid; gap: 10px; padding: 0 18px 18px; }
.release__saved {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--status-ready-ink);
    font-size: 14px;
    font-weight: 600;
}
.release__form {
    display: grid;
    gap: 6px;
    padding: 14px 14px 16px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: var(--grey-50);
}
.release__form-head { display: flex; align-items: center; justify-content: space-between; margin: -6px -6px 0 0; }
.release__form-title { font-weight: 600; font-size: 16px; }

@media (min-width: 900px) {
    .release { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .release__status { grid-row: span 2; padding: 28px 28px 26px; align-content: start; }
    .release__facts { border-top: 0; border-left: 1px solid var(--grey-200); padding: 26px 26px 12px; align-content: start; }
    .release__action { border-left: 1px solid var(--grey-200); padding: 4px 26px 24px; align-content: end; }
    .release__action > .btn { justify-self: start; width: auto; }
    .release__line { font-size: 20px; }
}

/* ---------- Bulk reading form ---------- */
.bulk-form { display: grid; gap: 10px; }
.bulk-form__row { display: flex; gap: 8px; }
.bulk-form__input { position: relative; flex: 1; min-width: 0; }
.bulk-form__input .field__input { padding-right: 44px; font-variant-numeric: tabular-nums; }
.bulk-form__suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-600);
    pointer-events: none;
}
.bulk-form .btn { flex: none; padding: 0 18px; }
.field__hint { color: var(--grey-600); font-size: 14px; }
.field__input--invalid { border-color: var(--status-wait); }

/* ---------- Segmented control / tabs ---------- */
.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius);
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
}
.segmented__item {
    flex: 1;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--grey-600);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.segmented__item:hover { color: var(--ink); }
.segmented__item.is-active { background: var(--white); color: var(--m4p-blue); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--grey-200); }
.segmented--tabs { display: flex; margin-top: 4px; }
.segmented--sm .segmented__item { min-height: 34px; padding: 0 12px; font-size: 14px; }
@media (min-width: 768px) {
    .segmented--tabs { display: inline-flex; justify-self: start; }
    .segmented--tabs .segmented__item { padding: 0 22px; }
}

.tabpanel { display: grid; gap: 20px; }
.tabpanel[hidden] { display: none; }

/* ---------- Section heads ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title { font-size: 20px; font-weight: 600; line-height: 1.2; }
.section-hint { display: flex; align-items: flex-start; gap: 6px; margin: -4px 0 12px; color: var(--grey-600); font-size: 14px; line-height: 1.4; }
.section-hint .icon { margin-top: 1px; color: var(--m4p-blue); }
.section-meta { color: var(--grey-600); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Metric tiles ---------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 7 tiles: the movement tile spans two columns so 2- and 4-column grids end flush (the sidebar leaves no room for 7 columns). */
.tile--wide { grid-column: span 2; }
@media (min-width: 640px) { .tile--wide { grid-column: 1 / -1; } }
/* Planned in-drum sensors: two tiles, never stretched over four columns. */
.tiles--future { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .tiles--future { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; } }

.tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px 13px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: var(--white);
}
.tile__label { color: var(--grey-600); font-size: 13px; font-weight: 500; line-height: 1.3; }
.tile__value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tile__unit { margin-left: 4px; color: var(--grey-600); font-size: 14px; font-weight: 500; }
.tile__hint { color: var(--grey-600); font-size: 12px; }

.tile--future { background: var(--grey-50); border-style: dashed; border-color: #cfcfcf; }
.tile--future .tile__label { color: #6b6b6b; }
.tile__future {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    color: #6b6b6b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.tile__future .icon { color: var(--grey-400); }

/* ---------- Chart card ---------- */
.chart-card {
    padding: 16px 12px 8px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: var(--white);
}
.chart-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
    margin-bottom: 10px;
}
@media (min-width: 768px) { .chart-card { padding: 20px 20px 12px; } }

.trend { display: grid; gap: 6px; }
.trend__plot { min-height: 300px; margin: 0 -4px; }
.trend__plot--small { min-height: 170px; }
.trend__subtitle { margin: 14px 4px 0; padding-top: 14px; border-top: 1px solid var(--grey-200); font-size: 15px; font-weight: 600; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0 4px;
    list-style: none;
    color: var(--grey-600);
    font-size: 13px;
}
.legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend__line { width: 18px; height: 0; border-top: 2px solid var(--c); border-radius: 1px; }
.legend__line--dashed { height: 2px; border-top: 0; background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--grey-200); }
.legend__area { width: 14px; height: 12px; border-radius: 2px; }
.legend__area--wait { background: rgba(200, 55, 45, 0.16); box-shadow: inset 0 0 0 1px rgba(200, 55, 45, 0.35); }
.legend__area--close { background: rgba(224, 168, 0, 0.24); box-shadow: inset 0 0 0 1px rgba(224, 168, 0, 0.5); }

/* ApexCharts tooltip in the design-system font */
.apexcharts-tooltip { font-family: var(--font) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important; border-color: var(--grey-200) !important; }
.apexcharts-tooltip-title { font-family: var(--font) !important; font-weight: 600; background: var(--grey-50) !important; border-bottom-color: var(--grey-200) !important; }

.ctt { min-width: 168px; padding: 8px 12px 9px; font-size: 13px; color: var(--ink); }
.ctt__title { margin-bottom: 4px; color: var(--grey-600); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctt__row { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.ctt__row b { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctt__key { width: 12px; height: 0; border-top: 2px solid var(--c); }

/* ---------- Powder spec ---------- */
.spec { display: grid; gap: 18px; padding: 18px; border: 1px solid var(--grey-200); border-radius: var(--radius); }
@media (min-width: 768px) { .spec { padding: 24px 28px; } }
.spec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.spec__title { font-size: 22px; font-weight: 600; line-height: 1.2; }
.spec__alloy { margin-top: 2px; color: var(--grey-600); }
.spec__desc { max-width: 70ch; }
.spec__grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .spec__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.spec__block { display: grid; gap: 10px; align-content: start; }
.spec__h { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-600); }
.spec-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec-table th, .spec-table td { padding: 9px 4px; border-bottom: 1px solid var(--grey-200); text-align: left; }
.spec-table thead th { padding-top: 0; color: var(--grey-600); font-size: 13px; font-weight: 500; }
.spec-table tbody th { font-weight: 500; }
.spec-table td { font-weight: 600; }
.spec-table .num { text-align: right; }
.spec-table td.spec-table__rest { color: var(--grey-600); font-weight: 500; }
.spec-table td.spec-table__limit { color: var(--grey-600); font-weight: 500; }
.spec-table td { white-space: nowrap; }
.spec-table__method { display: block; margin-top: 1px; color: var(--grey-600); font-size: 12px; font-weight: 400; }
.spec-table__unit { margin-left: 3px; color: var(--grey-600); font-size: 12px; font-weight: 400; }
.spec__source { color: var(--grey-600); font-size: 13px; }
.spec__storage {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--m4p-blue-tint);
    color: var(--ink);
}
.spec__storage .icon { margin-top: 2px; color: var(--m4p-blue); }
.spec__storage-title { font-weight: 600; }

/* ---------- Loading ---------- */
.detail-notice { margin-top: 16px; }
.detail-skeleton { display: grid; gap: 16px; margin-top: 16px; }
.detail-skeleton > div { border-radius: var(--radius); background: var(--grey-50); }
.detail-skeleton__title { height: 64px; max-width: 420px; }
.detail-skeleton__card { height: 220px; }
.detail-skeleton__tiles { height: 180px; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Simulation mode (Task 8) ---------- */
:root {
    --sim: #7b2fbe;
    --sim-dark: #5f1f97;
    --sim-tint: #f4edfb;
}

/* Frame around the whole page content while simulating (dashed = "not real", like the dashed chart lines). */
.detail--sim {
    margin-inline: -10px;
    padding: 10px;
    border: 2px dashed var(--sim);
    border-radius: 14px;
}
@media (min-width: 768px) { .detail--sim { margin-inline: -20px; padding: 18px; } }

.sim-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius);
    background: var(--sim);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
}

.sim-banner .icon { flex: none; }
.release--sim { border-color: var(--sim); border-style: dashed; }
.tag--sim { border-color: #cdb2e8; background: var(--sim-tint); color: var(--sim-dark); }
.tile--sim .tag--sim { align-self: flex-start; font-size: 11px; padding: 0 7px; }
.tile--sim { border-color: #cdb2e8; background: var(--sim-tint); }
.section-meta--sim { color: var(--sim-dark); font-weight: 600; }
.release__saved--muted { color: var(--grey-600); font-weight: 500; }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }

/* Panel */
.sim {
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(30, 42, 54, 0.05);
}
.sim--on { border-color: var(--sim); box-shadow: 0 0 0 1px var(--sim), 0 8px 24px rgba(123, 47, 190, 0.14); }
.sim__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 56px; }
.sim__off { margin-left: auto; color: var(--grey-600); font-size: 14px; font-weight: 600; }
.sim__status { margin-left: auto; min-width: 0; }
.sim__status .badge { max-width: 100%; }
.sim__toggle {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--sim-tint);
    color: var(--sim-dark);
    cursor: pointer;
}
.sim__toggle .icon { transform: rotate(-90deg); transition: transform 0.15s; }
.sim--open .sim__toggle .icon { transform: rotate(90deg); }
.sim__hint { padding: 0 14px 16px; color: var(--grey-600); font-size: 14px; line-height: 1.45; }

/* Switch */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}
.switch__track {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: #b9b9b9;
    transition: background 0.15s;
}
.switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}
.switch[aria-checked="true"] .switch__track { background: var(--sim); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(20px); }
.switch:focus-visible { box-shadow: none; }
.switch:focus-visible .switch__track { box-shadow: 0 0 0 3px rgba(123, 47, 190, 0.35); }

/* Sliders */
.sim__body { display: grid; gap: 16px; padding: 4px 14px 16px; border-top: 1px solid var(--grey-200); padding-top: 16px; }
.slider { display: grid; gap: 6px; }
.slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.slider__head label { font-size: 14px; font-weight: 600; }
.slider__val { color: var(--sim-dark); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.slider__range { display: flex; justify-content: space-between; color: var(--grey-600); font-size: 12px; font-variant-numeric: tabular-nums; }
.slider input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}
.slider input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sim) var(--pct), var(--grey-200) var(--pct));
}
.slider input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--grey-200); }
.slider input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--sim); }
.slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border: 3px solid var(--sim);
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.slider input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid var(--sim);
    border-radius: 50%;
    background: var(--white);
}
.slider input[type=range]:focus-visible { box-shadow: none; outline: none; }
.slider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(123, 47, 190, 0.35); }
.slider input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(123, 47, 190, 0.35); }

.sim__calc { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--sim-tint); }
.sim__calc > div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.sim__calc dt { color: var(--grey-600); }
.sim__calc dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim__note { color: var(--grey-600); font-size: 12.5px; line-height: 1.4; }

/* Mobile / tablet: bar fixed to the bottom that expands into a sheet. */
@media (max-width: 1099px) {
    .detail { padding-bottom: 84px; }
    .detail__sim { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
    .sim {
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 24px rgba(30, 42, 54, 0.16);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sim--on { border-top: 3px solid var(--sim); box-shadow: 0 -8px 28px rgba(123, 47, 190, 0.22); }
    .sim__toggle { display: inline-flex; }
    .sim__hint { display: none; }
    .sim--on:not(.sim--open) .sim__body { display: none; }
    .sim__body { max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
    .sim__bar { padding: 10px 16px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
    .detail__sim { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); }
}
@media (min-width: 1100px) {
    .sim { margin-top: 4px; }
}