/* =====================================================================
   0. RESPONSIVE UTILITY GAP-FILL
   The precompiled /css/tailwind.css was built WITHOUT these utilities, so the
   desktop workspace layout never activated (the big clock column stayed
   hidden and the small mobile clock showed at every width). They are defined
   here, only for the homepage, with the same semantics as Tailwind.
   ===================================================================== */
@media (min-width: 768px) {
    .md\:hidden { display: none !important; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:w-auto { width: auto; }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:col-span-8 { grid-column: span 8 / span 8; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
}
@media (min-width: 1024px) {
    .lg\:col-span-9 { grid-column: span 9 / span 9; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* World Tree Prototype & Luxury Analog Clock Styles */

/* -----------------------
   Chrono Widget Redesign
----------------------- */
.chrono-widget {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    /* Removed background, border, padding and shadow to let it float as Core */
}

.chrono-clock {
    /* Fluid size: grows/shrinks with the viewport; all text inside is in em
       so it scales with the dial instead of staying a fixed size. */
    --clock-size: clamp(120px, 11vw, 170px);
    position: relative;
    width: var(--clock-size);
    height: var(--clock-size);
    font-size: calc(var(--clock-size) * 0.123);
    flex-shrink: 0;
}
.chrono-clock--sm {
    --clock-size: clamp(72px, 22vw, 96px);
    margin-left: auto;
}

.chrono-arc {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.chrono-ring-outer {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 0.5;
}

.chrono-ring-inner {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 0.25;
}

.chrono-ring-progress {
    fill: none;
    stroke: var(--color-primary, #34D399);
    stroke-width: 1;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);
    filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.5));
}

.chrono-digital {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.chrono-label {
    font-family: var(--font-mono, monospace);
    font-size: max(0.55rem, 0.45em);
    color: var(--color-primary, #34D399);
    letter-spacing: 0.1em;
}

.chrono-time {
    font-family: var(--font-mono, monospace);
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-primary, #34D399);
    letter-spacing: 0.08em;
    /* Clean outline shadow ensures the text pops even when the seconds hand passes behind it */
    text-shadow: 0px 0px 4px var(--color-surface, #050a08), 
                 -1px -1px 0 var(--color-surface, #050a08), 
                 1px -1px 0 var(--color-surface, #050a08), 
                 -1px 1px 0 var(--color-surface, #050a08), 
                 1px 1px 0 var(--color-surface, #050a08);
}

.chrono-tz {
    font-family: var(--font-mono, monospace);
    font-size: max(0.5rem, 0.4em);
    color: rgba(52, 211, 153, 0.7);
    letter-spacing: 0.15em;
}

/* Tick Marks */
.chrono-tick-major {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
}
.chrono-tick-minor {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 0.5;
}

.chrono-hands {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.chrono-sec-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 1.5px;
    height: 40%;
    margin-left: -0.75px;
    background: var(--color-primary, #34D399); /* Emerald hand */
    transform-origin: bottom center;
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
    transition: transform 0.1s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}

.chrono-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--color-primary, #34D399);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Stats */
.chrono-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.chrono-stats .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.05em;
}

.chrono-stats .stat-label {
    color: var(--color-text-muted, #9CA3AF);
}

.chrono-stats .stat-val {
    color: var(--color-primary, #34D399);
    display: flex;
    align-items: center;
    gap: 4px;
}

.quorum-dot {
    width: 5px;
    height: 5px;
    background: var(--color-primary, #34D399);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.5);
}

.chrono-status-btn {
    margin-top: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    color: var(--color-primary, #34D399);
    background: #0A1612;
    border: 1px solid rgba(52, 211, 153, 0.1);
    padding: 6px;
    border-radius: 4px;
    text-align: center;
    letter-spacing: 0.05em;
    cursor: default;
    transition: all 0.2s ease;
}

.chrono-status-btn:hover {
    background: #0D1D18;
}

/* Light theme overrides for a Premium, Professional Gauge look */
html[data-theme="light"] .chrono-widget {
    background: transparent;
    border: none;
    box-shadow: none;
}
html[data-theme="light"] .chrono-clock {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), 
                0 4px 16px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .chrono-ring-outer { stroke: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .chrono-ring-inner { stroke: rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .chrono-ring-progress { stroke: var(--color-primary, #059669); filter: none; }
html[data-theme="light"] .chrono-label,
html[data-theme="light"] .chrono-tz { color: #6B7280; font-weight: 500; }
html[data-theme="light"] .chrono-time { 
    color: #111827; /* Deep slate for high-end contrast */
    font-weight: 600;
    text-shadow: none; /* No shadow needed, text sits clearly above the hand */
}
html[data-theme="light"] .chrono-sec-hand,
html[data-theme="light"] .chrono-center { background: var(--color-primary, #059669); box-shadow: none; }
html[data-theme="light"] .chrono-tick-major { stroke: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .chrono-tick-minor { stroke: rgba(0, 0, 0, 0.05); }