/* The Security Desk (security.js). It builds on app.css; these are its own pieces. */
body.desk .topbar { margin-left: 0 !important; }  /* no side menu here */
body.desk .content { margin-left: auto !important; margin-right: auto; }
body.desk .content { max-width: 720px; }
.topbar .topsub { font-size: 13px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar h1 { flex: none; }
.topbar .btn { min-height: 36px; padding: 6px 12px; background: transparent; color: #e2e8f0; border-color: #334155; }
.shield { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: #4338ca; flex: none;
          align-items: center; justify-content: center; }
.shield svg { width: 20px; height: 20px; color: #fff; }

/* checking a card or a pass */
.codebox { display: flex; gap: 8px; margin-top: 10px; }
.codebox input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
                 font: 600 18px/1.2 Consolas, "SF Mono", Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.verdict { border-radius: 12px; padding: 18px 16px; margin-bottom: 14px; text-align: center; }
.verdict .vtitle { font-size: 26px; font-weight: 800; line-height: 1.2; }
.verdict .vreason { margin-top: 6px; font-size: 15px; }
.verdict.ok { background: var(--success-soft); color: #15803d; }
.verdict.inside { background: var(--primary-soft); color: var(--primary-dark); }
.verdict.warn { background: var(--warning-soft); color: #b45309; }
.verdict.bad { background: var(--danger-soft); color: #b91c1c; }
.person { text-align: center; margin-bottom: 8px; }
.person .photo { display: block; width: 180px; height: 240px; margin: 0 auto 12px; border-radius: 12px;
                 object-fit: cover; background: var(--line); }
.person .photo.none { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 14px; }
.person h3 { font-size: 24px; }
.btn.big { min-height: 58px; font-size: 18px; }

/* emergencies: the alerts at the top of every screen, the members' phones, and the map */
.sosbars { max-width: 720px; margin: 0 auto; padding: 12px 14px 0; }
.sosbars:empty { display: none; }
.sosbar { display: block; width: 100%; margin-bottom: 8px; padding: 12px 14px; border: 0; border-radius: 12px;
          background: #dc2626; color: #fff; text-align: left; cursor: pointer; animation: sospulse 1.2s ease-in-out infinite; }
.sosbar b { display: block; font-size: 17px; letter-spacing: .02em; }
.sosbar span { display: block; margin-top: 2px; font-size: 14px; color: #fee2e2; }
.sosbar.responding { background: #b45309; animation: none; }
.sosbar.support { background: #4338ca; animation: none; }  /* a security support request: not an emergency */
.sosbar.support span { color: #e0e7ff; }
@keyframes sospulse { 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, .35); } }
@media (prefers-reduced-motion: reduce) { .sosbar { animation: none; } }
.item.sosrow { background: #fef2f2; }
.map { display: block; width: 100%; height: 320px; margin: 0 0 10px; border: 0; border-radius: 12px; background: var(--line); }
.map.nomap { display: flex; align-items: center; justify-content: center; height: 160px; padding: 20px;
             color: var(--muted); font-size: 14px; text-align: center; }
.notice.danger { background: var(--danger-soft); border-color: #fca5a5; color: #991b1b; }
.btn.mini { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* the command centre: one alert. Phones: one column (the guard's buttons first); wide screens: the map on the left. */
body.desk .content.wide { max-width: 1200px; }
.command { display: grid; gap: 12px; }
.command .card { margin-bottom: 0; }
.cmd-top, .cmd-map, .cmd-rest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start;
                                 min-width: 0; }
.cmd-top .section-title { margin: 4px 2px 0; }
.cmd-top .item .title, .cmd-top .item .sub { white-space: normal; }  /* distance and direction, in full */
@media (min-width: 900px) {
  .command { grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr);
             grid-template-areas: "map top" "map rest"; grid-template-rows: auto 1fr; }
  .cmd-top { grid-area: top; }
  .cmd-map { grid-area: map; }
  .cmd-rest { grid-area: rest; }
  .command .map { height: 460px; }
}
.notice.mine b { display: block; font-size: 16px; }
.item.chosen { background: var(--primary-soft); }
.item .side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }

/* the live tracking plot: the member (red) in the middle, each responding guard in their own colour */
.radar svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 4px auto 8px; }
.radar .ring { fill: none; stroke: #cbd5e1; stroke-width: 1; }
.radar .axis { stroke: #e2e8f0; stroke-width: 1; }
.radar .lbl { fill: #64748b; font-size: 11px; }
.radar .north { fill: #0f172a; font-size: 13px; font-weight: 700; }
.radar .who { fill: #0f172a; font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.radar .acc { fill: rgba(220, 38, 38, .10); stroke: rgba(220, 38, 38, .35); stroke-width: 1; }
.radar circle.student, .radar circle.resp { stroke: #fff; stroke-width: 2; }
.radar circle.student { fill: #dc2626; }
.radar .trail { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.radar .trail.student { stroke: #dc2626; }
.radar .link { stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.radar .r0 { fill: #2563eb; stroke: #2563eb; }
.radar .r1 { fill: #7c3aed; stroke: #7c3aed; }
.radar .r2 { fill: #0d9488; stroke: #0d9488; }
.radar .r3 { fill: #d97706; stroke: #d97706; }
.radar .trail.r0, .radar .trail.r1, .radar .trail.r2, .radar .trail.r3 { fill: none; }
.radar circle.resp.r0, .radar circle.resp.r1, .radar circle.resp.r2, .radar circle.resp.r3 { stroke: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text); }
.dot { display: inline-block; flex: none; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%;
       vertical-align: -1px; background: #94a3b8; }
.dot.student { background: #dc2626; }
.dot.r0 { background: #2563eb; }
.dot.r1 { background: #7c3aed; }
.dot.r2 { background: #0d9488; }
.dot.r3 { background: #d97706; }

/* lists and filters */
.tabs { margin-bottom: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.filters select, .filters input { padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
                                  font-size: 15px; }
.item .when { font: 600 15px/1.2 Consolas, "SF Mono", Menlo, monospace; color: var(--ink); flex: none; width: 50px; }
.guard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.guard:last-child { border-bottom: 0; }
.guard .btn { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.section-title { margin: 18px 2px 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
                 text-transform: uppercase; }

/* lists by area (province · city · town) instead of by property, and the three boxes that choose one */
.area-title { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; background: #f8fafc;
              border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink); }
.area-title small { font-weight: 600; color: var(--muted); }
.filters select:disabled { opacity: .5; }

/* a guard or dispatcher on duty: this phone's position is being shared (or why it isn't) */
.dutybar { width: calc(100% - 28px); max-width: 692px; margin: 10px auto 0; padding: 8px 14px; border-radius: 10px;
           background: var(--success-soft); color: #166534; font-size: 13px; }
.dutybar.bad { background: var(--warning-soft); color: #92400e; }

/* the live map's page (desk.js): the whole page; on a wide screen the map with who is on it beside it. (The map itself
   is styled in app.css: the phone app shows one too.) */
body.desk .content.full { max-width: none; padding-bottom: 14px; }
.mapview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mapwrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #e5e7eb; }
.mapwrap:fullscreen { border: 0; border-radius: 0; }
.mapwrap:fullscreen .lmap { height: 100vh; }
.mapside .section-title:first-child { margin-top: 0; }
.mapitem { align-items: flex-start; }
.mapitem.alert { background: #fef2f2; }
.mapitem .title, .mapitem .sub { white-space: normal; }
.mapitem .sub.strong { color: #166534; font-weight: 600; }
button.plain { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.filters .btn { min-height: 0; }
@media (min-width: 1000px) {
  .mapview { grid-template-columns: minmax(0, 1fr) 370px; }
  .lmap { height: calc(100vh - 200px); }
  .mapside { max-height: calc(100vh - 200px); overflow-y: auto; }
}

/* =====================================================================================================================
   THE COMMAND-CENTRE LOOK. Both control centres (the Security Desk and the Ambulance Control Centre) are drawn like a
   dispatch room: a dark page, red for what needs attention, amber for what is in hand, green for what is well. First
   the colours of app.css are replaced, for these two pages only (the phone app keeps its own); then the frame (top
   bar, side menu: desk.js shell), the first page (desk.js dashboard), the map, one alert's page, and the pieces that
   had light colours of their own.
   ===================================================================================================================== */
html { background: #05080f; }
body.desk { --ink: #f4f6fb; --text: #d3dae8; --muted: #8b97ae; --faint: #5b667d; --line: #1a2438; --page: #05080f;
            --card: #0b111e; --primary: #ef4444; --primary-dark: #fca5a5; --primary-soft: rgba(239, 68, 68, .16);
            --success: #16a34a; --success-soft: rgba(34, 197, 94, .14); --warning: #f59e0b;
            --warning-soft: rgba(245, 158, 11, .14); --danger: #f87171; --danger-soft: rgba(239, 68, 68, .14);
            color-scheme: dark; min-height: 100vh; scrollbar-color: #27344d #05080f;
            background: radial-gradient(1100px 520px at 18% -8%, #101a33 0, rgba(5, 8, 15, 0) 62%) #05080f fixed; }
body.desk [hidden] { display: none !important; }
body.desk a:not(.btn):not(.cc-nav) { color: #a5b4fc; }
.ico { width: 20px; height: 20px; flex: none; }

/* ---- the frame: top bar, side menu, page ---- */
.cc-top { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
          padding: calc(var(--top) + 10px) 16px 10px; background: rgba(5, 8, 15, .97); border-bottom: 1px solid #1a2438; }
.cc-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.cc-brand b { display: block; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .09em; line-height: 1.15;
              text-transform: uppercase; }
.cc-brand small { display: block; color: #ef4444; font-size: 10px; font-weight: 700; letter-spacing: .16em;
                  text-transform: uppercase; }
body.desk .shield { width: 38px; height: 38px; border-radius: 10px; background: #dc2626;
                    box-shadow: 0 0 0 1px rgba(248, 113, 113, .55), 0 0 18px rgba(239, 68, 68, .45); }
.cc-user { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
.cc-clock { color: #f87171; font: 700 19px/1 Consolas, "SF Mono", Menlo, monospace; }
.cc-who b { display: block; color: #fff; font-size: 14px; white-space: nowrap; }
.cc-who small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; }
body.desk .cc-out { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.cc-out .ico { width: 16px; height: 16px; }
.cc-side { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; background: #070b14;
           border-bottom: 1px solid #1a2438; scrollbar-width: none; }
.cc-side::-webkit-scrollbar { display: none; }
.cc-nav { display: flex; align-items: center; gap: 11px; flex: none; padding: 10px 14px; border: 0; border-radius: 8px;
          background: none; color: #c5cedd; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
          text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.cc-nav:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.cc-nav.on { background: linear-gradient(90deg, rgba(239, 68, 68, .30), rgba(239, 68, 68, .05)); color: #fff;
             box-shadow: inset 3px 0 0 #ef4444; }
.cc-nav.on .ico { color: #f87171; }
.cc-count { display: inline-block; min-width: 20px; margin-left: auto; padding: 0 6px; border-radius: 10px;
            background: #ef4444; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; line-height: 20px;
            text-align: center; }
body.desk .content { max-width: 760px; padding: 16px 16px 40px; }
body.cc-side-on .content { max-width: 1040px; }
body.desk .content.wide { max-width: 1320px; }
body.desk .content.full { max-width: none; }
@media (min-width: 1000px) {  /* a computer: the sections stay down the left, under the top bar */
  body.cc-side-on #app { display: grid; grid-template-columns: 216px minmax(0, 1fr); align-items: start; }
  body.cc-side-on .cc-top { grid-column: 1 / -1; }
  body.cc-side-on .cc-side { grid-column: 1; grid-row: 2 / span 3; position: sticky; top: var(--cc-top, 62px);
                             flex-direction: column; height: calc(100vh - var(--cc-top, 62px)); overflow-y: auto;
                             padding: 14px 10px; border-bottom: 0; border-right: 1px solid #1a2438; }
  body.cc-side-on .cc-nav { flex: none; width: 100%; padding: 12px 14px; font-size: 15px; white-space: normal; }
  body.cc-side-on .dutybar, body.cc-side-on .content { grid-column: 2; }
  body.cc-side-on .content { width: 100%; }
}
.cc-title { margin: 0 0 12px; color: #fff; font-size: 20px; font-weight: 700; }

/* ---- the open alerts: a banner in the top bar ---- */
.cc-top .sosbars { flex: 1 1 420px; display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; max-width: none;
                   margin: 0; padding: 0; }
.cc-top .sosbars:empty { display: block; }  /* (keeps its place, so the bar doesn't jump when an alert comes in) */
.sosbar { display: flex; flex: 1 1 320px; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding: 8px 10px 8px 14px;
          border: 1px solid #ef4444; border-radius: 8px; color: #fff; font: inherit;
          background: linear-gradient(90deg, rgba(185, 28, 28, .6), rgba(69, 10, 10, .35)); animation: sospulse 1.4s ease-in-out infinite; }
.sosbar .ico { width: 22px; height: 22px; color: #fecaca; }
.sosbar b { display: inline; font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
.sosbar b i { font-style: normal; }
.sosbar span { display: inline; margin: 0; padding-left: 14px; border-left: 1px solid rgba(254, 202, 202, .4);
               color: #f3f4f6; font-size: 14px; }
.sosbar span.where, .sosbar span.state { color: #fecaca; }
.sosbar span.state { flex: 1 1 0; min-width: 130px; overflow: hidden; text-align: left; text-overflow: ellipsis;
                     white-space: nowrap; }
.sosbar time { color: #f87171; font: 700 16px/1 Consolas, "SF Mono", Menlo, monospace; }
.sosbar em { flex: none; margin-left: auto; padding: 6px 14px; border: 1px solid #ef4444; border-radius: 6px; color: #fca5a5;
             font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .08em; }
.sosbar.responding, .sosbar.sent { border-color: #f59e0b; animation: none;
                                   background: linear-gradient(90deg, rgba(146, 64, 14, .6), rgba(69, 26, 3, .3)); }
.sosbar.responding time, .sosbar.sent time { color: #fbbf24; }
.sosbar.responding em, .sosbar.sent em { border-color: #f59e0b; color: #fcd34d; }
.sosbar.there { border-color: #22c55e; animation: none; background: linear-gradient(90deg, rgba(21, 128, 61, .5), rgba(5, 46, 22, .3)); }
.sosbar.there time, .sosbar.there em { border-color: #22c55e; color: #86efac; }
.sosbar.support { border-color: #3b82f6; animation: none; background: linear-gradient(90deg, rgba(30, 64, 175, .5), rgba(23, 37, 84, .3)); }
.sosbar.support time, .sosbar.support em { border-color: #3b82f6; color: #a5b4fc; }
.sosbar.more { flex: 0 0 auto; width: auto; border-style: dashed; background: none; animation: none; }
@keyframes sospulse { 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, .28), 0 0 22px rgba(239, 68, 68, .35); } }
@media (max-width: 1399px) {  /* a laptop or a phone: the banner has a line of its own, under the name */
  .cc-top .sosbars { order: 3; flex: 1 1 100%; }
  .cc-top .sosbars:empty { display: none; }
}
@media (max-width: 700px) {  /* a phone: a short top bar, as it stays put while the page scrolls */
  .cc-who, .cc-out span { display: none; }
  .cc-top { gap: 8px 10px; padding: calc(var(--top) + 8px) 12px 8px; }
  .cc-brand { flex: 1 1 0; gap: 10px; min-width: 0; }
  .cc-brand b { font-size: 15px; }
  .cc-brand small { overflow: hidden; font-size: 9px; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
  .cc-brand > span, .cc-brand > div { min-width: 0; }
  body.desk .shield { width: 34px; height: 34px; }
  .cc-user { order: 2; gap: 10px; }
  .cc-clock { font-size: 16px; }
  .sosbar { flex: 1 1 100%; gap: 3px 10px; padding: 7px 10px; }
  .sosbar .ico { width: 18px; height: 18px; }
  .sosbar b { font-size: 13px; }
  .sosbar b i { display: none; }
  .sosbar span { padding-left: 10px; font-size: 13px; }
  .sosbar span.who { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sosbar span.state, .sosbar time { display: none; }  /* (both are on the alert's own page) */
  .sosbar em { order: 1; margin-left: 0; padding: 5px 10px; font-size: 11px; }
  .sosbar span.where { order: 2; flex: 1 1 100%; padding-left: 0; border-left: 0; text-align: left; }
  .sosbar.more { flex: 1 1 100%; }
  .sosbar.more b { flex: 1 1 0; text-align: left; }
}

/* ---- the first page: counters, the map, the alert that is waiting, the latest alerts and two charts ---- */
.cc-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cc-main, .cc-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 1250px) { .cc-dash { grid-template-columns: minmax(0, 1fr) 330px; } }
.cc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; overflow: hidden;
            margin-bottom: 12px; border: 1px solid #1a2438; border-radius: 10px; background: #1a2438; }
.cc-main .cc-tiles { margin-bottom: 0; }
.cc-tile { padding: 12px 8px 14px; background: #0a0f1b; text-align: center; }
.cc-tile span { display: block; min-height: 26px; color: #c5cedd; font-size: 11px; font-weight: 700; letter-spacing: .07em;
                line-height: 1.2; text-transform: uppercase; }
.cc-tile b { display: block; margin-top: 4px; color: #fff; font-size: 34px; font-weight: 700; line-height: 1;
             font-variant-numeric: tabular-nums; }
.cc-tile b small { margin-left: 5px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
@media (min-width: 1000px) {  /* a computer: one row, however many counters */
  .cc-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) and (max-width: 1499px) {  /* a laptop: narrower counters */
  .cc-tile { padding: 12px 4px 14px; }
  .cc-tile span { min-height: 36px; font-size: 10px; }
  .cc-tile b { font-size: 28px; }
  .cc-tile b small { display: block; margin: 5px 0 0; }
}
.cc-tile b.red, .cc-fact b.red { color: #ef4444; }
.cc-tile b.green, .cc-fact b.green { color: #22c55e; }
.cc-tile b.amber, .cc-fact b.amber { color: #f59e0b; }
.cc-map .lmap { height: clamp(340px, calc(100vh - 480px), 660px); }
.cc-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) {  /* the latest alerts across, the two charts side by side under them */
  .cc-bottom { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .cc-bottom > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1600px) {  /* a wide screen: all three in a row */
  .cc-bottom { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .cc-bottom > :first-child { grid-column: auto; }
}
.cc-panel { min-width: 0; padding: 12px 14px 14px; border: 1px solid #1a2438; border-radius: 10px; background: #0a0f1b; }
.cc-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cc-panel h3 { margin: 0; color: #e6eaf2; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cc-link { padding: 0; border: 0; background: none; color: #60a5fa; font-family: inherit; font-size: 11px;
           font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.cc-none, .cc-hint { margin: 0; color: var(--muted); font-size: 13px; }
.cc-none { padding: 18px 0; text-align: center; }
.cc-n { min-width: 22px; padding: 0 7px; border-radius: 11px; background: #1a2438; color: #fff; font-size: 12px;
        font-weight: 700; line-height: 22px; text-align: center; }
/* the alert that is waiting */
.cc-incoming.hot { border-color: rgba(239, 68, 68, .65); background: linear-gradient(180deg, rgba(127, 29, 29, .6), rgba(69, 10, 10, .3));
                   box-shadow: 0 0 22px rgba(239, 68, 68, .18); }
.cc-incoming.hot h3 { color: #f87171; }
.cc-incoming.warm { border-color: rgba(245, 158, 11, .5); background: linear-gradient(180deg, rgba(120, 53, 15, .4), rgba(69, 26, 3, .18)); }
.cc-incoming.warm h3 { color: #fbbf24; }
.cc-incoming.ok { border-color: rgba(34, 197, 94, .45); }
.cc-incoming.ok h3 { color: #4ade80; }
.cc-caller { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cc-caller .ico { width: 30px; height: 30px; color: #f87171; }
.cc-incoming.warm .cc-caller .ico { color: #fbbf24; }
.cc-incoming.ok .cc-caller .ico { color: #4ade80; }
.cc-caller b { color: #fff; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.cc-incoming dl { margin: 0 0 12px; }
.cc-incoming dt { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 12px; }
.cc-incoming dt:first-child { border-top: 0; }
.cc-incoming dd { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.cc-incoming dd small { display: block; color: #c5cedd; font-size: 13px; font-weight: 400; }
body.desk .btn.cc-view { width: 100%; min-height: 40px; background: #dc2626; border-color: #ef4444; color: #fff;
                         font-size: 13px; letter-spacing: .08em; }
.cc-incoming.warm .btn.cc-view { background: #b45309; border-color: #f59e0b; }
.cc-incoming.ok .btn.cc-view { background: #15803d; border-color: #22c55e; }
.cc-quiet { padding: 14px 0 6px; text-align: center; }
.cc-quiet .ico { width: 40px; height: 40px; color: #22c55e; }
.cc-quiet b { display: block; margin-top: 6px; color: #fff; }
.cc-quiet small { display: block; margin-top: 2px; color: var(--muted); }
/* who is nearest */
.cc-nearest { border-color: rgba(34, 197, 94, .35); }
.cc-nearest h3 { color: #4ade80; }
.cc-person { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cc-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
            border-radius: 50%; background: #111a2c; color: #fff; font-weight: 700; box-shadow: 0 0 0 2px #22c55e; }
.cc-badge.old { box-shadow: 0 0 0 2px #f59e0b; }
.cc-person b { display: block; color: #fff; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.cc-person small { font-size: 12px; font-weight: 700; letter-spacing: .08em; }
small.green { color: #4ade80; }
small.amber { color: #fbbf24; }
.cc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; padding-top: 10px;
           border-top: 1px solid rgba(255, 255, 255, .08); }
.cc-pair small { display: block; color: var(--muted); font-size: 12px; }
.cc-pair b { color: #fff; font-size: 19px; font-variant-numeric: tabular-nums; }
.cc-two { display: flex; gap: 8px; margin-top: 10px; }
.cc-two .btn { flex: 1; min-height: 40px; font-size: 13px; }
body.desk .btn.cc-go { background: #16a34a; border-color: #22c55e; color: #fff; letter-spacing: .08em; }
/* every open alert */
.cc-alert { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 12px;
            border: 1px solid #1a2438; border-radius: 8px; background: #0d1423; color: inherit; font: inherit;
            text-align: left; cursor: pointer; }
.cc-alert .ico { width: 28px; height: 28px; margin-top: 2px; color: #f59e0b; }
.cc-alert.hot { border-color: rgba(239, 68, 68, .5); background: rgba(127, 29, 29, .25); }
.cc-alert.hot .ico, .cc-alert.hot .what { color: #f87171; }
.cc-alert.warm .what { color: #fbbf24; }
.cc-alert.ok .ico, .cc-alert.ok .what { color: #4ade80; }
.cc-alert div { flex: 1; min-width: 0; }
.cc-alert b { display: block; color: #fff; }
.cc-alert small { display: block; color: #c5cedd; font-size: 13px; overflow-wrap: anywhere; }
.cc-alert time { flex: none; color: #c5cedd; font-size: 13px; }
/* the latest alerts */
.cc-scroll { overflow-x: auto; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-table th { padding: 6px 8px 8px 0; border-bottom: 1px solid #1a2438; color: var(--muted); font-size: 11px;
               font-weight: 700; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cc-table td { padding: 11px 8px 11px 0; border-bottom: 1px solid #141c2d; color: #d3dae8; vertical-align: top; }
.cc-table tr:last-child td { border-bottom: 0; }
.cc-table tbody tr { cursor: pointer; }
.cc-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.cc-table td.t { color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-table td.st { font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.st.red { color: #f87171; }
.st.amber { color: #fbbf24; }
.st.green { color: #4ade80; }
.st.blue { color: #60a5fa; }
.st.slate { color: #8b97ae; }
/* how quickly alerts were taken up, and how many of the team are on the map */
.cc-chartwrap { position: relative; }
.cc-chart { display: block; width: 100%; height: auto; }
.cc-chart .grid { stroke: #1a2438; stroke-width: 1; }
.cc-chart .axis { fill: #8b97ae; font-size: 11px; }
.cc-chart .line { fill: none; stroke: #ef4444; stroke-width: 2; stroke-linejoin: round; }
.cc-chart .dot { fill: #ef4444; stroke: #0a0f1b; stroke-width: 1.5; }
.cc-avg { position: absolute; right: 4px; top: 2px; padding: 6px 12px; border: 1px solid rgba(239, 68, 68, .6);
          border-radius: 6px; background: rgba(69, 10, 10, .85); text-align: center; }
.cc-avg b { display: block; color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
.cc-avg small { display: block; color: #fca5a5; font-size: 11px; }
.cc-fleetrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cc-donut { width: 124px; height: 124px; flex: none; }
.cc-donut .ring, .cc-donut .arc { fill: none; stroke-width: 15; }
.cc-donut .ring { stroke: #1a2438; }
.cc-donut .arc.green { stroke: #22c55e; }
.cc-donut .arc.amber { stroke: #f59e0b; }
.cc-donut .arc.slate { stroke: #475569; }
.cc-donut .num { fill: #fff; font-size: 26px; font-weight: 700; }
.cc-donut .cap { fill: #8b97ae; font-size: 10px; letter-spacing: .1em; }
.cc-legend { flex: 1 1 130px; margin: 0; padding: 0; list-style: none; color: #c5cedd; font-size: 12.5px; }
.cc-legend li { margin: 7px 0; white-space: nowrap; }
.cc-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 2px; vertical-align: -1px; }
.cc-legend i.green { background: #22c55e; }
.cc-legend i.amber { background: #f59e0b; }
.cc-legend i.slate { background: #475569; }

/* ---- the map, in the dark ---- */
body.desk .mapwrap { border-color: #1a2438; background: #0a101c; }
body.desk .lmap { background: #0a101c; }
body.desk .lmap-tiles { filter: invert(1) hue-rotate(180deg) brightness(.8) contrast(.92) saturate(.45); }
body.desk .lmap-lines line { stroke: #f59e0b; }
body.desk .lmap-lines line.there { stroke: #22c55e; }
body.desk .lmap-controls .btn, body.desk .lmap-follow { background: #111a2c; border-color: #27344d; color: #e6eaf2;
                                                        box-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
body.desk .lmap-credit { background: rgba(5, 8, 15, .78); color: #8b97ae; }
body.desk .lmap-note { border: 1px solid #1f2a40; background: rgba(11, 17, 30, .95); color: #c5cedd; }
body.desk .lmap-told { background: rgba(120, 53, 15, .94); color: #fde68a; }
body.desk .mk-dot { border-color: #0b111e; background: #17233a; color: #fff;
                    box-shadow: 0 0 0 2px #22c55e, 0 2px 8px rgba(0, 0, 0, .7); }
body.desk .mk.staff.going .mk-dot { background: #17233a; box-shadow: 0 0 0 2px #f59e0b, 0 2px 8px rgba(0, 0, 0, .7); }
body.desk .mk.staff.stale .mk-dot { background: #17233a; color: #94a3b8; box-shadow: 0 0 0 2px #64748b, 0 2px 8px rgba(0, 0, 0, .7); }
body.desk .mk-tag { left: -62px; top: 21px; width: 124px; padding: 4px 6px 5px; overflow: hidden; border: 1px solid #27344d;
                    border-radius: 6px; background: rgba(8, 13, 24, .95); color: #fff; font: 700 11px/1.3 "Segoe UI", Arial, sans-serif;
                    letter-spacing: .02em; text-align: center; text-overflow: ellipsis; }
body.desk .mk-tag::after { content: attr(data-state); display: block; color: #4ade80; font-size: 10px; letter-spacing: .09em; }
body.desk .mk.staff.going .mk-tag::after { color: #fbbf24; }
body.desk .mk.staff.stale .mk-tag { background: rgba(8, 13, 24, .95); }
body.desk .mk.staff.stale .mk-tag::after { color: #94a3b8; }
body.desk .mk.alert .mk-dot { background: #dc2626; box-shadow: 0 0 0 2px #fecaca; animation: ccsos 1.7s ease-out infinite; }
body.desk .mk.alert .mk-tag { border-color: #ef4444; background: rgba(69, 10, 10, .96); }
body.desk .mk.alert .mk-tag::after { color: #f87171; }
body.desk .mk.chosen .mk-dot { outline: 2px solid #facc15; outline-offset: 3px; }
@keyframes ccsos { 0% { box-shadow: 0 0 0 2px #fecaca, 0 0 0 0 rgba(239, 68, 68, .6), 0 0 0 0 rgba(239, 68, 68, .35); }
                   100% { box-shadow: 0 0 0 2px #fecaca, 0 0 0 24px rgba(239, 68, 68, 0), 0 0 0 46px rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .sosbar, body.desk .mk.alert .mk-dot { animation: none; } }
body.desk .map { background: #0a101c; }
.map.ownmap { height: 460px; min-height: 0; border: 1px solid #1a2438; }
body.desk .map.nomap { border: 1px dashed #27344d; color: var(--muted); }
.mapview .mapwrap .lmap { min-height: 420px; }

/* ---- one alert's page ---- */
.cmd-head, .cc-priority { min-width: 0; }
@media (min-width: 900px) {
  .command { grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); grid-template-rows: auto auto 1fr auto;
             grid-template-areas: "head head" "map top" "map rest" "foot foot"; }
  .cmd-head { grid-area: head; }
  .cc-priority { grid-area: foot; }
}
.command.hot { padding: 12px; border: 2px dashed #ef4444; border-radius: 14px;
               box-shadow: 0 0 36px rgba(239, 68, 68, .35), inset 0 0 30px rgba(239, 68, 68, .10); }
.cmd-head .verdict { display: flex; align-items: center; gap: 18px; margin: 0; padding: 16px 20px; border: 1px solid;
                     text-align: left; }
.cmd-head .verdict .ico { width: 62px; height: 62px; }
.cmd-head .vtitle { font-size: clamp(24px, 3.4vw, 40px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vwho { margin-top: 2px; color: #fff; font-size: clamp(16px, 2vw, 22px); font-weight: 600; overflow-wrap: anywhere; }
.cmd-head .vreason { margin-top: 2px; color: #c5cedd; }
body.desk .verdict.bad { border-color: rgba(239, 68, 68, .6); color: #f87171;
                         background: linear-gradient(90deg, rgba(127, 29, 29, .55), rgba(69, 10, 10, .2)); }
body.desk .verdict.bad .vtitle { text-shadow: 0 0 20px rgba(239, 68, 68, .6); }
body.desk .verdict.inside, body.desk .verdict.warn { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .12); color: #fbbf24; }
body.desk .verdict.ok { border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .12); color: #4ade80; }
.cc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cc-fact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #1a2438; border-radius: 10px;
           background: #0a0f1b; }
.cc-fact .ico { width: 26px; height: 26px; color: #8b97ae; }
.cc-fact span { display: block; color: #8b97ae; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cc-fact b { display: block; color: #fff; font-size: 18px; font-variant-numeric: tabular-nums; }
.cc-priority { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 12px 16px;
               border: 1px solid rgba(239, 68, 68, .7); border-radius: 10px; background: rgba(127, 29, 29, .35);
               color: #f87171; letter-spacing: .08em; text-transform: uppercase; }
.cc-priority b { font-size: 18px; }
.cc-priority span { padding-left: 16px; border-left: 1px solid rgba(248, 113, 113, .5); font-weight: 700; }
.cc-priority .ico { width: 26px; height: 26px; }
body.desk .wrong { border: 1px solid rgba(239, 68, 68, .35); color: #fecaca; }
body.desk .wrong b { color: #fff; }
body.desk .steps li::before { border-color: #3a4a69; background: #0b111e; }
body.desk .steps li::after { background: #1a2438; }
body.desk .steps li.done b { color: #4ade80; }
body.desk .radar .ring { stroke: #2a364d; }
body.desk .radar .axis { stroke: #1a2438; }
body.desk .radar .lbl { fill: #8b97ae; }
body.desk .radar .north { fill: #e6eaf2; }
body.desk .radar .who { fill: #e6eaf2; stroke: #05080f; }
body.desk .radar circle.student, body.desk .radar circle.resp { stroke: #05080f; }

/* ---- the pieces that had light colours of their own ---- */
body.desk .btn { background: #111a2c; border-color: #27344d; color: #e6eaf2; }
body.desk .btn:hover { border-color: #3a4a69; }
body.desk .btn.primary { background: #dc2626; border-color: #ef4444; color: #fff; }
body.desk .btn.success { background: #16a34a; border-color: #22c55e; color: #fff; }
body.desk .btn.danger { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .55); color: #fca5a5; }
body.desk .field input, body.desk .field select, body.desk .field textarea, body.desk .filters select,
body.desk .filters input, body.desk .codebox input, body.desk .search { background: #080d18; border-color: #27344d; color: #f1f4fa; }
body.desk .sheet { border: 1px solid #1f2a40; border-bottom: 0; background: #0d1423; }
body.desk .backdrop { background: rgba(2, 4, 9, .72); }
body.desk .toast { border: 1px solid #2c3b59; background: #1b2740; color: #fff; }
body.desk .chip { border-color: #27344d; background: #111a2c; color: #d3dae8; }
body.desk .chip.on { border-color: #ef4444; background: rgba(239, 68, 68, .2); color: #fff; }
body.desk .pill { background: #1a2438; color: #d3dae8; }
body.desk .pill.green { background: rgba(34, 197, 94, .16); color: #4ade80; }
body.desk .pill.amber { background: rgba(245, 158, 11, .16); color: #fbbf24; }
body.desk .pill.red { background: rgba(239, 68, 68, .18); color: #f87171; }
body.desk .pill.blue { background: rgba(59, 130, 246, .18); color: #a5b4fc; }
body.desk .notice { border-color: rgba(245, 158, 11, .35); color: #fcd34d; }
body.desk .notice.info { border-color: rgba(59, 130, 246, .3); background: rgba(59, 130, 246, .10); color: #c7d2fe; }
body.desk .notice.danger { border-color: rgba(239, 68, 68, .4); color: #fecaca; }
body.desk .item:active { background: rgba(255, 255, 255, .04); }
body.desk .item.sosrow, body.desk .mapitem.alert { background: rgba(127, 29, 29, .22); }
body.desk .mapitem .sub.strong { color: #4ade80; }
body.desk .area-title { background: #080d18; color: #e6eaf2; }
body.desk .dutybar { width: auto; max-width: none; margin: 10px 16px 0; border: 1px solid rgba(34, 197, 94, .3); color: #86efac; }
body.desk .dutybar.bad { border-color: rgba(245, 158, 11, .35); color: #fcd34d; }
body.desk .secret { background: #080d18; color: #fff; }
/* signing in (nobody is signed in yet, so there is no side menu): the form in the middle */
body.desk:not(.cc-side-on) .content > form.card { max-width: 460px; margin: 7vh auto 12px; padding: 22px; }
body.desk:not(.cc-side-on) .content > form.card + .small { text-align: center; }