/* The Door - Community Highlights as a FIELD LOG. Cold, crafted, no WebGL.
   Replaces the cave's Three.js octet-truss carousel. Each highlight is a logged entry
   in a damp case file: a chiseled wet-stone plate with a monospace ENTRY / date stamp
   (the cold "steel data" register), the title as an ithildin inscription that resolves
   when you lean in, a foxfire entry-seam down the left edge (the door's seam motif,
   recurring), and a damp moss bloom in the corner. Uses base.css tokens. */

.hl-carousel { position: relative; }

.hl-log {
    position: relative;
    padding: 1.5rem 1.75rem 1.5rem 2rem;
    background: linear-gradient(180deg, rgba(25,29,21,0.55) 0%, rgba(14,22,17,0.5) 100%);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(48,82,59,0.35);
    clip-path: polygon(0 9px, 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
    overflow: hidden;
}
/* The foxfire entry-seam: the door's invite seam, recurring as the mark of a logged sighting. */
.hl-log::before {
    content: '';
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 2px;
    background: var(--glow);
    box-shadow: 0 0 8px rgba(75,186,219,0.5), 0 0 16px rgba(75,186,219,0.22);
    opacity: 0.6;
}
/* Damp moss bloom, lower-right; impressionist, not a figurative sticker. */
.hl-log::after {
    content: '';
    position: absolute;
    right: -30px; bottom: -30px;
    width: 150px; height: 150px;
    background: radial-gradient(circle at 65% 65%, rgba(48,82,59,0.26), transparent 68%);
    pointer-events: none;
}

.hl-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fog-dim);
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 1;
}
.hl-index { color: var(--glow); text-shadow: 0 0 8px rgba(75,186,219,0.28); }

/* Title: ithildin. Faint at rest, resolves into moonlight under presence. */
.hl-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(205,215,210,0.5);
    margin: 0 0 0.7rem;
    position: relative;
    z-index: 1;
    transition: color 2s cubic-bezier(0.16,1,0.3,1), text-shadow 2.4s cubic-bezier(0.16,1,0.3,1);
}
.hl-log:hover .hl-title,
.hl-log:focus-within .hl-title {
    color: var(--silver-lit);
    text-shadow: 0 0 6px rgba(75,186,219,0.5), 0 0 15px rgba(48,82,59,0.8);
}

.hl-body { color: var(--fog); line-height: 1.7; position: relative; z-index: 1; }
.hl-body > *:last-child { margin-bottom: 0; }
.hl-body p { margin-bottom: 0.6rem; }
.hl-body a { color: var(--glow); border-bottom: 1px solid rgba(75,186,219,0.28); }
.hl-body img { max-width: 100%; height: auto; margin-top: 0.6rem; opacity: 0.92; }
.hl-body code { background: rgba(48,82,59,0.32); color: var(--glow); padding: 0.15em 0.4em; font-size: 0.9em; }

/* Entrance: a slow, wet slide. Reduced-motion stills it. */
.hl-log.hl-in-right { animation: hl-in-right 0.55s cubic-bezier(0.16,1,0.3,1); }
.hl-log.hl-in-left  { animation: hl-in-left  0.55s cubic-bezier(0.16,1,0.3,1); }
@keyframes hl-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes hl-in-left  { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hl-log.hl-in-right, .hl-log.hl-in-left { animation: none; } }

/* Progress: moss beads, the current one lit foxfire. */
.hl-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.1rem; }
.hl-dot {
    width: 7px; height: 7px;
    background: var(--moss-deep);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.hl-dot.is-active { background: var(--glow); box-shadow: 0 0 7px rgba(75,186,219,0.55); }

/* Current Gathering: home's field-log eyebrow, matching the highlights' entry stamp. */
.gathering-eyebrow {
    font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fog-dim);
    margin-bottom: 0.6rem;
}
.gathering-when, .gathering-where { color: var(--fog); margin: 0.2rem 0; }
.gathering-status { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; }

/* Carried from the retired cave carousel.css so home keeps its layout. */
.account-buttons { display: grid; grid-template-columns: repeat(4, auto); gap: 0.8rem; justify-content: start; }
.carousel-controls { pointer-events: auto; }
.carousel-controls .btn { pointer-events: auto; min-width: 120px; }
@media (max-width: 768px) { .account-buttons { grid-template-columns: repeat(2, 1fr); } }