/* Clearline PWA Kit: components
   Each block is self-contained. Markup examples live in gallery.html. */

/* ============ App shell ============ */
/* Glass header: logo on root screens, back + title on inner screens */
.top {
  position: sticky; top: 0; z-index: 20; min-height: var(--header-h);
  padding: calc(var(--safe-t) + 10px) 16px 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--hair); color: var(--ink);
}
.top h1 { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .back { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -6px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 26px; line-height: 1; padding-bottom: 3px; }
.top .back:active { background: var(--surface-2); }
.brandbar { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brandbar img { height: 26px; width: auto; display: block; }
.brandbar .app-name { font-size: 12.5px; font-weight: 500; color: var(--muted); border-left: 1px solid var(--hair); padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two logo files, one per theme */
.logo-d { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-l { display: none !important; } :root:not([data-theme="light"]) .logo-d { display: block !important; } }
:root[data-theme="dark"] .logo-l { display: none !important; }
:root[data-theme="dark"] .logo-d { display: block !important; }
/* Connection pill */
.pill { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.off { background: #f59e0b; color: #241400; }
.pill.sync { background: var(--info); color: #fff; }
.banner { margin: 12px 16px 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-size: 13px; }
@media (min-width: 860px) { .banner { max-width: calc(var(--maxw) - 32px); margin-left: auto; margin-right: auto; } }
main { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px calc(120px + var(--safe-b)); }

/* Floating tab bar */
.tabs {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); z-index: 20;
  display: flex; gap: 4px; padding: 6px; border-radius: 14px; width: min(400px, calc(100% - 32px));
  background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--hair); box-shadow: 0 12px 32px -12px rgba(16, 19, 34, .35);
}
.tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600; transition: background .2s var(--ease), color .2s; }
.tabs a svg { width: 20px; height: 20px; flex: none; }
.tabs a.on { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs a.on { background: #f0f1f5; color: #101322; } }
:root[data-theme="dark"] .tabs a.on { background: #f0f1f5; color: #101322; }

/* ============ Surfaces ============ */
.card, .list, .insight, .metric, .panel, .chart-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; }
.card { padding: 20px; margin-bottom: 14px; }
.card > h2 { margin-bottom: 12px; font-size: 19px; }
.panel { padding: 16px; margin-bottom: 16px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 2px 12px; }
.panel-head h3 { font-size: 18px; }
/* Section title: brochure capitals with a short orange rule */
.sub { display: flex; align-items: center; gap: 10px; margin: 28px 4px 12px; font: 700 13px/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.sub::before { content: ""; width: 14px; height: 3px; background: var(--accent); flex: none; margin-top: -2px; }
.sub .linkbtn, .sub .more { margin-left: auto; font: 600 13px var(--font); letter-spacing: 0; text-transform: none; padding: 0; }
.actions { display: grid; gap: 10px; margin-top: 20px; }

/* Hero: deep navy with the brochure's cut corner and orange fade. One per screen, at the top. */
.hero {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg); padding: 22px 20px 20px; margin-bottom: 16px;
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
/* Geometric fade: an orange→amber wedge across the top-right, plus a thin diagonal rule */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto auto; width: min(62%, 340px); height: 100%; pointer-events: none;
  background: linear-gradient(200deg, rgba(246, 161, 58, .34) 0%, rgba(226, 81, 39, .3) 34%, rgba(226, 81, 39, 0) 72%);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 82% 100%);
}
.hero::after {
  content: ""; position: absolute; top: 0; right: 30%; width: 2px; height: 160%; background: linear-gradient(var(--accent), rgba(226, 81, 39, 0));
  transform: rotate(-24deg); transform-origin: top; opacity: .55; pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: rgba(255, 255, 255, .7); }
.hero h2 { font: 700 28px/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin: 8px 0 16px; color: #fff; padding-top: 3px; }
.hero h2.plain { font: 650 30px/1.08 var(--font); text-transform: none; letter-spacing: -0.035em; padding-top: 0; }
.hero-top { display: flex; align-items: flex-start; gap: 12px; }
.hero-badge { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font: 700 17px/1 var(--font-display); letter-spacing: .04em; color: #fff; padding-top: 2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); }
.hero-sub { margin: -8px 0 6px; color: rgba(255, 255, 255, .8); font-size: 14.5px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: rgba(255, 255, 255, .62); font-family: var(--font-mono); }
.hero .btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; }
.hero .tag { background: var(--accent-btn); color: #fff; }
.hero .tag.grey { background: rgba(255, 255, 255, .14); color: #fff; }
.hero .tag.warn { background: #ffd8a8; color: #3a2100; }
.hero .small { color: rgba(255, 255, 255, .8); }
:root[data-contrast="high"] .hero::before, :root[data-contrast="high"] .hero::after { opacity: .5; }
@media (min-width: 700px) { .hero { padding: 28px; } .hero h2 { font-size: 36px; } .hero h2.plain { font-size: 38px; } }

/* Figures: in a hero (.figures) or on a card (.stats) */
.figures, .stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.figures { margin-bottom: 12px; }
.figure { padding: 2px 14px; border-left: 1px solid rgba(255, 255, 255, .14); }
.figure:first-child { padding-left: 0; border-left: 0; }
.stats { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); padding: 16px 4px; margin-bottom: 14px; }
.stat { padding: 0 16px; border-left: 1px solid var(--hair); }
.stat:first-child { border-left: 0; }
.figure b, .stat b { display: block; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.figure span, .stat span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; }
.figure span { color: rgba(255, 255, 255, .62); }
.stat span { color: var(--muted); }
.figure.hot b { color: #ffb38f; }
.stat.hot b { color: var(--accent-ink); }
.card .stats { box-shadow: none; background: var(--surface-2); }

/* Progress */
.progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 2px 0 10px; }
.hero .progress { background: rgba(255, 255, 255, .14); }
.progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff8a5c, var(--accent)); transition: width .5s var(--ease); }

/* ============ Forms ============ */
label.f { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
label.f > span { display: block; margin: 0 2px 6px; }
label.f .hint { display: block; margin: 6px 2px 0; font-weight: 400; font-size: 12.5px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 12px 14px; min-height: 50px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
input[type="checkbox"], input[type="radio"] { width: 24px; min-height: 24px; height: 24px; padding: 0; accent-color: var(--accent-btn); flex: none; }
textarea { min-height: 88px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; align-items: end; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: end; }
.check { display: flex; gap: 12px; align-items: center; font-weight: 500; margin: 6px 0 14px; }
.inset { border-radius: var(--r-md); padding: 14px; margin-bottom: 12px; background: var(--surface-2); }
.inset input, .inset select, .inset textarea { background: var(--surface); }

/* Search with keyboard toggle */
.search { position: sticky; top: var(--header-h); z-index: 10; background: linear-gradient(var(--bg) 82%, transparent); padding: 4px 0 12px; }
.search-row { position: relative; }
.search input[type="search"] { border-radius: 12px; padding-left: 44px; padding-right: 70px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7183' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") no-repeat 17px 50%; box-shadow: var(--lift); }
.kb-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); height: 36px; min-width: 52px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--surface-2); color: var(--ink); font: 600 13px var(--font-mono); cursor: pointer; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font: 600 16px/1 var(--font); letter-spacing: -0.01em; border-radius: 13px; padding: 0 22px; min-height: 54px;
  background: var(--accent-btn); color: #fff; text-decoration: none;
  transition: transform .12s var(--ease), background .2s, box-shadow .2s;
  box-shadow: 0 10px 24px -14px rgba(201, 68, 32, .9);
}
.btn:active { transform: scale(.97); }
.btn.block { width: 100%; }
.btn svg, .linkbtn svg { width: 20px; height: 20px; flex: none; }
.btn.sm svg { width: 16px; height: 16px; }
.btn.ghost { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.btn.dark { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -14px rgba(16, 19, 34, .9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.dark { background: #f0f1f5; color: #101322; } }
:root[data-theme="dark"] .btn.dark { background: #f0f1f5; color: #101322; }
.btn.danger { background: transparent; color: var(--bad); box-shadow: none; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.step { width: 44px; height: 44px; border-radius: 11px; border: 0; background: var(--surface-2); color: var(--ink); font: 500 22px/1 var(--font); cursor: pointer; transition: transform .1s; }
.step:active { transform: scale(.92); background: var(--accent-tint); }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper b { min-width: 22px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.linkbtn { background: none; border: 0; padding: 6px 0; color: var(--accent-ink); font: 600 13px var(--font); cursor: pointer; text-align: left; }

/* ============ Chips & segmented control ============ */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--hair); background: var(--surface); color: var(--ink-2); border-radius: 9px; padding: 8px 14px; font: 600 13px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.chip.on { background: var(--sel); border-color: var(--sel); color: var(--surface); }
.chip-n { margin-left: 5px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: 2px; padding: 4px; margin-bottom: 16px; border-radius: 12px; background: var(--surface-2); }
.seg.sticky { position: sticky; top: calc(var(--header-h) + 8px); z-index: 8; box-shadow: 0 8px 20px -16px rgba(16, 19, 34, .5); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--muted); font: 600 14px var(--font); padding: 10px 6px; border-radius: 9px; cursor: pointer; transition: background .25s var(--ease), color .2s, box-shadow .25s; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 19, 34, .12), 0 4px 12px -6px rgba(16, 19, 34, .25); }

/* ============ Lists ============ */
.list { overflow: hidden; }
.card .list { box-shadow: none; background: var(--surface-2); border-radius: var(--r-md); }
.item { display: flex; gap: 14px; align-items: center; padding: 14px 18px; text-decoration: none; color: inherit; position: relative; }
.item + .item::before { content: ""; position: absolute; top: 0; left: 74px; right: 0; height: 1px; background: var(--hair); }
.list.plain .item + .item::before, .card .item + .item::before { left: 18px; }
a.item, button.item { transition: background .15s; }
a.item:active, button.item:active { background: var(--surface-2); }
button.item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.item .t { font-weight: 600; letter-spacing: -0.01em; }
.item .s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.item .chev { font-size: 24px; color: var(--muted); }
.avatar { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font: 600 13.5px var(--font); color: #fff; background: var(--navy-2); }
.thumb { flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: contain; background: #fff; border: 1px solid var(--hair); }
.tag { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--accent-tint); color: var(--accent-ink); white-space: nowrap; }
.tag.grey { background: var(--surface-2); color: var(--muted); }
.tag.good { background: var(--good-bg); color: var(--good); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: 0; margin-right: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; margin: 6px 4px 8px; color: var(--muted); }

/* ============ Explaining numbers ============ */
/* Insight: one big number + plain-English rule */
.insight { display: flex; gap: 18px; align-items: center; padding: 18px 20px; margin-bottom: 16px; }
.insight-num { flex: none; min-width: 72px; }
.insight-num b { display: block; font-size: 46px; font-weight: 600; line-height: .95; letter-spacing: -0.05em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.insight-num span { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.insight-txt { font-size: 14.5px; color: var(--ink-2); min-width: 0; }
.insight-txt b { color: var(--ink); font-weight: 600; }

/* Count badge: the number a person acts on, with a colour stripe */
.count { flex: none; width: 60px; height: 64px; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink); position: relative; overflow: hidden; }
.count::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--stripe, var(--accent)); }
.count b { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.count span { margin-top: 3px; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.count.sm { width: 50px; height: 48px; flex-direction: row; gap: 1px; border-radius: var(--r-sm); }
.count.sm b { font-size: 22px; }
.count.sm span { margin: 0; font-size: 14px; }

/* Metric row: count + name + bar + reason */
.metrics { display: grid; gap: 10px; }
.metric { display: flex; gap: 14px; align-items: center; padding: 14px; }
.metric-main { flex: 1; min-width: 0; }
.metric-name { font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.015em; }
.metric-meta { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; padding-right: 64px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.metric-why { font-size: 13px; margin-top: 8px; line-height: 1.4; color: var(--ink-2); }
.bar { position: relative; height: 6px; background: var(--surface-2); border-radius: 3px; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--stripe, var(--accent)); }
.bar span { position: absolute; right: 0; top: -21px; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.up { color: var(--good); font-size: 12px; font-weight: 600; }
.down { color: var(--bad); font-size: 12px; font-weight: 600; }

/* Score */
.score { padding: 8px 14px; border-radius: var(--r-md); min-width: 84px; }
.score b { display: block; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.score span { font-size: 11.5px; font-weight: 500; }
.score.good { background: var(--good-bg); color: var(--good); }
.score.mid { background: var(--warn-bg); color: var(--warn); }
.score.low { background: var(--bad-bg); color: var(--bad); }

/* ============ Checklist ============ */
.tick-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 6px; border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.tick-row:active { background: var(--surface-2); }
.tickbox { flex: none; width: 28px; height: 28px; border-radius: 7px; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.tick-row.done .tickbox { background: var(--accent-btn); border-color: var(--accent-btn); transform: scale(1.05); }
.tick-row.done .tick-name b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tick-name { display: flex; flex-direction: column; min-width: 0; }
.tick-name b { font-size: 16px; font-weight: 600; }
.tick-name small { font-size: 12.5px; color: var(--muted); }

/* ============ Notices & empty states ============ */
.note { border-radius: var(--r-md); padding: 12px 16px; font-size: 13.5px; margin-bottom: 14px; }
.note ul { margin: 4px 0 0; padding-left: 18px; }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.good { background: var(--good-bg); color: var(--good); }
.note.bad { background: var(--bad-bg); color: var(--bad); }
.note.info { background: var(--accent-tint); color: var(--ink-2); }
.empty { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 32px 20px; }
.empty > svg { width: 32px; height: 32px; color: var(--muted); }
.empty b { font-size: 16px; font-weight: 600; }
.empty .btn { margin-top: 8px; }

/* Skeleton loading */
.skel { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%) 0 0 / 300% 100%; animation: skel 1.3s linear infinite; min-height: 14px; }
@keyframes skel { to { background-position: -150% 0; } }

/* ============ Sticky bottom dock (live status above the tab bar) ============ */
.dock { position: sticky; bottom: calc(84px + var(--safe-b)); z-index: 6; margin-top: 16px; border-radius: 14px; padding: 8px 8px 8px 20px; display: flex; align-items: center; gap: 12px; color: #fff; background: rgba(16, 19, 34, .95); box-shadow: 0 16px 32px -14px rgba(16, 19, 34, .6); min-height: 56px; }
.dock b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dock .small { opacity: .75; }
.dock .btn { min-height: 44px; }
.dock.bad { background: rgba(180, 35, 24, .95); }

/* ============ Upload ============ */
.dropzone { display: grid; place-items: center; gap: 4px; text-align: center; padding: 34px 16px; border-radius: var(--r-md); border: 1.5px dashed var(--line); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone svg { width: 28px; height: 28px; color: var(--accent-ink); }
.dropzone b { font-weight: 600; font-size: 16px; color: var(--accent-ink); }
.dropzone.over, .dropzone:hover { border-color: var(--accent); background: var(--accent-tint); }

/* ============ Photos ============ */
.shot { position: relative; border-radius: var(--r-md); overflow: hidden; background: #0c0e16; line-height: 0; cursor: zoom-in; }
.shot img { width: 100%; display: block; }
.shot::after { content: "Tap to zoom"; position: absolute; right: 10px; bottom: 10px; line-height: 1; font: 600 11.5px var(--font); color: #fff; background: rgba(16, 19, 34, .55); padding: 6px 10px; border-radius: 6px; pointer-events: none; }
/* Before / after compare: <div class="compare" style="--pos:50%"> two imgs + .compare-line + input.compare-range */
.compare { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #0c0e16; user-select: none; max-width: 100%; }
.compare > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .after { clip-path: inset(0 0 0 var(--pos)); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.compare-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 9px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23101322' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 6-4 4 4 4M13 6l4 4-4 4'/%3E%3C/svg%3E") no-repeat center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; min-height: 0; padding: 0; }
.compare-tag { position: absolute; top: 12px; font: 600 12px var(--font); color: #fff; padding: 5px 10px; border-radius: 6px; pointer-events: none; }
.compare-tag.b { left: 12px; background: rgba(16, 19, 34, .7); }
.compare-tag.a { right: 12px; background: rgba(201, 68, 32, .92); }
/* Full-screen zoom (opened by ui.openZoom) */
.zoom { position: fixed; inset: 0; z-index: 100; background: rgba(5, 6, 10, .96); display: flex; flex-direction: column; padding-top: var(--safe-t); padding-bottom: var(--safe-b); animation: vt-in .25s var(--ease); }
.zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; color: #c2c7d6; font-size: 13px; }
.zoom-bar .btn { background: #f0f1f5; color: #101322; box-shadow: none; }
.zoom-scroll { flex: 1; overflow: auto; touch-action: pan-x pan-y pinch-zoom; display: flex; align-items: center; }
.zoom-scroll img { width: 240%; max-width: none; display: block; }
@media (min-width: 900px) { .zoom-scroll img { width: 140%; } }

/* ============ Bottom sheet (ui.sheet / ui.confirm) ============ */
.sheet-back { position: fixed; inset: 0; z-index: 110; background: rgba(5, 6, 10, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s var(--ease); }
.sheet { width: min(520px, 100%); background: var(--surface); border-radius: 16px 16px 0 0; padding: 10px 20px calc(20px + var(--safe-b)); box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .4); animation: sheet-up .32s var(--ease); }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
.sheet h3 { font-size: 19px; margin-bottom: 6px; }
.sheet p { color: var(--ink-2); }
.sheet .actions { margin-top: 16px; }
.sheet-back.out { animation: fade .18s var(--ease) reverse both; }
.sheet-back.out .sheet { animation: sheet-up .2s var(--ease) reverse both; }
@keyframes fade { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (min-width: 700px) { .sheet-back { align-items: center; } .sheet { border-radius: 16px; padding-bottom: 20px; } }

/* ============ Notifications (ui.toast) ============ */
#toasts { position: fixed; z-index: 120; left: 0; right: 0; top: calc(var(--safe-t) + 64px); display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast {
  pointer-events: auto; position: relative; overflow: hidden; width: min(440px, 100%);
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 15px 14px; border-radius: 12px;
  font: 600 15px/1.35 var(--font); letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 18px 40px -12px rgba(16, 19, 34, .45), 0 2px 6px rgba(16, 19, 34, .12);
  animation: toast-in .42s cubic-bezier(.2, 1.3, .3, 1) both;
}
.toast.out { animation: toast-out .24s var(--ease) both; }
.toast-ic { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.toast-ic svg { width: 20px; height: 20px; }
.toast-msg { flex: 1; min-width: 0; }
.toast-life { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: toast-life var(--life, 3200ms) linear both; }
.toast-success { background: var(--accent-btn); color: #fff; }
.toast-success .toast-ic { background: #fff; color: var(--accent-btn); }
.toast-success .toast-life { background: rgba(255, 255, 255, .55); }
.toast-warn { background: #ffd27a; color: #2b1800; }
.toast-warn .toast-ic { background: #2b1800; color: #ffd27a; }
.toast-warn .toast-life { background: rgba(43, 24, 0, .35); }
.toast-error { background: #b42318; color: #fff; }
.toast-error .toast-ic { background: #fff; color: #b42318; }
.toast-error .toast-life { background: rgba(255, 255, 255, .5); }
.toast-info, .toast-busy { background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px -12px rgba(16, 19, 34, .45), inset 0 0 0 1px var(--hair); }
.toast-info .toast-ic, .toast-busy .toast-ic { background: var(--accent-tint); color: var(--accent-ink); }
.toast-info .toast-life, .toast-busy .toast-life { background: var(--accent); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--accent-tint); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-18px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes toast-life { to { transform: scaleX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out, .toast-life, .skel { animation: none; } }

/* ============ Sign in ============ */
.login-hero { padding: calc(var(--safe-t) + 64px) 16px 88px; display: grid; place-items: center; background: linear-gradient(200deg, rgba(246, 161, 58, .35) 0%, rgba(226, 81, 39, .32) 30%, rgba(226, 81, 39, 0) 60%), var(--navy); }
.login-hero img { width: 240px; max-width: 72%; height: auto; }
.login { max-width: 420px; margin: -48px auto 0; padding: 0 16px 40px; }
.login-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); padding: 24px; }

/* ============ Install prompt chip (ui.installChip) ============ */
.install { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); margin-bottom: 14px; }
.install img { width: 40px; height: 40px; border-radius: 10px; }

/* ============ Print ============ */
@media print {
  .top, .tabs, .no-print, .dock, .banner { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; max-width: none; }
  .card, .panel, .list { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .hero, .count { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =====================================================================
   v2 additions: motion, shop-floor gestures, sync, charts, reports,
   desktop layout, camera. Markup examples in gallery.html.
   ===================================================================== */

/* ============ Motion ============ */
/* Lists that ripple in: <div class="list stagger">. The app adds .in on screen entry only. */
.stagger.in > * { animation: rise .42s var(--ease) both; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.pop { animation: pop .32s var(--spring) both; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
/* Count-up numbers keep their width while counting */
[data-count] { font-variant-numeric: tabular-nums; }

/* ============ Sync status (header) and outbox ============ */
.sync { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.sync.waiting i { background: var(--info); animation: pulse 1.2s ease-in-out infinite; }
.sync.off { background: var(--offline); color: #241400; }
.sync.off i { background: #241400; }
.sync.err { background: var(--bad); color: #fff; }
.sync.err i { background: #fff; }
@keyframes pulse { 50% { opacity: .35; } }
.outbox-item { display: flex; gap: 12px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--hair); }
.outbox-item:first-child { border-top: 0; }
.outbox-item .ic { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.outbox-item .ic svg { width: 18px; height: 18px; }
.outbox-item.sent .ic { background: var(--good-bg); color: var(--good); }
.outbox-item.failed .ic { background: var(--bad-bg); color: var(--bad); }
.sync-summary { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); margin: 6px 0 14px; background: var(--good-bg); color: var(--good); }
.sync-summary.waiting { background: var(--accent-tint); color: var(--ink-2); }
.sync-summary.off { background: var(--warn-bg); color: var(--warn); }
.sync-summary svg { width: 26px; height: 26px; flex: none; }
.sync-summary b { display: block; font-size: 16px; color: var(--ink); }

/* ============ Pull to refresh ============ */
.ptr { position: fixed; z-index: 30; left: 50%; top: calc(var(--safe-t) + var(--header-h) - 8px); width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent-ink); box-shadow: 0 8px 20px -8px rgba(16, 19, 34, .5); transform: translateY(var(--pull, -60px)) rotate(calc(var(--pull, 0px) * 3)); opacity: var(--ptr-o, 0); pointer-events: none; transition: transform .25s var(--ease), opacity .2s; }
.ptr svg { width: 20px; height: 20px; }
.ptr.dragging { transition: none; }
.ptr.ready { color: #fff; background: var(--accent-btn); }
.ptr.busy svg { display: none; }
.ptr.busy::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--accent-tint); border-top-color: var(--accent); animation: spin .8s linear infinite; }

/* ============ Swipe rows ============ */
/* <div class="swipe"><div class="swipe-acts">…buttons…</div><a class="item swipe-front">…</a></div>
   Swipe the row left to reveal the actions; tap one or tap the row to close. */
.swipe { position: relative; overflow: hidden; }
.swipe + .swipe::before { content: ""; position: absolute; z-index: 2; top: 0; left: 74px; right: 0; height: 1px; background: var(--hair); }
.swipe-front { position: relative; z-index: 1; background: var(--surface); transform: translateX(var(--sx, 0px)); transition: transform .28s var(--ease); touch-action: pan-y; }
.card .swipe-front { background: var(--surface-2); }
.swipe.dragging .swipe-front { transition: none; }
.swipe-acts { position: absolute; inset: 0 0 0 auto; display: flex; }
.swipe-acts > * { width: 76px; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font: 600 12px var(--font); text-decoration: none; cursor: pointer; }
.swipe-acts svg { width: 22px; height: 22px; }
.sa-call { background: #0a7a46; }
.sa-map { background: #3a4fd8; }
.sa-log { background: var(--accent-btn); }
.sa-more { background: #4b5263; }
.sa-done { background: #0e7490; }
.swipe-hint { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); margin: 0 4px 8px; }
/* Mouse users: actions show on hover instead of swiping */
@media (hover: hover) and (pointer: fine) {
  .swipe-acts { opacity: 0; transition: opacity .15s; }
  .swipe:hover .swipe-acts, .swipe:focus-within .swipe-acts { opacity: 1; }
  .swipe:hover .swipe-front, .swipe:focus-within .swipe-front { --sx: calc(var(--acts, 3) * -76px); }
  .swipe-hint { display: none; }
}

/* ============ Charts (kit/charts.js draws them; colours come from --c1…--c6) ============ */
.chart-card { padding: 16px 16px 14px; margin-bottom: 14px; }
.card .chart-card { box-shadow: none; background: var(--surface-2); outline: 0; }
.chart-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.chart-head .eyebrow { margin-bottom: 6px; }
.chart-big { font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.chart-why { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }
.chart { display: block; max-width: 100%; height: auto; overflow: visible; }
.chart text { font: 500 11px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .gl { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .ln { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .ln.prev { stroke-width: 1.75; stroke-dasharray: 4 4; }
.chart .area { opacity: .12; }
.chart .pt { stroke: var(--surface); stroke-width: 2; }
.chart .cursor { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .lbl-end { font-weight: 600; }
.chart-tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); background: var(--navy); color: #fff; font: 600 12px/1.35 var(--font); padding: 6px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.chart-tip span { font-weight: 500; opacity: .75; }
.chart-wrap { position: relative; }
/* Sparkline: inline next to a number */
.spark { display: inline-block; width: 84px; height: 28px; vertical-align: middle; overflow: visible; }
.spark .ln { fill: none; stroke: var(--c1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: var(--c1); opacity: .12; }
.spark .end { fill: var(--c1); }
.hero .spark .ln { stroke: #ffb38f; } .hero .spark .area { display: none; } .hero .spark .end { fill: #ffb38f; }
/* This week vs last week */
.delta { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--font); padding: 4px 8px 4px 6px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta svg { width: 14px; height: 14px; }
.delta.up { background: var(--good-bg); color: var(--good); }
.delta.down { background: var(--bad-bg); color: var(--bad); }
.delta.flat { background: var(--surface-2); color: var(--muted); }
.hero .delta.up { background: rgba(111, 211, 155, .18); color: #8ff0b8; }
.hero .delta.down { background: rgba(255, 138, 128, .18); color: #ffb0a8; }
.hero .delta.flat { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); }
.wvw { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.wvw .chart-card { margin: 0; padding: 14px; }
.wvw .chart-big { font-size: 28px; }
.wvw .sub-l { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
@media (max-width: 420px) { .wvw { --n: 2 !important; } .wvw > :nth-child(3):last-child { grid-column: 1 / -1; } }
/* Share bar: one 100% bar split by brand, with a legend underneath */
.share { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.share i { display: block; height: 100%; min-width: 3px; }
.entering .share i { animation: grow .7s var(--ease) both; transform-origin: left; }
.share-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 14px; margin-top: 12px; font-size: 13px; }
.share-legend > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.share-legend b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.share-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
/* Horizontal bars: ranked lists (brands, towns, reps) */
.hbars { display: grid; gap: 12px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.hbar .l { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hbar .v small { font-weight: 500; color: var(--muted); margin-left: 4px; }
.hbar .t { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--surface-2); position: relative; overflow: hidden; }
.hbar .t i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--c, var(--c1)); transform-origin: left; }
.entering .hbar .t i { animation: grow .7s var(--ease) both; }
.hbar .t b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); border-radius: 1px; }
@keyframes grow { from { transform: scaleX(0); } }
/* Before / after pairs */
.ba { display: grid; gap: 12px; }
.ba-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 12px; align-items: center; font-size: 13px; }
.ba-row .l { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-bars { display: grid; gap: 3px; }
.ba-bars div { display: flex; align-items: center; gap: 8px; }
.ba-bars i { display: block; height: 9px; border-radius: 3px; transform-origin: left; }
.entering .ba-bars i { animation: grow .7s var(--ease) both; }
.ba-bars .b i { background: var(--rail); }
.ba-bars .a i { background: var(--c, var(--c1)); }
.ba-bars span { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ba-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.ba-legend .key.b { background: var(--rail); } .ba-legend .key.a { background: var(--c1); }
/* Ring: one percentage (coverage, compliance) */
.ring { position: relative; width: 76px; height: 76px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring .track { stroke: var(--surface-2); }
.ring .val { stroke: var(--c, var(--c1)); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero .ring .track { stroke: rgba(255, 255, 255, .14); }
/* Day strip: last 14 days as small columns */
.days { display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); gap: 4px; align-items: end; height: 72px; }
.days i { display: block; border-radius: 3px 3px 1px 1px; background: var(--c, var(--c1)); min-height: 3px; transform-origin: bottom; }
.entering .days i { animation: rise-y .6s var(--ease) both; }
.days i.zero { background: var(--surface-2); }
.days i.today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.days-l { display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); gap: 4px; margin-top: 6px; font-size: 10.5px; color: var(--muted); text-align: center; }
@keyframes rise-y { from { transform: scaleY(0); } }
/* Data table for reports: tabular numbers, sticky first column when it scrolls */
.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th { text-align: left; font: 700 10.5px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.dtable td { padding: 10px; border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.dtable td.n, .dtable th.n { text-align: right; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tfoot td { font-weight: 650; border-top: 1.5px solid var(--line); }

/* ============ Reports (screen and print) ============ */
/* Wrap a report screen in .report. It prints as A4 in the brochure style (Share → Save as PDF). */
.report { --bg: var(--ice); }
.report-cover { position: relative; overflow: hidden; color: #fff; background: var(--navy); padding: 22px 20px 20px; margin-bottom: 16px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg); }
.report-cover::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 55%; background: linear-gradient(200deg, rgba(246, 161, 58, .45), rgba(226, 81, 39, .35) 40%, rgba(226, 81, 39, 0) 80%); clip-path: polygon(30% 0, 100% 0, 100% 100%, 70% 100%); }
.report-cover > * { position: relative; }
.report-cover .logo { height: 22px; width: auto; display: block; margin-bottom: 18px; }
.report-cover h2 { font: 700 30px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; padding-top: 3px; margin-bottom: 8px; }
.report-cover h2 span { color: #ffb38f; }
.report-cover .meta { font-size: 13px; color: rgba(255, 255, 255, .72); }
.report-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.report-actions .btn { flex: 1; }
.report-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .report-grid.two { grid-template-columns: 1fr 1fr; } .report-grid.two > .wide { grid-column: 1 / -1; } }
.page-ice { background: var(--ice); }

/* ============ Desktop & tablet layout ============ */
/* Wide screens: the tab bar becomes a sidebar; screens that give the app an `aside`
   show list + detail side by side. */
.tabs .side-brand, .tabs .side-foot { display: none; }
@media (min-width: 1000px) {
  #app.with-side { padding-left: var(--side-w); }
  #app.with-side .tabs, #app.with-side .tabs.inner {
    display: flex; left: 0; top: 0; bottom: 0; transform: none; width: var(--side-w); border-radius: 0; border: 0;
    flex-direction: column; gap: 2px; padding: calc(var(--safe-t) + 18px) 14px 18px; box-shadow: none;
    background: var(--surface); border-right: 1px solid var(--hair); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #app.with-side .tabs a { flex: none; justify-content: flex-start; gap: 12px; padding: 12px 14px; font-size: 14.5px; border-radius: 9px; }
  #app.with-side .tabs a:not(.on):hover { background: var(--surface-2); color: var(--ink); }
  #app.with-side .tabs .side-brand { display: block; padding: 4px 10px 22px; }
  #app.with-side .tabs .side-brand img { height: 26px; width: auto; }
  #app.with-side .tabs .side-brand .app-name { display: block; margin-top: 10px; font: 700 11.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  #app.with-side .tabs .side-foot { display: block; margin-top: auto; padding: 10px; font-size: 12px; color: var(--muted); }
  #app.with-side .top .brandbar img { display: none !important; }
  #app.with-side .top .brandbar .app-name { border: 0; padding: 0; font: 650 17px var(--font); color: var(--ink); }
  #app.with-side main { max-width: 1040px; padding: 24px 28px 48px; }
  #app.with-side .dock { bottom: 16px; }
  .split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; max-width: 1320px; margin: 0 auto; padding: 20px 28px 48px; align-items: start; }
  .split > main { padding: 0 !important; margin: 0; max-width: none !important; min-width: 0; }
  .split > aside { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; border-radius: var(--r-lg); scrollbar-width: thin; }
  .split > aside .search { top: 0; }
  .split > aside .item.on, .split > aside .swipe.on .swipe-front { background: var(--accent-tint); }
  .split > aside .item.on .t { color: var(--accent-ink); }
}
@media (max-width: 999.98px) { .tabs.inner { display: none; } .split > aside { display: none; } }
/* Tablet portrait: give lists two columns where they're cards */
@media (min-width: 700px) and (max-width: 999.98px) { main { max-width: 760px; } }

/* ============ Guided camera (device.camera) ============ */
.cam { position: fixed; inset: 0; z-index: 130; background: #000; color: #fff; display: flex; flex-direction: column; padding-top: var(--safe-t); padding-bottom: var(--safe-b); }
.cam-view { position: relative; flex: 1; overflow: hidden; }
.cam-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-grid { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .28) calc(33.33% - .5px), rgba(255, 255, 255, .28) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .28) calc(66.66% - .5px), rgba(255, 255, 255, .28) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(transparent calc(33.33% - .5px), rgba(255, 255, 255, .28) calc(33.33% - .5px), rgba(255, 255, 255, .28) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .28) calc(66.66% - .5px), rgba(255, 255, 255, .28) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.cam-frame { position: absolute; inset: 9% 7%; pointer-events: none; }
.cam-frame i { position: absolute; width: 28px; height: 28px; border: 3px solid #fff; }
.cam-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.cam-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.cam-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.cam-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.cam-level { position: absolute; left: 50%; top: 50%; width: 120px; height: 3px; margin: -1.5px 0 0 -60px; border-radius: 2px; background: #ffd27a; transform: rotate(var(--tilt, 0deg)); transition: background .2s; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.cam-level.level { background: #6fd39b; }
.cam-tip { position: absolute; left: 16px; right: 16px; top: 14px; text-align: center; font: 600 14px/1.3 var(--font); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.cam-tip small { display: block; font-weight: 500; opacity: .8; margin-top: 2px; }
.cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 24px 22px; gap: 12px; }
.cam-shutter { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer; }
.cam-shutter::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s; }
.cam-shutter:active::after { transform: scale(.88); background: var(--accent); }
.cam-bar .btn { min-height: 44px; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* ============ Settings rows ============ */
.set-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); }
.set-row:first-of-type { border-top: 0; padding-top: 4px; }
.set-row .grow b { display: block; font-weight: 600; }
.set-row .grow span { font-size: 13px; color: var(--muted); }
.set-row .seg { margin: 0; flex: none; }
.set-row .seg button { padding: 8px 12px; font-size: 13px; }
input.switch { position: relative; flex: none; width: 52px; height: 32px; appearance: none; -webkit-appearance: none; border-radius: 16px; background: var(--line); cursor: pointer; transition: background .2s; min-height: 0; padding: 0; border: 0; margin: 0; }
input.switch:disabled { opacity: .4; cursor: default; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .25s var(--spring); }
input.switch:checked { background: var(--accent-btn); }
input.switch:checked::after { transform: translateX(20px); }
input.switch:focus { box-shadow: none; }

/* ============ Sheets: draggable ============ */
.sheet { touch-action: none; transition: transform .28s var(--ease); }
.sheet .sheet-body { touch-action: pan-y; max-height: 62vh; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.sheet.dragging { transition: none; }

/* ============ Accessibility helpers ============ */
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(var(--safe-t) + 8px); }
.btn:focus-visible, .chip:focus-visible, .item:focus-visible, .tabs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:root[data-contrast="high"] .btn.ghost, :root[data-contrast="high"] .chip, :root[data-contrast="high"] input, :root[data-contrast="high"] select, :root[data-contrast="high"] textarea { border: 1.5px solid var(--line); }
:root[data-contrast="high"] .tabs { border: 2px solid var(--edge); }
:root[data-contrast="high"] .top { border-bottom: 2px solid var(--edge); }

/* ============ Print: reports become clean A4 pages ============ */
@media print {
  @page { size: A4; margin: 12mm; }
  #app.with-side { padding-left: 0 !important; }
  .sync, .ptr, .report-actions, .swipe-acts, .skip, .chart-tip, .report > .seg, .report > .chips, .swipe-hint { display: none !important; }
  .report, .page-ice { background: #fff; }
  .report-cover, .hero, .share i, .hbar .t i, .days i, .ba-bars i, .key, .delta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chart-card { box-shadow: none; outline: 0; border: 1px solid #d6dae2; break-inside: avoid; }
  .split { display: block; padding: 0; } .split > aside { display: none; }
  .stagger.in > *, .hbar .t i, .days i, .ba-bars i { animation: none !important; }
}
main:focus { outline: none; }
/* Action button rows (Call / Directions / Log visit): tighter so three fit a phone */
.btn-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.btn-row .btn { padding: 0 8px; font-size: 15px; gap: 6px; white-space: nowrap; }
.btn-row .btn svg { width: 18px; height: 18px; }
@media (max-width: 370px) { .btn-row .btn span { display: none; } }
.swipe-hint svg { width: 16px; height: 16px; flex: none; }
.report .btn.ghost, .page-ice .btn.ghost { background: var(--surface); box-shadow: var(--lift); }
.ring b { font-size: 16px; }
/* Field labels in brochure capitals, like section eyebrows */
label.f > span:not(.hint):not(.sr-only) { font: 700 11.5px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-top: 1px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
/* Bigger text on a phone: tab labels sit under their icons so all tabs still fit */
@media (max-width: 999.98px) {
  :root[data-text="large"] .tabs a, :root[data-text="xl"] .tabs a { flex-direction: column; gap: 2px; padding: 7px 2px; font-size: 11px; }
  :root[data-text="xl"] .tabs { width: calc(100% - 20px); }
}

/* Tab count bubble (tabs: [{ badge: 3 }]) and five-tab bars: label under the icon so they all fit a phone */
.tabs a { position: relative; }
.tab-badge { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-btn); color: #fff; font: 700 10.5px/18px var(--font); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 999.98px) {
  .tabs.many { width: min(460px, calc(100% - 20px)); }
  .tabs.many a { flex-direction: column; gap: 2px; padding: 7px 2px 6px; font-size: 11px; }
  .tabs.many .tab-badge { left: calc(50% + 2px); top: 2px; }
}
@media (min-width: 1000px) { #app.with-side .tabs .tab-badge { position: static; margin-left: auto; box-shadow: none; } }

/* ============ Living hero (kit/hero-fx.js) ============ */
/* <section class="hero live">: one canvas draws the moving orange fade and the weather/season layer. */
.hero.live::before, .hero.live::after { display: none; }
.hero > canvas.hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block; }
.hero.live { min-height: 160px; }
.hero-wx { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); font: 600 12.5px var(--font); white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-wx b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hero-wx svg { width: 16px; height: 16px; }
/* Notice strip inside the hero: deadlines, bank holidays, messages for reps */
.hero-notices { margin: 4px 0 16px; }
.hero-notice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; text-align: left; font: inherit; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); animation: notice-in .45s var(--ease) both; }
.hero-notice:active { transform: scale(.99); }
.hero-notice .ni { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-btn); color: #fff; position: relative; }
.hero-notice .ni svg { width: 19px; height: 19px; }
.hero-notice .ni.unread::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 0 2px var(--navy); animation: pulse 1.4s ease-in-out infinite; }
.hero-notice.k-urgent .ni { background: #b42318; }
.hero-notice.k-holiday .ni { background: #0e7490; }
.hero-notice.k-product .ni { background: #3a4fd8; }
.hero-notice.k-info .ni { background: rgba(255, 255, 255, .2); }
.hero-notice .nt { flex: 1; min-width: 0; }
.hero-notice .nt small { display: block; font: 700 10.5px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: #ffb38f; padding-top: 1px; }
.hero-notice .nt b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-notice .nc { flex: none; text-align: right; font: 650 13px/1.15 var(--font); font-variant-numeric: tabular-nums; }
.hero-notice .nc span { display: block; font-size: 10.5px; font-weight: 500; opacity: .7; }
.hero-notice .nc.soon { color: #ffd27a; }
.notice-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.notice-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .25s var(--ease), background .25s; }
.notice-dots button.on { width: 20px; background: #fff; }
@keyframes notice-in { from { opacity: 0; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { .hero-notice { animation: none; } }
:root[data-motion="off"] .hero-notice { animation: none; }