/* The activity panel over the yacht (Chris, 27 Oct: the "Close the activity" button was weird, and two views: "a full blown epic matrix style
   for the matrix view, and a new cooler one for the normal view"). Its own file: style.css and desk-more.css are past their ceilings.
   The normal look is glass with a gold edge and a timeline; html.matrix-on (room-mode.js, from the world's Matrix switch) puts on the
   Matrix's own: phosphor green on black, scan lines, a blinking prompt. Only on the yacht (html.yacht3d body.in-room). */
html.yacht3d body.in-room .room-side {
  --act-ink: #f3e7cf; --act-dim: #b9a98a; --act-line: rgba(224, 178, 96, 0.28); --act-glow: rgba(224, 178, 96, 0.5); --act-hot: var(--gold);
  border-color: var(--act-line); border-radius: 20px; padding: 14px 14px 12px; gap: 12px; color: var(--act-ink);
  background: linear-gradient(165deg, rgba(40, 32, 22, 0.78), rgba(14, 12, 10, 0.9) 55%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 236, 190, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  scrollbar-width: thin; scrollbar-color: var(--act-line) transparent;
}

/* The fold button: a round glass icon, never words. */
html.yacht3d body.in-room .side-fold {
  position: sticky; top: 0; z-index: 2; align-self: flex-end; flex: none; width: 34px; height: 34px; min-height: 0; margin: -4px -4px -2px 0; padding: 0;
  border-radius: 50%; border: 1px solid var(--act-line); background: rgba(20, 18, 16, 0.55); color: var(--act-hot); font-size: 0; line-height: 0; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
html.yacht3d body.in-room .side-fold::before {
  content: ''; display: block; width: 18px; height: 18px; margin: auto; background: currentColor;
  -webkit-mask: var(--fold-icon) center / contain no-repeat; mask: var(--fold-icon) center / contain no-repeat;
  --fold-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6l-6 6 6 6'/%3E%3C/svg%3E");
}
html.yacht3d body.in-room .side-fold:hover, html.yacht3d body.in-room .side-fold:focus-visible { transform: scale(1.08); border-color: var(--act-hot); background: rgba(60, 46, 26, 0.7); }
html.yacht3d body.in-room .side-fold:active { transform: scale(0.94); }
/* Folded: the same round glass, showing a pulse line, standing alone at the corner. */
html.yacht3d body.in-room .room-grid.side-folded .side-fold {
  position: static; width: 44px; height: 44px; margin: 0; background: rgba(20, 18, 16, 0.62); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 14px rgba(224, 178, 96, 0.2);
}
html.yacht3d body.in-room .room-grid.side-folded .side-fold::before {
  width: 22px; height: 22px;
  --fold-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h4l2.5-6.5 4 13 3-9.5 1.5 3h4'/%3E%3C/svg%3E");
}

/* The three counters: glass tiles, the number large. */
html.yacht3d body.in-room .counters { gap: 8px; margin-top: 4px; }
html.yacht3d body.in-room .counter {
  padding: 10px 10px 9px; border-radius: 14px; border: 1px solid var(--act-line); background: linear-gradient(180deg, rgba(255, 236, 190, 0.07), rgba(255, 236, 190, 0.015));
}
html.yacht3d body.in-room .counter strong { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--act-ink); }
html.yacht3d body.in-room .counter.some strong { color: var(--act-hot); text-shadow: 0 0 14px var(--act-glow); }
html.yacht3d body.in-room .counter span { color: var(--act-dim); }

/* The heading and the timeline. */
html.yacht3d body.in-room #h-events {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--act-dim);
}
html.yacht3d body.in-room #h-events::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--act-line), transparent); }
html.yacht3d body.in-room .events { position: relative; gap: 2px; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--act-line); }
html.yacht3d body.in-room .event {
  position: relative; grid-template-columns: 1fr; gap: 1px; padding: 8px 8px 8px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; transition: background .15s ease;
}
html.yacht3d body.in-room .event:hover { background: rgba(255, 236, 190, 0.05); }
html.yacht3d body.in-room .event::before {
  content: ''; position: absolute; left: -21px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: #2a241b; border: 2px solid var(--act-hot); box-shadow: 0 0 8px var(--act-glow);
}
html.yacht3d body.in-room .event-time { min-width: 0; font-size: 11px; letter-spacing: 0.08em; color: var(--act-hot); }
html.yacht3d body.in-room .event-text { color: var(--act-ink); opacity: 0.88; }
html.yacht3d body.in-room .event-link { grid-column: 1; }
html.yacht3d body.in-room .event a { color: var(--act-hot); text-decoration: none; border-bottom: 1px solid var(--act-line); }
html.yacht3d body.in-room .event a:hover { border-bottom-color: var(--act-hot); }
html.yacht3d body.in-room .legend summary { color: var(--act-dim); }

/* ── The Matrix's own look ── */
html.matrix-on.yacht3d body.in-room .room-side {
  --act-ink: #b6ffcf; --act-dim: #4fbf7a; --act-line: rgba(0, 255, 102, 0.34); --act-glow: rgba(0, 255, 102, 0.7); --act-hot: #2dff7a;
  font-family: var(--mono); border-radius: 4px; border-color: rgba(0, 255, 102, 0.5);
  background:
    repeating-linear-gradient(0deg, rgba(0, 255, 102, 0.045) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(0, 18, 7, 0.9), rgba(0, 6, 3, 0.94));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 28px rgba(0, 255, 102, 0.22), inset 0 0 40px rgba(0, 255, 102, 0.07);
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.35);
}
html.matrix-on.yacht3d body.in-room .counter { border-radius: 2px; background: rgba(0, 255, 102, 0.05); border-color: rgba(0, 255, 102, 0.4); box-shadow: inset 0 0 14px rgba(0, 255, 102, 0.08); }
html.matrix-on.yacht3d body.in-room .counter strong { font-family: var(--mono); color: #2dff7a; text-shadow: 0 0 10px rgba(0, 255, 102, 0.9), 0 0 24px rgba(0, 255, 102, 0.5); }
html.matrix-on.yacht3d body.in-room .counter.some strong { color: #eaffef; }
html.matrix-on.yacht3d body.in-room #h-events { letter-spacing: 0.22em; }
html.matrix-on.yacht3d body.in-room #h-events::before { content: '>_'; color: #2dff7a; letter-spacing: 0; }
html.matrix-on.yacht3d body.in-room .events { border-left: 1px dashed rgba(0, 255, 102, 0.4); }
html.matrix-on.yacht3d body.in-room .event { border-radius: 2px; }
html.matrix-on.yacht3d body.in-room .event:hover { background: rgba(0, 255, 102, 0.07); }
html.matrix-on.yacht3d body.in-room .event::before { border-radius: 1px; width: 7px; height: 7px; left: -20px; background: #2dff7a; border: 0; }
html.matrix-on.yacht3d body.in-room .event-time::before { content: '[ '; }
html.matrix-on.yacht3d body.in-room .event-time::after { content: ' ]'; }
html.matrix-on.yacht3d body.in-room .event-time { color: #2dff7a; font-size: 11.5px; }
html.matrix-on.yacht3d body.in-room .event-text { opacity: 1; }
html.matrix-on.yacht3d body.in-room .side-fold { border-radius: 3px; background: rgba(0, 20, 8, 0.85); border-color: rgba(0, 255, 102, 0.55); color: #2dff7a; box-shadow: 0 0 12px rgba(0, 255, 102, 0.3); }
html.matrix-on.yacht3d body.in-room .room-grid.side-folded .side-fold { box-shadow: 0 0 18px rgba(0, 255, 102, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  /* The scan lines drift down the panel; the prompt beside the heading blinks; the panel slides in when it opens. */
  html.matrix-on.yacht3d body.in-room .room-side { animation: act-scan 9s linear infinite; }
  html.matrix-on.yacht3d body.in-room #h-events::before { animation: act-blink 1.1s steps(2) infinite; }
  html.yacht3d body.in-room .room-grid:not(.side-folded) .room-side { animation: act-in .28s ease-out; }
  html.matrix-on.yacht3d body.in-room .room-grid:not(.side-folded) .room-side { animation: act-scan 9s linear infinite, act-in .28s ease-out; }
}
@keyframes act-scan { from { background-position: 0 0, 0 0; } to { background-position: 0 24px, 0 0; } }
@keyframes act-blink { 50% { opacity: 0.2; } }
@keyframes act-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

/* Folded, only the round button shows (the heading's own display above would otherwise outrank the fold's rule); on a phone it stands clear of the Places button. */
html.yacht3d body.in-room .room-grid.side-folded .room-side > :not(.side-fold) { display: none !important; }
/* Folded, the panel's own frame goes with its contents: the heading's flex rule (an id) and the panel's shadow and radius had left a boxed
   "Activity" under the round button (Chris, 29 Oct: it sat on the Places button). */
html.yacht3d body.in-room .room-grid.side-folded .room-side { box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 999px) {
  html.yacht3d body.in-room .room-grid.side-folded .room-side { bottom: calc(env(safe-area-inset-bottom, 0px) + 122px); }
}

html.matrix-on.yacht3d body.in-room .counter span { font-size: 11px; letter-spacing: -0.01em; }