/* Harbour Mutual sample bank app. Sample bank, sample people, sample prices. */
.hm-stage {
  --hm-paper: #FBFBF8; --hm-mist: #EEF1EE; --hm-ink: #0F1A22; --hm-slate: #55626A; --hm-line: rgba(15, 26, 34, 0.12);
  --hm-sea: #14555C; --hm-sea-2: #0C3C42; --hm-dollar: #3D6A8A; --hm-coin: #5E8F7E; --hm-gold: #A87A2A;
  --hm-ok: #1D7A4E; --hm-hold: #9A5B00; --hm-block: #B0302A;
  --hm-ok-bg: #E3F1E9; --hm-hold-bg: #F6EBD8; --hm-block-bg: #F6E1DE;
  --hm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hm-ease: cubic-bezier(0.2, 0, 0, 1);
  position: relative; display: grid; gap: 24px; align-items: start; color: var(--hm-ink);
  font-family: inherit; font-size: 15px; line-height: 1.4;
}
:where(.hm-stage) *, :where(.hm-stage) *::before, :where(.hm-stage) *::after { box-sizing: border-box; }
:where(.hm-stage) :where(button, input, select) { font: inherit; color: inherit; }
:where(.hm-stage) button { cursor: pointer; }
.hm-stage :focus-visible { outline: 2px solid var(--hm-ink); outline-offset: 2px; }
.hm-stage [hidden] { display: none !important; }

/* phone */
.hm-phone { position: relative; width: 100%; height: 100svh; background: var(--hm-paper); overflow: hidden; }
.hm-app { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--hm-paper); }
.hm-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; padding-top: max(14px, env(safe-area-inset-top)); }
.hm-mark { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.01em; font-size: 16px; margin-right: auto; white-space: nowrap; min-width: 0; }
.hm-fs { padding: 0; width: 44px; justify-content: center; }
.hm-fs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-mark svg { width: 28px; height: 28px; }
.hm-iconbtn { white-space: nowrap; flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--hm-line); background: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.hm-iconbtn .hm-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--hm-slate); }
.hm-iconbtn .hm-pip.v-approve { background: var(--hm-ok); } .hm-iconbtn .hm-pip.v-hold { background: var(--hm-hold); } .hm-iconbtn .hm-pip.v-block { background: var(--hm-block); }
.hm-screen { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 16px 24px; overscroll-behavior: contain; scrollbar-width: thin; }
.hm-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0 10px max(10px, env(safe-area-inset-bottom)); padding: 6px; border-radius: 999px; background: var(--hm-ink); }
.hm-tabs button { min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: #AFC0C2; font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.hm-tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hm-tabs button[aria-current="page"] { background: #F3F5F1; color: var(--hm-ink); }
.hm-tabs :focus-visible { outline-color: #fff; }

/* type */
.hm-h { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 10px 0 6px; }
.hm-sub { color: var(--hm-slate); margin: 0 0 16px; font-size: 14px; }
.hm-eyebrow { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-slate); }
.hm-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hm-gold); }
.hm-sample { font-size: 11.5px; color: var(--hm-slate); }

/* home */
.hm-hello { margin: 6px 0 0; font-size: 14px; color: var(--hm-slate); }
.hm-ring { position: relative; width: 236px; height: 236px; margin: 4px auto 6px; }
.hm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-ring circle { fill: none; stroke-width: 15; }
.hm-total { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.hm-total small { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--hm-slate); }
.hm-total b { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-holdings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hm-line); }
.hm-holdings li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hm-line); }
.hm-holdings i { width: 12px; height: 12px; border-radius: 50%; }
.hm-holdings b { font-weight: 600; display: block; } .hm-holdings span { color: var(--hm-slate); font-size: 12.5px; }
.hm-holdings .r { text-align: right; font-variant-numeric: tabular-nums; }
.hm-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hm-pill { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--hm-ink); background: #fff; font-weight: 600; font-size: 14px; }
.hm-pill:active { transform: translateY(1px); }
.hm-recent { list-style: none; margin: 0; padding: 0; }
.hm-recent li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hm-line); font-size: 13.5px; }
.hm-recent em { font-style: normal; font-size: 12px; font-weight: 700; }

/* shared form bits */
.hm-primary { width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: 999px; background: var(--hm-ink); color: #F3F5F1; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.hm-primary:active { transform: translateY(1px); }
.hm-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.hm-field { display: block; margin: 14px 0 0; }
.hm-field > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--hm-slate); margin-bottom: 6px; }
.hm-input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--hm-line); background: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
.hm-input:focus { border-color: var(--hm-ink); outline: none; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hm-chip { min-height: 44px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--hm-line); background: var(--hm-mist); font-size: 13px; font-weight: 600; }
.hm-chip[aria-pressed="true"] { background: var(--hm-ink); color: #fff; border-color: var(--hm-ink); }
.hm-note { margin: 10px 0 0; padding: 10px 14px; border-radius: 18px; background: var(--hm-mist); font-size: 12.5px; color: var(--hm-slate); }

/* payees */
.hm-payees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; }
.hm-payee { border: 0; background: none; padding: 4px 2px; display: grid; justify-items: center; gap: 5px; text-align: center; min-height: 44px; border-radius: 18px; }
.hm-payee .av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--hm-mist); font-weight: 600; font-size: 16px; border: 2px solid transparent; transition: border-color 150ms var(--hm-ease), background 150ms var(--hm-ease); }
.hm-payee small { font-size: 11.5px; line-height: 1.2; color: var(--hm-slate); }
.hm-payee b { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.hm-payee[aria-pressed="true"] .av { border-color: var(--hm-ink); background: #fff; }
.hm-payee .av.add { border: 1.5px dashed var(--hm-slate); background: none; font-size: 22px; font-weight: 400; }
.hm-addform { margin-top: 10px; padding: 14px; border-radius: 24px; background: var(--hm-mist); }
.hm-addform .row { display: flex; gap: 8px; margin-top: 10px; }
.hm-addform select { flex: 1; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--hm-line); background: #fff; padding: 0 12px; }
.hm-addform .hm-pill { flex: none; }

/* card */
.hm-cardwrap { perspective: 900px; margin: 8px auto 0; max-width: 340px; }
.hm-card { position: relative; aspect-ratio: 1.586; border-radius: 20px; overflow: hidden; color: #EAF1EF; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 300ms var(--hm-ease); box-shadow: 0 24px 48px rgba(12, 60, 66, 0.22); touch-action: pan-y; }
.hm-card-face { position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 100%, #1B6A72 0%, var(--hm-sea-2) 70%); transition: filter 600ms var(--hm-ease); }
.hm-card-face svg.contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.32; }
.hm-card-sheen { position: absolute; inset: 0; background: radial-gradient(60% 60% at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, 0.18), transparent 60%); pointer-events: none; }
.hm-card .brand { position: absolute; left: 20px; top: 18px; display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.hm-card .brand svg { width: 22px; height: 22px; }
.hm-card .chipc { position: absolute; left: 22px; top: 40%; width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #D8B66A, #A87A2A); }
.hm-card .chipc::after { content: ""; position: absolute; inset: 7px 9px; border: 1px solid rgba(15, 26, 34, 0.35); border-radius: 4px; }
.hm-card .num { position: absolute; left: 20px; bottom: 40px; font-family: var(--hm-mono); letter-spacing: 0.14em; font-size: 15px; }
.hm-card .nm { position: absolute; left: 20px; bottom: 16px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.hm-card .kind { position: absolute; right: 20px; bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.hm-frost { position: absolute; inset: 0; clip-path: circle(0% at 86% 14%); background: radial-gradient(120% 120% at 92% 6%, rgba(244, 251, 253, 0.82), rgba(214, 233, 240, 0.5) 45%, rgba(226, 240, 245, 0.28) 80%); transition: clip-path 700ms var(--hm-ease); pointer-events: none; }
.hm-frost svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-frost path { fill: none; stroke: #fff; stroke-linecap: round; stroke-opacity: 0.7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 800ms var(--hm-ease) 150ms; }
.hm-frost .grain { opacity: 0; transition: opacity 600ms var(--hm-ease) 200ms; }
.frozen .hm-frost .grain { opacity: 0.55; }
.hm-frost .badge { position: absolute; right: 16px; top: 14px; display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--hm-sea-2); font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(-4px); transition: opacity 200ms var(--hm-ease) 500ms, transform 200ms var(--hm-ease) 500ms; }
.hm-frost .badge svg { position: static; width: 14px; height: 14px; }
.frozen .hm-frost { clip-path: circle(150% at 86% 14%); }
.frozen .hm-frost path { stroke-dashoffset: 0; }
.frozen .hm-frost .badge { opacity: 1; transform: none; }
.frozen .hm-card-face { filter: saturate(0.25) brightness(1.15); }
.hm-freeze { width: 100%; min-height: 56px; margin-top: 18px; border-radius: 999px; border: 1.5px solid var(--hm-ink); background: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hm-freeze[aria-pressed="true"] { background: var(--hm-ink); color: #fff; }
.hm-freeze svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.hm-controls { list-style: none; margin: 0; padding: 0; }
.hm-controls li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hm-line); font-size: 14px; }
.hm-controls b { font-weight: 600; }

/* gold */
.hm-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hm-price b { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-age { margin-left: auto; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--hm-ok-bg); color: var(--hm-ok); font-variant-numeric: tabular-nums; }
.hm-age.stale { background: var(--hm-hold-bg); color: var(--hm-hold); }
.hm-spark { width: 100%; height: 72px; display: block; margin: 8px 0 4px; }
.hm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hm-mist); margin-top: 12px; }
.hm-seg button { min-height: 44px; border: 0; border-radius: 999px; background: none; font-weight: 600; }
.hm-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 10px rgba(15, 26, 34, 0.08); }
.hm-moverow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.hm-moverow select { min-height: 44px; border-radius: 999px; border: 1.5px solid var(--hm-line); background: #fff; padding: 0 10px; width: 100%; }

/* claims */
.hm-steps { display: flex; gap: 6px; margin: 4px 0 6px; }
.hm-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--hm-line); }
.hm-steps i.on { background: var(--hm-sea); }
.hm-opts { display: grid; gap: 8px; }
.hm-opt { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-align: left; padding: 8px; border-radius: 22px; border: 1.5px solid var(--hm-line); background: #fff; min-height: 60px; }
.hm-opt svg { width: 64px; height: 44px; border-radius: 12px; display: block; }
.hm-opt b { display: block; font-weight: 600; } .hm-opt small { color: var(--hm-slate); }
.hm-opt[aria-pressed="true"] { border-color: var(--hm-ink); }
.hm-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--hm-mist); }
.hm-photo svg, .hm-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hm-scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(20, 85, 92, 0.28) 85%, rgba(20, 85, 92, 0.9) 100%); transform: translateY(-100%); }
.hm-scan.go { animation: hm-scan 1100ms var(--hm-ease) 2; }
@keyframes hm-scan { to { transform: translateY(340%); } }
.hm-file { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; border-radius: 999px; border: 1.5px dashed var(--hm-slate); font-weight: 600; font-size: 14px; cursor: pointer; }
.hm-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hm-file:focus-within { outline: 2px solid var(--hm-ink); outline-offset: 2px; }
.hm-triage { list-style: none; margin: 12px 0 0; padding: 0; }
.hm-triage li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hm-line); font-size: 13.5px; opacity: 1; }
.hm-triage li span { color: var(--hm-slate); font-size: 12.5px; }
.hm-triage.reveal li { animation: hm-in 260ms var(--hm-ease) backwards; }
@keyframes hm-in { from { opacity: 0; transform: translateY(6px); } }

/* result sheet inside the phone */
.hm-sheet { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(15, 26, 34, 0.28); }
.hm-sheet-in { max-height: 92%; overflow-y: auto; background: var(--hm-paper); border-radius: 32px 32px 0 0; padding: 22px 18px max(18px, env(safe-area-inset-bottom)); animation: hm-up 280ms var(--hm-ease); }
@keyframes hm-up { from { transform: translateY(40px); opacity: 0; } }
.hm-verdict-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.hm-verdict-badge i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.hm-verdict-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v-approve .hm-verdict-badge, .hm-verdict-badge.v-approve { background: var(--hm-ok-bg); color: var(--hm-ok); } .v-approve .hm-verdict-badge i, .hm-verdict-badge.v-approve i { background: var(--hm-ok); }
.v-hold .hm-verdict-badge, .hm-verdict-badge.v-hold { background: var(--hm-hold-bg); color: var(--hm-hold); } .v-hold .hm-verdict-badge i, .hm-verdict-badge.v-hold i { background: var(--hm-hold); }
.v-block .hm-verdict-badge, .hm-verdict-badge.v-block { background: var(--hm-block-bg); color: var(--hm-block); } .v-block .hm-verdict-badge i, .hm-verdict-badge.v-block i { background: var(--hm-block); }
.hm-sheet h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin: 12px 0 6px; line-height: 1.15; outline: none; }
.hm-why { margin: 0 0 8px; font-size: 14.5px; }
.hm-mini { list-style: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 20px; background: var(--hm-mist); font-size: 12.5px; display: grid; gap: 5px; }
.hm-mini li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; color: var(--hm-slate); }
.hm-mini li i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; justify-self: center; }
.hm-mini li.pass i, .hm-mini li.released i { background: var(--hm-ok); border-color: var(--hm-ok); }
.hm-mini li.fired { color: var(--hm-ink); font-weight: 700; }
.v-hold .hm-mini li.fired i { background: var(--hm-hold); border-color: var(--hm-hold); }
.v-block .hm-mini li.fired i { background: var(--hm-block); border-color: var(--hm-block); }
.v-approve .hm-mini li.fired i { background: var(--hm-ok); border-color: var(--hm-ok); }
.hm-actions { display: grid; gap: 8px; margin-top: 14px; }
.hm-actions .hm-primary { margin-top: 0; }
.hm-ghost { min-height: 48px; border-radius: 999px; border: 1.5px solid var(--hm-ink); background: transparent; font-weight: 600; }

/* the money-moving moment */
.hm-flow { position: relative; width: 300px; height: 150px; margin: 4px auto 0; }
.hm-flow svg { position: absolute; inset: 0; width: 300px; height: 150px; overflow: visible; }
.hm-flow .node { position: absolute; top: 72px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; transition: transform 300ms var(--hm-ease); }
.hm-flow .node.a { left: 40px; } .hm-flow .node.b { left: 260px; }
.hm-flow .lab { position: absolute; top: 140px; width: 120px; margin-left: -60px; text-align: center; font-size: 11.5px; color: var(--hm-slate); line-height: 1.25; }
.hm-flow .lab b { display: block; color: var(--hm-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.hm-flow .lab.a { left: 40px; } .hm-flow .lab.b { left: 260px; }
.hm-flow .dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; offset-path: path("M40 104 Q150 -6 260 104"); offset-distance: 0%; offset-rotate: 0deg; opacity: 0; }
.hm-flowpad { padding-bottom: 46px; }
.hm-scanface { width: 72px; height: 72px; margin: 6px auto; display: block; }
.hm-scanface circle { fill: none; stroke: var(--hm-sea); stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; transform: rotate(-90deg); transform-origin: center; }
.hm-scanface.go circle { animation: hm-draw 700ms var(--hm-ease) forwards; }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }

/* side: checkpoint, tests, audit log */
.hm-side { display: none; }
.hm-panel { background: #fff; border-radius: 32px; padding: 22px 20px; border: 1px solid var(--hm-line); }
.hm-panel h3 { margin: 0 0 4px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.hm-req { margin: 0 0 12px; font-size: 13.5px; color: var(--hm-slate); min-height: 2.8em; }
.hm-req b { color: var(--hm-ink); font-weight: 600; }
.hm-rules { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.hm-rules li { counter-increment: r; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--hm-line); transition: opacity 150ms var(--hm-ease), background 150ms var(--hm-ease); }
.hm-rules li::before { content: counter(r, decimal-leading-zero); font: 600 11px var(--hm-mono); color: var(--hm-slate); padding-top: 2px; }
.hm-rules b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.hm-rules small { display: block; color: var(--hm-slate); font-size: 12px; line-height: 1.3; margin-top: 1px; }
.hm-rules em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; margin-top: 1px; }
.hm-rules li.na, .hm-rules li.skip { opacity: 0.38; }
.hm-rules li.pass em, .hm-rules li.released em { background: var(--hm-ok-bg); color: var(--hm-ok); }
.hm-rules li.fired { background: var(--hm-mist); border-radius: 14px; }
.hm-rules li.fired.v-approve em { background: var(--hm-ok); color: #fff; }
.hm-rules li.fired.v-hold em { background: var(--hm-hold); color: #fff; }
.hm-rules li.fired.v-block em { background: var(--hm-block); color: #fff; }
.hm-rules li.checking em { background: var(--hm-ink); color: #fff; }
.hm-verdict { margin-top: 14px; }
.hm-verdict p { margin: 8px 0 0; font-size: 14px; }
.hm-verdict .hm-actions { grid-template-columns: 1fr; }
.hm-tests { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-tests button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hm-line); background: var(--hm-mist); font-size: 13px; font-weight: 600; text-align: left; }
.hm-tests button:hover { border-color: var(--hm-ink); }
.hm-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; border-bottom: 1px solid var(--hm-line); }
.hm-switch input { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--hm-block); position: relative; cursor: pointer; flex: none; transition: background 150ms var(--hm-ease); }
.hm-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 150ms var(--hm-ease); }
.hm-switch input:checked { background: var(--hm-ok); }
.hm-switch input:checked::after { transform: translateX(18px); }
.hm-switch span small { display: block; color: var(--hm-slate); font-size: 12px; }
.hm-logbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.hm-logbar button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--hm-ink); background: #fff; font-size: 13px; font-weight: 600; }
.hm-chain { margin: 0 0 10px; padding: 10px 14px; border-radius: 18px; font-size: 13px; background: var(--hm-mist); }
.hm-chain.ok { background: var(--hm-ok-bg); color: var(--hm-ok); } .hm-chain.bad { background: var(--hm-block-bg); color: var(--hm-block); }
.hm-loglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; }
.hm-loglist li { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--hm-line); font-size: 12.5px; }
.hm-loglist li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--hm-line); }
.hm-loglist li::after { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--hm-ok); }
.hm-loglist li.v-hold::after { background: var(--hm-hold); } .hm-loglist li.v-block::after { background: var(--hm-block); }
.hm-loglist .meta { display: flex; gap: 8px; color: var(--hm-slate); font: 500 11px var(--hm-mono); }
.hm-loglist b { display: block; font-weight: 600; font-size: 13px; margin: 2px 0; }
.hm-loglist code { display: block; font: 500 10.5px var(--hm-mono); color: var(--hm-slate); word-break: break-all; }
.hm-loglist li.broken { background: var(--hm-block-bg); }
.hm-loglist li.broken code, .hm-loglist li.after code { color: var(--hm-block); }
.hm-loglist li.after { opacity: 0.6; }
.hm-loglist li.fresh { animation: hm-in 260ms var(--hm-ease); }
.hm-sideclose { display: none; }

/* phones: the app is the screen, the checkpoint is a sheet over it */
@media (max-width: 767px) {
  .hm-stage { margin-inline: -16px; display: block; }
  .hm-stage.fs { position: fixed; inset: 0; z-index: 60; margin: 0; }
  .hm-stage.fs .hm-phone { height: 100%; }
  .hm-side { display: block; position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow-y: auto; z-index: 8; background: var(--hm-mist); border-radius: 28px 28px 0 0; padding: 8px 12px 20px; box-shadow: 0 -24px 48px rgba(15, 26, 34, 0.18); transform: translateY(105%); visibility: hidden; transition: transform 280ms var(--hm-ease), visibility 0s 280ms; overscroll-behavior: contain; }
  .hm-stage.side-open .hm-side { transform: none; visibility: visible; transition: transform 280ms var(--hm-ease); }
  .hm-sideclose { display: flex; position: sticky; top: 0; z-index: 2; justify-content: space-between; align-items: center; padding: 8px 6px 10px; background: var(--hm-mist); font-weight: 600; }
  .hm-sideclose button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--hm-ink); background: #fff; font-weight: 600; }
  .hm-panel { margin-top: 10px; border-radius: 24px; padding: 18px 16px; }
}
@media (min-width: 768px) {
  .hm-stage { grid-template-columns: 360px 1fr; }
  .hm-phone { height: min(760px, calc(100svh - 120px)); min-height: 640px; border-radius: 48px; border: 10px solid var(--hm-ink); box-shadow: 0 24px 48px rgba(15, 26, 34, 0.14); }
  .hm-phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 92px; height: 24px; margin-left: -46px; border-radius: 999px; background: var(--hm-ink); z-index: 9; }
  .hm-top { padding-top: 40px; }
  .hm-only-phone { display: none !important; }
  .hm-side { display: grid; gap: 16px; align-content: start; max-height: min(760px, calc(100svh - 120px)); min-height: 640px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
}
@media (min-width: 1200px) {
  .hm-stage { grid-template-columns: 380px 1fr 1fr; }
  .hm-side { display: contents; }
  .hm-side > .hm-panel { max-height: min(760px, calc(100svh - 120px)); min-height: 640px; overflow-y: auto; scrollbar-width: thin; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-stage *, .hm-stage *::before, .hm-stage *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .hm-card { transform: none !important; }
}