/*
=============================================================================
TIME CALCULATOR — PRESENTATION / LAYOUT
=============================================================================
This stylesheet is intentionally expanded for readability. Rules are grouped
by responsibility and use four-space indentation so the visual hierarchy is
easy to scan while learning or debugging.
=============================================================================
*/

:root {
    color-scheme: dark;
    --bg: #050a12;
    --panel: rgba(11,21,35,.82);
    --border: rgba(255,255,255,.13);
    --text: #f4f7fb;
    --muted: #a9b7c8;
    --copper: #c47b3d;
    --indigo: #7387ff;
    --steel: #61b9c8;
    --error: #ff7474;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

/* The standalone utility owns its page background. Website mode inherits the
   shared Living Circuit background from assets/css/site.css. */

body.standalone-mode {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(115,135,255,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(196,123,61,.09),
            transparent 34%
        ),
        linear-gradient(180deg,#050a12,#08111d);
    font-family: Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

button,input {
    font: inherit;
}

.standalone-mode .skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 10;
    padding: .7rem 1rem;
    border-radius: .75rem;
    color: #fff;
    background: #101b2b;
    transform: translateY(-160%);
}

.standalone-mode .skip-link:focus {
    transform: translateY(0);
}

.tool-header,.tool-shell {
    width: min(1180px,calc(100% - 2rem));
    margin: auto;
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.brand-link,.glass-link {
    color: var(--text);
    text-decoration: none;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 700;
}

.brand-cube {
    display: grid;
    place-items: center;
    width: 2.5rem;
    aspect-ratio: 1;
    border: 1px solid rgba(196,123,61,.55);
    border-radius: .65rem;
    color: #efb17c;
    background: linear-gradient(145deg,rgba(25,41,67,.92),rgba(8,17,29,.88));
    font-size: .72rem;
}

.glass-link,.glass-button {
    border: 1px solid var(--border);
    border-radius: .85rem;
    color: var(--text);
    background: linear-gradient(145deg,rgba(21,35,56,.82),rgba(8,17,29,.74));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.22);
}

.glass-link {
    padding: .65rem .95rem;
}

.tool-shell {
    padding: 1rem 0 4rem;
}

.calculator-card {
    padding: clamp(1.15rem,3vw,2rem);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    background: var(--panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 24px 70px rgba(0,0,0,.34);
    backdrop-filter: blur(16px);
}

.eyebrow {
    margin: 0 0 .35rem;
    color: #e0a16b;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

h1 {
    margin: .1rem 0 .45rem;
    font-size: clamp(2rem,6vw,3.5rem);
}

.desc {
    color: var(--muted);
}

#timecalc-form {
    display: grid;
    gap: 1rem;
}

.option-group,.date-time-card {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 1.05rem;
    background: rgba(6,14,24,.48);
}

.option-group {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .8rem;
}

.option-group legend,.date-time-card legend {
    padding: 0 .45rem;
    font-weight: 750;
}

.glass-choice {
    position: relative;
}

.glass-choice input {
    position: absolute;
    opacity: 0;
}

.glass-choice span {
    display: inline-flex;
    min-height: 2.35rem;
    padding: .55rem .85rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: .75rem;
    color: var(--muted);
    background: rgba(15,27,44,.63);
}

.glass-choice input:checked+span {
    color: #fff;
    border-color: rgba(115,135,255,.58);
    background: linear-gradient(145deg,rgba(76,91,188,.38),rgba(22,33,74,.48));
}

.date-time-sections {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1rem;
}

.date-time-card {
    padding: 1rem;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .8rem;
}

.form-field {
    min-width: 0;
}

.form-field label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
}

.glass-input {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .8rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .8rem;
    color: #fff;
    background: linear-gradient(145deg,rgba(16,29,47,.88),rgba(7,15,26,.82));
}

.glass-input[aria-invalid=true] {
    border-color: rgba(255,116,116,.88);
    box-shadow: 0 0 0 1px rgba(255,116,116,.34),0 0 1.15rem rgba(255,116,116,.16);
}

.field-help,.field-error {
    margin: .35rem 0 0;
    font-size: .78rem;
}

.field-help {
    color: var(--muted);
}

.field-error {
    min-height: 1.05rem;
    color: #ff9a9a;
}

.shortcut-tip {
    margin: -.15rem 0 0;
    color: #c5cfdb;
    font-size: .88rem;
}

.shortcut-tip strong {
    color: #efb17c;
}

.calculator-actions {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
}

.glass-button {
    min-height: 2.85rem;
    padding: .7rem 1rem;
    cursor: pointer;
}

.primary {
    border-color: rgba(196,123,61,.65);
    background: linear-gradient(145deg,rgba(141,77,34,.72),rgba(76,39,19,.82));
}

.results-card {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(97,185,200,.36);
    border-radius: 1rem;
    background: linear-gradient(145deg,rgba(19,46,56,.55),rgba(8,21,29,.72));
}

#result-output {
    display: block;
    color: #dffcff;
    font-size: clamp(1.35rem,4vw,2rem);
    font-weight: 800;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid rgba(124,207,217,.42);
    outline-offset: 3px;
}

@media (max-width:900px) {
    .date-time-sections {
        grid-template-columns: 1fr;
    }

}

@media (max-width:620px) {
    .tool-header,.tool-shell {
        width: min(100% - 1rem,1180px);
    }

    .brand-link span:last-child {
        display: none;
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .option-group {
        flex-direction: column;
    }

    .glass-choice span {
        width: 100%;
    }

    .calculator-actions {
        display: grid;
        grid-template-columns: 1.25fr .85fr .85fr;
    }

    .glass-button {
        padding-inline: .5rem;
    }

}

/*
=========================================================
  v50 — FULL WEBSITE MODE
  ---------------------------------------------------------
  Direct /utilities/timecalc/ remains a focused standalone utility.
  ?site=1 now participates in the complete website shell instead of using the
  older mini-brand header/footer. The shared site stylesheet owns navigation,
  footer, Contact Me, and the Living Circuit background.
=========================================================
*/

.standalone-mode .tool-shell {
    padding-top: clamp(1rem,4vh,2.75rem);
}

.website-linked-mode .tool-shell {
    padding-block: clamp(2rem, 5vw, 4.5rem);
}

.website-linked-mode .calculator-card {
    width: min(100%, 1180px);
    margin-inline: auto;
    background: linear-gradient(145deg, rgba(14, 27, 44, .86), rgba(6, 14, 24, .80));
}

/* Website mode already has a shared skip link from includes/header.php. */
.website-linked-mode > .skip-link {
    /* Intentionally left to the site-wide stylesheet. */
}

@media (max-width: 620px) {
    .website-linked-mode .tool-shell {
        width: min(100% - 1rem,1180px);
        padding-top: 1.25rem;
        padding-bottom: 2.5rem;
    }
}