/**
 * SNAPSMACK - Archive Calendar Engine Styles
 *
 * Panel slides in from the right when the archive layout is 'croppedwithcalendar'.
 * Colours are resolved from the active skin's CSS custom properties, with
 * hardcoded dark fallbacks for skins that don't declare them.
 *
 * Skin colour hooks (declare in skin's :root to override):
 *   --cal-bg        panel background       (falls back to --bg, then #111)
 *   --cal-text      primary text           (falls back to --text, then #ccc)
 *   --cal-text-dim  days with no posts     (falls back to --text-dim, then #444)
 *   --cal-border    dividers / grid lines  (falls back to --border, then #2a2a2a)
 *   --cal-label     section labels         (falls back to --dim, then #777)
 *   --cal-active    active / selected      (falls back to --accent, then #fff)
 *   --cal-hover-bg  day hover background   (falls back to rgba(255,255,255,.08))
 *   --cal-today     today outline colour   (falls back to --cal-label, then #555)
 *   --cal-range-bg  range highlight fill   (falls back to rgba(255,255,255,.06))
 *   --cal-range-start-bg  start cell fill  (falls back to --accent, then #fff)
 */

/*
 * SNAPSMACK_EOF_HEADER
 * Last non-empty line of this file MUST be the canonical CSS EOF
 * marker: slash-star, space, five equals, space, the literal string
 * 'SNAPSMACK EOF', space, five equals, space, star-slash.
 * (Authoritative byte sequence: tools/check-eof.py EOF_MARKERS['.css'].)
 * Missing or different = truncated/corrupted. Restore before saving.
 */


/* ── Variable resolution: skin vars → cal vars → hardcoded fallback ─────── */

#smack-cal-panel {
    /* Variable resolution chain: panel-specific (--cal-*), then admin-overridable
     * (--page-bg etc.), then standard skin convention (--bg-primary etc.),
     * then short legacy names (--bg, --text), then a hardcoded dark fallback.
     * This is what makes the calendar panel inherit the host skin's palette
     * automatically without each skin needing to declare --cal-* hooks. */
    --_cal-bg:       var(--cal-bg,       var(--page-bg,       var(--bg-primary,   var(--bg,       #111))));
    --_cal-text:     var(--cal-text,     var(--text-primary,  var(--text,         #ccc)));
    --_cal-text-dim: var(--cal-text-dim, var(--text-secondary, var(--text-dim,    #444)));
    --_cal-border:   var(--cal-border,   var(--border-color,  var(--border,       #2a2a2a)));
    --_cal-label:    var(--cal-label,    var(--text-secondary, var(--dim,         #777)));
    --_cal-active:   var(--cal-active,   var(--accent-color,  var(--accent,       #fff)));
    --_cal-hover-bg: var(--cal-hover-bg, rgba(255,255,255,.08));
    --_cal-today:    var(--cal-today,    var(--cal-label,     #555));
    --_cal-range-bg: var(--cal-range-bg, rgba(255,255,255,.06));
    --_cal-range-start-bg: var(--cal-range-start-bg, var(--accent-color, var(--accent, rgba(255,255,255,.18))));
}

/* ── Overlay — transparent backdrop, closes panel on click-outside ───────── */

#smack-cal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1199; /* one below the panel */
    display: none;
    cursor: default;
}

#smack-cal-overlay.smack-cal-overlay--visible {
    display: block;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */

#smack-cal-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 268px;
    max-width: 92vw;
    z-index: 1200;
    overflow-y: auto;
    overscroll-behavior: contain;

    background:  var(--_cal-bg);
    color:       var(--_cal-text);
    border-left: 1px solid var(--_cal-border);

    display: flex;
    flex-direction: column;

    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.2,.9,.2,1);
    will-change: transform;
}

#smack-cal-panel.smack-cal-panel--open {
    transform: translateX(0);
}

/* ── Left-side variant ───────────────────────────────────────────────────── */

#smack-cal-panel.smack-cal--left {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--_cal-border);
    transform: translateX(-100%);
}

#smack-cal-panel.smack-cal--left.smack-cal-panel--open {
    transform: translateX(0);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.smack-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--_cal-border);
    flex-shrink: 0;
}

.smack-cal-title {
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--_cal-label);
}

.smack-cal-close {
    background: none;
    border: none;
    color: var(--_cal-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.smack-cal-close:hover { opacity: 1; }

/* ── Range hint bar ──────────────────────────────────────────────────────── */

.smack-cal-range-hint {
    padding: 7px 16px;
    font-size: 0.65em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--_cal-label);
    border-bottom: 1px solid var(--_cal-border);
    flex-shrink: 0;
    line-height: 1.4;
}

/* ── Months container ────────────────────────────────────────────────────── */

.smack-cal-months {
    padding: 14px 14px 4px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.smack-cal-loading-msg {
    font-size: 0.72em;
    color: var(--_cal-label);
    padding: 8px 2px;
}

.smack-cal-error {
    font-size: 0.72em;
    color: var(--_cal-label);
    padding: 8px 2px;
    font-style: italic;
}

/* ── Month block ─────────────────────────────────────────────────────────── */

.smack-cal-month {
    margin-bottom: 18px;
}

.smack-cal-month-name {
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--_cal-label);
    margin-bottom: 7px;
}

/* ── Calendar grid ───────────────────────────────────────────────────────── */

.smack-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.smack-cal-dow {
    font-size: 0.58em;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 2px 0 5px;
    color: var(--_cal-label);
    text-transform: uppercase;
}

.smack-cal-day {
    font-size: 0.72em;
    text-align: center;
    padding: 5px 2px;
    border-radius: 3px;
    line-height: 1.2;
    color: var(--_cal-text-dim);
    transition: background 0.1s;
    user-select: none;
}

.smack-cal-day--empty {
    visibility: hidden;
}

.smack-cal-day--today {
    outline: 1px solid var(--_cal-today);
    outline-offset: -2px;
}

.smack-cal-day--has-post {
    color: var(--_cal-text);
    cursor: pointer;
    font-weight: 600;
}

.smack-cal-day--has-post:hover {
    background: var(--_cal-hover-bg);
    color: var(--_cal-active);
}

/* ── Range selection states ──────────────────────────────────────────────── */

.smack-cal-day--range-start {
    background: var(--_cal-range-start-bg);
    color: var(--_cal-active);
    border-radius: 3px;
    font-weight: 700;
}

.smack-cal-day--in-range-preview {
    background: var(--_cal-range-bg);
    color: var(--_cal-text);
    border-radius: 0;
}

/* Start cell keeps its rounded look even when also in-range-preview */
.smack-cal-day--range-start.smack-cal-day--in-range-preview {
    border-radius: 3px 0 0 3px;
}

/* ── In range-mode: keep pointer cursor for consistency ─────────────────── */
.smack-cal-range-mode .smack-cal-day--has-post {
    cursor: pointer;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.smack-cal-nav {
    display: flex;
    justify-content: space-between;
    padding: 6px 14px 14px;
    border-top: 1px solid var(--_cal-border);
    flex-shrink: 0;
}

.smack-cal-nav-btn {
    background: none;
    border: none;
    color: var(--_cal-label);
    cursor: pointer;
    font-size: 0.65em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 0;
    transition: color 0.15s;
}

.smack-cal-nav-btn:hover    { color: var(--_cal-active); }
.smack-cal-nav-btn:disabled { opacity: 0.2; cursor: default; }
/* ===== SNAPSMACK EOF ===== */