/*
  BEGINNER MAP FOR css/discoveries.css
  PURPOSE: This file controls the Discovery Log grid, locked cards, and progress display.

  CSS READING GUIDE:
  - The selector before { chooses what is styled. .name means a class; #name
    means one unique id; an element name such as body targets that HTML tag.
  - The declarations inside { } are property: value pairs. Each ends with ;.
  - Later rules can override earlier rules when they target the same element.
  - @media rules apply only under a condition such as a narrow screen or a
    visitor requesting reduced motion. Keep their closing braces paired.
  - Shared CSS affects several pages, so test Home, About, Light, and Dark after
    changing a shared rule. Comments below identify each component or feature.
*/

/*
  BEGINNER GUIDE
  PURPOSE: Styles the Discovery Log: panel, progress, locked/unlocked cards, footer, reset button, and mobile layout.

  CSS changes appearance, not page wording or behaviour.
  A selector beginning with “.” matches an HTML class; “#” matches an HTML id.
  Later rules can override earlier rules. Keep braces paired: every { needs a }.
*/

/* Reusable colours and measurements for this page. */
/* COMPONENT NOTE: Component :root: appearance and layout for the matching HTML element(s). */
:root {
    --bg: #0f172a;
    --panel: rgba(15, 23, 42, 0.82);
    --accent: #38bdf8;
    --text: #f8fafc;
    --dim: #94a3b8;
}

html { min-height: 100%; }

/* Whole-page background, text, and vertical layout. */
/* COMPONENT NOTE: Page foundation for body: controls the overall canvas, background, spacing, or default text. */
body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Full-screen star canvas behind all page content. */
/* COMPONENT NOTE: Component #neuralCanvas: appearance and layout for the matching HTML element(s). */
#neuralCanvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg);
    touch-action: pan-y;
}

/* Outer wrapper that limits width and supplies edge spacing. */
/* COMPONENT NOTE: Component .signal-log: appearance and layout for the matching HTML element(s). */
.signal-log {
    width: min(720px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0 72px;
}

/* Main translucent box containing the log. */
/* COMPONENT NOTE: Readable overlay .log-panel: keeps instructions visible above the animation. */
.log-panel {
    padding: clamp(20px, 5vw, 38px);
    background: var(--panel);
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
}

/* COMPONENT NOTE: Component .eyebrow: appearance and layout for the matching HTML element(s). */
.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 { margin: 0; color: var(--accent); font-size: clamp(1.8rem, 6vw, 2.7rem); }

.intro { max-width: 58ch; color: var(--dim); line-height: 1.6; }

.progress-copy { margin: 26px 0 8px; font-weight: 650; }

/* Empty rounded bar; .progress-fill grows inside it. */
/* COMPONENT NOTE: Component .progress-track: appearance and layout for the matching HTML element(s). */
.progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.17);
}

/* COMPONENT NOTE: Component .progress-fill: appearance and layout for the matching HTML element(s). */
.progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0ea5e9, #67e8f9);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.65);
    transition: width 0.5s ease;
}

/* Responsive grid holding the discovery cards. */
/* COMPONENT NOTE: Component .signals: appearance and layout for the matching HTML element(s). */
.signals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 14px;
    margin-top: 30px;
}

/* One unlocked discovery card. */
/* COMPONENT NOTE: Component .signal: appearance and layout for the matching HTML element(s). */
.signal {
    min-height: 150px;
    padding: 18px;
    border: 1px solid rgba(56, 189, 248, 0.24);
    border-radius: 14px;
    background: rgba(3, 10, 25, 0.5);
}

.signal-number { color: rgba(148, 163, 184, 0.65); font: 0.72rem/1 monospace; }
.signal h2 { margin: 13px 0 8px; color: var(--accent); font-size: 1.1rem; }
.signal p { margin: 0 0 15px; color: var(--dim); font-size: 0.88rem; line-height: 1.5; }
.signal a, .site-footer a { color: var(--accent); text-decoration: none; }
.signal a:hover, .site-footer a:hover { text-decoration: underline; }

/* Locked-card variation: quieter and less distinct. */
/* COMPONENT NOTE: Component .signal.unknown: appearance and layout for the matching HTML element(s). */
.signal.unknown {
    border-style: dashed;
    filter: saturate(0.45);
}

.signal.unknown h2 { color: rgba(148, 163, 184, 0.75); letter-spacing: 0.12em; }

/* COMPONENT NOTE: Component .complete-message: appearance and layout for the matching HTML element(s). */
.complete-message {
    display: none;
    margin: 24px 0 0;
    color: #a5f3fc;
}

.complete-message.visible { display: block; }

/* COMPONENT NOTE: Component .storage-warning: appearance and layout for the matching HTML element(s). */
.storage-warning {
    display: none;
    margin-top: 22px;
    color: #fcd34d;
    font-size: 0.86rem;
}

.storage-warning.visible { display: block; }

.log-actions { display: flex; justify-content: flex-end; gap: 18px; margin-top: 32px; align-items: center; }

/* Discovery page version of the standard site footer. */
/* COMPONENT NOTE: Footer component .site-footer: controls shared lower-page navigation and metadata. */
.site-footer {
    width: min(720px, calc(100% - 32px));
    box-sizing: border-box;
    margin: 0 auto 56px;
    padding: 2rem;
    background: var(--panel);
    border: 2px solid rgba(56, 189, 248, 0.35);
    border-radius: 20px;
    text-align: center;
    backdrop-filter: blur(12px);
}

/* COMPONENT NOTE: Component .status-badge: appearance and layout for the matching HTML element(s). */
.status-badge {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    background: rgba(56, 189, 248, 0.1);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer { font-size: 0.8rem; opacity: 0.6; text-align: center; }

/* COMPONENT NOTE: Component #copy-toast: appearance and layout for the matching HTML element(s). */
#copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 3000;
    padding: 12px 24px;
    transform: translateX(-50%) translateY(100px);
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    color: var(--accent);
    opacity: 0;
    transition: all 0.4s ease;
}

#copy-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Deliberately subtle destructive action. JavaScript asks for confirmation. */
/* COMPONENT NOTE: Interactive control .reset-button: controls link/button appearance and feedback. */
.reset-button {
    border: 0;
    padding: 4px;
    background: transparent;
    color: rgba(148, 163, 184, 0.7);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
}

.reset-button:hover, .reset-button:focus-visible { color: var(--text); text-decoration: underline; }

/* Small-screen adjustments so cards and padding fit phones. */
/* COMPONENT NOTE: Conditional block: @media (max-width: 480px). The rules inside apply only when this condition is true. */
@media (max-width: 480px) {
    .signal-log { padding-top: 16px; }
    .log-actions { align-items: flex-start; flex-direction: column; }
}

/* Respect visitors who ask their device for less animation. */
/* COMPONENT NOTE: Conditional block: @media (prefers-reduced-motion: reduce). The rules inside apply only when this condition is true. */
@media (prefers-reduced-motion: reduce) {
    .progress-fill { transition: none; }
}