/* ISMIR 2026 Pre-Conference Lounge: components only.
   Page chrome (header, hero, piano, binary puzzle, section headings, footer, time-zone picker)
   is the live overview's own stylesheet, vendored as /vendor/overview.css. Everything here is
   prefixed pc- so the two stylesheets never fight, and leans on the overview's colour tokens
   (--ink, --muted, --gold, --cyan, --magenta, --good, --danger) so both sites stay in step. */

:root {
  --pc-title: #fff2b0;
  --pc-accent-ink: #ffcb68;
  --pc-panel: rgba(12, 17, 31, .9);
  --pc-panel-2: rgba(18, 26, 44, .94);
  --pc-border: #39485a;
  --pc-shadow: 6px 6px 0 rgba(0, 0, 0, .55);
  --pc-shadow-sm: 3px 3px 0 #000;
  --pc-board-bg: #0b1120;
  --pc-board-dot: rgba(78, 230, 255, .11);
  --pc-note-ink: #17181a;
  --pc-note-border: #000;
  --pc-note-shadow: 5px 5px 0 rgba(0, 0, 0, .55);
  /* Session tiles = the live overview's poster-session card. */
  --pc-session-bg: rgba(13, 18, 32, .94);
  --pc-session-border: var(--gold);
  --pc-session-shadow: 7px 7px 0 #000, 0 0 0 2px rgba(255, 183, 51, .14);
  --pc-session-hover-shadow: 10px 10px 0 #000, 0 0 0 3px rgba(78, 230, 255, .18);
  --pc-session-open-shadow: 10px 10px 0 #000, 0 0 0 4px rgba(71, 245, 138, .20);
  --pc-note-count: #47f58a;
}
html[data-theme="light"] {
  --pc-title: #102a52;
  --pc-accent-ink: #7b4c00;
  --pc-panel: #ffffff;
  --pc-panel-2: #f9fafc;
  --pc-border: rgba(16, 25, 40, .28);
  --pc-shadow: 6px 6px 0 rgba(16, 25, 40, .10);
  --pc-shadow-sm: 3px 3px 0 rgba(16, 25, 40, .14);
  --pc-board-bg: #fffdf8;
  --pc-board-dot: rgba(16, 42, 82, .13);
  --pc-note-border: #1c2433;
  --pc-note-shadow: 4px 4px 0 rgba(16, 25, 40, .22);
  --pc-session-bg:
    linear-gradient(135deg, rgba(0, 127, 163, .14), transparent 34%),
    linear-gradient(225deg, rgba(216, 149, 20, .20), transparent 36%),
    #fff7df;
  --pc-session-border: #172033;
  --pc-session-shadow: 8px 8px 0 rgba(18, 21, 31, .24), 0 0 0 3px rgba(0, 127, 163, .10);
  --pc-session-hover-shadow: 10px 10px 0 rgba(18, 21, 31, .26), 0 0 0 3px rgba(0, 127, 163, .18);
  --pc-session-open-shadow: 10px 10px 0 rgba(18, 21, 31, .26), 0 0 0 4px rgba(22, 128, 82, .20);
  --pc-note-count: #168052;
}

html { overflow-y: scroll; }
[hidden] { display: none !important; }

/* overview.css styles bare button/input elements (cyan, uppercase, hard shadow).
   Reset ours here; component rules below add back what they want. */
.pc-btn, .pc-icon-btn, .pc-swatch, .pc-signout, .pc-session-card,
.pc-seg button, .pc-composer textarea {
  box-shadow: none; text-transform: none; letter-spacing: normal; border-radius: 0;
}

/* In dark mode overview.css paints every <button> as a console key with !important
   (html:not([data-theme="light"]) button:not(.detail-backdrop)). Our .pc-btn keeps that look;
   the controls below are restored to their own styling, at higher specificity. */
html:not([data-theme="light"]) button.pc-icon-btn:not(.detail-backdrop),
html:not([data-theme="light"]) button.pc-signout:not(.detail-backdrop) {
  background: transparent !important; box-shadow: none !important; border-color: transparent !important; color: inherit !important;
}
html:not([data-theme="light"]) .pc-note button.pc-icon-btn:not(.detail-backdrop) { color: var(--pc-note-ink) !important; }
html:not([data-theme="light"]) .pc-note button.pc-icon-btn:not(.detail-backdrop):hover { border-color: #000 !important; background: rgba(255, 255, 255, .55) !important; }
html:not([data-theme="light"]) button.pc-signout:not(.detail-backdrop) { color: var(--muted) !important; }
html:not([data-theme="light"]) button.pc-swatch:not(.detail-backdrop) { background: var(--sw) !important; border-color: #000 !important; box-shadow: none !important; }
html:not([data-theme="light"]) .pc-seg button:not(.detail-backdrop) { background: var(--pc-panel-2) !important; color: var(--ink) !important; border-color: var(--pc-border) !important; box-shadow: none !important; }
html:not([data-theme="light"]) .pc-seg button[aria-pressed="true"]:not(.detail-backdrop) { background: var(--gold) !important; color: #0b0e17 !important; }
/* Dark mode paints every <button> as a console key; give the session tile its own surface back. */
html:not([data-theme="light"]) button.pc-session-card:not(.detail-backdrop) {
  background: var(--pc-session-bg) !important; color: var(--ink) !important;
  border-color: var(--pc-session-border) !important; box-shadow: var(--pc-session-shadow) !important;
}
html:not([data-theme="light"]) button.pc-session-card:not(.detail-backdrop):hover,
html:not([data-theme="light"]) button.pc-session-card:not(.detail-backdrop):focus-visible {
  border-color: var(--cyan) !important; box-shadow: var(--pc-session-hover-shadow) !important;
}
html:not([data-theme="light"]) button.pc-session-card[aria-expanded="true"]:not(.detail-backdrop) {
  border-color: var(--good) !important; box-shadow: var(--pc-session-open-shadow) !important;
}

/* Same treatment as the overview's own sections: icon only, no "▮▯▮ ♬" prefix. */
#welcome .section-heading h2::before, #welcome .section-heading h2::after,
#papers .section-heading h2::before, #papers .section-heading h2::after,
#lbd .section-heading h2::before, #lbd .section-heading h2::after {
  content: none !important;
  display: none !important;
}

/* The lounge title is longer than "What's going on now": keep it on one line in the fixed-height hero. */
@media (min-width: 761px) {
  .home-hero .hero-copy h1 { font-size: clamp(1.5rem, 3.2vw, 3.05rem) !important; white-space: nowrap; }
}

/* ---------- header additions: Slack sign-in sits beside Lights Off ---------- */
/* The overview centres its nav between the brand and one button. We have more on the right,
   so the side columns share the leftover space equally (nav stays centred) but never shrink
   below their content: when space is tight the nav moves aside instead of being overlapped.
   Below 1100px (narrow windows, or a zoomed-in browser) the nav collapses behind a menu
   button, as the miniconf's navbar does. */
@media (min-width: 1101px) {
  .site-header { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); column-gap: 16px; }
  .site-header > .brand { justify-self: start; }
  .site-header > .pc-header-tools { justify-self: end; }
}
.pc-header-tools { display: flex; align-items: center; gap: 10px; }

/* ---------- collapsible nav (menu button) ---------- */
.pc-nav-toggle { display: none; }
@media (max-width: 1100px) {
  .site-header { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 0; }
  .site-header > .brand { margin-right: auto; }
  .site-header > .pc-header-tools { order: 2; }
  html .pc-nav-toggle {
    order: 3; display: inline-grid; place-items: center; width: 38px; height: 32px; padding: 0; cursor: pointer;
    border: 2px solid var(--pc-border) !important; background: var(--pc-panel) !important; box-shadow: var(--pc-shadow-sm) !important;
  }
  .pc-nav-toggle span, .pc-nav-toggle span::before, .pc-nav-toggle span::after {
    display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: "";
  }
  .pc-nav-toggle span::before { position: absolute; top: -6px; }
  .pc-nav-toggle span::after { position: absolute; top: 6px; }
  .pc-nav-toggle[aria-expanded="true"] span { background: transparent; }
  .pc-nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .pc-nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  /* Collapsed: hidden. Open: a full-width list under the header. Overrides the overview's
     own narrow-screen rules (hidden <=900px, horizontal scroller <=720px). */
  html .site-header .top-nav { display: none !important; }
  html .site-header .top-nav.is-open {
    order: 4; flex-basis: 100%; display: flex !important; flex-direction: column; align-items: stretch;
    gap: 0 !important; margin: 10px 0 2px; padding: 4px 0 !important; overflow: visible !important; max-width: none !important;
    border-top: 2px solid var(--pc-border) !important;
  }
  html .site-header .top-nav.is-open a { padding: 11px 6px !important; text-align: left; font-size: .82rem; }
  html .site-header .top-nav.is-open a + a::before { content: none !important; }
  html .site-header .top-nav.is-open a + a { border-top: 1px solid var(--pc-border); }
}
#auth-slot { display: flex; align-items: center; gap: 8px; }
.pc-signin { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.pc-signin::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(#e01e5a, #e01e5a) 0 50%/50% 25% no-repeat,
    linear-gradient(#36c5f0, #36c5f0) 25% 0/25% 50% no-repeat,
    linear-gradient(#2eb67d, #2eb67d) 100% 50%/50% 25% no-repeat,
    linear-gradient(#ecb22e, #ecb22e) 75% 100%/25% 50% no-repeat;
}
.pc-user-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.pc-user-chip img, .pc-avatar {
  width: 24px; height: 24px; flex: none; object-fit: cover;
  border-left: 3px solid var(--cyan); border-bottom: 3px solid var(--gold);
  display: inline-grid; place-items: center; font-size: .66rem; font-weight: 900;
  background: rgba(78, 230, 255, .14); color: var(--ink);
}
.pc-signout { white-space: nowrap; }
.site-header .top-nav a { white-space: nowrap; }
/* Not enough room beside the full nav: initials only, the full name still shows on hover. */
@media (min-width: 1101px) and (max-width: 1240px) {
  .pc-user-chip .pc-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pc-user-chip { cursor: default; }
}
/* Fixed-width name with an ellipsis; the full name pops up on hover / keyboard focus. */
.pc-name { position: relative; display: block; width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.pc-user-chip { position: relative; }
.pc-user-chip:hover::after, .pc-user-chip:focus-within::after {
  content: attr(data-full); position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  padding: 6px 10px; white-space: nowrap; font-size: .76rem; font-weight: 800; text-transform: none; letter-spacing: 0;
  color: var(--ink); background: var(--pc-panel); border-left: 3px solid var(--cyan); border-bottom: 3px solid var(--gold);
  box-shadow: var(--pc-shadow-sm); pointer-events: none;
}
.pc-signout {
  border: 0; background: none; padding: 2px 0; cursor: pointer; color: var(--muted);
  font: inherit; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px;
}
.pc-signout:hover { color: var(--gold); }

/* ---------- hero: sticky-note glyph in the robot's frame ---------- */
.robot-logo.pc-note-logo::before,
html[data-theme="light"] .robot-logo.pc-note-logo::before {
  width: 24px !important; height: 24px !important; border: 0 !important;
  background:
    linear-gradient(135deg, transparent 0 70%, #c9971f 70% 100%) right bottom / 9px 9px no-repeat,
    linear-gradient(#17181a, #17181a) 5px 7px / 13px 2px no-repeat,
    linear-gradient(#17181a, #17181a) 5px 12px / 9px 2px no-repeat,
    #ffd85e !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45) !important;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}

/* ---------- shared bits ---------- */
.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 30px; padding: 5px 11px; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 2px solid var(--pc-border); background: var(--pc-panel); color: var(--ink);
  box-shadow: var(--pc-shadow-sm); font: inherit; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
}
.pc-btn:hover { transform: translate(-1px, -1px); border-color: var(--cyan); }
.pc-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.pc-btn-primary { background: var(--gold); color: #0b0e17; border-color: #000; }
html[data-theme="light"] .pc-btn-primary { background: #102a52; color: #fff; border-color: #102a52; }
.pc-btn-ghost { background: transparent; box-shadow: none; border-color: transparent; }
.pc-btn-sm { min-height: 25px; padding: 2px 8px; font-size: .66rem; }
.pc-chip {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px;
  border: 1.5px solid var(--pc-border); font-size: .68rem; font-weight: 800; white-space: nowrap; color: var(--ink);
}
.pc-chip-gold { border-color: var(--gold); color: var(--pc-accent-ink); }
.pc-chip-cyan { border-color: var(--cyan); color: var(--cyan); }
.pc-chip-magenta { border-color: var(--magenta); color: var(--magenta); }
.pc-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- boards ---------- */
.pc-board-frame { position: relative; border: 2px solid var(--pc-border); box-shadow: var(--pc-shadow); background: var(--pc-board-bg); }
.pc-board-scroll { position: relative; overflow: auto; scrollbar-width: none; touch-action: pan-x pan-y; }   /* pinch: the board's, not the page's */
.pc-board-scroll::-webkit-scrollbar { display: none; }   /* navigate by dragging the board, like Miro */
.pc-board-surface { cursor: grab; }
.pc-board-surface.is-panning { cursor: grabbing; }
.pc-zoom-btn { min-width: 28px; }
.pc-board-surface {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
  background-color: var(--pc-board-bg);
  background-image: radial-gradient(var(--pc-board-dot) 1.6px, transparent 1.7px);
  background-size: 24px 24px;
}
.pc-board-sizer { pointer-events: none; }
.pc-board-empty {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; padding: 20px;
  color: var(--muted); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .14em; text-align: center;
}
.pc-board-tools { position: absolute; right: 8px; top: 8px; z-index: 5; display: flex; gap: 6px; }
/* Zoom / Expand show while the pointer is on the board (or keyboard focus is in it). Touch screens have
   no hover, so they always show there; so does an expanded board, which needs Collapse. */
@media (hover: hover) {
  .pc-board-frame:not(.is-fullscreen) > .pc-board-tools { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
  .pc-board-frame:not(.is-fullscreen):hover > .pc-board-tools { opacity: 1; pointer-events: auto; }
  /* Keyboard focus only: a button clicked with the mouse (Collapse, +, -) keeps focus, which must
     not leave the tools showing once the pointer has left. Own rule: older browsers without
     :has() then just skip this one. */
  .pc-board-frame:not(.is-fullscreen):has(:focus-visible) > .pc-board-tools { opacity: 1; pointer-events: auto; }
}
.pc-board-frame.is-fullscreen { position: fixed; inset: 14px; z-index: 60; display: flex; flex-direction: column; }
.pc-board-frame.is-fullscreen .pc-board-scroll { flex: 1; height: auto !important; }
.pc-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(4, 6, 12, .62); }
/* An expanded board owns every gesture: the page behind neither scrolls nor bounces, and a
   scroll that reaches the board's edge stops there instead of moving the page. */
html.pc-board-expanded, html.pc-board-expanded body { overflow: hidden; overscroll-behavior: none; }
.pc-board-frame.is-fullscreen .pc-board-scroll { overscroll-behavior: contain; }
.pc-scrim, .pc-board-frame.is-fullscreen .pc-fullscreen-title, .pc-board-frame.is-fullscreen .pc-board-tools { touch-action: none; }
/* Signed out, notes cannot be moved: no grab cursor on them. */
html:not(.pc-signed-in) .pc-note-body, html:not(.pc-signed-in) .pc-note-foot { cursor: default; }
.pc-fullscreen-title { padding: 9px 260px 9px 12px; border-bottom: 2px solid var(--pc-border); background: var(--pc-panel); color: var(--pc-title); font-weight: 900; font-size: .84rem; }
.pc-fullscreen-hint { margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .02em; }

/* Expand / Collapse: the one board button people need to find. Same shape as its neighbours,
   but a stronger fill: deep navy on the light theme, bright cyan on the dark one. */
html[data-theme="light"] .pc-board-tools .pc-fs-btn, html[data-theme="light"] .pc-session-panel-head .pc-fs-btn {
  background: #193762 !important; color: #fff !important; border-color: #10233d !important;
}
html[data-theme="light"] .pc-board-tools .pc-fs-btn:hover, html[data-theme="light"] .pc-session-panel-head .pc-fs-btn:hover { background: #d89514 !important; color: #10233d !important; }
html:not([data-theme="light"]) .pc-board-tools button.pc-fs-btn:not(.detail-backdrop),
html:not([data-theme="light"]) .pc-session-panel-head button.pc-fs-btn:not(.detail-backdrop) {
  background: #4ee6ff !important; color: #07101b !important; border-color: #b7f5ff !important;
}
html:not([data-theme="light"]) .pc-board-tools button.pc-fs-btn:not(.detail-backdrop):hover,
html:not([data-theme="light"]) .pc-session-panel-head button.pc-fs-btn:not(.detail-backdrop):hover { background: #ffd36d !important; border-color: #fff3c2 !important; }

/* ---------- sticky notes (pastel in both themes) ---------- */
.pc-note {
  --c: #ffe27a; --c2: #f4cf4f;
  position: absolute; width: 230px; color: var(--pc-note-ink); background: var(--c);
  border: 2px solid var(--pc-note-border); box-shadow: var(--pc-note-shadow);
  font-family: "Courier New", ui-monospace, monospace; font-size: 14px; touch-action: none; user-select: none;
}
.pc-note[data-color="mint"] { --c: #a8f0c6; --c2: #7fdca8; }
.pc-note[data-color="sky"] { --c: #a9dcff; --c2: #7fc4f2; }
.pc-note[data-color="rose"] { --c: #ffbfd0; --c2: #f799b3; }
.pc-note[data-color="lilac"] { --c: #dccbff; --c2: #c0a6fb; }
.pc-note[data-color="sand"] { --c: #f3dcae; --c2: #e2c184; }
.pc-note.remote-drag { transition: left .09s linear, top .09s linear; outline: 2px dashed var(--magenta); }
.pc-note.dragging { box-shadow: 10px 10px 0 rgba(0, 0, 0, .4); cursor: grabbing; transform: rotate(-1.2deg); }
.pc-note.fresh { animation: pc-pop .35s steps(4, end); }
@keyframes pc-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.pc-note-body { padding: 10px 10px 6px; line-height: 1.32; white-space: pre-wrap; overflow-wrap: anywhere; cursor: grab; }
.pc-note-foot { cursor: grab; display: flex; align-items: center; gap: 6px; padding: 0 8px 7px 10px; font-size: 11px; font-weight: 800; }
.pc-note-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pc-note-author .mine { color: #6a28d9; }
.pc-note-to { flex: none; white-space: pre; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; color: #8a5a00; }
.pc-note-foot.has-tag { flex-wrap: wrap; row-gap: 1px; column-gap: 0; }
.pc-note-foot.has-tag .pc-note-author { flex-basis: 100%; }
.pc-note-foot.has-tag .pc-note-time { margin-right: auto; }
.pc-note-time { opacity: .65; white-space: nowrap; }
.pc-note-actions { display: flex; gap: 2px; }
.pc-icon-btn {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 4px; cursor: pointer;
  border: 1.5px solid transparent; background: transparent; color: var(--pc-note-ink); font: inherit; font-size: 12px; font-weight: 900;
}
.pc-icon-btn:hover { border-color: #000; background: rgba(255, 255, 255, .55); }

/* ---------- paper hall ---------- */
.pc-day-row { margin-top: 22px; }
.pc-day-label { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 1rem; }
.pc-day-label strong { color: var(--pc-accent-ink); text-transform: uppercase; letter-spacing: .14em; }
.pc-day-label span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.pc-session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.pc-session-grid > *, .pc-paper-grid > * { min-width: 0; }
.pc-session-card {
  position: relative; display: grid; gap: 6px; padding: 16px 16px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  border: 3px solid var(--pc-session-border); background: var(--pc-session-bg); box-shadow: var(--pc-session-shadow);
  transition: transform .12s steps(2, end), box-shadow .12s steps(2, end), border-color .12s steps(2, end);
}
.pc-session-card:hover, .pc-session-card:focus-visible {
  transform: translate(-2px, -2px); border-color: var(--cyan); box-shadow: var(--pc-session-hover-shadow); outline: none;
}
.pc-session-card:active { transform: translate(2px, 2px); }
.pc-session-card[aria-expanded="true"] { border-color: var(--good); box-shadow: var(--pc-session-open-shadow); }
.pc-session-card[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: var(--good);
}
.pc-session-id { font-size: 1.3rem; font-weight: 900; color: var(--pc-title); letter-spacing: .02em; }
/* Oral / Poster lines share one grid so the labels, dots and times line up in columns. */
.pc-session-time, .pc-panel-time {
  display: inline-grid; grid-template-columns: max-content max-content max-content; column-gap: 6px; row-gap: 2px;
  justify-content: start; color: var(--cyan); font-size: .74rem; font-weight: 800; white-space: nowrap;
}
.pc-time-line { display: contents; }
.pc-time-kind { font-weight: 900; }
.pc-time-main { grid-column: 3; }
.pc-time-line > .pc-time-main:first-child { grid-column: 1 / -1; }
.pc-time-venue { grid-column: 3; color: var(--muted); font-size: .66rem; font-weight: 600; }
.pc-session-stats { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; margin-top: 2px; }
.pc-stat { font-size: .74rem; font-weight: 900; letter-spacing: .04em; white-space: nowrap; color: var(--ink); }
.pc-stat-sep { color: var(--muted); font-size: .74rem; }

.pc-session-panel {
  margin-top: 20px; padding: 16px; border: 0; border-left: 3px solid var(--gold); border-bottom: 2px solid rgba(78, 230, 255, .45);
  background: var(--pc-panel); box-shadow: var(--pc-shadow);
}
.pc-session-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px dashed var(--pc-border); }
.pc-session-panel-head h3 { margin: 0; color: var(--pc-title); font-size: 1.4rem; letter-spacing: -.02em; }
.pc-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 4px; color: var(--muted); font-size: .78rem; }
.pc-seg { display: inline-flex; border: 2px solid var(--pc-border); }
.pc-seg button { border: 0; border-right: 2px solid var(--pc-border); background: var(--pc-panel-2); color: var(--ink); padding: 3px 9px; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 900; }
.pc-seg button:last-child { border-right: 0; }
.pc-seg button[aria-pressed="true"] { background: var(--gold); color: #0b0e17; }
.pc-seg-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }

.pc-paper-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
/* Paper cards are the live overview's own .live-paper-card (see app.js paperCard). */
:is(#live-events, #lbd-grid).pc-paper-grid .live-paper-card { min-height: 0; }
/* Paper titles stay links, but at rest without the overview's underline, highlighter band and ↗. */
/* Hover / focus keep the overview's highlight block. */
:is(#live-events, #lbd-grid).pc-paper-grid .paper-title a:not(:hover):not(:focus-visible),
html[data-theme="light"] :is(#live-events, #lbd-grid).pc-paper-grid .paper-title a:not(:hover):not(:focus-visible) {
  text-decoration: none !important; background: none !important;
}
:is(#live-events, #lbd-grid).pc-paper-grid .paper-title a::after { content: none !important; }
:is(#live-events, #lbd-grid).pc-paper-grid .paper-title a { text-decoration: none !important; }
.pc-add-note::after { content: none !important; }   /* not an external link: no ↗ */
/* The paper-card copy gets its size from a #live-events rule; give the Welcome one the same. */
#welcome-add.pc-add-note { font-size: .76rem; height: 28px; }
/* "+ Note" is the overview link button, one shade deeper than Slack / PDF / Poster beside it. */
/* Resting state only, so hover/focus stay identical to the other buttons. */
html[data-theme="light"] .pc-add-note:not(:hover):not(:focus-visible) { background: #cdeef7 !important; }
html:not([data-theme="light"]) .pc-add-note:not(:hover):not(:focus-visible) { background: linear-gradient(180deg, #1d3a57 0%, #11253d 100%) !important; }
/* A paper opened from its miniconf page (#paper=<uid>) flashes briefly. */
:is(#live-events, #lbd-grid).pc-paper-grid .live-paper-card.pc-paper-focus { outline: 3px solid var(--gold); outline-offset: 3px; transition: outline-color .6s ease; }
a.pc-permalink { text-decoration: none; cursor: pointer; }
a.pc-permalink:hover { text-decoration: underline; text-underline-offset: 3px; }
.pc-note-count { color: var(--pc-note-count); font-size: .74rem; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.pc-paper-board-head { display: flex; justify-content: flex-end; margin-top: 10px; }
.pc-paper-board { margin-top: 8px; }
.pc-paper-board { --pc-board-bg: #ffffff; }
html:not([data-theme="light"]) .pc-paper-board { --pc-board-bg: #4a5770; --pc-board-dot: rgba(255, 255, 255, .13); }

/* ---------- dark mode: boards and notes ----------
   A near-black board swallows the notes' hard shadows, so in the dark the board is a
   mid-tone slate: light enough for the black offset shadow to read, still dark enough to
   sit quietly in the night page. Welcome wall and paper boards differ by one step. */
html:not([data-theme="light"]) {
  --pc-board-bg: #3d4964;
  --pc-board-dot: rgba(255, 255, 255, .12);
  --pc-note-border: #0b0f1a;
  --pc-note-shadow: 5px 5px 0 rgba(5, 8, 15, .75);
}
html:not([data-theme="light"]) .pc-board-frame { border-color: #5a6a86; box-shadow: 6px 6px 0 rgba(0, 0, 0, .6); }
html:not([data-theme="light"]) .pc-note.dragging { box-shadow: 10px 10px 0 rgba(5, 8, 15, .6); }
html:not([data-theme="light"]) .pc-board-empty { color: rgba(255, 255, 255, .55); }

.pc-lbd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px dashed var(--pc-border); }
.pc-lbd-head .pc-sub { margin-top: 0; font-size: .85rem; }
.pc-lbd-placeholder { padding: 28px; text-align: center; color: var(--muted); border: 2px dashed var(--pc-border); background: var(--pc-panel); }
.pc-lbd-placeholder strong { display: block; color: var(--pc-title); font-size: 1.15rem; margin-bottom: 6px; }

/* ---------- composer & toasts ---------- */
dialog.pc-composer {
  width: min(460px, calc(100vw - 28px)); padding: 0; color: var(--ink);
  border: 0; border-left: 3px solid var(--cyan); border-bottom: 3px solid var(--gold);
  background: var(--pc-panel); box-shadow: 10px 10px 0 rgba(0, 0, 0, .5);
}
html[data-theme="light"] dialog.pc-composer { background: #fff; }
/* Dark: the same slate as the boards, so composing feels like writing on the wall itself. */
html:not([data-theme="light"]) dialog.pc-composer { background: #46536e; box-shadow: 10px 10px 0 rgba(0, 0, 0, .55); }
html:not([data-theme="light"]) .pc-composer .pc-where,
html:not([data-theme="light"]) .pc-composer .pc-counter { color: #d3dbe8; }
dialog.pc-composer::backdrop { background: rgba(4, 6, 12, .6); }
.pc-composer form { display: grid; gap: 12px; padding: 16px; }
.pc-composer h3 { margin: 0; color: var(--pc-title); font-size: 1.05rem; }
.pc-where { margin-top: -6px; font-size: .72rem; color: var(--muted); }
.pc-composer textarea {
  width: 100%; min-height: 130px; resize: vertical; padding: 10px; border: 2px solid #000; box-sizing: border-box;
  background: var(--c, #ffe27a); color: var(--pc-note-ink); font: inherit; font-size: .92rem; line-height: 1.35;
}
.pc-composer textarea[data-color="mint"] { --c: #a8f0c6; } .pc-composer textarea[data-color="sky"] { --c: #a9dcff; }
.pc-composer textarea[data-color="rose"] { --c: #ffbfd0; } .pc-composer textarea[data-color="lilac"] { --c: #dccbff; }
.pc-composer textarea[data-color="sand"] { --c: #f3dcae; }
.pc-swatches { display: flex; gap: 8px; align-items: center; }
.pc-swatch { width: 26px; height: 26px; border: 2px solid #000; cursor: pointer; padding: 0; background: var(--sw); }
.pc-swatch[aria-pressed="true"] { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pc-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-counter { font-size: .72rem; color: var(--muted); }
.pc-counter.over { color: var(--danger); font-weight: 900; }

.pc-toast-stack { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(440px, calc(100vw - 28px)); }
.pc-toast {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: .82rem; font-weight: 800;
  border: 0; border-left: 3px solid var(--cyan); background: var(--pc-panel); color: var(--ink); box-shadow: var(--pc-shadow-sm);
}
.pc-toast.error { border-left-color: var(--danger); }

/* sign-in pages served by src/auth.js */
.pc-auth-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.pc-auth-card {
  display: grid; gap: 14px; width: min(520px, 100%); padding: 26px 26px 22px;
  border: 3px solid var(--pc-session-border); background: var(--pc-session-bg); box-shadow: var(--pc-session-shadow);
}
.pc-auth-card h1 { margin: 0; color: var(--pc-title); font-size: 1.7rem; letter-spacing: -.02em; }
.pc-auth-card .eyebrow { margin: 0; }
.pc-auth-copy { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.5; }
.pc-auth-copy a { color: var(--cyan); }
.pc-auth-form { display: grid; gap: 10px; }
.pc-auth-form input { padding: 10px 12px; border: 2px solid var(--pc-border); background: var(--pc-panel); color: var(--ink); font: inherit; font-size: 1rem; }
.pc-auth-form button { justify-self: start; }

@media (max-width: 900px) { .pc-paper-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 760px) {
  .pc-header-tools { gap: 6px; }
  .pc-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-note, .pc-note.fresh, .pc-note.remote-drag { animation: none !important; transition: none !important; }
}

/* ---------- search (search.js): the miniconf's search box ---------- */
.pc-search-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 14px; }
/* An expanded wall's copy of the row (app.js dockSearch): above the board, its list over it. */
.pc-fs-search { position: relative; z-index: 6; padding: 8px 12px; border-bottom: 2px solid var(--pc-border); background: var(--pc-panel); }
.pc-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* In its row the box takes the room left of the view switch, so both share one line. */
.pc-search-row > .pc-search { flex: 1 1 480px; min-width: 0; }
.pc-search-field { position: relative; display: flex; flex: 0 1 360px; min-width: 0; }
.pc-search-input {
  flex: 1; min-width: 0; padding: 6px 10px; font: inherit; font-size: .85rem; color: var(--ink);
  background: var(--pc-panel); border: 2px solid var(--pc-border); border-right: 0; border-radius: 0; outline: none;
}
.pc-search-input:focus { border-color: var(--gold); }
.pc-search-input::-webkit-search-cancel-button { display: none; }
html .pc-search button.pc-search-clear {
  padding: 0 11px; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  color: var(--muted); background: var(--pc-panel-2); border: 2px solid var(--pc-border); border-radius: 0; box-shadow: none;
}
html .pc-search button.pc-search-clear:hover { color: var(--ink); }
.pc-search-menu {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto;
  padding: 4px 0; background: var(--pc-panel); border: 2px solid var(--pc-border); box-shadow: 4px 4px 0 rgba(0, 0, 0, .18);
}
.pc-search-option { padding: 5px 12px; font-size: .82rem; line-height: 1.3; color: var(--ink); cursor: pointer; }
.pc-search-option strong { font-weight: 900; color: var(--pc-title); }
.pc-search-option:hover, .pc-search-option.is-cursor { background: var(--gold); color: #0b0e17; }
.pc-search-option:hover strong, .pc-search-option.is-cursor strong { color: #0b0e17; }
.pc-search-count { font-size: .74rem; font-weight: 900; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.pc-search.is-active .pc-search-count { color: var(--gold); }
/* What a search leaves out, on the walls: hidden in place. */
.pc-pin.pc-filtered-out, .pc-note.pc-filtered-out { display: none !important; }
.pc-search-results { margin-top: 4px; }

/* ---------- Paper Wall: every paper pinned on one board (wall.js) ---------- */
.pc-wall { margin-top: 4px; }
.pc-wall-layer { position: absolute; inset: 0; z-index: 0; }
/* Above every note (notes use z-index = their stacking order; a dragged note 99999). */
.pc-wall-layer.pc-wall-pins { z-index: 1000000; pointer-events: none; }
.pc-wall-pins .pc-pin { pointer-events: auto; }
.pc-wall-region {
  position: absolute; box-sizing: border-box;
  border: 6px dashed var(--pc-wall-line); background: var(--pc-wall-region);
}
.pc-wall-region-head {
  display: block; padding: 34px 50px 0; cursor: zoom-in; color: var(--pc-title); outline-offset: -10px;
}
.pc-wall-region-name { display: block; font-size: 120px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.pc-wall-region-time { display: flex; gap: 60px; margin-top: 22px; font-size: 44px; font-weight: 700; color: var(--muted); }
.pc-wall-region-time .pc-time-venue { display: none; }
.pc-wall-region-time .pc-time-sep { margin: 0 .3em; }
:root { --pc-wall-line: rgba(78, 230, 255, .2); --pc-wall-region: rgba(78, 230, 255, .035); }
html[data-theme="light"] { --pc-wall-line: rgba(16, 42, 82, .16); --pc-wall-region: rgba(16, 42, 82, .025); }

/* A pinned paper: a printed card with a tack. Fixed: it pans the wall instead of moving. */
.pc-pin {
  position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 16px 12px; background: #fbf8f1; color: #17181a;
  border: 2px solid var(--pc-note-border); box-shadow: var(--pc-note-shadow); cursor: grab;
}
.pc-pin-tack {
  position: absolute; top: -13px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a8a 0 18%, #e2362b 45%, #9d1a14 100%);
  box-shadow: 2px 4px 3px rgba(0, 0, 0, .35);
}
.pc-pin-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-pin-id { font-family: "Courier New", ui-monospace, monospace; font-size: 12px; font-weight: 900; color: #8a5a00; letter-spacing: .05em; }
html .pc-pin a.link-button.pc-pin-comment { font-size: 11px; padding: 3px 8px; }
.pc-pin-title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-pin-title a { color: #10233d; text-decoration: none; }
.pc-pin-title a:hover, .pc-pin-title a:focus-visible { color: #0969da; text-decoration: underline; text-underline-offset: 3px; }
.pc-pin .link-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.pc-pin-mode { display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 800; color: #8a5a00; }
/* "On the Wall →" / "In the Hall →": the same paper in the other view. */
a.pc-view-jump { font-size: .66rem; font-weight: 900; color: var(--pc-jump); text-decoration: none; white-space: nowrap; cursor: pointer; }
a.pc-view-jump:hover, a.pc-view-jump:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.pc-pin a.pc-view-jump { font-size: 11px; --pc-jump: #0969da; }
:root { --pc-jump: var(--cyan); }
html[data-theme="light"] { --pc-jump: #0969da; }
html .pc-pin .link-row a.link-button { font-size: 11px; padding: 3px 7px; }
.pc-pin-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; font-size: 11px; line-height: 1.3; }
.pc-pin-authors { min-width: 0; color: #3d4757; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-pin-time { flex: none; text-align: right; font-weight: 800; color: #1c2433; white-space: nowrap; }
.pc-pin-time .pc-time-venue { display: none; }
.pc-pin.pc-paper-focus { outline: 6px solid var(--gold); outline-offset: 6px; }

/* ---------- Canon easter egg: links and leaderboard in its dialog (canon-egg.js) ---------- */
.canon-egg-funfact-copy p { margin: 0 0 8px; }
a.canon-egg-paper-link { color: inherit; text-decoration: none; }
a.canon-egg-paper-link:hover, a.canon-egg-paper-link:focus-visible { color: var(--pc-jump); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.canon-egg-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 18px; }
.canon-egg-links:empty { display: none; }
a.canon-egg-link { font-weight: 900; color: var(--pc-jump); text-decoration: none; cursor: pointer; }
a.canon-egg-link:hover, a.canon-egg-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.canon-egg-board {
  position: relative; list-style: none; margin: 6px 0 12px; padding: 2px 4px 2px 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-content: flex-start;
  max-height: min(300px, 40vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* One finder: a small name tag; they wrap into as many lines as needed. */
.canon-egg-board li {
  max-width: 100%; padding: 3px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .82rem; font-weight: 800; line-height: 1.5; cursor: default;
  border: 1px solid var(--pc-border); background: rgba(255, 255, 255, .5);
}
html:not([data-theme="light"]) .canon-egg-board li { background: rgba(255, 255, 255, .06); }
.canon-egg-board li.is-me { color: var(--pc-jump); border-color: currentColor; }
.canon-egg-board li.canon-egg-gap { border: 0; background: none; padding: 3px 2px; opacity: .55; }

/* ---------- speed ---------- */
/* Each note and card lays out on its own: a change inside one never re-lays out the others. */
.pc-note, .pc-pin { contain: layout style; }
/* Posted, waiting for the server's confirmation (a fraction of a second). */
.pc-note.is-pending { opacity: .72; }

.pc-test-notice {
  margin: 16px;
  padding: 12px 16px;
  border: 2px solid var(--danger);
  background: var(--pc-panel);
  color: var(--ink);
  box-shadow: var(--pc-shadow-sm);
}