/* ====================================================== isolation cards
   One card per isolation, carrying its state in four places at once: the
   badge, the chip, the border glow and the progress bar. That redundancy is
   deliberate — in a glove, in the dark, at arm's length, colour alone is not
   a safe way to say "five earths are still on the line".
   ---------------------------------------------------------------------- */

.section-head { display: flex; align-items: center; gap: 10px; }
.section-head .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #2fe36a; box-shadow: 0 0 10px rgba(47, 227, 106, .9);
  animation: head-pulse 2.4s ease-in-out infinite;
}
.section-head .dot.quiet {
  background: #4a5a50; box-shadow: none; animation: none;
}
@keyframes head-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.82); }
}

/* ---------------------------------------------------------------- card */
.iso-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 11px;
  width: 100%; margin-bottom: 14px; padding: 16px;
  text-align: left; cursor: pointer;
  border-radius: 22px;
  color: #eef3ee;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02) 58%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .11);
  transition: transform .14s, border-color .18s, box-shadow .18s;
}
.iso-card:active { transform: scale(.993); }

/* a specular streak along the top edge, and its echo underneath */
.iso-card::before,
.iso-card::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 1.5px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 46%, transparent);
  opacity: .5;
}
.iso-card::before { top: -1px; }
.iso-card::after { bottom: -1px; opacity: 0; }

/* -- all accounted for -------------------------------------------------- */
.iso-card.clear {
  border-color: rgba(47, 227, 106, .62);
  background:
    linear-gradient(158deg, rgba(47, 227, 106, .16), rgba(47, 227, 106, .035) 62%),
    #08140d;
  box-shadow: 0 0 34px rgba(47, 227, 106, .2), 0 10px 30px rgba(0, 0, 0, .45);
}
.iso-card.clear::before {
  background: linear-gradient(90deg, transparent, #9affc2 42%, #2fe36a 70%, transparent);
  opacity: 1; height: 2px;
  box-shadow: 0 0 14px rgba(47, 227, 106, .9);
}
.iso-card.clear::after {
  background: linear-gradient(90deg, transparent, rgba(47, 227, 106, .85) 50%, transparent);
  opacity: .85; box-shadow: 0 0 18px rgba(47, 227, 106, .7);
}

/* -- earths still on the line ------------------------------------------- */
.iso-card.out {
  border-color: rgba(229, 67, 60, .68);
  background:
    linear-gradient(158deg, rgba(229, 67, 60, .2), rgba(229, 67, 60, .05) 62%),
    #150a09;
  box-shadow: 0 0 34px rgba(229, 67, 60, .22), 0 10px 30px rgba(0, 0, 0, .45);
}
.iso-card.out::before {
  background: linear-gradient(90deg, transparent, #ff8178 45%, #e5433c 72%, transparent);
  opacity: 1; height: 2px;
  box-shadow: 0 0 14px rgba(229, 67, 60, .9);
}
.iso-card.out::after {
  background: linear-gradient(90deg, transparent, rgba(229, 67, 60, .8) 50%, transparent);
  opacity: .8; box-shadow: 0 0 18px rgba(229, 67, 60, .6);
}

/* -- handed back: finished, so it recedes -------------------------------- */
.iso-card.closed { border-color: rgba(47, 227, 106, .22); }
.iso-card.closed .ic-ref { color: #c7d3c9; }

.iso-card:hover { border-color: rgba(255, 255, 255, .26); }
.iso-card.clear:hover { border-color: rgba(47, 227, 106, .9); }
.iso-card.out:hover { border-color: rgba(229, 67, 60, .95); }

/* ---------------------------------------------------------------- head */
.ic-head { display: flex; align-items: center; gap: 12px; }

.ic-badge {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #c7d3c9;
  /* the divider the mock puts between the badge and the reference */
  box-shadow: 17px 0 0 -16px rgba(255, 255, 255, .16);
  margin-right: 5px;
}
.ic-badge svg { width: 22px; height: 22px; }
.iso-card.clear .ic-badge {
  background: rgba(47, 227, 106, .16); border-color: rgba(47, 227, 106, .5); color: #6bffa0;
  box-shadow: 17px 0 0 -16px rgba(47, 227, 106, .35);
}
.iso-card.out .ic-badge {
  background: rgba(229, 67, 60, .18); border-color: rgba(229, 67, 60, .55); color: #ff8178;
  box-shadow: 17px 0 0 -16px rgba(229, 67, 60, .35);
}

.ic-ref {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display, inherit);
  font-size: 19px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2;
  color: #fff; overflow-wrap: anywhere;
}

.ic-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #b8c6bd;
}
.ic-chip svg { width: 15px; height: 15px; }
.iso-card.clear .ic-chip,
.iso-card.closed .ic-chip {
  background: rgba(47, 227, 106, .14); border-color: rgba(47, 227, 106, .55); color: #6bffa0;
}
.iso-card.out .ic-chip {
  background: rgba(229, 67, 60, .16); border-color: rgba(229, 67, 60, .6); color: #ff8178;
}

/* ---------------------------------------------------------------- rows */
.ic-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13.5px; line-height: 1.4; color: #c2d0c6;
}
.ic-row svg { width: 16px; height: 16px; flex: 0 0 auto; color: #8fa094; }
.ic-row > span { min-width: 0; overflow-wrap: anywhere; }

.ic-tag {
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .11);
  color: #b8c6bd;
}
.iso-card.clear .ic-tag {
  background: rgba(47, 227, 106, .13); border-color: rgba(47, 227, 106, .4); color: #6bffa0;
}
.ic-tag.warn {
  background: rgba(229, 67, 60, .16); border-color: rgba(229, 67, 60, .5); color: #ff8178;
}

/* ------------------------------------------------------------ progress */
.ic-prog { display: flex; align-items: center; gap: 11px; margin-top: 2px; }
.ic-track {
  flex: 1 1 auto; height: 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.ic-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #1aa352, #2fe36a);
  box-shadow: 0 0 14px rgba(47, 227, 106, .85);
  transition: width .5s cubic-bezier(.3, 1, .4, 1);
}
.iso-card.out .ic-fill {
  background: linear-gradient(90deg, #a52a24, #ff6a60);
  box-shadow: 0 0 14px rgba(229, 67, 60, .85);
}
.ic-prog em {
  flex: 0 0 auto; font-style: normal;
  font-size: 12px; font-weight: 700; color: #8fa094;
  font-variant-numeric: tabular-nums;
}
.ic-done { flex: 0 0 auto; display: grid; place-items: center; color: #2fe36a; line-height: 0; }
.ic-done svg {
  width: 22px; height: 22px;
  background: #2fe36a; color: #06240f; border-radius: 50%;
  box-shadow: 0 0 16px rgba(47, 227, 106, .85);
}

/* ---------------------------------------------------------------- foot */
.ic-foot {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: #a7b7ac;
}
.ic-foot > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ic-foot svg { width: 16px; height: 16px; flex: 0 0 auto; color: #8fa094; }
.ic-div { flex: 0 0 auto; width: 1px; height: 18px; background: rgba(255, 255, 255, .14); }
.ic-time {
  padding: 3px 9px; border-radius: 999px; font-weight: 700;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #dbe6de; font-variant-numeric: tabular-nums;
}
.iso-card.clear .ic-time {
  background: rgba(47, 227, 106, .14); border-color: rgba(47, 227, 106, .42); color: #6bffa0;
}
.iso-card.out .ic-time {
  background: rgba(229, 67, 60, .16); border-color: rgba(229, 67, 60, .5); color: #ff8178;
}
.ic-time.late { background: rgba(229, 67, 60, .3); border-color: #e5433c; color: #ffb4ae; }

@media (max-width: 400px) {
  .iso-card { padding: 14px; border-radius: 20px; gap: 10px; }
  .ic-head { flex-wrap: wrap; }
  .ic-ref { font-size: 17px; flex-basis: calc(100% - 62px); }
  .ic-chip { font-size: 10px; padding: 6px 10px; }
  .ic-badge { width: 40px; height: 40px; }
  .ic-foot { font-size: 11.5px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .section-head .dot { animation: none; }
  .ic-fill { transition: none; }
}

/* ============================================== the three standing numbers
   Live, earths out, handed back. Only one of them is ever an alarm, and it
   is the only one that moves: the red tile breathes while anything is on the
   line and goes perfectly still at zero. Stillness is the good state.
   ---------------------------------------------------------------------- */

.kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }

.kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
  padding: 15px 11px 14px;
  border-radius: 18px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018) 60%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .1);
}
.kpi::before {
  content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 50%, transparent);
  opacity: .45;
}

.kpi-ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .11);
  color: #9fb3a6;
}
.kpi-ico svg { width: 17px; height: 17px; }

.kpi b {
  font-family: var(--font-display, inherit);
  font-size: 30px; font-weight: 800; line-height: 1.06; letter-spacing: -1px;
  color: #f2f7f2; font-variant-numeric: tabular-nums;
}
.kpi-l {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: #8fa094; line-height: 1.3;
}

/* live --------------------------------------------------------------- */
.kpi.active { border-color: rgba(47, 227, 106, .4); }
.kpi.active::before {
  background: linear-gradient(90deg, transparent, #6bffa0 50%, transparent);
  opacity: 1; box-shadow: 0 0 12px rgba(47, 227, 106, .7);
}
.kpi.active .kpi-ico {
  background: rgba(47, 227, 106, .15); border-color: rgba(47, 227, 106, .45); color: #6bffa0;
}

/* handed back -------------------------------------------------------- */
.kpi.ok b { color: #6bffa0; }
.kpi.ok .kpi-ico {
  background: rgba(47, 227, 106, .13); border-color: rgba(47, 227, 106, .4); color: #6bffa0;
}

/* earths out — the alarm --------------------------------------------- */
.kpi.out {
  border-color: rgba(229, 67, 60, .5);
  background:
    linear-gradient(158deg, rgba(229, 67, 60, .17), rgba(229, 67, 60, .04) 62%),
    #150a09;
}
.kpi.out b { color: #ff6a60; }
.kpi.out .kpi-l { color: #d9a9a4; }
.kpi.out .kpi-ico {
  background: rgba(229, 67, 60, .2); border-color: rgba(229, 67, 60, .55); color: #ff8178;
}
.kpi.out::before {
  background: linear-gradient(90deg, transparent, #ff8178 50%, transparent);
  opacity: 1; box-shadow: 0 0 12px rgba(229, 67, 60, .8);
}
.kpi.out.alarm {
  animation: kpi-breathe 3.4s ease-in-out infinite;
}
@keyframes kpi-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 67, 60, 0), 0 8px 24px rgba(0, 0, 0, .4); }
  50%      { box-shadow: 0 0 30px rgba(229, 67, 60, .4), 0 8px 24px rgba(0, 0, 0, .4); }
}

/* ===================================================== take an isolation */
.new-iso-toggle {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 16px 0 0; padding: 15px 16px;
  text-align: left; cursor: pointer;
  border-radius: 20px;
  background:
    linear-gradient(158deg, rgba(47, 227, 106, .13), rgba(47, 227, 106, .03) 62%),
    #0a130e;
  border: 1px solid rgba(47, 227, 106, .42);
  color: #eef3ee;
  transition: border-color .18s, box-shadow .18s, transform .14s;
}
.new-iso-toggle::before {
  content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #6bffa0 50%, transparent);
  box-shadow: 0 0 12px rgba(47, 227, 106, .7);
}
.new-iso-toggle:hover {
  border-color: rgba(47, 227, 106, .85);
  box-shadow: 0 0 30px rgba(47, 227, 106, .2);
}
.new-iso-toggle:active { transform: scale(.993); }

.ni-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(150deg, #2fe36a, #12924a);
  color: #04210f;
  box-shadow: 0 6px 18px rgba(47, 227, 106, .32);
}
.ni-ico svg { width: 23px; height: 23px; }

.ni-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ni-text b {
  font-family: var(--font-display, inherit);
  font-size: 15.5px; font-weight: 800; letter-spacing: .2px; line-height: 1.25;
  color: #fff;
}
.ni-text i {
  font-style: normal; font-size: 12px; line-height: 1.35; color: #93a899;
}
.ni-chev { width: 20px; height: 20px; flex: 0 0 auto; color: #6bffa0; transition: transform .2s; }
.new-iso-toggle[aria-expanded="true"] .ni-chev { transform: rotate(90deg); }

@media (max-width: 400px) {
  .kpi-strip { gap: 8px; }
  .kpi { padding: 13px 10px 12px; border-radius: 16px; }
  .kpi b { font-size: 25px; }
  .kpi-ico { width: 28px; height: 28px; margin-bottom: 5px; }
  .kpi-ico svg { width: 15px; height: 15px; }
  .kpi-l { font-size: 9.5px; letter-spacing: .9px; }
  .new-iso-toggle { padding: 13px 14px; gap: 12px; }
  .ni-ico { width: 42px; height: 42px; }
  .ni-text b { font-size: 14.5px; }
  .ni-text i { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .kpi.out.alarm { animation: none; box-shadow: 0 0 20px rgba(229, 67, 60, .3); }
}

/* ================================================== take an isolation: form
   The panel reads as the drawer of the button above it, not a separate box,
   so the two square off where they meet. Fields are icon-led like the rest of
   the app, and every control clears 54px because this gets filled in on a
   phone, outdoors, often in gloves.
   ---------------------------------------------------------------------- */

.new-iso-toggle[aria-expanded="true"] {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: rgba(47, 227, 106, .22);
}

.new-iso-form {
  position: relative; margin-top: -1px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 0 0 20px 20px;
  background:
    linear-gradient(180deg, rgba(47, 227, 106, .07), rgba(47, 227, 106, .015) 40%),
    #0a130e;
  border: 1px solid rgba(47, 227, 106, .42);
  border-top: 0;
}
.new-iso-form[hidden] { display: none; }

.nf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.nf { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nf-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: #93a899; line-height: 1.35;
}
.nf-label i {
  display: block; font-style: normal; margin-top: 3px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .3px;
  text-transform: none; color: #74867b;
}

.nf-input {
  display: flex; align-items: center;
  min-height: 54px; padding-right: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.nf-input:focus-within {
  border-color: rgba(47, 227, 106, .62);
  background: rgba(47, 227, 106, .055);
  box-shadow: 0 0 0 4px rgba(47, 227, 106, .1);
}
.nf-input > svg {
  width: 19px; height: 19px; flex: 0 0 auto;
  margin: 0 12px; color: #6bffa0;
}
.nf-input input {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 14px 0;
  background: none; border: 0; border-radius: 0;
  color: #eef3ee; font-size: 15px; font-weight: 500;
  /* a dark native date picker, and a calendar glyph that is not stark white */
  color-scheme: dark;
}
.nf-input input::placeholder { color: #6f8077; font-weight: 400; }
.nf-input input:focus { outline: none; box-shadow: none; }
.nf-input input::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(38%) saturate(600%) hue-rotate(78deg);
  cursor: pointer; opacity: .9;
}

/* Selects, in the same field as the inputs. appearance:none strips the native
   arrow — which on a dark control renders as a near-black glyph on a near-black
   field — and the chevron after the select is drawn by us instead. */
.nf-select select {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 14px 0;
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; border-radius: 0;
  color: #eef3ee; font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.nf-select select:focus { outline: none; box-shadow: none; }
/* the list itself is drawn by the OS, which does not inherit the page's colours */
.nf-select select option { background: #121a15; color: #eef3ee; }
/* :last-of-type, not :last-child — the custom menu is appended after this
   svg, which took the chevron out of :last-child and dropped its sizing. */
.nf-select > svg:last-of-type {
  width: 17px; height: 17px; flex: 0 0 auto;
  margin: 0 0 0 8px; color: #8fa094; pointer-events: none;
}

/* ------------------------------------------------------ the custom select
   The native <select> is kept as the value but taken out of the layout; the
   button below is what is seen, and the menu is drawn in the page so it can
   look like the app rather than like the operating system. */
.jr-sel .nf-select select,
.jr-sel > select {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.jr-sel { position: relative; cursor: pointer; }

.jr-sel-btn {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 14px 0;
  text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 0;
  color: #eef3ee; font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jr-sel-btn:focus { outline: none; box-shadow: none; }
.jr-sel-btn.empty { color: #6f8077; }
.jr-sel.open { border-color: rgba(47, 227, 106, .62); background: rgba(47, 227, 106, .055); }
.jr-sel.open > svg:last-of-type { transform: rotate(180deg); }
.nf-select > svg:last-of-type { transition: transform .18s; }

.jr-sel-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 70;
  max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
  padding: 7px;
  border-radius: 15px;
  background: #0f1712;
  border: 1px solid rgba(47, 227, 106, .34);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .72);
}
.jr-sel.up .jr-sel-menu { top: auto; bottom: calc(100% + 7px); }
.jr-sel-menu[hidden] { display: none; }

.jr-sel-opt {
  display: flex; align-items: center;
  width: 100%; min-height: 46px; padding: 0 13px;
  border: 0; border-radius: 11px; cursor: pointer;
  text-align: left;
  background: none; color: #dbe6de;
  font-size: 15px; font-weight: 500; letter-spacing: .2px;
}
.jr-sel-opt + .jr-sel-opt { margin-top: 2px; }
.jr-sel-opt:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.jr-sel-opt.on {
  background: rgba(47, 227, 106, .16); color: #9affc2; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(47, 227, 106, .4);
}
/* serials are read aloud and typed back, so they stay monospaced in the list */
#issueSerial ~ .jr-sel-menu .jr-sel-opt { font-family: var(--font-mono); font-size: 14.5px; }
.jr-sel-none { margin: 0; padding: 14px 13px; color: #74867b; font-size: 14px; }

.jr-sel-menu::-webkit-scrollbar { width: 10px; }
.jr-sel-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16); border-radius: 999px;
  border: 3px solid #0f1712;
}

.nf-submit {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; min-height: 56px; margin-top: 4px;
  border: 0; border-radius: 15px; cursor: pointer;
  font-family: var(--font-display, inherit);
  font-size: 15px; font-weight: 800; letter-spacing: 1.3px;
  color: #04210f;
  background: linear-gradient(100deg, #26d964, #6bffa0 52%, #26d964);
}
.nf-submit svg { width: 20px; height: 20px; }
.nf-submit:hover { filter: brightness(1.05); }
.nf-submit:active { transform: translateY(1px); }
.nf-submit:disabled {
  cursor: not-allowed;
  color: #7f9086;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.nf-submit:disabled svg { opacity: .5; }

@media (max-width: 400px) {
  .new-iso-form { padding: 16px 14px 14px; gap: 12px; }
  .nf-grid { grid-template-columns: 1fr; gap: 12px; }
  .nf-input > svg { margin: 0 10px; }
}