/* ==========================================================================
   Liquid Glass Kit — additive extension of glass.css's existing design
   system (reuses its tokens: --accent, --glass-bg-*, --radius-*, etc.).
   Nothing here renames or overrides an existing class; new components use
   an "lk-" prefix so they can never collide with anything already in use.
   Reference: https://codepen.io/coliss/pen/dPprmVo ("Liquid Glass UI Kit").
   ========================================================================== */

:root {
    --lk-aqua: #22d3ee;
    --lk-violet: #a78bfa;
    --lk-rose: #fb7185;
    --lk-amber: #fbbf24;
    --lk-green: #34d399;

    /* Falls back to surface-tension if header.php's inline :root block
       (which sets the admin's actual chosen animation) hasn't loaded for
       any reason — .glass-float should never be left with no animation. */
    --lk-popup-anim-name: lk-surface-tension;
    --lk-popup-anim-duration: 0.55s;
    --lk-popup-anim-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Ghost button variant (glass.css has .btn-glass/.btn-accent/.btn-danger already) ---- */
.btn-ghost { background: transparent; border-color: var(--glass-border); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* ---- Styled checkbox / radio --------------------------------------------- */
.lk-check, .lk-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.lk-check input, .lk-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lk-check .box, .lk-radio .box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--glass-border-strong);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.lk-check .box { border-radius: 6px; }
.lk-radio .box { border-radius: 50%; }
.lk-check input:checked ~ .box, .lk-radio input:checked ~ .box { background: var(--accent); border-color: var(--accent); }
.lk-check .box::after { content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform 0.15s ease; margin-top: -2px; }
.lk-check input:checked ~ .box::after { transform: rotate(-45deg) scale(1); }
.lk-radio .box::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.15s ease; }
.lk-radio input:checked ~ .box::after { transform: scale(1); }

/* ---- Elegant display heading, matching the reference's serif titles ---- */
.lk-display-font {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
}

/* ---- The one shared entrance-animation hook ---------------------------
   Applied to every popup/float (modal, dropdown menu, toast, notification,
   lightbox, confirm dialog). Swapping which of the 14 keyframes plays is a
   single CSS custom property (set once in header.php from the admin's
   setting) — components never need their own per-animation CSS. ---- */
.glass-float {
    animation-name: var(--lk-popup-anim-name);
    animation-duration: var(--lk-popup-anim-duration);
    animation-timing-function: var(--lk-popup-anim-easing);
    animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
    .glass-float { animation: none !important; }
}

/* ---- The 14 Liquid Glass Kit animations --------------------------------
   Each is a one-shot entrance (0% = hidden/offset, 100% = settled) so
   .glass-float can use any of them interchangeably. The design-kit preview
   page runs these on loop (iteration-count/direction set there, same
   keyframes) purely for browsing — real usage is always one-shot. ---- */

@keyframes lk-liquid-morph {
    0% { opacity: 0; transform: scale(0.85); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    60% { border-radius: 35% 65% 65% 35% / 45% 55% 45% 55%; }
    100% { opacity: 1; transform: scale(1); border-radius: var(--radius-lg); }
}

@keyframes lk-shimmer {
    0% { opacity: 0; background-position: 200% 0; }
    100% { opacity: 1; background-position: -200% 0; }
}

@keyframes lk-float {
    0% { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes lk-refraction {
    0% { opacity: 0; transform: scale(0.94) skewX(6deg); filter: hue-rotate(25deg) saturate(1.4); }
    100% { opacity: 1; transform: scale(1) skewX(0deg); filter: hue-rotate(0deg) saturate(1); }
}

@keyframes lk-ripple {
    0% { opacity: 0; transform: scale(0.6); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 28px rgba(255, 255, 255, 0); }
}

@keyframes lk-edge-glow {
    0% { opacity: 0; box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); border-color: transparent; }
    40% { opacity: 1; box-shadow: 0 0 24px 4px rgba(139, 92, 246, 0.55); }
    100% { opacity: 1; box-shadow: var(--shadow-glass); border-color: var(--glass-border); }
}

@keyframes lk-breathing-blur {
    0% { opacity: 0; filter: blur(18px); transform: scale(1.04); }
    100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes lk-depth-shift {
    0% { opacity: 0; transform: perspective(800px) translateZ(-120px) rotateX(8deg) scale(0.9); }
    100% { opacity: 1; transform: perspective(800px) translateZ(0) rotateX(0deg) scale(1); }
}

@keyframes lk-cascade-reveal {
    0% { opacity: 0; clip-path: inset(0 0 100% 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes lk-prism-hue-shift {
    0% { opacity: 0; filter: hue-rotate(180deg) saturate(2); transform: scale(0.92); }
    100% { opacity: 1; filter: hue-rotate(0deg) saturate(1); transform: scale(1); }
}

@keyframes lk-liquid-drain {
    0% { opacity: 0; clip-path: circle(0% at 50% 100%); }
    100% { opacity: 1; clip-path: circle(150% at 50% 100%); }
}

/* The default — a soft droplet-settle with a slight overshoot, like
   surface tension pulling the shape back into place after it lands. */
@keyframes lk-surface-tension {
    0% { opacity: 0; transform: scale(0.82); }
    55% { opacity: 1; transform: scale(1.035); }
    80% { transform: scale(0.99); }
    100% { opacity: 1; transform: scale(1); }
}

/* Modeled on Apple's actual Liquid Glass material (WWDC25 "Meet Liquid
   Glass"; developer.apple.com/documentation/technologyoverviews/adopting-liquid-glass),
   cross-checked against a screen recording of a real Liquid Glass context
   menu opening: it doesn't grow as a flat rectangle - it starts as a small,
   heavily-blurred near-circular "lens" (mimicking how the material "flexes,
   glows, and distorts" and shows "more pronounced lensing and refraction"
   while it's still compact and in motion), then rapidly clarifies as it
   settles into its final rounded-rect shape and comes into sharp focus,
   with a slight overshoot on the way in - the springy, "alive" quality
   Apple's own materials description calls out. None of the other 12 use
   filter: blur() together with a border-radius shape change, which is what
   actually reads as "glass forming" rather than just fading/scaling in. */
@keyframes lk-lens-bloom {
    0% { opacity: 0; transform: scale(0.5); border-radius: 50%; filter: blur(16px); }
    50% { opacity: 1; transform: scale(1.05); border-radius: 40%; filter: blur(3px); }
    100% { opacity: 1; transform: scale(1); border-radius: var(--radius-lg); filter: blur(0); }
}

/* A one-shot version of the same elastic overshoot curve as glass.css's
   .btn-glass press animation, so a popup's own entrance can "feel" like the
   same material as the buttons inside it. Every other animation here shares
   one fixed duration+easing (the :root vars above) and gets its distinct
   shape purely from its own keyframe stops - .btn-glass's press instead
   used a CSS linear() easing function with these exact stop values driving
   a two-state transition (rest <-> pressed). Baked directly as scale()
   keyframe stops here instead, since linear()'s values already ARE "how far
   along toward the target, as a fraction, at this point in time" - exactly
   what an entrance's scale needs at each stop. */
@keyframes lk-elastic-pop {
    0% { opacity: 0; transform: scale(0); }
    0.9% { transform: scale(0.01); }
    1.8% { transform: scale(0.037); }
    3.8% { opacity: 1; transform: scale(0.148); }
    11% { transform: scale(0.762); }
    14.2% { transform: scale(0.985); }
    15.7% { transform: scale(1.062); }
    17.3% { transform: scale(1.125); }
    18.9% { transform: scale(1.167); }
    20.5% { transform: scale(1.191); }
    22.5% { transform: scale(1.199); }
    24.8% { transform: scale(1.185); }
    35.7% { transform: scale(1.012); }
    39% { transform: scale(0.979); }
    42.4% { transform: scale(0.963); }
    47% { transform: scale(0.963); }
    57.7% { transform: scale(0.997); }
    64% { transform: scale(1.007); }
    100% { opacity: 1; transform: scale(1); }
}

/* Plays lk-elastic-pop directly, independent of the admin's chosen popup
   animation (.glass-float above) - for content that should always feel
   elastic/bouncy specifically because IT changed, not because it's a
   popup. Any fresh DOM node given this class animates in the instant it's
   inserted (that's just how CSS animations work on new elements), so an
   innerHTML swap - e.g. the personal calendar's Week/Day card re-rendering
   after switching days - replays it automatically with no JS retrigger
   logic needed. animation-timing-function is linear rather than the popup
   default cubic-bezier since lk-elastic-pop's stops already ARE the curve
   (ported from a linear() easing function - see its own comment above); an
   extra cubic-bezier between those stops would subtly re-smooth a curve
   that's already exactly right. */
.lk-elastic-enter { animation: lk-elastic-pop 450ms linear both; }
@media (prefers-reduced-motion: reduce) {
    .lk-elastic-enter { animation: none; }
}

/* ---- Animation showcase swatch (design-kit page only) ------------------ */
.lk-anim-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.75rem 1rem;
    text-align: center;
}
.lk-anim-swatch .lk-orb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lk-aqua), var(--accent));
    animation-duration: 1.8s;
    animation-timing-function: var(--lk-popup-anim-easing);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.lk-anim-swatch .label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary); }

/* ---- Accordion ----------------------------------------------------------- */
.lk-accordion { display: flex; flex-direction: column; gap: 0.6rem; }
.lk-accordion-item { overflow: hidden; }
.lk-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.lk-accordion-chevron {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}
.lk-accordion-item.is-open .lk-accordion-chevron { transform: rotate(180deg); background: var(--accent); }
/* grid-template-rows 0fr->1fr, not max-height: animating a fixed max-height
   causes layout thrash and either clips tall content or leaves dead space
   under short content. The grid-row trick animates smoothly to the panel's
   real content height either way. */
.lk-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.lk-accordion-item.is-open .lk-accordion-panel { grid-template-rows: 1fr; }
.lk-accordion-panel-inner { min-height: 0; overflow: hidden; padding: 0 1.25rem 1.1rem; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; }

/* ---- Stepper -------------------------------------------------------------- */
.lk-stepper-h { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.lk-step { display: flex; align-items: center; gap: 0.6rem; }
.lk-step-circle {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    border: 2px solid var(--glass-border-strong);
    color: var(--text-secondary);
    background: var(--glass-bg-regular);
}
.lk-step.is-done .lk-step-circle { border-color: var(--lk-green); color: var(--lk-green); }
.lk-step.is-active .lk-step-circle { border-color: var(--accent); color: var(--text-primary); background: var(--accent-soft); }
.lk-step-label { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); }
.lk-step.is-active .lk-step-label, .lk-step.is-done .lk-step-label { color: var(--text-primary); }
.lk-step-connector { width: 48px; height: 2px; background: var(--glass-border-strong); margin: 0 0.5rem; }
.lk-step.is-done + .lk-step-connector { background: var(--lk-green); }

.lk-stepper-v { display: flex; flex-direction: column; }
.lk-stepper-v .lk-step { align-items: flex-start; }
.lk-stepper-v .lk-step-connector-v { width: 2px; height: 32px; background: var(--glass-border-strong); margin-left: 16px; }
.lk-stepper-v .lk-step.is-done ~ .lk-step-connector-v { background: var(--lk-green); }

/* ---- Data Table ------------------------------------------------------------ */
.lk-table-wrap { overflow-x: auto; }
.lk-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.lk-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.lk-table th:hover { color: var(--text-primary); }
.lk-table td { padding: 0.75rem 1rem; font-size: 0.88rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.lk-table tbody tr { transition: background 0.15s ease; }
.lk-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
.lk-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.lk-status-badge.online { background: rgba(52, 211, 153, 0.16); color: var(--lk-green); }
.lk-status-badge.away { background: rgba(251, 191, 36, 0.16); color: var(--lk-amber); }
.lk-status-badge.offline { background: rgba(139, 92, 246, 0.16); color: var(--lk-violet); }

/* ---- Toast / Snackbar ------------------------------------------------------ */
.lk-toast-region {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 340px;
}
.lk-toast {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.lk-toast-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.lk-toast.success .lk-toast-icon { background: rgba(52, 211, 153, 0.18); color: var(--lk-green); }
.lk-toast.error .lk-toast-icon { background: rgba(248, 113, 113, 0.18); color: var(--danger); }
.lk-toast.warning .lk-toast-icon { background: rgba(251, 191, 36, 0.18); color: var(--lk-amber); }
.lk-toast.info .lk-toast-icon { background: rgba(96, 165, 250, 0.18); color: var(--info); }

/* ---- Select (searchable, replaces a native <select>) -----------------------
   A native <select>'s closed box can be fully restyled with CSS (.input-glass
   already does this) but the OPEN option-list popup is drawn by the OS/
   browser chrome in every browser - no CSS can touch its background, text
   color, or scrollbar. That's what left the Popup Animation select (and
   every other <select> on the site) showing a plain white list even though
   everything else is in the dark glass theme. js/liquid-kit.js's
   lkEnhanceSelect() progressively enhances a <select data-lk-select> with
   this fully CSS-styleable markup instead - same approach already proven on
   IBOS (js/neu-dropdown.js), reskinned to the glass tokens here. Named
   .lk-select rather than .lk-dropdown so it can't collide with the unrelated
   .lk-dropdown action-menu component (button + menu) already above. */
.lk-select { position: relative; width: 100%; }

.lk-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.lk-select.open .lk-select-trigger,
.lk-select-trigger:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.lk-select-search {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none;
    padding: 0 !important;
    color: var(--text-primary);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}
.lk-select-search::placeholder { color: var(--text-tertiary); }

.lk-select-trigger svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}
.lk-select.open .lk-select-trigger svg { transform: rotate(180deg); }

.lk-select-panel {
    display: none;
    /* Fixed, not absolute: a select inside any .glass card (overflow:hidden
       by design, see .glass in glass.css) had its panel silently clipped
       whenever the select sat near the card's bottom edge - the list was
       there in the DOM but invisible/unreachable. Same fix already applied
       to header.php's nav-dropdown-menu for the same reason. top/left/width
       are computed and set in JS (lkEnhanceSelect's positionPanel()), which
       also flips the panel above the trigger when there isn't room below. */
    position: fixed;
    max-height: 260px;
    overflow-y: auto;
    /* Above both .lk-modal-overlay and .lk-toast-region (both 300) - a
       select can live inside a modal (e.g. the New Gift Exchange form's
       exclusion-pair rows) and must still render on top of it now that
       position:fixed makes it a sibling of the modal in the root stacking
       context instead of a clipped descendant. */
    z-index: 320;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border-strong);
    /* Same frosted-glass formula as .action-sheet (family-share.php) and
       every .glass card, for a consistent look across every dropdown/popup
       site-wide - previously a separate near-opaque dark panel. */
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    box-shadow: var(--shadow-glass-lg);

    scrollbar-width: none;
}
/* Own class, not a .lk-select.open descendant selector: the panel is moved
   to a direct child of <body> at enhance time (see lkEnhanceSelect() -
   position:fixed alone isn't enough to escape a .glass ancestor, because
   .glass's backdrop-filter makes Chromium treat it as a containing block
   for fixed descendants too, same as `filter` does - so a fixed panel left
   nested inside the card was still being positioned/clipped relative to
   the card, not the viewport, even after the position:fixed change). */
.lk-select-panel.open { display: block; }

.lk-select-panel::-webkit-scrollbar { display: none; width: 0; }

.lk-select-option {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.88rem;
    cursor: pointer;
}
.lk-select-option:hover,
.lk-select-option.active { background: var(--glass-border-strong); }
.lk-select-option.empty { color: var(--text-tertiary); text-align: center; cursor: default; }
.lk-select-option.empty:hover { background: none; }

/* ---- Badges & Tags --------------------------------------------------------- */
.lk-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.lk-badge.aqua { background: rgba(34, 211, 238, 0.16); color: var(--lk-aqua); }
.lk-badge.violet { background: rgba(167, 139, 250, 0.18); color: var(--lk-violet); }
.lk-badge.rose { background: rgba(251, 113, 133, 0.18); color: var(--lk-rose); }
.lk-badge.amber { background: rgba(251, 191, 36, 0.16); color: var(--lk-amber); }
.lk-badge.green { background: rgba(52, 211, 153, 0.16); color: var(--lk-green); }
.lk-badge.gray { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.lk-tag { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--glass-bg-regular); border: 1px solid var(--glass-border); color: var(--text-secondary); }

/* ---- Notifications list ----------------------------------------------------- */
.lk-notification-list { display: flex; flex-direction: column; gap: 0.6rem; }
.lk-notification {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    transition: transform 0.2s ease;
}
.lk-notification:hover { transform: translateX(-4px); }
.lk-notification-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lk-aqua), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
}
.lk-notification-body { flex: 1; min-width: 0; }
.lk-notification-title { font-size: 0.88rem; font-weight: 700; }
.lk-notification-sub { font-size: 0.78rem; color: var(--text-tertiary); }
.lk-notification-time { font-size: 0.72rem; color: var(--text-tertiary); flex-shrink: 0; }

/* ---- Modal ------------------------------------------------------------------ */
.lk-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(5, 5, 10, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lk-modal { width: 100%; max-width: 480px; padding: 2rem; }

/* ---- Skeleton Loader ---------------------------------------------------------- */
.lk-skeleton-block {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.14) 37%, rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: lk-skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes lk-skeleton-sweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .lk-skeleton-block { animation: none; } }

/* ---- Switcher (segmented control with a sliding pill indicator) ------------
   Adapted from a "Liquid Glass" CodePen switcher, with the glide itself now
   ported from a reference liquid-glass dock prototype's velocity-driven
   squash/stretch: js/liquid-kit.js's lkInitSwitcher() measures the active
   option's real getBoundingClientRect() (so it works with any number of
   options at any widths, not just fixed columns) and drives the pill's
   translateX/width/scale every animation frame via spring physics instead of
   a CSS transition - the faster the pill is currently moving, the more it
   stretches toward the direction of travel and thins vertically, relaxing
   back to 1:1 as it arrives. First use: personal-calendar's Month/Week/Day/
   Schedule tabs, which are real links causing a full page reload per tab -
   the JS carries the pill's position across that reload via sessionStorage
   so the glide still reads as one continuous motion instead of restarting
   cold. All of width/transform/scale are applied as inline styles from JS,
   not CSS, since they change every frame. */
.lk-switcher {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.3rem;
}

.lk-switcher__toggle {
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 0;
    border-radius: 999px;
    z-index: 0;
    background: var(--glass-bg-strong);
    box-shadow:
        inset 0 0 0 1px var(--glass-border-strong),
        inset 2px 1px 0 -1px rgba(255, 255, 255, 0.55),
        inset -1.5px -1px 0 -1px rgba(255, 255, 255, 0.3),
        0 3px 6px rgba(0, 0, 0, 0.25);
    transform-origin: center center;
    pointer-events: none;
}

.lk-switcher__option {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    text-align: center;
    transition: color 160ms ease;
}
.lk-switcher__option:hover { color: var(--text-primary); }
.lk-switcher__option.is-active { color: var(--text-primary); }

/* prefers-reduced-motion is handled in JS (lkInitSwitcher skips the spring
   glide and jumps straight to the target) since the animation itself is now
   driven by inline styles every frame, not a CSS transition/keyframe. */

/* ---- Chips ------------------------------------------------------------------- */
.lk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--glass-bg-regular);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lk-chip.is-selected { background: var(--accent); border-color: transparent; color: #fff; }
.lk-chip .lk-chip-remove { background: none; border: none; color: inherit; opacity: 0.7; cursor: pointer; font-size: 0.9em; line-height: 1; padding: 0; }
.lk-chip .lk-chip-remove:hover { opacity: 1; }

/* ---- Avatar Group -------------------------------------------------------------- */
.lk-avatar-group { display: flex; align-items: center; }
.lk-avatar-group .lk-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bg-base);
    margin-left: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--glass-bg-strong);
    overflow: hidden;
}
.lk-avatar-group .lk-avatar:first-child { margin-left: 0; }
.lk-avatar-group.sm .lk-avatar { width: 30px; height: 30px; margin-left: -9px; font-size: 0.68rem; }
.lk-avatar-group.lg .lk-avatar { width: 52px; height: 52px; margin-left: -15px; font-size: 0.88rem; }

/* ---- Breadcrumb ------------------------------------------------------------------ */
.lk-breadcrumb { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; }
.lk-breadcrumb a, .lk-breadcrumb span { font-size: 0.85rem; color: var(--text-secondary); }
.lk-breadcrumb a:hover { color: var(--text-primary); }
.lk-breadcrumb .current { color: var(--text-primary); font-weight: 700; }
.lk-breadcrumb .sep { color: var(--text-tertiary); font-size: 0.75rem; }

/* ---- Pill nav / tab panels ----------------------------------------------------------- */
.lk-pill-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem; }
.lk-pill-nav [data-lk-tab] {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.lk-pill-nav [data-lk-tab].is-active { background: var(--glass-bg-strong); color: var(--text-primary); }
.lk-tab-panel { padding: 1.5rem; }

/* ---- Dropdown menu ----------------------------------------------------------------- */
.lk-dropdown { position: relative; display: inline-block; }
.lk-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 190px;
    padding: 0.4rem;
    z-index: 60;
}
.lk-dropdown-menu a, .lk-dropdown-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.lk-dropdown-menu a:hover, .lk-dropdown-menu button:hover { background: rgba(255, 255, 255, 0.08); }

@media (max-width: 700px) {
    .lk-table { min-width: 480px; }
    .lk-toast-region { left: 1rem; right: 1rem; max-width: none; }
}

/* ---- Comments & Reactions (js/comments.js) --------------------------------- */
.fam-comments { display: flex; flex-direction: column; gap: 0.85rem; }
.fam-reactions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fam-reaction-btn {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-regular);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.fam-reaction-btn:hover { background: var(--glass-bg-strong); }
.fam-reaction-btn.is-active { background: var(--accent-soft); border-color: var(--accent); }

.fam-star-rating { display: flex; align-items: center; gap: 0.15rem; }
.fam-star-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.1s, transform 0.1s;
}
.fam-star-btn:hover { transform: scale(1.1); }
.fam-star-btn.is-filled { color: #f5b50a; }
.fam-star-summary { margin-left: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); }
.fam-star-remove {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    text-decoration: underline;
    cursor: pointer;
}
.fam-star-remove:hover { color: var(--text-secondary); }

.fam-comment-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 280px; overflow-y: auto; }
.fam-comments-empty { color: var(--text-tertiary); font-size: 0.85rem; margin: 0; }
.fam-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--glass-bg-regular);
}
.fam-comment-body { flex: 1; min-width: 0; }
.fam-comment-author { font-weight: 700; font-size: 0.82rem; }
.fam-comment-time { color: var(--text-tertiary); font-size: 0.72rem; margin-left: 0.4rem; }
.fam-comment-body p { margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.fam-comment-delete { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 0.8rem; padding: 0.2rem; flex-shrink: 0; }
.fam-comment-delete:hover { color: var(--danger); }
.fam-comment-form { display: flex; gap: 0.5rem; }
.fam-comment-form input { flex: 1; }

/* ---- Themed dialog (lkConfirm / lkPrompt / lkAlert in js/liquid-kit.js) ------- */
.lk-dialog-overlay { z-index: 5000; }
.lk-dialog { max-width: 420px; padding: 1.6rem; }
.lk-dialog-title { margin: 0 0 0.55rem; font-size: 1.15rem; }
.lk-dialog-message { margin: 0; white-space: pre-line; color: var(--text-secondary, rgba(255, 255, 255, 0.75)); font-size: 0.95rem; line-height: 1.5; }
.lk-dialog-input { width: 100%; margin-top: 0.9rem; }
.lk-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.lk-dialog-actions [hidden] { display: none; }
.lk-dialog-overlay[hidden] { display: none; }

/* ---- Install-app drop-down (js/install-prompt.js) ----------------------------
   Slides down from the top on phones. Below .lk-modal-overlay (300) so a real
   dialog always wins. The card gets a darker base than plain .glass-strong
   because it floats over live page content with no dimmed backdrop. */
.fam-install {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 290;
    display: flex;
    justify-content: center;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0;
    pointer-events: none;
    transform: translateY(calc(-100% - 2rem));
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.fam-install.is-open { transform: translateY(0); opacity: 1; }
.fam-install-card {
    pointer-events: auto;
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 1.1rem 1.15rem 1rem;
    background: rgba(20, 18, 30, 0.86);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.fam-install-close {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.fam-install-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.fam-install-head { display: flex; align-items: center; gap: 0.8rem; padding-right: 2rem; }
.fam-install-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.fam-install-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.fam-install-sub { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 0.1rem; }
.fam-install-text { margin: 0.8rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); }
.fam-install-steps { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.fam-install-steps li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.88rem; line-height: 1.4; color: var(--text-secondary); }
.fam-install-steps strong { color: var(--text-primary); font-weight: 600; }
.fam-install-hint { color: var(--text-tertiary); font-size: 0.8rem; }
.fam-install-ico {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--text-primary);
}
.fam-install-ico-text { font-size: 0.72rem; font-weight: 700; }
.fam-install-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.fam-install-actions .btn-glass { padding: 0.65rem 1.4rem; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
    .fam-install { transition: opacity 0.2s ease; transform: none; }
}