/* The lamp. The one place light is decided: data-light (night / ember / lit, computed from what she said)
   picks a light token; each look supplies the lamp's colours (--lamp pool, --lamp-rule edge, --lamp-ink words).
   One lamp, top left. Night is the default: a word is unlit until she has said it. */
[data-light]{--glow:0}
[data-light="ember"]{--glow:.55}
[data-light="lit"]{--glow:1}

/* Wall: a known card catches a faint warm edge, fading out from the top-left corner (the quiet hint; position is the main trace). */
.card[data-light]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1.5px solid var(--lamp-rule);opacity:var(--glow);
  -webkit-mask:radial-gradient(120% 110% at 0 0,#000 0,#000 25%,transparent 75%);mask:radial-gradient(120% 110% at 0 0,#000 0,#000 25%,transparent 75%)}

/* Open card: a known word's sentence is warm (a small note of light). */
.s-use{position:relative;isolation:isolate;transition:border-color 1.2s ease}
.s-use::before{content:"";position:absolute;inset:-14px -16px -14px -2px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 32% 45%,var(--lamp),transparent);opacity:var(--glow);transition:opacity 1.2s ease}
.s-use[data-light="ember"],.s-use[data-light="lit"]{border-left-color:var(--lamp-rule)}
.s-use .use-t{transition:color 1.2s ease}
.s-use[data-light="ember"] .use-t{color:color-mix(in srgb,var(--lamp-ink) 55%,var(--ink2))}
.s-use[data-light="lit"] .use-t{color:var(--lamp-ink)}


/* Work (Shop floor): no glow, as approved. The lamp is edge light in the deck colour: the 40% edge goes to full. */
:root[data-shelf="work"] .card[data-light]::after{display:none}
:root[data-shelf="work"] .card[data-light="ember"]{border-color:color-mix(in srgb,var(--k) 72%,transparent)}
:root[data-shelf="work"] .card[data-light="lit"]{border-color:var(--k);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
:root[data-shelf="work"] .s-use{border-left-color:color-mix(in srgb,var(--k) 40%,transparent)}
:root[data-shelf="work"] .s-use::before{display:none}
:root[data-shelf="work"] .s-use[data-light="ember"],:root[data-shelf="work"] .s-use[data-light="lit"]{border-left-color:var(--k)}
:root[data-shelf="work"] .s-use[data-light] .use-t{color:var(--ink2)}
:root[data-shelf="work"] .s-use[data-light="lit"] .use-t{color:var(--ink)}

@media (prefers-reduced-motion: reduce){.s-use,.s-use::before,.s-use .use-t{transition:none}}