/* =================================================================
   tools/unix-timestamp.css
   Auto-extracted from math.css (2026-05-11).
   Loaded via config/js-manifest.php → templates/partials/head-styles.php.
   ================================================================= */

/* =================================================================
   UNIX TIMESTAMP — summary, breakdown, formats, timezones, relative
   ================================================================= */

/* ─── Summary head ──────────────────────────────────── */
.math-ts-summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(16, 185, 129, 0.06));
    border: 1px solid var(--math-border-light);
    border-radius: var(--math-radius-sm);
}
.math-ts-summary-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 320px;
}
.math-ts-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--math-text-muted);
    font-weight: 600;
}
.math-ts-summary-value {
    background: transparent;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    color: #4338ca;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    word-break: break-word;
}
.math-ts-summary-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--math-text-muted);
}
.math-ts-summary-sub i {
    margin-right: 4px;
    color: var(--math-primary);
    opacity: 0.8;
}

.math-ts-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.math-ts-mode-badge,
.math-ts-chip,
.math-ts-relative-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--math-radius-full);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--math-border-light);
    background: #fff;
    color: var(--math-text-soft);
}
.math-ts-mode-badge[data-mode="ts-to-date"] {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.3);
}
.math-ts-mode-badge[data-mode="date-to-ts"] {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.35);
}
.math-ts-chip-unit {
    background: rgba(251, 191, 36, 0.14);
    color: #92400e;
    border-color: rgba(251, 191, 36, 0.35);
}
.math-ts-chip-tz {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.3);
}
.math-ts-relative-chip[data-direction="past"] {
    background: rgba(148, 163, 184, 0.15);
    color: #475569;
    border-color: rgba(148, 163, 184, 0.35);
}
.math-ts-relative-chip[data-direction="future"] {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.35);
}
.math-ts-relative-chip[data-direction="now"] {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ─── Y2K38 warning ─────────────────────────────────── */
.math-ts-y2k38 {
    padding: 12px 14px;
    margin-bottom: 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.5;
}
.math-ts-y2k38-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 6px;
    color: #b91c1c;
}
.math-ts-y2k38-body code {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* ─── Generic panel scaffolding ─────────────────────── */
.math-ts-panel {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--math-border-light);
    border-radius: var(--math-radius-sm);
}
.math-ts-panel:empty {
    display: none;
}
.math-ts-panel-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--math-primary-hover);
    margin-bottom: 12px;
}
.math-ts-panel-title i {
    color: var(--math-primary);
}
.math-ts-panel-sub,
.math-ts-panel-tzhint {
    font-weight: 500;
    font-size: 11.5px;
    color: var(--math-text-muted);
}
.math-ts-panel-tzhint {
    padding: 1px 8px;
    background: rgba(14, 165, 233, 0.1);
    color: #0369a1;
    border-radius: var(--math-radius-full);
    border: 1px solid rgba(14, 165, 233, 0.22);
}

/* ─── Calendar breakdown grid ───────────────────────── */
.math-ts-cal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.math-ts-cal-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--math-surface-alt);
    border: 1px solid var(--math-border-light);
    border-radius: 8px;
}
.math-ts-cal-cell.cal-y,
.math-ts-cal-cell.cal-m,
.math-ts-cal-cell.cal-d {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.22);
}
.math-ts-cal-cell.cal-h,
.math-ts-cal-cell.cal-mi,
.math-ts-cal-cell.cal-s {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}
.math-ts-cal-cell.cal-w,
.math-ts-cal-cell.cal-wk {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}
.math-ts-cal-k {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--math-text-muted);
}
.math-ts-cal-v {
    font-size: 16px;
    font-weight: 700;
    color: var(--math-text);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.math-ts-cal-x {
    font-size: 11px;
    color: var(--math-text-muted);
    font-style: italic;
}

/* ─── Formats list ──────────────────────────────────── */
.math-ts-fmt-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.math-ts-fmt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--math-surface-alt);
    border: 1px solid var(--math-border-light);
    border-radius: 6px;
}
.math-ts-fmt-row.is-primary {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
}
.math-ts-fmt-k {
    flex: 0 0 150px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--math-text-muted);
}
.math-ts-fmt-row.is-primary .math-ts-fmt-k {
    color: #047857;
}
.math-ts-fmt-v {
    flex: 1 1 200px;
    background: transparent;
    padding: 0;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--math-text);
    word-break: break-all;
}
.math-ts-fmt-row.is-primary .math-ts-fmt-v {
    color: #047857;
}

/* ─── Timezones grid ────────────────────────────────── */
.math-ts-tz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.math-ts-tz-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--math-surface-alt);
    border: 1px solid var(--math-border-light);
    border-radius: 8px;
    transition: all var(--math-transition);
}
.math-ts-tz-cell.is-active {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}
.math-ts-tz-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--math-text-muted);
}
.math-ts-tz-cell.is-active .math-ts-tz-label {
    color: #0369a1;
}
.math-ts-tz-value {
    background: transparent;
    padding: 0;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--math-text);
}
.math-ts-tz-offset {
    font-size: 11px;
    color: var(--math-text-muted);
}

/* ─── Relative-to-now scale ─────────────────────────── */
.math-ts-rel-human {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--math-surface-alt);
    border: 1px solid var(--math-border-light);
    border-radius: 8px;
    font-size: 14px;
}
.math-ts-rel-human[data-direction="past"] {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
}
.math-ts-rel-human[data-direction="future"] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
}
.math-ts-rel-human[data-direction="now"] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}
.math-ts-rel-icon {
    font-size: 16px;
    color: var(--math-primary);
}
.math-ts-rel-human[data-direction="past"] .math-ts-rel-icon { color: #475569; }
.math-ts-rel-human[data-direction="future"] .math-ts-rel-icon { color: #047857; }
.math-ts-rel-human[data-direction="now"] .math-ts-rel-icon { color: #b91c1c; }
.math-ts-rel-text {
    font-weight: 700;
    color: var(--math-text);
}
.math-ts-rel-seconds {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--math-text-muted);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.math-ts-rel-scale {
    padding-top: 6px;
}
.math-ts-rel-track {
    position: relative;
    height: 6px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.25), rgba(16, 185, 129, 0.25));
    border-radius: 3px;
    margin: 26px 8px 32px 8px;
}
.math-ts-rel-mark {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.math-ts-rel-mark-pin {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--math-border);
}
.math-ts-rel-mark-now .math-ts-rel-mark-pin {
    background: #ef4444;
}
.math-ts-rel-mark-ts .math-ts-rel-mark-pin {
    background: var(--math-primary);
}
.math-ts-rel-mark-ts[data-direction="past"] .math-ts-rel-mark-pin {
    background: #64748b;
}
.math-ts-rel-mark-ts[data-direction="future"] .math-ts-rel-mark-pin {
    background: #10b981;
}
.math-ts-rel-mark-label {
    position: absolute;
    top: 14px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--math-text-muted);
    white-space: nowrap;
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--math-border-light);
}
.math-ts-rel-mark-now .math-ts-rel-mark-label {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.3);
}
.math-ts-rel-mark-ts .math-ts-rel-mark-label {
    color: var(--math-primary-hover);
    border-color: rgba(99, 102, 241, 0.3);
    top: -22px;
}
.math-ts-rel-endpoints {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--math-text-muted);
    padding: 0 4px;
}
.math-ts-rel-endpoint i {
    margin-right: 4px;
    color: var(--math-primary);
    opacity: 0.7;
}
.math-ts-rel-endpoint em {
    font-style: italic;
    color: var(--math-primary-hover);
    margin-left: 2px;
}

/* ─── Unix Timestamp — responsive ──────────────────── */
@media (max-width: 640px) {
    .math-ts-summary-head {
        flex-direction: column;
        align-items: stretch;
    }
    .math-ts-summary-main {
        flex: 0 0 auto;
    }
    .math-ts-summary-value {
        font-size: 16px;
    }
    .math-ts-cal-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 6px;
    }
    .math-ts-cal-cell {
        padding: 8px 10px;
    }
    .math-ts-cal-v {
        font-size: 14px;
    }
    .math-ts-fmt-k {
        flex: 1 1 100%;
    }
    .math-ts-fmt-v {
        font-size: 12px;
    }
    .math-ts-rel-seconds {
        margin-left: 0;
        flex: 1 1 100%;
    }
}