/* The profile card: laid out as a Bluesky profile is — banner, a large
   picture over its edge, the name, the whole @handle, the bio, the counts —
   and printed in the zine: a stuck-on plate with a comic's outline, Ben-Day
   dots where there is no banner, the picture a die-cut sticker, the counts
   framed like the panel's readings and every section under a caption box.
   The plate itself is plate.css's `.plate`, outlined by zine.css.

   Every selector is under .detail or .card-: this file is loaded beside
   style.css and must not have an opinion about anything it did not build.
   Running text, numbers and handles stay in Inter on paper at AA. */

.detail {
  position: fixed;
  top: calc(var(--bar-h, 46px) + 14px);
  left: 14px;
  bottom: calc(var(--legend-h, 36px) + 18px);
  width: 340px;
  display: flex;
  flex-direction: column;
  padding: 0;
  font: 14px/1.5 var(--text);
  color: var(--ink);
  /* Above the canvas, below the hover cards, which are the pointer's own feedback
     and has to survive being over the card. */
  z-index: 4;
  animation: card-in 0.18s ease-out;
}

/* The card is a flex column, and `display: flex` would otherwise win over
   the hidden attribute and leave a closed card on screen. */
.detail[hidden] { display: none; }

@keyframes card-in {
  from { transform: translateY(10px) rotate(-1deg); opacity: 0; }
}

/* The whole card scrolls as one, as a profile does. A card with four
   independently scrolling regions is a puzzle, and only the recent list is
   ever long. Cut round to the plate's corners, so the banner is too. */
.detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: inherit;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

/* ---- banner, picture, name ---- */

.card-banner {
  position: relative;
  height: 112px;
  border-bottom: 3px solid var(--comic, var(--ink));
  /* No banner: Ben-Day dots of paper on the operator's ink, and a pass of
     pink across it off-register. */
  background:
    radial-gradient(circle, rgba(255, 250, 240, 0.55) 2.4px, transparent 2.9px) 0 0 / 10px 10px,
    radial-gradient(circle at 78% 30%, rgba(255, 72, 176, 0.55) 0 22%, transparent 22.5%),
    var(--card-ink, var(--block));
}
.card-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-banner-image[hidden] { display: none; }

.card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  font: 700 22px/1 var(--text);
  color: var(--ink);
  background: var(--sun);
  border: 2.5px solid var(--comic, var(--ink));
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--comic, var(--ink));
  cursor: pointer;
  transform: rotate(-6deg);
}
.card-close:hover { background: var(--pink); }
.card-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.card-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
}
/* The picture, a die-cut sticker stuck half over the banner's edge. */
.card-avatar {
  width: 88px;
  height: 88px;
  margin-top: -50px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper);
  border: 4px solid var(--bubble);
  box-shadow: 0 0 0 3px var(--comic, var(--ink)), 4px 5px 0 3px var(--comic, var(--ink));
  transform: rotate(-4deg);
}

/* The links out, where a profile has its follow button: stickers. */
.card-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font: 600 13px/1.4 var(--text);
  color: var(--ink);
  text-decoration: none;
  background: var(--bubble);
  border: 2.5px solid var(--comic, var(--ink));
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--comic, var(--ink));
}
.card-link:first-child { background: #c4dcff; transform: rotate(-2deg); }
.card-link:last-child { background: var(--sun); transform: rotate(1.5deg); }
.card-link:hover { background: var(--pink); }
.card-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.card-link[hidden] { display: none; }
.card-link-arrow { font-weight: 700; }

.card-who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 4px;
}
.card-name {
  margin: 0;
  font: 400 26px/1.1 var(--display);
  letter-spacing: 0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* Display type, so the pink may land off-register. */
  text-shadow: 2px 1.5px 0 rgba(255, 72, 176, 0.75);
}
.card-handle-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.card-handle { min-width: 0; font-size: 15px; user-select: text; }

/* The labels a profile shows under its handle, as stickers. */
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  font: 12px/1.5 var(--mod, var(--text));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--comic, var(--ink));
  border-radius: 3px;
}
.card-tag-bot { color: #fffaf0; background: var(--comic, var(--ink)); transform: rotate(-2deg); }
.card-tag-vendor { text-transform: none; letter-spacing: 0.02em; }
.card-tag .logo { font-size: 14px; }

.card-bio {
  margin: 2px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.card-bio[hidden] { display: none; }

/* ---- the counts, where a profile has its followers ---- */

.card-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 14px 4px;
  padding: 8px;
  background: var(--benday-pink, var(--pink)), var(--sun);
  border: 3px solid var(--comic, var(--ink));
  box-shadow: 4px 4px 0 var(--comic, var(--ink));
  transform: rotate(-0.6deg);
}
.card-count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3px 8px 2px;
  background: #fff6b0;
  border: 2.5px solid var(--comic, var(--ink));
}
.card-count dd { margin: 0; font: 700 20px/1.1 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.card-count dt { font: 11px/1.3 var(--mod, var(--text)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }

/* ---- the facts, each under a caption box ---- */

.card-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 14px 18px;
}
.detail-block { display: flex; flex-direction: column; gap: 4px; }
.detail-block[hidden] { display: none; }

/* A caption box, as a comic sets its narration: yellow, black-ruled,
   capitals; the same as the panel's "similar work". */
.detail-caption { margin: 0 0 2px; font-weight: 400; }
.detail-caption > span {
  display: inline-block;
  padding: 4px 8px 3px;
  font: 13px/1 var(--mod, var(--text));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun);
  border: 2.5px solid var(--comic, var(--ink));
  box-shadow: 2px 2px 0 var(--comic, var(--ink));
}

.detail-sub { color: var(--ink-dim); font-size: 12px; letter-spacing: 0.03em; }
.detail-line { color: var(--ink-dim); }
.detail-vendor { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.detail-vendor .logo { font-size: 18px; }
.detail-model { overflow-wrap: anywhere; }
.detail-repo { display: block; overflow-wrap: anywhere; color: var(--mention); }

/* A caption with its copy button pushed to the far end, so a value that
   wraps to three lines wraps under nothing. */
.detail-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.detail-value {
  display: block;
  /* Selectable and breakable: a DID is one long unbreakable-looking token and
     the point of putting it here is that it can leave. */
  user-select: text;
  word-break: break-all;
  color: var(--ink);
  font: 13px/1.45 var(--mono);
}

.detail-copy-button {
  flex: none;
  padding: 0 8px;
  font: 600 12px/1.6 var(--text);
  color: var(--ink);
  background: var(--bubble);
  border: 2px solid var(--comic, var(--ink));
  border-radius: 999px;
  box-shadow: 1.5px 1.5px 0 var(--comic, var(--ink));
  cursor: pointer;
}
.detail-copy-button:hover { background: var(--sun); }

.detail-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  color: var(--ink-dim);
}
.detail-sep { color: var(--rule); }
.detail-hop { color: var(--ink-dim); }
.detail-hop-here { color: var(--ink); font-weight: 700; }

.detail-work { color: var(--ink); font-weight: 600; word-break: break-word; }
.detail-work-alone { color: var(--ink-dim); font-weight: 400; }

/* What it said lately, each line torn off along a dotted rule. */
.detail-scrobbles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.detail-scrobble {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1.5px dotted var(--rule);
  /* Never shrink, for the same reason the stream list does not: a run of
     short lines squeezed under their own line height overprints. */
  flex: none;
}
.detail-emoji { flex: none; width: 1.3em; }
.detail-said {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-age {
  flex: none;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.detail-effort { flex: none; color: var(--ink-dim); }

.detail-quiet { color: var(--ink-dim); }
.detail-quiet[hidden] { display: none; }

/* An agent whose account has been deleted while the card was open. The
   identity and the URIs stay readable — they are the reason somebody would
   still be looking — and the card says the thing is over. */
.detail-gone .card-banner { filter: grayscale(1); }
.detail-gone .card-name { color: var(--warn); text-decoration: line-through; }

/* Narrower than the plate and both panels: a sheet up from the bottom,
   over the stream's sheet, as a phone shows a profile. */
@media (max-width: 1100px) {
  .detail {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    max-height: min(74vh, 640px);
    z-index: 4;
    animation-name: card-up;
  }
  .card-banner { height: 84px; }
  .card-avatar { width: 72px; height: 72px; margin-top: -40px; }
}

@keyframes card-up {
  from { transform: translateY(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .detail { animation: none; }
}