/* ============================================================
   home-act3.css — act 03 · "A colleague, not a tool." banner
   session. LEFT: a chat thread — a user asks in plain domain
   language, the reply streams as working updates in mono and
   lands as a compact result card; a second bubble ("why that
   fix?") gets a one-line rationale. RIGHT: a small day/night
   dial — you're offline at night, a spark keeps working, and
   by morning the result is waiting ("ready when you are").
   Three field chips swap the whole exchange. Every class,
   including state classes, is prefixed hm3-.
   ============================================================ */
#hm-act3 .hm3-panel {
  border: 1px solid var(--color-border, #e0ddd1);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  background: var(--color-bg, #f5f4ef);
  font-family: var(--font-sans, sans-serif);
  color: var(--color-text, #1a1a17);
}
.hm3-cap { margin-top: 14px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .02em; line-height: 1.6; color: var(--color-muted, #6c6b61); }
.hm3-cap strong { color: var(--color-text, #1a1a17); font-weight: 600; }

/* ---- header strip ------------------------------------------- */
.hm3-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--color-border, #e0ddd1); }
.hm3-head-t { font: 600 13px/1.3 var(--font-sans, sans-serif); letter-spacing: -.01em; color: var(--color-text, #1a1a17); }
.hm3-head-s { font: 400 12px/1 var(--font-mono, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted, #6c6b61); white-space: nowrap; }

/* ---- stage: two lanes --------------------------------------- */
.hm3-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(186px, 21vw, 232px); height: clamp(264px, 26vw, 330px); }
/* cream veil while the loop rewinds */
.hm3-stage::after { content: ""; position: absolute; inset: 0; z-index: 9; background: var(--color-bg, #f5f4ef); opacity: 0; transition: opacity .35s; pointer-events: none; }
.hm3-stage.hm3-veil::after { opacity: .92; }
/* instant rewind under the veil */
.hm3-stage.hm3-snap * { transition: none !important; animation: none !important; }

/* ---- left lane: the chat thread ----------------------------- */
.hm3-lane-chat { display: flex; flex-direction: column; min-width: 0; padding: 13px 16px 12px; overflow: hidden; }
.hm3-chat { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 7px; padding: 1px; }
.hm3-chat::-webkit-scrollbar { display: none; }
.hm3-msg { max-width: 88%; opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s; }
.hm3-msg:first-child { margin-top: auto; }
.hm3-msg.hm3-on { opacity: 1; transform: none; }
/* user bubble — plain language */
.hm3-msg-u { align-self: flex-end; background: var(--color-surface, #eae7dd); border: 1px solid var(--color-border, #e0ddd1); border-radius: 10px 10px 3px 10px; padding: 7px 10px; font-size: 13px; line-height: 1.45; color: var(--color-text, #1a1a17); }
.hm3-caret { display: inline-block; width: 6px; height: 12px; background: var(--accent, #d9542b); vertical-align: -2px; animation: hm3-blink 1s steps(1) infinite; }
@keyframes hm3-blink { 50% { opacity: 0; } }
/* system working updates — mono, small accent marker */
.hm3-msg-s { align-self: flex-start; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5; color: var(--color-muted, #6c6b61); padding: 1px 0 1px 14px; position: relative; }
.hm3-msg-s::before { content: ""; position: absolute; left: 1px; top: 5px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent, #d9542b); opacity: .85; }
/* compact result card */
.hm3-card { align-self: flex-start; display: flex; align-items: center; gap: 8px; background: #fbf2ea; border: 1px solid color-mix(in srgb, var(--accent, #d9542b) 45%, transparent); border-radius: 9px; padding: 7px 11px; }
.hm3-card-seal { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent, #d9542b); color: var(--color-bg, #f5f4ef); font: 700 12px/1 var(--font-mono, monospace); flex: 0 0 auto; }
.hm3-card-t { font: 500 12px/1.3 var(--font-mono, monospace); letter-spacing: .02em; color: var(--color-text, #1a1a17); }

/* ---- right lane: day/night dial ----------------------------- */
.hm3-lane-dial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-left: 1px solid var(--color-border, #e0ddd1); }
.hm3-dial { position: relative; width: clamp(74px, 8vw, 94px); aspect-ratio: 1 / 1; flex: 0 0 auto; }
.hm3-dial-svg { display: block; width: 100%; height: 100%; }
.hm3-dial-ring { fill: none; stroke: rgba(26, 26, 23, .14); stroke-width: 1.5; }
.hm3-dial-tick { stroke: var(--color-muted, #6c6b61); stroke-width: 1.3; opacity: .55; }
/* the night span (21:00 → 06:00), dashed */
.hm3-dial-night { fill: none; stroke: var(--color-muted, #6c6b61); stroke-width: 2.4; stroke-dasharray: 2 3; stroke-linecap: round; opacity: .45; transition: opacity .6s; }
.hm3-morn .hm3-dial-night { opacity: .15; }
/* the hand — JS rotates it (00:00 at top; transform-origin at hub) */
.hm3-hand { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: 34%; border-radius: 2px; background: var(--color-text, #1a1a17); transform-origin: 50% 100%; transform: rotate(-15deg); transition: transform 1.15s cubic-bezier(.4, 0, .2, 1); }
.hm3-hub { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--color-text, #1a1a17); }

.hm3-dside { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.hm3-clockrow { display: flex; align-items: center; gap: 7px; }
.hm3-glyph { font-size: 13px; line-height: 1; color: var(--color-text, #1a1a17); }
.hm3-glyph-sun { display: none; }
.hm3-morn .hm3-glyph-sun { display: inline; }
.hm3-morn .hm3-glyph-moon { display: none; }
.hm3-clock { font: 500 13.5px/1 var(--font-mono, monospace); letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--color-text, #1a1a17); }
.hm3-sub { font: 400 12px/1.3 var(--font-mono, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted, #6c6b61); }
.hm3-sub-morn { display: none; }
.hm3-morn .hm3-sub-morn { display: inline; }
.hm3-morn .hm3-sub-night { display: none; }
/* spark and ready-chip share one slot — no layout shift on swap */
.hm3-slot { display: grid; justify-items: center; margin-top: 2px; }
.hm3-slot > * { grid-area: 1 / 1; }
.hm3-spark { font: 400 12px/1.6 var(--font-mono, monospace); letter-spacing: .04em; color: var(--color-muted, #6c6b61); opacity: 0; transition: opacity .35s; white-space: nowrap; }
.hm3-spark.hm3-on { opacity: 1; animation: hm3-throb 1.1s ease-in-out infinite; }
.hm3-morn .hm3-spark { opacity: 0; animation: none; }
@keyframes hm3-throb { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.hm3-ready { font: 500 12px/1.2 var(--font-mono, monospace); color: var(--accent, #d9542b); background: #fbf2ea; border: 1px solid color-mix(in srgb, var(--accent, #d9542b) 50%, transparent); border-radius: 999px; padding: 5px 11px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .45s .15s, transform .45s .15s; }
.hm3-ready.hm3-on { opacity: 1; transform: none; }

/* ---- field chips -------------------------------------------- */
.hm3-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 15px; border-top: 1px solid var(--color-border, #e0ddd1); }
.hm3-chips-lab { font: 400 12px/1 var(--font-mono, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted, #6c6b61); margin-right: 3px; }
.hm3-chip { font: 500 12px/1.2 var(--font-mono, monospace); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border, #e0ddd1); background: var(--color-surface, #eae7dd); color: var(--color-text, #1a1a17); cursor: pointer; transition: border-color .25s, color .25s, background-color .25s; }
.hm3-chip:hover { border-color: color-mix(in srgb, var(--accent, #d9542b) 45%, transparent); color: var(--accent, #d9542b); }
.hm3-chip:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }
.hm3-chip.hm3-act { background: #fbf2ea; border-color: color-mix(in srgb, var(--accent, #d9542b) 55%, transparent); color: var(--accent, #d9542b); font-weight: 600; }

/* ---- reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hm3-msg, .hm3-hand, .hm3-ready, .hm3-spark, .hm3-dial-night, .hm3-stage::after { transition: none; }
  .hm3-caret, .hm3-spark { animation: none; }
}

/* ---- responsive: lanes stack -------------------------------- */
@media (max-width: 640px) {
  .hm3-stage { display: block; height: auto; }
  .hm3-lane-chat { height: 244px; box-sizing: border-box; }
  .hm3-lane-dial { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 12px 16px; border-left: 0; border-top: 1px solid var(--color-border, #e0ddd1); }
  .hm3-dial { width: 60px; }
  .hm3-dside { align-items: flex-start; text-align: left; }
  .hm3-slot { justify-items: start; }
  .hm3-head-s { display: none; }
}