/* KEMSystems Reports — brand tokens from Brand Guidelines v4 (2026) */
@font-face { font-family: "Nunito Sans"; font-weight: 900; src: url(fonts/NunitoSans-Black.ttf); font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 500; src: url(fonts/SourceSans3-Medium.ttf); font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; src: url(fonts/SourceSans3-Bold.ttf); font-display: swap; }

:root {
  --navy: #12293B; --green: #6D8C68; --algae: #9DB298; --stone: #D9D4C8; --cream: #F7F5F1; --alert: #A9543F;
  --bg: var(--cream); --surface: #FFFFFF; --text: var(--navy); --muted: rgba(18, 41, 59, .78);
  --border: var(--stone); --eyebrow: var(--green); --field: #FBFAF7; --tint: #E6ECE4;
  --accent-text: var(--navy); --alert-text: var(--alert); --focus: var(--navy);  /* small text: green and red fail contrast as text on light grounds */
  --display: "Avenir Black", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Acumin Variable Concept", "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --r: 4px; --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1D2A; --surface: #15303F; --text: var(--cream); --muted: rgba(247, 245, 241, .78); --accent-text: var(--algae); --alert-text: #E09A85; --focus: var(--algae);
    --border: rgba(217, 212, 200, .18); --eyebrow: var(--algae); --field: #102633; --tint: #22402F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1D2A; --surface: #15303F; --text: var(--cream); --muted: rgba(247, 245, 241, .78); --accent-text: var(--algae); --alert-text: #E09A85; --focus: var(--algae);
  --border: rgba(217, 212, 200, .18); --eyebrow: var(--algae); --field: #102633; --tint: #22402F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 1rem/1.45 var(--body);
       padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.01em; margin: 0; }

.top { background: var(--navy); color: var(--cream); padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.top .bar { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.top .links { display: flex; gap: 14px; align-items: center; margin-left: auto; }  /* drops under the logo on the narrowest phones */
.top img { height: 32px; display: block; }
.top .gear { color: var(--algae); font-size: 0.875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

main { max-width: 760px; margin: 0 auto; padding: 20px 16px; }
.hello { font-size: 2.125rem; line-height: 1.1; margin: 6px 0 2px; }
.sub { color: var(--muted); margin: 0 0 18px; }
.backup { color: var(--muted); font-size: 0.875rem; margin: -12px 0 18px; }
.backup.late { color: var(--alert-text); font-weight: 700; }
.eyebrow { font-weight: 700; font-size: 0.875rem; letter-spacing: .3em; text-transform: uppercase; color: var(--eyebrow);
           margin: 26px 4px 8px; }
.page-title { font-size: 1.625rem; margin: 4px 0 4px; }
.crumb { color: var(--muted); font-size: 0.875rem; }
.crumb a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; }
.stat b { display: block; font: 900 1.625rem/1.1 var(--display); }
.stat span { font-size: 0.875rem; color: var(--muted); }
.stat.green { background: var(--green); border-color: var(--green); color: var(--cream); }
.stat.green span { color: rgba(247, 245, 241, .85); }

.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.list > * { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-top: 1px solid var(--border); min-height: 52px; }
.list > *:first-child { border-top: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .t { font-weight: 700; }
.list .m { color: var(--muted); font-size: 0.875rem; }
.list .chev::after { content: "›"; color: var(--muted); font-size: 1.375rem; line-height: 1; }
.list .empty { color: var(--muted); justify-content: center; }
.dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--green); flex: none; }
.dot.done { background: var(--green); box-shadow: inset 0 0 0 3px var(--surface); }
.dot.warn { border-color: var(--alert); }

.pill { font-size: 0.875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px;
        border-radius: 3px; white-space: nowrap; }
.pill.draft { background: var(--stone); color: var(--navy); }
.pill.final { background: var(--algae); color: var(--navy); }
.pill.sent { background: var(--green); color: var(--cream); }
.pill.alert { background: var(--alert); color: #fff; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--green);
       color: var(--cream); border: 0; border-radius: var(--r); padding: 13px 18px; font: 700 0.875rem var(--body);
       letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: opacity .6s var(--ease); }
.btn:active { opacity: .7; }
.btn.navy { background: var(--navy); }
.btn.ghost { background: transparent; color: var(--accent-text); border: 1.5px solid var(--green); }
.btn.danger { background: transparent; color: var(--alert-text); border: 1.5px solid var(--alert); }
.btn.block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.actions .btn { flex: 1 1 140px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; }
.card + .card { margin-top: 10px; }
.card h3 { font-size: 1.125rem; margin-bottom: 8px; }

label { display: block; font-size: 0.875rem; font-weight: 700; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea { width: 100%; font: 500 1rem var(--body); color: var(--text); background: var(--field);
  border: 1px solid var(--border); border-radius: var(--r); padding: 10px 11px; }
/* one focus style everywhere; date and time fields keep focus in their own sub-fields, hence :focus-within */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus, select:focus, textarea:focus, input:focus-within { outline: 2px solid var(--focus); outline-offset: 0; }
textarea { min-height: 84px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hint { font-size: 0.875rem; color: var(--muted); margin-top: 4px; }

/* reading inputs */
.reading { padding: 9px 0; border-top: 1px solid var(--border); }
.reading:first-of-type { border-top: 0; }
.reading .line { display: grid; grid-template-columns: minmax(0, 1fr) 6.75em 3em; gap: 8px; align-items: center; }
/* Sizes in em follow the tech's text size. When the card gets narrow for that size (large text, zoom,
   small phones) the label takes its own row and the entry box gets the full width under it. */
.card.point { container-type: inline-size; }
@container (max-width: 19em) {
  .reading .line { grid-template-columns: minmax(0, 1fr) 3em; }
  .reading .line .lbl { grid-column: 1 / -1; }
}
.reading .lbl { font-weight: 700; overflow-wrap: anywhere; }
.reading .lbl small { display: block; font-weight: 500; color: var(--muted); font-size: 0.875rem; }
.reading .lbl small.state:empty { display: none; }
.req { font-size: 0.875rem; font-weight: 700; color: var(--accent-text); letter-spacing: .04em; }
.reading .val { text-align: right; font-weight: 700; }
.reading .calc { text-align: right; font-weight: 700; padding: 10px 11px; border-radius: var(--r); background: var(--field); }
.reading .more { width: 3em; height: 2.75em; min-height: 44px; border-radius: 1.375em; border: 1.5px solid var(--green); background: none; color: var(--text);
        font: 800 0.875rem var(--body); letter-spacing: .02em; line-height: 1; cursor: pointer; }
.reading .more[aria-expanded="true"] { background: var(--tint); }
/* severity: in range uses the brand greens; out of range steps up through the muted alarm red */
.sev-in .val, .sev-in .calc { background: var(--tint); border-color: var(--algae); }
.sev-in small.state { color: var(--accent-text); font-weight: 700; }
.sev-watch .val, .sev-watch .calc { border: 1.5px solid var(--alert); color: var(--alert-text); background: rgba(169, 84, 63, .06); }
.sev-out .val, .sev-out .calc { border: 1.5px solid var(--alert); color: var(--alert-text); background: rgba(169, 84, 63, .16); }
.sev-critical .val, .sev-critical .calc { border: 1.5px solid var(--alert); color: #fff; background: var(--alert); }
.sev-watch small.state, .sev-out small.state, .sev-critical small.state { color: var(--alert-text); font-weight: 700; }
.badge { font-size: 0.875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px;
         border: 1.5px solid var(--alert); color: var(--alert-text); }
.badge.sev-out { background: rgba(169, 84, 63, .16); }
.badge.sev-critical { background: var(--alert); color: #fff; }
.explain, .why { display: none; margin-top: 8px; }
.sev-watch .explain, .sev-out .explain, .sev-critical .explain, .why.open, .why.filled { display: block; }
.explain input, .why input { font-size: 0.9375rem; }
.reading.needs .explain input { border: 1.5px solid var(--alert); }
.checking .reading.missing .why { display: block; }
.checking .reading.missing .val { outline: 2px dashed var(--alert); outline-offset: 1px; }
.sev-line { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font: 700 0.875rem var(--body); padding: 6px 10px; border-radius: 16px; border: 1px solid var(--border);
        background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.chip.add { color: var(--text); border-color: var(--algae); display: inline-flex; gap: 6px; align-items: baseline; min-height: 36px; }
.chip.add .mark { color: var(--accent-text); font-weight: 800; white-space: nowrap; }
.chip.add.added { background: var(--tint); border-color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc-tag { color: var(--muted); }
.ab-head .hint { font-weight: 500; }
.actions-box { display: none; margin-top: 10px; padding: 10px 12px; background: var(--tint); border-radius: var(--r); }
.actions-box.has, .card.point:has(.sev-watch, .sev-out, .sev-critical) .actions-box { display: block; }
.ab-head { font-weight: 700; font-size: 0.875rem; }
.act-list { list-style: none; margin: 6px 0; padding: 0; }
.act-list li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 0.9375rem; }
.act-list li span::before { content: "✓ "; color: var(--green); font-weight: 700; }
.act-list li span { flex: 1; }
.act-list li button { border: 0; background: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.add-act { display: flex; gap: 6px; }
.add-act input { font-size: 0.9375rem; padding: 8px 10px; }
.todo-row { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-weight: 700; }
.ring { width: 20px; height: 20px; border-radius: 50%; border: 2px dashed var(--alert); flex: none; }
.todo-row.done { color: var(--accent-text); }
.todo-row.done .ring { border: 0; background: var(--green); box-shadow: inset 0 0 0 5px var(--surface); }
.lib-bar { display: flex; justify-content: flex-end; margin: 6px 0; }
.link { border: 0; background: none; color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; font: 700 0.875rem var(--body); cursor: pointer; padding: 4px 0; }
dialog#lib { width: min(560px, 100vw); max-height: 86vh; margin: auto auto 0; padding: 0; border: 0; border-radius: 12px 12px 0 0;
             background: var(--bg); color: var(--text); display: none; flex-direction: column; }
dialog#lib[open] { display: flex; }
dialog#lib::backdrop { background: rgba(18, 41, 59, .45); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.sheet-sub { padding: 0 16px; color: var(--muted); font-size: 0.875rem; }
.sheet-list { overflow-y: auto; padding: 8px 16px; flex: 1; }
.lib-item { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r); padding: 11px 12px; margin-bottom: 8px; color: var(--text); font: 500 0.875rem/1.4 var(--body); cursor: pointer; }
.lib-item .lt { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; font-size: 0.9375rem; }
.lib-item .lx { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.match { font-size: 0.875rem; font-weight: 700; color: var(--alert-text); }
.sheet-search { padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); }
.search { margin-bottom: 4px; }
.point-head { display: flex; justify-content: space-between; align-items: baseline; }
.point-head .flag { color: var(--alert-text); font-size: 0.875rem; font-weight: 700; }

.flash { background: var(--tint); border-left: 3px solid var(--green); padding: 11px 14px; border-radius: var(--r);
         margin-bottom: 14px; }
.callout { background: var(--tint); border-left: 3px solid var(--alert); padding: 11px 14px; border-radius: var(--r); font-size: 0.875rem; }
.code { font: 900 1.875rem var(--display); letter-spacing: .12em; }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.grid th { background: var(--navy); color: var(--cream); font-weight: 700; text-align: left; padding: 7px 6px; font-size: 0.875rem; }
table.grid td { border-bottom: 1px solid var(--border); padding: 6px; vertical-align: top; }
table.grid input { padding: 6px; font-size: 0.875rem; }
table.grid input[type=checkbox] { width: auto; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rng { display: flex; gap: 4px; align-items: center; min-width: 150px; }
.rng input[type=number], .rng input[type=text] { width: 62px; }

.tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
        display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 30px;
        padding: 5px; z-index: 10; }
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 10px; border-radius: 24px;
          font-size: 0.875rem; font-weight: 700; color: var(--muted); min-width: 62px; }
.tabs a svg { width: 22px; height: 22px; }
.tabs a.on { background: var(--tint); color: var(--accent-text); }
.seg { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.seg a { padding: 7px 13px; border: 1px solid var(--border); border-radius: 20px; font-size: 0.875rem; font-weight: 700;
         white-space: nowrap; background: var(--surface); }
.seg a.on { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.sticky-save { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); background: var(--bg);
               padding: 10px 0; margin-top: 10px; }
@media (max-width: 420px) { .row3 { grid-template-columns: 1fr 1fr; } .stats .stat b { font-size: 1.375rem; } }
.sticky-save .btn { flex: 1 1 0; padding: 12px 6px; letter-spacing: .08em; }
.weeknav { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 700; color: var(--accent-text); margin-bottom: 6px; }
.entry { display: grid; grid-template-columns: 82px 1fr 64px; gap: 6px; align-items: center; margin-bottom: 6px; }
.entry .del { grid-column: 2 / 4; margin: 0; font-size: 0.875rem; display: flex; gap: 6px; align-items: center; }
.entry .del input { width: auto; }
.list.day .adder { border: 0; background: transparent; color: var(--accent-text); font-weight: 700; padding: 0; }
.bulk-line { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.bulk-line select, .bulk-line input { flex: 1 1 120px; width: auto; }
.bulk-line .btn { padding: 9px 12px; }
.target { border-left: 3px solid var(--border); }
.target.has { border-left-color: var(--green); }
.target.tpl { background: var(--tint); }
.target-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.reqbox { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--text); white-space: nowrap; }
.reqbox input, .pton input { width: auto; }
.ptrow { display: grid; grid-template-columns: 1fr 76px 76px; gap: 6px; align-items: center; padding: 4px 0; }
.pton { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--text); font-size: 0.9375rem; }
.ptrow input[inputmode] { padding: 7px 8px; font-size: 0.9375rem; }
/* trend charts: series colors are brand pairs validated for separation (light: Makai/Mauka, dark: Cream/Algae) */
:root { --s1: #12293B; --s2: #6D8C68; --chart-surface: #FFFFFF; --grid: #ECE9E2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1: #F7F5F1; --s2: #9DB298; --chart-surface: #15303F; --grid: rgba(217,212,200,.14); } }
:root[data-theme="dark"] { --s1: #F7F5F1; --s2: #9DB298; --chart-surface: #15303F; --grid: rgba(217,212,200,.14); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters select { flex: 1 1 160px; width: auto; }
.filters .pts { display: flex; flex-wrap: wrap; gap: 6px 14px; flex-basis: 100%; }
.filters .pts label { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--text); font-size: 0.9375rem; }
.filters .pts input { width: auto; }
.chartcard { background: var(--chart-surface); }
.plot { position: relative; touch-action: pan-y; }
svg.trend { width: 100%; height: auto; display: block; overflow: visible; }
svg.trend .grid { stroke: var(--grid); stroke-width: 1; }
svg.trend .axis { stroke: var(--border); stroke-width: 1; }
svg.trend .ax, svg.trend .band-l, svg.trend .end { fill: var(--muted); font: 500 11px var(--body); }
svg.trend .end { fill: var(--text); font-weight: 700; }
svg.trend .band { fill: var(--algae); opacity: .18; }
svg.trend .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.trend .line.s1 { stroke: var(--s1); } svg.trend .line.s2 { stroke: var(--s2); }
svg.trend .mk { stroke: var(--chart-surface); stroke-width: 2; }
svg.trend .mk.s1 { fill: var(--s1); } svg.trend .mk.s2 { fill: var(--s2); }
svg.trend .mk.out { fill: var(--alert); }
svg.trend .xhair { stroke: var(--muted); stroke-width: 1; }
.legend { display: flex; gap: 16px; font-size: 0.875rem; font-weight: 700; margin-bottom: 4px; }
.legend span { display: flex; gap: 6px; align-items: center; }
.key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; flex: none; }
.key.s1 { background: var(--s1); } .key.s2 { background: var(--s2); }
.tip { position: absolute; top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
       padding: 6px 9px; font-size: 0.875rem; pointer-events: none; min-width: 120px; }
.tip .td { color: var(--muted); font-size: 0.875rem; margin-bottom: 2px; }
.tip .tr { display: flex; gap: 6px; align-items: center; }
.bad, .tip b.bad { color: var(--alert-text); }
.tbl summary { cursor: pointer; }
.tbl td.bad { font-weight: 700; }
.last3 { display: flex !important; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.last3 span b { font-weight: 700; color: var(--text); }
.last3 span.bad b, .last3 span.bad { color: var(--alert-text); }
.last3 a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.plot.narrow { display: none; }
@media (max-width: 560px) { .plot.wide { display: none; } .plot.narrow { display: block; } }
.more-list summary { cursor: pointer; color: var(--accent-text); font-weight: 700; padding: 10px 4px; }
/* schedule */
.cal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.whosel { margin-bottom: 6px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 4px 8px; }
.day.today .day-head .eyebrow { color: var(--text); }
.task { display: flex; align-items: center; gap: 10px; }
.task .grow { min-width: 0; }
.task.done .t { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }
.task.missed { box-shadow: inset 3px 0 0 var(--alert); }
.who { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--cream);
       font-size: 0.875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .04em; }
.pick { width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pick.on { background: var(--tint); }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--border); border: 1px solid var(--border);
         border-radius: var(--r); overflow: hidden; margin-top: 8px; }
.dow { background: var(--navy); color: var(--cream); font-size: 11px; font-weight: 700; text-align: center; padding: 5px 0; letter-spacing: .08em; }
.mday { background: var(--surface); min-height: 92px; padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.mday.other { background: var(--bg); color: var(--muted); }
.mday.today .num { background: var(--green); color: var(--cream); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.mday .num { font-size: 13px; font-weight: 700; }
.mday .mt { font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; border-radius: 3px; background: var(--tint); }
.mday .mt.done { opacity: .55; text-decoration: line-through; }
.mday .mt.missed { background: rgba(169, 84, 63, .16); color: var(--alert-text); }
.mday .more { font-size: 11px; color: var(--muted); }
.mday .count { display: none; }
@media (max-width: 560px) {
  .mday { min-height: 54px; }
  .mday .mt, .mday .more { display: none; }
  .mday .count { display: inline-flex; align-self: flex-start; font-size: 11px; font-weight: 700; background: var(--green); color: var(--cream); border-radius: 9px; padding: 0 6px; }
}
@media (min-width: 900px) { main { max-width: 980px; } }
.list.hidden { display: none; }
.noday { margin: -2px 4px 0; color: var(--muted); font-size: 0.875rem; }
.day-head { margin-top: 14px; }
/* html.phone: the demo recorder renders the phone layout on a 2× canvas, so media queries can't see the
   phone width; this class applies the same phone-only rules. Real browsers never set it. */
html.phone .row3 { grid-template-columns: 1fr 1fr; }
html.phone .stats .stat b { font-size: 22px; }
html.phone .plot.wide { display: none; } html.phone .plot.narrow { display: block; }
html.phone .mday { min-height: 54px; }
html.phone .mday .mt, html.phone .mday .more { display: none; }
html.phone .mday .count { display: inline-flex; align-self: flex-start; font-size: 11px; font-weight: 700;
  background: var(--green); color: var(--cream); border-radius: 9px; padding: 0 6px; }
html.phone dialog#lib { width: 50vw; max-height: 43vh; }  /* vw/vh are doubled by the recorder's 2× zoom */
/* visit type tag: text label always; only Service (the routine) is quiet, the rest stand out a little */
.ktag { font-size: 0.875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px;
        border-radius: 3px; background: var(--tint); color: var(--accent-text); margin-right: 2px; }
.ktag.k-service { background: transparent; color: var(--muted); padding-left: 0; }
.ktag.k-prospect, .ktag.k-special { background: var(--navy); color: var(--cream); }
.typepick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.typepick .tp { margin: 0; cursor: pointer; }
.typepick .tp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.typepick .tp span { display: inline-block; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 18px;
                     font: 700 0.875rem var(--body); color: var(--text); background: var(--surface); }
.typepick .tp input:checked + span { background: var(--green); border-color: var(--green); color: var(--cream); }
.typepick .tp input:checked + span::before { content: "✓ "; }
.typepick .tp input:focus-visible + span { outline: 2px solid var(--algae); outline-offset: 2px; }
.deliverybox { display: none; margin: 12px 0 4px; padding: 10px 12px; background: var(--tint); border-radius: var(--r); }
.dl-head, .dl-row { display: grid; grid-template-columns: 1fr 64px 128px; gap: 6px; align-items: center; }
.dl-head { font-size: 0.875rem; font-weight: 700; color: var(--muted); margin: 6px 0 2px; }
.dl-row { margin-bottom: 6px; }
.dl-row input, .dl-row select { padding: 8px; font-size: 0.9375rem; }
.task .deliv { color: var(--text); font-weight: 700; font-size: 0.875rem; }
ul.items { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.875rem; }
ul.items li { padding: 1px 0; }
.loadlist table.grid td { font-size: 0.9375rem; }
/* accounts / CRM */
.acct-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill.st-active { background: var(--algae); color: var(--navy); }
.pill.st-prospect { background: var(--navy); color: var(--cream); }
.pill.st-inactive, .pill.st-lost { background: var(--stone); color: var(--navy); }
.acct-nav { margin: 4px 0 0; }
section { scroll-margin-top: 12px; }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 26px 4px 8px; }
.acct-row .eyebrow { margin: 0; }
.acct-meta { display: flex; gap: 6px; align-items: center; flex: none; }
.acct-meta .who { width: 26px; height: 26px; font-size: 10px; }
details.contact { display: block !important; padding: 0 !important; }
details.contact > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; }
details.contact > summary::-webkit-details-marker { display: none; }
details.contact .quick { display: flex; gap: 6px; }
details.contact .quick a { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.contact-form { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.timeline { margin-top: 12px; }
.tl { display: flex; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--border); color: inherit; }
.tl-kind { flex: none; width: 74px; font-size: 0.875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); padding-top: 2px; }
.tl-kind.rep { color: var(--muted); }
.tl-meta { font-size: 0.875rem; color: var(--muted); }
.bulkbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bulkbar select { flex: 1 1 180px; width: auto; }
.assign-row { display: grid !important; grid-template-columns: 1fr minmax(140px, 200px); gap: 10px; align-items: center; }
.pick-acct { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--text); font-size: 0.9375rem; }
.pick-acct input { width: auto; }
/* report form: hidden default Save (so Enter can never check out) and the save/signal status line */
.default-submit { display: none; }
.syncline { flex-basis: 100%; display: flex; align-items: flex-start; gap: 4px 8px; flex-wrap: wrap; font-size: 0.875rem; font-weight: 600;
  color: var(--text); padding: 2px 2px 0; }
#synctext { flex: 1 1 12em; }
.syncline .sdot { width: 10px; height: 10px; margin-top: .4em; border-radius: 50%; flex: none; background: var(--green); }
.syncline[data-state="local"] .sdot { background: var(--navy); }
.syncline[data-state="offline"] .sdot { background: transparent; box-shadow: inset 0 0 0 2px var(--text); }
.syncline[data-state="sending"] .sdot { background: var(--algae); animation: kem-breathe 1.6s ease-in-out infinite; }
.syncline[data-state="error"] .sdot, .syncline[data-state="conflict"] .sdot { background: var(--alert); }
.syncline .link { font-size: 0.875rem; padding: 6px 2px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@keyframes kem-breathe { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .syncline[data-state="sending"] .sdot { animation: none; } }
/* report form: sample-point navigator (sticks while you're in the sample points) */
.pointnav { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 18px -16px 0; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--navy);
  border-bottom: 1px solid var(--border); overscroll-behavior-x: contain; }
.pointnav::-webkit-scrollbar { display: none; }
.pn { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 22px;
  border: 1px solid rgba(157, 178, 152, .55); background: transparent; color: var(--cream); font: 600 0.875rem var(--body);
  white-space: nowrap; cursor: pointer; }
.pn b { font-weight: 800; }
.pn-left { color: var(--algae); }
.pn.done .pn-left { color: var(--cream); }
.pn-ex:empty { display: none; }
.pn-ex { background: var(--alert); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 0.875rem; font-weight: 700; }
.pn[aria-current] { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.pn[aria-current] .pn-left, .pn[aria-current].done .pn-left { color: var(--navy); }
.pn:focus-visible { outline: 2px solid var(--algae); outline-offset: 2px; }
.points > .pt-head:nth-child(2) { margin-top: 18px; }
html:has(.pointnav) { scroll-padding-top: calc(var(--pn-h, 60px) + 12px); }  /* focused fields never hide under the bar */

/* status first; an offline or out-of-service point folds its readings away */
.pt-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px;
  margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.pt-status label { margin: 0; font-weight: 700; }
.pt-status select { width: auto; min-width: 160px; }
.pt-skip { display: none; }
.card.point.is-off .pt-skip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding: 10px 0; color: var(--text); }
.pt-skip .link { padding: 8px 0; }
.card.point.is-off:not(.show-all) .pt-body { display: none; }

/* larger text: on iPhone and iPad, follow the Text Size setting (rem sizes scale with it) */
@supports (font: -apple-system-body) { @media (pointer: coarse) { html { font: -apple-system-body; } } }

/* report form: no tab bar (leave via the logo or the customer link), so the save bar sits on the bottom edge */
body.no-tabs { padding-bottom: env(safe-area-inset-bottom); }
.no-tabs .tabs { display: none; }
.no-tabs .sticky-save { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
html:has(.sticky-save) { scroll-padding-bottom: calc(var(--save-h, 120px) + 12px); }

/* disabled actions (while a save is sending) look unavailable */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* finished reports: chips only navigate, and nothing is folded away */
.readonly .pn-left, .readonly .pn-ex, .readonly .pt-show { display: none; }
.readonly .card.point.is-off .pt-body { display: block; }
.readonly .card.point.is-off .pt-skip { display: none; }

/* LSI temperature: same row shape as a reading, without the N/T button */
.index-temp { padding: 9px 0; border-top: 1px solid var(--border); }
.index-temp .line { display: grid; grid-template-columns: minmax(0, 1fr) 6.75em 3em; gap: 8px; align-items: center; }
.index-temp .lbl label { margin: 0; font-size: 1rem; color: var(--text); }
.index-temp .lbl small { display: block; font-weight: 500; color: var(--muted); font-size: .875rem; }
.index-temp .lbl small.state:empty { display: none; }
.index-temp .val { text-align: right; font-weight: 700; }
.index-temp.missing small.state { color: var(--alert-text); font-weight: 700; }
.checking .index-temp.missing .val, .index-temp.bad .val:not(:focus) { outline: 2px dashed var(--alert); outline-offset: 1px; }
@container (max-width: 19em) {
  .index-temp .line { grid-template-columns: minmax(0, 1fr) 3em; }
  .index-temp .line .lbl { grid-column: 1 / -1; }
}