/* Memory Field — chapter chrome for the WebGL view. Tokens borrowed from style.css so this reads
   as the same product; every colour on small text is checked against the panel background. */
.memory-field {
    position: relative;
    width: min(1240px, calc(100% - 40px));
    margin: 2.2rem auto 0;
    border: 1px solid rgba(104, 223, 255, .18);
    border-radius: 26px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(19, 68, 98, .34), transparent 62%),
        linear-gradient(160deg, rgba(6, 17, 34, .92), rgba(2, 7, 16, .96));
    overflow: hidden;
    isolation: isolate;
}
.memory-field-stage { position: relative; height: clamp(420px, 66vh, 700px); }
.memory-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.memory-field[data-field-state="error"] .memory-field-stage,
.memory-field[data-field-state="unsupported"] .memory-field-stage,
/* before the script runs at all (or without JS) there is nothing to look at yet */
.memory-field[data-field-state="idle"] .memory-field-stage { height: 0; }
/* and nothing to steer: a search, a scale and a key legend that cannot work yet are not shown.
   The list, the card shell and the sentence that says the list is the record all stay. */
.memory-field[data-field-state="idle"] .memory-search,
.memory-field[data-field-state="idle"] .memory-scale,
.memory-field[data-field-state="idle"] .memory-field-keys,
.memory-field[data-field-state="error"] .memory-search,
.memory-field[data-field-state="error"] .memory-scale,
.memory-field[data-field-state="error"] .memory-field-keys,
.memory-field[data-field-state="unsupported"] .memory-search,
.memory-field[data-field-state="unsupported"] .memory-scale,
.memory-field[data-field-state="unsupported"] .memory-field-keys { display: none; }

/* the fog reads as depth only against a vignette — cheaper here than a post-processing pass */
.memory-field-stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 50% 45%, transparent 42%, rgba(1, 4, 10, .72) 100%);
}

.memory-field-head {
    display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem; border-bottom: 1px solid rgba(104, 223, 255, .12);
}
.memory-field-head p { color: var(--muted); font-size: .8rem; margin: 0; max-width: 52ch; line-height: 1.6; }
.memory-scale { display: flex; gap: .3rem; }
.memory-scale button {
    min-width: 44px; min-height: 44px; padding: 0 .7rem;
    border: 1px solid rgba(99, 220, 255, .16); border-radius: 11px;
    background: rgba(4, 14, 28, .7); color: var(--muted);
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
    transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.memory-scale button[aria-pressed="true"] { color: #d9f3f8; border-color: rgba(105, 225, 255, .46); background: rgba(13, 48, 68, .82); }
.memory-search { display: flex; align-items: center; gap: .5rem; }
.memory-search input {
    min-height: 44px; width: min(260px, 42vw); padding: 0 .8rem;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px;
    background: rgba(255, 255, 255, .03); color: white; font-size: .8rem;
}
.memory-search label { color: var(--muted-2); font-size: .6875rem; letter-spacing: .1em; }

.memory-field-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; border-top: 1px solid rgba(104, 223, 255, .12); }
.memory-list { max-height: 320px; overflow: auto; margin: 0; padding: .6rem; list-style: none; }
.memory-list li { margin: 0; }
.memory-list a {
    display: grid; grid-template-columns: 78px 1fr auto; gap: .7rem; align-items: baseline;
    padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: var(--muted);
    font-size: .78rem; transition: background .18s ease, color .18s ease;
}
.memory-list a:hover, .memory-list a:focus-visible { background: rgba(13, 48, 68, .6); color: #e7f7ff; }
.memory-list a[aria-current="true"] { background: rgba(15, 60, 84, .82); color: #eafaff; }
.memory-list time { color: var(--muted-2); font-size: .6875rem; letter-spacing: .04em; }
.memory-list em { color: #8fd6ea; font-style: normal; font-size: .6875rem; letter-spacing: .06em; }

.memory-card { border-left: 1px solid rgba(104, 223, 255, .12); padding: 1rem 1.1rem; }
.memory-card[hidden] { display: none; }
.memory-card h3 { margin: .2rem 0 .6rem; font-size: 1.05rem; letter-spacing: -.01em; color: #eafaff; }
.memory-card dl { display: grid; grid-template-columns: auto 1fr; gap: .32rem .8rem; margin: 0; font-size: .72rem; }
.memory-card dt { color: var(--muted-2); letter-spacing: .06em; }
.memory-card dd { margin: 0; color: #cfe7f2; }
.memory-card .card-kind { color: #8fd6ea; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.memory-card-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.memory-card-links a {
    padding: .4rem .6rem; border: 1px solid rgba(99, 220, 255, .2); border-radius: 9px;
    color: #9fdcef; font-size: .6875rem; text-decoration: none; letter-spacing: .04em;
}
.memory-card-links a:hover { border-color: rgba(105, 225, 255, .5); color: #eafaff; }

.memory-field-foot { padding: .7rem 1.2rem 1rem; color: var(--muted-2); font-size: .6875rem; letter-spacing: .04em; }
.memory-field-foot kbd {
    padding: .1rem .35rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 5px;
    background: rgba(255, 255, 255, .04); color: #cfe7f2; font-size: .6875rem;
}

@media (max-width: 860px) {
    .memory-field-body { grid-template-columns: minmax(0, 1fr); }
    .memory-card { border-left: 0; border-top: 1px solid rgba(104, 223, 255, .12); }
    .memory-field-stage { height: clamp(300px, 52vh, 440px); }
}
@media (prefers-reduced-motion: reduce) {
    .memory-list a { transition: none; }
    .memory-scale button { transition: none; }
}

/* Floating labels — positioned by the scene each frame via CSSOM (no style attributes, so the
   strict CSP stays intact). Pointer target is the label itself; the canvas handles the rest. */
.memory-labels { position: absolute; inset: 0; pointer-events: none; }
.memory-label {
    position: absolute; top: 0; left: 0; will-change: transform, opacity;
    display: none; max-width: 232px; padding: .34rem .55rem;
    border: 1px solid rgba(99, 220, 255, .2); border-radius: 10px;
    background: rgba(4, 14, 28, .78); backdrop-filter: blur(6px);
    color: #cfe7f2; text-decoration: none; pointer-events: auto;
    transition: border-color .22s ease, background .22s ease, box-shadow .3s ease;
}
.memory-label.is-on { display: block; }
.memory-label b { display: block; font-size: .78rem; font-weight: 600; letter-spacing: -.01em; color: #eafaff; }
.memory-label small { display: block; margin-top: .1rem; color: #8fb0c4; font-size: .6875rem; letter-spacing: .03em; }
.memory-label::before {
    content: ""; position: absolute; left: -7px; top: 50%; width: 6px; height: 1px;
    background: rgba(118, 230, 255, .55);
}
.memory-label:hover, .memory-label:focus-visible {
    border-color: rgba(118, 230, 255, .62); background: rgba(9, 32, 52, .92);
}
.memory-label.is-focused {
    border-color: rgba(118, 230, 255, .8);
    box-shadow: 0 0 0 1px rgba(118, 230, 255, .25), 0 14px 40px rgba(0, 0, 0, .5);
}
@media (max-width: 860px) { .memory-label { max-width: 168px; } .memory-label b { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .memory-label { transition: none; } }
.memory-related { margin: .7rem 0 0; color: #8fd6ea; font-size: .6875rem; letter-spacing: .05em; }

/* Explorer chrome. Type sizes here are deliberately larger than the rest of the site: this is a
   reading surface, and the people using it are as likely to be presbyopic as not. */
.memory-label { max-width: 268px; padding: .45rem .7rem; }
.memory-label b { font-size: .95rem; line-height: 1.25; }
.memory-label small { margin-top: .18rem; font-size: .8rem; color: #9dbccd; }
@media (max-width: 860px) { .memory-label { max-width: 200px; } .memory-label b { font-size: .86rem; } }

.memory-search { position: relative; }
.memory-results {
    position: absolute; top: calc(100% + .4rem); right: 0; z-index: 6;
    width: min(340px, 78vw); max-height: 320px; overflow: auto;
    padding: .3rem; border: 1px solid rgba(99, 220, 255, .28); border-radius: 12px;
    background: rgba(4, 14, 28, .96); backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.memory-results[hidden] { display: none; }
.memory-result {
    display: block; width: 100%; min-height: 44px; padding: .5rem .6rem; text-align: left;
    border: 0; border-radius: 9px; background: transparent; cursor: pointer;
}
.memory-result:hover, .memory-result:focus-visible { background: rgba(15, 60, 84, .82); }
.memory-result strong { display: block; color: #eafaff; font-size: .92rem; font-weight: 600; }
.memory-result small { display: block; margin-top: .1rem; color: #9dbccd; font-size: .78rem; }

.memory-field-head p { font-size: .88rem; color: #b9d2e0; }
.memory-list a { font-size: .86rem; }
.memory-list time { font-size: .78rem; }
.memory-card h3 { font-size: 1.2rem; }
.memory-card dl { font-size: .82rem; }
.memory-card dt { color: #9dbccd; }
.memory-field-foot { font-size: .78rem; color: #9dbccd; }