/* ===========================================================================
   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"] .masthead { background: #15140f; }
html[data-theme="light"] .masthead .wordmark { color: #fff; }
html[data-theme="light"] .masthead .wordmark .q { color: #1caade; }
html[data-theme="light"] .masthead nav a { color: #b3bcc0; }
html[data-theme="light"] .masthead nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
html[data-theme="light"] .masthead nav a.here { color: #1caade; background: rgba(28,170,222,.14); }
html[data-theme="light"] .masthead .tenant { color: #cfd5d8; border-left-color: rgba(255,255,255,.16); }
html[data-theme="light"] .masthead .product { color: #9aa3a7; }
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 {
  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; }

html[data-theme="light"] .nav-menu-btn { color: #b3bcc0; }
html[data-theme="light"] .nav-menu-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
html[data-theme="light"] .nav-menu-panel { background: #15140f; border-color: rgba(255,255,255,.16); }
html[data-theme="light"] .nav-menu-panel a { color: #b3bcc0; }
html[data-theme="light"] .nav-menu-panel a:hover { color: #fff; background: rgba(255,255,255,.08); }
html[data-theme="light"] .nav-menu-panel a.here { color: #1caade; background: rgba(28,170,222,.14); }
html[data-theme="light"] .nav-menu-sep { background: rgba(255,255,255,.16); }


/* --- 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="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
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: #2c2922; border-color: #3a362e; }

.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; }
}

@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: rgba(255, 255, 255, 0.18); color: #b3bcc0; background: transparent; }
.masthead .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.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;
}
.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 { 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(--card, #1b1a16); border: 1px solid var(--line, #8884);
  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; }

/* 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; } }