/* The six places the original Coral Springs look comes back (docs/CAD_LOOK.md, "What comes back from the original design"). Nothing else belongs here.
   Loaded straight after app.css. A screen's own stylesheet loads later, so the rules that reach into a screen carry one extra class. */

:root {
  --mast-top: #CC4900;
  --mast-mid: #CF4A00;
  --mast-bottom: #E05200;
  --mast-wave-back: #FF6A00;
  --band-top: #B23F00;
  --wave-h: 10px;
  /* --mast-h is everything the bar takes, wave included, so whatever sticks under it (filters, banners, side panels) clears the wave by itself. */
  --mast-bar-h: 44px;
  --mast-h: calc(var(--mast-bar-h) + var(--wave-h));
}
:root[data-theme="dark"] { --mast-top: #B23F00; --mast-mid: #B54000; --mast-bottom: #C64800; --mast-wave-back: #E05800; --band-top: #9A3600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mast-top: #B23F00; --mast-mid: #B54000; --mast-bottom: #C64800; --mast-wave-back: #E05800; --band-top: #9A3600; }
}
@media (max-width: 899px) {
  :root { --wave-h: 8px; --mast-bar-h: 52px; --mast-h: calc(var(--mast-bar-h) + var(--wave-h)); }
}

/* ---- 1. the top bar --------------------------------------------------------------------------------------------------- */
.mast {
  border-bottom: 0;
  color: #fff;
  background: linear-gradient(180deg, var(--mast-top), var(--mast-mid) 62%, var(--mast-bottom)) top / 100% calc(100% - var(--wave-h)) no-repeat;
  pointer-events: none;                 /* the strip under the wave belongs to the page */
}
.mast__bar { position: relative; z-index: 1; height: var(--mast-bar-h); pointer-events: auto; }
.mast__wave { display: block; width: 100%; height: var(--wave-h); pointer-events: none; }
.mast__wave-back { fill: var(--mast-wave-back); opacity: .4; }
.mast__wave-front { fill: var(--mast-bottom); }
.mast :focus-visible { outline-color: #fff; }

.mast__brand { color: #fff; }
.mast__mark { width: 30px; height: 22px; }
.mast__word, .mast__pagetitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mast__pagetitle { display: block; padding-right: 2px; overflow: hidden; text-overflow: ellipsis; }
.mast__preview { color: rgba(255, 255, 255, .92); }

.mast__link { padding: 0 10px; height: 30px; align-self: center; border: 0; border-radius: var(--r); color: #fff; }
.mast__link:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.mast__link.is-on, .mast__link.is-on:hover { background: #fff; color: #A83D00; font-weight: 600; }
.mast__nav { align-items: center; gap: 2px; }
.mast__nav .menu { align-items: center; }

.mast .live { color: #fff; }
.mast .live__item b { color: #fff; }
.mast .dot--off { background: rgba(255, 255, 255, .6); }
.mast .dot--on { background: #fff; }
.mast .dot--warn { background: #FFD27A; }

.mast__search { border-color: transparent; background: rgba(255, 255, 255, .18); color: #fff; }
.mast__search:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.mast__search .kbd { border-color: transparent; background: rgba(255, 255, 255, .24); color: #fff; box-shadow: none; }

/* My unit stays a white control, in both themes, so its status keeps the colours it has everywhere else. */
.mast .unitctl__btn { border-color: transparent; background: #fff; color: #16191D; }
.mast .unitctl__btn:hover { background: #F2F3F5; }
.mast .unitctl__sign { color: #16191D; }
.mast .unitctl__btn > .icon { color: #5C6470; }
.mast .unitctl__dot.tone-good { background: #1B7F4B; }
.mast .unitctl__dot.tone-info { background: #1F5FBF; }
.mast .unitctl__dot.tone-warn { background: #B7791F; }
.mast .unitctl__dot.tone-bad { background: #C62828; }
.mast .unitctl__dot.tone-idle, .mast .unitctl__dot.tone-neutral { background: #7A818C; }
.mast .unitctl__chip.chip--good { background: #E6F4EC; color: #136339; }
.mast .unitctl__chip.chip--info { background: #E8F0FB; color: #174F9F; }
.mast .unitctl__chip.chip--warn { background: #FBF2DF; color: #7A5200; }
.mast .unitctl__chip.chip--bad { background: #C62828; color: #fff; }
.mast .unitctl__chip.chip--idle, .mast .unitctl__chip.chip--neutral { background: #ECEEF1; color: #4A515C; }
.mast .unitctl__btn.is-panic { background: var(--red-solid); color: #fff; }
.mast .unitctl__btn.is-panic .unitctl__sign, .mast .unitctl__btn.is-panic > .icon { color: #fff; }

/* Solid red with a thin white outline: it has to read as its own thing on the orange. */
.mast .panic { box-shadow: 0 0 0 1px #fff; }

/* Off duty the bar's one button is white. */
.mast__bar > .btn { border-color: #fff; background: #fff; color: #A83D00; }
.mast__bar > .btn:hover:not(:disabled) { background: #FDF1E8; color: #A83D00; }

.staff .staff__tabs { display: flex; align-items: center; gap: 12px; }
.staff__tabs .tabs { flex: 1 1 0; min-width: 0; }

/* ---- 2. display type: page titles, my callsign, a call's type ---------------------------------------------------------- */
.display,
.pagehead .pagehead__title,
.dxbar .dxbar__title,
.dxphonehead .dxbar__title,
.mapbar .mapbar__title,
.dossier .dossier__name,
.profhead .profhead__name,
.calldone .calldone__title,
.mdthead .mdthead__sign,
.staff__title,
.ccover__type {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1;
}
.pagehead .pagehead__title, .dossier .dossier__name, .profhead .profhead__name, .calldone .calldone__title, .dxbar .dxbar__title, .dxphonehead .dxbar__title { font-size: 28px; }
.mapbar .mapbar__title, .staff__title { font-size: 24px; }
.staff__title { flex: none; padding: 0 4px; }
.mdthead .mdthead__sign { font-size: 34px; }
.mdthead { align-items: center; }
.mdthead .emblem { width: 40px; height: 40px; }

/* ---- 3. the call over the map -------------------------------------------------------------------------------------------- */
.ccover { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--sea); }
.ccover .cmap, .ccover .cmap--compact { height: 150px; border: 0; border-radius: 0; }
.ccover.is-closed .gmap { filter: grayscale(.75) brightness(.92); }
.ccover__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Clear down to where the call sits, solid enough by the tags that no road name shows through the title. */
  background: linear-gradient(180deg, rgba(14, 16, 20, 0) 44%, rgba(14, 16, 20, .88) 62%, rgba(14, 16, 20, .96) 100%);
}
.ccover--p1 .ccover__shade { background: linear-gradient(180deg, rgba(48, 8, 8, 0) 44%, rgba(48, 8, 8, .88) 62%, rgba(48, 8, 8, .96) 100%); }
.ccover__text { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; pointer-events: none; }
.ccover__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; }
/* The status has to read on any part of the map, in either theme, so it sits on white. */
.ccover__meta .chip:not(.chip--p) { background: #fff; }
.ccover__meta .chip--good { color: #136339; }
.ccover__meta .chip--info { color: #174F9F; }
.ccover__meta .chip--warn { color: #7A5200; }
.ccover__meta .chip--bad { color: #B01E1E; }
.ccover__meta .chip--idle, .ccover__meta .chip--neutral { color: #4A515C; }
.ccover .ccover__tag, .ccover .age.is-overdue {
  padding: 0 6px;
  border-radius: var(--r);
  background: rgba(14, 16, 20, .72);
  color: #fff;
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 20px;
}
.ccover__type {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding-right: 2px;
  font-size: 30px;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.ccover__chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 0; }
.mdtcall .ccover + .mdtcall__where, .mdtcall .ccover + .ccover__chips + .mdtcall__where,
.cdetail .ccover + .cdetail__map, .cdetail .ccover + .ccover__chips + .cdetail__map,
.cdetail .ccover + .cended, .cdetail .ccover + .ccover__chips + .cended { margin-top: 8px; padding-top: 0; }

/* ---- 4. the sign-in page: orange, the wordmark in the water, one button, one line --------------------------------------- */
.signin { justify-content: flex-start; gap: 0; padding: 0; background: var(--surface); overflow-x: hidden; }
.signhero {
  position: relative;
  width: 100%;
  flex: 1 0 clamp(280px, 56vh, 620px);    /* takes whatever the page has left, so one button under it still fills the first screen */
  overflow: hidden;
  /* The orange stops inside the water, so no sliver of it can show at the bottom edge on a fractional-pixel phone. */
  background: linear-gradient(180deg, #CC4900 0%, #E05200 56%, #F06A12 100%) top / 100% 86% no-repeat var(--surface);
}
.signhero__art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.signhero__word { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; }
.signhero__word--top { fill: #fff; }
.signhero__word--low { fill: var(--orange); }
.signhero__water { fill: var(--surface); }
.signhero__edge { fill: none; stroke: none; }
.signhero__brand { position: absolute; left: 0; right: 0; top: max(4vh, 20px); display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.signhero__brand img { width: 44px; height: auto; }
.signhero__name { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.signin .signin__panel { max-width: 440px; padding: 4px 20px 28px; border: 0; border-radius: 0; background: none; }
.signin .signin__head { margin-top: 0; color: var(--accent-text); font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
.signin__panel > .btn { margin-top: 0; }
.signin__panel > .signin__head + .signin__line { margin-top: 8px; }
.signin .personas { margin-bottom: 24px; }
@media (max-width: 899px) {
  .signin { padding: 0; }
  .signin .signin__panel { padding: 4px var(--gutter) 24px; max-width: 440px; }
  .signin .personas { max-width: 440px; margin-bottom: 16px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); width: calc(100% - var(--gutter) * 2); border-radius: var(--r); }
}

/* ---- 5. the civilian home: a slim orange band, then Call 911 as a solid bar ------------------------------------------------ */
.civ .civband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  /* Straight under the bar, with the wave breaking over its top edge, and full width while its contents stay in the page's column. */
  min-height: calc(90px + var(--wave-h));
  margin-top: calc(-20px - var(--wave-h));
  padding: calc(8px + var(--wave-h)) 0 8px;
  overflow: visible;
  clip-path: inset(0 -100vw);
  color: #fff;
}
.civ .civband::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 -100vw;
  /* The top is deeper than the wave, so the wave still shows as a crest. */
  background: linear-gradient(180deg, var(--band-top), var(--mast-top) 45%, var(--mast-bottom));
}
.view:has(.civband) { overflow-x: clip; }
.civ > .banner--hint { margin-top: -8px; padding: 0; border: 0; background: none; }
.civband__coral { position: absolute; z-index: -1; right: 200px; top: -28px; width: 200px; height: auto; opacity: .16; pointer-events: none; }
.civband__hello { min-width: 0; font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.civband .playas { flex: 0 1 280px; }
.civband .playas__label { color: #fff; }
.civband .playas__btn { border-color: transparent; background: #fff; color: #16191D; }
.civband .playas__btn:hover { border-color: transparent; background: #F2F3F5; }
.civband .playas__btn > .icon { color: #5C6470; }
.civband :focus-visible { outline-color: #fff; }

.civ .civacts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.civ .civacts .btn { min-width: 0; height: 64px; }
.civ .civacts .civ911 { gap: 10px; border-color: var(--red-solid); background: var(--red-solid); color: #fff; }
.civ .civacts .civ911:hover { background: var(--red-deep); }
.civ911 .btn__label { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; }
.civ .civacts .civduty { gap: 8px; }
.civduty__emblems { display: inline-flex; gap: 4px; flex: none; }
.civ .civacts:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 899px) {
  .civ .civband { flex-direction: column; align-items: stretch; gap: 6px; min-height: calc(90px + var(--wave-h)); margin-top: calc(-12px - var(--wave-h)); padding: calc(6px + var(--wave-h)) 0 8px; }
  .civband__coral { right: calc(var(--gutter) * -1 + 4px); top: var(--wave-h); width: 110px; opacity: .12; }
  .civband .playas { flex: none; flex-direction: row; align-items: center; gap: 8px; }
  .civband .playas__label { flex: none; }
  .civband .playas__menu { flex: 1 1 0; }
  .civ .civacts { grid-template-columns: minmax(0, 1fr); }
  .civ .civacts .civduty { height: 48px; }
}

/* ---- 6. the Dispatch counts ---------------------------------------------------------------------------------------------- */
.dxcounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.1; }
.dxcount { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.dxcount b { color: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.dxcounts .dxcount.is-bad, .dxcounts .dxcount.is-bad b { color: var(--red-text); font-weight: 800; }
.dxcounts .dxcount.is-warn, .dxcounts .dxcount.is-warn b { color: var(--amber-text); font-weight: 800; }
.dxcounts .dxcount.is-bad, .dxcounts .dxcount.is-warn { font-weight: 600; }
.dxphonehead .dxcounts { display: flex; margin-top: 4px; }

/* The Dispatch strip is white, so the water under the wave is too. */
.shell:has(.dxbar) .mast { background-color: var(--surface); }

/* A notice tucks up under the wave rather than leaving a gap above it. */
.banners:not(:empty) { margin-top: calc(var(--wave-h) * -1); top: calc(var(--mast-h) - var(--wave-h) + var(--safe-t)); }
.banners:not(:empty) > .banner:first-child { padding-top: calc(var(--wave-h) + 6px); }

@media (max-width: 899px) {
  .mast__brand { gap: 6px; }
  .mast__mark { width: 26px; height: 19px; }
  .mast__names { min-width: 0; }
  .mast__pagetitle { font-size: 24px; }
  .mast__preview { font-size: 10px; margin-top: 1px; }
  .mast__search { background: none; }
  .mast__search:hover { background: none; }

  /* The unit tile, Panic and the off-duty button are drawn smaller so the page name leads. A transparent layer keeps each one a 44 px target. */
  .mast .unitctl__btn, .mast .panic, .mast__bar > .btn { position: relative; height: 36px; min-height: 36px; overflow: visible; }
  .mast .panic::after { content: ""; position: absolute; inset: -4px 0; }
  .mast .unitctl__btn::after, .mast__bar > .btn::after { content: ""; position: absolute; inset: -5px 0; }   /* these two have a border, and the layer starts inside it */

  /* The bar already says which page this is, so a top-level page's own title steps back and its row keeps only the actions. A page with a back link names something the bar doesn't. */
  .pagehead--top .pagehead__title, .dxphonehead .dxbar__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rechead:not(:has(.pagehead__back)) { margin-top: -8px; margin-bottom: 4px; }
  /* Dispatch: New call moves up beside the counts, and the title's row goes. */
  .dxphonehead { display: flex; align-items: center; gap: 8px; }
  .dxphonehead__row { display: contents; }
  .dxphonehead .dxcounts { order: 1; flex: 1 1 0; min-width: 0; margin-top: 0; }
  .dxphonehead__actions { order: 2; }

  .pagehead .pagehead__title, .dossier .dossier__name, .profhead .profhead__name, .calldone .calldone__title, .dxbar .dxbar__title, .dxphonehead .dxbar__title { font-size: 26px; }
  /* The unit stays one block: emblem and callsign big, the rest stacked beside them, so nothing falls onto a line of its own. */
  .mdthead {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, auto) auto;
    grid-template-areas: "emblem sign agency chip auto" "emblem sign where where where";
    justify-content: start;
    align-items: center;
    gap: 2px 8px;
  }
  .mdthead > .emblem { grid-area: emblem; }
  .mdthead > .mdthead__sign { grid-area: sign; font-size: 34px; }
  .mdthead > .mdthead__agency { grid-area: agency; }
  .mdthead > .chip { grid-area: chip; min-width: 0; justify-self: start; }
  .mdthead > .tag--auto { grid-area: auto; }
  .mdthead > .mdthead__where { grid-area: where; font-size: var(--fs-sm); }
  .ccover .cmap, .ccover .cmap--compact { height: 170px; }
  .ccover__text { left: var(--gutter); right: var(--gutter); }
  .ccover__chips { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (max-width: 359px) {
  .mast__mark { width: 20px; height: 15px; }
  .mast__brand { gap: 4px; }
  .mast__pagetitle { font-size: 22px; }
  .mast__search { width: 36px; }
  .mdthead .emblem { width: 32px; height: 32px; }
  .mdthead > .mdthead__sign { font-size: 30px; }
  .mast .panic { margin-left: 2px; margin-right: 2px; }
  .mdtauto__more { display: none; }
}