/* Adminsidans läge "exercise" (js/admin/exercise.js). Ägs av lägets paket, se docs/moduler-plan.md.
   Ljust tema som resten av adminsidan: vita kort, blå rubriker, orange för det man gör.
   Prefix: xl- biblioteket, xs- detaljarket, xc- konsolen, xm- bekräftelser, xmd- markdown,
   xo- sidans upplägg och Mina övningar (kartbilden xo-shot). */

/* ---------------- Biblioteket ---------------- */
.xl { margin-bottom: 28px; }
.xl-head { margin-bottom: 14px; }
.xl-title { font-size: 22px; font-weight: 800; color: var(--blue, #015e9f); margin: 0 0 4px; }
.xl-intro { font-size: 15px; color: var(--text-secondary, #666); line-height: 1.45; margin: 0; }
.xl-mock {
    background: #fff; border: 2px dashed var(--accent, #f0833d); border-radius: 10px;
    padding: 10px 14px; margin-bottom: 14px; font-size: 14px; line-height: 1.45; color: #333;
}
.xl-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 16px; }
.xl-search {
    grid-column: 1 / -1; width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 16px;
    background: #fff; border: 2px solid var(--border-color, #d8dbe0); border-radius: 10px; color: #000; outline: none;
}
.xl-search:focus { border-color: var(--accent, #f0833d); }
.xl-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.xl-select {
    min-width: 0; max-width: 100%; padding: 9px 10px; font: inherit; font-size: 14px; font-weight: 600;
    background: #fff; border: 1px solid var(--border-color, #d8dbe0); border-radius: 8px; color: #000;
}
.xl-select[hidden] { display: none; }
.xl-import {
    padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
    background: #fff; color: #000; border: 1px solid var(--border-color, #d8dbe0); border-radius: 8px;
}
.xl-import:active { border-color: var(--accent, #f0833d); }
.xl-status { font-size: 15px; color: var(--text-secondary, #666); margin: 4px 0 12px; }
.xl-status:empty { display: none; }
.xl-link { background: none; border: none; padding: 0; font: inherit; color: var(--blue, #015e9f); font-weight: 700; cursor: pointer; text-decoration: underline; }
.xl-group { margin-bottom: 20px; }
.xl-group[hidden], .xl-running[hidden] { display: none; }
.xl-group-title {
    font-size: 13px; font-weight: 700; color: var(--blue, #015e9f); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 10px;
}
.xl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.xl-card {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid var(--border-color, #d8dbe0); border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); -webkit-tap-highlight-color: transparent;
}
.xl-card:hover { border-color: #b9c0ca; }
.xl-card:active, .xl-card:focus-visible { border-color: var(--accent, #f0833d); outline: none; }
.xl-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.xl-flag { font-size: 22px; line-height: 1; }
.xl-type { font-size: 13px; font-weight: 700; color: var(--text-secondary, #666); }
.xl-diff { margin-left: auto; color: var(--accent, #f0833d); font-size: 13px; letter-spacing: 1px; }
.xl-tag {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
    color: var(--blue, #015e9f); background: rgba(1,94,159,0.08); text-transform: uppercase; letter-spacing: 0.04em;
    margin-left: 6px; vertical-align: middle;
}
.xl-card-top .xl-tag { margin-left: 0; }
.xl-card-title { font-size: 18px; font-weight: 800; color: #000; line-height: 1.25; overflow-wrap: anywhere; }
.xl-card-sum {
    font-size: 14px; color: #333; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.xl-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.xl-chip {
    display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--bg-primary, #f0f2f5);
    font-size: 12px; font-weight: 700; color: #333; white-space: nowrap;
}
.xl-card-src { font-size: 13px; color: var(--text-secondary, #666); font-style: italic; }

/* Pågående övningar ur biblioteket */
.xl-running { margin-bottom: 26px; }
.xl-run-list { display: flex; flex-direction: column; gap: 10px; }
.xl-run {
    background: #fff; border: 1px solid var(--border-color, #d8dbe0); border-left: 4px solid var(--accent, #f0833d);
    border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.xl-run.finished { border-left-color: var(--blue, #015e9f); }
.xl-finished { margin-top: 8px; }
.xl-run-main { min-width: 0; }
.xl-run-name { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.xl-run-sub { font-size: 14px; color: var(--text-secondary, #666); margin-top: 2px; }
.xl-run-clock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.xl-run-time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xl-run-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.xl-btn {
    padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    background: #fff; color: #000; border: 1px solid var(--border-color, #d8dbe0); border-radius: 8px;
}
.xl-btn:active { border-color: var(--accent, #f0833d); }
.xl-btn-cta { background: var(--accent, #f0833d); border-color: var(--accent, #f0833d); color: #fff; }
.xl-btn-cta:active { background: var(--accent-hover, #d9722e); }

/* ---------------- Detaljarket ---------------- */
body.xs-open { overflow: hidden; }
.xs-overlay {
    position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; padding: 20px; height: 100dvh; box-sizing: border-box;
}
.xs-sheet {
    position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 640px; max-height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.xs-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
/* Stängknappen följer med när arket rullar, utan att ta bredd från innehållet. */
.xs-closebar { position: sticky; top: 0; height: 0; z-index: 2; }
.xs-close {
    position: absolute; top: 10px; right: 10px;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color, #d8dbe0);
    background: #fff; font-size: 18px; cursor: pointer; color: #000;
}
.xs-body > .xl-card-top { padding-right: 44px; }
.xs-loading, .xs-error { color: var(--text-secondary, #666); font-size: 15px; }
.xs-title { font-size: 24px; font-weight: 800; line-height: 1.2; margin: 2px 0 0; overflow-wrap: anywhere; }
.xs-sum { font-size: 16px; line-height: 1.5; color: #333; margin: 0; }
.xs-src { font-size: 14px; color: var(--text-secondary, #666); }
.xs-src-link { color: var(--blue, #015e9f); font-weight: 700; }
.xs-src-note { margin-top: 2px; font-style: italic; }
.xs-start {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0 4px; padding: 14px;
    background: var(--bg-primary, #f0f2f5); border-radius: 12px;
}
.xs-label { font-size: 13px; font-weight: 700; color: var(--text-secondary, #666); }
.xs-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 17px;
    background: #fff; border: 2px solid var(--border-color, #d8dbe0); border-radius: 8px; color: #000; outline: none;
}
.xs-input:focus { border-color: var(--accent, #f0833d); }
.xs-cta {
    padding: 16px; border: none; border-radius: 10px; background: var(--accent, #f0833d); color: #fff;
    font: inherit; font-size: 19px; font-weight: 800; cursor: pointer;
}
.xs-cta:active { background: var(--accent-hover, #d9722e); }
.xs-cta:disabled { opacity: 0.6; cursor: default; }
.xs-h { font-size: 13px; font-weight: 700; color: var(--blue, #015e9f); text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 0; }
.xs-brief { font-size: 15px; }
.xs-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.xs-role {
    padding: 5px 12px; border-radius: 999px; border: 2px solid var(--blue, #015e9f); color: var(--blue, #015e9f);
    font-size: 14px; font-weight: 800;
}
.xs-injects { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.xs-hint { font-size: 13px; color: var(--text-dim, #999); margin: 0; }
.xs-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border-color, #d8dbe0); }
.xs-sec {
    padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    background: #fff; color: #000; border: 1px solid var(--border-color, #d8dbe0); border-radius: 8px;
}
.xs-sec:active { border-color: var(--accent, #f0833d); }

/* ---------------- Markdown ---------------- */
.xmd { line-height: 1.5; color: #222; overflow-wrap: anywhere; }
.xmd .xmd-h { font-size: 16px; font-weight: 800; margin: 12px 0 4px; color: #000; }
.xmd .xmd-h:first-child { margin-top: 0; }
.xmd .xmd-p { margin: 0 0 8px; }
.xmd .xmd-list { margin: 0 0 8px; padding-left: 22px; }
.xmd .xmd-list li { margin: 2px 0; }

/* ---------------- Bekräftelser ---------------- */
.xm-overlay {
    position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 20px; height: 100dvh; box-sizing: border-box;
}
.xm-dialog {
    background: #fff; border-radius: 14px; padding: 22px; width: 100%; max-width: 500px; max-height: 100%; overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.xm-title { font-size: 20px; font-weight: 800; margin: 0 0 10px; line-height: 1.25; overflow-wrap: anywhere; }
.xm-title.danger { color: var(--danger, #d32f2f); }
.xm-text { font-size: 16px; color: #444; line-height: 1.5; margin: 0 0 10px; }
.xm-list { margin: 0 0 12px; padding-left: 20px; font-size: 15px; color: #333; line-height: 1.5; }
.xm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.xm-btn { flex: 1 1 120px; min-height: 50px; padding: 0 12px; border-radius: 8px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; border: none; }
.xm-cancel { background: var(--bg-secondary, #e4e6ea); color: #000; border: 2px solid var(--border-color, #d8dbe0); }
.xm-ok { background: var(--accent, #f0833d); color: #fff; }
.xm-danger { background: var(--danger, #d32f2f); color: #fff; }

/* ---------------- Konsolen ---------------- */
body.xc-open { overflow: hidden; }
.xc {
    display: none; position: fixed; inset: 0; z-index: 60; background: var(--bg-primary, #f0f2f5);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.xc.visible { display: block; }
.xc-head {
    position: sticky; top: 0; z-index: 3; background: var(--blue, #015e9f); color: #fff;
    display: flex; align-items: center; gap: 12px; padding: 12px 20px;
}
.xc-hbtn {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; box-sizing: border-box;
    background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); color: #fff; border-radius: 8px;
    font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.xc-hbtn:active { background: rgba(255,255,255,0.3); }
.xc-hbtn svg { width: 18px; height: 18px; flex-shrink: 0; }
.xc-titles { min-width: 0; flex: 1; }
.xc-title { font-size: 19px; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.xc-sub { font-size: 13px; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-sub:empty { display: none; }
.xc-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.xc-body { padding: 20px; max-width: 1480px; margin: 0 auto; box-sizing: border-box; }
.xc-status { background: #fff; border-radius: 12px; padding: 18px; font-size: 16px; color: #333; }
.xc-status[hidden], .xc-grid[hidden] { display: none; }
.xc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.xc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 760px) {
    .xc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .xc-col:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
    .xc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.95fr); }
    .xc-col:nth-child(3) { grid-column: auto; }
}
.xc-card {
    background: #fff; border: 1px solid var(--border-color, #d8dbe0); border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-width: 0;
}
.xc-h { font-size: 13px; font-weight: 800; color: var(--blue, #015e9f); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 10px; }
.xc-hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.xc-hrow .xc-h { margin: 0; }
.xc-count { font-size: 13px; font-weight: 700; color: var(--text-secondary, #666); }
.xc-label { font-size: 12px; font-weight: 800; color: var(--text-secondary, #666); text-transform: uppercase; letter-spacing: 0.05em; margin: 12px 0 6px; }
.xc-hint { font-size: 14px; color: #333; line-height: 1.45; margin: 10px 0 0; padding: 10px 12px; background: rgba(1,94,159,0.07); border-radius: 8px; }
.xc-hint[hidden] { display: none; }
.xc-hint-dim { background: none; padding: 0; margin: -4px 0 10px; color: var(--text-dim, #999); font-size: 13px; }
.xc-empty { font-size: 14px; color: var(--text-dim, #999); margin: 0; }

/* Spelklockan */
.xc-clock-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xc-pill {
    display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid currentColor;
}
.xc-pill-ready { color: var(--blue, #015e9f); }
.xc-pill-running { color: #fff; background: var(--accent, #f0833d); border-color: var(--accent, #f0833d); }
.xc-pill-paused { color: #000; }
.xc-pill-ended { color: var(--text-secondary, #666); }
.xc-gdate { font-size: 13px; font-weight: 700; color: var(--text-secondary, #666); font-variant-numeric: tabular-nums; }
.xc-conn { font-size: 12px; font-weight: 800; color: var(--danger, #d32f2f); margin-left: auto; }
.xc-conn[hidden] { display: none; }
.xc-time { margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xc-hm { font-size: clamp(56px, 9vw, 92px); font-weight: 800; letter-spacing: -0.02em; color: #000; }
.xc-sec { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: var(--text-dim, #999); margin-left: 2px; }
.xc.xc-ended .xc-hm { color: var(--text-secondary, #666); }
.xc-elapsed { font-size: 18px; font-weight: 700; color: var(--blue, #015e9f); margin-top: 6px; font-variant-numeric: tabular-nums; }
.xc-seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.xc-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xc-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xc-seg-btn {
    min-height: 44px; padding: 0 6px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    background: #fff; color: #000; border: 2px solid var(--border-color, #d8dbe0); border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.xc-seg-btn.on { background: var(--accent, #f0833d); border-color: var(--accent, #f0833d); color: #fff; }
.xc-seg-btn:disabled { opacity: 0.5; cursor: default; }
.xc-clock-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.xc-cta {
    min-height: 58px; padding: 0 16px; border: none; border-radius: 10px; cursor: pointer;
    background: var(--accent, #f0833d); color: #fff; font: inherit; font-size: 20px; font-weight: 800;
}
.xc-cta:active { background: var(--accent-hover, #d9722e); }
.xc-cta:disabled { opacity: 0.6; cursor: default; }
.xc-cta[hidden], .xc-end[hidden] { display: none; }
.xc-cta-pause { background: var(--blue, #015e9f); }
.xc-cta-pause:active { background: #014b80; }
.xc-end {
    min-height: 44px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
    background: #fff; color: var(--danger, #d32f2f); border: 2px solid rgba(211,47,47,0.35);
}
.xc-end:active { border-color: var(--danger, #d32f2f); }

/* Meddelande */
.xc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-chip {
    min-height: 40px; padding: 0 14px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    background: #fff; color: #000; border: 2px solid var(--border-color, #d8dbe0); border-radius: 999px;
}
.xc-chip.on { background: var(--blue, #015e9f); border-color: var(--blue, #015e9f); color: #fff; }
.xc-input, .xc-text {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #000; outline: none;
    background: #fff; border: 2px solid var(--border-color, #d8dbe0); border-radius: 8px; padding: 10px 12px;
}
.xc-input { margin-top: 8px; }
.xc-input[hidden] { display: none; }
.xc-text { margin-top: 12px; resize: vertical; min-height: 84px; line-height: 1.45; }
.xc-input:focus, .xc-text:focus { border-color: var(--accent, #f0833d); }
.xc-quick { margin-top: 8px; }
.xc-quick summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--blue, #015e9f); padding: 6px 0; }
.xc-quick-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.xc-quick-btn {
    display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 8px 10px; cursor: pointer;
    background: var(--bg-primary, #f0f2f5); border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 14px; color: #222;
}
.xc-quick-btn:hover { border-color: var(--border-color, #d8dbe0); }
.xc-quick-from { font-weight: 800; color: var(--blue, #015e9f); flex-shrink: 0; }
.xc-send { width: 100%; margin-top: 12px; min-height: 52px; font-size: 18px; }

/* Timers */
.xc-timer-list { display: flex; flex-direction: column; gap: 10px; }
.xc-timer { border: 2px solid var(--border-color, #d8dbe0); border-radius: 10px; padding: 10px 12px; }
.xc-timer.due { border-color: var(--blue, #015e9f); }
.xc-timer-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xc-timer-label { font-size: 15px; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.xc-kind {
    flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--bg-primary, #f0f2f5);
    font-size: 11px; font-weight: 800; color: #444; text-transform: uppercase; letter-spacing: 0.04em;
}
.xc-timer-remain { font-size: 22px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.xc-timer.due .xc-timer-remain { color: var(--blue, #015e9f); }
.xc-timer-real { font-size: 13px; color: var(--text-secondary, #666); min-height: 1em; }
.xc-bar { height: 6px; border-radius: 3px; background: var(--bg-secondary, #e4e6ea); margin: 8px 0 10px; overflow: hidden; }
.xc-bar-fill { height: 100%; width: 0; background: var(--accent, #f0833d); transition: width 0.25s linear; }
.xc-timer.due .xc-bar-fill { background: var(--blue, #015e9f); }
.xc-timer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-small {
    min-height: 38px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    background: #fff; color: #000; border: 2px solid var(--border-color, #d8dbe0); border-radius: 8px; white-space: nowrap;
}
.xc-small:disabled { opacity: 0.5; cursor: default; }
.xc-small-blue { background: var(--blue, #015e9f); border-color: var(--blue, #015e9f); color: #fff; }
.xc-small-cta { background: var(--accent, #f0833d); border-color: var(--accent, #f0833d); color: #fff; }
.xc-small-danger { color: var(--danger, #d32f2f); }
.xc-done { margin-top: 12px; }
.xc-done[hidden] { display: none; }
.xc-done summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text-secondary, #666); padding: 4px 0; }
.xc-done-row { display: flex; gap: 8px; align-items: baseline; font-size: 14px; padding: 5px 0; border-bottom: 1px solid var(--bg-secondary, #e4e6ea); }
.xc-done-status { font-weight: 800; font-size: 12px; text-transform: uppercase; flex-shrink: 0; }
.xc-done-status.done { color: var(--blue, #015e9f); }
.xc-done-status.cancelled { color: var(--text-dim, #999); }
.xc-done-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.xc-done-time { color: var(--text-secondary, #666); font-variant-numeric: tabular-nums; }

/* Händelsepaket */
.xc-inj-list { display: flex; flex-direction: column; gap: 10px; }
.xc-inj { border: 2px solid var(--border-color, #d8dbe0); border-radius: 12px; padding: 12px 14px; }
.xc-inj.fired { background: #f7f8fa; border-style: dashed; }
.xc-inj-title { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.xc-inj.fired .xc-inj-title { color: var(--text-secondary, #666); }
.xc-inj-kinds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.xc-inj-brief { font-size: 14px; margin-top: 8px; color: #333; }
.xc-inj.fired .xc-inj-brief { color: var(--text-secondary, #666); }
.xc-inj-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.xc-inj-auto { margin-right: auto; font-size: 13px; color: var(--text-secondary, #666); font-variant-numeric: tabular-nums; }
.xc-inj-fired { margin-right: auto; font-size: 14px; font-weight: 700; color: var(--blue, #015e9f); font-variant-numeric: tabular-nums; }
.xc-inj-foot .xc-small-cta { min-height: 44px; font-size: 16px; padding: 0 18px; }

/* Logg */
.xc-log-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.xc-log-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bg-secondary, #e4e6ea); }
.xc-log-row:last-child { border-bottom: none; }
.xc-log-when { flex-shrink: 0; width: 54px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.xc-log-time { font-size: 15px; font-weight: 800; }
.xc-log-t { font-size: 12px; color: var(--text-dim, #999); }
.xc-log-what { min-width: 0; }
.xc-log-from { font-size: 12px; font-weight: 800; color: var(--blue, #015e9f); text-transform: uppercase; letter-spacing: 0.04em; }
.xc-log-row.inject .xc-log-from { color: var(--accent, #f0833d); }
.xc-log-row.timer .xc-log-from { color: var(--text, #000); }
.xc-log-row.timer.cancelled .xc-log-text { color: var(--text-dim, #999); text-decoration: line-through; }
.xc-log-text { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.xc-brief .xmd, .xc-notes .xmd { font-size: 15px; }
.xc-notes { border-left: 4px solid var(--accent, #f0833d); }

/* ---------------- Telefon ---------------- */
@media (max-width: 599px) {
    .xl-grid { grid-template-columns: minmax(0, 1fr); }
    .xl-tools { grid-template-columns: minmax(0, 1fr); }
    .xl-import { justify-self: start; }
    .xl-filters .xl-select { flex: 1 1 140px; }
    .xl-run-actions .xl-btn { flex: 1 1 auto; }
    .xs-overlay { padding: 0; align-items: flex-end; }
    .xs-sheet { max-width: none; border-radius: 16px 16px 0 0; max-height: 92dvh; }
    .xs-body { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
    .xc-head { padding: 10px 16px; gap: 8px; }
    .xc-hbtn { padding: 0 10px; }
    .xc-htxt { display: none; }
    .xc-body { padding: 16px; }
    .xc-card { padding: 14px 16px; }
    .xc-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xc-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Sidans upplägg (22 okt): Pågående · Mina / INCA:s · Avslutade ---------------- */
.xo-section { margin-bottom: 28px; }
.xo-section[hidden], .xo-panel[hidden] { display: none; }
.xo-title {
    font-size: 13px; font-weight: 800; color: var(--blue, #015e9f); text-transform: uppercase;
    letter-spacing: 0.06em; margin: 0 0 10px;
}

/* Pågående och avslutade övningar */
.xo-run-list { display: flex; flex-direction: column; gap: 10px; }
.xo-run {
    background: #fff; border: 1px solid var(--border-color, #d8dbe0); border-left: 4px solid var(--accent, #f0833d);
    border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.xo-run.finished { border-left-color: var(--blue, #015e9f); }
.xo-run.flash { animation: xo-flash 2.4s ease-out; }
@keyframes xo-flash {
    0%, 30% { box-shadow: 0 0 0 4px rgba(240,131,61,0.55); }
    100% { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
}
.xo-run-main { min-width: 0; }
.xo-run-name { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.xo-run-sub { font-size: 14px; color: var(--text-secondary, #666); margin-top: 2px; }
.xo-run-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.xo-run-time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xo-run-people {
    padding: 3px 9px; border-radius: 999px; background: var(--bg-primary, #f0f2f5);
    font-size: 12px; font-weight: 700; color: #333;
}
.xo-run-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.xo-btn-push { margin-left: auto; }
.xo-btn-end { margin-left: auto; color: var(--danger, #d32f2f); border-color: rgba(211,47,47,0.35); }
.xo-btn-end:active { border-color: var(--danger, #d32f2f); }
.xo-more {
    display: block; margin: 10px auto 0; padding: 8px 12px; background: none; border: none;
    color: var(--blue, #015e9f); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.xo-more[hidden] { display: none; }

/* De två korten: Mina övningar / INCA:s övningar */
.xo-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.xo-tab {
    display: flex; gap: 12px; align-items: flex-start; min-width: 0; text-align: left; cursor: pointer;
    padding: 16px; background: #fff; color: #000; font: inherit;
    border: 2px solid var(--border-color, #d8dbe0); border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
}
.xo-tab:hover { border-color: #b9c0ca; }
.xo-tab.on { border-color: var(--accent, #f0833d); background: #fff8f2; box-shadow: 0 2px 10px rgba(240,131,61,0.16); }
.xo-tab-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-primary, #f0f2f5); color: var(--blue, #015e9f);
}
.xo-tab-icon svg { width: 22px; height: 22px; }
.xo-tab.on .xo-tab-icon { background: var(--accent, #f0833d); color: #fff; }
.xo-tab-text { min-width: 0; display: block; }
.xo-tab-title { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
.xo-tab-count {
    display: inline-block; margin-left: 6px; vertical-align: 2px; line-height: 1.5;
    min-width: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; text-align: center;
    background: var(--bg-primary, #f0f2f5); color: #333; font-size: 12px; font-weight: 800;
}
.xo-tab-count:empty { display: none; }
.xo-tab.on .xo-tab-count { background: #fff; color: #000; }
.xo-tab-sub { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--text-secondary, #666); }

/* Mina övningar */
.xo-mine-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
.xo-create {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
    padding: 14px 16px; text-align: left; cursor: pointer; font: inherit; color: #000;
    background: #fff; border: 2px dashed var(--accent, #f0833d); border-radius: 14px;
}
.xo-create:active { background: #fff8f2; }
.xo-create-plus {
    grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--accent, #f0833d); color: #fff; font-size: 26px; font-weight: 800; line-height: 1;
}
.xo-create-text { font-size: 17px; font-weight: 800; }
.xo-create-hint { font-size: 13px; color: var(--text-secondary, #666); line-height: 1.35; }
.xo-import {
    padding: 0 16px; min-height: 48px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
    background: #fff; color: #000; border: 1px solid var(--border-color, #d8dbe0); border-radius: 12px;
}
.xo-import:active { border-color: var(--accent, #f0833d); }
.xo-empty {
    margin: 0 0 12px; padding: 16px; font-size: 15px; line-height: 1.45; color: var(--text-secondary, #666);
    background: #fff; border: 1px solid var(--border-color, #d8dbe0); border-radius: 12px;
}
.xo-empty[hidden] { display: none; }
.xo-card-when { margin-left: auto; font-size: 12px; color: var(--text-dim, #999); }
.xm-input { margin-top: 4px; }
.xs-sec.xs-danger { color: var(--danger, #d32f2f); }

/* Mina övningar (23 okt): kortet som INCA:s, med kartbilden överst. Bilden är MapTilers rutor
   (img i procent av rutan) och formerna som SVG ovanpå, 16:9 i alla storlekar. */
.xo-own { padding-top: 0; overflow: hidden; }
.xo-own > .xo-shot { margin: 0 -16px 4px; border-radius: 0; border-bottom: 1px solid var(--border-color, #d8dbe0); }
.xo-own .xl-card-sum, .xo-sheet-intro { white-space: pre-line; }
.xo-shot { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px; background: #e9edf1; isolation: isolate; }
@supports not (aspect-ratio: 1 / 1) {
    .xo-shot::before { content: ''; display: block; padding-top: 56.25%; }
}
.xo-tile {
    position: absolute; display: block; max-width: none; margin: 0; border: 0;
    pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.xo-shot-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; overflow: visible; }
.xo-shot--empty { background: var(--bg-primary, #f0f2f5); }
.xo-shot-msg {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 12px; text-align: center; color: var(--text-secondary, #666);
}
.xo-shot-icon { display: block; color: var(--blue, #015e9f); }
.xo-shot-icon svg { width: 34px; height: 34px; display: block; }
.xo-shot-empty { font-size: 13px; font-weight: 700; }
.xo-shot--big { margin-top: 6px; }
.xo-shot--big.xo-shot--empty { border: 2px dashed var(--border-color, #d8dbe0); }

/* Namn och introduktion (Skapa ny övning, Ändra namn och text) */
.xo-dialog { max-width: 540px; }
.xo-intro-label { display: block; margin-top: 12px; }
.xo-intro {
    display: block; margin-top: 4px; min-height: 104px; resize: vertical; line-height: 1.45; font-size: 16px;
}
.xo-intro-count { margin-top: 4px; font-size: 12px; color: var(--text-dim, #999); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 599px) {
    .xo-tabs { gap: 8px; }
    .xo-tab { flex-direction: column; gap: 8px; padding: 12px; }
    .xo-tab-icon { width: 36px; height: 36px; border-radius: 10px; }
    .xo-tab-title { font-size: 16px; }
    .xo-tab-sub { font-size: 12px; }
    .xo-mine-actions { grid-template-columns: minmax(0, 1fr); }
    .xo-import { justify-self: start; }
    .xo-run-actions .xl-btn { flex: 1 1 auto; }
    .xo-btn-end, .xo-btn-push { margin-left: 0; }
}

/* ---------------- Spelet i konsolen (skiva 1): Resurser, Begäran, uppdrag, Hoppa fram ----------------
   Prefix xg-. Samma ljusa formspråk som konsolen: vita kort, blå rubriker, orange för det man gör.
   Lägets färger: kör orange (svart text), arbetar blå, redo blå kant, stoppad svart, hemma grå. */
.xg-res[hidden], .xg-req[hidden], .xg-res-body[hidden], .xg-orders[hidden], .xg-req-group[hidden], .xg-picked[hidden], .xg-form-err[hidden] { display: none; }
.xg-res-head { flex-wrap: wrap; }

/* På/av */
.xg-switch {
    display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; background: none; border: none; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 700; color: #000; -webkit-tap-highlight-color: transparent; text-align: left;
}
.xg-switch:disabled { opacity: 0.55; cursor: default; }
.xg-switch-track {
    position: relative; flex-shrink: 0; width: 50px; height: 30px; border-radius: 999px; background: #c9ced6; transition: background 0.15s;
}
.xg-switch-knob {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s;
}
.xg-switch.on .xg-switch-track { background: var(--accent, #f0833d); }
.xg-switch.on .xg-switch-knob { transform: translateX(20px); }
.xg-switch-state { min-width: 2.2em; font-weight: 800; }
.xg-switch:focus-visible { outline: 2px solid var(--blue, #015e9f); outline-offset: 3px; border-radius: 6px; }
.xg-res-body { margin-top: 12px; }

/* Filtren */
.xg-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.xg-filter {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; color: #000; background: #fff;
    border: 2px solid var(--border-color, #d8dbe0); border-radius: 999px;
}
.xg-filter.on { background: var(--blue, #015e9f); border-color: var(--blue, #015e9f); color: #fff; }
.xg-filter-n {
    min-width: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; text-align: center;
    background: var(--bg-primary, #f0f2f5); color: #333; font-size: 12px; font-weight: 800; line-height: 1.6;
}
.xg-filter.on .xg-filter-n { background: #fff; color: #000; }

/* Enheterna och stationerna */
.xg-units { display: flex; flex-direction: column; }
.xg-units-group {
    font-size: 12px; font-weight: 800; color: var(--text-secondary, #666); text-transform: uppercase;
    letter-spacing: 0.05em; margin: 12px 0 2px;
}
.xg-units-group:first-child { margin-top: 4px; }
.xg-unit, .xg-station, .xg-order {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
    padding: 9px 0; border-bottom: 1px solid var(--bg-secondary, #e4e6ea);
}
.xg-unit-main { min-width: 0; flex: 1; }
.xg-unit-name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.xg-unit-sub { font-size: 13px; color: var(--text-secondary, #666); margin-top: 1px; overflow-wrap: anywhere; }
.xg-unit--pool .xg-unit-name { font-weight: 700; }
.xg-state {
    flex-shrink: 0; max-width: 58%; padding: 4px 10px; border-radius: 999px; border: 2px solid transparent;
    font-size: 13px; font-weight: 800; line-height: 1.3; text-align: right; font-variant-numeric: tabular-nums;
}
.xg-state--kor { background: var(--accent, #f0833d); color: #000; }
.xg-state--arbetar { background: var(--blue, #015e9f); color: #fff; }
.xg-state--redo { background: #fff; color: var(--blue, #015e9f); border-color: var(--blue, #015e9f); }
.xg-state--stoppad { background: #000; color: #fff; }
.xg-state--hemma { background: var(--bg-primary, #f0f2f5); color: #333; }
.xg-more { margin: 6px 0 0; padding-left: 0; }
.xg-stations { margin-top: 12px; }
.xg-stations summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--blue, #015e9f); padding: 6px 0; }
.xg-adds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.xg-adds .xc-small { border-style: dashed; border-color: var(--accent, #f0833d); min-height: 42px; }

/* Begäran */
.xg-req.xg-req--open { border-left: 4px solid var(--accent, #f0833d); }
.xg-badge {
    min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent, #f0833d); color: #000; font-size: 14px; font-weight: 800;
}
.xg-badge:empty { display: none; }
.xg-req-list { display: flex; flex-direction: column; gap: 10px; }
.xg-req-card { border: 2px solid var(--border-color, #d8dbe0); border-radius: 12px; padding: 12px 14px; }
.xg-req-card.later { border-style: dashed; }
.xg-req-card.flash { animation: xg-flash 2.6s ease-out; }
@keyframes xg-flash {
    0%, 35% { border-color: var(--accent, #f0833d); box-shadow: 0 0 0 4px rgba(240,131,61,0.45); }
    100% { box-shadow: none; }
}
.xg-req-group { margin-top: 10px; }
.xg-req-group .xg-req-card { margin-top: 8px; }
.xg-req-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.xg-req-title { font-size: 17px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.xg-req-meta { font-size: 13px; font-weight: 700; color: var(--text-secondary, #666); font-variant-numeric: tabular-nums; }
.xg-req-note { margin-top: 6px; font-size: 14px; color: #333; font-style: italic; overflow-wrap: anywhere; }
.xg-sugg { display: flex; flex-direction: column; gap: 6px; }
/* Ett förslag: kryssrutan | namn ··· framme ≈ 15:25 / roll · station / om … · beredskap + körning */
.xg-sug {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 1px;
    padding: 8px 10px; background: #f7f8fa; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
}
.xg-sug:has(input:checked) { border-color: var(--accent, #f0833d); background: #fff8f2; }
.xg-sug.off { opacity: 0.55; cursor: default; }
.xg-sug input { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 22px; height: 22px; margin: 0; accent-color: var(--accent, #f0833d); cursor: inherit; }
.xg-sug-main, .xg-sug-eta { display: contents; }
.xg-sug-name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.xg-sug-at { grid-column: 3; grid-row: 1; font-size: 15px; font-weight: 800; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.xg-sug-sub { grid-column: 2 / -1; grid-row: 2; font-size: 12px; color: var(--text-secondary, #666); overflow-wrap: anywhere; }
.xg-sug-parts { grid-column: 2 / -1; grid-row: 3; font-size: 12px; color: var(--text-secondary, #666); font-variant-numeric: tabular-nums; }
.xg-sug-parts:empty { display: none; }
.xg-hist { margin-top: 10px; padding: 10px 12px; border-left: 4px solid var(--blue, #015e9f); background: rgba(1,94,159,0.07); border-radius: 8px; }
.xg-hist-title { font-size: 12px; font-weight: 800; color: var(--blue, #015e9f); text-transform: uppercase; letter-spacing: 0.05em; }
.xg-hist-text { font-size: 14px; color: #222; line-height: 1.45; margin: 4px 0 8px; }
.xg-req-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.xg-req-go { min-height: 46px; padding: 0 20px; font-size: 16px; }
.xg-reply { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--bg-secondary, #e4e6ea); }
.xg-quick { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* Uppdragen som väntar på enhet (i Pågående åtgärder) */
.xg-orders { margin-bottom: 14px; }
.xg-orders .xc-label:first-child { margin-top: 0; }
.xg-order.waiting { border-left: 4px solid var(--accent, #f0833d); padding-left: 10px; }
.xg-timer-units { font-size: 13px; color: var(--text-secondary, #666); margin-top: 2px; overflow-wrap: anywhere; }
.xc-log-row.request .xc-log-from { color: var(--accent, #f0833d); }
/* Elden når en besättning som arbetar (drill_alert): fara. */
.xc-log-row.alert .xc-log-from, .xc-log-row.fire .xc-log-from { color: #d32f2f; }
.xc-log-row.fire .xc-log-text { font-weight: 700; }

/* Hoppa fram */
.xg-jump { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 15px; }
.xg-jump svg { width: 18px; height: 18px; flex-shrink: 0; }
.xg-jump[hidden] { display: none; }

/* Ny station och ny enhet */
.xg-dialog { max-width: 540px; }
.xg-form { display: flex; flex-direction: column; gap: 12px; }
.xg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.xg-place { display: flex; gap: 8px; }
.xg-place .xs-input { flex: 1; min-width: 0; }
.xg-place .xc-small { min-height: 50px; }
.xg-hits { display: flex; flex-wrap: wrap; gap: 6px; }
.xg-hits:empty { display: none; }
.xg-hit {
    flex: 1 1 100%; text-align: left; padding: 9px 12px; cursor: pointer; font: inherit; font-size: 14px; color: #000;
    background: var(--bg-primary, #f0f2f5); border: 1px solid transparent; border-radius: 8px; overflow-wrap: anywhere;
}
.xg-hit:hover { border-color: var(--border-color, #d8dbe0); }
.xg-picked { font-size: 14px; font-weight: 700; color: var(--blue, #015e9f); overflow-wrap: anywhere; }
.xg-form-err { margin: 10px 0 0; padding: 8px 12px; font-size: 14px; font-weight: 700; color: #000; background: #fff8f2; border-left: 3px solid var(--accent, #f0833d); border-radius: 6px; }

@media (max-width: 599px) {
    .xg-switch { font-size: 14px; }
    .xg-state { max-width: 50%; font-size: 12px; }
    .xg-two { grid-template-columns: minmax(0, 1fr); }
    .xg-req-actions .xc-small { flex: 1 1 auto; }
}