/* ============================================================
   openTMS — BRAND LOGO ("Puls")
   ------------------------------------------------------------
   A single source of truth for the openTMS wordmark + EKG pulse.
   Renders faithfully across all four UI contexts:
     · default light   · default dark (.dark)
     · claude light     · claude dark (html.theme-claude(.dark))

   Markup contracts (kept in sync with js/brand-logo.js):

   1) Vertical lockup (loader, auth modal) — wordmark over pulse
      <span class="otms-lockup otms-lockup--xl" data-otms-logo data-otms-live>
        <span class="otms-word">openTMS</span>
        <span class="otms-pulse"> …two SVGs + dot… </span>
      </span>

   2) Mark box (sidebar, mobile, admin, presentation) — the "icon"
      <span class="otms-mark" data-otms-logo>
        <span class="otms-pulse"> …svg… </span>
      </span>

   The pulse line inherits `currentColor`, so it is correct in every
   theme without overrides. The warm accent (terracotta) only appears
   in interactive/"alive" states and is themed via --otms-accent.
   ============================================================ */

/* ---- Brand typeface (self-hosted; CSP 'self'). Variable wght. ---- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
    /* latin subset only — matches the bundled cut */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Per-context tokens ------------------------------------ */
.otms-lockup,
.otms-mark {
    /* warm accent used for "alive" EKG states + dot/heart */
    --otms-accent: #C0392B;
    /* amber used for the ischemia (ST-depression) read-out only */
    --otms-warn: #8A6D1F;
    /* the ink mark box + its pulse */
    --otms-mark-bg: #15140F;
    --otms-mark-ink: #F4F1EA;
    --otms-mark-border: transparent;
    /* faint resting baseline under the live trace */
    --otms-base: currentColor;
    --otms-base-opacity: 0.16;
    -webkit-font-smoothing: antialiased;
}
.dark .otms-lockup,
.dark .otms-mark {
    --otms-accent: #E0584A;
    --otms-warn: #D9B84A;
    /* keep the ink box from vanishing on a dark surface */
    --otms-mark-border: rgba(244, 241, 234, 0.14);
}
html.theme-claude .otms-lockup,
html.theme-claude .otms-mark {
    --otms-accent: var(--cl-accent, #C35A35);
    --otms-warn: var(--cl-warning, #B8942A);
}
html.theme-claude.dark .otms-lockup,
html.theme-claude.dark .otms-mark {
    --otms-mark-border: rgba(232, 224, 212, 0.16);
}

/* ---- Wordmark ---------------------------------------------- */
.otms-word {
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: currentColor;
    white-space: nowrap;
    font-feature-settings: 'kern' 1;
}

/* ============================================================
   VERTICAL LOCKUP — wordmark stacked over the pulse line
   ============================================================ */
.otms-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--otms-gap, 0.32em);
    color: inherit;
    user-select: none;
}
.otms-lockup .otms-word {
    font-size: var(--otms-word-size, 2rem);
    text-align: center;
}
.otms-lockup .otms-pulse {
    position: relative;
    width: 100%;
    height: var(--otms-pulse-h, 1.1em);
}

/* size variants */
.otms-lockup--sm  { --otms-word-size: 1.25rem; --otms-pulse-h: 0.85rem; --otms-gap: 0.28rem; }
.otms-lockup--md  { --otms-word-size: 1.75rem; --otms-pulse-h: 1.1rem;  --otms-gap: 0.34rem; }
.otms-lockup--lg  { --otms-word-size: 2.75rem; --otms-pulse-h: 1.6rem;  --otms-gap: 0.42rem; }
.otms-lockup--xl  { --otms-word-size: 4.5rem;  --otms-pulse-h: 2.6rem;  --otms-gap: 0.55rem; }

/* ============================================================
   MARK BOX — the compact "icon": pulse on an ink chip
   ============================================================ */
.otms-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--otms-mark-size, 2rem);
    height: var(--otms-mark-size, 2rem);
    /* No percentage padding here: padding-% resolves against the CONTAINING
       block's width, which distorted the chip into a rectangle in wide
       containers (e.g. the mobile header). The pulse insets itself instead. */
    padding: 0;
    border-radius: var(--otms-mark-radius, 0.55rem);
    background: var(--otms-mark-bg);
    color: var(--otms-mark-ink);
    box-shadow: inset 0 0 0 1px var(--otms-mark-border);
    flex-shrink: 0;
    user-select: none;
    overflow: hidden;
}
.otms-mark .otms-pulse {
    position: relative;
    width: 62%;
    height: 34%;
}
/* mark size helpers */
.otms-mark--sm { --otms-mark-size: 1.75rem; --otms-mark-radius: 0.45rem; }
.otms-mark--md { --otms-mark-size: 2.25rem; --otms-mark-radius: 0.6rem; }
.otms-mark--lg { --otms-mark-size: 3.5rem;  --otms-mark-radius: 0.85rem; }

/* ============================================================
   PULSE SVGs (shared)
   Two stacked SVGs:
     .otms-pulse__rest  — the static logo trace (default visible)
     .otms-pulse__live  — the JS-driven EKG monitor (hidden until live)
   plus a .otms-pulse__dot leading point for the live trace.
   ============================================================ */
.otms-pulse__rest,
.otms-pulse__live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    transition: opacity 0.25s ease;
}
.otms-pulse__live { opacity: 0; }

.otms-pulse__base {
    fill: none;
    stroke: var(--otms-base);
    stroke-width: 2;
    opacity: var(--otms-base-opacity);
    vector-effect: non-scaling-stroke;
}
.otms-pulse__trace {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--otms-stroke, 3.4);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.otms-pulse__dot {
    position: absolute;
    right: 0;
    top: 62%;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--otms-accent);
    opacity: 0;
    transform: translate(50%, -50%);
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* ---- Draw-in animation (pure CSS, pathLength="1") ----------
   Applied to the resting trace. Works even before JS loads, so
   the loader animates on first paint. Honours reduced-motion. */
@keyframes otms-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
.otms-animate-draw .otms-pulse__rest .otms-pulse__trace {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: otms-draw var(--otms-draw-dur, 1.5s) cubic-bezier(0.45, 0, 0.25, 1) forwards;
    animation-delay: var(--otms-draw-delay, 0.15s);
}

/* hover draw-in for nav/mark: line retracts then redraws on hover */
.otms-hover-draw .otms-pulse__trace {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.45, 0, 0.25, 1);
}
.otms-hover-draw:hover .otms-pulse__trace,
.group:hover .otms-hover-draw .otms-pulse__trace {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .otms-animate-draw .otms-pulse__rest .otms-pulse__trace,
    .otms-hover-draw .otms-pulse__trace {
        animation: none;
        transition: none;
        stroke-dashoffset: 0;
    }
}

/* ============================================================
   LIVE EKG read-out (BPM + diagnosis) — used in showcase spots
   ============================================================ */
.otms-readout {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.otms-readout__row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.otms-readout__heart {
    font-size: 1.1em;
    color: var(--otms-accent);
    display: inline-block;
    transform-origin: center;
}
.otms-readout__bpm {
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: currentColor;
}
.otms-readout__dx {
    font-size: 0.68em;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--otms-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
    min-height: 1em;
}

/* ============================================================
   LOADER (index.html) — full-brand moment
   ============================================================ */
#app-loader.otms-loader {
    background: #15140F;
    color: #F4F1EA;
}
html.theme-claude #app-loader.otms-loader { background: #1c1814; }
/* brighter accent reads better on the ink loader surface */
.otms-loader .otms-lockup { --otms-accent: #E0584A; }
.otms-loader .otms-loader__hint {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.45);
}
.otms-loader .otms-loader__bar-track {
    background: rgba(244, 241, 234, 0.14);
}
.otms-loader .otms-loader__bar {
    background: linear-gradient(90deg, var(--otms-accent), #E0584A);
}