/* Déjà's page: the same layout as Agorzilla's, in the café's colours (warm, dark, a lamp). Nothing here changes her. */
body.deja {
  --bg: #120d09; --panel: rgba(28, 19, 12, .82); --line: rgba(255, 214, 160, .13); --line2: rgba(255, 214, 160, .26);
  --text: #f3eadf; --muted: #c2b29f; --faint: #8d7c6a; --green: #e8c46e; --green-d: #c9a24e; --amber: #f5c26b;
}
.deja h1 em { color: #e8c46e; }
.deja .go { background: linear-gradient(#f1d38c, #d7ac56); color: #24170a; box-shadow: 0 8px 24px rgba(215, 172, 86, .22); }
.deja .net[data-state="live"] i { background: #6ee7a0; box-shadow: 0 0 8px #6ee7a0; }
.deja .sheet-in { background: #1c130c; }
.deja .stage { background: #120d09; }
.deja #scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.deja .timeline { grid-template-columns: 1fr; grid-template-areas: "proof"; background: linear-gradient(transparent, rgba(12, 8, 5, .9) 40%); }

/* the chalk slate on the wall: today's marks */
.slate { position: absolute; right: 30%; top: 15%; display: grid; gap: 4px; justify-items: center; padding: 10px 16px 12px; border-radius: 6px; background: #1d211d; border: 5px solid #4a3220; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); color: #e9e4d8; font: 500 13px/1.3 var(--serif); z-index: 2; transform: rotate(-1.5deg); }
.slate b { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #bdb6a6; }
.marks { display: flex; gap: 7px; min-height: 22px; align-items: center; }
.marks i { width: 4px; height: 20px; border-radius: 2px; background: rgba(233, 228, 216, .12); transform: rotate(8deg); }
.marks i.on { background: #ece6d8; box-shadow: 0 0 4px rgba(236, 230, 216, .4); }
.marks i.new { animation: chalk .6s ease-out; }
@keyframes chalk { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.stage[data-mood="ate"] .slate { border-color: #6a4a2a; }

/* where a click finds her, and what the café says */
.cathit { position: absolute; z-index: 2; border: 0; background: transparent; border-radius: 40%; padding: 0; }
.cathit:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.line { position: absolute; left: 50%; bottom: 25%; transform: translate(-50%, 8px); width: min(560px, 42vw); margin: 0; text-align: center; font: 500 italic 16px/1.4 var(--serif); color: #f3e5cc; text-shadow: 0 2px 10px #000; opacity: 0; transition: opacity .6s ease, transform .6s ease; pointer-events: none; z-index: 2; }
.line.on { opacity: 1; transform: translate(-50%, 0); }

/* her last days: one dot each, filled when she ate */
.days { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.days i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line2); }
.days i.fed { background: #e8c46e; border-color: #e8c46e; }
.days i.now { outline: 1px solid var(--muted); outline-offset: 2px; }

/* the three places of today's agreement */
.agree { display: grid; gap: 10px; }
.agree header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.agree .big { margin: 0; font: 500 16px/1.35 var(--serif); }
.who3 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.who3 li { flex: 1 1 0; min-width: 72px; min-height: 32px; display: grid; place-items: center; border: 1px dashed var(--line2); border-radius: 8px; font: 11px ui-monospace, monospace; color: var(--faint); }
.who3 li.on { border-style: solid; border-color: #e8c46e; color: var(--text); background: rgba(232, 196, 110, .08); }
.who3 li.me { font-family: var(--sans); font-weight: 600; }
.rule p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.rule .small { font-size: 12px; }
.sndBtn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: inherit; min-height: 0; }

@media (max-width: 960px), (max-height: 500px) {
  .deja .stage { height: 64vh; min-height: 420px; }
  .slate { right: 4%; top: 32%; padding: 8px 12px 10px; }
  .line { width: calc(100% - 32px); bottom: 3%; font-size: 15px; }
  .deja .brand { font-size: 24px; }
  .deja .top { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 520px) { .deja .topr .net { display: none; } }

/* short laptop screens: her numbers in two rows of two, the rule a little tighter (assets/fit.js does the rest) */
@media (min-width: 961px) and (max-height: 860px) and (min-height: 501px) {
  .deja .stats { grid-template-columns: repeat(2, 1fr); }
  .agree { gap: 8px; }
  .agree .big { font-size: 15px; }
  .rule p { margin-top: 6px; font-size: 12px; line-height: 1.45; }
  .rule .small { font-size: 11px; }
}