/* Page rules on top of paranoia.css. Colours come from its variables. */

[hidden] { display: none !important; }

/* no passing shine on the panel heads */
.pm-panel > .head::after { content: none; animation: none; }

.site { flex: 1; display: flex; flex-direction: column; overflow-x: clip; }

/* buttons: roomier than the kit's 16px small, label centred and never wrapped */
.pm-btn { white-space: nowrap; }
.pm-btn.small { height: var(--button-h); padding: 0 12px; }
/* a panel head holding a button grows so the button has equal air above and below */
.pm-panel > .head:has(.pm-btn) { height: auto; min-height: calc(var(--head-h) + 8px); }

/* page: one column, then centre + one rail, then rails either side of the centre */
.pm-page.home { max-width: 460px; }
.pm-page.home > .col { min-width: 0; }
.pm-page.home > .col > .pm-panel { min-width: 0; }
@media (max-width: 899px) {
  .pm-page.home { display: flex; flex-direction: column; gap: 8px; }
  .pm-page.home > .col { display: contents; }
  #profile { order: 1; }
  #posts { order: 2; }
  #presence { order: 3; }
  #notes { order: 4; }
  #notes + .pm-panel { order: 5; }
}
@media (min-width: 900px) {
  .pm-page.home {
    display: grid;
    align-items: start;
    gap: 8px;
    max-width: 780px;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "mid left" "mid right" "mid .";
  }
  .pm-page.home > .mid { grid-area: mid; }
  .pm-page.home > .left { grid-area: left; }
  .pm-page.home > .right { grid-area: right; }
}
/* empty right rail (presence hidden) takes no row; the 1fr side tracks keep the centre column central */
.pm-page.home > .right:not(:has(.pm-panel:not([hidden]))) { display: none; }
@media (min-width: 1080px) {
  .pm-page.home {
    max-width: 1100px;
    grid-template-columns: minmax(0, 1fr) 460px minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "left mid right";
  }
}

/* logo: one flat image flipping about its vertical axis */
.pm-eye-wrap { flex: none; width: 176px; height: 176px; perspective: 900px; }
.pm-eye {
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  will-change: transform;
  animation: pm-spin 10s linear infinite;
}
@keyframes pm-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .pm-eye { animation: none; will-change: auto; } }

.pm-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; width: 100%; max-width: 288px; }

/* visitor counter: one fixed slot per digit, each a column of 0-9 that rolls to its digit */
.pm-counter {
  --digit-h: calc(var(--line) * 3);
  --digit-w: calc(var(--digit-h) * .45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--digit-h);
  transition: opacity .4s;
}
.pm-counter:empty { visibility: hidden; }
.pm-digit { display: block; flex: none; width: var(--digit-w); height: var(--digit-h); overflow: hidden; }
.pm-reel {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * var(--digit-h) * -1));
  transition: transform 1.4s var(--ease);
  transition-delay: calc(var(--k, 0) * 90ms);
}
.pm-reel img { display: block; flex: none; width: var(--digit-w); height: var(--digit-h); }

/* note form */
.pm-left { text-align: right; }
.pm-left.low { color: var(--text); font-weight: bold; }
.pm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#note-form { display: flex; flex-direction: column; gap: var(--gap); }
#note-form .pm-btn { margin-top: var(--gap); }

/* wall of notes */
.pm-wall { list-style: none; margin: 0; padding: 0; }
.pm-note-row { display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad); border-top: 1px solid var(--border); }
.pm-note-row:first-child { border-top: 0; }
.pm-note-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pad); min-height: var(--button-h); }
.pm-note-head .grow { flex: 1; }
.pm-act { display: inline-flex; align-items: center; gap: var(--gap); }
.pm-note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-empty { padding: var(--pad); }
#wall-more { width: calc(100% - var(--pad) * 2 - 2px); margin: var(--pad); }
#wall-more:first-child { margin-top: 0; }

/* moderation dialog */
.pm-dlg { width: min(calc(var(--width) / 2), calc(100% - var(--pad) * 2)); max-height: 80vh; overflow: auto; padding: 0; color: inherit; background: var(--box); border: 0; }
.pm-dlg::backdrop { background: color-mix(in srgb, var(--dark) 80%, transparent); }
.pm-dlg .pm-stack { gap: var(--pad); }
button.pm-tab { font: inherit; }

.pm-profile { align-items: center; gap: 8px; text-align: center; overflow-wrap: anywhere; }
/* full-bleed: cancel the body padding and its 1px margin so the line meets the panel borders */
.pm-panel > .body > .pm-sep { align-self: stretch; margin: 4px calc(var(--pad) * -1 - 1px); }
#site-name { color: var(--accent-hi); }

/* presence */
.pm-who, .pm-spotify { display: flex; align-items: center; gap: var(--pad); min-width: 0; }
.pm-who-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pm-avatar, .pm-cover { flex: none; display: block; background: var(--field); border: 1px solid var(--border); }
.pm-track { display: flex; flex-direction: column; gap: var(--gap); }

/* posts feed */
.pm-feed-title { overflow-wrap: anywhere; }
.pm-feed-media { display: flex; flex-wrap: wrap; gap: var(--gap); }
.pm-feed-thumb { padding: 0; line-height: 0; max-width: 100%; background: var(--field); border: 1px solid var(--border); cursor: zoom-in; transition: border-color var(--t); }
.pm-feed-thumb:hover { border-color: var(--border-hi); }
.pm-feed-thumb img, .pm-feed-video { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; }
.pm-feed-video { background: var(--field); border: 1px solid var(--border); }
.pm-feed-media.multi .pm-feed-thumb { max-width: calc(50% - var(--gap)); }

/* lightbox */
.pm-lb { padding: 0; color: inherit; max-width: calc(100vw - var(--pad) * 2); max-height: calc(100vh - var(--pad) * 2); min-width: min(16rem, 100%); overflow: auto; }
.pm-lb::backdrop { background: color-mix(in srgb, var(--dark) 85%, transparent); }
.pm-lb .title { gap: var(--pad); }
.pm-lb .title .grow { flex: 1; }
.pm-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-lb .title button.x { margin-left: 0; padding: 0; border: 0; background: none; }
.pm-lb-body { display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad); }
.pm-lb-body img { display: block; margin: 0 auto; max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; }

/* admin: posts composer */
.pm-dlg.wide { width: min(calc(var(--width) * .7), calc(100% - var(--pad) * 2)); }
.pm-drop { display: flex; align-items: center; justify-content: center; gap: var(--gap); padding: var(--pad); background: var(--field); border: 1px dashed var(--border); transition: border-color var(--t); }
.pm-drop.over { border-color: var(--accent); }
.pm-up-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--gap); }
.pm-up-list:empty { display: none; }
.pm-up { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; padding: var(--gap); background: var(--field); border: 1px solid var(--border); }
.pm-up-thumb { display: flex; align-items: center; justify-content: center; height: 6rem; overflow: hidden; background: var(--box); }
.pm-up-thumb img, .pm-up-thumb video { max-width: 100%; max-height: 100%; object-fit: contain; }
.pm-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pm-link-row .pm-field { flex: 1 1 8rem; min-width: 0; }

/* official lanyard.cafe widget: its card is inline style="" (pastel when allowed, bare when the CSP blocks it); !important wins over both */
#lc-embed { left: 0 !important; bottom: 0 !important; font: var(--size)/var(--line) var(--font) !important; color: var(--text) !important; }
#lc-embed > section { margin: 0 !important; }
#lc-embed > section > div { display: block !important; min-width: 0 !important; max-width: 100vw !important; padding: var(--gap) !important; font: inherit !important; color: var(--text) !important; background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#lc-embed > section > div > div { display: flex !important; gap: var(--gap) !important; margin: 0 !important; }
#lc-embed > section > div > div:not(:last-child) { margin-bottom: var(--gap) !important; }
#lc-embed a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 auto; position: relative; height: var(--button-h) !important; margin: 1px !important; padding: 0 var(--pad) !important; gap: 6px !important; font: inherit !important; font-weight: normal !important; white-space: nowrap !important; text-decoration: none !important; color: var(--text) !important; background: linear-gradient(var(--tab-top), var(--tab-bot)) !important; border: 1px solid var(--field-border) !important; border-radius: 0 !important; box-shadow: 0 0 0 1px var(--border) !important; transition: box-shadow .12s, filter .12s; }
#lc-embed a:hover { color: var(--accent-hi) !important; box-shadow: 0 0 0 1px var(--border-hi) !important; filter: brightness(1.15); }
#lc-embed a:active { filter: brightness(.9); }
#lc-embed p { margin: var(--gap) 0 0 !important; font: inherit !important; color: var(--text-dim) !important; }
#lc-embed p span { font-weight: normal !important; color: var(--text) !important; }
/* the fixed bottom-left widget would sit on the footer bar: lift the bar's content above it */
body:has(#lc-embed > section) .pm-bar.foot { height: auto; min-height: var(--head-h); padding-bottom: calc(var(--head-h) * 2 + var(--pad)); align-items: flex-start; padding-top: 3px; }