/* ============================================================
   Home — "A Business, Running" (ambient witness hero)
   Scope: .hos-   Steward: S9 Engineering   Page: index.html
   Sprint 3 signature experience. Additive, deletable unit.
   Loaded after style.css/shell.css — deliberately overrides the
   older small .hos widget rules in style.css (same namespace,
   evolved in place per the Sprint 3 spec; internal class names
   below are new and do not collide with the old widget's).

   The Stillness Principle: nothing here animates except in direct
   response to an event firing. No ambient drift, no idle loops.
   Motion budget: one easing cubic-bezier(0.22, 1, 0.36, 1),
   150-400ms reactions, GPU-only (opacity/transform), reduced-motion
   resolves to a completed, static day.
   ============================================================ */

.hos {
    width: 100%;
    max-width: 640px;
    margin: 40px auto 0;
    padding: 22px 24px 16px;
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm);
    text-align: left;
    display: block;
    position: relative;
    transition: opacity 0.6s ease;
}

/* the 02:13 after-hours beat dims the whole surface, not the theme */
.hos.is-night {
    opacity: 0.82;
}

.hos-clock {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.hos-time {
    font: 700 0.95rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-primary);
    font-feature-settings: "tnum";
    letter-spacing: 0.01em;
}

.hos-daylabel {
    font: 600 0.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* fixed-height stage: the single moving part, sized to the longest
   event so nothing shifts layout when lines change (zero CLS) */
.hos-stage {
    min-height: 108px;
    position: relative;
}

/* [hidden] must win over the flex display below it in the cascade —
   otherwise the browser's default [hidden]{display:none} is overridden
   and the event/settle cards render simultaneously */
.hos-event[hidden],
.hos-settle[hidden] {
    display: none;
}

.hos-event {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hos-l1,
.hos-l2,
.hos-l3 {
    margin: 0;
    line-height: 1.5;
}

.hos-l1 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.hos-l2 {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hos-event.show-understand .hos-l2 {
    opacity: 1;
    max-height: 2.4em;
}

.hos-l3 {
    font-size: 0.82rem;
    color: #10B981;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hos-event.show-resolve .hos-l3 {
    opacity: 1;
    transform: translateY(0);
}

/* a quiet marker on the improvement-pair beat — text-only, no badge noise */
.hos-l2 .hos-improved {
    color: var(--accent-text);
    font-style: normal;
    font-weight: 600;
}

/* cross-fade between events: old event fades down as new one fades up */
.hos-event {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.hos-event.is-leaving {
    opacity: 0;
}

/* settle card (day close) — same stage slot, shown in place of .hos-event */
.hos-settle {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hos-settle-line {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.hos-settle-line:first-child {
    color: var(--text-primary);
    font-weight: 600;
}

.hos-foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hos-tally {
    font: 500 0.72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.hos-tally b {
    color: var(--text-primary);
    font-weight: 700;
    font-feature-settings: "tnum";
}

.hos-pause {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-hairline);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hos-pause:hover,
.hos-pause:focus-visible {
    border-color: var(--accent);
    color: var(--accent-text);
}

.hos-pause:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.hos .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* reduced motion: everything above already renders its resolved
   end-state via JS (completed day, settle card) — this just removes
   the transition machinery so nothing animates in place */
@media (prefers-reduced-motion: reduce) {
    .hos,
    .hos-l2,
    .hos-l3,
    .hos-event {
        transition: none !important;
    }
}

@media (max-width: 640px) {
    .hos {
        padding: 18px 18px 14px;
        margin-top: 28px;
    }
    .hos-stage {
        min-height: 128px;
    }
}

/* The site-wide fixed .mobile-sticky-cta would otherwise sit on top of
   the hero's own primary CTA on mobile, since the hero fills close to
   the viewport height. hos.js hides it for the duration the hero is in
   view (toggling .hos-hide-sticky on <body>) and restores it once the
   visitor scrolls on — home-only, since hos.css loads nowhere else. */
.hos-hide-sticky .mobile-sticky-cta {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}