/* Clearline Hub: styles for this app only. Tokens from the kit (var(--accent), var(--r-md)…), never raw colours,
   except each rep's own colour, which comes from the data. */

/* ---------- small pieces ---------- */
.avatar.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.rep-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.rep-chip i, .chip.rep-pick i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chip.rep-pick { display: inline-flex; align-items: center; gap: 7px; }
.fq { display: inline-block; font: 700 10.5px/1 var(--font-mono); padding: 4px 5px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.fq-weekly { background: var(--accent-tint); color: var(--accent-ink); }
.fq-fortnightly { background: color-mix(in srgb, var(--c3) 14%, transparent); color: var(--c3); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 14.5px; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; }
.item.is-inactive { opacity: .55; }

/* Numbered calls on a day */
.callno { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); font: 700 14px var(--font); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.callno.done { background: var(--good-bg); color: var(--good); }
.callno svg { width: 18px; height: 18px; }

/* Next call */
.next-call { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; padding: 16px 18px; margin-bottom: 8px; border-left: 4px solid var(--accent); }
.next-name { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin: 6px 0 2px; }

/* Location result on check-in */
.loc-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); }
.loc-card > svg { width: 26px; height: 26px; flex: none; }
.loc-card > div { flex: 1; min-width: 0; }
.loc-card b { display: block; }
.loc-card.ok { background: var(--good-bg); color: var(--good); }
.loc-card.bad { background: var(--bad-bg); color: var(--bad); }
.loc-card.info { background: var(--accent-tint); color: var(--ink-2); }
.loc-card .small { color: inherit; opacity: .9; }
.loc-card .btn { flex: none; }
.flag-review { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }

/* Week list */
.day-row .dateblock { flex: none; width: 46px; text-align: center; }
.dateblock b { display: block; font-size: 22px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.dateblock span { font: 700 10.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.day-row.is-today .dateblock b { color: var(--accent-ink); }
.day-row.is-past { opacity: .7; }

/* Team cards */
.rep-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rep-card { display: block; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; color: inherit; text-decoration: none; }
.rep-card .t { font-weight: 650; }
.rep-card .s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-card:active { transform: scale(.99); }
a.note { display: flex; gap: 10px; align-items: center; color: inherit; }
a.note svg { width: 20px; height: 20px; flex: none; }

/* ---------- planner ---------- */
#app main.planner { max-width: none; padding-left: 0; padding-right: 0; }
.pl-top { display: grid; gap: 10px; padding: 0 16px 12px; }
.pl-reps { padding-bottom: 2px; }
.pl-mode { margin: 0; max-width: 360px; }
.pl-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.pl-wk { border: 1.5px solid var(--hair); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 8px 10px; text-align: left; cursor: pointer; font: inherit; }
.pl-wk b { display: block; font: 700 12px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; padding-top: 1px; }
.pl-wk small { color: var(--muted); font-size: 12px; }
.pl-wk.on { background: var(--sel); border-color: var(--sel); color: var(--surface); }
.pl-wk.on small { color: inherit; opacity: .7; }
.pl-weeknav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-sum { margin: 0 2px; }
@media (hover: hover) and (pointer: fine) { .hint-drag { } }
.board-scroll { position: relative; display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 24px; scroll-snap-type: x mandatory; scroll-padding: 16px; align-items: flex-start; }
.pcol { position: relative; flex: 0 0 min(86vw, 330px); scroll-snap-align: start; background: var(--surface-2); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 250px); min-height: 220px; outline: 1.5px solid var(--edge); outline-offset: -1.5px; }
.pcol > header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.pcol > header b { display: block; font: 700 13px/1.2 var(--font-display); letter-spacing: .07em; text-transform: uppercase; padding-top: 2px; }
.pcol > header small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pcol > header .btn { min-height: 34px; padding: 0 9px; }
.pcol.over > header small { color: var(--warn); font-weight: 600; }
.pcol.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.pcol-note { margin: 0 12px 8px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-size: 12.5px; font-weight: 600; }
.pcol-list { flex: 1; overflow-y: auto; padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 60px; border-radius: 0 0 var(--r-lg) var(--r-lg); transition: background .15s; }
.pcol-list.dover, .pool-list.dover { background: var(--accent-tint); }
.dzone-end { flex: 1; min-height: 24px; }
.pool { flex-basis: min(86vw, 290px); }
.pool.closed { flex-basis: 64px; }
.pool.closed header .grow { display: none; }
.pool-search { padding: 0 10px 8px; }
.pool-search input { min-height: 42px; padding: 8px 12px; background: var(--surface); }
.pool-list { flex: 1; overflow-y: auto; padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.pool-empty { padding: 10px 4px; }
.chip.rep-pick.dover, .pl-wk.dover { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Draggable card */
.dcard { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 0 var(--hair), 0 4px 10px -8px rgba(16, 19, 34, .4); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; outline: 1px solid var(--edge); }
.dcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.dcard .dn { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); font: 700 11.5px var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.dcard .dn svg { width: 14px; height: 14px; }
.dcard .dmain { flex: 1; min-width: 0; }
.dcard .dmain b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard .dmain small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard .dside { display: flex; align-items: center; gap: 4px; flex: none; }
.dcard .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dcard .dot.warn { background: var(--c5); }
.dcard .dot.nopin { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.dcard.is-done .dn { background: var(--good-bg); color: var(--good); }
.dcard.is-oneoff { box-shadow: inset 3px 0 0 var(--c3), 0 1px 0 var(--hair); }
.dsrc { opacity: .3; }
.dph { border-radius: 9px; border: 2px dashed var(--accent); background: var(--accent-tint); flex: none; }
.dghost { position: fixed; z-index: 200; pointer-events: none; box-shadow: 0 18px 40px -12px rgba(16, 19, 34, .55); margin: 0; }
body.dragging, body.dragging * { cursor: grabbing !important; }
body.dragging { user-select: none; -webkit-user-select: none; }

/* Rep's reorder list */
.reorder .dcard { border-radius: 0; box-shadow: none; outline: 0; padding: 12px 14px; gap: 12px; }
.reorder .grip { color: var(--muted); font-size: 18px; flex: none; }
.reorder .step { width: 36px; height: 36px; font-size: 16px; }

@media (min-width: 1000px) {
  .board-scroll { scroll-snap-type: none; padding: 4px 28px 32px; }
  .pl-top { padding: 0 28px 12px; }
  .pcol { flex: 1 1 0; min-width: 160px; max-height: calc(100vh - var(--header-h) - 230px); }
  .pool { flex: 0 0 240px; }
  .pool.closed { flex: 0 0 56px; }
}
@media print { .pl-top, .pool { display: none !important; } .board-scroll { overflow: visible; flex-wrap: wrap; } .pcol { max-height: none; } }
.item.multi .s { white-space: normal; }
a.chip { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- vans ---------- */
/* Number plate: the one real-world colour here (UK rear plate yellow), kept local to this rule */
.plate { --plate: #f7c600; --plate-ink: #111; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 92px; padding: 5px 9px 4px; border-radius: 6px; background: var(--plate); color: var(--plate-ink); font: 700 15px/1 var(--font-mono); letter-spacing: .06em; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .55), 0 1px 0 rgba(0, 0, 0, .08); }
.plate.sm { min-width: 78px; font-size: 12.5px; padding: 4px 7px 3px; }
.plate.lg { font-size: clamp(22px, 7vw, 30px); padding: 8px 16px 7px; border-radius: 8px; min-width: 0; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .6), 0 10px 24px -14px rgba(0, 0, 0, .7); }
.van-row .plate { margin-right: 2px; }

.van-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 10px; border-radius: var(--r-lg); background: var(--accent-tint); color: var(--ink); text-decoration: none; outline: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -1.5px; }
.van-card > svg { width: 30px; height: 30px; flex: none; color: var(--accent-ink); }
.van-card b { display: block; font-size: 15.5px; }
.van-card .grow > span { display: block; font-size: 13px; color: var(--ink-2); }
.van-card.warn { background: var(--warn-bg); outline-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.van-card.warn > svg { color: var(--warn); }
.van-card.bad { background: var(--bad-bg); outline-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.van-card.bad > svg, .van-card.bad b { color: var(--bad); }
.van-card .btn { flex: none; }

.due-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.due-dot.ok { background: var(--good); } .due-dot.soon { background: var(--warn); } .due-dot.over { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
.due-dot.unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.toast-ic.is-bad { background: var(--bad-bg); color: var(--bad); }
.toast-ic svg { width: 18px; height: 18px; }
.btn.icon-only { padding: 0 9px; }
.btn > svg + span, .btn svg { flex: none; }

/* the check */
.tyre-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tyre-pic { display: none; }
@media (min-width: 560px) { .tyre-wrap { grid-template-columns: minmax(0, 1fr) 96px; align-items: center; } .tyre-pic { display: block; } }
.van-top { width: 90px; height: 170px; display: block; margin: 0 auto; }
.tyre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tyre { padding: 10px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.tyre-h b { font-size: 13px; font-weight: 650; }
.psi { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.psi input { min-height: 46px; font: 650 20px var(--font); font-variant-numeric: tabular-nums; padding: 6px 10px; text-align: center; background: var(--surface); }
.psi span { color: var(--muted); font-size: 13px; font-weight: 600; }
.psi-ro { font-size: 13px; color: var(--muted); margin: 6px 0 2px; } .psi-ro b { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 9px; background: var(--surface); margin-bottom: 8px; }
.tread button { border: 0; background: transparent; color: var(--muted); font: 600 11.5px/1.15 var(--font); padding: 8px 2px; border-radius: 7px; cursor: pointer; min-height: 36px; }
.tread button.on { color: var(--surface); }
.tread .t-good { background: var(--good); } .tread .t-near { background: var(--warn); } .tread .t-replace { background: var(--bad); }
.tyre .check { font-size: 12.5px; margin: 0; }
.yn { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.yn .grow { font-size: 15px; font-weight: 550; }
.seg.sm { margin: 0; flex: none; padding: 3px; }
.seg.sm button { padding: 8px 14px; font-size: 14px; flex: none; min-width: 56px; }
.seg.sm button.on.is-good { background: var(--good); color: var(--surface); }
.seg.sm button.on.is-bad { background: var(--warn); color: var(--surface); }
.check-sum { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); margin: 4px 0 6px; }
.check-sum.pass { background: var(--good-bg); color: var(--good); }
.check-sum.advisory { background: var(--warn-bg); color: var(--warn); }
.check-sum.fail { background: var(--bad-bg); color: var(--bad); }
.check-sum .small { color: inherit; opacity: .92; margin-top: 4px; }

.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-strip .ph { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.ph-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; padding: 0; }
.ph-x svg { width: 14px; height: 14px; }
.ph-add { width: 84px; height: 84px; border-radius: 10px; border: 1.5px dashed var(--hair); background: transparent; color: var(--ink-2); display: grid; place-content: center; justify-items: center; gap: 4px; font: 600 12px var(--font); cursor: pointer; }
.ph-add svg { width: 22px; height: 22px; }

.sev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sev button { display: grid; justify-items: start; gap: 3px; text-align: left; padding: 12px; border-radius: var(--r-md); border: 1.5px solid var(--hair); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.sev button svg { width: 22px; height: 22px; color: var(--good); }
.sev button.bad svg { color: var(--bad); }
.sev button b { font-size: 14.5px; }
.sev button span { font-size: 12px; color: var(--muted); }
.sev button.on { border-color: var(--good); background: var(--good-bg); }
.sev button.bad.on { border-color: var(--bad); background: var(--bad-bg); }
.note svg { flex: none; }
.tyre-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.tyre-h small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.van-row .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note:has(> svg) { display: flex; gap: 10px; align-items: flex-start; }
.note > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* ---------- links and the QR screen ---------- */
.qr-card { text-align: center; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; padding: 22px 18px 18px; margin-bottom: 14px; }
.qr-card h2 { margin: 6px 0 14px; }
.qr-box { width: min(78vw, 340px); margin: 0 auto; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--hair); }
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-hint { margin: 14px 0 2px; font-weight: 600; }
.qr-url { word-break: break-all; }
.links-card .list.plain .item { padding-left: 0; padding-right: 0; }

/* ---------- library ---------- */
.lib-search { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--hair); font: inherit; color: var(--ink); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lib-card { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; overflow: hidden; color: inherit; text-decoration: none; min-width: 0; }
.lib-card:active { transform: scale(.985); }
.lib-cover { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; background: var(--surface-2); }
.lib-cover.blank { display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); background: linear-gradient(160deg, var(--surface-2), color-mix(in srgb, var(--accent) 14%, var(--surface-2))); }
.lib-cover.blank svg { width: 34px; height: 34px; }
.lib-cover.blank b { font: 700 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.lib-meta { display: grid; gap: 4px; padding: 10px 12px 12px; align-content: start; }
.lib-meta b { font-size: 14px; font-weight: 650; line-height: 1.25; }
.lib-meta .tag { justify-self: start; }
.lib-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.lib-mini { flex: 0 0 104px; display: grid; gap: 4px; color: inherit; text-decoration: none; scroll-snap-align: start; }
.lib-mini .lib-cover { border-radius: 10px; box-shadow: 0 0 0 1px var(--hair); }
.lib-mini b { font-size: 12.5px; line-height: 1.2; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-mini small { font-size: 11.5px; color: var(--muted); }
.lib-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
@media (min-width: 640px) { .lib-hero { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
.lib-preview { position: relative; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift); max-width: 320px; justify-self: center; width: 100%; }
.lib-preview .lib-cover.lg { aspect-ratio: 210 / 297; }
.lib-open { position: absolute; right: 10px; bottom: 10px; display: inline-flex; gap: 6px; align-items: center; padding: 7px 11px; border-radius: 999px; background: rgba(16, 19, 34, .78); color: #fff; font: 600 12.5px var(--font); }
.lib-open svg { width: 14px; height: 14px; }
.lib-info h2 { margin: 6px 0 2px; }
.seg label { flex: 1; text-align: center; color: var(--muted); font: 600 14px var(--font); padding: 10px 6px; border-radius: 9px; cursor: pointer; }
.seg label.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); }

/* ---------- safety ---------- */
.report-btn { min-height: 58px; font-size: 16.5px; margin-bottom: 12px; background: var(--bad); }
.item.card-link { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.body-map { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; gap: 18px; }
.body-fig { margin: 0; text-align: center; }
.body-fig svg { width: 100%; height: auto; max-height: 300px; }
.body-fig figcaption { font: 700 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.bp { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 1.2; cursor: pointer; transition: fill .15s; }
.bp:hover { fill: color-mix(in srgb, var(--bad) 18%, var(--surface-2)); }
.bp.on { fill: var(--bad); stroke: var(--bad); }
.bp:focus-visible { outline: none; stroke: var(--accent); stroke-width: 2.5; }
.sig-pad { display: block; width: 100%; aspect-ratio: 10 / 3; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--hair); touch-action: none; cursor: crosshair; }
.sig-img { display: block; max-width: 100%; background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); }

/* ============ Safety courses, registers and Access (1.5.0) ============ */
.course-page h2 { margin: 0 0 12px; }
.course-body { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.course-body p { margin: 0 0 10px; }
.course-body ul, .course-body ol { margin: 6px 0 12px; padding-left: 22px; }
.course-body li { margin: 4px 0; }
.course-body .note { margin: 12px 0; display: block; }
.course-body strong { font-weight: 650; }
.quiz-q { font-size: 18px; line-height: 1.35; margin: 0 0 14px; letter-spacing: -0.01em; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 52px; padding: 13px 14px; border: 0; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font: 500 15px/1.4 var(--font); text-align: left; cursor: pointer; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: background .15s, outline-color .15s; }
.opt:hover { background: color-mix(in srgb, var(--navy) 6%, var(--surface-2)); }
.opt:focus-visible { outline-color: var(--accent); }
.opt.on { background: var(--sel); color: #fff; }
.opt-l { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--ink-2); font: 700 12px var(--font); }
.opt.on .opt-l { background: var(--accent); color: #fff; }
.item .wrap, .item .s.wrap { white-space: normal; overflow: visible; }
.item.review { align-items: flex-start; }
.item.review .s { margin-top: 4px; }
details.more-courses { margin: 8px 0 4px; }
details.more-courses > summary, details.hub-record > summary { cursor: pointer; list-style: none; padding: 10px 4px; font-weight: 600; color: var(--ink-2); }
details.more-courses > summary::before, details.hub-record > summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .2s var(--ease); color: var(--muted); }
details[open].more-courses > summary::before, details[open].hub-record > summary::before { transform: rotate(90deg); }
details.hub-record > summary { padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pills .tag { font-size: 11.5px; }
fieldset.f { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
fieldset.f > legend { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 2px 6px; padding: 0; }
fieldset.f .check { margin: 4px 0 8px; font-size: 14.5px; color: var(--ink); }
.crs-pick .hint { display: block; font-size: 12.5px; font-weight: 400; margin: 2px 2px 0; }
/* Access panel */
.acc-card { padding: 0; overflow: hidden; }
.acc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acc-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; padding: 12px 6px 10px; font: 700 11px/1.2 var(--font-display, var(--font)); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-align: center; border-bottom: 1px solid var(--line); }
.acc-table thead th small { display: block; margin-top: 3px; font: 500 11px var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.acc-table th[scope="row"] { text-align: left; font-weight: 400; padding: 10px 8px 10px 16px; min-width: 150px; }
.acc-table th[scope="row"] b { display: block; font-weight: 600; }
.acc-table th[scope="row"] small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.acc-table td { text-align: center; padding: 6px; width: 64px; }
.acc-table tbody tr + tr th, .acc-table tbody tr + tr td { border-top: 1px solid var(--hair); }
.acc-table .acc-group th { text-align: left; padding: 14px 16px 6px; font: 700 11px var(--font-display, var(--font)); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--surface-2); }
.acc-box { width: 24px; height: 24px; accent-color: var(--navy); cursor: pointer; }
.acc-row { align-items: flex-start; margin: 0; padding: 10px 0; }
.acc-row + .acc-row { border-top: 1px solid var(--hair); }
.acc-row b { display: block; font-weight: 600; }
.acc-row small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.acc-row.is-level { opacity: .7; }
.acc-row input { margin-top: 3px; }
@media (max-width: 420px) {
  .acc-table th[scope="row"] { min-width: 132px; padding-left: 12px; }
  .acc-table td { width: 52px; padding: 6px 2px; }
  .acc-table thead th { font-size: 10px; padding: 10px 2px 8px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .acc-box { accent-color: var(--accent); } }
:root[data-theme="dark"] .acc-box { accent-color: var(--accent); }
/* Body map on the drawings (1.5.0) */
.bmap { margin: 0; }
.bm { position: relative; max-width: 560px; margin: 0 auto; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px var(--hair); }
.bm img { display: block; width: 100%; height: auto; }
.bm svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bz { fill: transparent; stroke: none; cursor: pointer; transition: fill .15s; }
.bz:hover { fill: rgba(180, 35, 24, .14); }
.bz.on { fill: rgba(180, 35, 24, .42); }
.bz:focus-visible { outline: none; stroke: var(--accent); stroke-width: 6; fill: rgba(226, 81, 39, .14); }
.bz[aria-pressed]:not([data-act]) { cursor: default; }
.bmap figcaption { display: grid; grid-template-columns: 1fr 1fr; max-width: 560px; margin: 6px auto 0; text-align: center; font: 700 11px var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
:root[data-contrast="high"] .bz.on { fill: rgba(180, 35, 24, .6); stroke: #7a0f08; stroke-width: 4; }

/* ============ Hub home: the panes ============ */
.hub-hero h2 { margin-bottom: 12px; }
.hub-due { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 6px; }
.hub-due-i { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; font-size: 13.5px; line-height: 1.25; }
.hub-due-i b { flex: none; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-btn); font: 700 15px/1 var(--font); }
.hub-due-i:hover { background: rgba(255, 255, 255, .16); }
.hub-find { position: relative; margin: 14px 0 2px; }
.hub-find > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.hub-find > span svg { width: 18px; height: 18px; }
.hub-find input { width: 100%; box-sizing: border-box; padding: 14px 14px 14px 42px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); font: 500 16px var(--font); }
.hub-find input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .panes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .panes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.pane { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 124px; padding: 14px; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer; box-shadow: var(--lift, 0 1px 2px rgba(16, 19, 34, .06)); transition: transform .18s var(--ease, ease), box-shadow .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.pane:hover { border-color: var(--line); box-shadow: 0 10px 24px -14px rgba(16, 19, 34, .35); }
.pane:active { transform: scale(.97); }
.pane:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pane-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 8px; background: var(--surface-2); color: var(--ink); }
.pane-ic svg { width: 22px; height: 22px; }
.pane-ic.t-accent { background: var(--accent-btn); color: #fff; }
.pane-ic.t-bad { background: var(--bad-bg); color: var(--bad); }
.pane-t { font: 650 15px/1.2 var(--font); letter-spacing: -.01em; }
.pane-s { font-size: 12.5px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pane-n { position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; display: grid; place-items: center; background: var(--bad); color: var(--surface); font: 700 12px/1 var(--font); }
.pane-n.good { background: var(--good); }
.pane-soon { position: absolute; top: 12px; right: 12px; }
.pane-ext { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; color: var(--muted); }
.pane-ext svg { width: 16px; height: 16px; }
.pane.is-due { border-color: color-mix(in srgb, var(--bad) 35%, var(--hair)); }
.pane.is-soon { opacity: .72; }
:root[data-contrast="high"] .pane { border-color: var(--edge, var(--line)); }

/* ============ Products & selling ============ */
.prod-av svg { width: 20px; height: 20px; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.prod-tags:empty { display: none; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-hero h2 { margin-bottom: 10px; }
.prod-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; }
.prod-facts b { display: block; margin-top: 4px; font: 650 15px/1.3 var(--font); }
.prod-facts details { margin-top: 6px; }
.prod-sec { padding: 0; overflow: hidden; }
.prod-sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; cursor: pointer; font: 700 13px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.prod-sec > summary::-webkit-details-marker { display: none; }
.prod-sec > summary .chev { transition: transform .2s; color: var(--muted); }
.prod-sec[open] > summary .chev { transform: rotate(90deg); }
.prod-body { padding: 0 16px 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.prod-body p { margin: 0 0 10px; }
.prod-body ul, .prod-body ol { margin: 0 0 10px; padding-left: 20px; }
.prod-body li { margin: 4px 0; }
.prod-body strong { color: var(--ink); }
.prod-body a { color: var(--accent-ink); word-break: break-word; }
.prod-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; display: block; overflow-x: auto; }
.prod-body th, .prod-body td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prod-body th { font: 700 11.5px var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prod-body code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.prod-body blockquote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.hub-go { margin-top: 14px; }

/* the app icon on the sign-in card */
.login-icon { display: block; width: 72px; height: 72px; border-radius: 17px; margin: 0 0 14px; box-shadow: 0 10px 24px -12px rgba(16, 19, 34, .45); }

/* ============ Accident report (8 steps, same questions as the LMS form) ============ */
.ar-head { padding: 4px 4px 2px; scroll-margin-top: 80px; }
.ar-title { margin: 6px 0 4px; font: 700 22px/1.2 var(--font-display); }
.ar-intro { margin: 0 0 12px; font-size: 14.5px; }
.ar-dots { display: flex; gap: 6px; margin: 0 0 14px; }
.ar-dots button { flex: 1; height: 8px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: var(--surface-2); cursor: pointer; }
.ar-dots button.done { background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.ar-dots button.on { background: var(--accent); }
.ar-card h2 { margin-bottom: 10px; }
.ar-sub { margin: -4px 0 12px; }
.ar .f.ar-q { display: block; margin-bottom: 16px; }
.ar .f.ar-q:last-child { margin-bottom: 4px; }
.ar label.f > span.ql, .ar .ql-wrap > span.ql, .ar-sig .ql { display: block; text-transform: none; letter-spacing: 0; font: 600 14.5px/1.35 var(--font); color: var(--ink); margin: 0 2px 4px; padding: 0; }
.ar .f .hint, .ar label.f > span.hint { display: block; margin: 0 2px 8px; font: 400 12.5px/1.35 var(--font); color: var(--muted); text-transform: none; letter-spacing: 0; }
.ar .grid2 { align-items: start; }
.ar .req { color: var(--bad); font-style: normal; }
.ar .chips.wrap .chip { white-space: normal; text-align: left; line-height: 1.3; min-height: 40px; }
.ar .sev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ar .sev-grid .chip { border-left: 5px solid var(--hair); }
.ar .sev-minor { border-left-color: #1f9d55 !important; } .ar .sev-moderate { border-left-color: #d69e2e !important; }
.ar .sev-serious { border-left-color: #d64545 !important; } .ar .sev-fatal { border-left-color: #1a1a1a !important; } .ar .sev-nearmiss { border-left-color: #805ad5 !important; }
.ar-miss { animation: arMiss 1.2s 2; border-radius: 12px; }
@keyframes arMiss { 50% { box-shadow: 0 0 0 3px var(--bad); } }
.ar-sig { margin: 4px 0 12px; }
.ar-sig .row { gap: 8px; align-items: center; margin-bottom: 6px; }
.ar-sigblock + .ar-sigblock { border-top: 1px solid var(--line); padding-top: 14px; }
.ar-action + .ar-action { border-top: 1px solid var(--line); padding-top: 12px; }
.ar-nav { position: sticky; bottom: calc(84px + var(--safe-b)); z-index: 5; display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 18px 0 8px; padding: 10px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.ar-nav .btn { white-space: normal; }
.ar-sec { margin: 20px 0 8px; }
.ar .kv, .ar-print .kv { font-size: 14px; }
.sig-img.sm { width: min(220px, 100%); max-width: 100%; height: auto; }
.ar-legal { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.ar-legal th, .ar-legal td { text-align: left; vertical-align: top; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.ar-legal th { font: 700 11px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ar-legal td:first-child { font-weight: 600; width: 38%; }
.riddor-info > summary, .ar-card > summary { cursor: pointer; }
.riddor-info ul { padding-left: 18px; margin: 6px 0 12px; } .riddor-info li { margin: 5px 0; font-size: 14px; }
.ar-done .ar-ref { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .12); }
.ar-done .ar-ref b { display: block; font: 700 22px var(--font-display); letter-spacing: .04em; margin-top: 4px; }
.ar-print { background: var(--surface); border-radius: var(--r-lg); padding: 18px; }
.ar-print-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; border-bottom: 3px solid var(--accent); padding-bottom: 12px; margin-bottom: 14px; }
.ar-print-head h1 { margin: 2px 0 0; font: 700 22px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.ar-print-logo { height: 34px; width: auto; }
.ar-print-ref { text-align: right; } .ar-print-ref b { display: block; font: 700 15px var(--font-display); }
.ar-print-sum { padding: 12px; border-radius: 12px; background: var(--surface-2); }
.ar-print-map .bmap { max-width: 420px; }
.ar-print-foot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
@media print {
  .ar-print { padding: 0; border-radius: 0; }
  .ar-print .kv { break-inside: auto; } .ar-sec { break-after: avoid; }
  .ar-print-sum, .ar-print-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ar-print .photo-strip .ph { width: 120px; height: 120px; }
}
@media (min-width: 900px) { .ar-nav { bottom: 12px; } }
.ar-rec .kv { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 7px 14px; }
.ar-rec .kv > b { overflow-wrap: anywhere; }
.ar-print { overflow-wrap: break-word; } .ar-print img { max-width: 100%; }
.ar-print-head .grow { min-width: 200px; }
@media (max-width: 520px) { .ar-print-head h1 { font-size: 18px; } .ar-print-ref { text-align: left; } }

/* ============ Safety records: registers, forklifts, risk assessments, policies ============ */
.rg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; }
.rg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.rg-table th, .rg-table td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--line); }
.rg-table thead th { font: 700 11px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.rg-table thead th small { display: block; text-transform: none; letter-spacing: 0; font: 500 11px var(--font); margin-top: 2px; }
.rg-table tbody th { font-weight: 650; }
.rg-table tbody th a { color: inherit; text-decoration: none; }
.rg-table tbody tr:last-child > * { border-bottom: 0; }
.rg-table tbody tr[data-href] { cursor: pointer; }
.rg-table tbody tr[data-href]:hover { background: var(--surface-2); }
.rg-matrix td { text-align: center; } .rg-matrix thead th:not(:first-child) { text-align: center; white-space: normal; min-width: 110px; }
.rg-print-head { display: none; }
.rg-sec { margin-bottom: 22px; } .rg-sec h2 { margin: 0 4px 4px; font-size: 18px; } .rg-sec > p { margin: 0 4px 10px; }
.rg-figs { margin-bottom: 14px; }
.rg-photo { display: block; max-width: 100%; max-height: 420px; border-radius: 12px; cursor: zoom-in; }
.bad-ink { color: var(--bad); }
.fl-items { display: grid; gap: 2px; }
.fl-item { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.fl-item:last-child { border-bottom: 0; }
.fl-item b { display: block; font-size: 14.5px; } .fl-item small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.fl-item.is-bad { background: var(--bad-bg); border-radius: 10px; } .fl-item.is-warn { background: var(--warn-bg); border-radius: 10px; }
.crit { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--bad); color: #fff; font: 800 11px/1 var(--font); font-style: normal; vertical-align: 1px; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }
.chk-grid .check { margin: 4px 0 8px; }
.pol-body { font-size: 15px; line-height: 1.6; } .pol-body p { margin: 0 0 12px; } .pol-body ul { margin: 0 0 12px; padding-left: 20px; } .pol-body h3.sub { margin: 16px 0 8px; }
@media print {
  .rg-print-head { display: flex; gap: 14px; align-items: center; border-bottom: 3px solid var(--accent); padding-bottom: 10px; margin-bottom: 14px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rg-print-head img { height: 30px; } .rg-print-head h1 { margin: 2px 0 0; font: 700 20px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
  .rg-scroll { overflow: visible; box-shadow: none; outline: 1px solid #ccc; }
  .rg-table { min-width: 0; font-size: 11px; } .rg-table th, .rg-table td { padding: 5px 6px; }
  .rg-table tr { break-inside: avoid; } .rg-sec { break-inside: auto; }
  .tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.fl-item { flex-wrap: wrap; } .fl-item > .grow { min-width: 210px; flex: 1 1 210px; }
.fl-item .seg { margin-left: auto; }
@media print { #toasts, .toast, .sheet-back { display: none !important; } }

/* ============ Home 1.7: needs you today, most used, areas ============ */
.hub-hero .hb-hi { margin: -6px 0 0; opacity: .8; font-size: 13.5px; }
.hub-hero h2 { margin-bottom: 10px; }
.hub-hero .hero-top { align-items: flex-start; }
.hub-find kbd.hb-kbd { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 12px var(--font); color: var(--muted); border: 1px solid var(--hair); border-radius: 6px; padding: 2px 7px; background: var(--surface-2); }
@media (hover: hover) and (min-width: 1000px) { .hub-find kbd.hb-kbd { display: block; } }
.hb-sub { display: flex; align-items: center; gap: 8px; margin: 20px 4px 10px; }
.hb-sub small { margin-left: auto; font: 500 12px var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.hb-needs { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); outline: 1.5px solid var(--edge); outline-offset: -1.5px; padding: 2px 14px; }
.hb-need { display: flex; align-items: center; gap: 12px; padding: 11px 0; text-decoration: none; color: inherit; border-top: 1px solid var(--line); }
.hb-need:first-child { border-top: 0; }
.hb-need b { display: block; font: 650 14.5px/1.25 var(--font); }
.hb-need small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-need .grow { min-width: 0; }
.hb-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
:root[data-theme="dark"] .hb-ic { color: color-mix(in srgb, var(--c) 55%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hb-ic { color: color-mix(in srgb, var(--c) 55%, #fff); } }
.hb-ic svg { width: 21px; height: 21px; }
.hb-go { flex: none; font: 650 13.5px var(--font); color: #fff; background: var(--accent-btn); border-radius: 9px; padding: 8px 14px; }
.hb-need:hover .hb-go { filter: brightness(1.08); }
.hb-more { padding: 8px 0 10px; border-top: 1px solid var(--line); }
.hb-clear { padding: 16px 18px; }
.hb-mosts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.hb-most { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 12px; background: var(--surface); outline: 1.5px solid var(--edge); outline-offset: -1.5px; box-shadow: var(--lift); text-decoration: none; color: var(--ink); font: 650 13.5px/1.2 var(--font); }
.hb-most > svg { flex: none; width: 19px; height: 19px; color: var(--accent-ink, var(--accent)); }
.hb-most span:not(.hb-n) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.hb-most:active, .hb-area:active, .hb-need:active { transform: scale(.98); }
.hb-n { flex: none; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; display: inline-grid; place-items: center; background: var(--bad); color: #fff !important; font: 700 12px/1 var(--font); }
.hb-n.warn { background: var(--warn); } .hb-n.good { background: var(--good); }
.pane-n.warn { background: var(--warn); }
.hb-areas { display: grid; gap: 8px; }
.hb-area { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px 12px 18px; border: 0; border-radius: 14px; background: var(--surface); outline: 1.5px solid var(--edge); outline-offset: -1.5px; box-shadow: var(--lift); color: var(--ink); cursor: pointer; font: inherit; }
.hb-area::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.hb-area b { display: block; font: 650 15.5px/1.2 var(--font); }
.hb-area small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-area .grow { min-width: 0; }
.hb-area .chev { color: var(--muted); font-size: 20px; }
.hb-area:hover { box-shadow: 0 10px 24px -14px rgba(16, 19, 34, .35); }
.hb-aic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; }
.hb-aic svg { width: 22px; height: 22px; }
.hb-sheet-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.hb-sheet-h b { font: 700 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; padding-top: 3px; }
.hb-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hb-opt { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 6px 12px; border-radius: 14px; background: var(--surface-2); text-decoration: none; color: var(--ink); font: 600 12.5px/1.25 var(--font); text-align: center; border: 0; cursor: pointer; }
.hb-opt .hb-oic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--c, var(--ink)); }
.hb-opt .hb-oic svg { width: 21px; height: 21px; }
.hb-opt .hb-n { position: absolute; top: 8px; right: 8px; }
.hb-opt small { color: var(--muted); font-weight: 500; }
.hb-opt.is-soon { opacity: .7; }
.hb-area-hero { background: var(--c) !important; color: #fff; }
.hb-area-hero h2 { margin: 4px 0 6px; } .hb-area-hero .hero-sub { margin: 0; opacity: .9; }
@media (min-width: 1000px) {
  .hb-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .hb-mosts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .hb-most { flex-direction: column; align-items: flex-start; justify-content: space-between; height: 88px; padding: 14px; background: var(--navy); color: #fff; outline: 0; }
  .hb-most > svg { color: #ff8a5c; }
  .hb-most .hb-n { position: absolute; top: 12px; right: 12px; }
  .hb-most span:not(.hb-n) { white-space: normal; flex: none; }
  .hub-find { max-width: 640px; }
}
/* desktop sidebar: Home and the six areas */
#app.with-side .tabs .sn { display: grid; align-content: start; gap: 2px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; flex: 1 1 auto; min-height: 0; }
#app.with-side .tabs .sn a { padding: 0; gap: 0; font-size: inherit; border-radius: 0; background: none; color: inherit; }
#app.with-side .tabs .sn a:hover { background: none; }
.sn-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font: 600 14px var(--font); color: var(--ink-2); text-decoration: none; }
#app.with-side .tabs a.sn-row { padding: 7px 8px; gap: 10px; border-radius: 10px; }
#app.with-side .tabs a.sn-row.on, .sn-area.here > .sn-row { background: var(--surface-2); color: var(--ink); }
.sn-row:hover { background: var(--surface-2); }
.sn-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
#app.with-side .tabs .sn .sn-link { gap: 10px; }
.sn-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.sn-ic svg { width: 16px !important; height: 16px !important; }
.sn-ic.sn-home { background: var(--surface-2); color: var(--ink); }
.sn-tog { flex: none; width: 28px; height: 28px; border: 0; background: none; border-radius: 7px; display: grid; place-items: center; color: var(--muted); cursor: pointer; padding: 0; }
.sn-tog svg { width: 16px; height: 16px; transition: transform .2s; transform: rotate(-90deg); }
.sn-area.open .sn-tog svg { transform: none; }
.sn-tog:hover { background: var(--surface); color: var(--ink); }
.sn-kids { display: grid; gap: 1px; margin: 2px 0 8px 40px; }
.sn-kid { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 7px 10px; border-radius: 8px; font: 500 13.5px var(--font); color: var(--ink-2); text-decoration: none; border: 0; background: none; text-align: left; cursor: pointer; }
#app.with-side .tabs .sn a.sn-kid { padding: 7px 10px; border-radius: 8px; justify-content: space-between; gap: 8px; font-size: 13.5px; }
#app.with-side .tabs .sn a.sn-kid.on { background: var(--accent-tint); color: var(--accent-ink, var(--accent)); font-weight: 650; }
.sn-kid:hover { background: var(--surface-2); color: var(--ink); }
.sn-kid.is-soon { opacity: .7; } .sn-kid .tag { font-size: 10.5px; }
#app.with-side .tabs .sn .sn-link { flex: 1 1 auto; }
.ar .chips.wrap .chip { flex: 0 1 auto; max-width: 100%; }
/* What the law requires */
.law-item h2 { font-size: 17px; }
.law-act { margin: 6px 0 8px; text-transform: none; letter-spacing: 0; font: 600 12.5px var(--font); color: var(--accent-ink, var(--accent)); }
.law-list { margin: 0 0 10px; padding-left: 18px; font-size: 14.5px; line-height: 1.5; } .law-list li { margin: 4px 0; }
.law-hub { font-size: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; }
.law-src { color: var(--muted); } .law-src a { color: inherit; }
@media print { .law-item { break-inside: avoid; } .law-hub { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ============ Dashboard (1.8) ============ */
.db-hero h2 { margin: 4px 0 14px; }
.db-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.db-ring { display: grid; justify-items: center; gap: 6px; text-align: center; }
.db-ring > span { font-size: 12px; line-height: 1.25; opacity: .85; }
.db-ring .ring b { color: #fff; }
.db-ring .ring .track { stroke: rgba(255, 255, 255, .16); }
.db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.db-stat { padding: 14px; border-radius: var(--r-lg); background: var(--surface); outline: 1.5px solid var(--edge); outline-offset: -1.5px; box-shadow: var(--lift); }
.db-stat b { display: block; font: 700 26px/1.1 var(--font-display); letter-spacing: .01em; }
.db-stat > span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.db-stat small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.db-stat.warn b { color: var(--warn); } .db-stat.bad b { color: var(--bad); }
.db-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--warn); margin: 0 4px 0 2px; }
.db-dot.bad { background: var(--bad); } .db-dot.good { background: var(--good); }
@media print { .db-stat { box-shadow: none; outline: 1px solid #ccc; break-inside: avoid; } .db-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.bk-code { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font: 13px/1.4 var(--font-mono, monospace); overflow-x: auto; white-space: pre; }
/* Works with no signal (Settings) */
.off-rows { display: grid; gap: 2px; }
.off-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.off-row:last-child { border-bottom: 0; }
.off-row b { display: block; font-size: 14px; } .off-row small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.off-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--good-bg); color: var(--good); margin-top: 1px; }
.off-dot svg { width: 14px; height: 14px; } .off-dot.no { background: var(--warn-bg); }

/* Search boxes stay in view under the header while you type (and the page doesn't shrink out from under them) */
.hub-find { position: sticky; top: calc(var(--top-h, 64px) + 6px); z-index: 12; }
.hub-find::before { content: ''; position: absolute; inset: -6px -16px -8px; background: var(--bg); z-index: -1; opacity: 0; transition: opacity .15s; }
.hub-find.stuck::before { opacity: .96; }
#hub-body, #area-panes, #prod-results, #ra-list { min-height: 70vh; }
/* Top panel sizes (Settings → Home screen) */
.hub-hero.hb-compact { padding-top: 14px; padding-bottom: 14px; }
.hub-hero.hb-compact h2 { font-size: 22px; line-height: 1.1; margin-bottom: 4px; }
.hub-hero.hb-compact .hb-hi { margin: 0; font-size: 13px; }
.hub-hero.hb-compact .hero-notices { margin-top: 10px; }
.hub-hero.hb-small { padding: 12px 14px; background: var(--navy); color: #fff; min-height: 0; }
.hub-hero.hb-small > .row > b { font: 700 16px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hub-hero.hb-small .notice-dots { margin-top: 6px; }
.hb-small-n { flex: none; font-size: 12.5px; opacity: .8; text-align: right; }
.hub-hero.hb-small .hero-notices { margin-top: 10px; }

/* ============ View as (1.8.3) ============ */
#viewas-bar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(92px + var(--safe-b)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: #3a4fd8; color: #fff; box-shadow: 0 14px 30px -12px rgba(16, 19, 34, .55); }
#viewas-bar b { display: block; font-size: 14px; } #viewas-bar small { display: block; font-size: 12px; opacity: .85; }
#viewas-bar .grow { min-width: 0; } #viewas-bar b, #viewas-bar small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-eye { flex: none; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.va-eye svg { width: 18px; height: 18px; }
.va-btn { flex: none; border: 0; border-radius: 9px; padding: 9px 14px; font: 650 13.5px var(--font); background: #fff; color: #3a4fd8; cursor: pointer; }
.va-btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; }
html.viewing-as main { padding-bottom: calc(190px + var(--safe-b)) !important; }
.va-pick { width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.va-pick.on { background: var(--accent-tint); }
@media (min-width: 1000px) { #viewas-bar { left: calc(var(--side-w) + 28px); right: 28px; bottom: 16px; max-width: 760px; } }
@media print { #viewas-bar { display: none; } }

/* ============ Usage (1.10) ============ */
.us-hero { background: var(--navy); color: #fff; }
.us-hero h2 { margin: 4px 0 6px; }
.us-filters { display: grid; gap: 10px; margin: 0 0 14px; }
.us-filters .chips { flex-wrap: wrap; overflow: visible; }
.us-who { margin: 0; max-width: 320px; }
.hm { display: grid; gap: 3px; font-size: 11px; }
.hm-row { display: grid; grid-template-columns: 38px repeat(var(--cols), minmax(0, 1fr)); gap: 3px; align-items: center; }
.hm-area .hm-row { grid-template-columns: minmax(96px, 140px) repeat(var(--cols), minmax(0, 1fr)); }
.hm-head span { text-align: center; color: var(--muted); font-size: 10.5px; }
.hm-l { color: var(--ink-2); font-weight: 600; font-size: 12px; }
.hm i { display: grid; place-items: center; height: 22px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 650; color: #fff;
  background: color-mix(in srgb, #e25127 calc(var(--v) * 100%), var(--surface-2)); }
.hm-area i { height: 30px; }
.hm i[style*="--v:0.000"] { color: transparent; }
.hm-key { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 8px; color: var(--muted); }
.hm-key i { width: 18px; height: 12px; }
.us-words { display: flex; flex-wrap: wrap; gap: 6px; }
.us-word { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; }
.us-word b { font-size: 11.5px; color: var(--muted); } .us-word.none { background: var(--warn-bg); color: var(--warn); } .us-word.none b { color: inherit; }
.us-tapbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; } .us-tapbar .f { margin: 0; flex: 1 1 220px; }
.us-tapwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .us-tapwrap { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
.us-frame { position: relative; overflow: hidden; border-radius: 16px; outline: 1.5px solid var(--edge); background: var(--bg); min-height: 200px; }
.us-scale { position: relative; transform-origin: 0 0; }
.us-scale iframe { display: block; border: 0; pointer-events: none; background: var(--bg); }
.us-scale canvas { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
:root[data-theme="dark"] .us-scale canvas { mix-blend-mode: screen; }
.us-ctrls .item { padding: 8px 0; }
.us-never th, .us-never td { color: var(--muted); }
.us-policy { margin-top: 16px; }
.preview .banner, .preview #viewas-bar, .preview #toasts { display: none !important; }

/* ---------- 1.11: Office page ---------- */
.oh-hero h2 { margin: 4px 0 0; }
.oh-tools { display: flex; gap: 8px; }
.oh-tools svg { width: 16px; height: 16px; }
.oh-find { position: relative !important; top: auto !important; z-index: 1; margin: 16px 0 0; max-width: 680px; }
.oh-find input { border-color: transparent; }
.oh-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1099px) { .oh-cols { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 699px) { .oh-cols { grid-template-columns: minmax(0, 1fr); } }
.oh-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 60px; }
.oh-sec { margin: 0; padding: 16px 16px 12px; }
.oh-sh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.oh-sh h2 { margin: 0; font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; min-width: 0; }
.oh-sic { width: 22px; height: 22px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.oh-sic svg { width: 14px; height: 14px; }
.oh-fold { border: 0; background: none; color: var(--muted); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; }
.oh-fold:hover { background: var(--surface-2); }
.oh-fold svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.oh-sec.is-folded { padding-bottom: 8px; }
.oh-sec.is-folded .oh-sh { margin: 0; }
.oh-sec.is-folded .oh-fold svg { transform: rotate(-90deg); }
.oh-links { display: flex; flex-direction: column; }
.oh-link { display: flex; align-items: center; gap: 12px; padding: 8px 6px; margin: 0 -6px; border-radius: 10px; color: inherit; text-decoration: none; min-height: 44px; border: 0; background: none; font: inherit; text-align: left; width: calc(100% + 12px); cursor: pointer; }
.oh-link:hover, .oh-link:focus-visible { background: var(--surface-2); }
.oh-link + .oh-link { box-shadow: 0 -1px 0 var(--hair); }
.oh-link:hover + .oh-link, .oh-link + .oh-link:hover { box-shadow: none; }
.oh-mono { width: 34px; height: 34px; border-radius: 9px; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 12.5px var(--font); letter-spacing: .02em; flex: none; }
.oh-mono.round { border-radius: 50%; }
.oh-lt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.oh-lt b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-lt small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-ext { color: var(--muted); width: 16px; height: 16px; opacity: 0; transition: opacity .15s; flex: none; }
.oh-ext svg { width: 16px; height: 16px; }
.oh-link:hover .oh-ext, .oh-link:focus-visible .oh-ext { opacity: 1; }
.oh-link.is-missing .oh-mono { background: var(--surface-2); color: var(--muted); }
.oh-link.is-missing b { color: var(--muted); }
/* tiles */
.oh-links.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.oh-links.tiles .oh-link { flex-direction: column; justify-content: center; text-align: center; gap: 8px; margin: 0; width: auto; padding: 12px 6px; background: var(--surface-2); box-shadow: none; min-height: 92px; }
.oh-links.tiles .oh-link:hover { background: var(--accent-tint); }
.oh-links.tiles .oh-mono { width: 40px; height: 40px; font-size: 14px; }
.oh-links.tiles .oh-lt { flex: none; align-items: center; width: 100%; }
.oh-links.tiles .oh-lt b { font-size: 13px; max-width: 100%; }
.oh-links.tiles .oh-lt small, .oh-links.tiles .oh-ext { display: none; }
/* compact (each person's choice) */
.oh.is-compact .oh-link { min-height: 36px; padding: 5px 6px; }
.oh.is-compact .oh-mono { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
.oh.is-compact .oh-lt small { display: none; }
.oh.is-compact .oh-links.tiles .oh-link { min-height: 70px; padding: 8px 4px; }
.oh.is-compact .oh-sec { padding: 12px 14px 8px; }
/* phone numbers */
.oh-people { display: flex; flex-direction: column; }
.oh-person { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.oh-person + .oh-person { border-top: 1px solid var(--hair); }
.oh-acts { display: flex; gap: 6px; flex: none; }
.oh-ph, .oh-mail { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: var(--surface-2); color: var(--ink); text-decoration: none; font: 600 13px var(--font); white-space: nowrap; }
.oh-ph svg { width: 15px; height: 15px; }
.oh-ph:hover, .oh-mail:hover { background: var(--accent-tint); }
@media (max-width: 1399px) { .oh-cols[style*="--cols:3"] .oh-ph span { display: none; } }
@media (max-width: 699px) { .oh-ph span { display: inline !important; } }
/* arranging */
.oh-tip { margin-bottom: 16px; display: block; }
.oh-tip svg { width: 15px; height: 15px; vertical-align: -3px; }
.oh-arr-bar { gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.oh.is-arranging .oh-col { outline: 2px dashed var(--hair); outline-offset: 6px; border-radius: var(--r-lg); padding-bottom: 8px; }
.oh.is-arranging .oh-col.dover { outline-color: var(--accent); }
.oh-sec.is-edit { outline: 1.5px solid var(--edge); }
.ogrip { border: 0; background: var(--surface-2); color: var(--muted); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: grab; touch-action: none; flex: none; }
.ogrip svg { width: 16px; height: 16px; }
.ogrip:active { cursor: grabbing; }
.olink { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.oh-grip-s { color: var(--muted); width: 16px; height: 16px; flex: none; opacity: .6; }
.oh-grip-s svg { width: 16px; height: 16px; }
.oh-links.tiles .oh-grip-s { display: none; }
.olzone { min-height: 40px; border-radius: 10px; }
.olzone.dover { background: var(--accent-tint); }
.oh-empty { margin: 8px 0; text-align: center; }
.oh-add { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.oh-add svg { width: 15px; height: 15px; }
.oh-drop-end { min-height: 24px; }
.dghost.oh-sec { width: 320px; }

/* ---------- 1.11: To do ---------- */
.td-head { gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.td-head .seg { margin: 0; min-width: 260px; }
.td-head .btn svg, .td-foot .btn svg { width: 16px; height: 16px; }
.td-card { padding: 4px 14px; }
.td-band { display: flex; align-items: baseline; gap: 8px; }
.td-band small { color: var(--muted); font-weight: 600; }
.td-band.is-over { color: var(--bad); }
.td-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: inherit; text-decoration: none; }
.td-row + .td-row { border-top: 1px solid var(--hair); }
.td-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.td-main b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.td-main .tag { align-self: flex-start; margin-top: 2px; }
.td-main small { color: var(--muted); font-size: 13px; }
.td-notes { color: var(--ink-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.td-due { font-weight: 600; color: var(--ink-2); }
.td-due.today { color: var(--accent-ink, var(--accent)); }
.td-due.over { color: var(--bad); }
.td-rep { display: inline-flex; align-items: center; gap: 3px; }
.td-rep svg { width: 13px; height: 13px; }
.td-tick { flex: none; width: 28px; height: 28px; margin-top: -2px; border-radius: 9px; border: 2px solid color-mix(in srgb, var(--muted) 60%, transparent); background: var(--surface); color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, border-color .15s, color .15s; }
.td-tick svg { width: 17px; height: 17px; stroke-width: 2.6; }
.td-tick:hover { border-color: var(--good); color: var(--good); }
.td-tick.on { background: var(--good); border-color: var(--good); color: #fff; }
.td-row.is-done .td-main b { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.td-row.is-urgent .td-tick { border-color: var(--bad); }
.td-ring { flex: none; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--good) calc(var(--p) * 1%), var(--surface-2) 0); display: grid; place-items: center; }
.td-ring i { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 700 10.5px var(--font); font-style: normal; }
.td-set { align-items: center; }
.td-done summary, .td-person summary { cursor: pointer; padding: 12px 4px; font-weight: 600; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.td-person { margin-bottom: 4px; }
.td-clear { padding: 18px; }
.td-list { margin: -4px 0 4px; }
.td-foot { gap: 10px; align-items: center; margin-top: 8px; }
.td-setline { margin: 10px 0 0; }
.td-detail h2 { font-size: 20px; }
.td-detail .td-tick { width: 34px; height: 34px; margin-top: 0; }
.td-detail.is-done h2 { text-decoration: line-through; color: var(--muted); }
.td-notes-full { white-space: pre-wrap; margin: 14px 0 0; }
.td-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0 0; font-size: 14px; }
.td-facts dt { color: var(--muted); }
.td-facts dd { margin: 0; }
.td-quick { margin-top: 2px; }
.td-quick .chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- 1.11: header artwork picker (Settings) ---------- */
.art-g { margin: 14px 2px 8px; font: 700 11px var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.art-tile { border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; border-radius: 12px; }
.art-thumb { display: block; aspect-ratio: 15 / 8; border-radius: 10px; background: var(--navy) no-repeat right top / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .15s var(--ease), box-shadow .15s; }
.art-thumb.is-clearline { background: linear-gradient(200deg, rgba(246, 161, 58, .5) 0%, rgba(226, 81, 39, .45) 30%, rgba(226, 81, 39, 0) 62%), var(--navy); }
.art-tile:hover .art-thumb { transform: translateY(-1px); }
.art-tile.on .art-thumb { box-shadow: 0 0 0 3px var(--accent); }
.art-name { display: block; font-size: 12.5px; font-weight: 600; margin: 5px 2px 0; line-height: 1.25; }
.art-name i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--good); margin-left: 4px; }
.art-co { gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

/* ---------- 1.13: flow ---------- */
.ins-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 2px; }
.ins-nav::-webkit-scrollbar { display: none; }
.ins-nav a { flex: none; padding: 8px 14px; border-radius: 99px; background: var(--surface); color: var(--ink-2); text-decoration: none; font: 600 13.5px var(--font); box-shadow: inset 0 0 0 1px var(--hair); }
.ins-nav a.on { background: var(--navy); color: #fff; box-shadow: none; }
.td-here { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.td-here .btn svg { width: 17px; height: 17px; }
.td-job { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.td-job + .td-job { border-top: 1px solid var(--hair); }
.td-job .hb-ic { flex: none; }
.td-job .btn { flex: none; }
.td-main > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.td-hand { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0 0; font-size: 13px; align-self: flex-start; }
.td-hand svg { width: 14px; height: 14px; }
.td-from { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.td-from svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.td-open { display: inline-flex; gap: 8px; align-items: center; }
.td-open svg { width: 16px; height: 16px; }
.oh-jobs { margin: -4px 0 6px; }
.oh-jobs .td-job .td-main b { font-size: 14.5px; }
.oh-sub { margin: 10px 0 2px; font: 700 11px var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.oh-more { display: block; margin: 6px 0 0; }
.oh-sub-line { margin: 4px 0 0 !important; }
.oh-sub-line a { color: #ffb38f; font-weight: 600; }
.oh-else { margin-top: 22px; }
.oh-who { font-size: 11px; vertical-align: 2px; }
.tab-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.tab-opt { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; font-weight: 600; font-size: 14px; }
.tab-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tab-opt .tab-ic { width: 20px; height: 20px; display: grid; place-items: center; color: var(--ink-2); }
.tab-opt .tab-ic svg { width: 19px; height: 19px; }
.tab-opt.on { background: var(--navy); color: #fff; }
.tab-opt.on .tab-ic { color: #fff; }
.tab-opt i { margin-left: auto; font-style: normal; font-size: 11.5px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-btn); color: #fff; display: grid; place-items: center; }
.tab-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.tab-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 1.14: product images, logos, the range ---------- */
.lib-tabs { margin-bottom: 12px; }
.im-head { display: grid; gap: 10px; margin-bottom: 10px; }
.im-find { position: relative !important; top: auto !important; margin: 0; }
.im-filters { gap: 10px; flex-wrap: wrap; }
.im-filters .f { margin: 0; flex: 1 1 180px; }
.im-bar { align-items: center; gap: 10px; margin: 4px 2px 8px; }
.im-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 520px) { .im-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.im-tile { position: relative; border-radius: 14px; background: var(--surface); box-shadow: var(--lift); outline: 2px solid transparent; transition: outline-color .15s; }
.im-tile.on { outline-color: var(--accent); }
.im-open { display: flex; flex-direction: column; width: 100%; border: 0; background: none; padding: 8px 8px 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 14px; }
.im-pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: #fff; overflow: hidden; margin-bottom: 8px; box-shadow: inset 0 0 0 1px var(--hair); }
.im-pic img { width: 100%; height: 100%; object-fit: contain; }
.im-none { display: grid; place-items: center; gap: 4px; color: var(--muted); text-align: center; padding: 10px; }
.im-none svg { width: 28px; height: 28px; }
.im-t { font-weight: 600; font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.im-s { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 500 11.5px var(--font-mono); color: var(--muted); }
.im-s svg { width: 13px; height: 13px; flex: none; }
.im-pick { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 9px; border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent); background: rgba(255, 255, 255, .92); color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; }
.im-pick svg { width: 18px; height: 18px; stroke-width: 2.6; }
.im-tile.on .im-pick { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.im-selwrap { position: sticky; bottom: calc(var(--safe-b, 0px) + 84px); z-index: 20; margin-top: 12px; }
@media (min-width: 1000px) { .im-selwrap { bottom: 16px; } }
.im-sel { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px; background: var(--navy); color: #fff; box-shadow: 0 18px 40px -16px rgba(16, 19, 34, .6); }
.im-sel .linkbtn { color: #ffb38f; }
.im-sel .btn svg { width: 17px; height: 17px; }
.im-sizes .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.im-sizes .chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.im-custom input { width: 72px; border: 0; background: transparent; font: inherit; color: inherit; padding: 0; outline: none; }
.im-one .im-big { display: grid; place-items: center; aspect-ratio: 1; max-height: 46vh; margin: 0 auto 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.im-one .im-big img { width: 100%; height: 100%; object-fit: contain; }
.im-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.im-facts > * { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); text-align: left; border: 0; font: inherit; color: inherit; }
.im-facts b { font: 600 14px var(--font-mono); word-break: break-all; }
.im-copy { cursor: pointer; }
.im-copy:hover { background: var(--accent-tint); }
.im-quick { margin-bottom: 4px; }
.im-quick .eyebrow { display: block; margin-bottom: 6px; }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.lg-tile { display: flex; flex-direction: column; gap: 3px; }
.lg-tile b { font-size: 13.5px; } .lg-tile small { color: var(--muted); font-size: 12px; }
.lg-pic, .lg-big { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 12px; border: 0; padding: 14px; cursor: pointer; background: repeating-conic-gradient(#eef0f4 0 25%, #fff 0 50%) 0 0 / 18px 18px; box-shadow: inset 0 0 0 1px var(--hair); }
.lg-pic.dark, .lg-big.dark { background: var(--navy); }
.lg-pic, .lg-big { grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; }
.lg-pic img, .lg-big img { width: 100%; height: 100%; object-fit: contain; }
.lg-big { aspect-ratio: 16 / 9; margin-bottom: 14px; cursor: default; }
.pr-list { display: flex; flex-direction: column; }
.pr-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.pr-item + .pr-item { border-top: 1px solid var(--hair); }
.pr-item b { display: block; font-weight: 600; font-size: 14px; }
.pr-item small { color: var(--muted); font: 500 12px var(--font-mono); }
.pr-pic { flex: none; width: 48px; height: 48px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); }
.pr-pic img { width: 100%; height: 100%; object-fit: contain; }
.pr-pic svg { width: 22px; height: 22px; }
.pr-rrp { flex: none; text-align: right; font-weight: 700; } .pr-rrp small { display: block; font: 600 10.5px var(--font); color: var(--muted); }

/* ---------- 1.14: next call, shop tasks, Today search ---------- */
.nc-top { align-items: center; }
.nc-facts { display: grid; gap: 6px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.nc-facts > div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: baseline; }
.nc-facts .eyebrow { margin: 0; }
.nc-follow span:last-child { font-weight: 600; color: var(--accent-ink, var(--accent)); }
.nc-block { margin-top: 12px; }
.nc-block > .eyebrow { display: block; margin-bottom: 2px; }
.nc-tell { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid var(--hair); background: none; font: 600 14px var(--font); color: inherit; text-align: left; cursor: pointer; }
.nc-tell:first-of-type { border-top: 0; }
.nc-tell svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.nc-rest { display: block; margin-top: 10px; text-align: center; }
.td-shop .td-row:first-of-type { border-top: 0; }
.td-shop-empty { margin: 4px 2px 12px; }
.td-add-here { display: inline-flex; align-items: center; gap: 6px; }
.td-add-here svg { width: 15px; height: 15px; }
.day-find { margin: 4px 0 12px; }
.day-res { margin-bottom: 14px; }

/* ---------- 1.14.2: pictures instead of letters ---------- */
.oh-mono.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; padding: 5px; }
.oh-mono.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.oh-mono.lg { width: 52px; height: 52px; font-size: 16px; border-radius: 13px; }
.oh-iconfile { margin-top: 10px; font-size: 13px; max-width: 100%; }
.oh-iconf .oh-seg { flex: 1; min-width: 0; flex-wrap: wrap; }
.avatar.has-logo, .hero-badge.has-logo { background: #fff; box-shadow: inset 0 0 0 2px var(--ring), 0 0 0 0 transparent; padding: 4px; overflow: hidden; }
.avatar.has-logo img, .hero-badge.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; }
.hero-badge.has-logo { padding: 6px; box-shadow: inset 0 0 0 3px var(--ring); }

/* ---------- 1.15: Office page, Tabs look (Favourites first, Needs you today down the side) and the weather header ---------- */
.oh-hero-bar { gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.oh-hero-bar .oh-find { flex: 1 1 320px; margin: 0; }
.oh-hero.hb-small .oh-find { margin-top: 10px; }
.oh-tabs-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.oh-main { flex: 999 1 520px; min-width: 0; }
.oh-rail { flex: 1 1 320px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + var(--safe-t) + 12px); }
@media (max-width: 899px) { .oh-rail { order: -1; max-width: none; position: static; } }
.oh-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.oh-tab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); font: 600 14px var(--font); color: var(--ink-2); padding: 0 14px; min-height: 42px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.oh-tab:hover { color: var(--ink); border-color: var(--rail); }
.oh-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
:root[data-theme="dark"] .oh-tab[aria-selected="true"] { background: var(--accent-btn); border-color: var(--accent-btn); }
.oh-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oh-tab svg { width: 15px; height: 15px; }
.oh-tab[aria-selected="true"] svg { color: var(--accent); fill: var(--accent); }
.oh-tab[aria-selected="true"] .oh-tab-n { color: #c5c9d6; }
.oh-tab-n { font-size: 12px; color: var(--muted); font-weight: 500; }
.oh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
@media (max-width: 520px) { .oh-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.oh-tile-w { position: relative; min-width: 0; }
.oh .oh-tile, .oh-tiles > .oh-link.is-missing { margin: 0; width: 100%; box-sizing: border-box; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--lift); padding: 14px 44px 14px 14px; min-height: 76px; gap: 14px; }
.oh .oh-tile:hover, .oh .oh-tile:focus-visible { background: var(--surface); outline: 2px solid var(--accent); outline-offset: 0; }
.oh-tile .oh-lt b { font-size: 15px; }
.oh-why { color: var(--accent-ink) !important; }
.oh-star { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; border-radius: 8px; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: .55; }
.oh-tile-w:hover .oh-star, .oh-star:focus-visible, .oh-star.on { opacity: 1; }
.oh-star:hover { background: var(--surface-2); }
.oh-star svg { width: 18px; height: 18px; }
.oh-star.on { color: var(--accent); }
.oh-star.on svg { fill: var(--accent); }
@media (hover: none) { .oh-star { opacity: 1; } }
.oh-tile-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 76px; border: 2px dashed var(--rail); border-radius: var(--r-lg); background: none; color: var(--muted); font: 500 14px var(--font); cursor: pointer; }
.oh-tile-add:hover { color: var(--ink); border-color: var(--muted); }
.oh-tile-add svg { width: 16px; height: 16px; }
.oh-fav-note { margin: 12px 2px 0; }
.oh-tab-card { padding: 12px 16px; }
.oh-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.oh-fchips .chip { min-height: 40px; }
.oh.is-compact .oh-tile { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.oh.is-compact .oh-tiles { gap: 8px; }

/* 1.15.1: built-in fascia logos fill the badge edge to edge */
.avatar.has-logo.logo-full, .hero-badge.has-logo.logo-full { padding: 0; box-shadow: 0 0 0 2px var(--ring); }
.avatar.has-logo.logo-full img, .hero-badge.has-logo.logo-full img { object-fit: cover; border-radius: inherit; }

/* ============ 1.16: Products & selling: the list ============ */
.pc-sell { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 12px; min-height: 44px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); font-size: 14px; }
.pc-sell span { color: var(--muted); }
.pc-sell select { flex: 1; border: 0; background: none; font: 650 14px var(--font); color: var(--ink); min-height: 44px; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pc { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-decoration: none; margin: 0; }
.pc:hover, .pc:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.pc-shots { display: flex; align-items: center; justify-content: center; gap: 4px; height: 112px; background: color-mix(in srgb, var(--tone) 10%, var(--surface)); padding: 8px; box-sizing: border-box; }
.pc-shots img { height: 100%; width: auto; max-width: 33%; object-fit: contain; mix-blend-mode: multiply; }
:root[data-theme="dark"] .pc-shots img { mix-blend-mode: normal; }
.pc-shots.none { background: color-mix(in srgb, var(--tone) 12%, var(--surface)); }
.pc-shots.none b { color: var(--tone); font: 700 30px var(--font-display); letter-spacing: .04em; }
.pc-shots.none svg { width: 34px; height: 34px; }
.pc-b { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.pc-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-t b { font-size: 16px; margin-right: 2px; }
.pc-l { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.pc-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--muted); }
.pp-wrap { margin: 4px 0 8px; }
.pp-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 280px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.pp { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--navy); color: #fff; text-decoration: none; box-shadow: var(--lift); }
.pp:hover, .pp:focus-visible { outline: 2px solid var(--accent); }
.pp .pc-shots { height: 104px; background: #fff; }
.pp .pc-shots.none { background: var(--tone); }
.pp .pc-shots.none b { color: #fff; }
.pp-b { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.pp-b .tag { align-self: flex-start; }
.pp-b b { font-size: 16px; }
.pp-b span.clamp2 { font-size: 13px; color: #d6dae2; line-height: 1.4; }

/* ============ 1.16: the brand page as a sell sheet ============ */
.ss { display: flex; flex-direction: column; gap: 14px; }
.ss-hero { background: var(--navy); color: #fff; }
.ss-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ss-hero h2 { margin: 2px 0 8px; }
.ss-hero .hero-sub { margin: 0; max-width: 680px; }
.ss-cans { display: flex; gap: 6px; align-items: flex-end; background: #fff; border-radius: 12px; padding: 8px; height: 110px; box-sizing: border-box; }
.ss-cans img { height: 100%; width: auto; max-width: 90px; object-fit: contain; }
.ss-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.ss-facts span { display: inline-flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.1); border-radius: 10px; padding: 7px 12px; font: 650 14px var(--font); }
.ss-facts small { font: 700 10.5px var(--font-display); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.ss-facts .hi { background: var(--accent-btn); }
.ss-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ss-acts svg { width: 18px; height: 18px; }
.ss-allp { margin-top: 10px; font-size: 13px; opacity: .85; }
.ss-allp summary { cursor: pointer; }
.ss-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ss-h h2, .ss-fit h2 { margin: 0; font: 700 15px var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.ss-h small { color: var(--muted); font-size: 13px; }
.ss-bens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ss-ben { background: var(--surface-2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ss-ben b { font-size: 16px; line-height: 1.3; }
.ss-ben span:not(.pm-n) { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pm-n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 13px var(--font); flex: none; }
:root[data-theme="dark"] .pm-n { background: var(--accent-btn); }
.ss-say { margin-top: 12px; background: var(--accent-tint); border-radius: 12px; padding: 14px 16px; }
.ss-say .eyebrow { color: var(--accent-ink); }
.ss-say p { margin: 6px 0 0; font: 600 18px/1.4 var(--font); }
.ss-say details { margin-top: 8px; font-size: 14px; }
.ss-say details p { font-size: 15px; font-weight: 500; }
.ss-two { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.ss-obj { flex: 999 1 380px; min-width: 0; margin: 0; }
.ss-o { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.ss-o:first-of-type { border-top: 0; padding-top: 0; }
.ss-o b { color: var(--bad); font-size: 15px; }
.ss-o span { font-size: 15px; line-height: 1.45; }
.ss-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ss-fit { margin: 0; }
.ss-fit h2 { margin-bottom: 10px; }
.ss-fit .eyebrow { display: block; margin: 14px 0 4px; }
.ss-fit p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chips span, .ss-chips a { background: var(--surface-2); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ss-chips a { border: 1px solid var(--line); background: none; }
.ss-chips a:hover { border-color: var(--accent); }
.ss-pl a { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 14px; }
.ss-more { padding: 0; overflow: hidden; }
.ss-more > .eyebrow { display: block; padding: 14px 16px 4px; }
.ss-more .prod-sec { border-top: 1px solid var(--line); border-radius: 0; }

/* ============ 1.16: pitch mode ============ */
.pm { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.pm-hero { background: var(--navy); color: #fff; }
.pm-hero h2 { margin: 4px 0 0; }
.pm-dealtag { display: inline-block; margin-top: 10px; background: var(--accent-btn); color: #fff; font: 700 13px var(--font); border-radius: 99px; padding: 6px 12px; }
.pm-steps { display: flex; gap: 6px; }
.pm-steps button { flex: 1; height: 8px; border: 0; padding: 0; border-radius: 4px; background: var(--rail); cursor: pointer; position: relative; }
.pm-steps button::after { content: ''; position: absolute; inset: -14px 0; }
.pm-steps button.on { background: var(--accent); }
.pm-label { margin: 2px 2px 0; }
.pm-body { display: flex; flex-direction: column; gap: 10px; }
.pm-body .card { margin: 0; }
.pm-ben { display: flex; gap: 12px; align-items: flex-start; }
.pm-ben b { font-size: 17px; line-height: 1.3; }
.pm-ben p, .pm-obj p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pm-say { background: var(--accent-tint); box-shadow: none; }
.pm-say .eyebrow { color: var(--accent-ink); }
.pm-say p { margin: 8px 0 0; font: 600 21px/1.35 var(--font); }
.pm-say.alt p { font-size: 17px; }
.pm-obj b { color: var(--bad); font-size: 16px; }
.pm-deal .row { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pm-deal .hi { color: var(--accent-ink); }
.pm-deal .eyebrow { display: block; margin-top: 12px; }
.pm-deal p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.pm-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pm-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pm-nav .btn:last-child { flex: 1; max-width: 360px; margin-left: auto; }
.pm-send svg, .pm-nav svg { width: 18px; height: 18px; }

/* ============ 1.16: Media & library ============ */
.lib-shorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.lib-short { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); color: inherit; text-decoration: none; min-height: 64px; min-width: 0; }
.lib-short:hover { outline: 2px solid var(--accent); }
.lib-short.on { background: var(--navy); color: #fff; }
.lib-short.on small { color: #c5c9d6; }
.lib-sic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.lib-sic svg { width: 22px; height: 22px; }
.lib-short.t1 .lib-sic { background: var(--accent-btn); }
.lib-short.t2 .lib-sic { background: #2f5bd3; }
.lib-short.t3 .lib-sic { background: #0a7a46; }
.lib-st { display: flex; flex-direction: column; min-width: 0; }
.lib-st b { font-size: 15px; }
.lib-st small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .lib-shorts { gap: 6px; } .lib-short { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; } .lib-st small { display: none; } .lib-st b { font-size: 13px; line-height: 1.2; } .lib-sic { width: 36px; height: 36px; } }
.lib-grid.send { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lib-cw { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); overflow: hidden; min-width: 0; }
.lib-cw .lib-card { box-shadow: none; border-radius: 0; flex: 1; }
.lib-acts { display: flex; gap: 6px; padding: 0 10px 10px; }
.lib-acts .btn { flex: 1; min-height: 40px; }
.lib-acts svg { width: 16px; height: 16px; }

/* 1.16: phone numbers pane under the Office links */
.oh-cpane { margin: 18px 0 0; padding: 16px 16px 8px; }
.oh-cpane .oh-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 22px; }
.oh-cpane .oh-person { border-top: 1px solid var(--line); }
.pm-outs .btn { padding: 0 6px; white-space: nowrap; }
/* 1.16.1: drafted pushbacks, to check */
.ss-o.is-draft { background: var(--warn-bg); margin: 0 -10px; padding: 12px 10px; border-radius: 10px; border-top-color: transparent; }
.ss-o .tag { align-self: flex-start; }
.ss-dacts { gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ss-dacts svg { width: 15px; height: 15px; }
.ss-drafts { margin: 0 0 10px; }
.pm-obj .tag { margin-bottom: 6px; display: inline-block; }

/* 1.16.2: the built-in system logos fill their tile */
.oh-mono.has-img.is-full { padding: 0; box-shadow: inset 0 0 0 1px var(--hair); }
.oh-mono.has-img.is-full img { object-fit: cover; }

/* 1.16.3: drag the Office tabs, links and panes; each person's arrangement is kept */
.oh-main.oh-pzone, .oh-rail.oh-pzone { display: flex; flex-direction: column; gap: 18px; }
.oh-pzone > .oh-pane { min-width: 0; }
.oh-pzone > .dzone-end { min-height: 0; flex: none; }
body.dragging .oh-pzone > .dzone-end { min-height: 60px; }
.oh-rail.oh-pzone:not(:has(.oh-pane)) { display: none; }
body.dragging .oh-rail.oh-pzone:not(:has(.oh-pane)) { display: flex; min-height: 160px; border: 2px dashed var(--rail); border-radius: var(--r-lg); }
.oh-pzone.dover { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: var(--r-lg); }
.oh-cpane { margin: 0; }
.oh-rail .oh-cpane .oh-people { grid-template-columns: minmax(0, 1fr); }
.oh-tiles > .dzone-end { display: none; }
.oh-tiles .dph { min-height: 76px; }
.oh-tabs .dph { width: 110px; height: 42px !important; border-radius: 99px; }
.oh-tab, .oh-tile { -webkit-touch-callout: none; }
.oh-phead, .oh-ptodo .oh-sh h2 { cursor: grab; }
.oh-pgrip { color: var(--muted); display: inline-grid; place-items: center; width: 18px; }
.oh-pgrip svg { width: 16px; height: 16px; }
.dghost.oh-pane { width: 420px; }
.dghost.oh-tile-w { list-style: none; }

/* ============ 1.17: How to use the Hub ============ */
.help { max-width: 860px; }
.help-head { margin-bottom: 4px; }
.help-head .hub-find { margin: 0; }
.help-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.help-q { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; min-height: 22px; }
.help-q:hover, .help-q:focus-visible { border-color: var(--accent); color: var(--accent-ink); }
.help-q svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.help-sec { padding: 0; margin-bottom: 10px; overflow: hidden; scroll-margin-top: 84px; }
.help-sec summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 16px; }
.help-sec summary::-webkit-details-marker { display: none; }
.help-sec summary b { flex: 1; }
.help-sec summary > svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.help-sec[open] summary > svg { transform: rotate(90deg); }
.help-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); color: var(--accent-ink); flex: none; }
.help-ic svg { width: 18px; height: 18px; }
.help-body { padding: 0 16px 16px 62px; }
.help-intro { margin: 0 0 10px; color: var(--muted); }
.help-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.help-tips { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; margin-top: 6px; }
.help-tips > b { display: flex; align-items: center; gap: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.help-tips > b svg { width: 15px; height: 15px; }
.help-tips ul, .help-tiplist { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }
.help-gloss { margin: 0; display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 8px 16px; }
.help-gloss dt { font-weight: 700; }
.help-gloss dd { margin: 0; line-height: 1.5; }
@media (max-width: 599px) { .help-body { padding-left: 16px; } .help-gloss { grid-template-columns: 1fr; gap: 2px; } .help-gloss dd { margin-bottom: 8px; } }

/* Help and Settings at the bottom of the menu, above your name */
#app.with-side .tabs .sn.sn-bottom { flex: none; overflow: visible; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
#app.with-side .tabs .sn.sn-bottom ~ .side-foot { margin-top: 6px; }

/* ============ 1.18: Onsight check-ins ============ */
.os { display: flex; flex-direction: column; gap: 14px; }
.os .card { margin: 0; }
.os-drop .dropzone { padding: 24px 16px; }
.os-auto { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; }
.os-auto svg { width: 15px; height: 15px; flex: none; }
.os-filter .seg { margin: 0; }
.os-rep { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--font); padding: 0 10px; }
.os-flags { margin: 0; }
.os-row { align-items: flex-start; }
.os-row .t a { color: inherit; text-decoration: none; }
.os-row .t a:hover { text-decoration: underline; }
.os-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.os-tags:empty { display: none; }
.os-note { font-style: italic; }
.os-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.os-acts svg { width: 16px; height: 16px; }
.os-sum { padding: 12px 14px; }
.os-sum .dtable td, .os-sum .dtable th { white-space: nowrap; }
.os-day { border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--hair)); }
.os-dic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn); flex: none; }
.os-dic svg { width: 17px; height: 17px; }
.os-drow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.os-drow b { display: block; font-size: 15px; }
.os-drow small { color: var(--muted); font-size: 13px; }
.os-shop .list { margin: 0 0 8px; }
.os-filter select.os-rep { width: auto; flex: 0 1 260px; }
.os-filter .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.os-filter .seg::-webkit-scrollbar { display: none; }
.os-filter .seg button { flex: none; }

/* ============ 1.19: building and fire tour ============ */
.tour-hero { background: var(--navy); color: #fff; }
.tour-stop { padding: 0; overflow: hidden; }
.tour-stop h2 { margin: 16px 18px 6px; }
.tour-stop .course-body { padding: 0 18px 16px; }
.tour-photo { width: 100%; max-height: 360px; object-fit: cover; display: block; }
mark.tour-fill { background: var(--warn-bg); color: var(--warn); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.tour-q { margin-bottom: 10px; }
.opt.is-right { border-color: var(--good) !important; background: var(--good-bg) !important; color: var(--ink) !important; }
.opt.is-wrong { border-color: var(--bad) !important; background: var(--bad-bg) !important; color: var(--ink) !important; }
.tour-ok { color: var(--good); font-weight: 600; } .tour-no { color: var(--bad); font-weight: 600; }
.tour-remember { border: 2px solid var(--accent); }
.tour-erow { gap: 12px; }
.tour-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.tour-thumb.none { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-weight: 700; }
.tour-eopen { all: unset; cursor: pointer; flex: 1; min-width: 0; }
.tour-ph img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; display: block; margin-top: 6px; }
.tour-edit .card { margin-bottom: 12px; }

/* ============ 1.19: visitors ============ */
.vis { display: flex; flex-direction: column; gap: 14px; }
.vis .card { margin: 0; }
.vis-now { border: 2px solid var(--accent); }
.vis-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); flex: none; }
.vis-ic svg { width: 20px; height: 20px; }
.roll-row { width: 100%; text-align: left; font: inherit; background: none; border: 0; cursor: pointer; }
.roll-box { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--rail); display: grid; place-items: center; flex: none; color: #fff; }
.roll-row.is-safe .roll-box { background: var(--good); border-color: var(--good); }
.roll-box svg { width: 18px; height: 18px; }
.vp-sheet { background: #fff; color: #101322; border-radius: 16px; padding: 40px 32px; text-align: center; max-width: 640px; margin: 0 auto; box-shadow: var(--lift); }
.vp-logo { height: 54px; margin: 0 auto 26px; display: block; }
.vp-sheet h1 { font: 700 40px/1.05 var(--font-display); text-transform: uppercase; margin: 0 0 12px; letter-spacing: .02em; }
.vp-sub { font-size: 18px; margin: 0 auto 22px; max-width: 440px; }
.vp-qr { width: 300px; max-width: 80%; margin: 0 auto 22px; }
.vp-qr svg { width: 100%; height: auto; display: block; }
.vp-steps { font-size: 16px; margin: 0 0 18px; }
.vp-small { font-size: 13px; color: #5f6577; margin: 0; }
@media print { .vp-sheet { box-shadow: none; border-radius: 0; padding: 20mm 10mm; max-width: none; } .vp-qr { width: 90mm; } .vp-sheet h1 { font-size: 34pt; } }

/* 1.20: site inspection pack */
.ip-intro { margin: 0 4px 18px; font-size: 14.5px; }
.ip-sec { background: var(--surface); border-radius: var(--r-lg, 14px); padding: 16px 16px 14px; margin: 0 0 14px; box-shadow: var(--shadow-1, 0 1px 0 rgba(15,18,32,.06)); }
.ip-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 15px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.ip-h span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 13px; letter-spacing: 0; flex: none; }
.ip-sub { margin: 14px 2px 6px; font: 700 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ip-t td { vertical-align: top; } .ip-t td:last-child:has(> .tag, > .linkbtn) { white-space: nowrap; }
.ip-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.ip-facts > div { background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.ip-facts b { display: block; font: 700 22px/1.1 var(--font-display); }
.ip-facts span { font-size: 13px; color: var(--muted); }
@media print {
  .ip-sec { box-shadow: none; outline: 1px solid #ccc; padding: 10px 12px; break-inside: auto; }
  .ip-sec.brk { break-before: page; }
  .ip-t tr { break-inside: avoid; }
  .ip-h span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ip .tour-fill { background: #fff3c4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ip .scroll-x { overflow: visible; }
}

/* 1.21: best sellers from Clearline Pick */
.bs-link { margin: 0 0 14px; }
.bs-card .linkbtn { display: inline-block; margin-top: 10px; }
.bs-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.bs-row:last-of-type { border-bottom: 0; }
.bs-row b { display: block; font-size: 15px; }
.bs-row small { display: block; color: var(--muted); font-size: 12.5px; margin: 1px 0 5px; }
.bs-rank { flex: none; align-self: center; width: 30px; height: 30px; max-height: 30px; padding: 0; line-height: 1; border-radius: 9px; display: grid; place-items: center; font: 700 14px var(--font-display); background: var(--bg); color: var(--muted); }
.bs-rank.is-top { background: var(--accent, #e25127); color: #fff; }
.bs-bar { display: block; height: 6px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.bs-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #e25127, #f6a13a); border-radius: 4px; }
.bs-share { flex: none; font: 700 15px var(--font-display); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.bs-line { display: flex; align-items: center; gap: 10px; } .bs-line .bs-row { flex: 1; min-width: 0; }
.bs-line img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.bs-ranges { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }

/* 1.22: the products front page: four category tiles */
.pcat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
@media (min-width: 900px) { .pcat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcat { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: #fff; background: var(--tone); min-height: 190px; box-shadow: 0 18px 40px -28px rgba(16, 19, 34, .55); }
.pcat:hover { transform: translateY(-1px); } .pcat:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pcat-pics { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 92px; padding: 12px 12px 0; background: rgba(255, 255, 255, .92); }
.pcat-pics img { height: 72px; max-width: 30%; object-fit: contain; }
.pcat-b { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.pcat-b b { font: 700 18px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.pcat-b span { font-size: 13px; opacity: .88; line-height: 1.35; }
.pcat-b small { margin-top: auto; font-weight: 700; font-size: 13px; }
.pc-checks { display: flex; align-items: center; gap: 6px; color: var(--warn); margin: 10px 4px 0; } .pc-checks svg { width: 16px; height: 16px; }
.pcat-pics.none { align-items: center; background: rgba(255, 255, 255, .12); color: #fff; } .pcat-pics.none svg { width: 40px; height: 40px; opacity: .7; }

/* 1.23: deep dive cards: what's good about it, and the numbers */
.ss-deep { align-items: start; }
.ss-good ul { margin: 0; padding-left: 20px; } .ss-good li { margin: 0 0 8px; line-height: 1.45; } .ss-good p { margin: 0 0 8px; }
.ss-num table, .pm-num table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ss-num th, .pm-num 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 8px 0; border-bottom: 1.5px solid var(--line); }
.ss-num td, .pm-num td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hair); vertical-align: top; font-variant-numeric: tabular-nums; }
.ss-num td:first-child, .pm-num td:first-child { font-weight: 650; }
.ss-num tr:last-child td { border-bottom: 0; }
.ss-num p { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.pm-good ul { margin: 0; padding-left: 20px; font-size: 16px; } .pm-good li { margin: 0 0 10px; }
@media (max-width: 700px) { .ss-num table { font-size: 12.5px; } }

/* 1.24: editing the product cards */
.tag.info { background: #e6edff; color: #2442a8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag.info { background: #17224a; color: #9db4ff; } }
:root[data-theme="dark"] .tag.info { background: #17224a; color: #9db4ff; }
.pe-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 2px 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.pe-admin .eyebrow { width: 100%; }
.pe .card { margin-bottom: 14px; }
.pe-flag { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.pe-flag input { width: 22px; height: 22px; accent-color: var(--accent-btn); margin-top: 2px; flex: none; }
.pe-flag small { display: block; color: var(--muted); font-size: 12.5px; }
.pe-sub { margin: 6px 0 12px 34px; max-width: 220px; }
.pe-sec { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.pe-sec textarea { width: 100%; margin-top: 8px; font: 14px/1.5 var(--font-mono); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.pe-sec .hint { display: block; font-size: 12.5px; margin-top: 4px; }
.pe-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); z-index: 2; }
.bf-wrap .pp { outline: 2px solid var(--bad); }
.pe-more { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }