/* ===========================================================================
   Highs & Lows Reporting — Quorra IT

   Dark throughout. Brand cyan is reserved for the mark and navigation, so the
   only colours on the working surface are coral (running high) and aqua
   (running low). Both mean something; nothing decorative uses them.
   =========================================================================== */

:root {
  --brand:      #1caade;
  --brand-dim:  #1789b3;
  --brand-glow: rgba(28, 170, 222, 0.13);

  --bg:         #0c0b09;
  --surface:    #15140f;
  --raised:     #1c1a15;
  --raised-2:   #23211b;
  --line:       #2e2b24;
  --line-soft:  #24221c;

  --text:       #f1efe9;
  --text-2:     #b6b1a6;
  --text-3:     #837e73;

  --high:       #ff7a4d;
  --high-tint:  rgba(255, 122, 77, 0.13);
  --high-edge:  rgba(255, 122, 77, 0.35);
  --low:        #4fd1c5;
  --low-tint:   rgba(79, 209, 197, 0.12);
  --low-edge:   rgba(79, 209, 197, 0.34);

  --s-00: 0.6875rem;
  --s-0:  0.8125rem;
  --s-1:  0.9375rem;
  --s-2:  1.0625rem;
  --s-3:  1.375rem;
  --s-4:  2.125rem;
}

html[data-theme="light"] {
  --bg:         #f4f6f7;
  --surface:    #ffffff;
  --raised:     #f7f9fa;
  --raised-2:   #eef2f3;
  --line:       #d8dee1;
  --line-soft:  #e8edee;

  --text:       #15140f;
  --text-2:     #4a4f52;
  --text-3:     #82898d;

  --brand:      #1789b3;
  --brand-glow: rgba(28, 170, 222, 0.12);

  --high:       #b0431a;
  --high-tint:  rgba(176, 67, 26, 0.09);
  --high-edge:  rgba(176, 67, 26, 0.3);
  --low:        #16717e;
  --low-tint:   rgba(22, 113, 126, 0.09);
  --low-edge:   rgba(22, 113, 126, 0.3);
}

html[data-theme="light"] .badge-admin { background: #1caade; color: #15140f; }
html[data-theme="light"] .signin .wordmark .q { color: #1789b3; }
html[data-theme="light"] .btn-brand { color: #fff; background: #1789b3; border-color: #1789b3; }
html[data-theme="light"] .btn-brand:hover { background: #1caade; border-color: #1caade; color: #06232e; }
html[data-theme="light"] .bands a.on { background: var(--raised-2); }
html[data-theme="light"] .entry:hover,
html[data-theme="light"] tbody tr:hover { background: #fafcfc; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  /* A single wide child should scroll inside itself, not drag the page
     sideways. Both known offenders are capped above; this is the backstop. */
  overflow-x: hidden;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--s-1);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: #4cc3ee; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- chrome -------------------------------------------------------------- */

.masthead {
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.75rem;
  min-height: 4.25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--brand-glow);
}

.mark { display: flex; align-items: center; gap: 0.8rem; }
.mark img { display: block; height: 32px; width: auto; }

.wordmark {
  font-family: Syne, Inter, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: block;
  color: var(--text);
}

.wordmark .q { color: var(--brand); }

.product {
  display: block;
  font-size: var(--s-00);
  color: var(--text-3);
  letter-spacing: 0.03em;
  margin-top: 0.15rem;
}

.tenant-wrap { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-width: 0; margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.tenant-wrap .tenant { margin: 0; padding: 0; border: 0; }
.tenant-counts { margin: 0; font-size: var(--s-00); color: var(--text-2); white-space: normal; }
.tenant-counts strong { color: var(--text); font-weight: 600; }
.tenant-counts .sep { display: inline-block; width: 1px; height: .9em; background: var(--line); margin: 0 .7rem; vertical-align: -.1em; }
.tenant {
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
  font-size: var(--s-0);
  color: var(--text-2);
}

.badge-admin {
  font-size: var(--s-00);
  color: var(--bg);
  background: var(--brand);
  padding: 0.1rem 0.45rem;
  font-weight: 600;
  margin-left: 0.45rem;
  border-radius: 2px;
}

.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 0.2rem; }

.masthead nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--s-0);
  padding: 0.45rem 0.85rem;
  border-radius: 2px;
}

.masthead nav a:hover { color: var(--text); background: var(--raised); }
.masthead nav a.here { color: var(--brand); background: var(--brand-glow); }

.nav-menu { position: relative; }
.nav-menu-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--text-2); background: transparent; border: 0;
  font-size: var(--s-0); padding: 0.45rem 0.85rem; border-radius: 2px;
  cursor: pointer;
}
.nav-menu-btn:hover, .nav-menu[aria-expanded="true"] .nav-menu-btn { color: var(--text); background: var(--raised); }
.nav-menu-panel {
  position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 11rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); padding: 0.35rem;
}
.nav-menu-panel a {
  color: var(--text-2); text-decoration: none; font-size: var(--s-0);
  padding: 0.5rem 0.65rem; border-radius: 3px; white-space: nowrap;
}
.nav-menu-panel a:hover { color: var(--text); background: var(--raised); }
.nav-menu-panel a.here { color: var(--brand); background: var(--brand-glow); }
.nav-menu-sep { height: 1px; background: var(--line); margin: 0.3rem 0.2rem; }



/* --- layout -------------------------------------------------------------- */

.wrap { max-width: 81rem; margin: 0 auto; padding: 2.25rem 1.75rem 5rem; }
.narrow { max-width: 25rem; padding-top: 4rem; }

h1 {
  font-family: Syne, Inter, sans-serif;
  font-size: var(--s-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}

h2 {
  font-family: Syne, Inter, sans-serif;
  font-size: var(--s-2);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
}

.sub { color: var(--text-2); font-size: var(--s-0); margin: 0 0 1.5rem; }
.sub a { color: var(--text-2); }
.sub a:hover { color: var(--brand); }

.panel { background: var(--surface); border: 1px solid var(--line); padding: 1.375rem; }

.flash {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  padding: 0.8rem 1rem;
  margin-bottom: 1.25rem;
  font-size: var(--s-0);
}

.flash input { margin-top: 0.6rem; margin-bottom: 0; }

/* --- sign-in ------------------------------------------------------------- */

.signin { text-align: left; }
.signin img { height: 54px; width: auto; display: block; margin-bottom: 1.1rem; }
.signin .wordmark { font-size: 1.5rem; margin-bottom: 0.35rem; }

.signin-tag {
  font-family: Syne, Inter, sans-serif;
  font-size: var(--s-2);
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
}

/* --- forms --------------------------------------------------------------- */

label { display: block; font-size: var(--s-0); color: var(--text-2); margin-bottom: 0.3rem; }

input[type="text"], input[type="time"], input[type="datetime-local"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
input[type="file"], textarea, select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  background: var(--raised);
  font: inherit;
  color: var(--text);
  margin-bottom: 1rem;
  border-radius: 2px;
}

input::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); background: var(--raised-2); }
input[type="file"] { padding: 0.45rem; color: var(--text-2); }
input[type="file"]::file-selector-button {
  background: var(--raised-2); color: var(--text); border: 1px solid var(--line);
  padding: 0.3rem 0.7rem; margin-right: 0.7rem; border-radius: 2px; cursor: pointer;
  font: inherit; font-size: var(--s-0);
}

button, .btn {
  background: var(--raised-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0.55rem 1.2rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 2px;
}

button:hover, .btn:hover { background: var(--raised); border-color: var(--text-3); }

.btn-brand { background: var(--brand); border-color: var(--brand); color: #06232e; font-weight: 600; }
.btn-brand:hover { background: #38bced; border-color: #38bced; color: #06232e; }

.btn-quiet {
  background: transparent;
  color: var(--text-2);
  border-color: var(--line);
  padding: 0.3rem 0.6rem;
  font-size: var(--s-0);
}

.btn-quiet:hover { background: var(--raised); color: var(--text); }

.inline-form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form > div { flex: 1 1 16rem; }
.inline-form input, .inline-form select { margin-bottom: 0; }
.inline-form .tight { flex: 0 0 auto; }

/* --- health rail --------------------------------------------------------- */

.rail { background: var(--surface); border: 1px solid var(--line); padding: 1.25rem 1.375rem 1.125rem; margin-bottom: 1.25rem; }

.rail-figures { display: flex; gap: 2.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rail-figures div { line-height: 1.1; }

.rail-figures .n {
  font-family: Syne, Inter, sans-serif;
  font-size: var(--s-4);
  font-weight: 700;
  letter-spacing: -0.03em;
  display: block;
}

.rail-figures .k { font-size: var(--s-0); color: var(--text-2); }
.rail-figures .n-high { color: var(--high); }
.rail-figures .n-low { color: var(--low); }

.ticks { display: flex; align-items: flex-end; gap: 1px; height: 34px; }
.tick { flex: 1 1 auto; min-width: 1px; background: var(--raised-2); height: 26%; }
.tick-high { background: var(--high); }
.tick-low { background: var(--low); }
.tick-meter, .tick-data { background: var(--text-3); }

.rail-caption { font-size: var(--s-00); color: var(--text-3); margin: 0.6rem 0 0; }

/* --- bands --------------------------------------------------------------- */

.bands { display: flex; border: 1px solid var(--line); background: var(--surface); margin-bottom: 1.25rem; overflow-x: auto; max-width: 100%; }

.bands a {
  padding: 0.75rem 1.3rem;
  text-decoration: none;
  color: var(--text-2);
  border-right: 1px solid var(--line);
  white-space: nowrap;
  font-size: var(--s-0);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.bands a:last-child { border-right: 0; }
.bands a:hover { background: var(--raised); color: var(--text); }
.bands a.on { background: var(--raised-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }
.bands a .n { font-weight: 600; font-size: var(--s-1); color: var(--text); }

/* --- queue --------------------------------------------------------------- */

.queue { background: var(--surface); border: 1px solid var(--line); }

.entry {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 10rem 7.5rem 8rem;
  gap: 1.25rem;
  padding: 1.05rem 1.375rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}

.entry:last-child { border-bottom: 0; }
.entry:hover { background: var(--raised); }

.entry-high { box-shadow: inset 3px 0 0 var(--high); }
.entry-low { box-shadow: inset 3px 0 0 var(--low); }
.entry-meter, .entry-data { box-shadow: inset 3px 0 0 var(--text-3); }

.score { font-family: Syne, Inter, sans-serif; font-size: var(--s-3); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.score small { display: block; font-family: Inter, sans-serif; font-size: var(--s-00); font-weight: 400; color: var(--text-3); letter-spacing: 0; margin-top: 0.2rem; }
.entry-high .score { color: var(--high); }
.entry-low .score { color: var(--low); }

.who a { font-weight: 600; color: var(--text); text-decoration: none; font-size: var(--s-2); letter-spacing: -0.01em; }
.who a:hover { color: var(--brand); }
.who .addr { color: var(--text-2); font-size: var(--s-0); }

.why { margin: 0.45rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.why li { font-size: var(--s-00); color: var(--text-2); background: var(--raised-2); padding: 0.15rem 0.45rem; border: 1px solid var(--line); }
.entry-high .why li.key { background: var(--high-tint); border-color: var(--high-edge); color: var(--high); font-weight: 500; }
.entry-low .why li.key { background: var(--low-tint); border-color: var(--low-edge); color: var(--low); font-weight: 500; }

.reading { text-align: right; }
.reading .units { font-family: Syne, Inter, sans-serif; font-size: var(--s-3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.reading .meta { font-size: var(--s-00); color: var(--text-2); }
.reading .vs { font-size: var(--s-00); color: var(--text-3); margin-top: 0.2rem; }

.state select { font-size: var(--s-00); padding: 0.3rem; margin-bottom: 0.3rem; }
.state button { width: 100%; }

.done { opacity: 0.4; }

/* --- sparkline ----------------------------------------------------------- */

.spark { display: block; width: 100%; height: 38px; }
.spark-line { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.spark-last { stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.spark-ref { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: 0.6; }
.spark-fill { opacity: 0.16; }

.spark-high .spark-line, .spark-high .spark-last { stroke: var(--high); }
.spark-high .spark-dot { fill: var(--high); }
.spark-high .spark-fill { fill: var(--high); }
.spark-low .spark-line, .spark-low .spark-last { stroke: var(--low); }
.spark-low .spark-dot { fill: var(--low); }
.spark-low .spark-fill { fill: var(--low); }

.spark-big { height: 190px; border: 1px solid var(--line); background: var(--surface); padding: 0.5rem; }
.spark-big .spark { height: 174px; }

/* --- tables -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
th, td { text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line-soft); font-size: var(--s-0); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--raised); }
th { font-weight: 600; color: var(--text-2); background: var(--raised); border-bottom-color: var(--line); }
td.num, th.num { text-align: right; }

tr.flag-register_reset td, tr.flag-new_register td, tr.flag-removed_meter td { background: var(--raised); }

.empty { background: var(--surface); border: 1px solid var(--line); padding: 3.5rem 1.5rem; text-align: center; color: var(--text-2); }
.empty img { height: 48px; width: auto; opacity: 0.75; margin-bottom: 1rem; }

.stack { display: flex; gap: 0.4rem; }

@media (max-width: 56rem) {
  .entry { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.75rem 1rem; }
  .entry .sparkcell, .entry .state, .entry .reading { grid-column: 2; }
  .reading { text-align: left; }
  .state select, .state button { width: auto; }
  .tenant { margin-left: 0; padding-left: 0; border-left: 0; }
  .tenant-wrap { margin-left: 0; padding-left: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* --- theme toggle -------------------------------------------------------- */

.theme-toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 0.35rem 0.6rem;
  margin-left: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--s-00);
  line-height: 1;
}

.masthead .theme-toggle { border-color: var(--line); color: var(--text-2); background: transparent; }
.masthead .theme-toggle:hover { background: var(--raised); color: var(--text); border-color: var(--text-3); }
.theme-toggle svg { display: block; }
.theme-toggle .lbl-dark { display: none; }
html[data-theme="light"] .theme-toggle .lbl-dark { display: inline; }
html[data-theme="light"] .theme-toggle .lbl-light { display: none; }

/* --- review box ---------------------------------------------------------- */

.entry { grid-template-columns: 3.5rem minmax(0, 1fr) 10rem 8rem; }

.review-box {
  grid-column: 1 / -1;
  display: grid;
  /* The third column holds the ID boxes and the assigned-to picker. A
     fixed width truncated longer names, so let it size to its content
     within a sensible range. */
  grid-template-columns: 11rem minmax(0, 1fr) minmax(13rem, max-content) auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
}

.review-box label { font-size: var(--s-00); margin-bottom: 0.25rem; color: var(--text-3); }
.review-box select, .review-box input, .review-box textarea { margin-bottom: 0; font-size: var(--s-0); padding: 0.4rem 0.5rem; }
/* The browser reports the text as fitting; the native arrow is drawn
   over the last character. Reserve room for it on the right and let a
   genuinely long name end in an ellipsis rather than mid-letter. */
.review-box select[name="assigned_to"] { width: 100%; }
.review-box textarea { min-height: 2.6rem; resize: vertical; line-height: 1.4; }
.rb-save { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.rb-when { font-size: var(--s-00); color: var(--text-3); white-space: nowrap; }

/* A reviewed row keeps its band colour: what it was is still true, it has
   just been handled. The mark carries "done" instead of fading the row. */
.entry.reviewed { opacity: 1; }
.done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 999px; margin-left: 0.4rem;
  font-size: var(--s-00); line-height: 1; vertical-align: middle;
}
.done-work { background: var(--low-tint); color: var(--low); border: 1px solid var(--low-edge); }
.done-none { background: var(--hover, #8882); color: var(--text-3); }

@media (max-width: 56rem) {
  .review-box { grid-template-columns: 1fr; }
}

/* --- company groups in the admin console --------------------------------- */

.org-group { border: 1px solid var(--line); background: var(--surface); margin-bottom: 0.6rem; }
.org-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  background: var(--raised);
  user-select: none;
}
.org-group > summary::-webkit-details-marker { display: none; }
.org-group > summary::before {
  content: "▸";
  color: var(--text-3);
  font-size: 0.75rem;
  transition: none;
}
.org-group[open] > summary::before { content: "▾"; }
.org-group > summary:hover { background: var(--raised-2); }
.og-name { font-weight: 600; letter-spacing: -0.01em; }
.og-count { font-size: var(--s-00); color: var(--text-3); margin-left: auto; }
.org-group table { border: 0; border-top: 1px solid var(--line); }

/* --- month blocks inside a year ------------------------------------------ */

.month-block { border-top: 1px solid var(--line); }
.month-label {
  font-size: var(--s-00);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.7rem 1rem 0.4rem;
}
summary.month-label {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  user-select: none;
  padding-bottom: 0.7rem;
}
summary.month-label::-webkit-details-marker { display: none; }
summary.month-label::before { content: "▸"; font-size: 0.7rem; }
.month-block[open] > summary.month-label::before { content: "▾"; }
summary.month-label:hover { background: var(--raised-2); }
.month-count { margin-left: auto; text-transform: none; letter-spacing: 0; }
.month-block table { border: 0; }
.month-block th { background: transparent; border-bottom: 1px solid var(--line-soft); }
a.btn-quiet { text-decoration: none; line-height: 1.35; }

/* --- activity log -------------------------------------------------------- */

td.dim { color: var(--text-3); font-size: var(--s-00); }
tr.row-alert td:first-child { box-shadow: inset 3px 0 0 var(--high); }

/* --- register strip ------------------------------------------------------- */
/* One mark per register, account order. Flagged marks stand tall off a thin
   baseline so the eye reads position and density, not a wall of ticks.        */

.strip {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 46px;
  padding-bottom: 7px;
}

.strip-base {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 1px;
  background: var(--line);
}

.mk { position: relative; flex: 1 1 auto; min-width: 1px; border-radius: 1px 1px 0 0; }

.mk-clear {
  height: 5px;
  background: var(--text-3);
  opacity: 0.3;
}

.mk-high, .mk-low, .mk-meter, .mk-data { height: 100%; }
.mk-high { background: linear-gradient(to top, var(--high) 0%, var(--high) 55%, transparent 100%); }
.mk-low { background: linear-gradient(to top, var(--low) 0%, var(--low) 55%, transparent 100%); }
.mk-meter, .mk-data {
  height: 60%;
  background: linear-gradient(to top, var(--text-3) 0%, var(--text-3) 60%, transparent 100%);
}

.mk-high::after, .mk-low::after, .mk-meter::after, .mk-data::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: inherit;
}

.mk:hover { outline: 1px solid var(--text); outline-offset: 1px; }

/* --- baseline prompt for a company with no history yet -------------------- */

.baseline-note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.baseline-note .bn-title {
  font-family: Syne, Inter, sans-serif;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.baseline-note p { margin: 0; color: var(--text-2); font-size: var(--s-0); max-width: 62ch; }

/* =========================================================================
   Phones

   Data tables become stacked cards -- each row a block, each cell prefixed
   with its column name from data-l. A meter tech is reading this in a truck,
   not pinching and panning a six-column grid.
   ========================================================================= */

@media (max-width: 40rem) {
  :root { --s-4: 1.75rem; }

  .wrap { padding: 1.25rem 0.9rem 4rem; }
  .narrow { padding-top: 2rem; }

  .masthead { padding: 0.7rem 0.9rem; min-height: 0; gap: 0.6rem; align-items: flex-start; }
  .mark img { height: 26px; }
  .wordmark { font-size: 0.95rem; }
  .tenant-wrap { margin: 0; padding: 0; border: 0; width: 100%; }
  .tenant { margin: 0; padding: 0; border: 0; width: 100%; font-size: var(--s-00); }
  .masthead nav {
    margin: 0.35rem -0.25rem 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .masthead nav::-webkit-scrollbar { display: none; }
  .masthead nav a { padding: 0.4rem 0.6rem; white-space: nowrap; }
  .theme-toggle { margin-left: 0.2rem; }

  .rail, .panel, .empty { padding: 1rem; }
  .rail-figures { gap: 1.25rem 1.75rem; }
  .strip { height: 38px; }

  .bands { margin-bottom: 1rem; }
  .bands a { padding: 0.6rem 0.9rem; }

  .entry { padding: 0.9rem 1rem; }
  .who a { font-size: var(--s-1); }
  .reading .units { font-size: var(--s-2); }
  .review-box { padding: 0.75rem; gap: 0.6rem; }

  .inline-form > div { flex: 1 1 100%; }
  .inline-form button { width: 100%; }

  /* stacked table rows */
  table.stacky, table.stacky thead, table.stacky tbody,
  table.stacky tr, table.stacky td { display: block; width: 100%; }
  table.stacky { border: 0; background: transparent; }
  table.stacky thead { display: none; }
  table.stacky tr {
    background: var(--surface);
    border: 1px solid var(--line);
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.75rem 0.6rem;
  }
  table.stacky tr:hover { background: var(--surface); }
  table.stacky td { border: 0; padding: 0.3rem 0; text-align: left; }
  table.stacky td[data-l]::before {
    content: attr(data-l);
    display: block;
    font-size: var(--s-00);
    color: var(--text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  table.stacky td.num { text-align: left; }
  table.stacky .stack { flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
  table.stacky .stack button, table.stacky .stack a.btn-quiet { flex: 1 1 auto; text-align: center; }

  .org-group > summary { padding: 0.75rem 0.8rem; }
  .month-label { padding: 0.6rem 0.8rem 0.3rem; }
  .month-block table.stacky tr { margin: 0 0.7rem 0.6rem; width: auto; }
}

/* comfortable tap targets on any touch device */
@media (pointer: coarse) {
  .masthead nav a, .bands a { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  button, .btn, select, input { min-height: 2.4rem; }
  .btn-quiet { min-height: 2.1rem; }
}

/* --- scoring overlay ------------------------------------------------------ */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 11, 9, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1.5rem;
}

html[data-theme="light"] .scrim { background: rgba(20, 20, 15, 0.55); }

.scrim-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  padding: 2rem 2.25rem;
  text-align: center;
  max-width: 24rem;
  width: 100%;
}

.scrim-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 1.1rem;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: scrim-spin 0.9s linear infinite;
}

@keyframes scrim-spin { to { transform: rotate(360deg); } }

.scrim-title {
  font-family: Syne, Inter, sans-serif;
  font-size: var(--s-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.scrim-note { margin: 0.4rem 0 0; font-size: var(--s-0); color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .scrim-spinner { animation: none; border-top-color: var(--brand); }
}

.scrim-bar {
  /* Tall enough to carry its own percentage. At four pixels the number had
     nowhere to sit. */
  height: 1.25rem;
  border-radius: 4px;
  background: var(--raised-2);
  margin: 1.1rem 0 0.25rem;
  overflow: hidden;
}

.scrim-bar-fill {
  height: 100%; width: 0; background: var(--brand);
  transition: width 0.2s linear;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .4rem; box-sizing: border-box;
  font-size: var(--s-00); font-weight: 600; color: var(--bg);
  white-space: nowrap; overflow: hidden;
}

.scrim-bar-fill.indeterminate,
.scrim-bar.indeterminate .scrim-bar-fill {
  width: 40%;
  animation: scrim-slide 1.4s ease-in-out infinite;
}

.scrim-bar.indeterminate .scrim-bar-fill { width: 40%; }

@keyframes scrim-slide {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}

.scrim-actions { margin-top: 1.1rem; }
.scrim-actions button { width: 100%; }
.scrim-fine { margin: 0.9rem 0 0; font-size: var(--s-00); color: var(--text-3); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .scrim-bar.indeterminate .scrim-bar-fill { animation: none; width: 100%; margin: 0; }
}

.scrim-actions { display: flex; gap: 0.5rem; }
.scrim-actions button { flex: 1 1 auto; width: auto; }


.empty-title {
  font-family: Syne, Inter, sans-serif;
  font-size: var(--s-2);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.empty p { max-width: 52ch; margin: 0 auto; }

/* --- review box on small screens ------------------------------------------
   Stacking all four fields made a tall column you had to scroll past for
   every account. The short fields pair up instead; notes and save span the
   width. Still nothing to scroll sideways for.                              */

@media (max-width: 56rem) {
  .review-box {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.7rem;
  }
  .review-box .rb-notes { grid-column: 1 / -1; }
  .review-box .rb-save { grid-column: 1 / -1; }
  .rb-save { flex-direction: row; align-items: center; justify-content: space-between; }
  .rb-save button { flex: 0 0 auto; }
}

@media (max-width: 26rem) {
  .review-box { grid-template-columns: 1fr; }
}

/* --- queue filter --------------------------------------------------------- */

.filterbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.filterbar input[type="search"] {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  -webkit-appearance: none;
  appearance: none;
}

.filterbar input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: var(--text-3);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}
.filter-count { font-size: var(--s-0); color: var(--text-3); white-space: nowrap; }

/* --- the three numbers a reader actually wants ---------------------------- */
/* Previous, current, and what was used between them. A per-day rate is exact
   but nobody reads meters in per-day, so the year-ago figure is shown as
   units over a comparable cycle instead.                                    */

.reads {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.05rem 0.5rem;
  margin: 0.45rem 0 0;
  justify-content: end;
  font-size: var(--s-00);
}
.reads dt { color: var(--text-3); }
.reads dd { margin: 0; color: var(--text-2); font-weight: 600; text-align: right; }

@media (max-width: 56rem) {
  .reads { justify-content: start; }
  .reads dd { text-align: left; }
}

.who .regid { color: var(--text-3); font-size: var(--s-00); margin-top: 0.1rem; }

.band-note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-3);
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.9rem;
  font-size: var(--s-0);
  color: var(--text-2);
  max-width: 78ch;
}

/* --- queue rows on a phone ------------------------------------------------
   One column, edge to edge. The two-column grid left an empty gutter down the
   left of every row and squeezed the content into two thirds of a screen that
   was already narrow.                                                       */

@media (max-width: 40rem) {
  .wrap { padding-left: 0; padding-right: 0; }
  .wrap > h1, .wrap > .sub, .wrap > h2, .wrap > .flash { padding-left: 0.9rem; padding-right: 0.9rem; }

  .queue, .rail, .panel, .bands, .empty, .band-note, .filterbar {
    border-left: 0;
    border-right: 0;
  }
  .band-note, .filterbar { margin-left: 0.9rem; margin-right: 0.9rem; }

  .entry {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 1rem 0.9rem;
  }

  .entry .score {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: var(--s-2);
  }
  .entry .score small { display: inline; margin: 0; }

  .entry .sparkcell,
  .entry .reading,
  .entry .review-box { grid-column: 1; }

  .reading {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.7rem;
  }
  .reading .units { font-size: var(--s-2); }
  .reading .meta { margin: 0; }

  .reads {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 0 0.9rem;
    flex: 1 1 100%;
    margin-top: 0.3rem;
  }
  .reads dt { grid-row: 1; }
  .reads dd { grid-row: 2; text-align: left; }

  .spark { height: 44px; }
  .review-box { margin-left: 0; margin-right: 0; }
}

/* --- worklist: who is doing what ----------------------------------------- */

.worklist { margin-bottom: 0.9rem; }

.who-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.who-tabs a {
  font-size: var(--s-00);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  text-decoration: none;
  border-radius: 2px;
}
.who-tabs a:hover { background: var(--raised); color: var(--text); }
.who-tabs a.on { background: var(--raised-2); color: var(--text); border-color: var(--text-3); }
.who-tabs .n { font-weight: 600; color: var(--text); margin-left: 0.2rem; }

.bulkbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--s-0);
  color: var(--text-2);
}
.bulkbar select { width: auto; margin: 0; font-size: var(--s-0); padding: 0.3rem 0.4rem; }

.assign-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-size: var(--s-00);
}
.assign-row label { margin: 0; color: var(--text-3); }
.assign-row select { width: auto; margin: 0; font-size: var(--s-00); padding: 0.25rem 0.35rem; }

.assigned-to { margin-top: 0.5rem; font-size: var(--s-00); color: var(--text-2); }

/* Directions is a field action, not decoration -- it gets the brand colour
   because tapping it is the one thing that takes you out of the app. */
.dirs {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.5rem;
  font-size: var(--s-00);
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.dirs:hover { text-decoration: underline; }

@media (pointer: coarse) {
  .dirs { padding: 0.3rem 0.5rem; margin-left: 0.35rem; border: 1px solid var(--line); border-radius: 2px; }
}

/* --- assignment and directions -------------------------------------------- */

.assignbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
}
.ab-label { font-size: var(--s-0); color: var(--text-2); }
.assignbar select { width: auto; margin: 0; font-size: var(--s-0); padding: 0.35rem 0.5rem; }

/* Big enough to hit with a thumb while holding a flashlight. */
.dirbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  font-size: var(--s-00);
  color: var(--brand);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  vertical-align: middle;
  white-space: nowrap;
}
.dirbtn:hover { background: var(--raised-2); border-color: var(--brand); }

.rb-static { font-size: var(--s-0); color: var(--text-2); padding: 0.4rem 0; }

/* The fourth column holds the assigned-to picker; a fixed 9rem cut
   longer names off, so let it grow to fit one. */
/* Fixed columns were written when the box had five known fields. The ID
   fields now appear and disappear with the action picked, so the layout is
   auto-fit further down; a fixed first column squeezed the action button
   until it sat on top of Notes. */

@media (max-width: 56rem) {
  .review-box { grid-template-columns: 1fr 1fr; }
  /* Half a narrow box is not enough for a full name. */
  .review-box .rb-assign { grid-column: 1 / -1; }
  .assignbar { margin-left: 0.9rem; margin-right: 0.9rem; }
}

@media (max-width: 40rem) {
  .dirbtn { padding: 0.35rem 0.6rem; font-size: var(--s-0); margin-left: 0; margin-top: 0.35rem; }
  .addr .dirbtn { display: inline-flex; }
}

/* --- directions menu ------------------------------------------------------ */
/* Sits to the right of the address and offers a choice of app, because
   guessing wrong means retyping an address one-handed in a truck.           */

.who .addr { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

details.dirs { position: relative; margin-left: auto; }
details.dirs > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  font-size: var(--s-00);
  color: var(--brand);
  border: 1px solid var(--line);
  border-radius: 2px;
  white-space: nowrap;
  user-select: none;
}
details.dirs > summary::-webkit-details-marker { display: none; }
details.dirs > summary:hover { background: var(--raised-2); border-color: var(--brand); }

.dirs-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 3px);
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 9.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.dirs-menu a {
  display: block;
  padding: 0.5rem 0.7rem;
  font-size: var(--s-0);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.dirs-menu a:last-child { border-bottom: 0; }
.dirs-menu a:hover { background: var(--raised-2); color: var(--brand); }

.review-box.readonly { background: transparent; border-style: dashed; }

.checkline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--s-0);
  color: var(--text-2);
  margin-bottom: 1rem;
}
.checkline input { width: auto; margin: 0; }

@media (max-width: 40rem) {
  details.dirs { margin-left: 0; }
  details.dirs > summary { padding: 0.4rem 0.7rem; font-size: var(--s-0); }
  /* Anchoring the left edge to a button near the right of the row pushed
     the menu off-screen and dragged the page sideways. Keep it right-aligned
     and let it grow inward instead. */
  .dirs-menu { right: 0; left: auto; max-width: calc(100vw - 2rem); }
}

/* --- names, and a strip you can navigate with ---------------------------- */

.namebox { display: flex; gap: 0.3rem; }
.namebox input { margin: 0; padding: 0.3rem 0.45rem; font-size: var(--s-0); min-width: 7rem; }

a.mk { cursor: pointer; text-decoration: none; }
a.mk:hover { outline: 2px solid var(--text); outline-offset: 1px; }

/* the row you jumped to, briefly obvious */
.entry:target { box-shadow: inset 3px 0 0 var(--brand), 0 0 0 2px var(--brand-glow); }
.entry:target .who a { color: var(--brand); }

/* An element with the hidden attribute must stay hidden. Any rule that sets
   display (like .scrim's flex) silently beats the browser's default rule for
   [hidden], which leaves dialogs stuck on screen with no way to dismiss them. */
[hidden] { display: none !important; }

/* --- site footer ---------------------------------------------------------
   Present on every page including sign-in: someone locked out by a lost
   authenticator needs the support number exactly when they cannot get in. */
.sitefoot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem 2rem;
  border-top: 1px solid var(--line-soft);
  margin-top: 2rem;
  font-size: var(--s-00);
  color: var(--text-2);
}
.sitefoot a { color: var(--text-2); text-decoration: none; }
.sitefoot a:hover { color: var(--brand); text-decoration: underline; }

/* Auto-fit tracks moved Notes out from beside the action field, because
   span 2 of an unknown number of columns is not the second column. Back to
   named tracks: action, notes, assigned-to. The ID fields wrap onto their own
   row underneath, which is what auto-fit was brought in to solve. */
.review-box {
  grid-template-columns: 11rem minmax(12rem, 1fr) minmax(11rem, 14rem);
  align-items: start;
}
.review-box .rb-reg { grid-column: auto; }
.review-box .rb-save { grid-column: 1 / -1; }
.review-box .rb-actions { min-width: 10rem; }
.ms-summary { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.ms-chip {
  font-size: var(--s-00); padding: 0.1rem 0.4rem; border-radius: 999px;
  background: var(--hover, #8882); color: var(--text-2); white-space: nowrap;
}
@media (max-width: 700px) {
  .review-box { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  .review-box .rb-notes,
  .review-box .rb-assign { grid-column: 1 / -1; }
}

/* Account sections collapse so the page is a short menu rather than every
   form at once. A section mid-setup stays open on its own. */
.acct-section > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: .6rem; padding: .2rem 0;
}
.acct-section > summary::-webkit-details-marker { display: none; }
.acct-section > summary h2 { margin: 0; display: inline; }
.acct-section > summary::after { content: "▸"; margin-left: auto; opacity: .55; }
.acct-section[open] > summary::after { content: "▾"; }
.acct-section[open] > summary { margin-bottom: .9rem; }

/* Account sections collapse so the page is a short menu rather than every
   form at once. A section mid-setup stays open on its own. */
.acct-section > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: .6rem; padding: .2rem 0;
}
.acct-section > summary::-webkit-details-marker { display: none; }
.acct-section > summary h2 { margin: 0; display: inline; }
.acct-section > summary::after { content: "▸"; margin-left: auto; opacity: .55; }
.acct-section[open] > summary::after { content: "▾"; }
.acct-section[open] > summary { margin-bottom: .9rem; }

/* Signed out there is no masthead to hold the toggle, so it floats. The
   choice is remembered in this browser and applied before first paint. */
.theme-float { position: fixed; top: .9rem; right: 1rem; z-index: 50; }

/* The preset in force, so nobody has to open Advanced to see where they are. */
.preset-on {
  border-color: var(--brand); color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* The preset in force, so nobody has to open Advanced to see where they are. */
.preset-on {
  border-color: var(--brand); color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* A district with an invoice unpaid past the grace window. Late is normal in
   municipal AP; this is for the ones that have stopped moving. */
.badge-behind {
  display: inline-block; margin-left: .45rem; padding: .05rem .4rem;
  border-radius: 999px; font-size: var(--s-00); font-weight: 500;
  background: var(--high-tint); color: var(--high); border: 1px solid var(--high-edge);
}

/* Confirmations match the app rather than the operating system. */
.cfm-scrim {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0,0,0,.55);
}
.cfm-box {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.1rem 1.2rem; max-width: 28rem; width: 100%;
  box-shadow: 0 16px 48px #0006;
}
.cfm-box p { margin: 0 0 1rem; white-space: pre-line; line-height: 1.45; }
.cfm-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.cat-table input[type=text] { width: 100%; max-width: 22rem; }

/* Consumption history inside a queue row. */
.spark-btn { background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.hist-panel { grid-column: 1 / -1; padding: .75rem 0 .25rem; }
.hx-svg { width: 100%; height: auto; max-height: 220px; }
.hx-grid { stroke: var(--line, #8883); stroke-width: 1; }
.hx-axis { fill: var(--text-3); font-size: 11px; }
.hx-bar { fill: var(--text-3); opacity: .55; }
.hx-bar:hover { opacity: .9; }
.hx-now { fill: var(--brand); opacity: .95; }

/* The cycle table scrolls rather than stretching the row to full history. */
.hx-table { max-height: 16rem; overflow-y: auto; margin-top: .25rem; }
.hx-table table { font-size: var(--s-00); border-collapse: separate; border-spacing: 0; }
.hx-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--raised); color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.hx-table tbody td { background: var(--surface); }


/* The action field is a button that opens a panel of checkboxes. Without an
   explicit width it spilled over the Notes field beside it. */
.review-box .rb-actions { min-width: 10rem; }
.js-multi { position: relative; width: 100%; }
.ms-toggle {
  width: 100%; max-width: 100%; box-sizing: border-box;
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; padding: .4rem .5rem; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--s-0); color: var(--text);
  background: var(--raised); border: 1px solid var(--line); border-radius: 6px;
}
.ms-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { opacity: .6; flex: none; }
.ms-panel {
  position: absolute; z-index: 40; left: 0; min-width: 100%; width: max-content;
  max-width: 16rem; top: calc(100% + 4px);
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem; box-shadow: 0 8px 24px #0006;
  max-height: 16rem; overflow: auto;
}
.ms-opt {
  display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.ms-opt:hover { background: var(--raised-2); }
.ms-opt input { flex: none; }
.ms-summary { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.ms-chip {
  font-size: var(--s-00); padding: .1rem .4rem; border-radius: 999px;
  background: var(--raised-2); color: var(--text-2); white-space: nowrap;
}

/* The work form's inline grids collapse to one column on a phone, same as
   every other form in the app. */
@media (max-width: 40rem) {
  #wk-ids, .panel form > div[style*="grid"] { grid-template-columns: 1fr !important; }
  .rb-actions { max-width: none !important; }
}

/* A note with no spaces in it will not wrap on its own, and one long entry
   pushed the whole table, buttons included, off the side of the screen. */
.wk-note {
  max-width: 28rem; overflow-wrap: anywhere; word-break: break-word;
  white-space: normal;
}

/* The percentage rides inside the bar rather than in the status line. */


/* The service-account address is meant to be copied out and pasted into
   Google's share dialog, so it should read as something you can act on. */
.panel a > code { color: var(--brand); text-decoration: underline; }


/* --- run page toolbar ---------------------------------------------------- */
/* The header was one long sentence with the actions buried in it. Facts read
   as text; things you can do read as buttons. */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
           margin:.75rem 0 1.25rem; }
.tb { display:inline-flex; align-items:center; gap:.35rem; font-size:var(--s-0);
      color:var(--text); background:var(--raised); border:1px solid var(--line);
      border-radius:3px; padding:.4rem .7rem; text-decoration:none;
      cursor:pointer; font-family:inherit; }
.tb:hover { border-color:var(--brand); color:var(--brand); }
.tb-quiet { background:transparent; border-color:transparent; color:var(--text-2); }
.tb-quiet:hover { color:var(--brand); border-color:transparent; }
.tb-sep { flex:1 1 auto; }
.tb-menu { position:relative; }
.tb-panel { position:absolute; top:calc(100% + .3rem); left:0; z-index:30;
            display:flex; flex-direction:column; min-width:10rem;
            background:var(--surface); border:1px solid var(--line);
            border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.28); padding:.3rem; }
.tb-panel a { color:var(--text-2); text-decoration:none; font-size:var(--s-0);
              padding:.45rem .6rem; border-radius:3px; white-space:nowrap; }
.tb-panel a:hover { color:var(--text); background:var(--raised); }
@media (max-width: 640px) { .tb-sep { flex-basis:100%; height:0; } }

/* TrueFlow branding */
.masthead .wordmark { font-size: 1.6rem; letter-spacing: -0.01em; }
.signin .wordmark { font-size: 2.4rem; }
@media (max-width: 640px) { .masthead .wordmark { font-size: 1.2rem; } }

/* phone: let the nav wrap so Menu is always reachable, and don't clip its panel */
@media (max-width: 40rem) {
  .masthead nav { overflow: visible !important; flex-wrap: wrap; margin: 0.35rem 0 0 !important; }
  .nav-menu-btn { padding: 0.55rem 0.8rem; min-height: 40px; }
  .nav-menu-panel {
    position: fixed; left: 0.9rem; right: 0.9rem; top: auto;
    margin-top: 0.35rem; max-height: 70vh; overflow-y: auto; z-index: 100;
  }
  .nav-menu-panel a { padding: 0.75rem 0.8rem; }
}

/* announcements from Quorra IT */
.announce { display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  margin: 0 0 1.25rem; padding: 1rem 1.15rem; border: 1px solid var(--line);
  border-left: 5px solid var(--brand); background: var(--surface); border-radius: 4px; }
.announce-warning { border-left-color: #ff6a3d; }
.announce strong { display: block; margin-bottom: 0.2rem; }
.announce-text { white-space: pre-line; }
@media (max-width: 40rem) { .announce { flex-direction: column; align-items: stretch; } }

/* TrueFlow mark */
.tf-mark { height: 34px; width: 34px; margin-right: 0.55rem; vertical-align: middle; flex: none; }
.signin .tf-mark { height: 64px; width: 64px; display: block; margin: 0 0 0.7rem; }
@media (max-width: 40rem) { .masthead .tf-mark { height: 28px; width: 28px; margin-right: 0.4rem; } }

/* logo beside the wordmark */
.masthead .mark > span { display: flex; align-items: center; gap: 0.6rem; }
.masthead .mark .tf-mark { display: block; height: 40px; width: 40px; margin: 0; flex: none; }
@media (max-width: 40rem) { .masthead .mark .tf-mark { height: 30px; width: 30px; } }


/* Type filters under the main tabs */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.5rem 0 1.25rem; }
.chips a { border: 1px solid var(--line); background: var(--surface); color: inherit;
  padding: 0.3rem 0.7rem; font-size: var(--s-0); text-decoration: none; }
.chips a:hover { background: var(--raised); }
.chips a.on { background: var(--raised-2); box-shadow: inset 0 -2px 0 var(--brand); }
.chips a .n { font-weight: 600; margin-left: 0.25rem; }


/* tabs v2 */
.bands { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: visible;
  border-radius: 10px; margin-bottom: 0.75rem; }
.bands a { text-align: center; padding: 0.7rem 0.5rem; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.bands a .n { font-size: var(--s-1); }
.chips { gap: 0.5rem; margin: 0 0 1.25rem; }
.chips a { border-radius: 999px; padding: 0.4rem 0.85rem; display: inline-flex;
  align-items: center; gap: 0.45rem; min-height: 36px; }
.chips a .n { margin-left: 0.1rem; }
.chips a.zero { opacity: 0.45; }
.chips a.on { opacity: 1; background: var(--raised-2); border-color: var(--brand); box-shadow: none; }
.chips .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); display: inline-block; }
.chips .chip-high .dot { background: var(--high); }
.chips .chip-low .dot { background: var(--low); }
.chips .chip-data .dot { background: #e5484d; }
.chips .chip-meter .dot, .chips .chip-register .dot { background: var(--brand); }
@media (max-width: 640px) {
  .bands a { padding: 0.8rem 0.3rem; font-size: var(--s-0); }
  .chips { gap: 0.4rem; }
  .chips a { padding: 0.45rem 0.7rem; }
}


/* strip fit */
.strip { overflow: hidden; max-width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .strip { gap: 0; }
  .mk { min-width: 0; }
}

/* TrueFlow mark on the sign-in pages: light drop on the dark theme, dark drop on the light theme */
.signin .tf-on-light { display: none; }
html[data-theme="light"] .signin .tf-on-dark { display: none; }
html[data-theme="light"] .signin .tf-on-light { display: block; }

/* Browser autofill paints fields pale blue, which hides light text and icons in the dark theme.
   Keep autofilled fields in the site colours. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--raised) inset;
  box-shadow: 0 0 0 1000px var(--raised) inset;
  transition: background-color 600000s 0s;
}
html[data-theme="light"] input:-webkit-autofill, html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f7f9fa inset;
  box-shadow: 0 0 0 1000px #f7f9fa inset;
}

/* Pages shown inside the mobile app: the app has its own top bar. */
.in-app .masthead, .in-app .sitefoot, .in-app .theme-float { display: none !important; }

.pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem;
        font-weight: 600; border: 1px solid var(--line); white-space: nowrap; }
.pill.ok { color: #1f8a4c; border-color: #1f8a4c; }
.pill.warn { color: #b9770e; border-color: #b9770e; }
.pill.usa { color: #fff; background: #c0392b; border-color: #c0392b; font-weight: 600; }
.pill.bad { color: #c0392b; border-color: #c0392b; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem 0.8rem; }
.grid-form label { display: block; font-size: 0.85rem; }
.grid-form input, .grid-form select { width: 100%; }
.grid-form .wide { grid-column: 1 / -1; }

.pill.muted { color: var(--muted, #6b7c85); border-color: var(--line); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.stat { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 0.75rem 0.9rem;
        display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; line-height: 1.3; }
.stat .big { font-size: 1.8rem; font-weight: 700; min-width: 3.2rem; }
.stat small { color: var(--muted, #6b7c85); }
.stat .bar { flex-basis: 100%; height: 6px; background: var(--raised-2, #e6edf0); border-radius: 3px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--brand, #1789b3); }
table.sheet { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; }
table.sheet th, table.sheet td { border-bottom: 1px solid var(--line); padding: 0.3rem 0.5rem; text-align: left; }
table.sheet thead tr:not(.title) th { background: #0B2A3A; color: #fff; }
table.sheet tr.title th { background: none; color: inherit; font-size: 1.1rem; border-bottom: 2px solid #0B2A3A;
                          display: table-cell; }
table.sheet tr.title th span { float: right; font-size: 0.85rem; font-weight: 500; color: #1789b3; }
table.sheet td.c { text-align: center; }
table.sheet td.blank { min-width: 4.5rem; border-left: 1px solid var(--line); }
table.sheet tr.flag td { background: #fbe3e0; }
table.sheet tr.flag td.c { color: #b03a2e; font-weight: 700; }
@media print {
  .masthead, header, nav, .no-print, .flash, footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  table.sheet { font-size: 10pt; page-break-inside: auto; }
  table.sheet thead { display: table-header-group; }
  table.sheet tr { page-break-inside: avoid; }
  table.sheet.letter { page-break-before: always; }
  table.sheet.letter:first-of-type { page-break-before: auto; }
  table.sheet thead tr:not(.title) th { background: #0B2A3A !important; color: #fff !important;
                                         -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.sheet tr.flag td { background: #fbe3e0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stat { break-inside: avoid; }
}

/* Compliance home: updates written like a blog */
.posts { display: grid; gap: 0.9rem; max-width: 46rem; }
.post { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 0.9rem 1.1rem; }
.post h2 { margin: 0.35rem 0 0.4rem; font-size: 1.2rem; }
.post h2 a { color: inherit; text-decoration: none; }
.post h2 a:hover { color: var(--brand); }
.post p { margin: 0 0 0.6rem; line-height: 1.5; }
.post-meta { display: flex; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.post-full { max-width: 46rem; }
.post-full h1 { margin-top: 0.5rem; }
.post-source { font-size: 0.85rem; }

/* Texting */
.tbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .55rem 1rem; font-size: .92rem; border-bottom: 1px solid var(--line); }
.tbar-actions { display: inline-flex; gap: .4rem; align-items: center; }
.tbar-yellow { background: #fff3cd; color: #5c4400; }
.tbar-blue { background: #dcecf7; color: #0b3a57; }
.tbar-red { background: #fbe3e0; color: #7a1d12; }
.tbar-green { background: #dff3e6; color: #11502a; }
.tbar .btn { color: inherit; border-color: currentColor; background: transparent; }
.tbar-x { background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.tnote { border-left: 4px solid var(--line); background: var(--surface); padding: .55rem .8rem; margin: 0 0 1rem; border-radius: 4px; }
.tnote-test, .tnote-info { border-left-color: #1789b3; }
.tnote-lock { border-left-color: #c0392b; }
.tnote-ok { border-left-color: #1f8a4c; }
.tsteps { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: 0 0 1.25rem; }
.tsteps li { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-2); }
.tsteps li a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.tsteps li.now { color: inherit; font-weight: 600; }
.tdot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--line); display: inline-flex;
  align-items: center; justify-content: center; font-size: .8rem; background: var(--surface); }
.tsteps li.done .tdot { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.tsteps li.now .tdot { border-color: var(--brand); }
.tstep { border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem 1rem; margin: 0 0 1rem; max-width: 46rem; }
.tstep legend { font-weight: 600; padding: 0 .4rem; }
.tform { max-width: 46rem; }
.tform label { display: block; margin: 0 0 .7rem; font-size: .9rem; }
.tform input:not([type=checkbox]):not([type=radio]), .tform select, .tform textarea { width: 100%; box-sizing: border-box; }
.tform.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .3rem .8rem; }
.topt { display: flex !important; gap: .6rem; align-items: flex-start; }
.topt input[type=text], .topt input[type=datetime-local], .topt input:not([type=checkbox]):not([type=radio]) { width: auto !important; }
.tbar-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.tbar-form input[type=search], .tbar-form input[name=name] { min-width: 16rem; }
.tadd { margin: 0 0 1rem; }
.tadd summary { cursor: pointer; font-weight: 600; margin-bottom: .6rem; }
.tbulk { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.tcount { color: var(--text-2); font-size: .85rem; margin: -.3rem 0 .5rem; }
.ttags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 .5rem; font-size: .85rem; }
.tagbtn { font-family: monospace; font-size: .8rem; padding: .15rem .5rem; }
.tpreview { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: .5rem; }
.tsample { margin: 0 0 .8rem; }
.tsample small { display: block; margin-bottom: .25rem; }
.tbubble { background: var(--raised, #eef3f5); border-radius: 14px; padding: .6rem .85rem; max-width: 26rem; white-space: pre-wrap; display: inline-block; }
.tthread { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1.25rem; max-width: 40rem; }
.tmsg { display: flex; flex-direction: column; }
.tmsg-in { align-items: flex-start; }
.tmsg-out { align-items: flex-end; }
.tmsg-out .tbubble { background: #1789b3; color: #fff; }
.tbar-form input, .tbar-form select { width: auto; }
.tbar-form input[type="search"] { flex: 1 1 16rem; min-width: 12rem; }
.tscroll { overflow-x: auto; margin: 0 0 1rem; }
.tscroll table.sheet { margin-bottom: 0; min-width: 34rem; }
.tscroll td { white-space: nowrap; }
.tbulk select { width: auto; }
#blockbox[hidden]{display:none}

/* ---- Texting: modern controls, tabs and setup wizard (scoped to .tx) ------ */

/* Account and meter counts sit on the masthead, which stays dark in light mode */

.tx { --tx-r: 10px; --tx-h: 2.5rem; }

/* One height and one baseline for every control, so rows never sit offset */
.tx input[type], .tx input:not([type]), .tx select, .tx textarea {
  border-radius: var(--tx-r); margin: .3rem 0 0; background-color: var(--raised);
  transition: border-color .12s, box-shadow .12s;
}
.tx input[type]:not([type=checkbox]):not([type=radio]):not([type=file]), .tx input:not([type]), .tx select { height: var(--tx-h); padding-top: 0; padding-bottom: 0; }
.tx textarea { padding: .6rem .75rem; }
.tx input:focus, .tx select:focus, .tx textarea:focus { box-shadow: 0 0 0 3px var(--brand-glow); outline: none; }
.tx select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.3rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - .8rem) 52%;
  background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat;
}
.tx input[type=checkbox], .tx input[type=radio] { margin: .2rem 0 0; accent-color: var(--brand); }
.tx button, .tx .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box;
  height: var(--tx-h); padding: 0 1.15rem; border-radius: var(--tx-r); line-height: 1; white-space: nowrap;
  background: var(--raised-2); border: 1px solid var(--line); transition: background .12s, border-color .12s;
}
.tx button:hover, .tx .btn:hover { background: var(--raised); border-color: var(--text-3); }
.tx .btn-brand, .tx button.btn-brand { background: var(--brand); border-color: var(--brand); color: #06232e; }
.tx .btn-brand:hover, .tx button.btn-brand:hover { background: var(--brand); border-color: var(--brand); filter: brightness(1.1); }
.tx button[disabled], .tx button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.tx .tagbtn { height: auto; padding: .15rem .5rem; border-radius: 6px; }
.tx label { margin-bottom: .9rem; }
.tx .tform label.topt, .tx label.tpick { margin-bottom: .6rem; }

/* Rows of controls: filter bar, bulk actions, small forms */
.tx .tbar-form, .tx .tbulk, .tx .tactions, .tx .tnav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tx .tbar-form { margin: 0 0 1.1rem; }
.tx .tbar-form :is(input, select, button, .btn) { margin: 0; }
.tx .tbulk { margin: 0 0 1.1rem; }
.tx .tbulk :is(select, button) { margin: 0; }
.tx .tbar-form input[type=search] { flex: 1 1 16rem; min-width: 12rem; }
.tx .tactions { margin: 1rem 0 0; }

/* Tabs */
.ttabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: -.25rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.ttabs a, .ttabs span {
  position: relative; padding: .6rem .9rem; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: var(--s-1);
  border-radius: 8px 8px 0 0;
}
.ttabs a:hover { color: var(--text); background: var(--raised); }
.ttabs a.on { color: var(--text); }
.ttabs a.on::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; }
.ttabs span.off { color: var(--text-3); opacity: .55; cursor: not-allowed; }

/* Setup wizard */
.tsteps { align-items: center; gap: .25rem .6rem; margin: 0 0 1.25rem; }
.tsteps li { color: var(--text-3); }
.tsteps li:not(:last-child)::after { content: ""; display: inline-block; width: 1.4rem; height: 1px; background: var(--line); margin-left: .6rem; }
.tsteps li a { color: var(--text-2); }
.tsteps li.now { color: var(--text); }
.tsteps li.now .tdot { background: var(--brand); border-color: var(--brand); color: #06232e; font-weight: 700; }
.tsteps li.done .tdot { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.tsteps li.now.done .tdot { background: var(--brand); border-color: var(--brand); color: #06232e; }
.tsteps li.off { opacity: .5; }
.tsteps .tdot { flex: none; }
@media (max-width: 720px) { .tsteps .tlabel { display: none; } .tsteps li.now .tlabel { display: inline; } .tsteps li:not(:last-child)::after { width: .6rem; } }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem 1.5rem; max-width: 46rem; }
.tcard h2 { margin: 0 0 .35rem; }
.tkicker { margin: 0 0 .5rem; font-size: var(--s-00); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.tfs { border: 0; padding: 0; margin: 0; min-width: 0; }
.tfs[disabled] { opacity: .65; }
.tfs.wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 .9rem; }
.tfs.wide .wide { grid-column: 1 / -1; }
.tnav { justify-content: space-between; margin-top: 1.3rem; }
.tform.grid-form .tnav { grid-column: 1 / -1; }
.tchoice, .tpick { border: 1px solid var(--line); border-radius: var(--tx-r); padding: .7rem .85rem; background: var(--raised); cursor: pointer; }
.tchoice:has(input:checked), .tpick:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.tpicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem .7rem; margin: 0 0 .9rem; }
.tpick { display: flex; gap: .6rem; align-items: center; margin: 0; }
.tq { margin: .2rem 0 .5rem; font-weight: 600; color: var(--text); }
.treview { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem 1rem; margin: .8rem 0 1rem; }
.treview dt { color: var(--text-3); }
.treview dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .treview { grid-template-columns: 1fr; gap: 0; } .treview dd { margin-bottom: .6rem; } }

/* Sidebar (replaces the old tabs): a left rail like a messaging app */
.tx:has(> .side) { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 1.75rem; align-items: start; }
.tx:has(> .side) > * { grid-column: 2; min-width: 0; }
.tx > .side { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 1rem; align-self: start; display: flex; flex-direction: column;
  justify-content: space-between; min-height: min(36rem, calc(100vh - 3rem)); padding: .75rem; background: var(--panel, var(--raised)); border: 1px solid var(--line); border-radius: 14px; }
.side-top, .side-bot { display: flex; flex-direction: column; gap: .15rem; }
.side-i { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 9px; color: var(--text-2); text-decoration: none;
  font-weight: 500; font-size: var(--s-1); cursor: pointer; list-style: none; position: relative; }
.side-i::-webkit-details-marker { display: none; }
.side-i:hover { background: var(--raised); color: var(--text); }
.side-i.on { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text); box-shadow: inset 3px 0 0 var(--brand); }
.side-i.off { opacity: .5; cursor: not-allowed; }
.side-i .ico { width: 1.2rem; text-align: center; color: var(--text-3); flex: none; }
.side-i.on .ico { color: var(--brand); }
.side-i .chev { margin-left: auto; transition: transform .15s; color: var(--text-3); }
.side-grp[open] > summary .chev { transform: rotate(90deg); }
.side-sub { display: flex; flex-direction: column; margin: .1rem 0 .2rem 1.1rem; padding-left: .5rem; border-left: 1px solid var(--line); }
.side-sub .side-i { padding: .4rem .6rem; }
.side-i .bdg { margin-left: auto; background: var(--brand); color: #06232e; font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 99px; }
.credits { margin: .6rem .2rem .1rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--text-3); }
.credits-h { display: flex; justify-content: space-between; font-weight: 600; color: var(--text-2); }
.credits-bar { height: 5px; margin: .45rem 0 .35rem; background: var(--line); border-radius: 99px; overflow: hidden; }
.credits-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
@media (max-width: 820px) {
  .tx:has(> .side) { display: block; }
  .tx > .side { position: static; min-height: 0; margin-bottom: 1rem; flex-direction: column; }
  .side-top { flex-direction: row; flex-wrap: wrap; }
  .side-grp { display: contents; }
  .side-grp > summary { display: none; }
  .side-sub { display: contents; margin: 0; padding: 0; border: 0; }
  .credits { display: none; }
}

/* Autofilled boxes inside texting: keep the dark fill when clicked (the focus ring must not replace it) */
.tx input:-webkit-autofill, .tx input:-webkit-autofill:hover, .tx input:-webkit-autofill:focus, .tx input:-webkit-autofill:active,
.tx textarea:-webkit-autofill:focus, .tx select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--raised) inset;
  box-shadow: 0 0 0 1000px var(--raised) inset;
  background-color: var(--raised);
}
.tx input:-webkit-autofill:focus, .tx textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--raised) inset, 0 0 0 3px var(--brand-glow);
  box-shadow: 0 0 0 1000px var(--raised) inset, 0 0 0 3px var(--brand-glow);
}
html[data-theme="light"] .tx input:-webkit-autofill, html[data-theme="light"] .tx input:-webkit-autofill:hover,
html[data-theme="light"] .tx input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #f7f9fa inset; box-shadow: 0 0 0 1000px #f7f9fa inset; }
html[data-theme="light"] .tx input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f7f9fa inset, 0 0 0 3px var(--brand-glow);
  box-shadow: 0 0 0 1000px #f7f9fa inset, 0 0 0 3px var(--brand-glow);
}

/* ---- Texting, cleaner layout ---- */
.tx h1 { font-size: 1.5rem; margin: 0; }
.tx h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
.tx .sub { color: var(--text-3); margin: .2rem 0 1.2rem; max-width: 46rem; }
.tx .thead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1rem; }
.tx .tact { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.tx .stats { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .7rem; margin: 0 0 1.4rem; }
.tx .stat { flex-direction: row; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 12px; box-shadow: none; }
.tx .stat .big { font-size: 1.6rem; min-width: 0; line-height: 1; }
.tx .stat strong { font-weight: 600; display: block; }
.tx .stat small { display: block; color: var(--text-3); font-size: .78rem; }
.tx .tcard { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 1.1rem 1.25rem; max-width: 46rem; }
.tx table.sheet { border-radius: 12px; overflow: hidden; }
.tx table.sheet th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
.tx .tnote { border-left: 0; border-radius: 10px; padding: .65rem .9rem; background: var(--raised); }
.tx .ttest { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: .4rem 0 1rem; padding: .7rem .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.tx .ttest input { width: 14rem; max-width: 100%; }
.tstatus h2 { margin: .1rem 0 .3rem; font-size: 1.5rem; }
.tstatus-ok { border-color: #1f8a4c; }
.tstatus-lock { border-color: #c0392b; }
.tstatus-info { border-color: var(--brand); }
.tdl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 1rem 0; }
.tdl dt { color: var(--text-3); }
.tdl dd { margin: 0; }
.side { font-size: .92rem; }
.side-i { border-radius: 8px; padding: .45rem .65rem; }
.side-sub .side-i { padding-left: 1.6rem; font-size: .88rem; }

.tinbox { list-style: none; margin: 0; padding: 0; max-width: 46rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tinbox li + li { border-top: 1px solid var(--line); }
.tinbox a, .tin-row { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; padding: .75rem 1rem; color: inherit; text-decoration: none; position: relative; }
.tinbox a:hover { background: var(--raised); }
.tin-when { color: var(--text-3); font-size: .8rem; text-align: right; }
.tin-msg { grid-column: 1; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tinbox li.unread .tin-msg { color: inherit; font-weight: 600; }
.tinbox .bdg { grid-column: 2; grid-row: 2; justify-self: end; }
.tphone { max-width: 26rem; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; }
.tphone .tthread { max-height: 26rem; min-height: 12rem; overflow-y: auto; padding: 1rem; margin: 0; max-width: none; }
.tphone .tbubble { max-width: 80%; border-radius: 18px; }
.tphone .tmsg-out .tbubble { border-bottom-right-radius: 5px; }
.tphone .tmsg-in .tbubble { border-bottom-left-radius: 5px; }
.tcompose { display: flex; gap: .5rem; align-items: flex-end; padding: .6rem; border-top: 1px solid var(--line); }
.tcompose textarea { flex: 1; min-height: 2.5rem; resize: none; border-radius: 18px; }
.grid-form label.topt, .tform label.topt { display: flex; align-items: flex-start; gap: .5rem; }
.grid-form label.topt input[type=checkbox], .tform label.topt input[type=checkbox] { width: auto; flex: 0 0 auto; }
.tx .tlocked { margin: -.3rem 0 .9rem; padding: .45rem .75rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--text-3); background: var(--raised); font-size: .9rem; user-select: none; }

.tinboxwrap { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
@media (max-width: 52rem) { .tinboxwrap { grid-template-columns: 1fr; } }
.tinboxwrap .tinbox { max-width: none; }
.tinbox li.sel a { background: var(--raised); }
.tphone { max-width: none; width: 100%; }
.tphone-head { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: center; }
.tphone-head strong { display: block; }
.tphone-head small { color: var(--text-3); }
.tphone .tthread { min-height: 20rem; max-height: 28rem; }
.tphone-empty { margin: auto; text-align: center; max-width: 14rem; }
.tcompose-off { opacity: .55; }
.bdg-t { font-size: .68rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.credits-bar.warn i { background: #d98a1a; }
.side-i { display: flex; align-items: center; gap: .5rem; }
.side-i .bdg { margin-left: auto; }
.side-i:has(.bdg-t) { flex-wrap: wrap; row-gap: .2rem; }
.side-i .bdg-t { margin-left: calc(1.2rem + .65rem); }
.side-static { cursor: default; }
.side-static:hover { background: transparent; color: var(--text-2); }
.side-static.on:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.bdg-link { text-decoration: none; color: inherit; cursor: pointer; }
.bdg-link:hover { filter: brightness(1.15); }
.side .side-static, .side .side-static:hover, .side .side-static:focus { background: transparent; color: var(--text-2); cursor: default; }
.side .side-static.on, .side .side-static.on:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text); }

/* ---- Texting on phones: gutter, tables as cards ---- */
@media (max-width: 40rem) {
  .wrap > .tx { padding: 0 .9rem; }
  .tx .tscroll { overflow: visible; }
  .tx .tscroll table.sheet { min-width: 0; }
  .tx .tscroll td { white-space: normal; }
  .tx table.sheet, .tx table.sheet tbody { display: block; width: 100%; }
  .tx table.sheet thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .tx table.sheet tbody tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: .35rem .85rem; margin: 0 0 .65rem; background: var(--surface); }
  .tx table.sheet tbody td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .8rem; border: 0; padding: .35rem 0; text-align: right; }
  .tx table.sheet tbody td::before { content: attr(data-label); color: var(--text-3); font-size: .8rem; font-weight: 600; text-align: left; flex: none; }
  .tx table.sheet tbody td[data-label=""]::before { display: none; }
  .tx table.sheet tbody td[data-label=""] { justify-content: flex-start; }
  .tx .tbar-form > * { flex: 1 1 100%; }
  .tx .tbar-form input[type=search] { min-width: 0; }
  .tx .stats { grid-template-columns: 1fr 1fr; }
  .tx .tact .btn, .tx .tact button { flex: 1 1 auto; }
  .tx .tinboxwrap { gap: 1rem; }
  .tx .tcard { padding: 1rem; }
  .tx .tdl { grid-template-columns: 1fr; gap: .1rem; }
  .tx .tdl dt { margin-top: .5rem; }
}

/* ---- Work orders ---- */
.wo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; }
.wo-views { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.wo-views a { padding: .4rem 1rem; color: var(--text-2); text-decoration: none; font-weight: 600; }
.wo-views a.on { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--text); box-shadow: inset 0 -3px 0 var(--brand); }
.wo-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.wo-filters input[type=search] { flex: 1 1 14rem; min-width: 10rem; }
.wo-chk { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--text-2); }
.wo-reset { font-size: .9rem; color: var(--text-2); }
.wo-sort { color: inherit; text-decoration: none; }
.wo-table td a { color: var(--text); text-decoration: none; font-weight: 600; }
.wo-table tr[data-href] { cursor: pointer; }
.wo-table tbody tr[data-href]:hover { background: var(--raised); }
.wo-table td a:hover { color: var(--brand); }
.wo-table td.wo-desc { color: var(--text-2); max-width: 22rem; }
.wo-st, .wo-pr { display: inline-block; padding: .08rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--line); white-space: nowrap; }
.wo-st.s-open { color: #1789b3; border-color: #1789b3; }
.wo-st.s-in_progress { color: #b9770e; border-color: #b9770e; }
.wo-st.s-on_hold { color: #7d8b99; border-color: #7d8b99; }
.wo-st.s-completed { color: #1f8a4c; border-color: #1f8a4c; }
/* The list inside the drop-down keeps neutral text; each choice shows only its own color. */
select.wo-st option { background: var(--surface); color: var(--text); font-weight: 600; }
select.wo-st option.s-open { color: #1789b3; }
select.wo-st option.s-in_progress { color: #b9770e; }
select.wo-st option.s-on_hold { color: #7d8b99; }
select.wo-st option.s-completed { color: #1f8a4c; }
.wo-pr.p-low { color: #1f8a4c; border-color: #1f8a4c; }
.wo-pr.p-medium { color: #b9770e; border-color: #b9770e; }
.wo-pr.p-high { color: #c0392b; border-color: #c0392b; }
.wo-map { width: 100%; height: 34rem; max-height: 70vh; border: 1px solid var(--line); border-radius: 10px; z-index: 0; }
.wo-map-sm { height: 18rem; }
.wo-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin: .6rem 0; }
.wo-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid #06232e; margin-right: .2rem; vertical-align: -1px; }
.wo-dot.s-open { background: #1caade; } .wo-dot.s-in_progress { background: #e0a01b; }
.wo-dot.s-on_hold { background: #7d8b99; } .wo-dot.s-completed { background: #1f8a4c; }
.wo-unplaced ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.wo-pager { display: flex; gap: .75rem; align-items: center; }
.wo-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.wo-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.5rem; }
.wo-card { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 1rem 1.1rem; min-width: 0; }
.wo-card h2 { margin-top: 0; }
.wo-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.wo-facts dt { color: var(--text-3); font-size: .85rem; }
.wo-facts dd { margin: 0; overflow-wrap: anywhere; }
.wo-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.wo-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .75rem 0 0; }
.wo-inline label { margin: 0; }
.wo-events { list-style: none; padding: 0; margin: 1rem 0 0; }
.wo-events li { border-left: 3px solid var(--line); padding: .25rem 0 .25rem .8rem; margin: 0 0 .6rem; overflow-wrap: anywhere; }
.wo-events li.k-note { border-left-color: var(--brand); }
.wo-note textarea { width: 100%; box-sizing: border-box; min-height: 7rem; font-size: 1rem; }
.wo-updates { max-width: 52rem; margin-top: 1.5rem; padding: 1.1rem 1.3rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.wo-updates h2 { margin-top: 0; }
.wo-feed li { background: var(--raised); border-radius: 6px; padding: .6rem .9rem; font-size: 1rem; }
.wo-feed li.k-note { background: var(--brand-glow); }
.wo-upd-body { margin-top: .15rem; white-space: pre-wrap; }
/* Every dropdown arrow should look clickable. */
summary, summary * { cursor: pointer; }
.wo-more { margin: 0 0 1rem; }
.wo-more summary { cursor: pointer; color: var(--brand); font-weight: 600; margin: 0 0 .6rem; }
.wo-more[open] summary { margin-bottom: .6rem; }
@media (max-width: 760px) {
  .wo-grid { grid-template-columns: minmax(0, 1fr); }
  .wo-map { height: 22rem; }
  .wo-filters select, .wo-filters input[type=search] { flex: 1 1 100%; }
  .wo-top { flex-direction: column; align-items: stretch; }
}

/* ---- Work orders, round two ---- */
/* Native date pickers follow the site theme (they were drawing black on the dark theme). */
html:not([data-theme="light"]) input[type="date"], html:not([data-theme="light"]) input[type="datetime-local"] { color-scheme: dark; }
html[data-theme="light"] input[type="date"], html[data-theme="light"] input[type="datetime-local"] { color-scheme: light; }
.wo input[type="date"] { color: var(--text); }
.wo-lbl { display: block; font-size: .85rem; margin: 0 0 .35rem; }
.wo-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin: 0 0 .5rem; }
.wo-people fieldset { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .85rem .65rem; margin: 0; min-width: 0; }
.wo-people legend { padding: 0 .35rem; color: var(--text-2); font-size: .85rem; font-weight: 600; }
.wo-people label { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; font-size: .95rem; }
.wo-assign { margin: .9rem 0 0; }
.wo-addrbox { position: relative; }
.wo-sugg { position: absolute; z-index: 30; left: 0; right: 0; margin: -.1rem 0 0; padding: .25rem; list-style: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; max-height: 17rem; overflow: auto; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.wo-sugg li { padding: .45rem .65rem; border-radius: 6px; cursor: pointer; }
.wo-sugg li small { display: block; color: var(--text-3); }
.wo-sugg li.on, .wo-sugg li:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.wo-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .65rem; margin: 0 0 .75rem; }
.wo-photos figure { position: relative; margin: 0; }
.wo-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.wo-photos form { position: absolute; top: .3rem; right: .3rem; margin: 0; }
.wo-x, .tx button.wo-x { position: relative; box-sizing: border-box; width: 1.7rem; height: 1.7rem; min-width: 0; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 50%; display: inline-block; vertical-align: middle; font-size: 0; line-height: 0; cursor: pointer; background: var(--raised-2, transparent); color: var(--text-2); transition: background .12s, color .12s, border-color .12s; }
.wo-x::before, .wo-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 2px; margin: -1px 0 0 -.35rem; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.wo-x::after { transform: rotate(-45deg); }
.wo-x:hover, .wo-x:focus-visible, .tx button.wo-x:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
.wo-photos .wo-x { border: 0; background: rgba(0, 0, 0, .7); color: #fff; }
.sheet td:last-child:has(> form > .wo-x), .sheet td:has(> form > .wo-x) { text-align: right; width: 3rem; }
.sheet td > form:has(> .wo-x) { margin: 0; display: flex; justify-content: flex-end; }
.wo-notes { color: var(--text-2); padding-left: 1.2rem; max-width: 46rem; }
.wo-notes li { margin: .3rem 0; }
.wo-scroll { overflow-x: auto; max-width: 100%; }
.wo-map-table select { min-width: 14rem; max-width: 100%; }
.wo .wo-people label, .wo .grid-form .wo-people label { display: flex; flex-direction: row; align-items: center; gap: .55rem; margin: .2rem 0; text-align: left; }
.wo .wo-people input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.wo-rowst { margin: 0; }
.wo-rowst select { width: auto; min-width: 7.5rem; padding: .2rem .5rem; font-size: .85rem; cursor: pointer; }

/* Register and Meter ID are read-only: shown as plain values, not boxes you can type in. */
.wo-fixed { display: flex; flex-direction: column; gap: .3rem; }
.wo-ro { display: block; min-height: 2.4rem; padding: .55rem .75rem; border-radius: 9px; border: 1px dashed var(--line); color: var(--text); font-weight: 600; letter-spacing: .02em; background: transparent; cursor: default; user-select: text; }
.wo-ro:empty::before { content: attr(data-empty); color: var(--text-3); font-weight: 400; letter-spacing: 0; }
/* Status box on the list: roomy and bold so it reads as a status, not a squeezed field. */
.wo .wo-rowst select { font-weight: 700; font-size: .9rem; letter-spacing: .01em; min-width: 9.75rem; height: 2.4rem; padding: .3rem 2.2rem .3rem 1rem; border-width: 1.5px; border-radius: 999px; }

/* The list is read all day, so its text is larger; the number and title lead. */
.wo .wo-table td { font-size: 1rem; }
.wo .wo-table td:nth-child(1) a, .wo .wo-table td:nth-child(2) a { font-size: 1.15rem; font-weight: 700; }
.wo .wo-table td:nth-child(2) .pill { font-size: .8rem; vertical-align: middle; }

/* Work order page: map left, details right. */
.wo-grid-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wo-map-tall { height: 24rem; }
.wo-facts2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.1rem; margin: 0 0 1rem; }
.wo-facts2 .f.wide, .wo .f.wide { grid-column: 1 / -1; margin: 0 0 .7rem; }
.wo-facts2 .f { min-width: 0; }
.wo .f .k, .wo .wo-assign .k { display: block; color: var(--text-3); font-size: .8rem; margin: 0 0 .15rem; }
.wo .f .v { display: block; overflow-wrap: anywhere; font-weight: 500; }
.wo .f .wo-text { margin: 0; }
.wo-people { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 .75rem; }
.wo-dd { position: relative; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.wo-dd summary { list-style: none; cursor: pointer; padding: .5rem .8rem; display: flex; flex-direction: column; gap: .1rem; }
.wo-dd summary::-webkit-details-marker { display: none; }
.wo-dd summary::after { content: ""; position: absolute; right: .8rem; top: 1.1rem; border: 5px solid transparent; border-top-color: var(--text-2); }
.wo-dd[open] summary::after { top: .75rem; transform: rotate(180deg); }
.wo-dd-l { font-size: .8rem; color: var(--text-3); }
.wo-dd-v { font-weight: 600; padding-right: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-dd-panel { position: absolute; z-index: 25; left: -1px; right: -1px; top: 100%; margin-top: .25rem; max-height: 15rem; overflow: auto; padding: .4rem .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.wo .wo-dd-panel label { display: flex; flex-direction: row; align-items: center; gap: .55rem; padding: .35rem .4rem; margin: 0; border-radius: 6px; cursor: pointer; }
.wo .wo-dd-panel label:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.wo .wo-dd-panel input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
@media (max-width: 760px) { .wo-grid-map { grid-template-columns: minmax(0, 1fr); } .wo-people { grid-template-columns: 1fr; } .wo-map-tall { height: 18rem; } }
.wo .wo-dd-panel label.wo-dd-all { position: sticky; top: -.4rem; z-index: 1; background: var(--surface); border-radius: 0; border-bottom: 1px solid var(--line); padding: .45rem .4rem; margin-bottom: .2rem; }
.rptbox { border: 1px solid #ccd; border-radius: 10px; max-width: 34rem; width: 92%; padding: 1.2rem 1.4rem; }
.rptbox::backdrop { background: rgba(0,0,0,.45); }
.rptbox h3 { font-size: 1rem; margin: .9rem 0 .2rem; }
.rptbox ul { margin: 0; padding-left: 1.2rem; max-height: 12rem; overflow: auto; }
/* work orders: settings bar on the left */
.wo-shell { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.wo-side { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 1rem; padding: .5rem 0; border-right: 1px solid var(--border, rgba(128,128,128,.25)); padding-right: .75rem; }
.wo-side a { padding: .45rem .7rem; border-radius: 6px; text-decoration: none; color: inherit; }
.wo-side a:hover { background: rgba(128,128,128,.14); }
.wo-side a.on { background: rgba(23,137,179,.18); font-weight: 600; }
.wo-side-h { margin: .9rem .7rem .25rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
@media (max-width: 760px) {
  .wo-shell { grid-template-columns: 1fr; gap: .5rem; }
  .wo-side { flex-direction: row; flex-wrap: wrap; position: static; border-right: 0; padding: 0 0 .5rem; border-bottom: 1px solid rgba(128,128,128,.25); }
  .wo-side-h { display: none; }
}
.near-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.near-list li { padding: .5rem 0; border-bottom: 1px solid rgba(128,128,128,.2); }
#amap { touch-action: none; }

.wo-placing { cursor: crosshair !important; outline: 3px solid var(--brand); }
.wo-placing .leaflet-grab { cursor: crosshair; }
.masthead .mark .tf-on-light { display: none; }
html[data-theme="light"] .masthead .mark .tf-on-dark { display: none; }
html[data-theme="light"] .masthead .mark .tf-on-light { display: block; }

.wo-col { display: grid; gap: 1.25rem; min-width: 0; align-content: start; }
.wo-col .wo-updates { max-width: none; margin-top: 0; }

/* Saving reloads the page; a short cross-fade (no white flash) with the header held still keeps it from jerking. */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
::view-transition-group(root) { animation-duration: .15s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation: none; } }
html { background: var(--bg); }

/* work order time and parts */
.wo-wide { margin-top: 1.25rem; }
.wo-tot { font-size: 0.9rem; font-weight: 500; margin-left: 0.5rem; }
.wo-clock { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 0.6rem; }
.wo-addrow { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0.75rem 0; }
.wo-addrow label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; }
.wo-addrow input[type=number] { width: 6rem; }
.wo-tbl td form { margin: 0; }

/* GIS */
.gis-shell { display: grid; grid-template-columns: 22rem 1fr; gap: 0; height: calc(100vh - 7rem); min-height: 30rem; }
.gis-side { overflow-y: auto; padding: 0.75rem 1rem 1.5rem 0; border-right: 1px solid var(--line); }
.gis-side h2 { font-size: 1rem; margin: 0.5rem 0; }
.gis-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; }
.gis-search { position: relative; }
.gis-search input { width: 100%; }
.gis-results { list-style: none; margin: 0.25rem 0 0; padding: 0; position: absolute; z-index: 800; left: 0; right: 0; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; max-height: 18rem; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.gis-hit { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0.5rem 0.7rem; cursor: pointer; font: inherit; color: inherit; }
.gis-hit:hover, .gis-hit:focus-visible { background: rgba(23,137,179,.12); }
.gis-layers { list-style: none; margin: 0.25rem 0; padding: 0; }
.gis-layers li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.gis-lyr { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.gis-ln { flex: 1; font-weight: 600; }
.gis-sw { width: 0.9rem; height: 0.9rem; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.25); }
.gis-more { margin: 0.4rem 0; font-size: 0.9rem; }
.gis-more summary { cursor: pointer; color: #1789b3; }
.gis-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; }
.gis-form label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; }
.gis-links { margin: 0.4rem 0; font-size: 0.85rem; }
.gis-tools { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.gis-tools label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.gis-toolrow { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; flex-wrap: wrap; }
.gis-snap { flex-direction: row !important; align-items: center; gap: 0.35rem !important; }
.gis-mapwrap { position: relative; min-height: 24rem; }
#gismap { position: absolute; inset: 0; }
.gis-bar { position: absolute; z-index: 700; left: 50%; transform: translateX(-50%); top: 0.75rem; background: #0B2A3A; color: #fff; padding: 0.5rem 0.75rem; border-radius: 10px; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; max-width: calc(100% - 6rem); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.gis-bar[hidden] { display: none; }
.gis-panel { position: absolute; z-index: 700; right: 0.75rem; bottom: 1.5rem; width: 21rem; max-width: calc(100% - 1.5rem); max-height: 70%; overflow-y: auto; background: var(--card, #fff); color: var(--ink, #0B2A3A); border-radius: 12px; padding: 0.8rem 1rem; box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.gis-panel[hidden] { display: none; }
.gis-ph { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.gis-ph .wo-x { margin-left: auto; position: static; }
.gis-attrs { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.5rem 0; }
.gis-attrs th { text-align: left; font-weight: 600; padding: 0.2rem 0.5rem 0.2rem 0; vertical-align: top; white-space: nowrap; }
.gis-attrs td { padding: 0.2rem 0; word-break: break-word; }
.gis-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.gis-hist { font-size: 0.8rem; }
.gis-hist ul { padding-left: 1.1rem; margin: 0.3rem 0; }
.gis-err { color: #b03a2e; margin: 0; font-size: 0.85rem; }
.gis-lbl { background: rgba(11,42,58,.85); color: #fff; border: 0; box-shadow: none; font-size: 0.75rem; padding: 1px 5px; }
.gis-lbl:before { display: none; }
.gis-h { border-radius: 50%; border: 2px solid #0B2A3A; }
.gis-hv { background: #ffd400; width: 14px; height: 14px; cursor: grab; }
.gis-hm { background: #fff; width: 9px !important; height: 9px !important; margin: 2px 0 0 2px !important; opacity: .85; cursor: copy; }
@media (max-width: 800px) {
  .gis-shell { grid-template-columns: 1fr; height: auto; }
  .gis-side { border-right: 0; padding-right: 0; order: 2; }
  .gis-mapwrap { height: 70vh; order: 1; }
  .gis-panel { width: auto; left: 0.5rem; right: 0.5rem; }
}

.wo-setlist { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; max-width: 64rem; }
.wo-setlist li { margin: 0; }
.wo-setlist a { display: grid; grid-template-columns: 2.6rem 1fr auto; column-gap: .9rem; align-items: center; padding: 1rem 1.1rem; height: 100%; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.wo-setlist a:hover { border-color: var(--brand); box-shadow: 0 4px 18px var(--brand-glow); transform: translateY(-1px); }
.wo-setlist .ico { grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; background: var(--brand-glow); color: var(--brand); }
.wo-setlist .ico svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wo-setlist strong { font-size: 1rem; align-self: end; }
.wo-setlist .muted { grid-column: 2; font-size: .85rem; line-height: 1.35; }
.wo-setlist .go { grid-row: 1 / span 2; grid-column: 3; color: var(--text-3); font-size: 1.2rem; }
.wo-setlist a:hover .go { color: var(--brand); }
/* lists with a remove X at the far right */
.wo-rows { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
.wo-rows li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .5rem .5rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.wo-rows form { margin: 0; }
.wo-tabs a { }

/* USA ticket marker: a diamond that carries 811 */
.wo-usa-pin span { display: block; width: 100%; height: 100%; background: #e0501b; border: 1.5px solid #fff; border-radius: 3px; transform: rotate(45deg) scale(.72); box-shadow: 0 1px 5px rgba(0,0,0,.55); }
.wo-usa-key { display: inline-block; width: .65rem; height: .65rem; background: #e0501b; border-radius: 2px; transform: rotate(45deg); margin: 0 .25rem 0 .1rem; vertical-align: 0; }
/* work order list: room for the title and who it is assigned to */
.wo-table { table-layout: auto; }
.wo-table th:nth-child(2), .wo-table td:nth-child(2) { min-width: 17rem; }
.wo-table th:nth-child(9), .wo-table td:nth-child(9) { min-width: 11rem; }
.wo-table td.wo-desc { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-table td:nth-child(4), .wo-table td:nth-child(5) { white-space: nowrap; }
@media (max-width: 1300px) { .wo-table { display: block; overflow-x: auto; } }
.wo-addcat { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wo-addcat input[type=text] { flex: 1 1 16rem; width: auto; }
.wo-addcat select { width: auto; }
.wo-table th:nth-child(3), .wo-table td.wo-desc { max-width: 8rem; }

/* readable timer and inventory */
.wo-clock { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink, inherit); }
.wo-tbl .wo-clock { font-size: 1rem; }
.wo-tot { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; }
.wo-addrow select { min-width: 14rem; }
.wo-inv input[type=number] { width: 6rem; }

/* settings sits apart, near the bottom of the menu */
.wo-side { min-height: 26rem; }
.wo-side .wo-side-set { margin-top: auto; border-top: 1px solid rgba(128,128,128,.25); border-radius: 0 0 6px 6px; padding-top: .8rem; }
.wo-side .wo-m { display: none; }
@media (max-width: 760px) { .wo-side { min-height: 0; } .wo-side .wo-side-set { margin-top: 0; border-top: 0; padding-top: .45rem; } }
.wo-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.wo-rep div { border: 1px solid rgba(128,128,128,.25); border-radius: 8px; padding: .7rem .9rem; }
.wo-rep b { display: block; font-size: 1.6rem; line-height: 1.1; }
.wo-rep span { font-size: .85rem; opacity: .75; }
.wo-tabs { display: flex; gap: .4rem; margin: .5rem 0 0; }
.wo-tabs a { padding: .4rem .9rem; border-radius: 999px; text-decoration: none; border: 1px solid rgba(128,128,128,.35); }
.wo-tabs a.on { background: rgba(23,137,179,.18); font-weight: 600; }
.wo-tabs a:hover { background: rgba(128,128,128,.14); color: inherit; }
.wo-rep div:hover, .wo-tbl tbody tr:hover { background: rgba(128,128,128,.1); }

/* asset form */
.af { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; max-width: 60rem; }
.af-col { display: grid; gap: .9rem; }
.af-col h2 { margin: .6rem 0 0; font-size: 1.1rem; }
.af label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; text-align: left; }
.af .req { color: #b3261e; }
.af-two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.af-map { height: 18rem; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 760px) { .af { grid-template-columns: 1fr; } }

/* No stray text cursor or focus box when clicking around buttons, tabs, menus and cards */
button, .btn, summary, nav a, th, .wo-side a, .wo-tabs a, .stat, .wo-rep div, label.wo-chk { -webkit-user-select: none; user-select: none; }
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; -webkit-user-select: text; user-select: text; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; }

.wo-group { border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; margin: .75rem 0; max-width: 46rem; }
.wo-group-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.wo-group-m { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.wo-group-m label { display: inline-flex; align-items: center; gap: .35rem; }
.sheet td.rm { text-align: right; width: 3rem; }
.wo-back { display: inline-block; margin: 0 0 .6rem; color: var(--text-2); text-decoration: none; font-size: .95rem; }
.wo-back:hover { color: var(--text); text-decoration: underline; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > .sitefoot { margin-top: auto; }

input[type="file"] { padding: .55rem .65rem; border: 1px dashed var(--line); border-radius: 8px; background: transparent; cursor: pointer; font-size: var(--s-0); }
input[type="file"]:hover { border-color: var(--brand); }
input[type="file"]::file-selector-button { background: var(--brand); color: #04222f; border: 0; border-radius: 6px; padding: .4rem .9rem; margin-right: .8rem; font-weight: 600; }
input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }
input[type="date"] { min-height: 2.6rem; }
body > .wrap { width: 100%; box-sizing: border-box; }
.usa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; max-width: 50rem; }
.usa-grid .wide, .usa-grid button { grid-column: 1 / -1; }
.usa-grid button { justify-self: start; }
@media (max-width: 640px) { .usa-grid { grid-template-columns: 1fr; } }
.usa-auto { margin-top: 1.5rem; padding: 1rem 1.25rem; max-width: 50rem; }
.usa-auto h2 { margin-top: 0; }
.usa-auto p { margin-bottom: 0; }
.map-find { background: var(--brand); color: #04222f; border: 0; border-radius: 6px; padding: .45rem .8rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.map-find:hover, .leaflet-bar.map-find:hover { background: var(--brand); color: #04222f; border: 0; filter: brightness(1.08); }
.wo-set { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 1rem; max-width: 40rem; }
.wo-set h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.wo-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .25rem .75rem; }
.wo-check { display: flex; align-items: center; gap: .55rem; margin: .2rem 0; color: var(--text); }
.wo-check input { width: auto; margin: 0; flex: 0 0 auto; }

/* ---- Phones: work orders, assets, backflows and settings ---- */
@media (max-width: 760px) {
  .wrap { padding: 1rem .9rem 3rem; }
  .in-app .wrap { padding-top: .6rem; }
  .wo-shell { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .wo-shell > * { min-width: 0; }
  /* The side menu becomes one swipeable row of pills that stays on screen. */
  .wo-side { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem; overflow: visible; margin: 0 -.9rem; padding: .6rem .9rem; min-height: 0;
    border-bottom: 1px solid var(--line); }
  .wo-side a { flex: 0 0 auto; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; font-size: .92rem; min-height: 2.2rem; display: inline-flex; align-items: center; }
  .wo-side a.on { background: color-mix(in srgb, var(--brand) 20%, transparent); border-color: var(--brand); }
  .wo-side a.wo-kind { display: none; }
  .wo-side .wo-d { display: none; }
  .wo-side .wo-m { display: inline; }
  .wo-side a:nth-of-type(1) { order: 1; } .wo-side a:nth-of-type(2) { order: 2; } .wo-side a:nth-of-type(3) { order: 3; }
  .wo-side a.wo-n4 { order: 4; } .wo-side a.wo-n5 { order: 5; } .wo-side a.wo-n6 { order: 6; } .wo-side a.wo-n7 { order: 7; } .wo-side a.wo-n8 { order: 8; }
  .wo-side .wo-side-h { display: none; }
  .wo-side .wo-side-set { margin: 0; padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 999px; }
  .wo-main h1 { font-size: 1.55rem; margin: .4rem 0 .4rem; }
  .wo-back { display: inline-flex; align-items: center; min-height: 2.4rem; }
  /* Touch-sized boxes. 16px text keeps the iPhone from zooming in on them. */
  .wo-main input, .wo-main select, .wo-main textarea { font-size: 16px; min-height: 2.75rem; }
  .wo-main textarea { min-height: 5rem; }
  .wo-main input[type="checkbox"], .wo-main input[type="radio"] { min-height: 0; width: 1.25rem; height: 1.25rem; }
  .wo-main .btn, .wo-main button { min-height: 2.75rem; }
  .wo-x, .tx button.wo-x { min-height: 0; width: 2.1rem; height: 2.1rem; }
  /* Filters: two to a row */
  .wo-main .wo-filters, .tx .wo-filters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .wo-main .wo-filters > * { flex: none; min-width: 0; margin: 0; width: 100%; }
  .wo-main .wo-filters input[type=search], .wo-main .wo-filters .wo-chk { grid-column: 1 / -1; }
  .wo-main .wo-filters .wo-reset { align-self: center; text-align: center; width: auto; justify-self: center; }
  .wo-main form.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .wo-main form.chips select, .wo-main form.chips input[type=search] { flex: 1 1 100%; margin: 0; }
  .wo-main form.chips .btn, .wo-main form.chips button { flex: 1 1 auto; }
  .wo-top { gap: .6rem; }
  .wo-top .tact, .wo-top .tact .btn { width: 100%; }
  .wo-top .tact .btn { text-align: center; }
  .wo-settings, .wo-setlist { grid-template-columns: 1fr; }
  .wo-setlist a { padding: .85rem 1rem; }
  /* The work order list becomes one card per order */
  .wo-table, .wo-table tbody { display: block; width: 100%; overflow: visible; }
  .wo-table thead { display: none; }
  .tx table.sheet.wo-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; margin: 0 0 .65rem; }
  .tx table.sheet.wo-table tbody td { display: block; border: 0; padding: 0; text-align: left; min-width: 0; max-width: none; white-space: normal; }
  .tx table.sheet.wo-table tbody td::before { content: none; display: none; }
  .tx table.sheet.wo-table tbody td:empty { display: none; }
  .tx table.sheet.wo-table tbody td:nth-child(n) { min-width: 0; max-width: none; white-space: normal; }
  .tx table.sheet.wo-table tbody td:nth-child(1) { order: 1; flex: 0 0 auto; }
  .tx table.sheet.wo-table tbody td:nth-child(1) a { font-size: .95rem; font-weight: 700; color: var(--text-3); }
  .tx table.sheet.wo-table tbody td:nth-child(1) a::before { content: "#"; }
  .tx table.sheet.wo-table tbody td:nth-child(2) { order: 2; flex: 1 1 0; }
  .tx table.sheet.wo-table tbody td:nth-child(2) a { font-size: 1.08rem; font-weight: 700; }
  .tx table.sheet.wo-table tbody td:nth-child(3), .tx table.sheet.wo-table tbody td:nth-child(4) { display: none; }
  .tx table.sheet.wo-table tbody td:nth-child(6) { order: 3; flex: 0 0 100%; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .tx table.sheet.wo-table tbody td:nth-child(5), .tx table.sheet.wo-table tbody td:nth-child(7), .tx table.sheet.wo-table tbody td:nth-child(8), .tx table.sheet.wo-table tbody td:nth-child(9) { order: 4; flex: 0 0 auto; color: var(--text-2); font-size: .9rem; }
  .tx table.sheet.wo-table tbody td:nth-child(5):not(:empty)::before { content: "Due "; display: inline; color: var(--text-3); }
  .wo-rowst select { min-width: 0; width: auto; min-height: 2.4rem; }
  .wo-pager { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
  /* Other tables slide sideways inside their own box instead of widening the page */
  .wo-main table.sheet:not(.wo-table) { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .wo-main .tform, .wo-main .tform label { max-width: 100%; }
  .wo-main .tform { display: grid; gap: .5rem; }
  .wo-main .tform .btn-brand, .wo-main .tform button[type=submit] { width: 100%; }
  .wo-set, .wo-group { max-width: none; }
  .wo-checks { grid-template-columns: 1fr; }
  .wo-map, #womap, #amap, .af-map { height: 22rem !important; }
  .map-find { padding: .55rem .8rem; }
  .wo-rep { grid-template-columns: 1fr 1fr; }
  .wo-people { grid-template-columns: 1fr; }
  .usa-grid { grid-template-columns: 1fr; }
  .usa-auto { max-width: none; }
  .wo-addrbox .wo-sugg { max-height: 14rem; }
  .wo-photos { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
}

/* Phones: one finger scrolls the page, two fingers move the map */
.map-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; pointer-events: none;
  background: rgba(10, 18, 28, .78); color: #fff; padding: .6rem .9rem; border-radius: 10px; font-size: .95rem; font-weight: 600;
  opacity: 0; transition: opacity .2s; text-align: center; max-width: 80%; }
.map-hint.on { opacity: 1; }

/* Account & Settings */
.acct-head { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 1.4rem; }
.acct-avatar { width: 3rem; height: 3rem; border-radius: 50%; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; flex: none; }
.acct-name { font-weight: 700; font-size: 1.1rem; }
.acct-meta { color: var(--muted, #6b7c85); font-size: .92rem; overflow-wrap: anywhere; }
.notif-list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.notif-text { display: flex; flex-direction: column; gap: .15rem; margin: 0; cursor: pointer; font-weight: 400; }
.notif-text strong { font-weight: 600; }
.notif-lock { font-size: .8rem; color: var(--muted, #6b7c85); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.switch { position: relative; flex: none; width: 2.6rem; height: 1.5rem; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }

/* work order notes: edit and delete */
.wo-note-tools { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; font-size: .85rem; }
.wo-note-tools summary { cursor: pointer; list-style: none; }
.wo-note-tools summary::-webkit-details-marker { display: none; }
.wo-note-tools summary:hover, .wo-note-tools .linklike:hover { color: var(--brand); text-decoration: underline; }
.wo-note-tools .linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.wo-note-edit form { margin-top: 6px; display: grid; gap: 6px; min-width: min(28rem, 80vw); }