/* src/web/static/css/edition_community_hub.css
   Edition page community hub, hero social pill, and dossier marketplace strip.
   Reuses the gold edition atmosphere (--accent-canonical). */

.edition-hub { margin-top: 1.25rem; }

/* skeleton */
.hub-skeleton { display: grid; gap: .5rem; padding: 1rem 0; }
.hub-skel-line { height: 14px; border-radius: 6px; background: var(--surface-2); }
.hub-skel-line--lg { width: 40%; height: 20px; }

/* collapsed invite */
.hub-invite { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-canonical) 8%, transparent), transparent); }
.hub-invite-lead { color: var(--text-muted); }
.hub-invite-cta { border: 1px solid color-mix(in srgb, var(--accent-canonical) 35%, transparent);
  background: color-mix(in srgb, var(--accent-canonical) 6%, transparent);
  color: var(--accent-canonical); border-radius: 16px; padding: .3rem .8rem; cursor: pointer; font: inherit; }

/* hub card */
.hub-card { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; background: var(--surface); }
.hub-head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.hub-stat-v { font-size: 1.1rem; } .hub-stat-v--gold { color: color-mix(in srgb, var(--accent-canonical) 80%, var(--shadow-ink)); }
.hub-stat-k { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.hub-stat--readers { position: relative; }
.hub-stat--readers .hub-stat-btn {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .58rem;
  min-width: 8.25rem;
  padding: .5rem .62rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--community-shadow-ink) 3%, transparent);
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.hub-stat--readers .hub-stat-btn:hover,
.hub-stat--readers .hub-stat-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent-canonical) 34%, var(--border));
  background: color-mix(in srgb, var(--accent-canonical) 5%, var(--surface));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--community-shadow-ink) 7%, transparent);
}
.hub-stat--readers .hub-stat-copy {
  min-width: 0;
}
.hub-stat--readers .hub-stat-btn .hub-stat-v {
  display: block;
  line-height: .95;
}
.hub-reader-stack {
  display: inline-flex;
  align-items: center;
  min-width: 2.7rem;
}
.hub-reader-avatar-frame {
  display: inline-flex;
  margin-left: -.45rem;
}
.hub-reader-avatar-frame:first-child {
  margin-left: 0;
}
.hub-reader-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1.5px solid var(--surface);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  object-fit: cover;
}
.hub-reader-avatar-fallback {
  text-transform: uppercase;
}
.hub-stat--readers .sp-pop {
  top: calc(100% + .45rem);
  left: 0;
  right: auto;
  width: 280px;
  padding: .7rem .8rem .55rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--community-shadow-ink) 10%, transparent);
}
.hub-stat--readers .ms-label {
  margin: 0 0 .25rem;
  padding: 0 0 .45rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hub-stat--readers .sp-pop-row {
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .48rem 0;
  border-top: 1px solid var(--border);
  font-size: .86rem;
  color: var(--text);
}
.hub-stat--readers .sp-pop-row:first-of-type {
  border-top: 0;
}
.hub-reader-row-main {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.hub-reader-row-main .hub-reader-avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-color: var(--border);
}
.hub-reader-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-stat--readers .sp-pop-row .badge {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hub-recommend { margin-left: auto; border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 8px; padding: .4rem .8rem; cursor: pointer; font: inherit; }
.hub-recommend.is-on { border-color: var(--accent-canonical); color: var(--accent-canonical); }

/* tabs — shared .cc-tabs slider draws the gold indicator (--cc-tab-accent set inline) */
.cc-tabs.hub-tabs { gap: .25rem; margin: .9rem 0 0; }
.hub-tab { padding: .55rem .9rem; color: var(--text-muted); }
.hub-tab.is-active { color: var(--text); font-weight: 600; }
.hub-tab-ct { font-size: .7rem; border: 1px solid var(--border); border-radius: 9px; padding: 0 .4rem; }
.hub-tab.is-active .hub-tab-ct { background: var(--accent-canonical); color: var(--on-image); border-color: var(--accent-canonical); }
.hub-panes { padding-top: 1rem; }
.hub-pane { }

/* hero social pill */
.social-pill { display: inline-flex; align-items: stretch; border: 1px solid var(--community-pill-border); border-radius: 18px;
  background: var(--community-pill-bg); font-size: .82rem; color: var(--community-pill-text); position: relative; }
.sp-seg { display: flex; align-items: center; gap: .35rem; padding: .3rem .7rem; cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
.sp-seg + .sp-seg { border-left: 1px solid var(--community-pill-border); }
.sp-seg--reviews { color: color-mix(in srgb, var(--accent-canonical) 80%, var(--shadow-ink)); }
.social-pill--quiet { background: transparent; border-style: dashed; color: var(--text-muted); }
.sp-av { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--on-image); background: var(--community-avatar-bg); margin-left: -8px; }
.sp-av:first-child { margin-left: 0; }
.sp-pop { position: absolute; right: 0; top: 112%; width: 250px; z-index: 20; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 14%, transparent); padding: .6rem;
  max-height: min(420px, calc(100vh - 1rem)); overflow-y: auto; }
.sp-pop-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .1rem; font-size: .8rem; }

/* dossier marketplace strip — vertical card so it never crams the narrow rail */
.mkt-strip { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; width: 100%;
  margin-top: .6rem; padding: .6rem .7rem; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, var(--accent-canonical) 25%, var(--border)); border-radius: 9px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-canonical) 12%, transparent), transparent);
  transition: border-color .15s ease, background-color .15s ease; }
.mkt-strip:hover { border-color: color-mix(in srgb, var(--accent-canonical) 50%, var(--border)); }
.mkt-strip-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--text-muted); }
.mkt-strip-stats { display: flex; gap: .4rem; }
.mkt-strip .mkt-stat { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 0; min-width: 0;
  padding: .35rem .5rem; border-radius: 7px;
  background: color-mix(in srgb, var(--accent-canonical) 8%, transparent); }
.mkt-strip .mkt-stat small { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.mkt-strip .mkt-stat b { font-size: 1.05rem; line-height: 1.1; color: color-mix(in srgb, var(--accent-canonical) 80%, var(--shadow-ink)); }
.mkt-strip-empty { font-size: .82rem; color: var(--text-muted); }
.mkt-strip .mkt-strip-go { color: var(--accent-canonical); font-weight: 600; font-size: .85rem; }

/* Friends-who-recommended reuses .hub-stat--readers styling; this hook gives the
   count a canonical-gold accent and keeps its popover anchored like readers. */
.hub-stat--recfriends { position: relative; }
.hub-stat--recfriends .hub-stat-v { color: var(--accent-canonical); }