/*
=============================================================================
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);
}

body {
    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;
}

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

.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;
    }

}

/*
=========================================================
  OPTIONAL WEBSITE CHROME
  ---------------------------------------------------------
  Direct bookmarks remain distraction-free. The site-linked
  mode adds only one non-redundant route back to the website.
=========================================================
*/

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

.website-linked-mode .tool-shell {
    padding-top: .35rem;
}

.tool-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    width: min(1180px,calc(100% - 2rem));
    margin: 0 auto 1.5rem;
    padding: .85rem 1rem;
    color: var(--muted);
    font-size: .85rem;
}

.tool-footer a {
    color: var(--text);
    text-decoration: none;
}

.tool-footer a:hover,
.tool-footer a:focus-visible {
    text-decoration: underline;
}

/*
=========================================================
  VERSION 24 — BOTTOM-ALIGNED FOOTER FOR WEBSITE MODE
  ---------------------------------------------------------
  The calculator remains compact, while its optional website footer
  sits at the bottom of the viewport whenever the page content is
  shorter than the screen. Direct standalone mode still works because
  the main calculator area simply occupies the available height.
=========================================================
*/

body {
    display: flex;
    flex-direction: column;
}

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

.tool-footer {
    flex: 0 0 auto;
    margin-top: auto;
}