/* Snib — app layout on top of the Modernist design system.
   Every colour, space and type token comes from _ds/…/styles.css. Nothing here
   rounds a corner, softens a rule or centres a button label. */

/* ── frame ────────────────────────────────────────────────────────────── */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 440px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-bg);
}
@media (min-width: 520px) {
  body { background: var(--color-neutral-200); }
  .app { border-left: 2px solid var(--color-divider); border-right: 2px solid var(--color-divider); }
}

/* ── shared ───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ht-card { background: var(--color-surface); }
.ht-hit { cursor: pointer; }
.ht-hit:active { opacity: .6; }
.ht-row { transition: background .12s; }
.ht-row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

.ht-label {
  font: 800 9px/1 var(--font-heading);
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.ht-label-accent { color: var(--color-accent-700); }
.ht-sublabel { font-size: 11px; color: color-mix(in srgb, var(--color-text) 60%, transparent); display: block; }
.ht-pad { padding: 16px 18px; }
.ht-pad-label { padding: 14px 18px 6px; }
.ht-stack { display: flex; flex-direction: column; gap: 10px; }
.ht-mb8 { margin-bottom: 8px; }
.ht-mb12 { margin-bottom: 12px; }
.ht-mt6 { margin-top: 6px; }
.ht-mt8 { margin-top: 8px; }
.ht-mt12 { margin-top: 12px; }
.ht-bb { border-bottom: 1px solid var(--color-divider); }
.ht-bt { border-top: 2px solid var(--color-divider); }
.ht-empty {
  margin: 0; padding: 28px 18px;
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.ht-note {
  font-size: 11px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
/* the design's three status treatments */
.ht-tag {
  font: 800 9px/1 var(--font-heading);
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; flex: none;
}
.ht-tag-live { background: var(--color-accent-fill); color: #fff; }
/* mixed from the text colour rather than a fixed neutral, so it keeps its
   contrast on the dark ground too */
.ht-tag-done { background: var(--color-surface); color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.ht-tag-next { box-shadow: inset 0 0 0 1.5px var(--color-accent); color: var(--color-accent-700); }

.ht-strike { text-decoration: line-through; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.ht-btn-wide { width: 100%; justify-content: flex-start; font-size: 15px; padding: 13px 14px; }
.ht-btn-left { justify-content: flex-start; padding: 0; font-size: 11px; }
.ht-btn-b2 { border-width: 2px; padding: 0 14px; flex: none; }
.ht-btn-row { display: flex; gap: 8px; }
.ht-btn-row .btn { flex: 1; border-width: 2px; justify-content: flex-start; }
.btn-block.ht-btn-wide { border-width: 2px; margin-top: 0; }

/* ── header ───────────────────────────────────────────────────────────── */
.ht-head {
  flex: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 12px;
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-bg);
}
.ht-head-l { min-width: 0; }
.ht-kicker {
  font: 800 10px/1 var(--font-heading);
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-700);
}
.ht-screen-title {
  /* shrinks a touch on narrow phones so "Business overview" still fits whole */
  font: 800 clamp(21px, 6.6vw, 26px)/1.05 var(--font-heading);
  letter-spacing: -.02em; margin: 6px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ht-head-r { display: flex; align-items: center; gap: 10px; flex: none; }
.ht-head-meta {
  text-align: right; font-size: 11px; line-height: 1.35;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.ht-head-meta-b { font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ht-sq {
  width: 36px; height: 36px; flex: none;
  border: 2px solid var(--color-divider); background: transparent; color: inherit;
  display: flex; align-items: center; justify-content: center;
  font: 800 11px/1 var(--font-heading);
}

/* ── body & nav ───────────────────────────────────────────────────────── */
.ht-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ht-nav {
  flex: none; display: flex;
  border-top: 2px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-bg);
}
.ht-navbtn {
  flex: 1; padding: 14px 6px 13px; text-align: center;
  border: 0; border-right: 1px solid var(--color-divider);
  background: transparent; color: inherit;
  font: 800 10px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
}
.ht-navbtn:last-child { border-right: 0; }

/* ── tabs ─────────────────────────────────────────────────────────────── */
.ht-tabs { display: flex; border-bottom: 2px solid var(--color-divider); }
.ht-tabs-sub { border-bottom-width: 2px; }
.ht-tab {
  flex: 1; padding: 12px 6px; text-align: left;
  border: 0; border-right: 1px solid var(--color-divider);
  background: transparent; color: inherit;
  font: 800 10px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
}
.ht-tab:first-child { padding-left: 14px; }
.ht-tab:last-child { border-right: 0; }
.ht-tab-c { text-align: center; padding-left: 6px; }
.ht-tab-sm { font-size: 9px; padding: 10px 6px; }
.ht-tab-accent { color: var(--color-accent-700); text-align: center; }
.ht-tab-accent.ht-on { color: #fff; }

/* ── today ────────────────────────────────────────────────────────────── */
.ht-stats2 {
  display: flex; padding: 14px 18px;
  border-bottom: 2px solid var(--color-divider);
}
.ht-stat { flex: 1; }
.ht-stat-div { border-right: 1px solid var(--color-divider); padding-right: 12px; }
.ht-stats2 .ht-stat + .ht-stat { padding-left: 12px; }
.ht-stat-v {
  font: 800 22px/1.1 var(--font-heading);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

.ht-list { list-style: none; margin: 0; padding: 0; }
.ht-job {
  padding: 16px 18px; border-bottom: 1px solid var(--color-divider);
  display: flex; gap: 14px; align-items: flex-start;
}
.ht-slot {
  width: 40px; flex: none;
  font: 800 11px/1.2 var(--font-heading);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.ht-job-main { flex: 1; min-width: 0; }
.ht-job-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ht-job-client { font: 800 16px/1.2 var(--font-heading); }
.ht-job-sub {
  font-size: 13px; margin-top: 4px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.ht-job-meta {
  font-size: 11px; margin-top: 8px; display: flex; gap: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.ht-timer {
  width: 40px; height: 40px; flex: none;
  border: 2px solid var(--color-divider); color: inherit;
  display: flex; align-items: center; justify-content: center;
  font: 800 15px/1 var(--font-heading);
}
.ht-timer-on { background: var(--color-accent-fill); color: #fff; border-color: var(--color-accent-fill); }

/* ── job sheet ────────────────────────────────────────────────────────── */
.ht-jobmeta {
  padding: 16px 18px; border-bottom: 1px solid var(--color-divider);
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.ht-jobmeta-trade { font: 800 15px/1.2 var(--font-heading); color: var(--color-text); margin-bottom: 5px; }
.ht-jobmeta div + div { margin-top: 2px; }

.ht-task {
  padding: 13px 18px; border-bottom: 1px solid var(--color-divider);
  display: flex; gap: 12px; align-items: center;
}
.ht-check {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--color-divider);
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 var(--font-heading);
}
.ht-check-sm { width: 16px; height: 16px; font-size: 10px; margin-right: 8px; }
.ht-check-on { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #fff; }
.ht-task-label { flex: 1; font-size: 14px; }
.ht-x {
  border: 0; background: transparent; cursor: pointer; flex: none;
  font: 800 11px/1 var(--font-heading); padding: 4px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.ht-x:hover { color: var(--color-accent-700); }
.ht-x-accent { color: var(--color-accent-700); }

.ht-addrow {
  display: flex; gap: 8px; padding: 12px 18px;
  border-bottom: 1px solid var(--color-divider);
}
.ht-addrow .input { flex: 1; font-size: 13px; border-width: 2px; }
.ht-addrow-3 .ht-amt { flex: none; width: 82px; }
.ht-notes { border-width: 2px; min-height: 84px; font-size: 14px; }

.ht-part {
  padding: 13px 18px; border-bottom: 1px solid var(--color-divider);
  display: flex; gap: 12px; align-items: center;
}
.ht-part-main { flex: 1; min-width: 0; }
.ht-part-name { font-size: 14px; font-weight: 600; }
.ht-part-sub {
  font-size: 11px; margin-top: 3px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.ht-step { display: flex; align-items: center; border: 2px solid var(--color-divider); flex: none; }
.ht-step-b {
  width: 32px; height: 32px; border: 0; background: transparent; color: inherit;
  display: flex; align-items: center; justify-content: center;
  font: 800 15px/1 var(--font-heading);
}
.ht-step-b:first-of-type { border-right: 1px solid var(--color-divider); }
.ht-step-b:last-of-type { border-left: 1px solid var(--color-divider); }
.ht-step-v {
  min-width: 34px; text-align: center;
  font: 800 14px/1 var(--font-heading); font-variant-numeric: tabular-nums;
}
.ht-part-line {
  width: 66px; text-align: right; flex: none;
  font: 800 14px/1 var(--font-heading); font-variant-numeric: tabular-nums;
}
.ht-sumrow {
  display: flex; justify-content: space-between; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.ht-sumrow-v { font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }

.ht-labour { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.ht-labour-v { font: 800 34px/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.ht-labour-rate { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.ht-line {
  padding: 13px 18px; border-bottom: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; align-items: center; font-size: 14px;
}
.ht-line-l {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  display: flex; align-items: center;
}
.ht-line-r { display: flex; align-items: center; gap: 10px; }
.ht-line-v { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-text); }
.ht-totalrow {
  padding: 16px 18px; border-bottom: 2px solid var(--color-divider);
  display: flex; justify-content: space-between; align-items: baseline;
}
.ht-total-v {
  font: 800 26px/1 var(--font-heading);
  font-variant-numeric: tabular-nums; color: var(--color-accent-700);
}

.ht-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  padding: 2px 18px 0;
}
.ht-photo { position: relative; margin: 0; aspect-ratio: 1; }
.ht-photo img { width: 100%; height: 100%; object-fit: cover; }
.ht-photo-x {
  position: absolute; top: 0; right: 0;
  width: 24px; height: 24px; border: 0; cursor: pointer;
  background: var(--color-text); color: var(--color-bg);
  font: 800 10px/1 var(--font-heading);
}

/* ── invoice ──────────────────────────────────────────────────────────── */
.ht-inv-head {
  padding: 16px 18px; border-bottom: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.ht-inv-biz { font: 800 17px/1.2 var(--font-heading); }
.ht-inv-bizsub {
  font-size: 11px; margin-top: 4px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.ht-inv-ref {
  text-align: right; flex: none; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.ht-inv-no { font: 800 12px/1 var(--font-heading); color: var(--color-text); margin-bottom: 4px; }
.ht-inv-billto {
  padding: 12px 18px; border-bottom: 1px solid var(--color-divider);
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.ht-inv-billto b { color: var(--color-text); font-weight: 700; }

/* ── job book ─────────────────────────────────────────────────────────── */
.ht-bookrow { padding: 15px 18px; border-bottom: 1px solid var(--color-divider); }
.ht-bookrow-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ht-bookrow-client { font: 800 15px/1.2 var(--font-heading); }
.ht-bookrow-total { font: 800 13px/1 var(--font-heading); font-variant-numeric: tabular-nums; flex: none; }
.ht-bookrow-meta {
  font-size: 12px; margin-top: 5px; display: flex; gap: 12px; flex-wrap: wrap;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* ── overview ─────────────────────────────────────────────────────────── */
.ht-grid2 {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--color-divider);
}
.ht-grid2 .ht-tile:nth-child(odd) { border-right: 1px solid var(--color-divider); }
.ht-grid2 .ht-tile:nth-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
.ht-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--color-divider); }
.ht-grid3 .ht-tile + .ht-tile { border-left: 1px solid var(--color-divider); }
.ht-tile { padding: 16px 18px; }
.ht-tile-sm { padding: 14px 18px; }
.ht-tile-v {
  font: 800 26px/1 var(--font-heading);
  margin-top: 7px; font-variant-numeric: tabular-nums;
}
.ht-tile-sm .ht-tile-v { font-size: 20px; }
.ht-tile-accent { color: var(--color-accent-700); }

.ht-bar-row { padding: 11px 18px; border-bottom: 1px solid var(--color-divider); }
.ht-bar-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; }
.ht-bar-hours { font-weight: 800; font-variant-numeric: tabular-nums; }
.ht-bar-track { height: 8px; background: var(--color-surface); }
.ht-bar-fill { height: 8px; background: var(--color-accent); }

.ht-cal {
  display: grid; gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
}
.ht-cal-7 { grid-template-columns: repeat(7, 1fr); }
.ht-cal-3 { grid-template-columns: repeat(3, 1fr); }
.ht-cal-head { border-bottom: 0; margin-bottom: 1px; }
.ht-cell { background: var(--color-bg); color: var(--color-text); text-align: center; }
.ht-cell-hd {
  background: var(--color-surface); padding: 5px 2px;
  font: 800 9px/1 var(--font-heading); text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.ht-cell-week { padding: 10px 4px; min-height: 66px; }
.ht-cell-month { padding: 8px 4px; min-height: 42px; font: 800 11px/1 var(--font-heading); }
.ht-cell-year { padding: 14px 6px; min-height: 56px; }
.ht-cell-mute { background: var(--color-surface); }
.ht-cell-on { background: var(--color-text); color: var(--color-bg); }
.ht-cell-day { font: 800 9px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.ht-cell-count { font: 800 14px/1 var(--font-heading); margin-top: 10px; }
.ht-cell-sub { font-size: 9px; margin-top: 3px; opacity: .7; }
.ht-dot { display: block; width: 5px; height: 5px; background: var(--color-accent); margin: 5px auto 0; }
.ht-cell-on .ht-dot { background: var(--color-bg); }

.ht-agenda { margin-top: 16px; }
.ht-agenda-day { margin-bottom: 14px; }
.ht-agenda-job {
  padding: 10px 12px; border: 1px solid var(--color-divider); margin-bottom: 6px;
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.ht-agenda-client { font-size: 13px; font-weight: 700; }
.ht-agenda-trade { font-size: 11px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.ht-agenda-right {
  text-align: right; flex: none; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.ht-agenda-right div + div { margin-top: 2px; }

/* ── settings ─────────────────────────────────────────────────────────── */
.ht-settings-row {
  padding: 15px 18px; border-bottom: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ht-settings-title { font: 800 15px/1.2 var(--font-heading); }
.ht-settings-sub { font-size: 11px; margin-top: 3px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.ht-chev { font: 800 15px/1 var(--font-heading); flex: none; }
.ht-sect { padding: 16px 18px; border-bottom: 1px solid var(--color-divider); }
.ht-sect-last { border-bottom: 0; padding-bottom: 28px; }

.ht-seg2 { display: flex; border: 2px solid var(--color-divider); }
.ht-seg-b {
  flex: 1; padding: 10px; text-align: center;
  border: 0; background: transparent; color: inherit;
  font: 800 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase;
}
.ht-seg-b:first-child { border-right: 2px solid var(--color-divider); }

.ht-fontgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
}
.ht-font {
  padding: 12px 10px; border: 0; color: inherit; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
}
.ht-font-aa { font-size: 20px; }
.ht-font-label { font-size: 10px; margin-top: 5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.ht-font.ht-on .ht-font-label { color: color-mix(in srgb, #fff 80%, transparent); }

.ht-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ht-swatch {
  width: 100%; aspect-ratio: 1; padding: 0;
  border: 2px solid var(--color-divider); cursor: pointer;
}
.ht-swatch-on { outline: 3px solid var(--color-text); outline-offset: 2px; }
.ht-narrow { max-width: 130px; }

.ht-plans {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
}
.ht-plan { padding: 12px; }
.ht-plan-name { font: 800 12px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
.ht-plan-pro { color: var(--color-accent-700); }
.ht-plan.ht-on .ht-plan-pro { color: #fff; }
.ht-plan-price { font: 800 20px/1 var(--font-heading); margin-top: 8px; }
.ht-plan-per { font-size: 11px; font-weight: 600; }
.ht-plan-body { font-size: 10px; margin-top: 8px; line-height: 1.6; opacity: .8; }

.ht-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── bottom sheets ────────────────────────────────────────────────────── */
.ht-sheet-back {
  position: absolute; inset: 0; z-index: 20;
  background: color-mix(in srgb, #201e1d 45%, transparent);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ht-sheet {
  background: var(--color-bg);
  border-top: 2px solid var(--color-text);
  max-height: 80%; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ht-sheet-head {
  padding: 16px 18px; border-bottom: 2px solid var(--color-divider);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.ht-sheet-title { font: 800 20px/1.1 var(--font-heading); margin-top: 6px; }
.ht-sheet-body { overflow-y: auto; flex: 1; }
.ht-stock {
  padding: 14px 18px; border-bottom: 1px solid var(--color-divider);
  display: flex; gap: 12px; align-items: center;
}
.ht-stock-out { opacity: .45; }
.ht-plus {
  width: 32px; height: 32px; flex: none;
  background: var(--color-accent-fill); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 16px/1 var(--font-heading);
}
.ht-stock-out .ht-plus { background: var(--color-neutral-500); }

/* ── storage failure ──────────────────────────────────────────────────── */
/* Loud on purpose: work logged while this is showing is not being written down. */
.ht-alert {
  flex: none;
  padding: 12px 18px;
  background: var(--color-accent-fill);
  color: #fff;
  font-size: 12px; line-height: 1.45; font-weight: 600;
  border-bottom: 2px solid var(--color-divider);
}

/* ── restore ──────────────────────────────────────────────────────────── */
.ht-restore-grid { border-top: 1px solid var(--color-divider); }
.ht-restore-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
}
.ht-restore-k { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.ht-restore-v { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ht-restore-warn {
  padding: 12px 14px;
  border: 2px solid var(--color-accent);
  color: var(--color-accent-700);
  font-size: 12px; line-height: 1.5;
}
.ht-restore-bad {
  padding: 12px 14px;
  border: 2px solid var(--color-divider);
  font-size: 13px; line-height: 1.5;
}

/* ── van ──────────────────────────────────────────────────────────────── */
.ht-pricelist-note {
  padding: 14px 18px;
  border-bottom: 2px solid var(--color-divider);
  font-size: 12px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.ht-tag-inline { margin-left: 8px; vertical-align: 1px; }
.ht-btn-inline {
  display: inline; padding: 0; font-size: 11px;
  font-family: var(--font-body); font-weight: 700;
}
/* the name block is the tap target; the stepper beside it is not */
.ht-part .ht-part-main[role="button"] { align-self: stretch; display: flex;
  flex-direction: column; justify-content: center; }

/* ── import ───────────────────────────────────────────────────────────── */
.ht-import-file {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-divider);
}
.ht-map { border-top: 1px solid var(--color-divider); }
.ht-map-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
}
.ht-map-k { font-size: 13px; }
.ht-req {
  display: block;
  font: 800 9px/1 var(--font-heading);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-top: 3px;
}
.ht-req-quiet { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.ht-map-v { font-size: 13px; min-width: 0; }
@media (max-width: 380px) {
  .ht-map-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── selected state ───────────────────────────────────────────────────── */
/* Last on purpose: tabs, nav buttons and segment buttons all declare their own
   transparent background at the same specificity, so this has to win on order. */
.ht-on { background: var(--color-accent-600); color: #fff; }

/* ── inputs: buttons in this app are never centred ────────────────────── */
button { font-family: var(--font-heading); }
.ht-tab, .ht-navbtn, .ht-seg-b, .ht-font, .ht-sq, .ht-timer, .ht-step-b, .ht-plus { cursor: pointer; }
select.input { appearance: none; }
input[type="date"].input, input[type="time"].input { min-height: 36px; }

/* ── restock list ─────────────────────────────────────────────────────── */
.ht-restock-row {
  display: grid;
  grid-template-columns: 1fr 62px 70px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
.ht-restock-main { min-width: 0; }
.ht-restock-qty {
  text-align: right; font-weight: 800;
  font-variant-numeric: tabular-nums; font-size: 14px;
}
.ht-totalrow-flush { padding-inline: 0; border-bottom: 0; border-top: 2px solid var(--color-divider); }

/* a Pro marker sitting inside a button, so the gate is visible before the tap */
.ht-tag-pro {
  background: color-mix(in srgb, #fff 25%, transparent);
  color: #fff;
  margin-left: auto;
}
.ht-tag-sm { font-size: 8px; padding: 3px 4px; margin-left: 6px; }
.ht-btn-row .btn { gap: 0; }