/* ================================================================
   PLANETARY HOUR CALCULATOR (/witch-box/planetary-hour-calculator)
   ================================================================ */

.phc-page-title {
    text-align: center;
}

/* Extra specificity (two classes) over .content-html h1/hr in site.css,
   so these overrides win regardless of stylesheet load order. */
.phc-page-title.content-html h1 {
    margin-bottom: 0;
}

.phc-page-title.content-html hr {
    margin: 0;
}

.phc-page {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    column-gap: 2.5rem;
    row-gap: 0.5rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .phc-page {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------
   DIAL COLUMN
   ---------------------------------------------------------------- */
.phc-dial-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.phc-dial-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
    /* The bounding box of a 90°/radius-208 arc is itself an exact square,
       so once the SVG viewBox (15 147 240 240) is cropped tight to just
       that arc — the live-time readout used to need extra room here and
       no longer does, it now lives in the text column — a plain square
       frame fills edge-to-edge with no wasted margin, at any width. */
    aspect-ratio: 1 / 1;
}

.phc-dial-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.phc-location-label {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.phc-sun-times {
    gap: 1.25rem;
}

.phc-sunrise,
.phc-sunset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.phc-sun-icon,
.phc-moon-icon {
    font-size: 1.15em;
    line-height: 1;
}

.phc-sun-icon {
    color: #c8912a;
}

.phc-moon-icon {
    color: var(--color-accent);
}

.phc-reveal-btn,
.phc-picker-field,
.phc-picker-live-btn {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-border-accent);
    border-radius: 0.4rem;
    padding: 0.35em 0.75em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .phc-reveal-btn:hover:not(:disabled),
    .phc-picker-field:hover,
    .phc-picker-field:focus-within,
    .phc-picker-live-btn:hover:not(:disabled) {
        background: var(--color-accent-lighter);
        border-color: var(--color-accent);
        color: var(--color-accent-dark);
    }

    .phc-reveal-btn:focus-visible,
    .phc-picker-live-btn:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .phc-reveal-btn:disabled,
    .phc-picker-live-btn:disabled {
        color: var(--color-text-faint);
        border-color: var(--color-border);
        cursor: default;
        pointer-events: none;
    }

/* Date/time fields pair a native <input> with our own inline-SVG icon.
   Mobile browsers disagree wildly on what (if anything) they draw for a
   picker affordance — Firefox draws no icon at all, some WebViews fall
   back to a bare select-style arrow — and can size the bare input far
   wider than its content needs. The wrapper owns the border/padding/hover
   look (styled above); the <input> itself is borderless and width-capped
   so our own icon is the only symbol the user ever sees. */
.phc-picker-field {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
}

.phc-picker-icon {
    flex: none;
    width: 1em;
    height: 1em;
    color: inherit;
}

.phc-picker-date,
.phc-picker-time {
    font: inherit;
    font-size: 0.8em;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    min-width: 0;
    position: relative;
    cursor: pointer;
}

.phc-picker-date {
    width: 6.5em;
}

.phc-picker-time {
    width: 5.5em;
}

    /* Kept (not display:none) so the field stays clickable in Chromium,
       but stretched invisible over the whole input so our own icon —
       consistent across every browser — is the only one shown. */
    .phc-picker-date::-webkit-calendar-picker-indicator,
    .phc-picker-time::-webkit-calendar-picker-indicator {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        cursor: pointer;
    }

.phc-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.phc-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.phc-polar-notice {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-card-background);
    border: 1px solid var(--color-border-accent);
    border-radius: 0.5rem;
    color: var(--color-card-text);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 420px;
}

/* ----------------------------------------------------------------
   DIAL — gold gradients & engraved face
   ---------------------------------------------------------------- */
.phc-dial-face {
    fill: url(#phc-dial-face-gradient);
}

.phc-dial-rim {
    fill: none;
    stroke: #4a3512;
    stroke-opacity: 0.4;
    stroke-width: 1;
}

.phc-dial-rim-inner {
    fill: none;
    stroke: #4a3512;
    stroke-opacity: 0.3;
    stroke-width: 0.75;
    stroke-dasharray: 2 2;
}

.phc-bezel {
    fill: none;
    stroke: url(#phc-gold-bezel);
}

.phc-bezel-highlight {
    fill: none;
    stroke: url(#phc-gold-shine);
    stroke-opacity: 0.9;
}

.phc-bezel-edge {
    fill: none;
    stroke: #3f2a08;
    stroke-opacity: 0.35;
}

.phc-arrow-edge {
    stroke: #4a3208;
    stroke-opacity: 0.45;
    stroke-linecap: round;
}

.phc-arrow-shaft {
    stroke: url(#phc-gold-arrow);
    stroke-linecap: round;
}

.phc-arrow-centerline {
    stroke: url(#phc-gold-shine);
    stroke-width: 0.6;
    stroke-opacity: 0.75;
}

.phc-arrow-head {
    fill: url(#phc-gold-arrow);
    stroke: #4a3208;
    stroke-width: 0.6;
    stroke-opacity: 0.6;
}

.phc-arrow-gem-outer {
    fill: none;
    stroke: url(#phc-gold-divider);
    stroke-width: 1.3;
}

.phc-arrow-gem {
    fill: url(#phc-gem-shine);
    stroke: #6b4a12;
    stroke-width: 0.6;
}

.phc-arrow-gem-glint {
    fill: #fffdf2;
    opacity: 0.85;
}

.phc-divider-shadow {
    stroke: #4a3208;
    stroke-opacity: 0.35;
    stroke-linecap: round;
}

.phc-divider {
    stroke: url(#phc-gold-divider);
    stroke-opacity: 0.98;
    stroke-linecap: round;
}

.phc-rivet {
    fill: url(#phc-gem-shine);
    stroke: #7a5518;
    stroke-width: 0.35;
}

.phc-star-a {
    fill: url(#phc-star-gradient-a);
    stroke: #4a2f5e;
    stroke-width: 0.4;
}

.phc-star-b {
    fill: url(#phc-star-gradient-b);
    stroke: #5c2f56;
    stroke-width: 0.4;
}

.phc-star-c {
    fill: url(#phc-star-gradient-c);
    stroke: #362f6b;
    stroke-width: 0.4;
}

.phc-star-shadow {
    fill: #241530;
    opacity: 0.32;
}

.phc-star-glint {
    fill: #fdf6ff;
    opacity: 0.85;
}

.phc-constellation-glow {
    stroke: #ffd97a;
    stroke-width: 2.2;
    stroke-opacity: 0.15;
}

.phc-constellation-line {
    stroke: url(#phc-gold-divider);
    stroke-width: 1;
    stroke-opacity: 0.8;
    stroke-dasharray: 3 3;
}

.phc-medallion-disc {
    fill: url(#phc-brass-medallion);
    stroke: #6b4a12;
    stroke-width: 1;
}

.phc-medallion-glyph {
    font-family: 'Cormorant Garamond', 'Adjusted Georgia Fallback', serif;
    fill: #3a2400;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.phc-medallion.is-active .phc-medallion-disc {
    stroke: #fff3d4;
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(255, 214, 122, 0.85));
}

/* ----------------------------------------------------------------
   Live time readout — sits in the empty wedge above/right of the
   arc, inside the dial's own bounding square (see viewBox on the
   svg — no extra canvas width was added for this).
   ---------------------------------------------------------------- */
.phc-live-time-wrap {
    position: absolute;
    top: 4%;
    right: 2%;
    text-align: right;
}

.phc-live-time {
    display: block;
    font-family: var(--font-main);
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   TEXT COLUMN — ruler panels
   ---------------------------------------------------------------- */
.phc-text-col .content-html {
    min-height: 220px;
}

.ruler-panel[hidden] {
    display: none;
}

.ruler-panel h2 {
    margin-top: 0;
}

.ruler-panel-hours {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}