/* LUFS brand — TIME clock (Year/Day). Flat dark-editorial / Swiss-modernist,
   matched to the clock-source "Timecode Terminal" view: flat #111 ground (no
   ambient depth), hairline chrome, single-accent teal, no glows/shimmer.
   The ROYGBIV rings are the data-encoding layer (hue = time scale); teal
   governs all chrome. */
:root {
    --bg: #111111;
    --bg-alt: #161817;
    --cream: #fbf9e2;
    --muted: rgba(251, 249, 226, 0.62);
    --hair: rgba(251, 249, 226, 0.12);
    --teal: #78BEBA;
    --rust: #D35233;
    --gold: #E7B225;
    --blue: #2069af;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    background: var(--bg);   /* flat ground — no cosmic gradient, no star-field */
    color: var(--cream);
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* header — temporal code, top-center. Flat: no panel, no blur, no glow. */
.header {
    position: fixed;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 100;
}

.timezone {
    font-size: 10px;
    opacity: 0.7;
    margin-bottom: 9px;
    color: var(--teal);
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.temporal-code-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-icon {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}

.temporal-code {
    font-size: 13px;
    font-weight: 400;
    font-family: 'Space Mono', monospace;
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

/* conventional date/time — top-right. Flat hairline label, no box on desktop. */
.conventional-time {
    position: fixed;
    top: 26px;
    right: 28px;
    text-align: right;
    z-index: 100;
}

.date-display {
    font-size: 12px;
    font-weight: 400;
    color: var(--teal);
    font-family: 'Space Mono', monospace;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.time-display {
    font-size: 15px;
    font-weight: 400;
    color: var(--cream);
    font-family: 'Space Mono', monospace;
    letter-spacing: 1px;
}

.canvas-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* flat: the mandala carries itself — no glow halo / drop-shadow */
#timeCanvas {
    border-radius: 50%;
}

.ring-labels-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.ring-label {
     position: absolute;
     font-size: 10px;
     font-weight: 400;
     color: rgba(251, 249, 226, 0.5);
     text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
     font-family: 'Space Mono', monospace;
     letter-spacing: 0.8px;
     transform: translate(-50%, -50%);
     transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
     user-select: none;
     text-align: center;
     white-space: nowrap;
}

.ring-label.milliseconds { font-size: 7px; opacity: 0.6; }
.ring-label.seconds { font-size: 8px; opacity: 0.6; }
.ring-label.minutes { font-size: 9px; opacity: 0.5; }
.ring-label.hours {
    font-size: 10px;
    opacity: 0.5;
    font-weight: 500;
    color: rgba(251, 249, 226, 0.5);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
.ring-label.days { font-size: 10px; opacity: 0.5; }
.ring-label.dayOfWeek { font-size: 10px; opacity: 0.5; }
.ring-label.weeks { font-size: 11px; opacity: 0.4; }
.ring-label.months { font-size: 11px; opacity: 0.4; }
.ring-label.quarters { font-size: 12px; opacity: 0.4; }
.ring-label.halves { font-size: 12px; opacity: 0.3; }
.ring-label.year { font-size: 13px; opacity: 0.65; letter-spacing: 2px; color: rgba(251, 249, 226, 0.7); }

/* Day view adjustments - traditional clock layout (kept; flattened glows) */
.day-view .ring-label.milliseconds,
.day-view .ring-label.seconds {
    opacity: 0.5;
    font-weight: 500;
}

.day-view .ring-label.hours {
    font-size: 18px !important;
    opacity: 1.0 !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.95) !important;
}

.day-view .ring-label.minutes {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.95) !important;
}

.day-view .ring-label.days {
    opacity: 0.6;
    font-weight: 600;
}

.day-view .ring-label.dayOfWeek {
    opacity: 0.6;
    font-weight: 600;
}

.day-view .ring-label.weeks,
.day-view .ring-label.months,
.day-view .ring-label.quarters,
.day-view .ring-label.halves,
.day-view .ring-label.year {
    opacity: 0.1;
}

/* controls — flat segmented toggle, matched to the source-view buttons:
   transparent + teal outline; fill teal on hover/active. No shimmer, no lift,
   no glow. */
.controls {
    position: fixed;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    z-index: 100;
}

.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--teal);
    color: var(--teal);
    padding: 12px 26px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.control-btn:hover {
    background: var(--teal);
    color: var(--bg);
}

.control-btn.active {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--bg);
}

/* ============================================================
   Custom cursor (uniform), crop-mark frame, reduced-motion.
   ============================================================ */
.cur-dot,
.cur-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: 50%;
    mix-blend-mode: difference;
    will-change: transform;
}
.cur-dot {
    width: 6px;
    height: 6px;
    background: var(--cream);
}
.cur-ring {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(251, 249, 226, 0.7);
    transition: width 0.2s ease, height 0.2s ease;
}
.cur-ring.hot {
    width: 46px;
    height: 46px;
}
@media (hover: none), (pointer: coarse) {
    .cur-dot,
    .cur-ring { display: none; }
}

/* Teal crop-mark corners — four L-brackets framing the viewport. */
.frame {
    position: fixed;
    inset: 22px;
    pointer-events: none;
    z-index: 90;
    --c: rgba(120, 190, 186, 0.4);
    --len: 20px;
    --t: 1px;
    background:
        linear-gradient(var(--c), var(--c)) left top,
        linear-gradient(var(--c), var(--c)) left top,
        linear-gradient(var(--c), var(--c)) right top,
        linear-gradient(var(--c), var(--c)) right top,
        linear-gradient(var(--c), var(--c)) left bottom,
        linear-gradient(var(--c), var(--c)) left bottom,
        linear-gradient(var(--c), var(--c)) right bottom,
        linear-gradient(var(--c), var(--c)) right bottom;
    background-repeat: no-repeat;
    background-size:
        var(--len) var(--t), var(--t) var(--len),
        var(--len) var(--t), var(--t) var(--len),
        var(--len) var(--t), var(--t) var(--len),
        var(--len) var(--t), var(--t) var(--len);
}

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media (max-width: 768px) {
    .header { top: 22px; }
    .conventional-time { top: 22px; right: 22px; }
    .date-display { font-size: 11px; }
    .time-display { font-size: 14px; }
    .temporal-code { font-size: 12px; letter-spacing: 2px; }
    .header-icon { width: 15px; height: 15px; }
    .controls { bottom: 26px; gap: 10px; }
    .control-btn { padding: 11px 20px; font-size: 10px; }

    .ring-label { font-size: 8px; }
    .ring-label.milliseconds { font-size: 6px; }
    .ring-label.seconds { font-size: 7px; }
    .ring-label.minutes { font-size: 8px; }
    .ring-label.hours { font-size: 9px; }
    .ring-label.days { font-size: 9px; }
    .ring-label.weeks { font-size: 10px; }
    .ring-label.months { font-size: 10px; }
    .ring-label.quarters { font-size: 11px; }
    .ring-label.halves { font-size: 11px; }
    .ring-label.year { font-size: 12px; }
    .frame { inset: 16px; --len: 16px; }
}

/* ============================================================
   Responsive — phone. Move the date/time to a centered stack just below the
   temporal-code header (the corner position collides with the wide code, and
   pinning it above the wrapping 3-button controls overlapped them). The top
   has open space above the centered mandala, so it sits cleanly there.
   ============================================================ */
@media (max-width: 600px) {
    .conventional-time {
        top: 66px;
        bottom: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    .date-display { margin-bottom: 2px; }

    /* Day View on a narrow phone: the 3.5x zoom flings the outer-ring ghost
       labels (day-of-week, weeks, months, quarters, halves, year + the inner
       ms/sec) far past the clock, sprawling across the tall column. Hide them
       here so Day View is just the clean centered 12-hour clock (hours +
       minutes). The ring arcs are already canvas-clipped; this only drops the
       stray HTML labels. Year View is unaffected; desktop is unaffected. */
    .day-view .ring-label.milliseconds,
    .day-view .ring-label.seconds,
    .day-view .ring-label.days,
    .day-view .ring-label.dayOfWeek,
    .day-view .ring-label.weeks,
    .day-view .ring-label.months,
    .day-view .ring-label.quarters,
    .day-view .ring-label.halves,
    .day-view .ring-label.year {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .header { top: 16px; }
    .temporal-code { font-size: 11px; letter-spacing: 1.5px; }
    .header-icon { width: 13px; height: 13px; }
    .timezone { font-size: 9px; letter-spacing: 2.5px; }
    .date-display { font-size: 10px; }
    .time-display { font-size: 12px; }
    .control-btn { padding: 10px 16px; font-size: 10px; letter-spacing: 1.5px; }
    .controls { bottom: 20px; gap: 8px; }
    .conventional-time { top: 58px; }

    .ring-label { font-size: 7px; }
    .ring-label.milliseconds { font-size: 5px; }
    .ring-label.seconds { font-size: 6px; }
    .ring-label.minutes { font-size: 7px; }
    .ring-label.hours { font-size: 8px; }
    .ring-label.days { font-size: 8px; }
    .ring-label.weeks { font-size: 9px; }
    .ring-label.months { font-size: 9px; }
    .ring-label.quarters { font-size: 10px; }
    .ring-label.halves { font-size: 10px; }
    .ring-label.year { font-size: 11px; }
    .frame { inset: 12px; --len: 13px; }
}

/* Motion safety — the clock keeps ticking; ambient transitions settle. */
@media (prefers-reduced-motion: reduce) {
    .control-btn,
    .ring-label,
    .ring-labels-overlay,
    .cur-ring { transition: none; }
}