/* R27 Midnight polish
   Loaded after the base demo and R27 theme. This closes legacy white-only
   community controls and reduces mobile floating-control obstruction. */

:root[data-theme="dark"] .community-bar {
  color: var(--subtle);
  border-top: 1px solid rgba(255, 255, 255, .055);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] :is(
  .reaction-quick-set,
  .compact-reaction-set,
  .compact-reactions.quick-reactions,
  .article-community .compact-reactions.quick-reactions,
  .community-bar .community-meta
) {
  background: transparent;
}

:root[data-theme="dark"] .article-community .compact-reactions.quick-reactions,
:root[data-theme="dark"] .compact-reactions.quick-reactions {
  gap: 3px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .compact-reactions .compact-reaction {
  color: #d9cfd7;
  border-color: rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .014));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .022) inset;
}

:root[data-theme="dark"] .compact-reactions .compact-reaction .reaction-token {
  color: var(--reaction-ink);
  background: transparent;
  filter: none;
}

:root[data-theme="dark"] .compact-reaction-set .reaction-token.rose { --reaction-ink: #ff6dab; }
:root[data-theme="dark"] .compact-reaction-set .reaction-token.coral { --reaction-ink: #ff8c86; }
:root[data-theme="dark"] .compact-reaction-set .reaction-token.lilac { --reaction-ink: #c6a0f6; }
:root[data-theme="dark"] .compact-reaction-set .reaction-token.amber { --reaction-ink: #f4c879; }
:root[data-theme="dark"] .compact-reaction-set .reaction-token.sage { --reaction-ink: #75d9a7; }
:root[data-theme="dark"] .compact-reaction-set .reaction-token.blue { --reaction-ink: #83b8ef; }

:root[data-theme="dark"] .compact-reactions .compact-reaction:hover:not(:disabled),
:root[data-theme="dark"] .compact-reactions .compact-reaction:active:not(:disabled) {
  color: #fff8fc;
  border-color: rgba(255, 79, 154, .28);
  background: rgba(255, 79, 154, .09);
}

:root[data-theme="dark"] .compact-reactions .compact-reaction:focus-visible {
  z-index: 3;
  color: #fff8fc;
  outline: 2px solid #ff94c4;
  outline-offset: 2px;
  background: rgba(255, 79, 154, .10);
}

:root[data-theme="dark"] .compact-reactions .compact-reaction.picked,
:root[data-theme="dark"] .compact-reactions .compact-reaction.picked:hover:not(:disabled) {
  color: #ffd1e5;
  border-color: rgba(255, 79, 154, .48);
  background: linear-gradient(180deg, rgba(255, 79, 154, .18), rgba(255, 79, 154, .09));
  box-shadow: 0 0 0 1px rgba(255, 79, 154, .12) inset, 0 8px 22px rgba(255, 79, 154, .07);
}

:root[data-theme="dark"] .compact-reactions .compact-reaction.picked .reaction-token {
  color: #ff91c0;
  background: transparent;
  opacity: 1;
  filter: none;
}

:root[data-theme="dark"] .compact-reactions.has-selection .compact-reaction:not(.picked) {
  color: #a99daa;
  opacity: .78;
}

:root[data-theme="dark"] .compact-reactions.has-selection .compact-reaction:not(.picked) .reaction-token {
  color: #8f828f;
  background: transparent;
  opacity: .72;
  filter: grayscale(.35);
}

:root[data-theme="dark"] .reaction-selected-tick {
  color: #140d12;
  background: #ff72ae;
  box-shadow: 0 0 0 2px #171219, 0 0 13px rgba(255, 79, 154, .32);
}

:root[data-theme="dark"] .community-bar .community-meta {
  gap: 7px;
}

:root[data-theme="dark"] .community-bar .community-meta :is(.community-count, .community-action) {
  color: #a99daa;
  border: 1px solid transparent;
  background: transparent;
}

:root[data-theme="dark"] .community-bar .community-meta button:hover {
  color: #ff9cc8;
  border-color: rgba(255, 79, 154, .13);
  background: rgba(255, 79, 154, .07);
}

:root[data-theme="dark"] .community-bar .participation-label {
  color: #8f828f;
}

:root[data-theme="dark"] .reaction-hint {
  color: #f8eff6;
  border-color: rgba(255, 255, 255, .10);
  background: rgba(22, 18, 25, .98);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .42), 0 1px 0 rgba(255, 255, 255, .035) inset;
}

:root[data-theme="dark"] .reaction-hint small {
  color: #b4a8b5;
}

:root[data-theme="dark"] dialog.reaction-dialog-quick {
  --ink: #fff9fd;
  --muted: #b4a8b5;
  --berry: #ff4f9a;
  --surface: #151219;
  --surface-alt: #1d1820;
  --berry-wash: #2b1420;
  --line: #352d38;
  color: var(--ink);
  border-color: rgba(255, 255, 255, .10);
  background: linear-gradient(145deg, #211a24, #111015 72%);
  box-shadow: 0 38px 120px rgba(0, 0, 0, .76), 0 1px 0 rgba(255, 255, 255, .04) inset;
}

:root[data-theme="dark"] dialog.reaction-dialog-quick::backdrop {
  background: rgba(4, 3, 5, .76);
  backdrop-filter: blur(12px) saturate(.82);
}

:root[data-theme="dark"] dialog.reaction-dialog-quick :is(.reaction-choice, .reaction-extra, .reaction-story, .reaction-footnote) {
  border-color: var(--line);
}

:root[data-theme="dark"] dialog.reaction-dialog-quick .reaction-choice {
  background: rgba(255, 255, 255, .025);
}

:root[data-theme="dark"] dialog.reaction-dialog-quick .reaction-choice:hover,
:root[data-theme="dark"] dialog.reaction-dialog-quick .reaction-choice.picked {
  border-color: rgba(255, 79, 154, .38);
  background: rgba(255, 79, 154, .10);
}

:root[data-theme="dark"] .demo-action:not(.support) {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(17, 16, 21, .86);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .30), 0 1px 0 rgba(255, 255, 255, .035) inset;
}

:root[data-theme="dark"] .demo-action:not(.support):hover {
  border-color: rgba(255, 79, 154, .35);
  background: rgba(31, 24, 33, .96);
}

@media (max-width: 767px) {
  /*
   * WebKit shell stability:
   * - isolate sticky/fixed navigation into explicit compositor layers
   * - keep support/bug controls in document flow so they cannot cover stories
   * - reserve enough scroll tail for the fixed safe-area navigation
   */
  .mobile-header,
  .bottom-nav {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
    contain: paint;
  }

  .main-column,
  .wide .main-column {
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }

  .demo-actions {
    position: relative;
    inset: auto;
    z-index: 1;
    width: min(100%, 640px);
    margin: 0 auto;
    padding: 12px 21px calc(86px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    background: var(--surface);
  }

  .demo-action {
    position: relative;
    width: auto;
    min-width: 0;
    min-height: 44px;
    max-width: 230px;
    flex: 1 1 0;
    padding: 9px 12px;
    border-radius: 12px;
    box-shadow: none;
  }

  .demo-action span {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
  }

  :root[data-theme="dark"] .community-bar {
    padding-top: 8px;
  }

  :root[data-theme="dark"] .compact-reactions.quick-reactions {
    gap: 2px;
  }

  :root[data-theme="dark"] .compact-reactions .compact-reaction {
    min-height: 32px;
    border-radius: 7px;
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"] .compact-reactions .compact-reaction {
    border-width: 2px;
  }
}


/* R32 — navigation consistency: Building The Yarn uses the same active language
   as primary reader navigation instead of remaining visually inert. */
.write-link {
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  margin-inline: -4px;
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.write-link:hover:not(.active) {
  color: var(--berry);
  border-color: var(--rose-line);
  background: var(--berry-wash);
  transform: translateY(-1px);
}
.write-link.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--berry) 24%, transparent);
  background: linear-gradient(118deg, color-mix(in srgb, var(--berry) 34%, var(--deep)) 0%, var(--deep) 58%, color-mix(in srgb, var(--deep) 88%, #000) 100%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--deep) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
.write-link.active::before {
  content: "";
  position: absolute;
  inset-block: 9px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: var(--berry);
  box-shadow: 0 0 14px color-mix(in srgb, var(--berry) 44%, transparent);
}
.write-link.active > .icon:first-child {
  color: var(--berry);
}
.write-link.active > .icon:last-child {
  color: #fff;
}
:root[data-theme="dark"] .write-link:hover:not(.active) {
  color: #fff8fc;
  border-color: rgba(255,79,154,.18);
  background: rgba(255,79,154,.07);
}
:root[data-theme="dark"] .write-link.active {
  color: #fffafd;
  border-color: rgba(255,102,169,.20);
  background: var(--brand-nav);
  box-shadow: 0 12px 28px rgba(30,8,25,.34), inset 0 1px 0 rgba(255,255,255,.05);
}


/* R33 — persistent social-style member dock */
.yr-member-dock {
  position: fixed;
  z-index: 90;
  top: 36px;
  right: max(22px, calc((100vw - 1376px) / 2 + 28px));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow:
    0 16px 46px color-mix(in srgb, var(--deep) 15%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.yr-member-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--subtle);
  font-size: 10px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: .02em;
  transition:
    transform var(--transition),
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}
.yr-member-action:hover {
  transform: translateY(-1px);
}
.yr-member-sign:hover {
  color: var(--berry);
  background: var(--berry-wash);
}
.yr-member-account {
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 10px 4px 5px;
  color: #fff;
  background: var(--brand-nav);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--deep) 22%, transparent);
}
.yr-member-account:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--berry) 34%, transparent);
  box-shadow: 0 11px 30px color-mix(in srgb, var(--berry) 18%, transparent);
}
.yr-member-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--berry) 82%, var(--deep));
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.yr-member-account-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.05;
}
.yr-member-account-copy strong {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
}
.yr-member-account-copy small {
  color: rgba(255,255,255,.68);
  font-size: 7px;
  letter-spacing: .03em;
}
.yr-member-dock[data-authenticated="true"] {
  padding-left: 5px;
}
.yr-member-join {
  color: #fff;
  background: var(--berry);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--berry) 22%, transparent);
}
.yr-member-join:hover {
  color: #fff;
  background: var(--berry-hover);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--berry) 30%, transparent);
}
.yr-member-support {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-alt);
}
.yr-member-support:hover {
  color: var(--berry);
  border-color: var(--rose-line);
  background: var(--berry-wash);
}
.yr-member-support svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root[data-theme="dark"] .yr-member-dock {
  border-color: rgba(255,255,255,.10);
  background: rgba(17,16,21,.78);
  box-shadow:
    0 20px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}
:root[data-theme="dark"] .yr-member-sign {
  color: #c8bbc7;
}
:root[data-theme="dark"] .yr-member-sign:hover {
  color: #fffafd;
  background: rgba(255,79,154,.09);
}
:root[data-theme="dark"] .yr-member-support {
  color: #e6dbe4;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
:root[data-theme="dark"] .yr-member-support:hover {
  color: #ffb0d2;
  border-color: rgba(255,79,154,.28);
  background: rgba(255,79,154,.09);
}

@media (min-width: 768px) {
  .right-rail {
    padding-top: 96px;
  }
}

@media (max-width: 767px) {
  .yr-member-dock {
    top: 97px;
    left: 12px;
    right: 12px;
    width: auto;
    justify-content: stretch;
    padding: 5px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
  }
  .yr-member-action {
    min-width: 0;
    min-height: 38px;
    flex: 1 1 0;
    padding-inline: 8px;
    border-radius: 10px;
    font-size: 9px;
  }
  .yr-member-account {
    flex: 1.65 1 0;
    padding: 4px 8px 4px 4px;
  }
  .yr-member-avatar {
    width: 30px;
    height: 30px;
  }
  .yr-member-account-copy strong {
    max-width: 124px;
  }
  .yr-member-support svg {
    width: 13px;
    height: 13px;
  }
  .main-column,
  .wide .main-column {
    padding-top: 78px;
  }
}