/* INCA WFS — RC-sidan (/rc). Tavlans ljusa stil: vitt papper, svarta linjer, blått för fakta,
   orange för åtgärd, rött bara för fara. Trendens röd/gul/grön är data (som tavlans Trend). */

:root {
    --rc-blue: #015e9f;
    --rc-orange: #f0833d;
    --rc-orange-ink: #b35a1f;
    --rc-orange-soft: #fdf0e7;
    --rc-red: #d32f2f;
    --rc-red-soft: #fdecea;
    --rc-yellow: #e6a800;
    --rc-green: #2e7d32;
    --rc-line: #1a1a1a;
    --rc-lw: 3px;
    --rc-paper: #ffffff;
    --rc-bg: #f0f2f5;
    --rc-border: #d8dbe0;
    --rc-ink: #000000;
    --rc-dim: #5b6470;
    --rc-top-h: 64px;
    --rc-res-w: 400px;
    --rc-rail-w: 84px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--rc-bg); color: var(--rc-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
}
body.rc-dlg-open, body.rc-sheet-on { overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
.rc-muted { color: var(--rc-dim); }
.rc-hint { color: var(--rc-dim); font-size: 14px; margin: 6px 0 10px; }
.rc-err { color: var(--rc-red); font-weight: 600; margin: 6px 0; min-height: 0; }
.rc-err:empty { display: none; }
.rc-pad { padding: 24px 16px; }
.rc-org-again { margin: 0 16px 24px; }
.rc-strike { text-decoration: line-through; color: var(--rc-dim); }

/* ── Toppfältet ───────────────────────────────────────────────────────── */
.rc-top {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 12px; min-height: var(--rc-top-h);
    padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
    background: var(--rc-blue); color: #fff;
}
.rc-back {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin-left: -10px;
    color: #fff; text-decoration: none; font-weight: 600; border-radius: 10px; white-space: nowrap;
}
.rc-back:hover { background: rgba(255,255,255,0.12); }
.rc-back-arrow { margin-right: 4px; }
.rc-top-main { min-width: 0; flex: 1 1 auto; }
.rc-title { margin: 0; font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-stats { font-size: 14px; opacity: 0.95; font-variant-numeric: tabular-nums; }
.rc-views { display: flex; gap: 6px; flex: 0 0 auto; }
.rc-view, .rc-conn {
    min-height: 44px; padding: 0 14px; border-radius: 22px; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.2); color: #fff; font-weight: 700; white-space: nowrap;
}
.rc-view:hover, .rc-conn:hover { background: rgba(255,255,255,0.3); }
.rc-view--on { background: #fff; color: var(--rc-blue); }
.rc-view--on:hover { background: #fff; }
.rc-conn { display: inline-flex; align-items: center; gap: 8px; height: 44px; align-self: center; }
.rc-conn[hidden] { display: none; }
.rc-dot { width: 10px; height: 10px; border-radius: 50%; background: #7dd87f; flex: 0 0 auto; }
.rc-conn--off .rc-dot { background: #c7ccd2; }
.rc-mockbar {
    position: sticky; top: var(--rc-top-h); z-index: 49; padding: 6px 16px; text-align: center;
    background: var(--rc-orange); color: #000; font-weight: 800; font-size: 13px; letter-spacing: 0.02em;
}
.rc-mockbar[hidden] { display: none; }

/* ── Sidan ────────────────────────────────────────────────────────────── */
.rc-layout { display: flex; align-items: flex-start; min-height: calc(100vh - var(--rc-top-h)); }
.rc-main { flex: 1 1 auto; min-width: 0; padding: 16px; padding-bottom: 96px; }
.rc-sec-title {
    margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-blue);
}
.rc-sec-title:first-child { margin-top: 0; }

.rc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.rc-tools-label { font-weight: 700; color: var(--rc-dim); }
.rc-tools-hint { color: var(--rc-dim); font-size: 13px; }

/* Knappar och val */
.rc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer;
    background: var(--rc-paper); border: 1.5px solid #9aa3ad; color: var(--rc-ink); font-weight: 700;
}
.rc-btn:hover { border-color: var(--rc-line); }
.rc-btn:disabled { opacity: 0.45; cursor: default; }
.rc-btn--cta { background: var(--rc-orange); border-color: var(--rc-orange); color: #fff; }
.rc-btn--cta:hover { border-color: var(--rc-orange-ink); }
.rc-btn--dark { background: var(--rc-line); border-color: var(--rc-line); color: #fff; }
.rc-btn--quiet { border-color: transparent; color: var(--rc-dim); margin-right: auto; }
.rc-btn--small { min-height: 44px; padding: 0 12px; font-size: 13px; }
.rc-link { background: none; border: 0; color: var(--rc-blue); font-weight: 700; min-height: 44px; padding: 0 4px; cursor: pointer; }
.rc-x {
    width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
    font-size: 18px; color: var(--rc-dim); flex: 0 0 auto;
}
.rc-x:hover { background: var(--rc-bg); color: var(--rc-ink); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-chip {
    min-height: 44px; padding: 0 14px; border-radius: 22px; cursor: pointer;
    border: 1.5px solid #9aa3ad; background: var(--rc-paper); font-weight: 600; color: var(--rc-ink);
}
.rc-chip--on { background: var(--rc-blue); border-color: var(--rc-blue); color: #fff; }
.rc-chips--small .rc-chip { padding: 0 12px; font-size: 14px; }
.rc-input {
    width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px;
    border: 1.5px solid #9aa3ad; background: #fff; font-size: 16px;
}
.rc-input:focus { outline: none; border-color: var(--rc-blue); box-shadow: 0 0 0 3px rgba(1,94,159,0.18); }
.rc-input[hidden] { display: none; }
.rc-textarea { resize: vertical; min-height: 84px; }
.rc-field { display: block; margin: 12px 0; }
.rc-field-label { display: block; font-weight: 700; margin-bottom: 6px; }

/* ── Korten ───────────────────────────────────────────────────────────── */
.rc-cards {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rc-card {
    position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
    padding: 12px 12px 14px; background: var(--rc-paper); border-radius: 10px; cursor: pointer;
    border: var(--rc-lw) solid #9aa3ad; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.rc-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.rc-card:focus-visible { outline: 3px solid var(--rc-blue); outline-offset: 2px; }
.rc-card--worse { border-color: var(--rc-red); }
.rc-card--stable { border-color: var(--rc-yellow); }
.rc-card--better { border-color: var(--rc-green); }
.rc-card--none { border-color: #9aa3ad; }
.rc-card--dragging { opacity: 0.3; }
.rc-card--ghost {
    position: fixed; z-index: 3000; pointer-events: none; margin: 0; opacity: 0.95;
    box-shadow: 0 14px 30px rgba(0,0,0,0.28); transform: rotate(1.2deg);
}
.rc-card-head { display: flex; align-items: flex-start; gap: 6px; }
.rc-card-ttl { flex: 1 1 auto; min-width: 0; }
.rc-card-name { margin: 0; font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.rc-card-sub { color: var(--rc-dim); font-size: 13px; }
.rc-card-sub--none { color: var(--rc-dim); font-style: italic; }
.rc-card-type { color: var(--rc-dim); font-size: 13px; }
.rc-handle {
    flex: 0 0 auto; width: 44px; height: 44px; margin: -6px -6px 0 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--rc-dim); cursor: grab; touch-action: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.rc-handle svg { width: 22px; height: 22px; fill: currentColor; }
.rc-handle:hover { background: var(--rc-bg); color: var(--rc-ink); }
.rc-handle:active { cursor: grabbing; }

.rc-shot {
    position: relative; overflow: hidden; border-radius: 6px; background: #e8f1f9;
    aspect-ratio: 16 / 9; border: 1px solid var(--rc-border);
}
.rc-shot--empty { display: flex; align-items: center; justify-content: center; background: #f4f6f8; }
.rc-shot-empty { color: var(--rc-dim); font-size: 13px; }
.rc-tile { position: absolute; display: block; max-width: none; user-select: none; }
.rc-shot-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-card-mmi { margin: 2px 0 0; overflow-wrap: anywhere; }
.rc-card-mmi b { color: var(--rc-blue); }
.rc-card-report { margin: 0; font-weight: 700; font-size: 14px; }
.rc-rep--ok { color: var(--rc-ink); }
.rc-rep--warn { color: var(--rc-orange-ink); }
.rc-rep--late { color: var(--rc-red); }
.rc-rep--none { color: var(--rc-dim); font-weight: 600; }
.rc-card-units { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; }
.rc-u { padding: 2px 8px; border-radius: 6px; background: #f3f5f8; }
.rc-u b { font-weight: 800; }
.rc-u--ok { color: var(--rc-ink); }
.rc-u--wait { background: var(--rc-orange-soft); color: var(--rc-orange-ink); }
.rc-u--info { background: #e8f1f9; color: var(--rc-blue); }
.rc-u--alert { background: #e6e8eb; color: var(--rc-ink); }
.rc-u--danger { background: var(--rc-red-soft); color: var(--rc-red); }
.rc-u--home { color: var(--rc-green); font-weight: 700; }
.rc-u--more { background: transparent; color: var(--rc-dim); }
/* Avstängd väg på enhetens väg (R5-R-01): tavlans röda ⚠ (road.css .wb-chip-warn) och texten i rött, samma storlek som raden. */
.rc-u-road { margin-left: 6px; color: var(--rc-red); font-weight: 800; }
.rc-u-warn {
    display: inline-grid; place-items: center; vertical-align: 1px; min-width: 1.5em; height: 1.5em; margin-right: 4px; padding: 0 3px;
    box-sizing: border-box; border-radius: 999px; background: var(--rc-red); color: #ffffff; font-size: 1em; line-height: 1;
}
.rc-card-warn {
    padding: 8px 10px; border-radius: 6px; background: var(--rc-red-soft); color: var(--rc-red); font-weight: 800; font-size: 14px;
}
.rc-card-req {
    padding: 8px 10px; border-radius: 6px; background: var(--rc-orange-soft); color: var(--rc-orange-ink); font-weight: 700; font-size: 14px;
}
.rc-card-dec { margin: 0; font-size: 13px; color: var(--rc-dim); }

.rc-add {
    min-height: 200px; border-radius: 10px; border: 2px dashed var(--rc-orange); background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--rc-orange-ink); font-weight: 800;
}
.rc-add:hover { background: var(--rc-orange-soft); }
.rc-add-plus { font-size: 30px; line-height: 1; }
.rc-empty { color: var(--rc-dim); }

/* ── Samverkan och beslut, Förloppet ─────────────────────────────────── */
.rc-logbox, .rc-tl, .rc-events {
    margin-top: 18px; padding: 14px 16px; background: var(--rc-paper); border-radius: 10px; border: 1px solid var(--rc-border);
}
.rc-tl, .rc-events { margin-top: 0; }
.rc-logbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-logbox-head .rc-sec-title { margin: 0; }
.rc-log-row, .rc-tl-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px solid var(--rc-border);
}
.rc-log-row:first-of-type { border-top-color: var(--rc-line); }
.rc-log-time { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--rc-blue); flex: 0 0 auto; min-width: 46px; }
.rc-log-text { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.rc-log-row--decision .rc-log-text { font-weight: 700; }
.rc-log-row--corrected .rc-log-text { text-decoration: line-through; color: var(--rc-dim); }
.rc-log-tag { font-size: 12px; font-weight: 700; color: var(--rc-dim); padding: 2px 8px; border-radius: 10px; background: var(--rc-bg); }
.rc-tl-day { margin: 14px 0 2px; font-weight: 800; color: var(--rc-dim); font-size: 13px; }
.rc-tl-day::first-letter { text-transform: uppercase; }
.rc-tl-row { align-items: flex-start; flex-wrap: nowrap; }
.rc-tl-mid { flex: 1 1 auto; min-width: 0; }
.rc-tl-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.rc-tag { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 10px; border: 0; }
.rc-tag--rc { background: var(--rc-blue); color: #fff; }
.rc-tag--inc { background: #e8f1f9; color: var(--rc-blue); cursor: pointer; min-height: 28px; }
.rc-tl-title { overflow-wrap: anywhere; }
.rc-tl-row--decision .rc-tl-title { font-weight: 700; }
.rc-tl-detail { color: var(--rc-dim); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }

/* ── Händelselistan ───────────────────────────────────────────────────── */
.rc-events { max-width: 820px; margin: 0 auto; }
.rc-new-event { display: flex; gap: 8px; margin: 10px 0 16px; }
.rc-new-event .rc-input { flex: 1 1 auto; }
.rc-event-list { display: flex; flex-direction: column; gap: 8px; }
.rc-event {
    display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 10px 14px; border-radius: 10px;
    border: var(--rc-lw) solid var(--rc-line); background: #fff; color: var(--rc-ink); text-decoration: none;
}
.rc-event strong { font-size: 17px; }
.rc-event:hover { background: #f7f9fb; }
.rc-event--closed { border-color: var(--rc-border); color: var(--rc-dim); }
.rc-event-meta { color: var(--rc-dim); font-size: 14px; }

/* ── Kartan ───────────────────────────────────────────────────────────── */
.rc-main--map { padding: 0; }
.rc-mapwrap { position: relative; height: calc(100vh - var(--rc-top-h)); height: calc(100dvh - var(--rc-top-h)); }
body.rc-mock .rc-mapwrap { height: calc(100dvh - var(--rc-top-h) - 30px); }
.rc-map { position: absolute; inset: 0; }
.rc-map-fail { padding: 24px 16px; color: var(--rc-dim); }
.rc-map-note {
    position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.92); color: var(--rc-dim); font-size: 13px; pointer-events: none;
}
.rc-map-label {
    min-height: 36px; padding: 4px 12px; border-radius: 18px; cursor: pointer; white-space: nowrap;
    background: #fff; color: var(--rc-ink); font-weight: 800; font-size: 14px; border: var(--rc-lw) solid #9aa3ad;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.rc-map-label--worse { border-color: var(--rc-red); }
.rc-map-label--stable { border-color: var(--rc-yellow); }
.rc-map-label--better { border-color: var(--rc-green); }
/* Etiketten tar 44 px på pekskärm utan att rutan blir stor. */
@media (pointer: coarse) { .rc-map-label { min-height: 44px; } }

/* ── Resursbordet ─────────────────────────────────────────────────────── */
.rc-res[hidden] { display: none; }
.rc-res--dock {
    position: sticky; top: var(--rc-top-h); flex: 0 0 auto; align-self: flex-start;
    height: calc(100vh - var(--rc-top-h)); height: calc(100dvh - var(--rc-top-h));
    width: var(--rc-rail-w); background: var(--rc-paper); border-left: 1px solid var(--rc-border);
}
.rc-res--dock.rc-res--open { width: var(--rc-res-w); display: flex; flex-direction: column; }
body.rc-mock .rc-res--dock { top: calc(var(--rc-top-h) + 30px); height: calc(100dvh - var(--rc-top-h) - 30px); }
.rc-rail {
    width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 6px;
}
.rc-rail:hover { background: #f7f9fb; }
.rc-rail-title { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-blue); text-align: center; margin-bottom: 14px; }
.rc-rail-n { font-size: 26px; font-weight: 800; line-height: 1.1; margin-top: 10px; }
.rc-rail-n--req { color: var(--rc-orange-ink); }
.rc-rail-n--empty { color: var(--rc-red); }
.rc-rail-lbl { font-size: 12px; color: var(--rc-dim); text-align: center; }
.rc-res-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 8px 8px 16px; border-bottom: var(--rc-lw) solid var(--rc-line);
}
.rc-res-title { margin: 0; font-size: 17px; font-weight: 800; }
.rc-res-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 24px; -webkit-overflow-scrolling: touch; }

.rc-res--sheet.rc-res--open {
    position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--rc-paper);
    padding-top: env(safe-area-inset-top);
}
.rc-res-fab {
    position: fixed; z-index: 60; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 56px; border-radius: 14px; border: 0; cursor: pointer;
    display: flex; align-items: center; gap: 10px; padding: 0 16px;
    background: var(--rc-line); color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.rc-res-fab[hidden] { display: none; }
.rc-fab-title { margin-right: auto; }
.rc-fab-n { font-size: 14px; padding: 4px 10px; border-radius: 12px; }
.rc-fab-n--req { background: var(--rc-orange); color: #000; }
.rc-fab-n--empty { background: var(--rc-red); color: #fff; }

.rc-req {
    padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--rc-orange); background: var(--rc-orange-soft); margin-bottom: 8px;
}
.rc-req--later { border-color: #c7ccd2; background: #f7f9fb; }
.rc-req--done { border-color: var(--rc-border); background: #fff; }
.rc-req-title { font-weight: 800; overflow-wrap: anywhere; }
.rc-req-text { color: var(--rc-dim); margin-top: 2px; overflow-wrap: anywhere; }
.rc-req-meta { color: var(--rc-dim); font-size: 13px; margin-top: 2px; }
.rc-req-ans { color: var(--rc-blue); font-size: 14px; margin-top: 2px; }
.rc-req-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Rutan när en annan RC-skärm hann svara först. */
.rc-req-already-head { margin: 4px 0 8px; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.rc-req-already-what { margin: 0 0 4px; color: var(--rc-blue); font-size: 15px; overflow-wrap: anywhere; }

.rc-pool { border-top: var(--rc-lw) solid var(--rc-line); margin-top: 8px; }
.rc-pool-row {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--rc-border); min-height: 48px;
}
.rc-pool-row--here { opacity: 0.6; }
.rc-pool-a, .rc-assign-a { display: flex; flex-direction: column; min-width: 0; }
.rc-pool-st { color: var(--rc-dim); font-size: 13px; }
.rc-pool-b, .rc-assign-b { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 14px; }
.rc-pool-status { font-weight: 700; }
.rc-pool-status.rc-u--info { color: var(--rc-blue); background: none; padding: 0; }
.rc-pool-status.rc-u--wait { color: var(--rc-orange-ink); background: none; padding: 0; }
.rc-pool-status.rc-u--ok, .rc-pool-status.rc-u--alert { background: none; padding: 0; }
.rc-pool-eta { font-variant-numeric: tabular-nums; font-weight: 700; }
.rc-pool-note { color: var(--rc-dim); font-size: 12px; }

.rc-stations { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: #e8f1f9; border: 1px solid #c9ddef; }
.rc-station { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.rc-st-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rc-green); flex: 0 0 auto; }
.rc-station--low .rc-st-dot { background: var(--rc-orange); }
.rc-station--empty .rc-st-dot { background: var(--rc-red); }
.rc-st-name { font-weight: 700; flex: 1 1 auto; }
.rc-station--empty .rc-st-n { color: var(--rc-red); font-weight: 800; }

/* ── Dialogen ─────────────────────────────────────────────────────────── */
.rc-overlay {
    position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rc-overlay[hidden] { display: none; }
.rc-dlg {
    width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; border: var(--rc-lw) solid var(--rc-line); box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.rc-dlg--wide { max-width: 680px; }
.rc-dlg-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 18px; border-bottom: 1px solid var(--rc-border); }
.rc-dlg-title { margin: 0; font-size: 18px; font-weight: 800; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rc-dlg-body { padding: 8px 18px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rc-dlg-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--rc-border); }
.rc-dlg-foot:empty { display: none; }
.rc-dlg-list { display: flex; flex-direction: column; }
.rc-conn-row, .rc-pick-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--rc-border);
}
.rc-conn-row span { color: var(--rc-dim); text-align: right; }
.rc-pick-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.rc-assign-list { border-top: var(--rc-lw) solid var(--rc-line); }
.rc-assign-row {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; border-bottom: 1px solid var(--rc-border); cursor: pointer;
}
.rc-assign-row input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--rc-blue); }
.rc-assign-row .rc-assign-a { flex: 1 1 auto; }
.rc-assign-row--on { background: #e8f1f9; }
.rc-assign-row--match .rc-assign-a b { color: var(--rc-blue); }

/* ── Diktering i fälten (voice-module.js dictateButton; samma som tavlans i styles.css) ── */
.wb-dict-wrap { display: flex; align-items: flex-start; gap: 8px; }
.wb-dict-wrap[hidden] { display: none; }
.wb-dict-wrap > .rc-input { flex: 1 1 auto; min-width: 0; }
.rc-new-event .wb-dict-wrap { flex: 1 1 auto; }
.wb-dict {
    display: none; position: relative; flex: 0 0 auto; width: 52px; height: 52px; place-items: center; padding: 0;
    border-radius: 50%; border: 2px solid var(--rc-blue); background: #fff; color: var(--rc-blue);
    cursor: pointer; touch-action: manipulation;
}
body.voice-on:not(.rc-no-stt) .wb-dict { display: grid; }
body.voice-on:not(.rc-no-stt) .wb-dict-wrap { padding-right: 8px; }
.wb-dict svg { width: 24px; height: 24px; }
.wb-dict:active { transform: scale(0.94); }
.wb-dict--live { background: var(--rc-orange); border-color: var(--rc-orange); color: #fff; animation: rcDictPulse 1.2s ease-in-out infinite; }
.wb-dict--busy { color: transparent; }
.wb-dict--busy::after {
    content: ''; position: absolute; inset: 12px; border-radius: 50%;
    border: 3px solid var(--rc-border); border-top-color: var(--rc-blue); animation: rcSpin 0.8s linear infinite;
}
.wb-dict-wrap--live > .rc-input { border-color: var(--rc-orange); box-shadow: 0 0 0 3px rgba(240, 131, 61, 0.3); }
.wb-dict-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; padding: 6px 6px 6px 12px;
    border: 2px solid var(--rc-orange); border-radius: 12px; background: #fff4ec; font-size: 16px; font-weight: 800;
}
.wb-dict-bar[hidden] { display: none; }
.wb-dict-status { flex: 0 1 auto; min-width: 0; }
.wb-dict-dot, .wb-dict-meter, .wb-dict-time, .wb-dict-btn { display: none; }
.wb-dict-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--rc-orange); animation: rcDictBlink 1s ease-in-out infinite; }
.wb-dict-meter { flex: 1 1 60px; min-width: 40px; height: 28px; color: var(--rc-orange); }
.wb-dict-time { font-variant-numeric: tabular-nums; color: var(--rc-dim); }
.wb-dict-btn {
    min-height: 48px; padding: 0 16px; border: 2px solid #9aa3ad; border-radius: 10px; background: #fff;
    font: inherit; font-size: 16px; font-weight: 900; cursor: pointer; touch-action: manipulation;
}
.wb-dict-stop { min-width: 88px; border-color: var(--rc-orange); background: var(--rc-orange); color: #fff; }
.wb-dict-undo { margin-left: auto; border-color: var(--rc-blue); color: var(--rc-blue); }
.wb-dict-bar[data-state="starting"] .wb-dict-cancel,
.wb-dict-bar[data-state="recording"] .wb-dict-cancel,
.wb-dict-bar[data-state="recording"] .wb-dict-stop,
.wb-dict-bar[data-state="done"] .wb-dict-undo { display: inline-flex; align-items: center; justify-content: center; }
.wb-dict-bar[data-state="starting"] .wb-dict-cancel,
.wb-dict-bar[data-state="recording"] .wb-dict-cancel { margin-left: auto; }
.wb-dict-bar[data-state="recording"] .wb-dict-dot,
.wb-dict-bar[data-state="recording"] .wb-dict-meter { display: block; }
.wb-dict-bar[data-state="recording"] .wb-dict-time { display: inline; }
.wb-dict-bar[data-state="recording"] .wb-dict-status { color: #a84a0c; }
.wb-dict-bar[data-state="transcribing"] { border-color: var(--rc-blue); background: #eef5fb; min-height: 52px; }
.wb-dict-bar[data-state="transcribing"] .wb-dict-dot {
    display: block; width: 18px; height: 18px; background: none; border: 3px solid var(--rc-border); border-top-color: var(--rc-blue); animation: rcSpin 0.8s linear infinite;
}
.wb-dict-bar[data-state="done"] { border-color: var(--rc-blue); background: #eef5fb; color: var(--rc-blue); }
.wb-dict-bar[data-state="done"] .wb-dict-status::before { content: '✓ '; }
.wb-dict-bar[data-state="error"] { border-color: #9aa3ad; background: #fff; color: var(--rc-red); min-height: 52px; }
@keyframes rcDictPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 131, 61, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(240, 131, 61, 0); } }
@keyframes rcDictBlink { 50% { opacity: 0.25; } }
@keyframes rcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wb-dict--live, .wb-dict-dot { animation: none; } }

/* ── Notisen ──────────────────────────────────────────────────────────── */
.rc-toast {
    position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); z-index: 5000;
    max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--rc-line); color: #fff; font-weight: 700;
    opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.rc-toast--on { opacity: 1; transform: translate(-50%, 0); }
.rc-toast--bad { background: var(--rc-red); }

/* ── Storlekarna ──────────────────────────────────────────────────────── */
@media (min-width: 1000px) {
    .rc-main { padding-bottom: 24px; }
    .rc-toast { bottom: 24px; }
}
@media (min-width: 1600px) {
    .rc-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
/* Surfplattan och mindre: toppfältet på två rader. */
@media (max-width: 999px) {
    .rc-top { flex-wrap: wrap; row-gap: 6px; }
    .rc-views { order: 3; flex: 1 1 auto; }
    .rc-view { flex: 1 1 0; }
    .rc-conn { order: 2; }
}
/* Telefonen: korten blir en lista utan kartbild, resursbordet ett eget blad. */
@media (max-width: 699px) {
    .rc-top { padding-left: 8px; padding-right: 12px; gap: 4px 6px; flex-wrap: wrap; }
    .rc-back { width: 44px; justify-content: center; padding: 0; margin: 0; font-size: 26px; }
    .rc-back-txt { display: none; }
    .rc-back-arrow { margin: 0; }
    .rc-top-main { flex: 1 1 0; }
    .rc-views { flex-basis: 100%; }
    .rc-title { font-size: 17px; }
    .rc-stats { font-size: 13px; }
    .rc-conn { padding: 0 12px; }
    .rc-conn-txt { display: none; }
    .rc-conn--off .rc-conn-txt { display: inline; }
    .rc-main { padding: 12px; padding-bottom: 96px; }
    .rc-cards { grid-template-columns: 1fr; gap: 8px; }
    .rc-card { padding: 10px 10px 12px; gap: 4px; border-width: 0 0 0 6px; border-radius: 8px; }
    .rc-card .rc-shot, .rc-card-type, .rc-card-dec { display: none; }
    .rc-card-name { font-size: 17px; }
    .rc-add { min-height: 64px; flex-direction: row; gap: 8px; }
    .rc-add-plus { font-size: 24px; }
    .rc-tools-hint { flex-basis: 100%; }
    .rc-dlg { max-height: 100%; border-radius: 0; border: 0; }
    .rc-overlay { padding: 0; align-items: stretch; }
    .rc-dlg, .rc-dlg--wide { max-width: none; }
    .rc-new-event { flex-direction: column; }
    .rc-logbox, .rc-tl, .rc-events { padding: 12px; }
    .rc-tl-row { flex-wrap: wrap; }
    .rc-tl-row .rc-btn { margin-left: 56px; }
}
/* Pekskärm (väggen, surfplattan, telefonen): text man letar i minst 14 px (13 px under 360 px bredd),
   allt man trycker på minst 44 px (R4-R-08). Med mus som ovan. */
@media (pointer: coarse) {
    .rc-mockbar, .rc-sec-title, .rc-tools-hint, .rc-btn--small, .rc-stats,
    .rc-card-sub, .rc-card-type, .rc-shot-empty, .rc-card-units, .rc-card-dec,
    .rc-log-tag, .rc-tl-day, .rc-tag, .rc-tl-detail, .rc-map-note,
    .rc-rail-title, .rc-rail-lbl, .rc-req-meta, .rc-pool-st, .rc-pool-note { font-size: 14px; }
    .rc-tl-tags { align-items: center; }
    .rc-tag--inc { min-height: 44px; padding: 4px 12px; border-radius: 22px; }
    .rc-conn { min-width: 44px; justify-content: center; }
    .rc-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
}
@media (pointer: coarse) and (max-width: 359px) {
    .rc-mockbar, .rc-sec-title, .rc-tools-hint, .rc-btn--small, .rc-stats,
    .rc-card-sub, .rc-card-type, .rc-shot-empty, .rc-card-units, .rc-card-dec,
    .rc-log-tag, .rc-tl-day, .rc-tag, .rc-tl-detail, .rc-map-note,
    .rc-rail-title, .rc-rail-lbl, .rc-req-meta, .rc-pool-st, .rc-pool-note { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .rc-toast { transition: none; }
    .rc-card--ghost { transform: none; }
}

/* Larma utan begäran: på kortet och överst i poolen. */
.rc-card-acts { display: flex; justify-content: flex-end; margin-top: 8px; }
.rc-card-alarm { min-height: 44px; border-color: var(--rc-orange); color: var(--rc-orange-ink); font-weight: 700; }
.rc-alarm-btn { display: block; width: 100%; min-height: 48px; margin: 4px 0 12px; }

/* ── Steg 2 (docs/pilot/rc-steg2-kontrakt.md) ─────────────────────────── */
.rc-card-acts { flex-wrap: wrap; gap: 8px; }
.rc-card-share, .rc-card-listen { min-height: 44px; }
.rc-btn--big { min-height: 52px; padding: 0 22px; font-size: 16px; }
.rc-btn--huge { display: flex; width: 100%; min-height: 56px; font-size: 18px; font-weight: 800; }
.rc-input--big { min-height: 56px; font-size: 18px; }

/* Trenden överst på kortet: pil och ord i trendens färg (data, som tavlans Trend). */
.rc-trend { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.rc-trend-arrow { font-size: 20px; line-height: 1; }
.rc-trend--worse { color: var(--rc-red); }
.rc-trend--stable { color: #8a6500; }
.rc-trend--better { color: var(--rc-green); }

/* Senaste rapporten: fäll ut och dölj; "Ny rapport" lyser orange tills den öppnats här. */
.rc-rep { margin: 2px 0; }
.rc-rep-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px;
    padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--rc-blue); background: #fff; color: var(--rc-blue);
    font-weight: 800; cursor: pointer; text-align: left;
}
.rc-rep-btn--new { background: var(--rc-orange); border-color: var(--rc-orange); color: #000; }
.rc-rep-btn--open { border-radius: 10px 10px 0 0; }
.rc-rep-btn-chev { flex: 0 0 auto; }
.rc-rep-body { border: 1.5px solid var(--rc-border); border-top: 0; border-radius: 0 0 10px 10px; padding: 8px 12px 10px; background: #fff; }
.rc-rep-dl { margin: 0; }
.rc-rep-dl dt { font-weight: 800; color: var(--rc-blue); font-size: 13px; margin-top: 6px; }
.rc-rep-dl dt:first-child { margin-top: 0; }
.rc-rep-dl dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.rc-rep-meta { margin: 8px 0 0; color: var(--rc-dim); font-size: 13px; }

/* Kortet som just larmats blinkar en gång. */
@keyframes rc-blink { 0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.08); } 35% { box-shadow: 0 0 0 6px var(--rc-orange); } }
.rc-card--blink { animation: rc-blink 1.4s ease-in-out 1; }

/* + Insats: adressen med förslag. */
.rc-addr .rc-field { margin-bottom: 4px; }
.rc-addr-list { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.rc-addr-list:not(:empty) { border: 1.5px solid var(--rc-border); margin-bottom: 8px; }
.rc-addr-row {
    min-height: 52px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--rc-border); background: #fff;
    text-align: left; font-size: 16px; cursor: pointer; overflow-wrap: anywhere;
}
.rc-addr-row:last-child { border-bottom: 0; }
.rc-addr-row:hover, .rc-addr-row--on { background: #e8f1f9; color: var(--rc-blue); font-weight: 700; }
.rc-addr-picked { margin: 2px 0 8px; color: var(--rc-blue); font-weight: 700; }
.rc-addr-picked[hidden] { display: none; }
.rc-own-name { margin: 8px 0 4px; }
.rc-own-sum { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--rc-blue); font-weight: 700; }
.rc-create-go { margin: 8px 0 4px; }
.rc-dlg--create .rc-sec-title:not(:first-child) { margin-top: 24px; }

/* Vad har hänt?: bokstäverna. */
.rc-what-field { margin: 8px 0; }
.rc-what-ta { min-height: 64px; }
.rc-what-listen:empty { display: none; }

/* Larma på kartan: kartan och listan bredvid (telefon och platta på högkant: under). */
body.rc-alarm-on .rc-res, body.rc-alarm-on .rc-res-fab { display: none; }
body.rc-alarm-on .rc-toast { bottom: 96px; }
.rc-main--alarm { padding: 0; }
.rc-alarm { display: flex; height: calc(100vh - var(--rc-top-h)); height: calc(100dvh - var(--rc-top-h)); }
body.rc-mock .rc-alarm { height: calc(100dvh - var(--rc-top-h) - 30px); }
.rc-alarm-map { position: relative; flex: 1 1 auto; min-width: 0; }
.rc-alarm-map .rc-mapwrap { height: 100%; }
.rc-alarm-side { flex: 0 0 440px; display: flex; flex-direction: column; min-height: 0; background: #fff; border-left: var(--rc-lw) solid var(--rc-line); }
.rc-alarm--nomap .rc-alarm-map { display: none; }
.rc-alarm--nomap .rc-alarm-side { flex: 1 1 auto; width: 100%; max-width: 760px; margin: 0 auto; border-left: 0; }
.rc-alarm-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 8px 8px 16px; border-bottom: 1px solid var(--rc-border); }
.rc-alarm-head + .rc-field { margin: 8px 16px; }
.rc-alarm-ttl { flex: 1 1 auto; min-width: 0; }
.rc-alarm-title { margin: 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.rc-alarm-to { margin: 2px 0 0; color: var(--rc-blue); font-weight: 700; overflow-wrap: anywhere; }
.rc-alarm-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; }
.rc-alarm-gtitle { margin: 14px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-blue); }
.rc-alarm-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0 0 6px; padding: 6px 12px;
    border: 2px solid #9aa3ad; border-radius: 12px; background: #fff; text-align: left; cursor: pointer;
}
.rc-alarm-row:hover { border-color: var(--rc-line); }
.rc-alarm-row--on { border-color: var(--rc-orange); background: var(--rc-orange-soft); }
.rc-alarm-row--busy { background: #f4f6f8; }
.rc-alarm-row--busy.rc-alarm-row--on { background: var(--rc-orange-soft); }
.rc-alarm-check {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; border: 2px solid #9aa3ad; display: grid; place-items: center;
    font-size: 20px; font-weight: 900; color: #fff;
}
.rc-alarm-row--on .rc-alarm-check { background: var(--rc-orange); border-color: var(--rc-orange); }
.rc-alarm-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rc-alarm-name { font-size: 16px; overflow-wrap: anywhere; }
.rc-alarm-st { color: var(--rc-dim); font-size: 14px; }
.rc-alarm-busy { color: var(--rc-orange-ink); font-size: 14px; font-weight: 600; }
.rc-alarm-eta { flex: 0 0 auto; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--rc-blue); }
.rc-alarm-foot {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: var(--rc-lw) solid var(--rc-line); background: #fff;
}
.rc-alarm-count { flex: 0 0 auto; font-weight: 800; }
.rc-alarm-go { flex: 1 1 auto; width: auto; }
@media (max-width: 899px) {
    .rc-alarm { flex-direction: column; height: auto; min-height: calc(100dvh - var(--rc-top-h)); }
    .rc-alarm-map { flex: 0 0 auto; height: 38vh; min-height: 220px; }
    .rc-alarm-side { flex: 1 1 auto; border-left: 0; border-top: var(--rc-lw) solid var(--rc-line); }
    .rc-alarm--nomap .rc-alarm-side { border-top: 0; max-width: none; }
    .rc-alarm-list { overflow: visible; }
    .rc-alarm-foot { position: sticky; bottom: 0; z-index: 5; }
}
.rc-share-unit[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rc-card--blink { animation: none; outline: 4px solid var(--rc-orange); } }