/*
 * Bay Gio La May Gio — Atlas & Reference pages
 * v1.6.25
 *
 * Dedicated canonical stylesheet for:
 * - World clock / country / city landing pages
 * - UTC / Unix / DST / sunrise-sunset / Vietnam holidays
 *
 * These templates do not load pages.css, so this file never patches or
 * overrides legacy page-template rules. Base styles are followed by only
 * three responsive breakpoints: 980 / 720 / 480.
 */

/* Shared shell ----------------------------------------------------------- */
.atlas-page,
.reference-page {
    padding: 30px 0 60px;
}

.atlas-container,
.reference-container {
    width: min(calc(100% - 40px), 1120px);
    margin-inline: auto;
}

.atlas-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 22px;
    color: var(--text-soft);
    font-size: 12.5px;
}

.atlas-breadcrumb a {
    color: var(--text-soft);
}

.atlas-breadcrumb a:hover {
    color: var(--primary);
}

.atlas-hero,
.reference-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 34px;
    align-items: stretch;
    margin-bottom: 22px;
}

.atlas-hero-copy,
.reference-hero-copy {
    align-self: center;
    min-width: 0;
    padding: 16px 0;
}

.atlas-hero-copy h1,
.reference-hero-copy h1 {
    max-width: 800px;
    margin: 0 0 10px;
    color: var(--text);
    font-size: clamp(34px, 4.5vw, 50px);
    font-weight: 730;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.atlas-hero-copy > p:not(.eyebrow),
.reference-hero-copy > p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.72;
}

.atlas-card-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 650;
}

.atlas-hero-meta,
.reference-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.atlas-hero-meta span,
.reference-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 11.5px;
}

.atlas-hero-meta strong {
    margin-right: 4px;
    color: var(--text);
}

.atlas-hero-difference {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 10px;
    margin-top: 16px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-soft);
    font-size: 12px;
}

.atlas-hero-difference span {
    color: var(--text-soft);
}

.atlas-hero-difference strong {
    color: var(--text);
    font-weight: 700;
}

.atlas-hero-difference strong.difference-ahead {
    color: var(--success, #16794b);
}

.atlas-hero-difference strong.difference-behind {
    color: var(--warning, #b54708);
}

.atlas-section,
.reference-upcoming-section,
.reference-holiday-directory {
    margin-top: 38px;
}

.atlas-section-heading,
.reference-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.atlas-section-heading h2,
.reference-section-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.atlas-section-heading p:not(.eyebrow),
.reference-section-heading p:not(.eyebrow) {
    max-width: 760px;
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.55;
}

.atlas-section-heading > a,
.atlas-section-heading-action > a {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 650;
}

.atlas-empty-card {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* World search ----------------------------------------------------------- */
.atlas-search-card,
.atlas-live-clock,
.reference-clock-card,
.reference-hero-aside {
    position: relative;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.atlas-search-card h2 {
    margin: 0 0 5px;
    font-size: 19px;
    letter-spacing: -.02em;
}

.atlas-search-card > p {
    margin: 0 0 14px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.atlas-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.atlas-search-form input {
    min-width: 0;
}

.atlas-search-result {
    margin-top: 10px;
}

.atlas-world-page .atlas-search-result .time-card {
    margin: 0;
    box-shadow: none;
}

.atlas-search-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.atlas-search-shortcuts a {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
}

.atlas-search-shortcuts a:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--primary);
}

/* Atlas clocks ----------------------------------------------------------- */
.atlas-clock-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.atlas-clock-card {
    position: relative;
    min-width: 0;
    min-height: 132px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.atlas-clock-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    transform: translateY(-1px);
}

.atlas-clock-place {
    padding-right: 24px;
}

.atlas-clock-place h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

.atlas-clock-place h3 a {
    color: var(--text);
}

.atlas-clock-place h3 a:hover {
    color: var(--primary);
}

.atlas-clock-place p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: 10.5px;
}

.atlas-clock-card time {
    display: block;
    margin-top: 11px;
    color: var(--text);
    font-size: clamp(25px, 2.8vw, 31px);
    font-weight: 680;
    line-height: 1;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}

.atlas-clock-card > small {
    display: block;
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 10.5px;
}

.atlas-favorite-toggle {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.atlas-favorite-toggle:hover {
    background: var(--surface-soft);
    color: var(--primary);
}

.atlas-favorite-toggle.is-favorite {
    color: var(--primary);
}

.atlas-country-clock-grid.atlas-count-1 {
    grid-template-columns: minmax(240px, 340px);
}

.atlas-country-clock-grid.atlas-count-2 {
    grid-template-columns: repeat(2, minmax(220px, 300px));
}

.atlas-country-clock-grid.atlas-count-3 {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
}

/* Directory -------------------------------------------------------------- */
.atlas-country-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.atlas-directory-card {
    position: relative;
    min-width: 0;
    min-height: 98px;
    padding: 13px 34px 13px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.atlas-directory-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--text);
}

.atlas-directory-label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-soft);
    font-size: 10px;
}

.atlas-directory-card strong,
.atlas-directory-card small {
    display: block;
}

.atlas-directory-card strong {
    font-size: 14px;
}

.atlas-directory-card small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 10.5px;
    line-height: 1.4;
}

.atlas-directory-arrow {
    position: absolute;
    right: 13px;
    bottom: 13px;
    color: var(--primary);
    font-weight: 700;
}

.atlas-region-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.atlas-region-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}

.atlas-region-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
}

.atlas-region-heading h3 {
    margin: 0;
    font-size: 16px;
}

.atlas-region-heading span {
    color: var(--text-soft);
    font-size: 10.5px;
}

.atlas-region-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    border-top: 1px solid var(--border);
}

.atlas-region-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.atlas-region-links a:hover strong {
    color: var(--primary);
}

.atlas-region-links a > span,
.atlas-region-links strong,
.atlas-region-links small {
    display: block;
    min-width: 0;
}

.atlas-region-links strong {
    font-size: 12.5px;
}

.atlas-region-links small {
    margin-top: 1px;
    color: var(--text-soft);
    font-size: 10px;
}

.atlas-region-links b {
    color: var(--text-soft);
    font-size: 11px;
}

/* Place pages ------------------------------------------------------------ */
.atlas-place-hero {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.atlas-live-clock {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.atlas-live-clock time {
    display: block;
    margin: 3px 0 6px;
    color: var(--text);
    font-size: clamp(48px, 5.6vw, 66px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.atlas-live-clock p,
.atlas-live-clock small {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
}

.atlas-live-clock p strong {
    color: var(--text);
}

.atlas-live-clock small {
    margin-top: 2px;
}

.atlas-tech-label {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 11px;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 10px;
}

.atlas-inline-note {
    max-width: 720px;
    margin-top: 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.atlas-inline-note strong {
    color: var(--text);
}

.atlas-fact-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 4px 0 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.atlas-fact-strip > div {
    min-width: 0;
    padding: 13px 15px;
}

.atlas-fact-strip > div + div {
    border-left: 1px solid var(--border);
}

.atlas-fact-strip span,
.atlas-fact-strip small {
    display: block;
    color: var(--text-soft);
}

.atlas-fact-strip span {
    font-size: 10.5px;
}

.atlas-fact-strip strong {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.atlas-fact-strip small {
    margin-top: 2px;
    font-size: 9.5px;
    overflow-wrap: anywhere;
}

.atlas-dual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 38px;
}

.atlas-data-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}

.atlas-data-card-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.atlas-data-card-heading h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

.atlas-data-card-heading > span {
    color: var(--text-soft);
    font-size: 11px;
}

.atlas-compare-list {
    display: grid;
}

.atlas-compare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.atlas-compare-row:last-child {
    border-bottom: 0;
}

.atlas-compare-row > span,
.atlas-compare-row strong,
.atlas-compare-row small {
    display: block;
}

.atlas-compare-row strong {
    font-size: 12.5px;
}

.atlas-compare-row small {
    margin-top: 1px;
    color: var(--text-soft);
    font-size: 9.5px;
}

.atlas-compare-row b {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    text-align: right;
}

.atlas-call-window {
    padding: 18px 0 12px;
}

.atlas-call-window span {
    display: block;
    color: var(--text-soft);
    font-size: 11px;
}

.atlas-call-window strong {
    display: block;
    margin-top: 3px;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
    letter-spacing: -.025em;
}

.atlas-call-window p,
.atlas-card-copy,
.atlas-card-note {
    color: var(--text-soft);
    font-size: 11.5px;
    line-height: 1.58;
}

.atlas-call-window p {
    margin: 8px 0 0;
}

.atlas-card-actions,
.atlas-note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.atlas-conversion-section {
    max-width: 940px;
}

.atlas-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.atlas-table-toggle {
    display: none;
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.atlas-time-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.atlas-time-table th,
.atlas-time-table td {
    width: 50%;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 12.5px;
}

.atlas-time-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 650;
}

.atlas-time-table tr:last-child td {
    border-bottom: 0;
}

.atlas-time-table td:first-child {
    font-weight: 650;
}

.atlas-time-table small {
    color: var(--text-soft);
    font-size: 10px;
}

.atlas-clock-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 220px) minmax(0, 1fr);
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    overflow: hidden;
}

.atlas-compare-clock,
.atlas-difference-answer {
    min-width: 0;
    padding: 18px;
}

.atlas-compare-clock > span,
.atlas-difference-answer > span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-soft);
    font-size: 11px;
}

.atlas-compare-clock time {
    display: block;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 680;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.atlas-compare-clock small {
    display: block;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 10.5px;
}

.atlas-difference-answer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-inline: 1px solid var(--border);
    background: var(--surface-soft);
    text-align: center;
}

.atlas-difference-answer strong {
    font-size: 14px;
    line-height: 1.45;
}

.atlas-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 14px;
}

.atlas-metric-grid > div {
    padding: 11px;
    border-radius: 8px;
    background: var(--surface-soft);
}

.atlas-metric-grid span,
.atlas-metric-grid strong {
    display: block;
}

.atlas-metric-grid span {
    color: var(--text-soft);
    font-size: 10.5px;
}

.atlas-metric-grid strong {
    margin-top: 2px;
    font-size: 16px;
}

.atlas-card-note {
    margin: 11px 0 7px;
}

.atlas-text-link {
    font-size: 12px;
    font-weight: 650;
}

.atlas-status-block {
    margin-top: 14px;
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-soft);
}

.atlas-status-block span,
.atlas-status-block strong {
    display: block;
}

.atlas-status-block span {
    color: var(--text-soft);
    font-size: 10.5px;
}

.atlas-status-block strong {
    margin-top: 2px;
    font-size: 15px;
}

.atlas-status-active strong {
    color: var(--primary);
}

.atlas-card-copy {
    margin: 12px 0 8px;
}

.atlas-card-copy strong {
    color: var(--text);
}

/* Notes / editorial / related ------------------------------------------- */
.atlas-note-card,
.reference-tip-card,
.reference-legal-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
}

.atlas-note-card > div,
.reference-legal-note > div {
    min-width: 0;
}

.atlas-note-card strong,
.reference-tip-card strong {
    display: block;
    font-size: 16px;
}

.atlas-note-card p,
.reference-tip-card p,
.reference-legal-note p {
    max-width: 820px;
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.58;
}

.atlas-note-card .button,
.reference-side-card .button {
    flex: 0 0 auto;
}

.atlas-editorial,
.reference-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 980px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}

.atlas-editorial section,
.reference-editorial-grid section {
    min-width: 0;
}

.atlas-editorial h2,
.reference-editorial-grid h2 {
    margin: 0 0 9px;
    font-size: 20px;
    line-height: 1.35;
}

.atlas-editorial p:not(.eyebrow),
.reference-editorial-grid p:not(.eyebrow) {
    margin: 0 0 10px;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.75;
}

.reference-editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atlas-faq {
    max-width: 980px;
}

.atlas-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.atlas-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.atlas-related-grid a {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 92px;
    padding: 15px 40px 15px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.atlas-related-grid a:hover {
    border-color: var(--border-strong);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
}

.atlas-related-grid a > span,
.atlas-related-grid strong,
.atlas-related-grid small {
    display: block;
    min-width: 0;
}

.atlas-related-grid strong {
    font-size: 13px;
    line-height: 1.4;
}

.atlas-related-grid small {
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.45;
}

.atlas-related-grid b {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 500;
}

.atlas-related-grid a:hover b { color: var(--primary); }

.atlas-country-jump,
.atlas-inline-directory {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 13px;
    margin-top: 28px;
    padding-top: 17px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 12px;
}

.atlas-country-jump a,
.atlas-inline-directory a {
    font-weight: 600;
}

.atlas-inline-directory a[aria-current="page"] {
    color: var(--text);
    font-weight: 700;
}

/* Reference cluster ------------------------------------------------------ */
.reference-hero-compact {
    margin-bottom: 18px;
}

.reference-hero-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reference-hero-aside strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.reference-hero-aside p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.reference-clock-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reference-clock-card time {
    display: block;
    margin: 2px 0 7px;
    font-size: clamp(50px, 6vw, 68px);
    font-weight: 710;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.reference-clock-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
}

.reference-clock-card > strong {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
}

.reference-cluster-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 34px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.reference-cluster-nav > span {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 650;
}

.reference-cluster-nav > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.reference-cluster-nav a {
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
}

.reference-cluster-nav a:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.reference-cluster-nav a[aria-current="page"] {
    background: var(--primary-soft);
    color: var(--primary);
}

.reference-two-column,
.reference-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 12px;
    align-items: stretch;
}

.reference-info-card,
.reference-side-card,
.reference-tool-card {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}

.reference-info-card h2,
.reference-side-card h2,
.reference-tool-card h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
}

.reference-info-card > p:not(.eyebrow),
.reference-side-card > p:not(.eyebrow) {
    margin: 7px 0 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.65;
}

.reference-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.reference-stat-grid > div {
    min-width: 0;
    padding: 11px;
    border-radius: 8px;
    background: var(--surface-soft);
}

.reference-stat-grid span,
.reference-stat-grid strong {
    display: block;
}

.reference-stat-grid span {
    color: var(--text-soft);
    font-size: 10.5px;
}

.reference-stat-grid strong {
    margin-top: 3px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.reference-check-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 17px;
    padding: 0;
    list-style: none;
}

.reference-check-list li {
    position: relative;
    padding-left: 17px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.5;
}

.reference-check-list li::before {
    content: '•';
    position: absolute;
    left: 2px;
    color: var(--primary);
    font-weight: 700;
}

.reference-tool-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.reference-tool-heading > span {
    color: var(--text-soft);
    font-size: 10.5px;
}

.reference-live-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 18px;
}

.reference-live-values > div {
    position: relative;
    min-width: 0;
    padding: 14px;
    border-radius: 9px;
    background: var(--surface-soft);
}

.reference-live-values span,
.reference-live-values strong {
    display: block;
}

.reference-live-values span {
    color: var(--text-soft);
    font-size: 10.5px;
}

.reference-live-values strong {
    margin: 4px 74px 0 0;
    font-size: clamp(18px, 2.6vw, 26px);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.reference-live-values .text-button {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 650;
    cursor: pointer;
}

.reference-converter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reference-converter-pane {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.reference-pane-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.reference-pane-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
}

.reference-pane-heading h3 {
    margin: 0;
    font-size: 15px;
}

.reference-pane-heading p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: 10.5px;
    line-height: 1.45;
}

.reference-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.reference-form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reference-field,
.reference-form-grid label,
.reference-preset-row label,
.reference-filter-bar label {
    display: block;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 600;
}

.reference-field select,
.reference-form-grid input,
.reference-form-grid select,
.reference-preset-row select,
.reference-filter-bar select {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    outline: 0;
}

.reference-field select:focus,
.reference-form-grid input:focus,
.reference-form-grid select:focus,
.reference-preset-row select:focus,
.reference-filter-bar select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.reference-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.reference-result,
.reference-transition {
    margin-top: 13px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-soft);
}

.reference-result span,
.reference-result strong,
.reference-result small,
.reference-transition span,
.reference-transition strong,
.reference-transition small {
    display: block;
}

.reference-result span,
.reference-transition span {
    color: var(--text-soft);
    font-size: 10.5px;
}

.reference-result strong,
.reference-transition strong {
    margin-top: 3px;
    font-size: 17px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.reference-result small,
.reference-transition small {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 10.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.reference-note {
    margin: 12px 0 0;
    color: var(--text-soft);
    font-size: 10.8px;
    line-height: 1.55;
}

.reference-mini-example {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 10px;
    margin: 16px 0;
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-soft);
}

.reference-mini-example span {
    color: var(--text-soft);
    font-size: 10px;
}

.reference-mini-example strong {
    text-align: right;
    font-size: 13px;
}

.reference-mini-example b {
    display: none;
}

.reference-preset-row {
    max-width: 440px;
    margin-bottom: 12px;
}

.reference-solar-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.reference-solar-results > div {
    min-width: 0;
    padding: 14px;
    border-radius: 9px;
    background: var(--surface-soft);
}

.reference-solar-results span,
.reference-solar-results strong,
.reference-solar-results small {
    display: block;
}

.reference-solar-results span,
.reference-solar-results small {
    color: var(--text-soft);
}

.reference-solar-results span {
    font-size: 10.5px;
}

.reference-solar-results strong {
    margin: 4px 0 2px;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.reference-solar-results small {
    font-size: 9.5px;
}

.reference-explain-grid {
    margin-top: 12px;
}

/* Holidays --------------------------------------------------------------- */
.reference-holiday-hero {
    margin-bottom: 18px;
}

.reference-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.reference-upcoming-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
}

.reference-upcoming-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--text);
}

.reference-upcoming-date,
.reference-upcoming-card strong,
.reference-upcoming-card b {
    display: block;
}

.reference-upcoming-date {
    color: var(--text-soft);
    font-size: 10px;
}

.reference-upcoming-card strong {
    margin-top: 5px;
    font-size: 13px;
}

.reference-upcoming-card b {
    margin-top: 7px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 650;
}

.reference-legal-note {
    align-items: flex-start;
}

.reference-legal-note h2 {
    margin: 0;
    font-size: 18px;
}

.reference-legal-note > p {
    flex: 0 0 300px;
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid var(--border);
}

.reference-filter-bar {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(180px, 240px) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.reference-holiday-list {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    overflow: hidden;
}

.reference-holiday-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    padding: 13px 15px;
    border-bottom: 1px solid var(--border);
}

.reference-holiday-row:last-child {
    border-bottom: 0;
}

.reference-holiday-row[hidden] {
    display: none;
}

.reference-holiday-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    border-radius: 8px;
    background: var(--surface-soft);
}

.reference-holiday-date strong {
    font-size: 23px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.reference-holiday-date span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 9.5px;
}

.reference-holiday-copy {
    min-width: 0;
}

.reference-holiday-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.reference-holiday-heading h3 {
    margin: 0;
    font-size: 14px;
}

.reference-holiday-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 650;
}

.reference-holiday-badge-public {
    background: var(--primary-soft);
    color: var(--primary);
}

.reference-holiday-copy > p {
    margin: 4px 0 6px;
    color: var(--text-soft);
    font-size: 11.5px;
    line-height: 1.5;
}

.reference-holiday-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: var(--text-soft);
    font-size: 10.5px;
}

.reference-holiday-meta strong {
    color: var(--text);
    font-weight: 650;
}

.reference-holiday-meta strong.is-upcoming {
    color: var(--primary);
}

.reference-holiday-meta strong.is-today {
    color: var(--success);
}

.reference-holiday-meta strong.is-past {
    color: var(--text-soft);
}

.reference-holiday-action {
    text-align: right;
}

.reference-holiday-action a {
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.reference-empty-state {
    margin: 10px 0 0;
    padding: 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 9px;
    color: var(--text-soft);
    text-align: center;
    font-size: 12px;
}

/* Tool SEO & contextual links for reference templates ------------------- */
.reference-page .tool-seo-content {
    max-width: 980px;
    margin-top: 46px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.reference-page .tool-seo-intro,
.reference-page .tool-seo-section {
    margin: 0 0 28px;
}

.reference-page .tool-seo-intro h2,
.reference-page .tool-seo-section h2,
.reference-page .tool-seo-faq h2,
.reference-page .tool-related-section h2 {
    margin: 0 0 9px;
    font-size: 20px;
    line-height: 1.35;
}

.reference-page .tool-seo-intro p,
.reference-page .tool-seo-section > p,
.reference-page .tool-seo-note {
    margin: 0 0 10px;
    color: var(--text-soft);
    font-size: 12.8px;
    line-height: 1.72;
}

.reference-page .tool-seo-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.reference-page .tool-step-list,
.reference-page .tool-use-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reference-page .tool-step-list {
    display: grid;
    gap: 8px;
}

.reference-page .tool-step-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.reference-page .tool-step-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
}

.reference-page .tool-step-list strong {
    display: block;
    font-size: 12.5px;
}

.reference-page .tool-step-list p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: 11.5px;
    line-height: 1.55;
}

.reference-page .tool-use-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.reference-page .tool-use-list li {
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 11.5px;
}

.reference-page .tool-shortcut-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reference-page .tool-shortcut-list > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 11px;
}

.reference-page .tool-shortcut-list kbd {
    padding: 2px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface-soft);
    font-family: var(--font-sans);
    font-size: 10px;
}

.reference-page .tool-seo-faq,
.reference-page .tool-related-section {
    margin-top: 34px;
}

.reference-page .tool-seo-faq .section-heading,
.reference-page .tool-related-section .section-heading {
    align-items: flex-end;
    margin-bottom: 12px;
}

.reference-page .tool-seo-faq .section-heading p,
.reference-page .tool-related-section .section-heading p p {
    margin: 3px 0 0;
    color: var(--text-soft);
    font-size: 11.5px;
}


.reference-page .tool-related-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.reference-page .tool-related-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 650;
}

.reference-page .tool-related-links a:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}


/* Responsive: tablet ----------------------------------------------------- */

.unix-output-card {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
}

.unix-output-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft, var(--surface));
}

.unix-output-heading span {
    font-weight: 700;
}

.unix-output-heading small {
    color: var(--muted);
}

.unix-output-list > div {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 48px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
}

.unix-output-list > div:last-child {
    border-bottom: 0;
}

.unix-output-list span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 650;
}

.unix-output-list code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
}

.unix-output-list .text-button {
    white-space: nowrap;
}


.dst-popular-section {
    margin-top: 34px;
}

.dst-popular-section .reference-section-heading > a {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.dst-popular-section .reference-section-heading > a:hover {
    text-decoration: underline;
}

.dst-popular-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dst-popular-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.dst-popular-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.dst-popular-topline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}

.dst-popular-topline b {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-soft, var(--background));
    color: var(--muted);
    font-size: .72rem;
    font-weight: 650;
}

.dst-popular-offset {
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.dst-popular-card small {
    color: var(--muted);
    line-height: 1.45;
}

.solar-city-search {
    position: relative;
    display: grid;
    gap: 7px;
    margin-bottom: 17px;
}

.solar-city-search > label {
    font-size: .84rem;
    font-weight: 700;
}

.solar-city-search-control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 11px 5px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.solar-city-search-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.solar-city-search-control input {
    width: 100%;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.solar-city-search > small {
    color: var(--muted);
    font-size: .8rem;
}

.solar-city-results {
    position: absolute;
    z-index: 8;
    top: 72px;
    left: 0;
    right: 0;
    max-height: 310px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .13);
}

.solar-city-results button {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 10px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.solar-city-results button:hover,
.solar-city-results button:focus-visible {
    background: var(--surface-soft, var(--background));
    outline: none;
}

.solar-city-results strong {
    color: var(--text);
}

.solar-city-results span {
    color: var(--muted);
    font-size: .78rem;
}


/* Content-gap utilities: GMT and AM/PM ---------------------------------- */
.time-format-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.time-format-pane {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.time-format-pane h2 { margin: 0 0 6px; font-size: clamp(1.1rem, 2vw, 1.3rem); }
.time-format-pane > p { margin: 0 0 18px; color: var(--text-muted); }
.time-format-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(88px, .45fr) minmax(88px, .4fr);
    gap: 10px;
    align-items: end;
}
.time-format-form-single { grid-template-columns: 1fr; }
.time-format-form label { display: grid; gap: 7px; font-weight: 650; font-size: .9rem; }
.time-format-form input,
.time-format-form select {
    width: 100%; min-height: 46px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); color: var(--text); font: inherit;
}
.time-format-result {
    margin-top: 16px; padding: 16px; border-radius: var(--radius-md);
    background: var(--surface-soft); border: 1px solid var(--border);
}
.time-format-result span { display: block; color: var(--text-muted); font-size: .84rem; margin-bottom: 4px; }
.time-format-result strong { font-size: clamp(1.55rem, 4vw, 2.2rem); letter-spacing: -.03em; }
.time-format-table-wrap { overflow-x: auto; }
.time-format-table { width: 100%; border-collapse: collapse; min-width: 440px; }
.time-format-table th, .time-format-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.time-format-table th { color: var(--text-muted); font-size: .82rem; }
@media (max-width: 980px) {
    .atlas-hero,
    .reference-hero,
    .atlas-place-hero {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 22px;
    }

    .atlas-clock-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .atlas-country-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .atlas-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-form-grid-4,
    .reference-solar-results,
    .reference-upcoming-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-editorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive: mobile ----------------------------------------------------- */
@media (max-width: 720px) {
    .atlas-page,
    .reference-page {
        padding-top: 22px;
    }

    .atlas-container,
    .reference-container {
        width: min(calc(100% - 28px), 1120px);
    }

    .atlas-breadcrumb {
        margin-bottom: 16px;
        font-size: 11.5px;
    }

    .atlas-hero,
    .reference-hero,
    .atlas-place-hero {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .atlas-hero-copy,
    .reference-hero-copy {
        padding: 8px 0;
    }

    .atlas-hero-copy h1,
    .reference-hero-copy h1 {
        font-size: clamp(30px, 9vw, 40px);
    }

    .atlas-search-card,
    .atlas-live-clock,
    .reference-clock-card,
    .reference-hero-aside {
        padding: 18px;
    }

    .atlas-live-clock time,
    .reference-clock-card time {
        font-size: clamp(44px, 13vw, 58px);
    }

    .atlas-clock-grid,
    .atlas-country-clock-grid.atlas-count-1,
    .atlas-country-clock-grid.atlas-count-2,
    .atlas-country-clock-grid.atlas-count-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .atlas-country-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .atlas-region-grid,
    .atlas-dual-grid,
    .reference-two-column,
    .reference-workspace-grid,
    .reference-converter-grid,
    .reference-page .tool-seo-columns,
    .atlas-editorial,
    .reference-editorial-grid {
        grid-template-columns: 1fr;
    }

    .atlas-region-links {
        grid-template-columns: 1fr;
    }

    .atlas-fact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .atlas-fact-strip > div + div {
        border-left: 0;
    }

    .atlas-fact-strip > div:nth-child(even) {
        border-left: 1px solid var(--border);
    }

    .atlas-fact-strip > div:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .atlas-clock-compare {
        grid-template-columns: 1fr 1fr;
    }

    .atlas-difference-answer {
        grid-column: 1 / -1;
        grid-row: 2;
        border: 0;
        border-top: 1px solid var(--border);
        text-align: left;
    }

    .atlas-compare-clock + .atlas-compare-clock {
        border-left: 1px solid var(--border);
    }

    .atlas-compact-table.is-compact-ready .atlas-table-toggle {
        display: block;
    }

    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr {
        display: none;
    }

    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(1),
    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(7),
    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(10),
    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(13),
    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(16),
    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(19),
    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(22),
    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(24) {
        display: table-row;
    }

    .atlas-note-card,
    .reference-tip-card,
    .reference-legal-note {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .reference-legal-note > p {
        flex: auto;
        padding: 13px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .atlas-faq-grid {
        grid-template-columns: 1fr;
    }

    .reference-cluster-nav {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .reference-live-values,
    .reference-form-grid,
    .reference-stat-grid,
    .reference-page .tool-use-list {
        grid-template-columns: 1fr;
    }

    .reference-form-grid-4,
    .reference-solar-results,
    .reference-upcoming-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-filter-bar .button {
        grid-column: 1 / -1;
    }

    .reference-holiday-row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .reference-holiday-action {
        grid-column: 2;
        text-align: left;
    }
}

/* Responsive: small mobile ---------------------------------------------- */
@media (max-width: 480px) {
    .atlas-container,
    .reference-container {
        width: min(calc(100% - 22px), 1120px);
    }

    .atlas-search-form {
        grid-template-columns: 1fr;
    }

    .atlas-search-form .button {
        width: 100%;
    }

    .atlas-clock-grid,
    .atlas-country-clock-grid.atlas-count-1,
    .atlas-country-clock-grid.atlas-count-2,
    .atlas-country-clock-grid.atlas-count-3,
    .atlas-country-grid,
    .atlas-related-grid,
    .reference-form-grid-4,
    .reference-solar-results,
    .reference-upcoming-grid,
    .reference-filter-bar {
        grid-template-columns: 1fr;
    }

    .atlas-section-heading,
    .reference-section-heading,
    .reference-tool-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .atlas-section-heading > a,
    .reference-tool-heading .button {
        align-self: flex-start;
    }

    .atlas-fact-strip {
        grid-template-columns: 1fr;
    }

    .atlas-fact-strip > div:nth-child(even) {
        border-left: 0;
    }

    .atlas-fact-strip > div + div,
    .atlas-fact-strip > div:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .atlas-clock-compare {
        grid-template-columns: 1fr;
    }

    .atlas-difference-answer {
        grid-column: auto;
        grid-row: auto;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .atlas-compare-clock + .atlas-compare-clock {
        border-left: 0;
    }

    .atlas-metric-grid {
        grid-template-columns: 1fr;
    }

    .atlas-card-actions,
    .atlas-note-actions,
    .reference-actions {
        flex-direction: column;
    }

    .atlas-card-actions .button,
    .atlas-note-actions .button,
    .reference-actions .button,
    .reference-side-card .button {
        width: 100%;
    }

    .reference-holiday-row {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }

    .reference-holiday-date {
        min-height: 56px;
    }

    .reference-holiday-date strong {
        font-size: 20px;
    }

    .reference-holiday-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .reference-live-values strong {
        margin-right: 0;
        padding-right: 0;
        font-size: 18px;
    }

    .reference-live-values .text-button {
        position: static;
        margin-top: 8px;
        padding: 0;
    }
}

@media (max-width: 720px) {
    .dst-popular-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .unix-output-list > div {
        grid-template-columns: 1fr auto;
    }

    .unix-output-list > div > span {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .dst-popular-grid {
        grid-template-columns: 1fr;
    }

    .unix-output-heading {
        display: grid;
    }
}

/* Holiday data provenance — unique reference component */
.reference-data-stamp {display:flex;align-items:center;flex-wrap:wrap;gap:7px 18px;margin:12px 0 0;padding:11px 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text-soft);font-size:11.5px;line-height:1.55;}
.reference-data-stamp strong {color:var(--text);font-weight:650;}
.reference-data-stamp a {margin-left:auto;font-weight:650;white-space:nowrap;}
@media (max-width: 720px) {.reference-data-stamp {align-items:flex-start;flex-direction:column;gap:6px;}.reference-data-stamp a {margin-left:0;}}

@media (max-width: 720px) {
    .time-format-workspace { grid-template-columns: 1fr; }
    .time-format-form { grid-template-columns: 1fr 1fr; }
    .time-format-form label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .time-format-form { grid-template-columns: 1fr; }
    .time-format-form label:first-child { grid-column: auto; }
}