/*
=============================================================================
INTERACTIVE CLOCK — PRESENTATION / LAYOUT
=============================================================================
This file preserves the original heavily commented clock styling while v50
adds a small integration layer at the end for the shared EricLeeHarris.com
header, footer, and Living Circuit background.
=============================================================================
*/

/*
=========================================================
  CSS VARIABLES
  ---------------------------------------------------------
  CSS custom properties are reusable design values.

  Example:

      --accent:#b87333;

  Elsewhere, that value is reused with:

      color:var(--accent);
=========================================================
*/

:root {
    --page-bg: #0f172a;
    --glass-light: rgba(255,255,255,.13);
    --glass-mid: rgba(255,255,255,.075);
    --glass-dark: rgba(2,6,23,.13);
    --glass-border: rgba(255,255,255,.17);
    --menu-bg: rgba(15,23,42,.90);
    --menu-border: rgba(255,255,255,.12);
    --menu-hover: rgba(255,255,255,.075);
    --accent: #b87333;
    --accent-bright: #d08a45;
    --accent-glow: rgba(184,115,51,.42);
    --text: #f8fafc;
    --muted: #cbd5e1;
    --graphite: #d1d5db;
    --clock-scale: 1;
    --night-dim: 1;
}

/*
=========================================================
  GLOBAL RESET
=========================================================
*/

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

/*
=========================================================
  PAGE
=========================================================
*/

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text);
    background: radial-gradient(circle at 50% 38%, rgba(55,65,120,.27), transparent 43%),
        linear-gradient(180deg, rgba(3,7,18,.18), rgba(3,7,18,.42)),
        var(--page-bg);
    font-family: Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    transition: background .35s ease,
        color .35s ease;
    /*
    Automatic dimming changes --night-dim.
           filter applies that dimming to the entire interface.
    */

    filter: brightness(var(--night-dim));
}

body.light-mode {
    --page-bg: #e5e7eb;
    --menu-bg: rgba(248,250,252,.92);
    --menu-border: rgba(15,23,42,.13);
    --menu-hover: rgba(15,23,42,.07);
    --text: #111827;
    --muted: #475569;
    --graphite: #4b5563;
    background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.96), transparent 47%),
        linear-gradient(180deg, rgba(255,255,255,.15), rgba(148,163,184,.20)),
        var(--page-bg);
}

/*
=========================================================
  TRANSPARENT CLOCK STAGE
  ---------------------------------------------------------
  This element does not draw a visible square.
  It only gives the clock and menus a positioning area.
=========================================================
*/

.clock-stage {
    position: relative;
    width: 390px;
    height: 390px;
    /* JavaScript changes --clock-scale for the Resize menu. */

    transform: scale(var(--clock-scale));
    transform-origin: center;
    transition: transform .28s ease;
}

/*
=========================================================
  CLOCK FACE
=========================================================
*/

.clock {
    position: absolute;
    width: 292px;
    height: 292px;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    /*
    Multiple gradients simulate real layered glass:

           - top-left highlight
           - center translucency
           - darker lower edge
    */

    --pointer-light-x: 32%;
    --pointer-light-y: 18%;
    --pointer-light-opacity: .22;
    background: radial-gradient(
            circle at var(--pointer-light-x) var(--pointer-light-y),
            rgba(255,255,255,var(--pointer-light-opacity)),
            rgba(255,255,255,.055) 18%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 32% 18%,
            rgba(255,255,255,.18),
            rgba(255,255,255,.05) 33%,
            transparent 54%
        ),
        linear-gradient(
            160deg,
            var(--glass-light),
            var(--glass-mid) 48%,
            var(--glass-dark)
        );
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 60px rgba(0,0,0,.35),
        0 0 36px color-mix(in srgb, var(--accent) 15%, transparent),
        inset 1px 1px 1px rgba(255,255,255,.16),
        inset -1px -1px 1px rgba(2,6,23,.17),
        inset 0 -28px 48px rgba(2,6,23,.07);
    transition: transform .22s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/*
A faint curved glass reflection.
   pointer-events:none prevents it from blocking clicks.
*/

.clock::before {
    content: "";
    position: absolute;
    left: 20%;
    top: 8%;
    width: 58%;
    height: 29%;
    border-radius: 50%;
    background: linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,0)
        );
    transform: rotate(-8deg);
    filter: blur(.2px);
    opacity: .55;
    pointer-events: none;
}

/*
A subtle grain layer prevents the glass from appearing
   unnaturally flat or digitally perfect.
*/

.clock::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: repeating-radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.016) 0 1px,
            transparent 1px 3px
        );
    opacity: .22;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.clock-shell:hover .clock {
    transform: translateY(-2px);
}

/*
=========================================================
  HAMBURGER MENU BUTTON
  ---------------------------------------------------------
  Hidden until hover, focus, or an open menu requires it.
=========================================================
*/

.menu-btn {
    position: absolute;
    top: 34px;
    left: 34px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: rgba(15,23,42,.34);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    cursor: pointer;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(.96);
    transition: opacity .17s ease,
        transform .17s ease,
        background .17s ease,
        border-color .17s ease;
}

.clock-shell:hover ~ .menu-btn,
.clock-stage:focus-within .menu-btn,
.menu-btn.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.menu-btn:hover {
    background: color-mix(in srgb, var(--accent) 18%, rgba(15,23,42,.36));
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.menu-btn span {
    position: absolute;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease,
        opacity .2s ease;
}

.menu-btn span:nth-child(1) {
    transform: translateY(-6px);
}

.menu-btn span:nth-child(3) {
    transform: translateY(6px);
}

.menu-btn.open span:nth-child(1) {
    transform: rotate(45deg);
}

.menu-btn.open span:nth-child(2) {
    opacity: 0;
}

.menu-btn.open span:nth-child(3) {
    transform: rotate(-45deg);
}

/*
=========================================================
  SHARED MENU SURFACE
=========================================================
*/

.menu-surface {
    position: absolute;
    width: 272px;
    padding: 8px;
    color: var(--text);
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 17px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 22px 52px rgba(0,0,0,.40),
        0 0 28px color-mix(in srgb, var(--accent) 8%, transparent);
    user-select: none;
    z-index: 450;
}

.side-menu {
    top: 86px;
    left: 34px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.975);
    transform-origin: top left;
    transition: opacity .17s ease,
        visibility .17s ease,
        transform .17s ease;
}

.side-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.context-menu {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(.975);
    transform-origin: top left;
    transition: opacity .13s ease,
        visibility .13s ease,
        transform .13s ease;
}

.context-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.menu-title {
    /*
    The title and menu rows use slightly tighter spacing
           so the complete settings panel fits on shorter screens.
    */

    padding: 8px 10px 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.menu-separator {
    height: 1px;
    margin: 4px 4px;
    background: var(--menu-border);
}

.menu-item {
    position: relative;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .15s ease,
        opacity .15s ease;
}

.menu-item:hover,
.menu-item.submenu-open {
    background: var(--menu-hover);
}

.menu-item.disabled {
    opacity: .42;
    cursor: not-allowed;
}

.menu-item.disabled:hover {
    background: transparent;
}

.menu-icon {
    width: 19px;
    flex: 0 0 19px;
    text-align: center;
    color: var(--accent-bright);
    font-size: 14px;
}

.menu-label {
    flex: 1;
    font-size: 13px;
    line-height: 1.18;
}

.menu-meta {
    color: var(--muted);
    font-size: 12px;
}

.check {
    width: 16px;
    color: var(--accent-bright);
    font-weight: 800;
    opacity: 0;
    transform: scale(.72);
    transition: opacity .15s ease,
        transform .15s ease;
}

.check.active {
    opacity: 1;
    transform: scale(1);
}

/*
=========================================================
  TOGGLE SWITCH
  ---------------------------------------------------------
  Used for on/off choices such as Dark Mode.
=========================================================
*/

.toggle {
    position: relative;
    width: 34px;
    height: 19px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: rgba(148,163,184,.34);
    transition: background .18s ease;
}

.toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.28);
    transition: transform .18s ease;
}

.toggle.active {
    background: var(--accent);
}

.toggle.active::after {
    transform: translateX(15px);
}

/*
=========================================================
  SUBMENUS
=========================================================
*/

.submenu {
    position: absolute;
    top: -8px;
    left: calc(100% + 8px);
    width: 176px;
    padding: 8px;
    border-radius: 14px;
    color: var(--text);
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 20px 44px rgba(0,0,0,.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-5px) scale(.98);
    transform-origin: top left;
    transition: opacity .15s ease,
        visibility .15s ease,
        transform .15s ease;
}

.menu-item.submenu-open > .submenu,
.menu-item:hover > .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.submenu .menu-item {
    min-height: 31px;
    padding: 5px 7px;
}

/*
Resize is the final item in the main panel.

   Opening its submenu upward prevents the lower choices
   from falling below the bottom edge of the screen.
*/

.menu-item[data-action="resize-menu"] > .submenu {
    top: auto;
    bottom: -8px;
}

@media (max-width:760px) {
    .submenu {
        left: auto;
        right: calc(100% + 8px);
        transform-origin: top right;
    }

}

/*
=========================================================
  TICK MARKS
=========================================================
*/

.tick {
    position: absolute;
    width: 2px;
    height: 9px;
    /*
    Every tick now begins at the exact center of the clock.

           JavaScript rotates it and translates it outward along one
           shared radius. This avoids the tiny top-of-circle rounding
           mismatch that was visible near 11 and 12.
    */

    left: 50%;
    top: 50%;
    --tick-radius: 130.5px;
    background: rgba(255,255,255,.52);
    transform-origin: center;
    pointer-events: none;
}

body.light-mode .tick {
    background: rgba(15,23,42,.40);
}

/*
Major marks are controlled through classes:

   .quarter
       Copper marks at 12, 3, 6, and 9.

   .all-accent
       Makes every major mark copper.
*/

.tick.major {
    width: 3px;
    height: 16px;
    /*
    A slightly smaller center radius moves the longer major
           marks inward while keeping every major mark concentric.
    */

    --tick-radius: 125px;
    background: rgba(226,232,240,.62);
}

body.light-mode .tick.major {
    background: rgba(51,65,85,.52);
}

.tick.major.quarter,
.clock.all-accent .tick.major {
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 26%, transparent);
}

/*
=========================================================
  CLOCK NUMBERS
=========================================================
*/

.number {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 21px;
    font-weight: 540;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(0,0,0,.30);
    /*
    The first rotate chooses a clock position.
           translateY moves the number toward the rim.
           The final reverse rotation keeps the text upright.
    */

    transform: translate(-50%, -50%)
        rotate(var(--angle))
        translateY(-109px)
        rotate(calc(var(--angle) * -1));
    z-index: 12;
}

/*
=========================================================
  DIGITAL DISPLAY
=========================================================
*/

.digital-stack {
    position: absolute;
    left: 50%;
    bottom: 45px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 20;
}

.digital-display {
    min-width: 112px;
    padding: 7px 13px;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    background: linear-gradient(
            180deg,
            rgba(2,6,23,.37),
            rgba(2,6,23,.20)
        );
    color: var(--accent-bright);
    text-align: center;
    font-family: "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1.5px;
    box-shadow: inset 0 2px 7px rgba(0,0,0,.30),
        0 0 10px color-mix(in srgb, var(--accent) 12%, transparent);
    transition: min-width .18s ease,
        padding .18s ease,
        font-size .18s ease,
        opacity .18s ease;
}

.digital-display.small {
    min-width: 82px;
    padding: 5px 8px;
    border-radius: 9px;
    font-size: 13px;
    letter-spacing: .8px;
}

.digital-hours {
    opacity: 1;
}

.digital-seconds {
    opacity: .55;
}

.date-line {
    color: color-mix(in srgb, var(--text) 68%, transparent);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-shadow: 0 1px 5px rgba(0,0,0,.22);
    transition: opacity .18s ease,
        transform .18s ease;
}

.date-line.hidden {
    display: none;
}

/*
=========================================================
  CLOCK HANDS
  ---------------------------------------------------------
  clip-path creates a gentle taper toward each hand tip.
=========================================================
*/

.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    border-radius: 999px 999px 3px 3px;
}

.hour {
    width: 8px;
    height: 67px;
    margin-left: -4px;
    background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--text) 78%, transparent),
            var(--text),
            color-mix(in srgb, var(--text) 78%, transparent)
        );
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.22));
    z-index: 8;
}

.minute {
    width: 6px;
    height: 96px;
    margin-left: -3px;
    background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--graphite) 76%, transparent),
            var(--graphite),
            color-mix(in srgb, var(--graphite) 76%, transparent)
        );
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.20));
    z-index: 7;
}

.second {
    width: 2px;
    height: 111px;
    margin-left: -1px;
    background: var(--accent);
    box-shadow: 0 0 13px var(--accent-glow);
    z-index: 6;
}

/*
The second hand receives a small counterweight behind
   the center pivot to imitate a physical clock movement.
*/

.second::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -24px;
    width: 6px;
    height: 30px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--accent);
}

/*
=========================================================
  LAYERED CENTER CAP
=========================================================
*/

.center-cap {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.42),
            transparent 24%
        ),
        var(--accent);
    border: 3px solid rgba(2,6,23,.48);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 48%, transparent),
        0 0 12px var(--accent-glow);
    z-index: 18;
}

/*
=========================================================
  REDUCED MOTION
  ---------------------------------------------------------
  This class is controlled by the Reduced Motion setting.

  It removes:
  - menu fade and scale animations
  - checkmark and toggle movement
  - the clock's small hover lift

  JavaScript also changes a smooth sweeping second hand into
  a one-second tick while Reduced Motion is enabled.
=========================================================
*/

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    transition: none !important;
    animation: none !important;
}

body.reduced-motion .clock-shell:hover .clock {
    transform: none;
}

/* A 24-hour dial uses twice as many two-character labels. */

.number.military-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}

/* =========================================================
   VERSION 3 LAYOUT AND ACCESSIBILITY OVERRIDES
   ---------------------------------------------------------
   These rules intentionally come after the original styles.

   In CSS, later rules with equal or greater specificity win.
   This lets Version 3 preserve the polished design while
   safely changing positioning and interaction behavior.
========================================================= */

/* The stage is now a movable, invisible positioning layer. */
.clock-stage{
    position:fixed;
    left:50%;
    top:50%;

    width:390px;
    height:390px;

    transform:translate(-50%, -50%);
    transform-origin:center;

    transition:none;

    z-index:20;
}

/*
    Only the physical clock scales.

    The menu remains readable at 100% interface size even when
    the clock itself is reduced to 25%.
*/
.clock-shell{
    position:absolute;
    left:50%;
    top:50%;

    width:292px;
    height:292px;

    transform:
        translate(-50%, -50%)
        scale(var(--clock-scale));

    transform-origin:center;

    transition:transform .24s ease;
}

.clock{
    inset:0;
    margin:0;

    cursor:grab;

    touch-action:none;
}

.clock.dragging{
    cursor:grabbing;
}

/*
    JavaScript positions the hamburger beside the currently
    scaled clock. It is not itself scaled.
*/
.menu-btn{
    top:57px;
    left:57px;
}

/*
    The hamburger panel uses fixed positioning so it is not
    transformed or clipped by clock resizing.
*/
.side-menu{
    position:fixed;
    top:86px;
    left:34px;
}

/*
    Visibility must become active immediately when a menu opens
    so JavaScript is allowed to move keyboard focus into it.

    Opacity and transform still animate. Visibility is delayed
    only when closing, after the fade has completed.
*/
.side-menu,
.context-menu{
    transition:
        opacity .17s ease,
        transform .17s ease,
        visibility 0s linear .17s;
}

.side-menu.open,
.context-menu.open{
    transition:
        opacity .17s ease,
        transform .17s ease,
        visibility 0s;
}

/*
    Apply the same immediate-open rule to nested submenus.

    Without this, Right Arrow could open a submenu visually while
    the browser still considered it hidden for keyboard focus.
*/
.submenu{
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility 0s linear .15s;
}

.menu-item.submenu-open > .submenu,
.menu-item:hover > .submenu{
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility 0s;
}

/* Make keyboard focus unmistakable without changing the theme. */
.menu-item:focus-visible,
.menu-btn:focus-visible{
    outline:
        2px solid
        color-mix(in srgb, var(--accent-bright) 78%, white);
    outline-offset:2px;
}

/* A disabled submenu cannot accidentally open from hover. */
.menu-item.disabled > .submenu{
    display:none;
}

/* Clock-number size is controlled by JavaScript variables. */
.number{
    width:var(--number-box-size, 34px);
    height:var(--number-box-size, 34px);

    font-size:var(--number-font-size, 21px);
}

/*
    Move the digital time and date closer to the clock center.

    This creates more clearance from the lower numerals,
    especially when Large number text is selected.
*/
.digital-stack{
    bottom:64px;
    gap:4px;
}

/*
    Treat hours, minutes, seconds, and AM/PM as one centered row.

    gap:0 removes the visual offset previously seen before the
    seconds section.
*/
.digital-display{
    display:inline-flex;
    align-items:baseline;
    justify-content:center;
    gap:0;

    white-space:nowrap;
}

.digital-hours,
.digital-seconds,
.digital-meridiem{
    display:inline-block;
    margin:0;
    padding:0;
}

.digital-meridiem{
    margin-left:4px;
    font-size:.66em;
    letter-spacing:.05em;
    opacity:.72;
}

/* The date now has a quiet matching recessed-glass pill. */
.date-line{
    min-width:88px;

    padding:4px 8px;

    border:
        1px solid
        color-mix(in srgb, var(--accent) 13%, transparent);

    border-radius:8px;

    background:
        linear-gradient(
            180deg,
            rgba(2,6,23,.25),
            rgba(2,6,23,.13)
        );

    box-shadow:
        inset 0 1px 4px rgba(0,0,0,.20);

    text-align:center;
    letter-spacing:.11em;
}

/* Smaller menu rows provide room for the additional options. */
.menu-item{
    min-height:32px;
    padding:5px 8px;
}

.submenu .menu-item{
    min-height:29px;
    padding:4px 7px;
}

.menu-separator{
    margin:3px 4px;
}

/*
    The long Time Zone submenu opens upward from the lower half
    of the settings menu, keeping it inside the viewport.
*/
.menu-item[data-action="time-zone-menu"] > .submenu,
.menu-item[data-action="resize-menu"] > .submenu{
    top:auto;
    bottom:-8px;
}

/*
    Reduced Motion also removes the clock-shell resize animation.
*/
body.reduced-motion .clock-shell{
    transition:none;
}

/* =========================================================
   SYSTEM-STYLE MENU APPEARANCE
   ---------------------------------------------------------
   This is still our own clock menu.

   The class only changes its visual treatment to resemble a
   compact operating-system context menu.
========================================================= */

body.system-menu-style .menu-surface,
body.system-menu-style .submenu{
    color:#111827;
    background:rgba(248,248,248,.98);
    border:1px solid rgba(0,0,0,.18);
    border-radius:7px;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:
        0 10px 28px rgba(0,0,0,.28),
        0 1px 2px rgba(0,0,0,.12);
}

body.system-menu-style .menu-title{
    color:#6b7280;
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:none;
}

body.system-menu-style .menu-item{
    min-height:28px;
    padding:4px 7px;
    border-radius:4px;
    gap:7px;
}

body.system-menu-style .menu-item:hover,
body.system-menu-style .menu-item.submenu-open,
body.system-menu-style .menu-item:focus-visible{
    background:#e5e7eb;
}

body.system-menu-style .menu-item.disabled{
    opacity:.42;
}

body.system-menu-style .menu-item.disabled:hover{
    background:transparent;
}

body.system-menu-style .menu-separator{
    background:rgba(0,0,0,.14);
}

body.system-menu-style .menu-label{
    font-size:13px;
}

body.system-menu-style .menu-icon,
body.system-menu-style .check{
    color:#111827;
}

body.system-menu-style .menu-meta{
    color:#6b7280;
}

body.system-menu-style .toggle{
    background:#c7c7cc;
}

body.system-menu-style .toggle.active{
    background:#2563eb;
}

body.system-menu-style .menu-item:focus-visible{
    outline:1px solid #2563eb;
    outline-offset:-1px;
}

/* VERSION 5 PASS 02 — ALARM EDITOR */
.alarm-modal{
    position:fixed;
    inset:0;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(2,6,23,.66);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}
.alarm-modal[hidden]{display:none}
.alarm-dialog{
    width:min(820px,96vw);
    max-height:88vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:var(--text);
    background:linear-gradient(145deg,rgba(30,41,59,.96),rgba(15,23,42,.98));
    border:1px solid var(--menu-border);
    border-radius:20px;
    box-shadow:0 30px 90px rgba(0,0,0,.58);
}
.alarm-dialog-header,.alarm-toolbar,.alarm-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 18px;
    border-bottom:1px solid var(--menu-border);
}
.alarm-dialog-header{align-items:flex-start}
.alarm-dialog-header h2{margin:0 0 4px;font-size:21px}
.alarm-dialog-header p{margin:0;color:var(--muted);font-size:13px}
.alarm-close{
    width:36px;height:36px;border-radius:10px;
    color:var(--text);background:rgba(255,255,255,.05);
    border:1px solid var(--menu-border);font-size:24px;cursor:pointer;
}
.alarm-toolbar>div{display:flex;flex-direction:column;gap:2px}
.alarm-toolbar small,.alarm-footer{color:var(--muted);font-size:12px}
.alarm-footer{border-top:1px solid var(--menu-border);border-bottom:0}
.alarm-button{
    min-height:36px;padding:7px 14px;border-radius:9px;
    color:var(--text);background:rgba(255,255,255,.055);
    border:1px solid var(--menu-border);font:inherit;cursor:pointer;
}
.alarm-button.primary{color:white;background:var(--accent);border-color:var(--accent-bright)}
.alarm-button.danger{color:#fecaca;border-color:rgba(248,113,113,.35)}
.alarm-button:disabled{opacity:.38;cursor:not-allowed}
.alarm-warning{
    margin:14px 18px 0;padding:11px 13px;display:flex;flex-direction:column;gap:4px;
    color:#fecaca;background:rgba(127,29,29,.30);
    border:1px solid rgba(248,113,113,.40);border-radius:11px;font-size:13px;
}
.alarm-warning[hidden]{display:none}
.alarm-list{
    padding:14px 18px 20px;display:flex;flex-direction:column;gap:10px;overflow:auto;
}
.alarm-empty{
    padding:34px 16px;text-align:center;color:var(--muted);
    border:1px dashed var(--menu-border);border-radius:12px;
}
.alarm-row{
    /*
        The time column is intentionally wider than before.

        Some browsers draw AM/PM inside the native time control,
        and 118px allowed the final letter to be clipped.
    */
    display:grid;grid-template-columns:minmax(150px,1fr) 148px auto auto;
    align-items:center;gap:10px;padding:11px;
    background:rgba(255,255,255,.045);
    border:1px solid var(--menu-border);border-radius:12px;
}
.alarm-row.invalid{border-color:rgba(248,113,113,.45)}
.alarm-row input[type="text"],.alarm-row input[type="time"]{
    width:100%;
    min-width:0;
    min-height:36px;
    padding:6px 9px;
    color:var(--text);background:rgba(2,6,23,.28);
    border:1px solid var(--menu-border);border-radius:8px;font:inherit;
}
.alarm-enabled{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.alarm-days{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.alarm-days>span{color:var(--muted);font-size:12px}
.alarm-day{
    min-width:38px;height:30px;color:var(--muted);background:transparent;
    border:1px solid var(--menu-border);border-radius:8px;font-size:12px;cursor:pointer;
}
.alarm-day.active{color:white;background:var(--accent);border-color:var(--accent-bright)}
.alarm-error{grid-column:1/-1;color:#fecaca;font-size:12px}
body.system-menu-style .alarm-dialog{color:#111827;background:rgba(248,248,248,.99)}
body.system-menu-style .alarm-row{background:white;border-color:rgba(0,0,0,.14)}
body.system-menu-style .alarm-row input{color:#111827;background:white;border-color:rgba(0,0,0,.2)}
@media(max-width:700px){.alarm-row{grid-template-columns:1fr 148px}}
@media(max-width:480px){.alarm-row{grid-template-columns:1fr}.alarm-toolbar,.alarm-footer{align-items:stretch;flex-direction:column}}


/* =========================================================
   ALARMS SUBMENU — VERSION 5 PASS 03
========================================================= */

/*
    Alarm pages open upward.

    This keeps alarms 1–10, 11–20, and 21–30 from running below
    the viewport when the Alarms row sits low in the main menu.
*/
.menu-item[data-action="alarms-menu"] > .alarm-submenu,
.alarm-more-parent > .alarm-submenu{
    top:auto;
    bottom:-8px;

    width:244px;

    transform-origin:bottom left;
}

.alarm-menu-name{
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.alarm-menu-time{
    flex:0 0 auto;

    color:var(--muted);

    font-size:11px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.alarm-menu-empty{
    cursor:default;
}

.alarm-menu-empty:hover{
    background:transparent;
}

.alarm-more-parent > .menu-label{
    font-weight:650;
}

@media (max-width:760px){
    .menu-item[data-action="alarms-menu"] > .alarm-submenu,
    .alarm-more-parent > .alarm-submenu{
        transform-origin:bottom right;
    }
}


/* =========================================================
   ALARM ENGINE VISUAL — VERSION 5 PASS 04
========================================================= */

.alarm-ring-modal{
    position:fixed;
    inset:0;

    z-index:4000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px;

    background:rgba(2,6,23,.72);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.alarm-ring-modal[hidden]{
    display:none;
}

.alarm-ring-dialog{
    width:min(390px, 94vw);

    padding:28px 24px;

    color:var(--text);
    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(30,41,59,.97),
            rgba(15,23,42,.99)
        );

    border:1px solid var(--menu-border);
    border-radius:22px;

    box-shadow:
        0 32px 95px rgba(0,0,0,.64),
        0 0 38px color-mix(in srgb, var(--accent) 18%, transparent);
}

.alarm-ring-icon{
    font-size:46px;

    animation:
        alarm-ring-pulse 900ms ease-in-out infinite alternate;
}

.alarm-ring-dialog h2{
    margin:9px 0 5px;

    font-size:24px;
}

.alarm-ring-dialog p{
    margin:0 0 20px;

    color:var(--muted);

    font-size:16px;
    font-variant-numeric:tabular-nums;
}

@keyframes alarm-ring-pulse{
    from{
        transform:rotate(-5deg) scale(.96);
    }

    to{
        transform:rotate(5deg) scale(1.06);
    }
}

body.reduce-motion .alarm-ring-icon{
    animation:none;
}

body.system-menu-style .alarm-ring-dialog{
    color:#111827;
    background:rgba(248,248,248,.99);
}


/* =========================================================
   MOBILE / TOUCH HAMBURGER FIX
   ---------------------------------------------------------
   Phones and tablets do not have a dependable hover state.

   The original hamburger was hidden with:
       opacity: 0;
       pointer-events: none;

   and became clickable only through :hover or :focus-within.
   On iPhone, the first tap could merely simulate hover instead
   of delivering a real click.

   On touch-first devices, keep the button visibly subtle but
   always available to taps.
========================================================= */
@media (hover:none), (pointer:coarse){
    .menu-btn{
        opacity:.72;
        pointer-events:auto;
        transform:translateY(0) scale(1);
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    .menu-btn:active{
        opacity:1;
        transform:scale(.96);
    }
}


/* =========================================================
   MOBILE SUBMENU ACCORDION FIX
   ---------------------------------------------------------
   Desktop submenus open beside the main menu.

   On a narrow phone screen, there is not enough horizontal room
   for a second panel. The old mobile rule moved submenus to the
   left, which placed them partly outside the viewport. That is
   why part of the local time-zone label could be seen while the
   submenu appeared not to open.

   Touch/narrow layouts now display submenus as expandable rows
   inside the main menu. Desktop keeps the original fly-out style.
========================================================= */
@media (max-width:760px), (hover:none), (pointer:coarse){
    .side-menu{
        max-height:calc(100dvh - 20px);
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    /*
        A row containing a submenu must be allowed to wrap so the
        submenu can occupy a complete line beneath its parent.
    */
    .menu-item:has(> .submenu){
        flex-wrap:wrap;
    }

    .submenu{
        position:static;

        width:100%;
        flex:0 0 100%;

        /*
            Remove desktop fly-out positioning and animation.
        */
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;

        margin:5px 0 1px;
        padding:0;

        max-height:0;
        overflow:hidden;

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transform:none;

        border-width:0;
        box-shadow:none;

        transition:
            max-height .18s ease,
            opacity .15s ease,
            padding .18s ease,
            border-width .18s ease,
            visibility 0s linear .18s;
    }

    .menu-item.submenu-open > .submenu{
        max-height:70dvh;
        overflow-y:auto;

        padding:7px;

        opacity:1;
        visibility:visible;
        pointer-events:auto;

        border-width:1px;

        transition:
            max-height .18s ease,
            opacity .15s ease,
            padding .18s ease,
            border-width .18s ease,
            visibility 0s;
    }

    /*
        Hover must not open nested panels on touch devices.
        Only the JavaScript-added .submenu-open class controls it.
    */
    .menu-item:hover > .submenu{
        max-height:0;
        padding:0;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        border-width:0;
    }

    .menu-item.submenu-open:hover > .submenu{
        max-height:70dvh;
        padding:7px;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        border-width:1px;
    }

    /*
        Long labels such as an IANA time-zone name must remain
        inside the panel instead of protruding past its edge.
    */
    .menu-label{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /*
        Alarm and Resize submenus previously had special upward
        desktop positioning. In accordion mode they use normal
        in-flow placement like every other submenu.
    */
    .menu-item[data-action="alarms-menu"] > .alarm-submenu,
    .alarm-more-parent > .alarm-submenu,
    .menu-item[data-action="time-zone-menu"] > .submenu,
    .menu-item[data-action="resize-menu"] > .submenu{
        top:auto;
        bottom:auto;
        width:100%;
        transform-origin:center;
    }
}

/*
=========================================================
  SEARCH / ACCESSIBILITY PAGE INTRO
  ---------------------------------------------------------
  The clock is intentionally a full-screen utility. This small, unobtrusive
  heading gives visitors and search crawlers a plain-language description
  without changing the clock controls or JavaScript behavior.
========================================================= */
.clock-page-info {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    width: min(760px, calc(100vw - 32px));
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    pointer-events: none;
}

.clock-page-info h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 650;
    letter-spacing: .01em;
}

.clock-page-info p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: clamp(10px, 1.05vw, 12px);
    line-height: 1.35;
}

@media (max-height: 620px) {
    .clock-page-info p {
        display: none;
    }
}

/*
=============================================================================
v50 — ERICLEEHARRIS.COM SHELL INTEGRATION
=============================================================================
The original clock was intentionally a full-viewport standalone utility. v50
keeps every clock control and visual setting, but the page itself now uses the
shared site header/footer and interactive Living Circuit background.
=============================================================================
*/

body.clock-page {
    min-height: 100vh;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    background: #050a12;
    filter: none;
}

/* Clock light mode changes the clock palette, not the website background. */
body.clock-page.light-mode {
    background: #050a12;
}

/* Automatic night dimming belongs to the utility itself, not site chrome. */
body.clock-page .clock-stage {
    filter: brightness(var(--night-dim));
}

.clock-site-main {
    position: relative;
    flex: 1 0 auto;
    width: 100%;
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 4rem);
}

.clock-page-info {
    position: static;
    width: min(calc(100% - 2rem), 1180px);
    transform: none;
    margin: 0 auto;
    text-align: left;
    pointer-events: auto;
    z-index: auto;
}

.clock-page-info .eyebrow {
    margin: 0 0 .4rem;
    color: #e0a16b;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.clock-page-info h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.02;
}

.clock-page-info p:not(.eyebrow) {
    max-width: 760px;
    margin: .65rem 0 0;
    color: var(--muted);
    font-size: clamp(.95rem, 1.5vw, 1.05rem);
    line-height: 1.55;
}

.clock-workspace {
    position: relative;
    width: min(calc(100% - 1rem), 1180px);
    min-height: 520px;
    margin: 1rem auto 0;
}

/* The stage is now centered inside the page workspace instead of the viewport. */
.clock-workspace .clock-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;
}

/* Shared site navigation should remain fully visible even when the clock dims. */
body.clock-page .site-header,
body.clock-page .site-footer {
    filter: none;
}

@media (max-width: 760px) {
    .clock-site-main {
        padding-top: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .clock-page-info {
        width: min(calc(100% - 1rem), 1180px);
    }

    .clock-page-info h1 {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    .clock-workspace {
        width: 100%;
        min-height: 455px;
        margin-top: .35rem;
    }
}