/* About pages: shelf paper, retro windows for each section, ink cards inside.
   The copy keeps the app's own font; only the chrome uses the shelf faces.
   Tokens, --site-width and .retro-* come from retro_tokens.css and shelf_page.css. */
.about-page {
  background: var(--shelf-ground);
  background-image: radial-gradient(rgba(26, 26, 26, 0.09) 1px, transparent 1px);
  background-size: 6px 6px;
  color: var(--shelf-ink);
  min-height: 85svh;
}
.about-page__inner {
  max-width: var(--site-width); margin: 0 auto;
  padding: 28px var(--site-gutter) 60px;
  display: grid; gap: 28px;
}

/* ---------- section nav (shared by every About page; it already sits inside .main-container) ---------- */
.about-nav { margin-top: 12px; }
.about-nav .shelf-tabs { flex-wrap: wrap; }
.about-nav__back { margin-left: auto; }
.about-nav__select { margin: 12px 0 0; }

/* ---------- hero ---------- */
.about-hero { display: grid; gap: 10px; max-width: 64ch; }
.about-hero__eyebrow {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--shelf-muted);
}
.about-hero h1 {
  margin: 0; font-family: var(--shelf-serif); font-weight: 700;
  font-size: clamp(32px, 4.5vw, 48px); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance;
}
.about-hero__tag { margin: 0; font-family: var(--shelf-serif); font-style: italic; font-size: 20px; color: var(--shelf-gold-hover); }
.about-hero__lede { margin: 4px 0 0; font-size: 18px; line-height: 1.55; }

/* ---------- windows ---------- */
.about-win__body { padding: 20px; }
.about-win__intro { margin: 0 0 18px; font-size: 16px; line-height: 1.55; max-width: 62ch; }
.about-win__status span { font-family: var(--shelf-serif); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.4; }
.about-prose p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; max-width: 62ch; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose__lead { font-family: var(--shelf-serif); font-size: 22px; line-height: 1.35; }
.about-prose__strong { font-weight: 700; font-size: 18px; }

/* ---------- ink cards ---------- */
.about-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
  .about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about-card { border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); background: var(--shelf-window); padding: 16px; margin: 0; }
.about-card h3 {
  margin: 0 0 8px; font-family: var(--shelf-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--shelf-gold-hover);
}
.about-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.about-card p:last-child { margin-bottom: 0; color: var(--shelf-muted); font-size: 13px; }

/* ---------- quotes ---------- */
.about-quote blockquote { margin: 0 0 12px; font-family: var(--shelf-serif); font-size: 19px; line-height: 1.45; }
.about-quote p { color: var(--shelf-ink); }
.about-quote p:last-of-type { color: var(--shelf-muted); }
.about-quote figcaption {
  margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--shelf-rule);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.about-quote figcaption a { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }

/* ---------- call to action ---------- */
.about-cta .about-win__body { text-align: center; padding: 28px 20px; }
.about-cta__copy { margin: 0 auto 18px; max-width: 60ch; font-size: 17px; line-height: 1.55; }
.about-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- lists, steps, notes, menus, the changelog (the four sibling pages) ---------- */
.about-prose .about-card { margin: 4px 0 14px; }
.about-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.about-list li { position: relative; padding-left: 16px; }
.about-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; background: var(--shelf-gold); border: 1.5px solid var(--shelf-ink); }
.about-card .about-list li { color: var(--shelf-ink); }
.about-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.about-steps li { position: relative; padding-left: 44px; counter-increment: step; }
.about-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--shelf-gold); color: #fff; border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 13px;
}
.about-steps h3 { margin: 4px 0 4px; font-size: 15px; font-weight: 700; }
.about-steps p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 62ch; }
.about-note { margin-top: 16px; border: 2px solid var(--shelf-ink); background: var(--shelf-row-selected); padding: 12px 14px; }
.about-note h3 { margin: 0 0 8px; font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.about-pull { border-left: 4px solid var(--shelf-gold); padding-left: 14px; font-family: var(--shelf-serif); font-size: 18px; font-style: italic; line-height: 1.45; }
.about-menu { display: grid; }
.about-menu a { display: block; padding: 9px 14px; border-bottom: 1px solid var(--shelf-rule); font-weight: 700; font-size: 14px; text-decoration: none; }
.about-menu a:last-child { border-bottom: 0; }
.about-menu a::before { content: "▸ "; color: var(--shelf-gold); }
.about-menu a:hover { background: var(--shelf-row-hover); box-shadow: inset 3px 0 0 var(--shelf-gold); }
/* --one: a single column at every width (help topics, the guide sidebar) */
.about-log__date { font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
@media (min-width: 768px) { .about-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-menu a:nth-last-child(-n+2) { border-bottom: 0; } .about-menu a { border-right: 1px solid var(--shelf-rule); } .about-menu a:nth-child(2n) { border-right: 0; } }
@media (min-width: 768px) {
  .about-menu--one { grid-template-columns: 1fr; }
  .about-menu--one a { border-right: 0; }
  .about-menu--one a:nth-last-child(-n+2) { border-bottom: 1px solid var(--shelf-rule); }
  .about-menu--one a:last-child { border-bottom: 0; }
}
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* Sortable.js drag and drop styles */
.sortable-ghost {
  opacity: 0.4;
  background: #f3f4f6;
}

.sortable-drag {
  opacity: 0.8;
  background: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Hide scrollbar for horizontal scroll on mobile */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
  .mobile-touch-scroll {
    -webkit-overflow-scrolling: touch;
  }
} 

/* Layout Selection Modal Animations */
@keyframes slidePreview {
  0%, 25% { background: linear-gradient(135deg, #ec4899, #be185d); }
  25%, 50% { background: linear-gradient(135deg, #3b82f6, #1e40af); }
  50%, 75% { background: linear-gradient(135deg, #10b981, #047857); }
  75%, 100% { background: linear-gradient(135deg, #f59e0b, #d97706); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4); }
}

.layout-preview-slider {
  animation: slidePreview 4s infinite;
}

.layout-preview-classic:hover .gradient-preview,
.layout-preview-banner:hover .gradient-preview {
  animation: pulseGlow 2s infinite;
}

/* Layout Selection Hover Effects */
.layout-option {
  transition: all 0.2s ease-in-out;
}

.layout-option:hover {
  transform: translateY(-2px);
}

.layout-option.selected {
  background: linear-gradient(to bottom right, #dbeafe, #bfdbfe);
  border-color: #3b82f6;
}

/* Touch-friendly targets */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Heart burst micro-animation */
@keyframes heart-burst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes heart-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

.favorite-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.favorite-btn.heart-bursting i {
  animation: heart-burst 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.favorite-btn.heart-bursting::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #B39B63;
  pointer-events: none;
  animation: heart-ring 0.45s ease-out forwards;
}

/* Feed skeleton shimmer */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f3f4f6 25%, #e8e9eb 50%, #f3f4f6 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Turbo page transitions */
.turbo-progress-bar {
  background-color: #B39B63 !important;
  height: 2px !important;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-entering {
  animation: page-fade-in 0.15s ease-out both;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .layout-selection-modal {
    margin: 0.5rem;
    max-height: calc(100vh - 1rem);
    border-radius: 1rem;
    overflow-y: auto;
  }
  
  .layout-options-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .layout-option {
    padding: 1.5rem 1rem;
  }
  
  .layout-option .preview-container {
    height: 6rem;
    margin-bottom: 1rem;
  }
} 
/* Sign in, sign up and password pages: shelf_form.css's single column, narrowed, with the log
   form's windows, labels and option rows from shelf_page.css. Only what is new lives here. */
.auth-page .shelf-form__inner { max-width: 520px; }

.auth-fields { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 4px; }
.auth-field .shelf-log__label { padding: 0; }
.auth-field__hint { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
.auth-field__error { font-family: var(--shelf-mono); font-weight: 700; font-size: 10.5px; color: var(--shelf-danger); }
.retro-input.is-invalid { border-color: var(--shelf-danger); background: #fdf1ef; }

.auth-remember { border-top: 2px solid var(--shelf-ink); }

.auth-links, .auth-fine { margin: 0; line-height: 1.5; }
.auth-links { font-size: 14px; }
.auth-fine { font-size: 12px; color: var(--shelf-muted); }
.auth-links a, .auth-fine a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.auth-links a:hover, .auth-fine a:hover { color: var(--shelf-gold-hover); }
/* A blog post on the shelf chrome: the writer in the rail, the article on a quiet white sheet.
   Retro chrome wraps the reading column; it never touches the writer's words.
   Tokens come from shelf_page.css. */

/* ---------- masthead ---------- */
.shelf-masthead--post { gap: 14px; }
.shelf-masthead--post h1 {
  font-family: var(--read-heading-font, var(--shelf-serif));
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.12;
}
.shelf-masthead--post .shelf-byline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.post-byline__text { min-width: 0; }
.shelf-byline time { font-variant-numeric: tabular-nums; }

.post-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.post-chips__label {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
  margin-right: 4px;
}
.post-chips a, .post-chips > span:not(.post-chips__label) {
  display: inline-block;
  background: var(--shelf-window);
  border: 2px solid var(--shelf-ink);
  box-shadow: 2px 2px 0 var(--shelf-ink);
  padding: 3px 9px;
  font-size: 12px; font-weight: 700;
  text-decoration: none;
}
.post-chips > span a { display: inline; border: 0; box-shadow: none; padding: 0; }
.post-chips > span a:hover, .post-chips > a:hover { background: var(--shelf-row-selected); }
.post-chips > span i { color: var(--shelf-muted); font-style: normal; margin: 0 3px; }

/* ---------- the sheet ---------- */
.shelf-main--post { gap: 28px; }
.read-sheet {
  background: var(--shelf-window);
  border: 2.5px solid var(--shelf-ink);
  box-shadow: 4px 4px 0 var(--shelf-ink);
  padding: 36px 40px 40px;
}
.read-sheet__cover { margin: -36px -40px 28px; border-bottom: 2.5px solid var(--shelf-ink); }
.read-sheet__cover img { display: block; width: 100%; height: 380px; object-fit: cover; }
.read-sheet__credit {
  margin: -16px 0 24px; text-align: center;
  font-family: var(--shelf-mono); font-size: 11px; color: var(--shelf-muted);
}
.read-sheet__credit a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }

.read-sheet__works { display: grid; gap: 12px; margin: 0 0 28px; }
.post-work {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px; border: 2px solid var(--shelf-ink); background: var(--shelf-row-hover);
}
.post-work__cover {
  flex: none; width: 56px; height: 84px; overflow: hidden;
  border: 2px solid var(--shelf-ink); background: #1a1a1a;
  display: grid; place-items: center; color: #777; font-size: 18px;
}
.post-work__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-work__label {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.post-work__title { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.post-work__title:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.post-work__meta { font-size: 12px; color: var(--shelf-muted); margin-top: 2px; }

.read-sheet__stage { position: relative; }
.read-sheet__stage--locked { min-height: 380px; overflow: hidden; }

/* ---------- the writer's words ---------- */
.read-body {
  font-family: var(--read-body-font, var(--shelf-serif));
  font-size: 19px; line-height: 1.65; color: #1f2937;
  max-width: 68ch;
  overflow-wrap: anywhere;
}
.read-body--locked { filter: blur(5px); pointer-events: none; user-select: none; }
/* Stand-in lines for a locked post: the shape of a page, none of its words. */
.read-body__placeholder p { height: 0.95em; margin: 0 0 0.7em; background: #d6d0c2; }
.read-body__placeholder p:nth-child(4n+1) { width: 96%; }
.read-body__placeholder p:nth-child(4n+2) { width: 88%; }
.read-body__placeholder p:nth-child(4n+3) { width: 92%; }
.read-body__placeholder p:nth-child(4n) { width: 58%; margin-bottom: 1.6em; }

/* process_blog_content renders ActionText inside its own .trix-content; that inner box is the article. */
.read-body .trix-content .trix-content > div { margin: 0 0 1.25rem; }
.read-body .trix-content .trix-content > div:last-child { margin-bottom: 0; }
.read-body .trix-content .trix-content h1,
.read-body .trix-content .trix-content h2,
.read-body .trix-content .trix-content h3,
.read-body .trix-content .trix-content h4 {
  font-family: var(--read-heading-font, var(--shelf-serif));
  font-weight: 700; line-height: 1.25;
  margin: 2rem 0 0.75rem;
}
.read-body .trix-content .trix-content h1 { font-size: 1.9em; }
.read-body .trix-content .trix-content h2 { font-size: 1.5em; }
.read-body .trix-content .trix-content h3 { font-size: 1.25em; }
.read-body .trix-content .trix-content h4 { font-size: 1.1em; }
.read-body .trix-content .trix-content > :first-child { margin-top: 0; }
.read-body .trix-content .trix-content ul,
.read-body .trix-content .trix-content ol { margin: 1.25rem 0; padding-left: 1.5rem; }
.read-body .trix-content .trix-content ul { list-style: disc; }
.read-body .trix-content .trix-content ol { list-style: decimal; }
.read-body .trix-content .trix-content li { display: list-item; list-style: inherit; margin-bottom: 0.5rem; }
.read-body .trix-content .trix-content blockquote {
  margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--shelf-gold);
  font-style: italic; color: #4b5563;
}
.read-body .trix-content .trix-content pre {
  font-family: var(--shelf-mono); font-size: 0.85em; line-height: 1.5;
  padding: 14px 16px; margin: 1.5rem 0; overflow-x: auto;
  background: #f6f4ee; border: 2px solid var(--shelf-ink);
  white-space: pre;
}
.read-body .trix-content .trix-content em { font-style: italic; }
.read-body .trix-content .trix-content strong { font-weight: 700; }
.read-body .trix-content .trix-content img { max-width: 100%; height: auto; }
.read-body .trix-content .trix-content hr { border: 0; border-top: 2px solid var(--shelf-rule); margin: 2rem 0; }
.read-body .trix-content .trix-content a,
.read-body .auto-link {
  color: #8a7446;
  text-decoration: underline; text-decoration-color: var(--shelf-gold);
  text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.read-body .trix-content .trix-content a:hover,
.read-body .auto-link:hover { color: var(--shelf-gold-hover); background: rgba(179, 155, 99, 0.12); }

/* embeds the writer pasted in */
.read-body .spotify-embed-container,
.read-body .youtube-embed-container,
.read-body .apple-music-embed-container,
.read-body .reddit-embed-container { margin: 2rem 0; overflow: hidden; border: 2px solid var(--shelf-ink); }
.read-body .spotify-embed-container iframe,
.read-body .apple-music-embed-container iframe,
.read-body .reddit-embed-container iframe { display: block; width: 100%; border: 0; }
.read-body .youtube-embed-container { position: relative; padding-bottom: 56.25%; height: 0; }
.read-body .youtube-embed-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.read-body .reddit-embed-container { background: #fff; }

/* ---------- paywall ---------- */
.post-paywall { position: absolute; inset: 0; z-index: 30; display: grid; place-items: start center; padding: 40px 16px 0; }
.post-paywall__dialog { width: min(380px, 100%); }
.post-paywall__body {
  padding: 18px 18px 20px; display: grid; justify-items: center; gap: 10px; text-align: center;
  font-family: var(--shelf-chrome); font-size: 14px;
}
.post-paywall__body h2 { margin: 0; font-size: 17px; font-weight: 700; }
.post-paywall__body p { margin: 0; color: var(--shelf-muted); }
.post-paywall__done { color: #1f7a3a; font-weight: 700; }
.post-paywall__signin { font-size: 12px; text-decoration: underline; text-decoration-color: var(--shelf-gold); }

/* ---------- under the sheet ---------- */
.post-owner-form { display: inline; }
.post-about { display: flex; gap: 14px; align-items: flex-start; padding: 14px; font-size: 14px; line-height: 1.5; }
.post-about p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.post-about__name { display: block; font-weight: 700; text-decoration: none; margin-bottom: 4px; }

.post-disabled { padding: 12px; font-size: 13px; color: var(--shelf-muted); font-style: italic; }

.post-reading { list-style: none; margin: 0; padding: 4px 0; }
.post-reading li { display: grid; gap: 2px; padding: 9px 12px; border-bottom: 1px solid var(--shelf-rule); }
.post-reading li:last-child { border-bottom: 0; }
.post-reading li:hover { background: var(--shelf-row-hover); }
.post-reading__title { font-family: var(--shelf-serif); font-size: 16px; font-weight: 700; text-decoration: none; line-height: 1.25; }
.post-reading__title:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.post-reading__by { font-size: 11px; color: var(--shelf-muted); }
.post-reading__by a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }

/* ---------- rail ---------- */
.post-rail__cta { padding: 10px 12px 12px; border-top: 2px solid var(--shelf-ink); display: grid; }
.post-rail__cta .retro-btn { text-align: center; }
.shelf-rail .shelf-rail__counts { border-top: 2px solid var(--shelf-ink); }

/* ---------- back to top ---------- */
.post-totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.post-totop.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 640px) {
  .read-sheet { padding: 22px 18px 26px; }
  .read-sheet__cover { margin: -22px -18px 20px; }
  .read-sheet__cover img { height: 220px; }
  .read-body { font-size: 18px; }
  .post-totop { right: 12px; bottom: 12px; }
}
/* The feed: shelf-page paper, the retro window around every card, and the
   chrome that sits between cards (chips, layout toggle, pager). Tokens and
   the .retro-win / .retro-btn / .retro-avatar chrome come from shelf_page.css.
   The card partials inside each window are untouched; only their outer
   border, radius and shadow are dropped because the window supplies those. */
.cards-page {
  background: var(--shelf-ground);
  background-image: radial-gradient(rgba(26, 26, 26, 0.09) 1px, transparent 1px);
  background-size: 6px 6px;
  color: var(--shelf-ink);
}
.cards-page .retro-win__titlebar,
.cards-page .retro-btn { font-family: var(--shelf-chrome); }

/* ---------- masthead + compose ---------- */
.feed-masthead__sub { margin: 0; font-size: 14px; color: var(--shelf-muted); max-width: 62ch; }
.feed-compose__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  text-decoration: none; color: inherit;
}
.feed-compose__row:hover .feed-compose__field { border-color: var(--shelf-gold); }
.feed-compose__field {
  flex: 1; min-width: 0;
  border: 2px solid var(--shelf-ink);
  background: var(--shelf-window);
  padding: 8px 10px;
  font-size: 14px; color: var(--shelf-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- chip band ---------- */
.feed-chips {
  border-top: 2.5px solid var(--shelf-ink);
  border-bottom: 2.5px solid var(--shelf-ink);
  background: var(--shelf-row-selected);
  padding: 12px 0 14px;
}
.feed-chip__avatar { width: 16px; height: 16px; border: 1.5px solid var(--shelf-ink); object-fit: cover; }
.feed-chips__arrow { padding: 4px 8px; }

/* ---------- layout toggle + pager ---------- */
/* .feed-toggle keeps the markup's hidden md:flex, so no display rule here. */
.cards-page .feed-toggle__btn { border-radius: 0; }
.feed-toggle__btn + .feed-toggle__btn { border-left-width: 0; }
.cards-page .retro-btn[aria-pressed="true"],
.cards-page .retro-btn.is-current {
  background: var(--shelf-row-selected); color: var(--shelf-ink);
  box-shadow: inset 2px 2px 0 var(--shelf-ink);
}
.cards-page .feed-toggle__btn.retro-btn { background: var(--shelf-window); color: var(--shelf-ink); }
.cards-page .feed-toggle__btn.retro-btn[aria-pressed="true"] { background: var(--shelf-row-selected); }
.feed-toggle__btn i { margin-right: 6px; }
.cards-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cards-page .cards-pager__btn { padding: 6px 11px; font-family: var(--shelf-mono); font-size: 12px; }
.cards-pager__gap { font-family: var(--shelf-mono); font-weight: 700; padding: 0 2px; }
.feed-loading-band {
  border: 2px solid var(--shelf-ink);
  background: var(--shelf-row-selected);
  padding: 8px 16px; text-align: center;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}

/* ---------- the window around a card ---------- */
.feed-window__win[hidden] { display: none; }
.feed-window__bar { position: relative; }
.feed-window__author { display: none; font-weight: 400; }
.feed-window__kind {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.cards-page .feed-window__body > * {
  border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0;
}

/* The lights: 12px dots, 28px targets, real buttons. */
.feed-window__lights { display: flex; margin: -6px 0 -6px -6px; }
.feed-window__light {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; appearance: none;
}
.feed-window__light::before {
  content: ""; display: block;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--shelf-ink);
  box-sizing: border-box;
}
.feed-window__light--hide::before { background: #ff5f57; }
.feed-window__light--fold::before { background: #febc2e; }
.feed-window__light--open::before { background: #28c840; }
.feed-window__light:hover::before { transform: scale(1.2); }
.feed-window__light:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .feed-window__light::before { transition: transform 0.08s; }
}

/* Folded: only the bar shows, and the bar says whose card it is. */
.feed-window.is-folded .feed-window__body { display: none; }
.feed-window.is-folded .feed-window__bar { border-bottom: 0; }
.feed-window.is-folded .feed-window__author { display: inline; }

/* Hidden: a dashed strip with Undo in the card's place. */
.feed-window__undo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 2px dashed var(--shelf-ink);
  background: var(--shelf-row-hover);
  padding: 10px 14px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shelf-muted);
}
.feed-window__undo[hidden] { display: none; }

/* ---------- empty state ---------- */
.feed-empty { max-width: 560px; margin: 24px auto; }
.feed-empty__body { padding: 24px 20px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.feed-empty__body h3 { margin: 0; font-family: var(--shelf-serif); font-size: 22px; font-weight: 700; }
.feed-empty__body p { margin: 0 0 8px; color: var(--shelf-muted); max-width: 40ch; }
/* The mobile comment sheet: a retro panel that slides up from the bottom edge.
   comment-sheet (the Stimulus controller) toggles `hidden`, `translate-y-full` and the
   overlay's opacity classes; these rules only decide what those states look like.
   The chrome itself (.comment-sheet__*) lives in comments.css. */

[data-comment-sheet-target="overlay"] {
  z-index: 99998 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

[data-comment-sheet-target="sheet"] {
  z-index: 99999 !important;
  background-color: var(--shelf-window, #fff) !important;
  min-height: 400px !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 0 var(--shelf-ink, #1a1a1a) !important;
}

[data-comment-sheet-target="sheet"]:not(.hidden) { display: block !important; }
[data-comment-sheet-target="sheet"].translate-y-full { transform: translateY(100%) !important; }
[data-comment-sheet-target="sheet"]:not(.translate-y-full) { transform: translateY(0) !important; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  [data-comment-sheet-target="sheet"] { touch-action: pan-y; transition: transform 300ms ease-out; }
  [data-comment-sheet-target="overlay"] { transition: opacity 300ms ease-out; }
  [data-comment-sheet-target="sheet"].dragging { transition: none !important; will-change: transform; }

  [data-comment-sheet-target="content"] textarea {
    min-height: 120px;
    max-height: 500px;
    font-size: 16px; /* keeps iOS from zooming the page on focus */
    transition: height 0.15s ease;
    overflow-y: hidden;
  }

  [data-comment-sheet-target="contentArea"] { max-height: calc(90vh - 180px); overscroll-behavior: contain; }
  [data-comment-sheet-target="sheet"] .comment-sheet__actions .retro-btn { min-height: 48px; }
  [data-comment-sheet-target="handle"]:active { opacity: 0.7; }

  body.sheet-open { overflow: hidden; }
}

/* Desktop: the sheet never shows; the inline composer does. */
@media (min-width: 768px) {
  [data-comment-sheet-target="trigger"],
  [data-comment-sheet-target="overlay"],
  [data-comment-sheet-target="sheet"] { display: none !important; }
  [data-comment-sheet-target="content"] { display: block !important; }
}

[data-comment-sheet-target="handle"] {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Comments on the retro OS chrome: the window around a list, each comment card, the
   composer, the edit form, the reply menu and the support note. Tokens come from
   retro_tokens.css; .retro-win, .retro-btn, .retro-input and .retro-avatar from shelf_page.css.

   The Stimulus controllers toggle Tailwind's `hidden` on many of these nodes, so nothing
   here sets `display` on a node that can be hidden, except through :not(.hidden). */

/* ---------- the window around a list ---------- */
.comments-win { font-family: var(--shelf-chrome); color: var(--shelf-ink); }
.comments-win .retro-win__titlebar h3,
.comments-win .retro-win__titlebar .comments-count {
  flex: 1; margin: 0; text-align: center; color: #fff;
  font-family: var(--shelf-chrome); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
}
.comments-win__body { padding: 12px; display: grid; gap: 14px; }
.comments-win__lead { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.comments-win__lead p { margin: 0; }
.comments-win__more { justify-self: center; }
.comments-win__empty, [data-comments-empty-state] { padding: 12px 0; font-size: 13px; font-style: italic; color: var(--shelf-muted); text-align: center; }
.comments-win__list { display: grid; gap: 10px; }

/* A bare heading (no window) keeps the mono label the shelf pages use. */
.comments-count { margin: 0; }
.comments-section__heading.comments-count {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--shelf-muted); margin: 0 0 10px;
}

/* Why there is no composer: a quiet row under the title bar. */
.comments-notice {
  margin: 0; padding: 10px 12px;
  border: 2px solid var(--shelf-ink); background: var(--shelf-row-hover);
  font-size: 13px; color: var(--shelf-muted);
}
.comments-notice a { color: var(--shelf-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); }

/* The pitch to a signed-out visitor. */
.comments-guest {
  border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
  background: var(--shelf-ink); color: #fff;
  padding: 18px 16px 20px; display: grid; justify-items: center; gap: 10px; text-align: center;
}
.comments-guest h4 { margin: 0; font-size: 17px; font-weight: 700; }
.comments-guest p { margin: 0; font-size: 14px; color: #d6d0c2; max-width: 46ch; }
.comments-guest ul { margin: 0; padding: 0 0 0 18px; text-align: left; font-size: 13px; color: #d6d0c2; display: grid; gap: 4px; }
.comments-guest .retro-btn { margin-top: 4px; }
.comments-guest__signin { font-size: 12px; color: #d6d0c2; text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.comments-guest__signin:hover { color: #fff; }

/* ---------- one comment ---------- */
.comment-thread {
  position: relative;
  font-family: var(--shelf-chrome); font-size: 14px; color: var(--shelf-ink);
  background: var(--shelf-window);
  border: 2px solid var(--shelf-ink);
  box-shadow: 3px 3px 0 var(--shelf-ink);
  margin: 0 0 10px calc(var(--comment-depth, 0) * 8px);
}
/* A reply sits inside its parent: a rule down the left instead of its own frame. */
.comment-thread[data-depth]:not([data-depth="0"]) {
  border: 0; border-left: 3px solid var(--shelf-rule);
  box-shadow: none; background: transparent; margin-bottom: 0;
}
.comment-thread[data-depth]:not([data-depth="0"]):hover { border-left-color: var(--shelf-gold); }
.comment-thread.lavish-highlight {
  background: var(--shelf-row-selected) !important;
  border: 2px solid var(--shelf-gold) !important;
  box-shadow: 3px 3px 0 var(--shelf-ink), 0 0 0 4px rgba(179, 155, 99, 0.3) !important;
}

.comment-thread__row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.comment-thread__gutter { flex: none; width: 22px; padding-top: 4px; }
.comment-thread__toggle {
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--shelf-window); color: var(--shelf-ink);
  border: 2px solid var(--shelf-ink); box-shadow: 1px 1px 0 var(--shelf-ink);
  font-size: 10px; line-height: 0; cursor: pointer; padding: 0;
}
.comment-thread__toggle i { color: inherit; }
.comment-thread__toggle:hover { background: var(--shelf-row-selected); }
.comment-thread__toggle:active { box-shadow: inset 1px 1px 0 var(--shelf-ink); }
.comment-thread__toggle:focus-visible { outline: 3px solid var(--shelf-gold); outline-offset: 2px; }
.comment-thread__avatar { flex: none; padding-top: 2px; text-decoration: none; }
.comment-thread__body { flex: 1; min-width: 0; }

.comment-thread__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.comment-thread__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.comment-thread__name { font-weight: 700; color: var(--shelf-ink); text-decoration: none; }
.comment-thread__name:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.comment-thread__time, .comment-thread__count {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--shelf-muted); white-space: nowrap;
}

/* the options menu */
.comment-thread__menu { position: relative; flex: none; }
.comment-thread__menu .retro-btn { padding: 2px 6px; font-size: 11px; line-height: 1; }
.comment-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px;
  background: var(--shelf-window); border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
}
.comment-menu a, .comment-menu button {
  width: 100%; text-align: left; padding: 7px 12px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--shelf-rule); cursor: pointer;
  font-family: var(--shelf-chrome); font-weight: 700; font-size: 13px; color: var(--shelf-ink); text-decoration: none;
}
.comment-menu a:not(.hidden) { display: block; }
.comment-menu > :last-child { border-bottom: 0; }
.comment-menu a:hover, .comment-menu button:hover { background: var(--shelf-row-hover); }
.comment-menu i { width: 16px; margin-right: 6px; color: var(--shelf-muted); }
.comment-menu .comment-menu__danger { color: var(--shelf-danger); }
.comment-menu .comment-menu__danger i { color: var(--shelf-danger); }

/* what was said */
.comment-thread__text { margin: 4px 0 8px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-thread__text a { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.comment-thread__removed { margin: 4px 0 8px; font-style: italic; color: var(--shelf-muted); }
.comment-thread__voice { margin: 6px 0 8px; }
.comment-thread__photo { margin: 6px 0 8px; }
.comment-thread__photo img {
  display: block; max-width: 100%; max-height: 16rem; object-fit: cover; cursor: pointer;
  border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
}
@media (min-width: 768px) { .comment-thread__photo img { max-height: 24rem; } }
.comment-thread__photo img:hover { opacity: 0.92; }

.comment-thread__actions { display: flex; align-items: center; gap: 10px; }

/* the reply composer that opens under a comment */
.comment-thread__reply-form { margin-top: 10px; border: 2px solid var(--shelf-ink); background: var(--shelf-window); }
.comment-thread__reply-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 10px; border-bottom: 2px solid var(--shelf-ink); background: var(--shelf-row-selected);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.comment-thread__reply-head b { color: var(--shelf-ink); }
.comment-thread__reply-cancel { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--shelf-muted); text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.comment-thread__reply-cancel:hover { color: var(--shelf-ink); }
.comment-thread__reply-body { padding: 10px; }

/* the replies under a comment */
.replies-section { border-top: 1px solid var(--shelf-rule); background: #fbf9f4; padding: 6px 0 4px 10px; }
.comment-thread[data-depth]:not([data-depth="0"]) > .replies-section { border-top: 0; background: transparent; padding-top: 0; }
.comment-thread__replies { display: grid; gap: 2px; }
.comment-thread__deeper { padding: 6px 12px 8px; font-size: 13px; }
.comment-thread__deeper a { font-weight: 700; color: var(--shelf-ink); text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.comment-thread__deeper span { color: var(--shelf-muted); }

/* the edit form that swaps in for a comment */
.comment-thread--editing { background: var(--shelf-row-hover); }
.comment-thread__editing { font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-gold-hover); }
.comment-edit { display: grid; gap: 8px; }
.comment-edit__textarea { min-height: 88px; resize: vertical; }
.comment-edit__photo { position: relative; display: inline-block; }
.comment-edit__photo img { display: block; max-width: 20rem; max-height: 12rem; object-fit: cover; border: 2px solid var(--shelf-ink); }
.comment-edit__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- the composer ---------- */
.comment-form { font-family: var(--shelf-chrome); color: var(--shelf-ink); }
.comment-composer { display: grid; gap: 8px; }
.comment-composer__modes { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--shelf-muted); }
.comment-composer__mode {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  background: var(--shelf-window); color: var(--shelf-ink);
  border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
  font-family: var(--shelf-chrome); font-weight: 700; font-size: 12px; line-height: normal; cursor: pointer;
}
.comment-composer__mode:hover { background: var(--shelf-row-hover); }
/* voice-recorder marks the active mode with a Tailwind colour class; read it as "pressed in". */
.comment-composer__mode.text-\[\#B39B63\] { background: var(--shelf-gold); color: #fff; box-shadow: inset 2px 2px 0 var(--shelf-ink); }
.comment-composer__field { position: relative; }
.comment-composer__textarea { display: block; min-height: 96px; padding-right: 44px; resize: none; overflow: hidden; font-size: 16px; }
/* Two classes: .retro-btn--icon (shelf_page.css, loaded later) sets position: relative. */
.comment-composer__field .comment-composer__photo-btn { position: absolute; right: 8px; bottom: 8px; }
.comment-composer__preview { position: relative; display: inline-block; margin-top: 2px; }
.comment-composer__preview img { display: block; max-width: 20rem; max-height: 12rem; object-fit: cover; border: 2px solid var(--shelf-ink); }
.comment-composer__preview-remove, .comment-edit__photo-remove {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--shelf-window); color: var(--shelf-ink); border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
  font-size: 10px; line-height: 0;
}
.comment-composer__preview-remove:hover, .comment-edit__photo-remove:hover { background: #fdf1ef; color: var(--shelf-danger); }

/* recording a voice memo */
.comment-composer__voice { border: 2px solid var(--shelf-ink); background: var(--shelf-row-hover); padding: 10px; display: grid; gap: 10px; }
.comment-composer__voice-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comment-composer__voice-bar > div { display: flex; gap: 6px; }
.comment-composer__voice-bar .retro-btn { width: 38px; height: 38px; padding: 0; font-size: 14px; }
.comment-composer__voice-bar .retro-btn--danger { background: var(--shelf-danger); color: #fff; }
.comment-composer__clock { font-family: var(--shelf-mono); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.comment-composer__wave { height: 80px; border: 2px solid var(--shelf-ink); background: var(--shelf-window); display: grid; place-items: center; font-size: 11px; color: var(--shelf-muted); }
.comment-composer__status { margin: 0; text-align: center; font-size: 12px; color: var(--shelf-muted); }
.comment-composer__status.text-red-500 { color: var(--shelf-danger); }
.comment-composer__voice-actions { display: flex; justify-content: center; gap: 8px; }

/* friends who can be tagged */
.comment-tagging {
  position: absolute; z-index: 50; width: 20rem; max-width: calc(100vw - 32px); max-height: 15rem; overflow-y: auto;
  background: var(--shelf-window); border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
  font-family: var(--shelf-chrome);
}
.comment-tagging [data-user-id] { border-bottom: 1px solid var(--shelf-rule); }
.comment-tagging [data-user-id]:last-child { border-bottom: 0; }
.comment-tagging [data-user-id]:hover { background: var(--shelf-row-hover); }
.comment-tagging .bg-gray-100 { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.comment-tagging img, .comment-tagging .rounded-full { border-radius: 0; border: 2px solid var(--shelf-ink); }

/* :not(.hidden): the sheet hides this row and uses its own buttons along the bottom edge. */
.comment-composer__foot:not(.hidden) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-composer__draft { display: flex; align-items: center; gap: 10px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted); }
.comment-composer__draft button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--shelf-muted); text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.comment-composer__draft button:hover { color: var(--shelf-ink); }

/* link and video previews the composer builds while you type */
.comment-form [data-youtube-preview] .rounded-lg,
.comment-form [data-vimeo-preview] .rounded-lg,
.comment-form [data-spotify-preview] .rounded-lg,
.comment-form [data-link-preview] .rounded-lg { border-radius: 0; border: 2px solid var(--shelf-ink); }

/* ---------- the mobile sheet ---------- */
.comment-sheet__trigger {
  display: block; width: 100%; text-align: left; cursor: text;
  color: var(--shelf-muted); font-size: 14px;
}
.comment-sheet__trigger:hover { background: var(--shelf-row-hover); }
.comment-sheet__panel {
  background: var(--shelf-window); color: var(--shelf-ink); font-family: var(--shelf-chrome);
  border-top: 2.5px solid var(--shelf-ink);
}
.comment-sheet__handle { display: flex; justify-content: center; padding: 10px 0 8px; cursor: grab; }
.comment-sheet__handle:active { cursor: grabbing; }
.comment-sheet__handle span { display: block; width: 48px; height: 4px; background: var(--shelf-ink); }
.comment-sheet__reply { padding: 0 12px 10px; }
.comment-sheet__reply-card { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 2px solid var(--shelf-ink); background: var(--shelf-row-hover); }
.comment-sheet__reply-card .retro-avatar { margin-top: 2px; }
.comment-sheet__reply-to { display: block; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted); margin-bottom: 2px; }
.comment-sheet__reply-card p { margin: 0; font-size: 13px; }
.comment-sheet__content { padding: 12px; }
.comment-sheet__actions { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 10px 12px; background: var(--shelf-window); border-top: 2px solid var(--shelf-ink); }
.comment-sheet__actions .retro-btn { flex: 1; text-align: center; }

/* ---------- a support note among the comments ---------- */
.support-comment {
  position: relative; font-family: var(--shelf-chrome); font-size: 14px; color: var(--shelf-ink);
  background: var(--shelf-row-selected); border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
  margin: 0 0 10px;
}
.support-comment__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 10px; background: var(--shelf-gold); color: #fff; border-bottom: 2px solid var(--shelf-ink);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.support-comment__row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.support-comment__body { flex: 1; min-width: 0; }
.support-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.support-comment__head a { font-weight: 700; color: var(--shelf-ink); text-decoration: none; }
.support-comment__head a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.support-comment__amount { font-family: var(--shelf-mono); font-weight: 700; color: var(--shelf-gold-hover); }
.support-comment__head small { color: var(--shelf-muted); font-size: 12px; }
.support-comment__text { margin: 0; padding: 8px 10px; background: var(--shelf-window); border: 2px solid var(--shelf-ink); line-height: 1.5; overflow-wrap: anywhere; }
.support-comment__net { margin: 6px 0 0; font-size: 11px; color: var(--shelf-muted); }

@media (max-width: 640px) {
  .comments-win__body { padding: 10px; }
  .comment-thread__row { padding: 8px 8px 8px 6px; gap: 8px; }
  .comment-thread { margin-left: calc(var(--comment-depth, 0) * 4px); }
  .replies-section { padding-left: 6px; }
}
/* The deep dive page (deep_dives/show): the trail down the main column, the rail's map and depth
   meter, the grid, the floor. Chrome, tokens and .retro-* come from retro_tokens.css and
   shelf_page.css; the shelf grid places the masthead, rail and main. Phone first. */

/* ---------- masthead ---------- */
.dd-lede { font-family: var(--shelf-serif); font-size: 18px; line-height: 1.5; max-width: 62ch; }
.dd-lede p { margin: 0 0 0.6em; } .dd-lede p:last-child { margin-bottom: 0; }
.dd-lede--empty a { color: var(--shelf-muted); font-style: italic; text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-meta b { color: var(--shelf-ink); }
.dd-meta__forked { font-style: italic; }
.dd-meta__forked a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- rail ---------- */
.dd-cover__img { aspect-ratio: 3 / 2; background: #0d0d0d; overflow: hidden; }
.dd-cover__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-cover__cap { padding: 6px 10px; font-size: 11px; color: var(--shelf-muted); border-top: 1px solid var(--shelf-rule); }
.dd-cover__cap a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-map { list-style: none; margin: 0; padding: 0; }
.dd-map li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 10px; border-top: 1px solid var(--shelf-rule); font-size: 13px; }
.dd-map li:first-child { border-top: 0; }
.dd-map li a { text-decoration: none; font-weight: 700; }
.dd-map li a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-map__n, .dd-map__c { font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; color: var(--shelf-muted); font-variant-numeric: tabular-nums; }
.dd-map__c { font-weight: 400; }
.dd-map li.is-here { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.dd-depth { padding: 10px; display: grid; gap: 6px; }
.dd-map + .dd-depth { border-top: 2px solid var(--shelf-ink); }
.dd-depth__track { height: 10px; border: 2px solid var(--shelf-ink); background: var(--shelf-window); }
.dd-depth__fill { height: 100%; background: var(--shelf-gold); width: 4%; transition: width .25s; }
@media (prefers-reduced-motion: reduce) { .dd-depth__fill { transition: none; } }
.dd-depth__text { display: flex; justify-content: space-between; gap: 8px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shelf-muted); font-variant-numeric: tabular-nums; }
.dd-depth__text a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-curator { padding: 10px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.dd-curator b { display: block; font-size: 14px; }
.dd-curator b a { text-decoration: none; }
.dd-curator small { display: block; font-size: 12px; color: var(--shelf-muted); }
.dd-curator .retro-btn { grid-column: 1 / -1; justify-content: center; }
.dd-acts { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dd-acts .retro-btn { justify-content: center; text-align: center; width: 100%; }
.dd-acts form { display: contents; }
.dd-acts__wide { grid-column: 1 / -1; }
.dd-acts--stack { grid-template-columns: 1fr; }
.dd-acts__danger { color: var(--shelf-danger); }
.dd-tools .retro-win__status a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-rail .retro-win__status > span:last-child .relative { display: inline-block; }

/* ---------- add a thing ---------- */
.dd-add__body { padding: 12px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.dd-add__body p { margin: 0; font-size: 13px; color: var(--shelf-muted); max-width: 48ch; }

/* ---------- the trail ---------- */
.dd-main { gap: 28px; }
.dd-trail { display: grid; gap: 22px; position: relative; padding-left: 32px; }
.dd-trail::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; border-left: 3px dotted var(--shelf-ink); }
.dd-entry { position: relative; min-width: 0; }
/* Unnumbered by default: a dot on the thread. Numbered: a depth badge. */
.dd-entry__n { position: absolute; left: -32px; top: 14px; width: 12px; height: 12px; border: 2.5px solid var(--shelf-ink); background: var(--shelf-window); border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--shelf-mono); font-variant-numeric: tabular-nums; color: transparent; overflow: hidden; }
.dd-entry.is-here .dd-entry__n { background: var(--shelf-gold); }
.dd-trail--numbered { padding-left: 40px; }
.dd-trail--numbered::before { left: 13px; }
.dd-trail--numbered .dd-entry__n { left: -40px; top: 8px; width: 28px; height: 28px; border-radius: 0; box-shadow: 2px 2px 0 var(--shelf-ink); color: var(--shelf-ink); }
.dd-trail--numbered .dd-entry.is-here .dd-entry__n { background: var(--shelf-gold); color: #fff; }
.dd-entry__kind { font: 700 10px var(--shelf-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; opacity: .9; white-space: nowrap; }
.dd-entry__body { display: grid; gap: 12px; padding: 12px; grid-template-columns: 1fr; min-width: 0; }
@media (min-width: 560px) { .dd-entry__body { grid-template-columns: 150px minmax(0, 1fr); } .dd-entry__body--wide { grid-template-columns: minmax(0, 1fr); } }
.dd-entry__text { min-width: 0; display: grid; gap: 6px; align-content: start; }
.dd-thumb { aspect-ratio: 4 / 3; border: 2px solid var(--shelf-ink); background: #0d0d0d; overflow: hidden; display: grid; place-items: center; color: #777; font-size: 28px; max-width: 100%; }
.dd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-thumb--tall { aspect-ratio: 2 / 3; max-width: 110px; }
.dd-thumb--empty { background: var(--shelf-row-selected); color: var(--shelf-gold-hover); }
.dd-media { min-width: 0; }
.dd-media--embed iframe, .dd-media--embed > * { max-width: 100%; }
.dd-media--video { position: relative; display: block; aspect-ratio: 16 / 9; border: 2px solid var(--shelf-ink); background: #0d0d0d; overflow: hidden; }
.dd-media--video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.dd-media__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px solid #fff; padding: 8px 14px; color: #fff; font: 700 12px var(--shelf-mono); letter-spacing: .12em; background: rgba(0,0,0,.35); }
.dd-media--video:hover .dd-media__play { background: var(--shelf-gold); border-color: var(--shelf-gold); }
.dd-entry__title { margin: 0; font-family: var(--shelf-serif); font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.dd-entry__title a { text-decoration: none; }
.dd-entry__title a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 3px; }
.dd-entry__src { font-size: 12px; color: var(--shelf-muted); }
.dd-entry__note { font-family: var(--shelf-serif); font-size: 15px; line-height: 1.5; max-width: 62ch; overflow-wrap: anywhere; }
.dd-entry__note.trix-content p, .dd-entry__note .trix-content p { margin: 0 0 .5em; }
.dd-entry__note .trix-content p:last-child { margin-bottom: 0; }
.dd-entry__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-entry__status-right { display: inline-flex; align-items: center; gap: 10px; }
.dd-entry__more { font-size: 12px; }
.dd-entry__more summary { cursor: pointer; color: var(--shelf-muted); font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
/* the moved-over recorder and player markup keeps its own (Tailwind) look inside the window */
.dd-entry__legacy { font-family: var(--shelf-chrome); }

/* inline editing (the curator's click-to-edit title and note) */
.dd-inline__display { cursor: text; }
.dd-inline__display:hover { box-shadow: inset 0 -2px 0 var(--shelf-gold); }
.dd-inline__display--empty { color: var(--shelf-muted); font-style: italic; }
.dd-inline__form:not(.hidden) { display: grid; gap: 8px; }
.dd-inline__actions { display: flex; gap: 8px; align-items: center; }
.dd-inline__trix.retro-input { min-height: 90px; font-family: var(--shelf-serif); font-size: 15px; }
.dd-drag { cursor: move; color: var(--shelf-muted); padding: 0 4px; }
.dd-drag--bar { color: #fff; opacity: .8; }
.dd-drag:hover { color: var(--shelf-ink); opacity: 1; }
.dd-drag--bar:hover { color: #fff; }
.dd-remove-form { display: inline; }
.dd-remove { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--shelf-danger); text-decoration: underline; text-decoration-color: var(--shelf-danger); letter-spacing: inherit; text-transform: inherit; }
.sortable-ghost { opacity: .4; }

/* chapters */
.dd-chapter { position: relative; padding-top: 4px; min-width: 0; }
.dd-chapter__n { position: absolute; left: -32px; top: 4px; width: 22px; height: 22px; margin-left: -5px; background: var(--shelf-ink); color: #fff; display: grid; place-items: center; font: 700 10px var(--shelf-mono); }
.dd-trail--numbered .dd-chapter__n { left: -40px; width: 28px; height: 28px; margin-left: 0; }
.dd-chapter__head { display: flex; align-items: center; gap: 12px; }
.dd-chapter__head h2, .dd-chapter__head .dd-inline { margin: 0; flex: 1; min-width: 0; }
.dd-chapter__head h2 { font-family: var(--shelf-mono); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.dd-chapter__head h2::after { content: ""; flex: 1; border-top: 2.5px solid var(--shelf-ink); }
.dd-chapter__head .dd-inline h2::after { content: none; }
.dd-chapter__note { margin: 6px 0 0; font-family: var(--shelf-serif); font-style: italic; font-size: 15px; color: var(--shelf-muted); max-width: 62ch; }
.dd-chapter__note p { margin: 0; }
.dd-chapter--grid { grid-column: 1 / -1; padding-top: 6px; }

/* the floor */
.dd-floor { position: relative; padding-left: 32px; margin-top: -6px; }
.dd-trail--numbered + .dd-floor { padding-left: 40px; }
.dd-floor__n { position: absolute; left: 0; top: 10px; width: 22px; height: 22px; background: var(--shelf-ink); color: #fff; display: grid; place-items: center; font: 700 12px var(--shelf-mono); }
.dd-trail--numbered + .dd-floor .dd-floor__n { width: 28px; height: 28px; }
.dd-floor__body { padding: 16px; display: grid; gap: 10px; }
.dd-floor__body h2 { margin: 0; font-family: var(--shelf-serif); font-size: 22px; }
.dd-floor__body p { margin: 0; font-size: 14px; color: var(--shelf-muted); }
.dd-floor__row { display: flex; flex-wrap: wrap; gap: 10px; }
.dd-floor__row form { display: contents; }
.dd-empty__body { padding: 16px; display: grid; gap: 10px; justify-items: start; }
.dd-empty__body p { margin: 0; font-family: var(--shelf-serif); font-size: 16px; }

/* ---------- the grid ---------- */
.dd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 560px) { .dd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dd-tile { border: 2.5px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); background: var(--shelf-window); min-width: 0; display: grid; }
.dd-tile__link { text-decoration: none; display: grid; }
.dd-tile__thumb { aspect-ratio: 2 / 3; background: #0d0d0d; border-bottom: 2px solid var(--shelf-ink); overflow: hidden; display: grid; place-items: center; color: #777; font-size: 26px; }
.dd-tile__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-tile__cap { padding: 6px 8px; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.dd-tile__cap small { display: block; font: 700 9px var(--shelf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--shelf-muted); margin-top: 2px; }
.dd-tile__tools { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-top: 1px solid var(--shelf-rule); font-size: 11px; }
.dd-grid__empty { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--shelf-muted); }

/* ---------- comments and more holes ---------- */
.dd-comments__body { padding: 12px; display: grid; gap: 12px; font-family: var(--shelf-chrome); }
.dd-comments__list { display: grid; gap: 12px; }
.dd-comments__signin { margin: 0; font-size: 14px; }
.dd-comments__signin a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-holes { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 12px; }
@media (min-width: 560px) { .dd-holes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dd-hole { border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); text-decoration: none; display: grid; min-width: 0; background: var(--shelf-window); }
.dd-hole__thumb { aspect-ratio: 3 / 2; background: #0d0d0d; border-bottom: 2px solid var(--shelf-ink); overflow: hidden; display: grid; place-items: center; color: #777; font-size: 26px; }
.dd-hole__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-hole__cap { padding: 8px; }
.dd-hole__cap b { display: block; font-family: var(--shelf-serif); font-size: 15px; }
.dd-hole__cap small { display: block; font-size: 11px; color: var(--shelf-muted); margin-top: 2px; }

/* flipbook keeps its own look inside the chrome */
.dd-flipbook { font-family: var(--shelf-chrome); }
/* Discovery Interface Styles */
.filter-tag {
  @apply inline-block px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-full cursor-pointer transition-colors;
}

@media (hover: hover) {
  .filter-tag:hover {
    @apply bg-gray-300;
  }
}

.filter-tag.active {
  @apply bg-blue-500 text-white;
}

/* Discovery Grid - Masonry Layout */
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

.discovery-item {
  @apply bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer transition-all duration-200;
  break-inside: avoid;
}

@media (hover: hover) {
  .discovery-item:hover {
    @apply shadow-md transform scale-102;
  }
}

.discovery-item.selected {
  @apply ring-2 ring-blue-500 shadow-lg;
}

/* Content Type Specific Styling */
.discovery-item[data-type="unsplash"] {
  @apply border-l-4 border-blue-500;
}

.discovery-item[data-type="film_grab"] {
  @apply border-l-4 border-purple-500;
}

/* Discovery Item Image */
.discovery-item img {
  @apply w-full h-auto object-cover;
  min-height: 150px;
  max-height: 300px;
}

/* Color Palette Display */
.color-palette {
  @apply flex space-x-1 mt-2;
}

.color-palette .color-swatch {
  @apply w-4 h-4 rounded-full border border-gray-200;
}

/* Loading States */
.discovery-loading {
  @apply flex items-center justify-center p-8 text-gray-500;
}

.discovery-loading .spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500;
}

/* Error States */
.discovery-error {
  @apply bg-red-50 border border-red-200 text-red-800 p-4 rounded-lg;
}

/* Empty States */
.discovery-empty {
  @apply text-center p-8 text-gray-500;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .discovery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
  }
  
  .discovery-item img {
    min-height: 120px;
    max-height: 200px;
  }
}

/* Letterboxd-style Enhancements */

/* Line Clamp Utilities */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Film Poster Hover Effects */
.film-poster-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .film-poster-container:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}

.film-poster-container img {
  transition: transform 0.2s ease-in-out;
}

@media (hover: hover) {
  .film-poster-container:hover img {
    transform: scale(1.05);
  }
}

/* Hero Background Image Styling */
.hero-background {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

/* Rating Cards */
.rating-card {
  backdrop-filter: blur(10px);
  background: rgba(31, 41, 55, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.5);
}

/* Custom Scrollbar for Dark Theme */
.dark-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-scrollbar::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 4px;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 4px;
}

@media (hover: hover) {
  .dark-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
  }
}

/* Film Grid Animations */
.film-grid-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .film-grid-item:hover {
    transform: translateY(-2px);
  }
}

/* Typography Enhancements */
.film-title {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.film-year {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Button Hover Effects */
.btn-primary {
  @apply bg-blue-600 text-white px-6 py-2 rounded-lg font-medium;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .btn-primary:hover {
    @apply bg-blue-700 shadow-lg;
    transform: translateY(-1px);
  }
}

.btn-secondary {
  @apply bg-gray-600 text-white px-4 py-2 rounded-lg font-medium;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .btn-secondary:hover {
    @apply bg-gray-700;
  }
}

/* Form Input Styling for Dark Theme */
.form-input-dark {
  @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400 rounded-lg;
  transition: all 0.2s ease-in-out;
}

.form-input-dark:focus {
  @apply border-blue-500 ring-blue-500 ring-opacity-50;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Screenshot Gallery Enhancements */
.screenshot-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .screenshot-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3);
  }
}

.screenshot-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

@media (hover: hover) {
  .screenshot-item:hover .screenshot-overlay {
    opacity: 1;
  }
}

/* Responsive Typography */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.1;
  }
  
  .film-grid-item h3 {
    font-size: 0.875rem;
  }
}
/* Help center: the About chrome (about_page.css) plus what the guides need.
   Tokens and .retro-* come from retro_tokens.css and shelf_page.css. */
/* .help-page [hidden] outranks .retro-win and .help-grid, which set display after Tailwind's preflight */
.help-page [hidden] { display: none; }

/* ---------- front page ---------- */
.help-search { margin-top: 6px; max-width: 480px; }
.help-search .retro-input { width: 100%; }
.help-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 768px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help-topic .retro-win__titlebar a { color: inherit; text-decoration: none; }
.help-topic .retro-win__titlebar a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.help-topic__blurb { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--shelf-muted); }
.help-results__empty { margin: 0; font-size: 14px; color: var(--shelf-muted); }
.help-results__topic {
  margin-left: 8px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}

/* ---------- topic switch (select) ---------- */
.help-switch { display: grid; gap: 6px; max-width: 360px; }
.help-switch__label {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.help-switch .retro-input { width: 100%; }

/* ---------- topic page: the article list ---------- */
.help-articles { margin: 0; padding: 0; list-style: none; }
.help-articles li { padding: 12px 0; border-bottom: 1px solid var(--shelf-rule); }
.help-articles li:first-child { padding-top: 0; }
.help-articles li:last-child { padding-bottom: 0; border-bottom: 0; }
.help-articles a { font-weight: 700; font-size: 16px; text-decoration: none; }
.help-articles a::before { content: "▸ "; color: var(--shelf-gold); }
.help-articles a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.help-articles p { margin: 4px 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--shelf-muted); max-width: 62ch; }

/* ---------- article page: sidebar + article ---------- */
.help-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.help-aside { display: grid; gap: 12px; }
.help-aside__win { display: none; }
@media (min-width: 900px) {
  .help-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .help-aside { position: sticky; top: 16px; }
  .help-aside__select { display: none; }
  .help-aside__win { display: block; }
}
.help-aside__win .about-menu a { font-size: 13px; padding: 8px 12px; }
.help-aside__win .about-menu a[aria-current="page"] { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }

.help-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.help-pager__link {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; padding: 8px 0;
}
.help-pager__link:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 3px; }

/* ---------- the guide itself ---------- */
.help-article { font-size: 16px; line-height: 1.6; color: var(--shelf-ink); }
.help-article > :first-child { margin-top: 0; }
.help-article h2 { margin: 30px 0 10px; font-family: var(--shelf-serif); font-weight: 700; font-size: 26px; line-height: 1.15; }
.help-article h3 { margin: 26px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.help-article h4 { margin: 18px 0 6px; font-size: 16px; font-weight: 700; }
.help-article h5 {
  margin: 14px 0 6px; font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.help-article p { margin: 0 0 12px; max-width: 68ch; }
.help-article ul, .help-article ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; max-width: 68ch; }
.help-article ul { list-style: square; }
.help-article ol { list-style: decimal; }
.help-article li::marker { color: var(--shelf-gold-hover); }
.help-article li > ul, .help-article li > ol { margin: 6px 0 0; }
.help-article a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.help-article code { font-family: var(--shelf-mono); font-size: 0.9em; background: var(--shelf-row-selected); border: 1px solid var(--shelf-rule); padding: 1px 5px; }
.help-article hr { border: 0; border-top: 2px solid var(--shelf-rule); margin: 22px 0; }
.help-article img { max-width: 100%; height: auto; border: 2px solid var(--shelf-ink); }
.help-article table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 14px; }
.help-article th, .help-article td { border: 1px solid var(--shelf-rule); padding: 6px 10px; text-align: left; vertical-align: top; }
.help-article th { background: var(--shelf-row-selected); font-family: var(--shelf-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* A tip at the end of a guide */
.help-note { margin: 22px 0 0; border: 2px solid var(--shelf-ink); background: var(--shelf-row-selected); padding: 12px 14px; box-shadow: 3px 3px 0 var(--shelf-ink); }
.help-note p { margin: 0; max-width: none; }
.help-note p + p { margin-top: 8px; }
.help-note + .help-note { margin-top: 14px; }

/* A boxed aside inside a guide (an option, a status, a comparison column) */
.help-box { border: 2px solid var(--shelf-ink); background: var(--shelf-window); padding: 12px 14px; margin: 0 0 12px; }
.help-box > :first-child { margin-top: 0; }
.help-box > :last-child { margin-bottom: 0; }

/* guidelines: a list inside prose, with a paragraph after it */
.help-page .about-prose .about-list { margin-bottom: 12px; }

/* ---------- contact form ---------- */
@media (min-width: 900px) { .help-layout--contact { grid-template-columns: minmax(0, 1fr) 280px; } }
.help-form { display: grid; gap: 16px; }
.help-form__field { display: grid; gap: 6px; }
.help-form__field .retro-input { width: 100%; }
.help-form__error { font-family: var(--shelf-mono); font-size: 12px; color: var(--shelf-danger); }
.help-form__actions { padding-top: 4px; }
.help-aside .about-card p:last-child { margin-bottom: 0; }
/* The guest front door: the Read page's masthead shape, then a retro window per section with ink
   cards inside. cards_page.css brings the paper and the feed window's card reset; tokens,
   --site-width and .retro-* come from retro_tokens.css and shelf_page.css. The copy keeps the
   app's own font; only the chrome uses the shelf faces. */
.home-page { min-height: 85svh; color: var(--shelf-ink); }
.home-page__inner {
  max-width: var(--site-width); margin: 0 auto;
  padding: 28px var(--site-gutter) 60px;
  display: grid; gap: 28px;
}

/* ---------- masthead: the pitch on the left, one live card on the right ---------- */
.home-masthead { border-bottom: 2.5px solid var(--shelf-ink); background: var(--shelf-row-selected); }
.home-masthead__inner {
  max-width: var(--site-width); margin: 0 auto; padding: 32px var(--site-gutter);
  display: grid; grid-template-columns: 1fr; gap: 28px 40px; align-items: start;
}
/* shelf_page.css pins .shelf-masthead to the shelf grid's second column; here it leads. */
.home-masthead .shelf-masthead { grid-column: 1; grid-row: auto; align-self: center; }
@media (min-width: 1024px) { .home-masthead__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.home-masthead h1 em { font-style: italic; color: var(--shelf-gold-hover); }
.home-masthead__sub { margin: 0; font-size: 17px; line-height: 1.5; max-width: 52ch; }
.home-masthead__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.home-peek { display: grid; gap: 8px; min-width: 0; }
.home-peek__label {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--shelf-muted);
}
.home-peek__empty-body { padding: 24px 20px; display: grid; gap: 8px; text-align: center; }
.home-peek__empty-body h2 { margin: 0; font-family: var(--shelf-serif); font-size: 22px; font-weight: 700; }
.home-peek__empty-body p { margin: 0; color: var(--shelf-muted); max-width: 40ch; justify-self: center; }

/* ---------- the line under the masthead ---------- */
.home-proof { border-bottom: 2.5px solid var(--shelf-ink); background: var(--shelf-window); }
.home-proof__inner {
  max-width: var(--site-width); margin: 0 auto; padding: 10px var(--site-gutter);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 12px; line-height: 1.5; color: var(--shelf-muted);
}

/* ---------- windows ---------- */
.home-win__body { padding: 20px; }
.home-win__intro { margin: 0; font-size: 15px; line-height: 1.55; max-width: 62ch; }
.home-win__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.home-win__empty { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 12px 0; }
.home-win__empty p { margin: 0; color: var(--shelf-muted); }
.home-two { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .home-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A gold icon square with an ink border, for reasons, cards and pillars. */
.home-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  background: var(--shelf-gold); color: #fff;
  border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
}
.home-icon svg { width: 20px; height: 20px; }
.home-icon i { font-size: 16px; }

/* ---------- neighborhood spotlight ---------- */
.home-spotlight__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.home-spotlight__name { margin: 0 0 6px; font-family: var(--shelf-serif); font-size: 24px; font-weight: 700; line-height: 1.1; }

/* ---------- why join ---------- */
.home-reasons { display: grid; grid-template-columns: 1fr; gap: 18px 28px; }
@media (min-width: 768px) { .home-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-reason { display: flex; gap: 14px; align-items: flex-start; }
.home-reason h3 { margin: 4px 0 4px; font-size: 15px; font-weight: 700; }
.home-reason p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--shelf-muted); }

/* ---------- ink cards ---------- */
.home-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.home-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
  background: var(--shelf-window); padding: 16px; margin: 0;
}
.home-card h3 {
  margin: 0; font-family: var(--shelf-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--shelf-gold-hover);
}
.home-card p { margin: 0; font-size: 14px; line-height: 1.55; flex: 1; }
.home-card__link { font-weight: 700; font-size: 13px; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.home-card__link::after { content: " ▸"; color: var(--shelf-gold); }
.home-card__link:hover { color: var(--shelf-gold-hover); }
.home-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; align-self: stretch; }
.home-list li { position: relative; padding-left: 16px; }
.home-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; background: var(--shelf-gold); border: 1.5px solid var(--shelf-ink); }

/* ---------- featured deep dives and blogs ---------- */
.home-dives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .home-dives { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-dive { display: grid; gap: 6px; text-decoration: none; min-width: 0; }
.home-dive__cover {
  display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
  background: var(--shelf-gold); color: rgba(255, 255, 255, 0.7); font-size: 28px;
}
.home-dive__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-dive__title { font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.home-blogs { display: grid; gap: 16px; }
.home-blog {
  display: block; text-decoration: none; color: inherit; overflow: hidden;
  border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); background: var(--shelf-window);
}
.home-blog__cover { display: block; aspect-ratio: 5 / 2; overflow: hidden; border-bottom: 2px solid var(--shelf-ink); background: #1a1a1a; }
.home-blog__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-blog__body { display: grid; gap: 6px; padding: 14px 16px; }
.home-blog__title { font-family: var(--shelf-serif); font-size: 20px; font-weight: 700; line-height: 1.2; }
.home-blog:hover .home-blog__title { color: var(--shelf-gold-hover); }
.home-blog__excerpt { font-size: 14px; line-height: 1.5; color: var(--shelf-muted); }
.home-blog__meta { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
@media (prefers-reduced-motion: no-preference) {
  .home-dive__cover, .home-blog { transition: transform 0.08s, box-shadow 0.08s; }
  .home-dive:hover .home-dive__cover, .home-blog:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shelf-ink); }
}

/* ---------- cool people ---------- */
.home-creators { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .home-creators { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-creators { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-creator {
  display: flex; flex-direction: column;
  border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); background: var(--shelf-window);
}
.home-creator__cover { aspect-ratio: 5 / 2; overflow: hidden; border-bottom: 2px solid var(--shelf-ink); background: #1a1a1a; }
.home-creator__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-creator__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.home-creator__who { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.home-creator__who:hover .home-creator__name { color: var(--shelf-gold-hover); }
.home-creator__name { font-family: var(--shelf-serif); font-size: 20px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.home-creator__bio { margin: 0; font-size: 14px; line-height: 1.5; }
.home-creator__meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted);
}
.home-creator__latest { margin: 0; font-size: 13px; line-height: 1.45; display: grid; gap: 2px; }
.home-creator__latest-label { font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-gold-hover); }
.home-creator__latest a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.home-creator__latest time { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
.home-creator__visit { margin-top: auto; align-self: flex-start; }

/* ---------- recent reviews ---------- */
.home-reviews { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .home-reviews { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.home-reviews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 640px) { .home-reviews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-reviews__pitch { background: var(--shelf-row-selected); }

/* ---------- the closing pitch ---------- */
.home-cta .home-win__body { text-align: center; padding: 28px 20px; }
.home-cta__copy { margin: 0 auto 24px; max-width: 60ch; font-size: 17px; line-height: 1.55; }
.home-pillars { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .home-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-pillar { display: grid; justify-items: center; gap: 8px; }
.home-pillar h3 { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.home-pillar p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--shelf-muted); max-width: 32ch; }
.home-cta .home-win__actions { justify-content: center; }
/* Neighborhood page (communities#show) on the shelf grid: the masthead carries the pulse and
   the stats, the rail carries membership, the rooms menu, founders and moderator tools, and
   each content section is a retro window. Phone-first: the shelf grid stacks to one column
   under 820px, and the card grids widen at md 768 and xl 1280. Tokens, --site-width and
   .retro-* come from retro_tokens.css and shelf_page.css. */
.hood-page .shelf-main { gap: 22px; }
.hood-page .retro-win__status a { text-decoration: none; }
.hood-page .retro-win__status a::after { content: " ▸"; }
.hood-page .retro-win__status a:hover { color: var(--shelf-gold-hover); }

/* ---------- masthead pulse ---------- */
.hood-pulse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hood-avatars { display: flex; }
.hood-avatars .retro-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--shelf-ground); }
.hood-avatars > :first-child { margin-left: 0; }
.hood-pulse__note, .hood-sticker {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--shelf-muted);
}
.hood-sticker { border: 2px dashed var(--shelf-ink); background: var(--shelf-row-selected); padding: 3px 9px; color: var(--shelf-ink); }
.hood-meter { display: block; width: 120px; height: 12px; border: 2px solid var(--shelf-ink); background: var(--shelf-window); }
.hood-meter i { display: block; height: 100%; background: var(--shelf-gold); }

/* ---------- rail ---------- */
.hood-membership__body { padding: 12px; display: grid; gap: 10px; font-size: 13px; }
.hood-membership__body p { margin: 0; line-height: 1.5; }
.hood-membership__body form { display: contents; }
.hood-membership__body .retro-btn { justify-self: start; }
.hood-membership__state {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.hood-dot { width: 9px; height: 9px; border-radius: 50%; background: #28c840; border: 1.5px solid var(--shelf-ink); }
.hood-menu__empty { display: block; padding: 8px 12px; font-size: 13px; color: var(--shelf-muted); }
.hood-founders { list-style: none; margin: 0; padding: 4px 0; }
.hood-founders li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--shelf-rule); font-size: 13px; }
.hood-founders li:last-child { border-bottom: 0; }
.hood-founders a { font-weight: 700; text-decoration: none; }
.hood-founders a:hover { color: var(--shelf-gold-hover); }
.hood-founders span, .hood-founders__more { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }

.hood-mod__toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.hood-mod__toggle p { margin: 0; font-size: 12px; color: var(--shelf-muted); }
.hood-mod__toggle svg { width: 16px; height: 16px; flex: none; }
.hood-mod__content { border-top: 2px solid var(--shelf-ink); padding: 12px; display: grid; gap: 14px; font-size: 13px; }
.hood-mod__content.hidden { display: none; }
.hood-mod h3 {
  margin: 0 0 6px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.hood-mod__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hood-mod__head a { font-size: 12px; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.hood-mod__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--shelf-rule); }
.hood-mod__row:last-child { border-bottom: 0; }
.hood-mod__row small { display: block; font-size: 11px; color: var(--shelf-muted); }
.hood-mod__row form { display: contents; }
.hood-mod__actions { display: flex; gap: 6px; }
.hood-mod__note { margin: 0; color: var(--shelf-muted); }
.hood-mod__grant { display: flex; flex-wrap: wrap; gap: 8px; }
.hood-mod__grant .retro-input { flex: 1; min-width: 160px; font-size: 13px; padding: 6px 8px; }

/* ---------- prompt window ---------- */
.hood-prompt__body { padding: 14px; display: grid; gap: 10px; font-size: 14px; }
.hood-prompt__body h3 { margin: 0; font-family: var(--shelf-serif); font-size: 22px; line-height: 1.2; }
.hood-prompt__body p { margin: 0; line-height: 1.5; }
.hood-prompt__aside { font-size: 12px; color: var(--shelf-muted); }
.hood-prompt__buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hood-prompt__buttons form { display: contents; }
.hood-perk { border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); background: var(--shelf-row-selected); padding: 10px 12px; font-size: 13px; }
.hood-perk b {
  display: block; margin-bottom: 4px;
  font-family: var(--shelf-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-gold-hover);
}
.hood-pulse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hood-pulse-list li { display: grid; gap: 2px; }
.hood-pulse-list q { font-family: var(--shelf-serif); font-size: 15px; line-height: 1.4; }
.hood-pulse-list span { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
.hood-pulse-list.is-blurred li { filter: blur(2px); user-select: none; }

/* ---------- section tabs + the lounge ---------- */
.hood-sections { flex-wrap: wrap; }
/* The lounge keeps its own chat chrome (title bar, Here now, the form); only its frame becomes an ink box. */
.hood-lounge > section { border: 2.5px solid var(--shelf-ink); border-radius: 0; box-shadow: 4px 4px 0 var(--shelf-ink); }

/* ---------- content windows ---------- */
.hood-win__body { position: relative; padding: 14px; }
.hood-win__body.is-gated { padding-bottom: 80px; }
.hood-win .shelf-empty { margin: 0; padding: 4px 0; }
.hood-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) {
  .hood-cards--two, .hood-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .hood-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The card partials bring their own rounded borders (Tailwind utilities, one class each); two
   class names here outrank them by specificity, whatever order the stylesheets load in. */
.hood-page .hood-cards > * { border-radius: 0; border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); margin-bottom: 0; min-width: 0; }
.hood-gate {
  position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 45%, #fff 100%);
}
.hood-gate form { display: contents; }

/* ======================================================================
   Neighborhoods map (communities#index): the same shelf grid; the rail menu
   is buttons that filter the page in place, so it borrows .shelf-menu's row
   look for <button>s. Card grids widen at sm 640 and lg 1024. */
.hoods-page .shelf-main { gap: 22px; }
.hoods-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hoods-actions .retro-btn i { color: var(--shelf-gold); margin-right: 4px; }
.hoods-menu .shelf-menu button {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--shelf-rule);
  background: none; font: inherit; font-weight: 700; font-size: 13px; color: inherit; text-align: left; cursor: pointer;
}
.hoods-menu .shelf-menu button:last-child { border-bottom: 0; }
.hoods-menu .shelf-menu button:hover { background: var(--shelf-row-hover); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.hoods-menu .shelf-menu button.is-current { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.hoods-menu .shelf-menu button i { color: var(--shelf-gold); width: 16px; }
.hoods-menu .shelf-menu button b { font-family: var(--shelf-mono); font-size: 11px; color: var(--shelf-muted); }
.hoods-menu .shelf-menu button:focus-visible { outline: 3px solid var(--shelf-gold); outline-offset: -3px; }

.hoods-featured { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px; }
@media (min-width: 640px) { .hoods-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hoods-feature {
  display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit;
  background: var(--shelf-window); border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
}
.hoods-feature.hidden { display: none; }
.hoods-feature:hover .hoods-feature__name { color: var(--shelf-gold-hover); }
.hoods-feature__cover {
  display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%;
  background: var(--shelf-ink); color: var(--shelf-gold); font-size: 26px; border-bottom: 2px solid var(--shelf-ink);
}
.hoods-feature__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoods-feature__body { display: grid; gap: 4px; padding: 10px 12px; }
.hoods-feature__name { font-family: var(--shelf-serif); font-weight: 700; font-size: 18px; line-height: 1.2; }
.hoods-feature__meta { font-family: var(--shelf-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted); }
.hoods-live { color: var(--shelf-ink); }
.hoods-live i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #28c840; border: 1.5px solid var(--shelf-ink); animation: hoods-live-pulse 1.8s ease-in-out infinite; }
@keyframes hoods-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .hoods-live i { animation: none; } }

.hoods-rooms { display: grid; }
.hoods-room { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--shelf-rule); font-size: 13px; }
.hoods-room:last-of-type { border-bottom: 0; }
.hoods-room:hover { background: var(--shelf-row-hover); }
.hoods-room.hidden { display: none; }
.hoods-room__thumb { width: 52px; height: 38px; flex: none; }
.hoods-room__thumb span { color: var(--shelf-gold); }
/* The words wrap (no nowrap here): a nowrap line sets the row's min-content and pushes phones sideways. */
.hoods-room__words { flex: 1 1 140px; min-width: 0; }
.hoods-room__words p { margin: 0; overflow-wrap: anywhere; }
.hoods-room__desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hoods-room__name a { font-weight: 700; text-decoration: none; }
.hoods-room__name a:hover { color: var(--shelf-gold-hover); }
.hoods-room__desc { font-size: 12px; color: var(--shelf-muted); }
.hoods-room__hood { padding: 3px 9px; font-size: 11px; box-shadow: 1px 1px 0 var(--shelf-ink); }
.hoods-room__count { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); flex: none; }
.hoods-rooms__empty { margin: 0; padding: 14px; text-align: center; font-size: 13px; color: var(--shelf-muted); }
.hoods-rooms__empty.hidden { display: none; }
/* Two class names so it outranks .retro-chip by specificity, not by stylesheet order. */
@media (max-width: 639px) { .hoods-room .hoods-room__hood { display: none; } }

.hoods-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
@media (min-width: 640px) { .hoods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hoods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hoods-card {
  display: grid; gap: 8px; min-width: 0; padding: 10px 12px; text-decoration: none; color: inherit;
  background: var(--shelf-window); border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
}
.hoods-card.hidden { display: none; }
.hoods-card:hover .hoods-card__name { color: var(--shelf-gold-hover); }
.hoods-card__top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hoods-card__emoji { font-size: 18px; }
.hoods-card__rooms { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
.hoods-card__name { font-family: var(--shelf-serif); font-weight: 700; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoods-card__meter { width: 100%; height: 8px; }
.hoods-card__go { font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-gold-hover); }

/* ======================================================================
   Lounge logs (communities#chat_logs): messages as day-grouped rows. */
.hood-logs .feed-empty { margin: 0; max-width: none; }
.hood-log__list { display: grid; }
.hood-log__row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--shelf-rule); font-size: 14px; }
.hood-log__row:last-child { border-bottom: 0; }
.hood-log__row:hover { background: var(--shelf-row-hover); }
.hood-log__row .retro-avatar { flex: none; }
.hood-log__words { flex: 1; min-width: 0; }
.hood-log__who { margin: 0 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hood-log__who a { font-weight: 700; text-decoration: none; }
.hood-log__who a:hover { color: var(--shelf-gold-hover); }
.hood-log__who time { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
.hood-log__text { overflow-wrap: anywhere; line-height: 1.5; }
.hood-log__text em { color: var(--shelf-muted); }
.hood-log__pager { display: flex; gap: 12px; }
/* ─── The hub: a welcome screen ───
   Wallpaper behind retro windows. Values come from docs/agents/retro_os_design_system.md
   (gold title bars, black borders, hard offset shadows, Arial chrome, Courier labels) and are
   declared once here so the page can be re-tinted in one place. Loaded only by the hub. */
:root {
  --hub-desk: #6F8A8F;
  --hub-desk-2: #5E777C;
  --hub-ink: #1a1a1a;
  --hub-ink-2: #4A3F32;
  --hub-ink-3: #6B5532;
  --hub-gold: #B39B63;
  --hub-gold-2: #A08C5C;
  --hub-gold-pale: #E9DFC6;
  --hub-cream: #FFFBF4;
  --hub-hover: #faf6ee;
  --hub-selected: #f5edda;
  --hub-rule: #d4c9b0;
  --hub-parchment: #EDE6D4;
  --hub-green: #1F6F4A;
  --hub-flag: #D9302C;
  --hub-screen: #2C2416;
  --hub-pill-draft: #FFF2CC;
  --hub-pill-on: #E3F3EA;
  --hub-pill-quiet: #EEE9DD;
  --hub-pill-no: #FBE7E7;
  --hub-light-red: #ff5f57;
  --hub-light-yellow: #febc2e;
  --hub-light-green: #28c840;
  --hub-chrome: Arial, Helvetica, sans-serif;
  --hub-mono: 'Courier New', Courier, monospace;
}
.hub-desk {
  background-color: var(--hub-desk);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.10) 1px, transparent 1.5px),
    linear-gradient(135deg, var(--hub-desk) 0%, var(--hub-desk-2) 100%);
  background-size: 14px 14px, 100% 100%;
}
.hub-win { background: #fff; border: 2.5px solid var(--hub-ink); box-shadow: 5px 5px 0 var(--hub-ink); }
.hub-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--hub-gold); border-bottom: 2.5px solid var(--hub-ink); }
.hub-bar-title { flex: 1; margin: 0; text-align: center; color: #fff; font: 700 13px/1.3 var(--hub-chrome); letter-spacing: 0.04em; }
.hub-bar-right { color: rgba(255, 255, 255, 0.85); font: 700 10px var(--hub-mono); letter-spacing: 0.12em; }
.hub-light { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hub-ink); }
.hub-light--red { background: var(--hub-light-red); }
.hub-light--yellow { background: var(--hub-light-yellow); }
.hub-light--green { background: var(--hub-light-green); }

.hub-welcome { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--hub-cream); border-bottom: 2px solid var(--hub-ink); }
.hub-avatar { width: 64px; height: 64px; flex: none; border: 2px solid var(--hub-ink); box-shadow: 3px 3px 0 var(--hub-ink); overflow: hidden; background: var(--hub-parchment); display: grid; place-items: center; }
.hub-hello { margin: 0; font: 900 26px/1 var(--hub-chrome); letter-spacing: -0.02em; }
.hub-hello em { font-style: italic; color: var(--hub-gold-2); }
.hub-since { margin-left: auto; text-align: right; font: 700 10px/1.6 var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }

.hub-col { padding: 14px; min-width: 0; }
.hub-col + .hub-col { border-top: 2px solid var(--hub-ink); }
@media (min-width: 768px) { .hub-col + .hub-col { border-top: 0; border-left: 2px solid var(--hub-ink); } }
.hub-col-h { margin: 0 0 10px; font: 700 10px var(--hub-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--hub-ink-3); }

.hub-got { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 12px 8px 10px; background: #fff; border: 2px solid var(--hub-ink); box-shadow: 3px 3px 0 var(--hub-ink); text-align: center; color: var(--hub-ink); font-family: var(--hub-chrome); }
.hub-got:hover { background: var(--hub-hover); }
.hub-got:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-got--hot { background: var(--hub-cream); }
.hub-got--quiet { box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink-2); }
.hub-got svg { width: 44px; height: 44px; }
.hub-got b { font-size: 13px; font-weight: 900; letter-spacing: -0.01em; }
.hub-got--quiet b { font-weight: 700; }
.hub-got small { font: 11px var(--hub-mono); color: var(--hub-ink-3); }

.hub-meter { display: block; height: 100%; border: 2px solid var(--hub-ink); background: #fff; padding: 8px 6px 6px; text-align: center; box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink); }
.hub-meter:hover { background: var(--hub-hover); }
.hub-lcd { display: inline-block; font: 700 26px/1 var(--hub-mono); padding: 2px 8px; background: var(--hub-ink); color: var(--hub-gold-pale); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.hub-meter b { display: block; font: 700 11px var(--hub-chrome); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.hub-meter small { display: block; min-height: 12px; font: 10px var(--hub-mono); color: var(--hub-ink-3); }

.hub-listbox { border: 2px solid var(--hub-ink); background: #fff; }
.hub-listbox-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 10px; background: var(--hub-gold-pale); border-bottom: 2px solid var(--hub-ink); font: 700 11px var(--hub-chrome); letter-spacing: 0.06em; text-transform: uppercase; }
.hub-listbox-h a { color: var(--hub-gold-2); font: 700 10px var(--hub-mono); letter-spacing: 0.1em; }
.hub-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--hub-rule); font-size: 13px; color: var(--hub-ink); }
.hub-row:last-child { border-bottom: 0; }
.hub-row:hover { background: var(--hub-hover); }
.hub-row-title { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.hub-row-meta { display: block; font: 10px var(--hub-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-ink-3); margin-top: 2px; }
.hub-pill { font: 700 10px var(--hub-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border: 1.5px solid var(--hub-ink); background: #fff; white-space: nowrap; }
.hub-pill--draft { background: var(--hub-pill-draft); }
.hub-pill--on { background: var(--hub-pill-on); }
.hub-pill--quiet { background: var(--hub-pill-quiet); }

.hub-chan { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; font: 700 12px var(--hub-chrome); border: 2px solid var(--hub-ink); background: #fff; box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink); }
.hub-chan:hover { background: var(--hub-hover); }
.hub-chan:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-chan--gold { background: var(--hub-gold); color: #fff; }
.hub-chan--gold:hover { background: var(--hub-gold-2); }
.hub-chan-sep { height: 1px; border: 0; background: var(--hub-rule); margin: 10px 0; }

.hub-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 5px 12px; border-top: 2.5px solid var(--hub-ink); background: var(--hub-cream); font: 10px var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-status b { color: var(--hub-ink); }

.hub-grp { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--hub-gold-pale); border-top: 1.5px solid var(--hub-ink); border-bottom: 1.5px solid var(--hub-ink); font: 900 12px var(--hub-chrome); }
.hub-grp:first-child { border-top: 0; }
.hub-grp em { font: 700 11px var(--hub-mono); color: var(--hub-ink-3); }
.hub-grp-new { margin-left: 6px; font: 700 10px var(--hub-mono); color: var(--hub-green); }
.hub-buddy { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; font-size: 12px; border-bottom: 1px solid var(--hub-rule); }
.hub-buddy-meta { display: block; font: 10px var(--hub-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-btn { font: 700 11px var(--hub-chrome); padding: 3px 8px; border: 2px solid var(--hub-ink); box-shadow: 2px 2px 0 var(--hub-ink); background: #fff; color: var(--hub-ink); white-space: nowrap; cursor: pointer; }
.hub-btn:hover { background: var(--hub-hover); }
.hub-btn:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-btn--gold { background: var(--hub-gold); color: #fff; }
.hub-btn--gold:hover { background: var(--hub-gold-2); }
.hub-foot { display: flex; gap: 6px; padding: 10px; border-top: 2px solid var(--hub-ink); background: var(--hub-cream); }
.hub-foot .hub-btn { flex: 1; text-align: center; padding: 6px 4px; }

.hub-got:focus-visible, .hub-meter:focus-visible, .hub-chan:focus-visible, .hub-btn:focus-visible, .hub-row:focus-visible, .hub-avatar-link:focus-visible {
  outline: 3px solid var(--hub-gold); outline-offset: 2px;
}

/* ─── Your Algorithm window ─── */
.hub-algo-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; padding: 16px 18px; background: var(--hub-cream); border-bottom: 2px solid var(--hub-ink); align-items: center; }
@media (max-width: 767px) { .hub-algo-head { grid-template-columns: 1fr; } }
.hub-algo-title { margin: 0; font: 900 24px/1.05 var(--hub-chrome); letter-spacing: -0.02em; }
.hub-algo-title em { font-style: italic; color: var(--hub-gold-2); }
.hub-algo-lede { margin: 6px 0 0; font-size: 13px; color: var(--hub-ink-2); max-width: 60ch; }
.hub-counter { border: 2px solid var(--hub-ink); background: #fff; box-shadow: 3px 3px 0 var(--hub-ink); padding: 10px 12px; text-align: center; }
.hub-counter-label { font: 700 10px var(--hub-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-counter .hub-lcd { font-size: 30px; margin: 6px 0 4px; padding: 3px 10px; }
.hub-counter small { display: block; font: 10px var(--hub-mono); color: var(--hub-ink-3); }
.hub-counter-delta { display: inline-block; margin-top: 6px; font: 700 10px var(--hub-mono); color: var(--hub-green); background: var(--hub-pill-on); border: 1.5px solid var(--hub-ink); padding: 1px 6px; }
.hub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .hub-steps { grid-template-columns: 1fr; } }
.hub-step { padding: 14px; min-width: 0; }
.hub-step + .hub-step { border-top: 2px solid var(--hub-ink); }
@media (min-width: 768px) { .hub-step + .hub-step { border-top: 0; border-left: 2px solid var(--hub-ink); } }
.hub-step-title { margin: 0 0 2px; font: 900 14px var(--hub-chrome); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hub-step-title a { font: 700 10px var(--hub-mono); letter-spacing: 0.1em; color: var(--hub-gold-2); }
.hub-step-sub { margin: 0 0 10px; font-size: 12px; color: var(--hub-ink-3); }
.hub-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hub-toggles form { margin: 0; }
.hub-tog { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font: 700 12px var(--hub-chrome); border: 2px solid var(--hub-ink); background: #fff; box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink); cursor: pointer; }
.hub-tog:hover { background: var(--hub-hover); }
.hub-tog:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-tog:disabled { opacity: 0.6; cursor: wait; }
.hub-tog [data-box] { width: 12px; height: 12px; border: 2px solid var(--hub-ink); background: #fff; display: inline-grid; place-items: center; font: 700 9px var(--hub-mono); }
.hub-tog--on { background: var(--hub-selected); }
.hub-tog--on [data-box] { background: var(--hub-gold); color: #fff; }
.hub-tog--no { background: var(--hub-pill-no); }
.hub-tog-input { display: inline-flex; border: 2px solid var(--hub-ink); background: var(--hub-cream); box-shadow: 2px 2px 0 var(--hub-ink); }
.hub-tog-input input { width: 150px; border: 0; background: transparent; padding: 5px 8px; font: 700 12px var(--hub-mono); color: var(--hub-ink); outline: none; }
.hub-tog-input input::placeholder { color: var(--hub-ink-3); font-weight: 400; }
.hub-tog-input button { border: 0; border-left: 2px solid var(--hub-ink); background: var(--hub-gold); color: #fff; font: 700 12px var(--hub-chrome); padding: 0 10px; cursor: pointer; }
.hub-creator { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hub-rule); }
.hub-creator:last-child { border-bottom: 0; }
.hub-creator-av { width: 36px; height: 36px; border: 2px solid var(--hub-ink); background: var(--hub-parchment); flex: none; overflow: hidden; display: grid; place-items: center; font: 700 12px var(--hub-mono); color: var(--hub-ink-3); }
.hub-creator-av img { width: 100%; height: 100%; object-fit: cover; }
.hub-creator-who { flex: 1; min-width: 0; font-size: 12px; }
.hub-creator-who b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-creator-who small { display: block; font: 10px var(--hub-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hub-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-creator form { margin: 0; }
.hub-btn--pressed { box-shadow: inset 1px 1px 0 var(--hub-ink); background: var(--hub-selected); }
.hub-avs { display: inline-flex; }
.hub-avs span { width: 28px; height: 28px; border: 2px solid var(--hub-ink); background: var(--hub-parchment); margin-right: -8px; display: block; overflow: hidden; }
.hub-avs img { width: 100%; height: 100%; object-fit: cover; }
.hub-algo-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .hub-algo-rows { grid-template-columns: 1fr 1fr; } }
.hub-algo-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 14px; border-top: 2.5px solid var(--hub-ink); background: var(--hub-cream); font: 10px var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-algo-foot b { color: var(--hub-ink); }
.hub-algo-foot a { color: var(--hub-gold-2); font-weight: 700; }
.hub-tog:focus-visible, .hub-tog-input:focus-within { outline: 3px solid var(--hub-gold); outline-offset: 2px; }

/* ─── Your Algorithm control panel (/settings/feed) ─── */
.hub-panel-sect { padding: 14px 18px; border-bottom: 2px solid var(--hub-ink); }
.hub-panel-sect:last-of-type { border-bottom: 0; }
.hub-panel-title { margin: 0 0 4px; font: 900 15px var(--hub-chrome); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.hub-panel-title small { font: 700 10px var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .hub-sources { grid-template-columns: 1fr; } }
.hub-source { display: block; border: 2px solid var(--hub-ink); padding: 8px 10px; background: #fff; box-shadow: 2px 2px 0 var(--hub-ink); font: 700 12px var(--hub-chrome); color: var(--hub-ink); }
.hub-source:hover { background: var(--hub-hover); }
.hub-source b { display: block; font: 700 20px var(--hub-mono); }
.hub-source small { display: block; font: 10px var(--hub-mono); color: var(--hub-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.hub-tog-input--wide { display: flex; width: 100%; max-width: 520px; }
.hub-tog-input--wide input { width: auto; flex: 1; min-width: 0; }
.hub-tog button[data-action] { border: 0; background: transparent; padding: 0 0 0 2px; font: 700 14px/1 var(--hub-mono); color: var(--hub-ink-3); cursor: pointer; }
.hub-tog button[data-action]:hover { color: var(--hub-flag); }
.hub-autocomplete { position: relative; z-index: 20; max-width: 520px; margin-top: 4px; background: #fff; border: 2px solid var(--hub-ink); box-shadow: 3px 3px 0 var(--hub-ink); max-height: 240px; overflow-y: auto; font-size: 13px; }
.hub-source:focus-visible { outline: 3px solid var(--hub-gold); outline-offset: 2px; }

/* ─── "What should we call you?" ─── */
.hub-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.hub-name-field { position: relative; display: inline-flex; align-items: center; }
.hub-name input { width: min(360px, 80vw); border: 0; border-bottom: 3px solid var(--hub-ink); background: transparent; padding: 2px 0 4px; font: 900 26px/1.1 var(--hub-chrome); font-style: italic; letter-spacing: -0.02em; color: var(--hub-gold-2); outline: none; }
.hub-name input::placeholder { color: var(--hub-ink-3); opacity: 1; font-weight: 700; font-style: italic; }
.hub-name input:focus { border-bottom-color: var(--hub-gold); }
/* The cursor blinks beside the placeholder until there is something typed or the field is focused. */
.hub-caret { position: absolute; left: 0; top: 4px; width: 3px; height: 30px; background: var(--hub-ink); animation: hub-blink 1s steps(1) infinite; pointer-events: none; }
.hub-name input:focus ~ .hub-caret, .hub-name input:not(:placeholder-shown) ~ .hub-caret { display: none; }
@keyframes hub-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hub-caret { animation: none; } }
.hub-name-hint { margin: 6px 0 0; font: 11px var(--hub-mono); color: var(--hub-ink-3); }
/* Mobile Navigation Styles */

/* Mobile Header: same retro chrome as the desktop menu bar (docs/agents/retro_os_design_system.md) */
.mobile-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--shelf-window);
  border-bottom: 2.5px solid var(--shelf-ink);
  font-family: var(--shelf-chrome);
}

.mobile-header .retro-btn.is-active { background: var(--shelf-row-selected); }

/* A small ink-bordered dot marking unread activity on the menu and notifications buttons */
.mobile-dot {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  background: #ff5f57;
  border: 2px solid var(--shelf-ink);
  pointer-events: none;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--shelf-window);
  border-bottom: 2.5px solid var(--shelf-ink);
  box-shadow: 0 4px 0 var(--shelf-ink);
  z-index: 40;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

/* Quick-action tiles in the drawer: a .retro-btn laid out as icon over label */
.mobile-menu__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
}
.mobile-menu__tile svg { width: 22px; height: 22px; color: var(--shelf-ink); }
.mobile-menu__tile span { font-size: 11px; white-space: nowrap; }

/* Full-width retro buttons in the drawer and the signed-out create panel */
.mobile-menu__cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  text-align: center;
}

.mobile-menu[style*="display: block"] {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Create Menu */
.mobile-create-menu {
  position: absolute;
  top: 100%;
  right: 1rem;
  background: var(--shelf-window);
  border: 2.5px solid var(--shelf-ink);
  box-shadow: 4px 4px 0 var(--shelf-ink);
  z-index: 40;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  width: 208px; /* w-52 */
}

.mobile-create-menu[style*="display: block"] {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-menu-backdrop[style*="display: block"] {
  opacity: 1;
}

/* ---------- Mobile tab bar ----------
   The header's chrome mirrored at the foot of the window: white ground, 2.5px ink rule, Arial bold.
   One fixed strip of equal-width tabs, 58px tall plus the iPhone home indicator inset. The body
   reserves exactly that height once, in CSS, so nothing reflows while the bar slides away and back
   (mobile_bottom_nav_controller only toggles .is-hidden). */
:root { --mobile-tab-bar-height: 58px; }

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: calc(var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--shelf-window);
  border-top: 2.5px solid var(--shelf-ink);
  font-family: var(--shelf-chrome);
  will-change: transform;
  /* Returning eases out like a native toolbar */
  transition: transform 0.24s cubic-bezier(0.2, 0, 0, 1);
}

/* Off the bottom of the screen, home-indicator inset and all; leaving eases in */
.mobile-bottom-nav.is-hidden {
  transform: translate3d(0, 100%, 0);
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav { transition: none; }
}

.mobile-bottom-nav__tabs {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  box-sizing: border-box;
  padding: 5px 6px;
}

/* A tab is a .nav-links link stood on end: icon over label, the active one a gold pressed block */
.mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  border: 2px solid transparent;
  color: var(--shelf-ink);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; /* no link preview sheet on a long press, same as a native tab */
  -webkit-user-select: none;
  user-select: none;
}

.mobile-tab__icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 0;
}
.mobile-tab__icon svg { display: block; width: 22px; height: 22px; }

.mobile-tab__label {
  max-width: 100%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-tab .retro-avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
  overflow: hidden;
}

.mobile-tab .retro-badge { top: -7px; right: -9px; }

@media (hover: hover) {
  .mobile-tab:hover { background: var(--shelf-row-hover); border-color: var(--shelf-ink); }
}

/* Press feedback is the retro-btn press: instant, an inset rule, no scaling */
.mobile-tab:active {
  background: var(--shelf-row-selected);
  border-color: var(--shelf-ink);
  box-shadow: inset 1px 1px 0 var(--shelf-ink);
}

.mobile-tab.is-active {
  background: var(--shelf-gold);
  border-color: var(--shelf-ink);
  color: #fff;
  box-shadow: inset 2px 2px 0 var(--shelf-ink);
}
.mobile-tab.is-active:active { background: var(--shelf-gold-hover); }

.mobile-tab:focus-visible { outline: 3px solid var(--shelf-gold); outline-offset: 1px; }

/* Header buttons are .retro-btn: the press feedback (inset shadow, 1px nudge) comes from there */
.mobile-menu-btn,
.mobile-create-btn {
  cursor: pointer;
  z-index: 10;
  position: relative;
}

@media (hover: hover) {
  .mobile-back-btn:hover,
  .mobile-menu-btn:hover,
  .mobile-create-btn:hover,
  .mobile-icon-btn:hover {
    background: var(--shelf-row-hover);
  }
}

/* Touch behavior for header controls and dropdown menu items */
.mobile-header a,
.mobile-header button,
.mobile-menu a,
.mobile-create-menu a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Dropdown + hamburger menu rows */
.mobile-menu a:active,
.mobile-create-menu a:active {
  background: rgba(179, 155, 99, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 1023px) {
  /* Ensure mobile elements are visible */
  .mobile-header {
    display: block;
  }
  
  .mobile-bottom-nav {
    display: flex;
  }
  
  /* Hide desktop header on mobile */
  .desktop-header {
    display: none !important;
  }
  
  /* Reserve the tab bar's height (plus the home indicator) under the page, once, and keep the
     page out from under the notch in landscape (the viewport meta opts in with viewport-fit=cover) */
  body {
    padding-bottom: calc(var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

@media (min-width: 1024px) {
  /* Hide mobile elements on desktop */
  .mobile-header {
    display: none !important;
  }
  
  .mobile-bottom-nav {
    display: none !important;
  }
  
  /* Show desktop header */
  .desktop-header {
    display: block !important;
  }
  
  /* Remove bottom padding on desktop */
  body {
    padding-bottom: 0;
  }
}

/* Landscape mode adjustments */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  .mobile-bottom-nav {
    display: none;
  }
  
  body {
    padding-bottom: 0;
  }
}

/* Additional Utility Classes */
.notification-dot {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* PWA-specific adjustments */
@media (display-mode: standalone) {
  .mobile-header {
    /* Account for status bar in PWA mode */
    padding-top: env(safe-area-inset-top);
  }
}

/* Focus states for accessibility */
.mobile-back-btn:focus,
.mobile-menu-btn:focus {
  outline: 2px solid #B39B63;
  outline-offset: 2px;
}

/* Loading states */
.mobile-nav-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* User Tagging Dropdown - Mobile/PWA Optimizations */
@media (max-width: 768px) {
  /* Make dropdown more mobile-friendly */
  [data-comment-user-tagging-target="dropdown"],
  [data-user-tagging-target="dropdown"] {
    /* Ensure dropdown is visible above mobile keyboard */
    position: fixed !important;
    z-index: 10000 !important;
    /* Mobile-optimized sizing */
    max-height: 200px !important;
    width: 280px !important;
    /* Better touch targets */
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* Larger touch targets for mobile */
  [data-comment-user-tagging-target="dropdown"] .flex.items-center,
  [data-user-tagging-target="dropdown"] .flex.items-center {
    padding: 12px 16px !important;
    min-height: 48px !important;
  }
  
  /* Better text sizing for mobile */
  [data-comment-user-tagging-target="dropdown"] .text-sm,
  [data-user-tagging-target="dropdown"] .text-sm {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

/* PWA-specific dropdown adjustments */
@media (display-mode: standalone) {
  [data-comment-user-tagging-target="dropdown"],
  [data-user-tagging-target="dropdown"] {
    /* Ensure dropdown stays above PWA UI elements */
    z-index: 10001 !important;
    /* Account for PWA status bar */
    margin-top: env(safe-area-inset-top, 0px);
  }
} 
.notification-bell {
  position: relative;
  cursor: pointer;
}

.bell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #B39B63;
  color: white;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dropdown {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: 500px;
  overflow-y: auto;
  background-color: white;
  border-radius: 0;
  box-shadow: 4px 4px 0 #1a1a1a;
  z-index: 10000;
  display: none;
  border: 2.5px solid #1a1a1a;
}

.notification-dropdown.active {
  display: block !important;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 2.5px solid #1a1a1a;
  background-color: #B39B63;
}

.notification-header-actions {
  display: flex;
  gap: 6px;
}

.notification-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
}

.notification-list {
  padding: 0;
}

.notification-item {
  padding: 16px;
  border-bottom: 1px solid #e8e0d0;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.notification-item.unread {
  background-color: #FFFBF4;
  border-left: 3px solid #B39B63;
}

@media (hover: hover) {
  .notification-item:hover {
    background-color: #f8f9fa;
  }
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-content {
  flex: 1;
}

.notification-content p {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.notification-snippet {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #FFFBF4;
  border-left: 3px solid #1a1a1a;
  border-radius: 0;
  font-style: italic;
  color: #666;
  font-size: 13px;
  line-height: 1.4;
}

.notification-actions {
  margin-top: 8px;
}

.notification-actions .btn-action {
  display: inline-block;
  padding: 6px 12px;
  background-color: #B39B63;
  color: white;
  text-decoration: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
}

@media (hover: hover) {
  .notification-actions .btn-action:hover {
    background-color: #A38B57;
    text-decoration: none;
    color: white;
  }
}

/* Voice memo specific styles */
.voice-memo-snippet {
  background-color: #f0f8ff !important;
  border-left-color: #B39B63 !important;
}

.voice-memo-snippet i.fas.fa-microphone {
  color: #B39B63;
  font-size: 16px;
}

.btn-listen {
  background-color: #B39B63 !important;
  color: white !important;
}

@media (hover: hover) {
  .btn-listen:hover {
    background-color: #A38B57 !important;
    color: white !important;
  }
}

.btn-listen i {
  margin-right: 4px;
}

/* Message notification specific styles */
.message-snippet {
  background-color: #f0f8ff !important;
  border-left-color: #B39B63 !important;
}

.message-snippet i.fas.fa-envelope {
  color: #B39B63;
  font-size: 14px;
}

.btn-view i {
  margin-right: 4px;
}



.notification-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  width: 100%;
}

.notification-actions .btn-action {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure notification content doesn't get squished */
.notification-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notification-snippet {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #FFFBF4;
  border-left: 3px solid #1a1a1a;
  border-radius: 0;
  font-style: italic;
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Post notification specific styles */
.post-snippet {
  background-color: #fff3cd !important;
  border-left-color: #B39B63 !important;
}

.notification-time {
  font-size: 12px;
  color: #888;
}

.notification-group h4 {
  margin: 0;
  padding: 8px 16px;
  background-color: #f7f7f7;
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.mark-read-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: all 0.2s ease;
  min-width: 32px;
  min-height: 32px;
}

@media (hover: hover) {
  .mark-read-btn:hover {
    background-color: rgba(179, 155, 99, 0.1);
    color: #B39B63;
  }
}

.mark-read-btn svg {
  width: 16px;
  height: 16px;
}

.notification-footer {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid #e0e0e0;
}

.view-all-btn {
  color: #B39B63;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.loading-spinner {
  padding: 20px;
  text-align: center;
  color: #888;
}

.no-notifications {
  padding: 30px;
  text-align: center;
  color: #888;
}

.notification-error {
  padding: 20px;
  text-align: center;
  color: #e74c3c;
}

.error-details {
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 15px;
}

.retry-btn {
  padding: 8px 12px;
  background-color: #B39B63;
  color: white;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

@media (hover: hover) {
  .retry-btn:hover {
    background-color: #a38a52;
  }
}

/* Notification header action buttons */
.notif-btn {
  padding: 4px 10px;
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 2px;
  font-size: 11px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.04em;
  color: white;
  cursor: pointer;
}

@media (hover: hover) {
  .notif-btn:hover { background-color: rgba(255,255,255,0.32); }
}

.notif-btn--primary {
  background-color: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.7);
}

.refresh-btn {
  padding: 4px 8px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 8px;
}

@media (hover: hover) {
  .refresh-btn:hover {
    background-color: #e0e0e0;
  }
} 
/* Member profile pages (home, blog, photos, deep dives) on the shelf chrome.
   Tokens (--shelf-*) come from retro_tokens.css; .retro-*, .shelf-page, .shelf-tabs and .shelf-menu
   from shelf_page.css. Only what the profile adds lives here.

   A member's Vibe colors and faces arrive as --accent-color, --background-color, --text-color,
   --heading-font and --body-font on the .profile-page root (Profile#skin_style emits only the
   ones they set). Every rule below reads them through a --profile-* alias with the site's own
   value as the fallback, so an untouched profile is the site look and a themed one is the same
   chrome in the member's colors. Windows stay white with ink borders either way. */
.profile-page {
  --profile-accent: var(--accent-color, var(--shelf-gold));
  --profile-accent-hover: color-mix(in srgb, var(--profile-accent) 85%, #1a1a1a);
  --profile-ground: var(--background-color, var(--shelf-ground));
  --profile-text: var(--text-color, var(--shelf-ink));
  --profile-heading-font: var(--heading-font, var(--shelf-serif));
  --profile-body-font: var(--body-font, var(--shelf-chrome));
}
.shelf-page.profile-page {
  background-color: var(--profile-ground);
  background-image: radial-gradient(color-mix(in srgb, var(--profile-text) 10%, transparent) 1px, transparent 1px);
  color: var(--profile-text);
}
.profile-page .retro-win { color: var(--shelf-ink); font-family: var(--profile-body-font); }
.profile-page .retro-win__titlebar { background: var(--profile-accent); }
.profile-page .retro-win__titlebar b { font-family: var(--shelf-chrome); }
.profile-page .retro-win__status { font-family: var(--shelf-mono); }
.profile-page .retro-btn--primary { background: var(--profile-accent); }
.profile-page .retro-btn--primary:hover { background: var(--profile-accent-hover); }
.profile-page .retro-chip.is-active { background: var(--profile-accent); }
.profile-page .retro-avatar--initial { background: var(--profile-accent); }
.profile-page .shelf-page__user { color: var(--profile-accent); }
.profile-page .shelf-menu a:hover { box-shadow: inset 3px 0 0 var(--profile-accent); }
.profile-page .shelf-scores b { color: var(--profile-accent-hover); }
.profile-page .retro-btn:focus-visible, .profile-page .retro-chip:focus-visible, .profile-page .retro-input:focus,
.profile-page .shelf-tabs button:focus-visible, .profile-page .shelf-tabs--filters a:focus-visible { outline-color: var(--profile-accent); }
/* The tabs under the masthead sit on the ground, so their resting color follows the member's text. */
.profile-page .shelf-tabs--filters a { color: color-mix(in srgb, var(--profile-text) 62%, var(--profile-ground)); }
.profile-page .shelf-tabs--filters a.is-active { color: var(--shelf-ink); }
.profile-page .shelf-tabs--filters a i { color: var(--profile-accent); }

/* ---------- grid: phone first, content before the rail ---------- */
.profile-page .shelf-page__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 24px;
  padding-bottom: 120px;
}
.profile-page .profile-masthead { grid-column: 1; grid-row: auto; order: 1; }
.profile-page .shelf-main { grid-column: 1; grid-row: auto; order: 2; gap: 24px; }
.profile-page .shelf-rail { grid-column: 1; grid-row: auto; order: 3; position: static; grid-template-columns: minmax(0, 1fr); }
.profile-page .shelf-rail .retro-win { min-width: 0; }
@media (min-width: 821px) {
  .profile-page .shelf-page__grid { grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 28px 36px; padding-bottom: 80px; }
  .profile-page .profile-masthead { grid-column: 1 / span 2; grid-row: 1; }
  .profile-page .shelf-rail { grid-column: 1; grid-row: 2; position: sticky; top: 18px; }
  .profile-page .shelf-main { grid-column: 2; grid-row: 2; }
}

/* ---------- masthead: cover in a window, identity, the section tabs ---------- */
.profile-masthead { display: grid; gap: 14px; min-width: 0; }
.profile-cover { position: relative; }
.profile-cover__img { height: 180px; overflow: hidden; position: relative; background: #17203a; }
@media (min-width: 640px) { .profile-cover__img { height: 240px; } }
.profile-cover__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-cover__img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35)); pointer-events: none; }
.profile-cover__tools { position: absolute; right: 10px; top: 10px; z-index: 2; }
/* The dropdown controller toggles Tailwind's .hidden, so the grid must not apply while hidden. */
.profile-cover__menu:not(.hidden) {
  position: absolute; right: 0; margin-top: 6px; min-width: 200px; z-index: 20;
  background: var(--shelf-window); border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
  display: grid;
}
.profile-cover__menu button, .profile-cover__menu a {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-bottom: 1px solid var(--shelf-rule);
  font: 700 13px/1.3 var(--shelf-chrome); color: var(--shelf-ink); text-decoration: none;
}
.profile-cover__menu button:last-child, .profile-cover__menu a:last-child { border-bottom: 0; }
.profile-cover__menu button:hover, .profile-cover__menu a:hover { background: var(--shelf-row-hover); box-shadow: inset 3px 0 0 var(--profile-accent); }

.profile-id { padding: 0 12px 12px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.profile-id__avatar { margin-top: -46px; position: relative; z-index: 1; display: block; line-height: 0; }
.profile-id__avatar .retro-avatar { width: 92px; height: 92px; font-size: 32px; font-family: var(--shelf-serif); box-shadow: 3px 3px 0 var(--shelf-ink); border-width: 2.5px; }
.profile-id__avatar.is-clickable { cursor: pointer; }
.profile-id__avatar.is-clickable:hover .retro-avatar { box-shadow: 1px 1px 0 var(--shelf-ink); transform: translate(2px, 2px); }
.profile-id__words { flex: 1; min-width: 200px; display: grid; gap: 4px; padding-top: 10px; }
.profile-id__words h1 { margin: 0; font-family: var(--profile-heading-font); font-size: clamp(26px, 4vw, 38px); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.profile-id__eyebrow { font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--shelf-muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.profile-id__status { margin: 4px 0 0; font-family: var(--shelf-serif); font-size: 16px; line-height: 1.4; max-width: 62ch; }
.profile-id__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 10px; }
.profile-id__actions form { display: inline; }
.profile-id .user-pins { margin-top: 2px; }

.profile-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 0; }
.profile-nav .shelf-tabs { flex: 1; min-width: 0; overflow-x: auto; }
.profile-nav .shelf-tabs a { white-space: nowrap; }

/* ---------- rail ---------- */
.profile-about { list-style: none; margin: 0; padding: 0; display: grid; }
.profile-about li { padding: 8px 12px; border-top: 1px solid var(--shelf-rule); display: grid; gap: 2px; }
.profile-about li:first-child { border-top: 0; }
.profile-about small { font-family: var(--shelf-mono); font-weight: 700; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--shelf-muted); }
.profile-about p { margin: 0; font-size: 13px; line-height: 1.5; }
.profile-about p + p { margin-top: 0.5em; }
.profile-about .is-online { color: #1f7a3a; font-weight: 700; }
.profile-about .is-online::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #28c840; border: 1.5px solid var(--shelf-ink); margin-right: 6px; vertical-align: 0; }
.profile-about__row { display: flex; align-items: center; gap: 8px; }
.profile-about__edit { background: none; border: 0; padding: 0; cursor: pointer; color: var(--shelf-muted); font-size: 11px; line-height: 1; }
.profile-about__edit:hover { color: var(--profile-accent-hover); }
.profile-about .retro-input { margin-top: 4px; font-size: 13px; padding: 5px 8px; }
.profile-url { word-break: break-all; }

.profile-connect { padding: 12px; display: grid; gap: 8px; font-size: 13px; }
.profile-connect p { margin: 0; color: var(--shelf-muted); font-size: 12px; line-height: 1.5; }
.profile-connect__row { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-connect__row form { display: inline; }
.profile-connect__row .retro-btn { flex: 1; text-align: center; }
.profile-connect__note { border: 2px solid var(--shelf-ink); padding: 6px 10px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--shelf-row-selected); }
.profile-connect__note--warn { background: #fdf1ef; color: var(--shelf-danger); }
.profile-connect__note--good { background: #eef8ef; color: #1f7a3a; }
.profile-connect__links { display: grid; border-top: 2px solid var(--shelf-ink); margin: 4px -12px -12px; }
.profile-connect__links a, .profile-connect__links button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 7px 12px; border-bottom: 1px solid var(--shelf-rule);
  font: 700 13px/1.3 var(--shelf-chrome); color: var(--shelf-ink); text-decoration: none;
}
.profile-connect__links form { display: contents; }
.profile-connect__links > :last-child, .profile-connect__links form:last-child button { border-bottom: 0; }
.profile-connect__links a:hover, .profile-connect__links button:hover { background: var(--shelf-row-hover); box-shadow: inset 3px 0 0 var(--profile-accent); }
.profile-connect__links .is-quiet { color: var(--shelf-muted); }

.profile-now-playing { display: grid; gap: 10px; padding: 12px; }
.profile-now-playing__lead { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.profile-now-playing__lead b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-now-playing .disc { flex: none; width: 36px; height: 36px; border: 2px solid var(--shelf-ink); background: repeating-radial-gradient(circle, #1a1a1a 0 2px, #333 2px 4px); border-radius: 50%; position: relative; }
.profile-now-playing .disc::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--profile-accent); border: 2px solid var(--shelf-ink); }
.profile-now-playing__player:not(.hidden) { display: block; max-width: 100%; overflow: hidden; }
.profile-now-playing__player iframe { max-width: 100%; }

.profile-friends { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
.profile-friends a { display: block; line-height: 0; }
.profile-friends .retro-avatar { width: 100%; height: auto; aspect-ratio: 1; font-size: 14px; }
.profile-friends a:hover .retro-avatar { outline: 2px solid var(--profile-accent); outline-offset: 1px; }

.profile-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
.profile-photos > div { aspect-ratio: 1; border: 2px solid var(--shelf-ink); overflow: hidden; cursor: pointer; background: #f3f0e6; }
.profile-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-photos > div:hover img { opacity: 0.85; }

.profile-top { padding: 12px; display: grid; gap: 14px; }
.profile-top h3 { margin: 0 0 6px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--shelf-muted); }
.profile-top__covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.profile-top__covers a { display: block; aspect-ratio: 2 / 3; border: 2px solid var(--shelf-ink); background: #1a1a1a; overflow: hidden; }
.profile-top__covers img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-top__covers span { display: grid; place-items: center; width: 100%; height: 100%; color: #777; font-size: 12px; }
.profile-top__links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12px; }
.profile-top__links a:not(.retro-btn) { font-weight: 700; text-decoration: underline; text-decoration-color: var(--profile-accent); text-underline-offset: 2px; }
.profile-top__empty { padding: 8px; border: 1px solid var(--shelf-rule); background: var(--shelf-row-hover); font-size: 12px; color: var(--shelf-muted); display: grid; gap: 6px; justify-items: start; }

/* ---------- home: the latest window, feed cards stripped of their own frame ---------- */
.profile-latest [role="tabpanel"] { padding: 0; }
.profile-latest .shelf-tabs { overflow-x: auto; }
.profile-latest .shelf-tabs button { white-space: nowrap; }
.profile-feed-list > [data-controller="profile-feed"] > .bg-white,
.profile-feed-list [data-profile-feed-target="container"] > .bg-white {
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
  border-bottom: 1px solid var(--shelf-rule);
}
.profile-feed-list .retro-load-more { margin: 0; }
.profile-feed-list__more { text-align: center; padding: 14px; }
.profile-feed-list__loading { text-align: center; padding: 14px; font-family: var(--shelf-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted); }
.profile-single__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 2px solid var(--shelf-ink); background: var(--shelf-row-hover); font-size: 13px; font-weight: 700; }
.profile-single__head a { font-family: var(--shelf-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--profile-accent-hover); text-decoration: none; }
.profile-guestbook .comments-win__list { padding: 12px; }
.profile-guestbook > form, .profile-guestbook form.comment-form { padding: 12px 12px 0; }

/* Other profile views keep their own Tailwind layouts inside the main column. */
.profile-view-legacy { min-width: 0; }

/* ---------- blog: a lead story wearing its cover, then rows with a thumbnail ---------- */
.story-lead { padding: 12px; display: grid; gap: 12px; border-bottom: 2px solid var(--shelf-ink); }
.story-lead p { margin: 0; font-family: var(--shelf-serif); font-size: 16px; line-height: 1.5; max-width: 60ch; }
.story-lead__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.story-lead__row small, .story-lead__row p { font-size: 12px; color: var(--shelf-muted); font-family: var(--shelf-chrome); }
.story-lead__row form { display: inline; }
.story-hero { position: relative; border-bottom: 2.5px solid var(--shelf-ink); background: linear-gradient(160deg, #2b3a63 0%, #0f1730 55%, #b9884a 100%); }
.story-hero img { width: 100%; height: 220px; object-fit: cover; display: block; }
@media (min-width: 640px) { .story-hero img { height: 280px; } }
.story-hero--bare { min-height: 150px; background: repeating-linear-gradient(45deg, var(--shelf-window) 0 10px, var(--shelf-row-selected) 10px 20px); }
.story-hero__words { position: absolute; inset: auto 0 0 0; padding: 14px 12px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)); color: #fff; display: grid; gap: 4px; }
.story-hero--bare .story-hero__words { position: static; background: none; color: var(--shelf-ink); padding: 16px 12px; }
.story-hero__words h3 { margin: 0; font-family: var(--profile-heading-font); font-size: clamp(22px, 3vw, 30px); line-height: 1.1; text-wrap: balance; }
.story-hero__words h3 a { text-decoration: none; color: inherit; }
.story-hero__words p { margin: 0; font-size: 14px; max-width: 60ch; }
.story-hero__words .story-meta { color: inherit; opacity: 0.85; }
.story-hero__words .story-tag { border-color: currentColor; background: rgba(255, 255, 255, 0.15); color: inherit; }
.story-hero--bare .story-hero__words .story-tag { background: var(--shelf-row-selected); }
.story-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shelf-muted); }
.story-tag { border: 1.5px solid var(--shelf-ink); padding: 1px 6px; font-family: var(--shelf-mono); font-size: 10px; letter-spacing: 0.06em; background: var(--shelf-row-selected); color: var(--shelf-ink); text-decoration: none; text-transform: none; }
.story-lock { color: var(--profile-accent-hover); }
.story-list { list-style: none; margin: 0; padding: 0; }
.story-list li { padding: 14px 12px; border-bottom: 1px solid var(--shelf-rule); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.story-list li:last-child { border-bottom: 0; }
.story-list__words { display: grid; gap: 6px; min-width: 0; }
.story-list h3 { margin: 0; font-family: var(--profile-heading-font); font-size: 20px; line-height: 1.2; }
.story-list h3 a { text-decoration: none; }
.story-list h3 a:hover { text-decoration: underline; text-decoration-color: var(--profile-accent); text-underline-offset: 3px; }
.story-list p { margin: 0; font-size: 14px; line-height: 1.5; color: #333; max-width: 65ch; }
.story-cover { display: block; aspect-ratio: 16 / 10; width: 100%; border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); overflow: hidden; background: #1a1a1a; }
.story-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 640px) {
  .story-list li.has-cover { grid-template-columns: 150px minmax(0, 1fr); align-items: start; }
}
.profile-writers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding: 12px; }
.profile-writers a { display: grid; justify-items: center; gap: 6px; text-decoration: none; text-align: center; font-size: 13px; font-weight: 700; }
.profile-writers small { font-family: var(--shelf-mono); font-size: 10px; color: var(--shelf-muted); font-weight: 400; }

/* ---------- photos: tiles with a hard shadow ---------- */
.profile-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
@media (min-width: 640px) { .profile-tiles { grid-template-columns: repeat(3, 1fr); } }
.profile-tile { position: relative; display: block; aspect-ratio: 1; border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); overflow: hidden; background: #f3f0e6; cursor: pointer; text-decoration: none; }
.profile-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-tile:hover img { opacity: 0.88; }
.profile-tile__badge { position: absolute; left: 6px; bottom: 6px; font-family: var(--shelf-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(26, 26, 26, 0.78); padding: 2px 5px; }
.profile-tile__badge--right { left: auto; right: 6px; }
.profile-tile__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 28px; background: rgba(0, 0, 0, 0.18); }
.profile-tile--album { display: grid; grid-template-rows: 1fr auto; }
.profile-tile--album .profile-tile__img { min-height: 0; overflow: hidden; background: repeating-linear-gradient(45deg, #fff 0 8px, var(--shelf-row-selected) 8px 16px); display: grid; place-items: center; color: var(--shelf-muted); font-size: 12px; }
.profile-tile--album .profile-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.profile-tile__name { border-top: 2px solid var(--shelf-ink); padding: 6px 8px; background: var(--shelf-window); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--shelf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-tile__name small { display: block; font-family: var(--shelf-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted); font-weight: 700; }
.profile-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-bottom: 2px solid var(--shelf-ink); align-items: center; }
.profile-filter .retro-chip { padding: 4px 10px; font-size: 12px; }
.profile-page .shelf-pagination { padding: 12px; border-top: 2px solid var(--shelf-ink); }

/* ---------- deep dives: the find bar and the cards ---------- */
.profile-find { padding: 12px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); border-bottom: 2px solid var(--shelf-ink); }
@media (min-width: 640px) { .profile-find { grid-template-columns: minmax(0, 1fr) 150px 130px auto; align-items: center; } }
.dive-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
@media (min-width: 640px) { .dive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dive-card { border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); background: var(--shelf-window); display: grid; grid-template-rows: auto 1fr auto; text-decoration: none; color: var(--shelf-ink); min-width: 0; }
.dive-card:hover { box-shadow: 1px 1px 0 var(--shelf-ink); transform: translate(2px, 2px); }
.dive-card__cover { height: 110px; border-bottom: 2px solid var(--shelf-ink); position: relative; background: linear-gradient(160deg, var(--profile-accent), color-mix(in srgb, var(--profile-accent) 55%, #1a1a1a)); overflow: hidden; }
.dive-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dive-card__kind { position: absolute; left: 8px; top: 8px; font-family: var(--shelf-mono); font-weight: 700; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--shelf-ink); padding: 2px 6px; }
.dive-card__body { padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.dive-card__body h3 { margin: 0; font-family: var(--profile-heading-font); font-size: 18px; line-height: 1.15; text-wrap: balance; }
.dive-card__body p { margin: 0; font-size: 13px; color: #333; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dive-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dive-card__foot { border-top: 1px solid var(--shelf-rule); padding: 6px 12px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shelf-muted); display: flex; justify-content: space-between; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .dive-card:hover, .profile-id__avatar.is-clickable:hover .retro-avatar { transform: none; }
}
/* Progressive Loading Styles */

/* Skeleton Loading Animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

/* Image Loading States */
.image-container {
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.image-loading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.image-loaded {
  opacity: 1;
}

.image-error {
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
}

/* Progressive Loading Skeleton for Images */
.image-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f3f4f6;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-out;
}

.image-skeleton.hide {
  opacity: 0;
  pointer-events: none;
}

.image-skeleton-icon {
  color: #d1d5db;
  font-size: 2rem;
  opacity: 0.7;
}

/* Post Content Skeleton */
.post-skeleton {
  padding: 1.5rem;
  background: white;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  margin-right: 0.75rem;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-text.long {
  width: 100%;
}

/* Image Gallery Skeleton */
.image-gallery-skeleton {
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.single-image-skeleton {
  width: 100%;
  height: 400px;
  max-height: 600px;
}

.multi-image-skeleton {
  height: 400px;
}

/* Fade transition for loaded images */
.progressive-image {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.progressive-image[data-state="loading"] {
  opacity: 0;
}

.progressive-image[data-state="loaded"] {
  opacity: 1;
}

.progressive-image[data-state="error"] {
  opacity: 1;
  background-color: #f8f9fa;
}

/* Blur-to-clear effect (optional enhancement) */
.progressive-blur {
  filter: blur(5px);
  transition: filter 0.3s ease-out;
}

.progressive-blur.loaded {
  filter: blur(0);
}

/* Loading state for different image layouts */
.layout-classic .image-skeleton {
  border-radius: 0.5rem;
}

.layout-banner .image-skeleton {
  border-radius: 0.5rem;
}

.layout-slider .image-skeleton {
  border-radius: 0;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .image-skeleton-icon {
    font-size: 1.25rem;
  }
  
  .single-image-skeleton {
    height: 300px;
  }
  
  .multi-image-skeleton {
    height: 300px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  }
  
  .image-skeleton {
    background: linear-gradient(90deg, 
      rgba(224, 224, 224, 0.9) 25%, 
      rgba(208, 208, 208, 0.9) 50%, 
      rgba(224, 224, 224, 0.9) 75%
    );
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .image-skeleton {
    animation: none;
    background: #f0f0f0;
  }
  
  .progressive-image {
    transition: none;
  }
  
  .progressive-blur {
    transition: none;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
  .skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  }
  
  .image-skeleton {
    background: #374151;
  }
  
  .image-skeleton-icon {
    color: #6b7280;
  }
  
  .image-container {
    background-color: #2a2a2a;
  }
  
  .image-error {
    background-color: #2a2a2a;
    color: #9ca3af;
  }
} 
/* Pull to Refresh Styles */
.pull-refresh-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #b39b63; /* Match header color */
  color: white;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
  border-bottom: none;
  transition: opacity 0.2s, background 0.2s;
  will-change: opacity, transform;
}

.pull-refresh-indicator.visible {
  opacity: 1;
}

.pull-refresh-indicator .pull-icon {
  font-size: 2.2rem;
  color: white;
  margin-right: 0.5rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.pull-refresh-indicator .pull-text {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
  display: none;
}

.pull-refresh-indicator.ready .pull-text,
.pull-refresh-indicator.refreshing .pull-text {
  display: inline;
}

.pull-refresh-indicator.refreshing {
  background: #a08c5c;
}

.pull-refresh-indicator.refreshing .pull-icon {
  font-size: 2.5rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Main container transition for pull effect */
.main-container {
  transition: transform 0.15s cubic-bezier(.4,1.4,.6,1);
}

@media (prefers-reduced-motion: reduce) {
  .main-container {
    transition: none;
  }
  .pull-refresh-indicator .pull-icon,
  .pull-refresh-indicator.refreshing .pull-icon {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .pull-refresh-indicator {
    font-size: 15px;
    height: 64px;
  }
  .pull-refresh-indicator .pull-icon {
    font-size: 1.7rem;
  }
  .pull-refresh-indicator.refreshing .pull-icon {
    font-size: 2rem;
  }
}

/* PWA-specific adjustments */
@media (display-mode: standalone) {
  .pull-refresh-indicator {
    top: env(safe-area-inset-top);
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pull-refresh-indicator {
    background: #2d3748;
    border-bottom: 2px solid #B39B63;
  }
  
  .pull-refresh-indicator.ready {
    background: #1a202c;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pull-refresh-indicator {
    transition: none;
  }
  
  .pull-refresh-indicator.refreshing .pull-icon {
    animation: none;
  }
  
  .fa-spin {
    animation: none !important;
  }
  
  .main-container {
    transition: none;
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1);
    }
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pull-refresh-indicator {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    color: #e2e8f0;
  }
  
  .pull-refresh-indicator.ready {
    background: linear-gradient(135deg, #1a202c, #0f1419);
  }
}

/* Full-page overlay for pull-to-refresh */
.pull-refresh-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(40, 32, 16, 0.7); /* dimmed, matches brand */
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.pull-refresh-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.pull-refresh-overlay .overlay-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.pull-refresh-overlay .overlay-spinner .fa-spinner {
  font-size: 2.5rem;
  color: #fff;
  margin-right: 0.5rem;
}
.pull-refresh-overlay .overlay-spinner .svg-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
} 
/* Read: the card-page chrome (cards_page.css brings the paper, chip band, toggle,
   pager and card windows) plus this page's own masthead, the Start here picks and
   the writers window. Tokens, --site-width and .retro-* come from shelf_page.css. */
.read-page { min-height: 85svh; }
.read-page__inner { max-width: var(--site-width); margin: 0 auto; padding: 0 var(--site-gutter); }

/* ---------- guest masthead ---------- */
.read-masthead { border-bottom: 2.5px solid var(--shelf-ink); background: var(--shelf-row-selected); }
.read-masthead__inner {
  max-width: var(--site-width); margin: 0 auto; padding: 32px var(--site-gutter);
  display: grid; grid-template-columns: 1fr;
  gap: 24px 32px; align-items: end;
}
/* shelf_page.css pins .shelf-masthead to the shelf grid's second column; here it leads. */
.read-masthead .shelf-masthead { grid-column: 1; grid-row: auto; }
@media (min-width: 768px) { .read-masthead__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.read-masthead h1 em { font-style: italic; color: var(--shelf-gold-hover); }
.read-masthead__sub { margin: 0; font-size: 15px; line-height: 1.5; max-width: 54ch; color: var(--shelf-ink); }
.read-masthead__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.read-picks { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .read-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.read-pick { display: block; text-decoration: none; color: inherit; box-shadow: 3px 3px 0 var(--shelf-ink); }
.read-pick .retro-win__titlebar { display: flex; padding: 4px 8px; }
.read-pick .retro-win__titlebar b { font-size: 11px; }
.read-pick__body { display: block; padding: 10px 12px; }
.read-pick__title { display: block; font-family: var(--shelf-serif); font-size: 15px; line-height: 1.2; }
.read-pick__meta { display: block; margin-top: 6px; font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
.read-picks__note { grid-column: 1 / -1; margin: 0; text-align: right; font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }
@media (prefers-reduced-motion: no-preference) {
  .read-pick { transition: transform 0.08s; }
  .read-pick:hover { transform: translate(-1px, -1px); }
}

/* ---------- member header ---------- */
.read-slim { max-width: var(--site-width); margin: 0 auto; padding: 22px var(--site-gutter) 6px; }
.read-slim__sub { margin: 0; font-size: 14px; color: var(--shelf-muted); }
.read-slim__sub a { color: var(--shelf-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }

/* ---------- writers window ---------- */
.read-writers__list { display: grid; }
.read-writers__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--shelf-rule); font-size: 13px; }
.read-writers__row:last-child { border-bottom: 0; }
.read-writers__who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.read-writers__who:hover .read-writers__name { color: var(--shelf-gold-hover); }
.read-writers__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.read-writers__count { font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); flex: none; }
.read-writers__follow { margin-left: auto; flex: none; }
/* The window body reset in cards_page.css zeroes borders; the status bar keeps its rule. */
.read-writers .feed-window__body > .retro-win__status { border-top: 2px solid var(--shelf-ink); }
.read-writers .retro-win__status a { margin-left: auto; text-decoration: none; }
.read-writers .retro-win__status a::after { content: " ▸"; }
.read-writers .retro-win__status a:hover { color: var(--shelf-gold-hover); }
/* Retro OS design tokens, on :root so every stylesheet and every partial (turbo stream answers
   included) resolves them. Values: docs/agents/retro_os_design_system.md. */
:root {
  --shelf-gold: #B39B63;
  --shelf-gold-hover: #A08C5C;
  --shelf-ink: #1a1a1a;
  --shelf-window: #ffffff;
  --shelf-ground: #ece6d6;
  --shelf-row-hover: #faf6ee;
  --shelf-row-selected: #f5edda;
  --shelf-muted: #6b6455;
  --shelf-rule: #d4c9b0;
  --shelf-danger: #b42318;
  --shelf-chrome: Arial, Helvetica, sans-serif;
  --shelf-mono: 'Courier New', Courier, monospace;
  --shelf-serif: Georgia, 'Times New Roman', serif;
}

/* The site container (.main-container in the layout): 1200px, with the same side gutters at each breakpoint.
   The shelf strip and the Read page align their words to it. */
:root {
  --site-width: 1200px;
  --site-gutter: 0.5rem;
}
@media (min-width: 640px) { :root { --site-gutter: 1rem; } }
@media (min-width: 1024px) { :root { --site-gutter: 2rem; } }
/* Rooms: the directory (interests#index) on the shelf grid with a finder and the neighborhood
   menu in the rail, and one room (interests#show) on the cards-page chrome with the feed's
   card windows. Phone-first: one column, widening at sm 640 and md 768. Tokens, --site-width
   and .retro-* come from retro_tokens.css and shelf_page.css; the card windows, the empty
   window and the paper from cards_page.css. */

/* ---------- directory ---------- */
.rooms-page .shelf-main { gap: 22px; }
.rooms-note { margin: 0; padding: 12px; font-size: 13px; line-height: 1.5; color: var(--shelf-muted); }
.rooms-page .retro-win__status a { text-decoration: none; }
.rooms-page .retro-win__status a::after { content: " ▸"; }
.rooms-page .retro-win__status a:hover { color: var(--shelf-gold-hover); }
.rooms-page .feed-empty { margin: 0; max-width: none; }

.rooms-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px; }
@media (min-width: 640px) { .rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rooms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.room-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--shelf-window);
  border: 2px solid var(--shelf-ink);
  box-shadow: 3px 3px 0 var(--shelf-ink);
}
.room-card__link { display: block; flex: 1; text-decoration: none; color: inherit; }
.room-card__link:hover .room-card__name { color: var(--shelf-gold-hover); }
.room-card__cover {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 7; max-width: 100%;
  background: var(--shelf-ink); color: var(--shelf-gold); font-size: 26px;
  border-bottom: 2px solid var(--shelf-ink);
}
.room-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-card__body { display: grid; gap: 4px; padding: 10px 12px; }
.room-card__name { font-family: var(--shelf-serif); font-weight: 700; font-size: 17px; line-height: 1.2; }
.room-card__star { color: var(--shelf-gold); font-size: 13px; }
.room-card__desc {
  font-size: 13px; line-height: 1.45; color: var(--shelf-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.room-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--shelf-rule);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted);
}
.room-card .retro-chip, .rooms-tag .retro-chip { padding: 3px 9px; font-size: 11px; box-shadow: 1px 1px 0 var(--shelf-ink); }

.rooms-tags { display: grid; }
.rooms-tag { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--shelf-rule); font-size: 13px; }
.rooms-tag:last-child { border-bottom: 0; }
.rooms-tag:hover { background: var(--shelf-row-hover); }
.rooms-tag__name { font-weight: 700; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-tag__name:hover { color: var(--shelf-gold-hover); }
.rooms-tag__count { margin-left: auto; flex: none; font-family: var(--shelf-mono); font-size: 10.5px; color: var(--shelf-muted); }

/* ---------- one room ---------- */
.room-page { min-height: 85svh; }
.room-page__inner { max-width: var(--site-width); margin: 0 auto; padding: 0 var(--site-gutter) 40px; }

.room-masthead { border-bottom: 2.5px solid var(--shelf-ink); background: var(--shelf-row-selected); }
.room-masthead__inner {
  max-width: var(--site-width); margin: 0 auto; padding: 28px var(--site-gutter);
  display: grid; grid-template-columns: 1fr; gap: 20px 32px; align-items: start;
}
/* shelf_page.css pins .shelf-masthead to the shelf grid's second column; here it leads. */
.room-masthead .shelf-masthead { grid-column: 1; grid-row: auto; }
@media (min-width: 768px) { .room-masthead__inner--cover { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.room-masthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.room-masthead__actions .retro-btn i { color: var(--shelf-gold); margin-right: 4px; }
.room-masthead__actions .retro-btn--primary i { color: #fff; }
.room-masthead__join { display: inline; }

.room-cover { max-width: 100%; }
.room-cover__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.room-cover .retro-win__status span { text-transform: none; letter-spacing: 0; font-weight: 400; }

.room-how__body { padding: 12px 14px; display: grid; gap: 10px; }
.room-how__body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--shelf-muted); }
.room-how .shelf-chips a { font-size: 12px; font-weight: 700; }
.room-how .retro-win__status a { text-decoration: none; }
.room-how .retro-win__status a::after { content: " ▸"; }
.room-how .retro-win__status a:hover { color: var(--shelf-gold-hover); }
.room-page .feed-empty { margin: 0; max-width: none; }

.room-more { display: flex; justify-content: center; margin: 8px 0 24px; }
.room-more .fa-spin { margin-left: 6px; }
/* Create and edit forms on the shelf chrome (deep_dives/new, deep_dives/edit). The create form is
   one 760px column under the strip; the edit form uses the shelf grid with the cover in the rail.
   Windows, labels and listbox rows come from shelf_page.css. Phone first. */
.shelf-form__inner {
  max-width: 760px; margin: 0 auto;
  padding: 18px var(--site-gutter) 120px;
  display: grid; gap: 24px;
}
.shelf-form__inner .shelf-masthead { grid-column: 1; }
.shelf-form__form { display: grid; gap: 24px; }
.shelf-form .retro-options > .retro-option:first-child { border-top: 0; }
.shelf-form .retro-win__titlebar + .retro-option { border-top: 0; }
.shelf-form .retro-option--rule { border-top: 2px solid var(--shelf-ink); }
.shelf-form__title { font-family: var(--shelf-serif); font-size: 20px; line-height: 1.3; }
.shelf-form__errors .retro-win__titlebar { background: var(--shelf-danger); }
.shelf-form__error-list { margin: 0; padding: 12px 12px 12px 30px; font-size: 13px; line-height: 1.5; }
.shelf-form__error-list li { color: var(--shelf-danger); font-weight: 700; }
.shelf-form .shelf-log__actions { align-items: center; }
.shelf-form__next {
  flex: 1 1 100%; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
@media (min-width: 640px) {
  .shelf-form__inner { padding-top: 28px; padding-bottom: 80px; gap: 28px; }
  .shelf-form__next { flex: 1 1 auto; }
}

/* ---------- description: Trix inside a window, dressed as a retro input ---------- */
.shelf-form trix-toolbar { margin-bottom: 8px; }
.shelf-form trix-toolbar .trix-button-group { border-color: var(--shelf-ink); border-radius: 0; box-shadow: none; }
.shelf-form trix-toolbar .trix-button { border-color: var(--shelf-ink); }
.shelf-form trix-toolbar .trix-button.trix-active { background: var(--shelf-row-selected); }
.shelf-form trix-editor.retro-input {
  min-height: 160px; max-width: none; padding: 10px;
  font-family: var(--shelf-serif); font-size: 16px; line-height: 1.5;
  border-radius: 0; box-shadow: none;
}
.shelf-form trix-editor.retro-input:focus { outline: 3px solid var(--shelf-gold); outline-offset: 1px; }

/* ---------- cover photo window in the rail ---------- */
.shelf-cover__preview {
  aspect-ratio: 3 / 1; background: #0d0d0d; overflow: hidden;
  display: grid; place-items: center; color: #777; font-size: 13px;
  border-bottom: 2px solid var(--shelf-ink);
}
.shelf-cover__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-cover__empty { display: flex; align-items: center; gap: 8px; }
.shelf-cover__empty i { font-size: 22px; }
.shelf-cover__attribution { padding: 6px 10px; font-size: 11px; color: var(--shelf-muted); border-bottom: 1px solid var(--shelf-rule); }
.shelf-cover__attribution:empty { display: none; }
.shelf-cover__attribution a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-cover__tools { padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.shelf-cover__tools .retro-btn { font-size: 12px; padding: 5px 10px; }
.shelf-cover__upload { position: relative; overflow: hidden; }
.shelf-cover__upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.shelf-cover__upload:focus-within { outline: 3px solid var(--shelf-gold); outline-offset: 2px; }

/* ---------- add a thing (dive_items/new): the ways-in menu and the mode forms ---------- */
.dd-ways a[aria-current="page"], .dd-ways a.is-active { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.dd-going { padding: 10px; }
.dd-going b { display: block; font-family: var(--shelf-serif); font-size: 15px; }
.dd-going small { display: block; font-size: 12px; color: var(--shelf-muted); margin-top: 2px; }
.dd-addform__form { display: block; }
.dd-addform .shelf-log__body:first-child { border-top: 0; }
.dd-addform select.retro-input { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--shelf-ink) 50%), linear-gradient(135deg, var(--shelf-ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.dd-addform__actions { padding: 12px; border-top: 2px solid var(--shelf-ink); }
.dd-hint { margin: 6px 0 0; font-size: 12px; color: var(--shelf-muted); }
.dd-field-error { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--shelf-danger); }
.dd-urlrow { display: flex; gap: 8px; align-items: stretch; }
.dd-urlrow .retro-input { flex: 1; min-width: 0; }
.dd-linkpreview:not(.hidden) { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; border-top: 2px solid var(--shelf-ink); background: var(--shelf-row-hover); }
@media (min-width: 560px) { .dd-linkpreview { grid-template-columns: 160px 1fr; align-items: start; } }
.dd-linkpreview__img { border: 2px solid var(--shelf-ink); background: #0d0d0d; overflow: hidden; aspect-ratio: 4 / 3; }
.dd-linkpreview__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-linkpreview__text b { display: block; font-family: var(--shelf-serif); font-size: 18px; }
.dd-linkpreview__text small { display: block; color: var(--shelf-muted); margin-top: 4px; }
.dd-results { margin-top: 10px; font-family: var(--shelf-chrome); }
.dd-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; background: var(--shelf-row-selected); border-bottom: 2px solid var(--shelf-ink); }
.dd-selected__img { width: 48px; height: 48px; border: 2px solid var(--shelf-ink); background: #0d0d0d; flex: none; overflow: hidden; }
.dd-selected__img img { width: 100%; height: 100%; object-fit: cover; }
.dd-selected__text { flex: 1; min-width: 160px; }
.dd-selected__text b { display: block; font-family: var(--shelf-serif); font-size: 16px; }
.dd-selected__text small { display: block; color: var(--shelf-muted); }
.dd-notemedia__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-rec:not(.hidden) { margin-top: 10px; border: 2px solid var(--shelf-ink); padding: 10px; display: grid; gap: 8px; font-family: var(--shelf-chrome); font-size: 13px; }
.dd-rec__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-rec__title { font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--shelf-muted); }
.dd-rec__buttons { display: flex; align-items: center; gap: 8px; }
.dd-rec__time { font-family: var(--shelf-mono); font-size: 12px; color: var(--shelf-muted); display: flex; align-items: center; gap: 6px; }
.dd-rec__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--shelf-danger); display: inline-block; }
.dd-rec__dot.hidden { display: none; }
.dd-rec__upload { cursor: pointer; display: inline-block; }
.dd-rec__state { font-size: 12px; color: var(--shelf-muted); }
.dd-rec__ready { font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #1f7a3a; }
.dd-rec__wave { height: 48px; background: var(--shelf-row-hover); border: 1px solid var(--shelf-rule); }
.dd-rec__video { width: 100%; max-height: 260px; background: #000; border: 2px solid var(--shelf-ink); }
.dd-progress:not(.hidden) { display: grid; gap: 4px; margin-top: 8px; }
.dd-progress__text, .dd-progress__pct { font-family: var(--shelf-mono); font-size: 11px; color: var(--shelf-muted); }
.dd-upload { display: block; }
.dd-drop { margin: 12px; padding: 32px 16px; border: 3px dashed var(--shelf-ink); text-align: center; cursor: pointer; display: grid; gap: 8px; justify-items: center; background: var(--shelf-row-hover); }
.dd-drop:hover, .dd-drop.dragover, .dd-drop.drag-over { background: var(--shelf-row-selected); }
.dd-drop i { font-size: 34px; color: var(--shelf-gold-hover); }
.dd-drop__lead { margin: 0; font-family: var(--shelf-serif); font-size: 18px; }
.dd-drop__note { margin: 0; font-size: 12px; color: var(--shelf-muted); max-width: 44ch; }
.dd-upload__other { margin: 0; padding: 0 12px 12px; font-size: 12px; color: var(--shelf-muted); }
.dd-upload__other a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.dd-upload__preview:not(.hidden) { padding: 12px; display: grid; gap: 10px; justify-items: start; }
.dd-upload__preview img, .dd-upload__preview video { max-width: 100%; max-height: 320px; border: 2px solid var(--shelf-ink); display: block; }
.dd-upload__preview img.hidden, .dd-upload__preview video.hidden, .dd-upload__preview audio.hidden { display: none; }
.dd-processing { padding: 12px; border: 2px solid var(--shelf-ink); background: var(--shelf-row-selected); font-size: 13px; }
/* Shelf item pages (films, later books and TV): sticky retro rail + reading column.
   Tokens (--shelf-*) are on :root in retro_tokens.css; the .retro-* component classes live here. */
.shelf-page {
  background: var(--shelf-ground);
  background-image: radial-gradient(rgba(26, 26, 26, 0.09) 1px, transparent 1px);
  background-size: 6px 6px;
  color: var(--shelf-ink);
  font-family: var(--shelf-chrome);
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
}
.shelf-page a { color: inherit; }

.shelf-page__strip {
  background: var(--shelf-ink);
  color: #fff;
  font-family: var(--shelf-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 0;
}
/* The bar runs edge to edge; its words line up with the site header's container. */
.shelf-page__strip-inner {
  max-width: var(--site-width); margin: 0 auto; padding: 0 var(--site-gutter);
  display: flex; justify-content: space-between; gap: 16px;
}
/* A crumb can be a title; it gives way before the name on the right does. */
.shelf-page__strip-inner > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-page__strip-inner > .shelf-page__user { flex: none; }
.shelf-page__strip a { text-decoration: none; }
.shelf-page__strip a:hover { color: var(--shelf-gold); }
.shelf-page__strip .shelf-page__user { color: var(--shelf-gold); }

.shelf-page__grid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 20px 80px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 28px 36px;
  align-items: start;
}
.shelf-masthead { grid-column: 2; grid-row: 1; }
.shelf-rail {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 18px;
  display: grid;
  gap: 18px;
}
.shelf-main { grid-column: 2; grid-row: 2; min-width: 0; display: grid; gap: 34px; }

@media (max-width: 820px) {
  .shelf-page__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 24px; padding-bottom: 120px; }
  .shelf-masthead, .shelf-rail, .shelf-main { grid-column: 1; grid-row: auto; }
  .shelf-rail { position: static; }
}

/* ---------- window chrome ---------- */
.retro-win {
  background: var(--shelf-window);
  border: 2.5px solid var(--shelf-ink);
  box-shadow: 4px 4px 0 var(--shelf-ink);
}
.retro-win__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--shelf-gold);
  border-bottom: 2.5px solid var(--shelf-ink);
}
.retro-win__lights { display: flex; gap: 4px; }
.retro-win__lights i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--shelf-ink); display: block;
}
.retro-win__lights i:nth-child(1) { background: #ff5f57; }
.retro-win__lights i:nth-child(2) { background: #febc2e; }
.retro-win__lights i:nth-child(3) { background: #28c840; }
.retro-win__titlebar b, .retro-win__titlebar h2 {
  flex: 1; margin: 0; text-align: center; color: #fff;
  font-family: var(--shelf-chrome); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
}
.retro-win__status {
  border-top: 2px solid var(--shelf-ink);
  background: var(--shelf-row-selected);
  font-family: var(--shelf-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.retro-btn {
  display: inline-block;
  appearance: none;
  background: var(--shelf-window);
  color: var(--shelf-ink);
  border: 2px solid var(--shelf-ink);
  box-shadow: 2px 2px 0 var(--shelf-ink);
  padding: 6px 14px;
  font-family: var(--shelf-chrome);
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
}
.retro-btn--primary { background: var(--shelf-gold); color: #fff; }
.retro-btn--sm { padding: 4px 10px; font-size: 12px; }
.retro-btn--primary:hover { background: var(--shelf-gold-hover); }
.retro-btn:active { box-shadow: inset 1px 1px 0 var(--shelf-ink); transform: translate(1px, 1px); }
.retro-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.retro-btn:disabled:active { box-shadow: 2px 2px 0 var(--shelf-ink); transform: none; }
.retro-btn--icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px 7px; line-height: 0; position: relative; }

/* A count pinned to the corner of a positioned parent (icon button, drawer tile). Red; --gold for messages. */
.retro-badge {
  position: absolute; top: -8px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--shelf-ink); background: #ff5f57; color: #fff;
  font: 700 10px/14px var(--shelf-chrome);
  pointer-events: none;
}
.retro-badge--gold { background: var(--shelf-gold); }
.retro-btn:focus-visible { outline: 3px solid var(--shelf-gold); outline-offset: 2px; }

.retro-avatar {
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--shelf-ink);
  background: var(--shelf-gold);
  color: #fff;
  font-weight: 900;
  object-fit: cover;
  flex: none;
}
.retro-avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.retro-avatar--md { width: 40px; height: 40px; font-size: 15px; }
.retro-avatar--lg { width: 56px; height: 56px; font-size: 20px; }

/* A hard-edged filter chip: white, ink border, hard shadow; the active one is gold and pressed in. */
.retro-chip {
  font-family: var(--shelf-chrome);
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  background: var(--shelf-window); color: var(--shelf-ink);
  border: 2px solid var(--shelf-ink);
  box-shadow: 2px 2px 0 var(--shelf-ink);
  padding: 6px 14px;
  font-weight: 700; font-size: 13px; line-height: normal;
  white-space: nowrap; text-decoration: none;
}
.retro-chip:hover { background: var(--shelf-row-hover); color: var(--shelf-ink); }
.retro-chip.is-active { background: var(--shelf-gold); color: #fff; box-shadow: inset 2px 2px 0 var(--shelf-ink); }
.retro-chip.is-active:hover { background: var(--shelf-gold-hover); color: #fff; }
.retro-chip--icon { padding: 6px 9px; }
.retro-chip__count { font-family: var(--shelf-mono); font-size: 10px; opacity: 0.8; }
.retro-chip:focus-visible { outline: 3px solid var(--shelf-gold); outline-offset: 2px; }
/* ---------- rail: poster ---------- */
.shelf-rail__poster {
  aspect-ratio: 2 / 3;
  background: #0d0d0d;
  border-bottom: 2.5px solid var(--shelf-ink);
  overflow: hidden;
}
.shelf-rail__poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-rail__poster-empty { width: 100%; height: 100%; display: grid; place-items: center; color: #555; font-size: 40px; }
/* A phone-width poster would be taller than the screen; show it letterboxed and centered instead.
   This block must follow the base poster rules above: same specificity, so source order decides. */
@media (max-width: 820px) {
  .shelf-rail__poster { aspect-ratio: auto; height: 300px; }
  .shelf-rail__poster-img { object-fit: contain; }
}
.shelf-rail__counts {
  list-style: none; margin: 0;
  display: flex; justify-content: space-around;
  padding: 8px 10px;
  font-family: var(--shelf-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.shelf-rail__counts li { display: flex; align-items: center; gap: 5px; }
.shelf-rail__counts i { color: var(--shelf-gold); font-size: 11px; }

/* ---------- rail: your shelf ---------- */
.shelf-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
.shelf-actions__frame, .shelf-actions__form { display: contents; }
.shelf-actions__frame > .shelf-actions__form { display: contents; }
.shelf-actions__btn {
  background: var(--shelf-window);
  border: 0;
  border-right: 2px solid var(--shelf-ink);
  padding: 10px 4px 8px;
  display: grid; justify-items: center; gap: 4px;
  font-family: var(--shelf-chrome);
  font-size: 11px; font-weight: 700; color: var(--shelf-ink);
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.shelf-actions > :last-child .shelf-actions__btn,
.shelf-actions > :last-child > .shelf-actions__form .shelf-actions__btn { border-right: 0; }
.shelf-actions__btn i { font-size: 20px; }
.shelf-actions__btn:hover { background: var(--shelf-row-hover); }
.shelf-actions__btn[aria-pressed="true"] {
  background: var(--shelf-row-selected);
  box-shadow: inset 2px 2px 0 var(--shelf-ink);
}
.shelf-actions__btn[aria-pressed="true"] i { color: var(--shelf-gold); }

.shelf-rate {
  display: block;
  border-top: 2px solid var(--shelf-ink);
  padding: 8px 10px 10px;
  text-align: center;
  text-decoration: none;
}
.shelf-rate:hover { background: var(--shelf-row-hover); }
.shelf-rate small { display: block; font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.shelf-rate__stars i { margin: 0 1px; }

.shelf-menu { border-top: 2px solid var(--shelf-ink); display: grid; }
.shelf-menu a {
  display: block;
  padding: 8px 12px;
  border-bottom: 1px solid var(--shelf-rule);
  font-weight: 700; font-size: 13px;
  text-decoration: none;
}
.shelf-menu a:last-child { border-bottom: 0; }
.shelf-menu a:hover { background: var(--shelf-row-hover); box-shadow: inset 3px 0 0 var(--shelf-gold); }

.shelf-signin { padding: 12px; display: grid; gap: 10px; font-size: 13px; }
.shelf-signin p { margin: 0; }
.shelf-signin__buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- rail: details ---------- */
.shelf-rail__details {
  margin: 0; padding: 8px 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 12px;
}
.shelf-rail__details dt {
  color: var(--shelf-muted);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; padding-top: 2px;
}
.shelf-rail__details dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.shelf-rail__details a { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }

/* ---------- main: masthead ---------- */
.shelf-masthead { display: grid; gap: 10px; }
.shelf-masthead h1 {
  margin: 0;
  font-family: var(--shelf-serif);
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.shelf-masthead h1 small {
  font-family: var(--shelf-chrome);
  font-size: 16px; font-weight: 400;
  color: var(--shelf-muted);
  margin-left: 10px;
  white-space: nowrap;
}
.shelf-masthead h1 small a { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 3px; }
.shelf-masthead__eyebrow {
  font-family: var(--shelf-mono);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--shelf-muted);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.shelf-masthead__plot {
  font-family: var(--shelf-serif);
  font-size: 18px; line-height: 1.5;
  max-width: 62ch;
  margin: 0;
}
.shelf-scores { display: flex; flex-wrap: wrap; gap: 10px; }
.shelf-scores span {
  border: 2px solid var(--shelf-ink);
  background: var(--shelf-window);
  padding: 3px 9px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
}
.shelf-scores b { color: var(--shelf-gold); }

/* ---------- main: tabs + chips ---------- */
.shelf-tabs { display: flex; border-bottom: 2.5px solid var(--shelf-ink); }
.shelf-tabs button {
  background: none; border: 0;
  padding: 8px 12px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--shelf-muted);
  cursor: pointer;
}
.shelf-tabs button:focus-visible { outline: 3px solid var(--shelf-gold); outline-offset: -3px; }
.shelf-tabs button.is-active {
  color: var(--shelf-ink);
  background: var(--shelf-window);
  border: 2.5px solid var(--shelf-ink);
  border-bottom: 0;
  margin-bottom: -2.5px;
}
[role="tabpanel"] > .shelf-chips, [role="tabpanel"] > .shelf-crew { padding-top: 12px; }
.shelf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shelf-chips a, .shelf-chips span {
  text-decoration: none;
  background: var(--shelf-window);
  border: 2px solid var(--shelf-ink);
  box-shadow: 2px 2px 0 var(--shelf-ink);
  padding: 4px 9px;
  font-size: 13px; font-weight: 600;
}
.shelf-chips a:hover { background: var(--shelf-row-selected); }
.shelf-crew { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.shelf-crew dt { font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shelf-muted); padding-top: 3px; }
.shelf-crew dd { margin: 0; }

/* ---------- main: sections ---------- */
.shelf-section { display: grid; gap: 12px; }
.shelf-section__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-bottom: 2.5px solid var(--shelf-ink);
  padding-bottom: 5px;
}
.shelf-section__head h2 {
  margin: 0;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.shelf-section__head a, .shelf-section__head span {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--shelf-muted); text-decoration: none;
}
.shelf-section__head a:hover { color: var(--shelf-gold); }
.shelf-section__badge {
  display: inline-block;
  background: var(--shelf-gold); color: #fff;
  border: 2px solid var(--shelf-ink);
  padding: 0 6px; margin-left: 8px;
  font-size: 10px;
}

/* buddy list */
.shelf-buddies { list-style: none; margin: 0; padding: 4px 0; }
.shelf-buddy {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--shelf-rule);
}
.shelf-buddy:last-child { border-bottom: 0; }
.shelf-buddy:hover { background: var(--shelf-row-hover); }
.shelf-buddy__name { font-size: 13px; font-weight: 700; text-decoration: none; }
.shelf-buddy__who small { display: block; font-size: 11px; color: var(--shelf-muted); }
.shelf-buddy__who small a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-buddy__rating { white-space: nowrap; }
.shelf-buddy__unrated { color: var(--shelf-muted); }

/* reviews */
.shelf-reviews { display: grid; }
.shelf-review {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--shelf-rule);
}
.shelf-review:first-child { padding-top: 4px; }
.shelf-review:last-child { border-bottom: 0; }
.shelf-review__avatar { text-decoration: none; }
.shelf-review__body { min-width: 0; }
.shelf-review__head { font-size: 13px; color: var(--shelf-muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.shelf-review__head a { color: var(--shelf-ink); font-weight: 700; text-decoration: none; }
.shelf-review__head a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-review__head time { font-variant-numeric: tabular-nums; }
.shelf-review__text {
  font-family: var(--shelf-serif);
  font-size: 17px; line-height: 1.5;
  margin: 6px 0 8px;
  max-width: 62ch;
  overflow-wrap: anywhere;
}
.shelf-review__foot { font-size: 12px; color: var(--shelf-muted); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.shelf-review__foot a { font-weight: 700; color: var(--shelf-ink); text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.shelf-review__foot .favorite-btn { background: none; border: 0; padding: 0; cursor: pointer; }

/* around lavish: posts, blogs, dives */
.shelf-around { display: grid; gap: 12px; }
.shelf-around__item {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  padding: 12px;
}
.shelf-around__meta { font-size: 12px; color: var(--shelf-muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.shelf-around__meta a { font-weight: 700; color: var(--shelf-ink); text-decoration: none; }
.shelf-around__kind {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--shelf-ink); color: #fff; padding: 2px 6px;
}
.shelf-around__title { margin: 4px 0 2px; font-family: var(--shelf-serif); font-size: 19px; line-height: 1.2; }
.shelf-around__title a { text-decoration: none; }
.shelf-around__title a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-around__body { font-size: 13px; color: var(--shelf-ink); }
.shelf-around__body p { margin: 0; }
.shelf-around__link { font-size: 12px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }

/* related grid */
/* minmax(0, 1fr): a long one-word title must not widen its track past the container */
.shelf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shelf-mini { text-decoration: none; display: grid; gap: 6px; min-width: 0; }
.shelf-mini__title { overflow-wrap: anywhere; }
.shelf-mini__poster {
  aspect-ratio: 2 / 3;
  border: 2px solid var(--shelf-ink);
  box-shadow: 3px 3px 0 var(--shelf-ink);
  background: #1a1a1a;
  overflow: hidden;
  display: grid; place-items: center; color: #777;
}
.shelf-mini__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-mini__title { font-size: 12px; font-weight: 700; line-height: 1.25; }
.shelf-mini__meta { font-size: 11px; color: var(--shelf-muted); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.shelf-mini__meta b { color: var(--shelf-gold); }
@media (prefers-reduced-motion: no-preference) {
  .shelf-mini__poster { transition: transform 0.08s, box-shadow 0.08s; }
  .shelf-mini:hover .shelf-mini__poster { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shelf-ink); }
}

/* ---------- review (shelf log) page ---------- */
.shelf-page__strip-sep { margin: 0 10px; opacity: 0.5; }
.shelf-page__back i { font-size: 10px; margin-right: 4px; }
.shelf-page__grid--review { grid-template-columns: 220px minmax(0, 1fr) 250px; }
.shelf-page__grid--review .shelf-masthead { grid-column: 2 / span 2; }
.shelf-page__grid--review .shelf-main { grid-column: 2; }
.shelf-side { grid-column: 3; grid-row: 2; display: grid; gap: 28px; align-self: start; }
@media (max-width: 980px) {
  .shelf-page__grid--review { grid-template-columns: 220px minmax(0, 1fr); }
  .shelf-page__grid--review .shelf-masthead { grid-column: 2; }
  .shelf-side { grid-column: 1 / span 2; grid-row: auto; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .shelf-page__grid--review { grid-template-columns: 1fr; }
  /* Every child stacks; this outranks the wider-screen placements above. */
  .shelf-page__grid--review > .shelf-masthead,
  .shelf-page__grid--review > .shelf-rail,
  .shelf-page__grid--review > .shelf-main,
  .shelf-page__grid--review > .shelf-side { grid-column: 1; grid-row: auto; }
  .shelf-side { grid-template-columns: 1fr; }
}

.shelf-rail__poster-link { display: block; text-decoration: none; color: inherit; }
.shelf-rail__caption { display: block; padding: 8px 10px 10px; font-size: 12px; border-bottom: 2px solid var(--shelf-ink); }
.shelf-rail__caption-cta { font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.shelf-rail__poster-link:hover .shelf-rail__caption-cta { color: var(--shelf-gold-hover); }
.shelf-rail__caption small { display: block; color: var(--shelf-muted); font-size: 11px; margin-top: 2px; }

.shelf-masthead--review h1 { font-size: clamp(28px, 4vw, 40px); }
.shelf-masthead--review h1 a { text-decoration: none; }
.shelf-masthead--review h1 a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 4px; }
.shelf-byline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--shelf-muted);
  border-bottom: 2.5px solid var(--shelf-ink); padding-bottom: 10px;
}
.shelf-byline a { color: var(--shelf-ink); font-weight: 700; text-decoration: none; }
.shelf-byline__tag {
  margin-left: auto;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--shelf-ink); color: #fff; padding: 2px 6px;
}
.shelf-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--shelf-muted); }
.shelf-review-meta time { font-variant-numeric: tabular-nums; }

.shelf-review-body { font-family: var(--shelf-serif); font-size: 19px; line-height: 1.55; max-width: 62ch; overflow-wrap: anywhere; }
.shelf-review-body p { margin: 0 0 1em; }
.shelf-review-body p:last-child { margin-bottom: 0; }
.shelf-review-body > p:first-child::first-letter {
  font-family: Impact, 'Arial Black', var(--shelf-chrome);
  font-size: 3.1em; line-height: 0.8; float: left; padding: 6px 8px 0 0; color: var(--shelf-gold);
}
.shelf-review-body--empty { font-family: var(--shelf-chrome); font-size: 14px; color: var(--shelf-muted); display: grid; gap: 12px; }
.shelf-review-body--empty > p:first-child::first-letter { all: unset; }
.shelf-review-form { display: grid; gap: 8px; justify-items: start; }
.retro-input {
  width: 100%; background: var(--shelf-window); color: var(--shelf-ink);
  border: 2px solid var(--shelf-ink); padding: 8px 10px;
  font: 14px/1.45 var(--shelf-chrome);
}
.retro-input:focus { outline: 3px solid var(--shelf-gold); outline-offset: 1px; }

.shelf-reactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--shelf-muted); }
.shelf-reactions a:not(.retro-btn) { color: var(--shelf-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.shelf-reactions .favorite-btn { background: none; border: 0; padding: 0; cursor: pointer; font-size: 16px; }
.shelf-reactions__spacer { flex: 1; }
.shelf-reactions .retro-btn { padding: 4px 10px; font-size: 12px; }

.shelf-diary { list-style: none; margin: 0; padding: 0; }
.shelf-diary li {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center;
  padding: 7px 12px; border-bottom: 1px solid var(--shelf-rule); font-size: 13px;
}
.shelf-diary li:last-child { border-bottom: 0; }
.shelf-diary li[aria-current="true"] { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.shelf-diary__date { font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-decoration: none; }
.shelf-diary__date:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-diary__snip { color: var(--shelf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-diary__stars { white-space: nowrap; }

/* comments as a chat room: the comment system keeps its own markup, the room supplies the frame and the voice */
.shelf-chat { background: #f4f8fd; }
.shelf-chat__body { padding: 10px 12px 12px; }
.comments-section__heading {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--shelf-muted); margin: 0 0 10px;
}
.shelf-chat .comment-thread { font-family: Verdana, Arial, sans-serif; font-size: 14px; }
.shelf-chat [data-comments-empty-state] { font-family: Verdana, Arial, sans-serif; font-style: italic; color: var(--shelf-muted); padding: 12px 0; }

.shelf-grid--side { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shelf-grid--side .shelf-mini__title { font-size: 11px; }

/* ---------- rating spread ---------- */
.shelf-bars { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 6px; }
.shelf-bars li { display: grid; grid-template-columns: 44px 1fr 32px; align-items: center; gap: 10px; font-size: 12px; }
.shelf-bars__label { font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; }
.shelf-bars__label i { color: var(--shelf-gold); font-size: 10px; }
.shelf-bars__track { display: block; height: 12px; border: 2px solid var(--shelf-ink); background: var(--shelf-window); }
.shelf-bars__fill { display: block; height: 100%; background: var(--shelf-gold); }
.shelf-bars__count { text-align: right; font-variant-numeric: tabular-nums; color: var(--shelf-muted); }
.shelf-bars__label a { text-decoration: none; }
.shelf-bars__label a:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-empty { padding: 14px; font-size: 13px; color: var(--shelf-muted); }
.shelf-section__note { margin: 0; font-size: 13px; color: var(--shelf-muted); font-style: italic; }

/* ---------- reviews page: filter strip, pagination ---------- */
.shelf-tabs--filters a {
  padding: 8px 12px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--shelf-muted); text-decoration: none;
}
.shelf-tabs--filters a i { color: var(--shelf-gold); font-size: 10px; }
.shelf-tabs--filters a.is-active {
  color: var(--shelf-ink); background: var(--shelf-window);
  border: 2.5px solid var(--shelf-ink); border-bottom: 0; margin-bottom: -2.5px;
}
.shelf-tabs__count { color: var(--shelf-muted); font-weight: 400; }
.shelf-review__of { color: var(--shelf-muted); }
.shelf-review__of a { color: var(--shelf-ink); font-weight: 700; }
.shelf-review__text p { margin: 0 0 0.8em; }
.shelf-review__text p:last-child { margin-bottom: 0; }
.shelf-pagination nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.shelf-pagination nav a, .shelf-pagination nav span {
  display: inline-block; padding: 4px 10px;
  background: var(--shelf-window); border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; text-decoration: none;
}
.shelf-pagination nav .current { background: var(--shelf-gold); color: #fff; }
.shelf-pagination nav .gap { border: 0; box-shadow: none; background: none; }

/* ---------- shelf home ---------- */
.shelf-home__intro { font-family: var(--shelf-serif); font-size: 18px; line-height: 1.5; max-width: 62ch; margin: 0; }
.shelf-home__tools { padding: 12px; display: grid; gap: 12px; }
.shelf-home__search { position: relative; display: flex; gap: 8px; }
.shelf-home__search .retro-input { flex: 1; }
.shelf-home__search select.retro-input { flex: none; width: auto; }
.shelf-home__results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 6px;
  background: var(--shelf-window); border: 2.5px solid var(--shelf-ink); box-shadow: 4px 4px 0 var(--shelf-ink);
}
.shelf-home__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.shelf-reviewers { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.shelf-reviewers a { display: grid; justify-items: center; gap: 4px; text-decoration: none; width: 64px; font-size: 11px; text-align: center; }
.shelf-reviewers a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 64px; }
.shelf-lists { list-style: none; margin: 0; padding: 4px 0; }
.shelf-lists li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--shelf-rule); }
.shelf-lists li:last-child { border-bottom: 0; }
.shelf-lists li:hover { background: var(--shelf-row-hover); }
.shelf-lists__title { font-weight: 700; text-decoration: none; font-size: 13px; }
.shelf-lists__by { display: block; font-size: 11px; color: var(--shelf-muted); }
.shelf-lists__covers { display: flex; gap: 3px; }
.shelf-lists__covers img, .shelf-lists__covers span { width: 22px; height: 33px; object-fit: cover; border: 1.5px solid var(--shelf-ink); display: block; background: #1a1a1a; }
.shelf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* Pages whose rail carries tools or a menu, not just a poster */
.shelf-page__grid--wide-rail { grid-template-columns: 300px minmax(0, 1fr); }

/* ---------- member shelf ---------- */
.shelf-member { display: flex; gap: 12px; align-items: center; padding: 12px; }
.shelf-member__name { font-weight: 700; font-size: 15px; text-decoration: none; display: block; }
.shelf-member small { color: var(--shelf-muted); font-size: 11px; }
.shelf-member small a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-menu--browse a { display: flex; justify-content: space-between; align-items: center; }
.shelf-menu--browse a i { color: var(--shelf-gold); width: 16px; }
.shelf-menu--browse a b { font-family: var(--shelf-mono); font-size: 11px; color: var(--shelf-muted); }
.shelf-menu--browse a.is-current { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.shelf-want { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.shelf-thumb { display: block; width: 30px; height: 45px; border: 2px solid var(--shelf-ink); background: #1a1a1a; overflow: hidden; }
.shelf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-thumb span { display: grid; place-items: center; width: 100%; height: 100%; color: #777; font-size: 11px; }
.shelf-want .shelf-buddy { grid-template-columns: 30px 1fr auto; }
.shelf-diary__month {
  padding: 6px 12px; background: var(--shelf-row-selected); border-top: 1px solid var(--shelf-rule); border-bottom: 1px solid var(--shelf-rule);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.shelf-diary__month:first-child { border-top: 0; }
.retro-win__status a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }

/* ---------- diary index ---------- */
.shelf-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.shelf-filters label { display: grid; gap: 4px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shelf-muted); }
.shelf-filters .retro-input { width: auto; min-width: 130px; font-size: 13px; padding: 6px 8px; }
/* The same filters stacked inside a rail window (film catalog) */
.shelf-filters--stack { display: grid; gap: 10px; padding: 12px; align-items: stretch; }
.shelf-filters--stack .retro-input { width: 100%; min-width: 0; }
.shelf-filters__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.shelf-menu--scroll { max-height: 360px; overflow-y: auto; }
/* On a phone the covers come before the genre list: the rail's windows become grid items so the genres window can go last. */
@media (max-width: 820px) {
  /* Declared after the wide-rail modifier so it wins on phones (the member shelf pages had a 300px column here too). */
  .shelf-page__grid--wide-rail { grid-template-columns: 1fr; }
  .shelf-rail--catalog { display: contents; }
  .shelf-rail--catalog .shelf-genres { order: 1; }
}
.shelf-diary--full li { grid-template-columns: 96px 30px 1fr auto auto; }
.shelf-diary__what { min-width: 0; display: grid; }
.shelf-diary__title { font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-diary__title:hover { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-diary__what small { color: var(--shelf-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-diary__what small a { text-decoration: underline; text-decoration-color: var(--shelf-gold); }
.shelf-diary__actions { display: flex; gap: 10px; }
.shelf-diary__actions a { color: var(--shelf-muted); font-size: 12px; }
.shelf-diary__actions a:hover { color: var(--shelf-gold); }
@media (max-width: 700px) {
  .shelf-diary--full li { grid-template-columns: 30px 1fr auto; }
  .shelf-diary--full .shelf-diary__date { grid-column: 1 / -1; }
}

/* ---------- log form (shelf/log_new) ---------- */
.shelf-log__form { display: grid; gap: 24px; }
.shelf-log fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.shelf-log__legend, .shelf-log__label {
  display: block; padding: 10px 12px 4px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.shelf-log__body { padding: 12px; }
.shelf-log__body .shelf-log__label { padding: 0 0 6px; }
.shelf-log__body--rule { border-top: 2px solid var(--shelf-ink); }
.retro-options { display: grid; }
.retro-option {
  display: grid; grid-template-columns: 15px 1fr; gap: 12px; align-items: start;
  padding: 10px 12px; cursor: pointer;
  border-top: 1px solid var(--shelf-rule);
}
.retro-option:hover { background: var(--shelf-row-hover); }
.retro-option:has(input:checked) { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
.retro-option input {
  width: 15px; height: 15px; margin: 2px 0 0; cursor: pointer;
  color: var(--shelf-gold); accent-color: var(--shelf-gold); --tw-ring-color: var(--shelf-gold);
}
.retro-option__text b { display: block; font-size: 13px; }
.retro-option__text small { display: block; font-size: 11px; color: var(--shelf-muted); margin-top: 1px; }
.shelf-log__date { border-top: 2px solid var(--shelf-ink); }
.shelf-log__date > .retro-option { border-top: 0; }
.shelf-log__date-field { padding: 0 12px 12px; display: grid; gap: 6px; justify-items: start; }
.shelf-log__date-field .shelf-log__label { padding: 0; }
.retro-input--date { width: auto; min-width: 200px; font-variant-numeric: tabular-nums; }
.shelf-log textarea.retro-input { resize: vertical; }
.shelf-log__review { font-family: var(--shelf-serif); font-size: 16px; line-height: 1.5; }
.shelf-log__actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

/* half-star picker: the star-rating controller swaps filled, half, and empty on .star-icon */
.shelf-stars { display: flex; align-items: center; gap: 2px; }
.shelf-stars .star-container { position: relative; display: block; width: 32px; height: 32px; }
.shelf-stars .star-half-left, .shelf-stars .star-half-right {
  position: absolute; top: 0; width: 50%; height: 100%; z-index: 1;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.shelf-stars .star-half-left { left: 0; }
.shelf-stars .star-half-right { left: 50%; }
.shelf-stars .star-half-left:focus-visible, .shelf-stars .star-half-right:focus-visible { outline: 2px solid var(--shelf-gold); }
.shelf-stars .star-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; pointer-events: none; }
.shelf-stars .star-icon.filled, .shelf-stars .star-icon.half { color: var(--shelf-gold); }
.shelf-stars .star-icon.empty { color: #d9d2be; }
.shelf-stars__text { margin-left: 10px; font-size: 12px; color: var(--shelf-muted); font-variant-numeric: tabular-nums; }

/* rail on the log form: a blurb under the caption, no stray rule when nothing follows */
.shelf-rail__blurb { margin: 0; padding: 10px 12px 12px; font-family: var(--shelf-serif); font-size: 13px; line-height: 1.45; }
.shelf-rail__blurb--ruled { border-top: 1px solid var(--shelf-rule); }
.shelf-rail__poster-link:last-child .shelf-rail__caption { border-bottom: 0; }

/* edit and diary entry forms */
.retro-btn--danger { color: var(--shelf-danger); }
.retro-btn--danger:hover { background: #fdf1ef; }
.shelf-log__actions--split { justify-content: space-between; }
.shelf-log__actions-group { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.shelf-log__note { margin: 0; padding: 12px; font-size: 13px; color: var(--shelf-muted); }
.shelf-log__errors { padding: 10px 12px; font-size: 13px; color: var(--shelf-danger); }
.shelf-log__errors ul { margin: 4px 0 0; padding-left: 18px; }
.shelf-diary--actions li { grid-template-columns: 110px 1fr auto auto; }
.shelf-diary__actions form { display: inline; }
.shelf-diary__actions button { background: none; border: 0; padding: 0; color: var(--shelf-muted); font-size: 12px; cursor: pointer; }
.shelf-diary__actions button:hover { color: var(--shelf-danger); }
@media (max-width: 600px) {
  .shelf-diary--actions li { grid-template-columns: 1fr auto auto; }
  .shelf-diary--actions .shelf-diary__date { grid-column: 1 / -1; }
}

.shelf-masthead__episode { display: block; margin: 6px 0 0; font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted); }

/* ---------- share card page ---------- */
.shelf-share { min-height: 100vh; }
.shelf-share__grid { max-width: 1120px; margin: 0 auto; padding: 18px 20px 80px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.shelf-share__stage { display: grid; justify-items: center; }
.shelf-share__preview { max-width: 100%; width: 540px; border: 3px solid var(--shelf-ink); box-shadow: 6px 6px 0 var(--shelf-ink); background: var(--shelf-ground); }
.shelf-share__preview:not([src]) { display: none; }
.shelf-share__drawing { font-family: var(--shelf-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted); }
.shelf-share__aside { display: grid; gap: 18px; }
.shelf-menu__hint { color: var(--shelf-muted); font-weight: 400; }
.shelf-menu a.is-current { background: var(--shelf-row-selected); box-shadow: inset 3px 0 0 var(--shelf-gold); }
@media (max-width: 820px) { .shelf-share__grid { grid-template-columns: 1fr; } }
/* Site chrome: the desktop header drawn as retro OS window chrome.
   A gold title bar (traffic lights, wordmark) over a white menu bar (global nav, member tools).
   Tokens are the --shelf-* custom properties on :root in retro_tokens.css; the .retro-* classes
   come from shelf_page.css. Rules: docs/agents/retro_os_design_system.md. */

.site-chrome {
  position: relative;
  z-index: 200;
  border: 2.5px solid var(--shelf-ink);
  background: var(--shelf-window);
  color: var(--shelf-ink);
  font-family: var(--shelf-chrome);
}

/* ---------- title bar ---------- */
.site-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  background: var(--shelf-gold);
  border-bottom: 2.5px solid var(--shelf-ink);
}
.site-titlebar .retro-win__lights { justify-self: start; }

.site-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-family: var(--shelf-mono);
  font-weight: 700;
}
.site-wordmark__name { font-size: 19px; letter-spacing: 0.02em; }
.site-wordmark__tagline {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.92;
}
.site-wordmark:hover .site-wordmark__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.site-wordmark:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- menu bar ---------- */
.site-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 8px;
  background: var(--shelf-window);
}

.global-nav { min-width: 0; }
.nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav-links a {
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid transparent;
  color: var(--shelf-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { background: var(--shelf-row-hover); border-color: var(--shelf-ink); }
.nav-links a.is-active {
  background: var(--shelf-gold);
  border-color: var(--shelf-ink);
  color: #fff;
  box-shadow: inset 2px 2px 0 var(--shelf-ink);
}
.nav-links a:focus-visible { outline: 3px solid var(--shelf-gold); outline-offset: 1px; }

/* ---------- member tools ---------- */
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.header-actions .retro-btn { padding: 5px 10px; font-size: 13px; }
.header-actions .retro-btn--icon { padding: 5px 6px; }

.header-search-form { display: flex; }
.header-search-input { width: 170px; padding: 5px 8px; font-size: 13px; }
@media (max-width: 1180px) { .header-search-input { width: 120px; } }

/* Signed-out utility links (Help, About) sit as plain menu items */
.header-link {
  padding: 5px 6px;
  color: var(--shelf-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--shelf-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Count badges on the bell and messages buttons are .retro-badge (shelf_page.css) */
.notification-bell, .messages-icon { display: inline-flex; }

/* ---------- Account and Create disclosures: a retro button that drops a retro menu ---------- */
.header-account, .header-create { position: relative; }
.header-account summary, .header-create summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.header-account summary::-webkit-details-marker,
.header-create summary::-webkit-details-marker { display: none; }
.header-account[open] > summary, .header-create[open] > summary {
  box-shadow: inset 1px 1px 0 var(--shelf-ink);
  transform: translate(1px, 1px);
}
.header-account-chevron { transition: transform 0.15s ease; }
.header-account[open] .header-account-chevron { transform: rotate(180deg); }
.header-create svg { flex: none; }

.header-account-menu, .header-create-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  padding: 4px;
  background: var(--shelf-window);
  border: 2.5px solid var(--shelf-ink);
  box-shadow: 4px 4px 0 var(--shelf-ink);
  z-index: 9999;
}
.header-create-menu { min-width: 190px; }

.header-account-item, .header-create-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  background: none;
  border: 0;
  color: var(--shelf-ink);
  font: 700 13px/1.2 var(--shelf-chrome);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.header-account-item:hover, .header-create-item:hover {
  background: var(--shelf-row-selected);
  box-shadow: inset 3px 0 0 var(--shelf-gold);
  color: var(--shelf-ink);
}
.header-account-divider { height: 2px; margin: 4px 0; background: var(--shelf-rule); }
.header-account-signout { color: var(--shelf-danger); }
.header-account-menu form { margin: 0; }
.header-create-icon { width: 18px; height: 18px; flex: none; color: var(--shelf-gold); }
/* Social Sharing Cards - Letterboxd Style */
.social-sharing-card {
  margin: 0;
  padding: 0;
  background: #2a2a2a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-container {
  width: 1200px;
  height: 630px;
  background: #2a2a2a;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
}

/* Back Navigation */
.back-navigation {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 20;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(42, 42, 42, 0.8);
  color: #d4af37;
  text-decoration: none;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #d4af37;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .back-link:hover {
    background: #d4af37;
    color: #2a2a2a;
    transform: translateY(-1px);
  }
}

/* Share Navigation */
.share-navigation {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
}

.share-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(42, 42, 42, 0.8);
  color: #d4af37;
  text-decoration: none;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #d4af37;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
}

@media (hover: hover) {
  .share-link:hover {
    background: #d4af37;
    color: #2a2a2a;
    transform: translateY(-1px);
  }
}

/* User Profile Photo */
.user-avatar-container {
  margin-bottom: -20px; /* Pulls the next element (poster) up by 35px, creating overlap */
  position: relative; /* Needed for z-index to work */
  z-index: 10; /* Ensure it's above the poster */
}

.user-avatar-link {
  display: inline-block;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .user-avatar-link:hover {
    transform: scale(1.05);
  }
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #d4af37;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.default-avatar {
  background: #d4af37;
  color: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

/* Content Poster/Cover */
.content-poster-container {
  margin-bottom: 20px;
}

.content-poster {
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  display: block;
}

/* Content Title */
.content-title {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: white;
  line-height: 1.2;
  max-width: 800px;
}

/* Star Rating */
.star-rating {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}

.star {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  color: #666;
}

.star.filled {
  color: #d4af37;
}

.star.half {
  background: linear-gradient(90deg, #d4af37 50%, #666 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Divider */
.divider {
  width: 200px;
  height: 1px;
  background: #666;
  margin: 10px 0 5px 0;
}

/* Platform Attribution */
.platform-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
}

.platform-text {
  font-size: 14px;
  color: #999;
  margin-right: 8px;
}

.platform-name {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  .card-container {
    width: 100%;
    max-width: 1200px;
    height: auto;
    min-height: 630px;
  }
  
  .content-poster {
    width: 250px;
    height: 375px;
  }
  
  .content-title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .card-container {
    padding: 20px;
  }
  
  .content-poster {
    width: 200px;
    height: 300px;
  }
  
  .content-title {
    font-size: 24px;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
  }
}
/* Streaming service icons styling */
.streaming-icon {
  @apply inline-flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 hover:scale-110;
}

.streaming-icon.spotify {
  @apply bg-green-600 text-white hover:bg-green-700;
}

.streaming-icon.apple-music {
  @apply bg-pink-600 text-white hover:bg-pink-700;
}

.streaming-icon.youtube {
  @apply bg-red-600 text-white hover:bg-red-700;
}

/* Track list streaming icons */
.track-streaming-icons {
  @apply flex items-center gap-1 opacity-60 hover:opacity-100 transition-opacity;
}

.track-streaming-icons a {
  @apply p-1 rounded transition-colors;
}

@media (hover: hover) {
  .track-streaming-icons a:hover {
    @apply bg-gray-100;
  }
}
/* The subscribe page on the shelf chrome: plan windows to pick from, a payment window, the writer in the rail.
   Tokens and window parts come from shelf_page.css. */
.shelf-main--subscribe { gap: 24px; }
.subscribe-form { display: grid; gap: 24px; }

/* ---------- plan windows ---------- */
.subscribe-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; align-items: stretch; }
.tier-card { display: flex; flex-direction: column; margin: 0; cursor: pointer; }
.tier-card:hover .retro-win__status { background: var(--shelf-row-hover); }
.tier-card:has(input:checked) { outline: 3px solid var(--shelf-gold); outline-offset: 3px; }
.tier-card__body { flex: 1; padding: 14px 14px 16px; display: grid; gap: 12px; align-content: start; }
.tier-card__price { margin: 0; font-family: var(--shelf-serif); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.tier-card__price small { font-family: var(--shelf-chrome); font-size: 13px; font-weight: 400; color: var(--shelf-muted); margin-left: 2px; }
.tier-card__savings {
  display: block; margin-top: 8px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted);
}
.tier-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; }
.tier-card__features li { display: flex; gap: 8px; align-items: flex-start; }
.tier-card__features li i { flex: none; width: 12px; margin-top: 3px; text-align: center; font-size: 12px; color: var(--shelf-gold); }
.tier-card__features li.is-out { color: var(--shelf-muted); text-decoration: line-through; }
.tier-card__features li.is-out i { color: #b9b1a0; }
.tier-card__pick { align-items: center; }
.tier-card__pick > span:first-child { display: flex; align-items: center; gap: 7px; }
.tier-card__pick input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--shelf-gold); }
.tier-card__badge { color: var(--shelf-gold); }

/* ---------- checkout ---------- */
.subscribe-checkout { display: grid; gap: 14px; justify-items: start; }
.subscribe-pay { width: min(440px, 100%); }
.subscribe-pay__body { padding: 14px; display: grid; gap: 10px; }
.subscribe-pay__label {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.subscribe-pay__card { border: 2px solid var(--shelf-ink); background: var(--shelf-window); padding: 10px; }
.subscribe-pay__card:focus-within { outline: 3px solid var(--shelf-gold); outline-offset: 1px; }
.subscribe-pay__errors { color: var(--shelf-danger); font-size: 13px; overflow-wrap: anywhere; }
.subscribe-pay__errors:empty { display: none; }
.subscribe-pay__btn { justify-self: start; }
.subscribe-checkout__note { margin: 0; font-size: 13px; font-style: italic; color: var(--shelf-muted); }
.subscribe-checkout [hidden] { display: none; }
.subscribe-checkout__free { padding: 8px 20px; font-size: 14px; }
.subscribe-checkout__terms { margin: 0; font-size: 12px; color: var(--shelf-muted); }
.subscribe-checkout__terms a { text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }

/* ---------- already subscribed ---------- */
.subscribe-done__body { padding: 16px; display: grid; gap: 12px; max-width: 60ch; }
.subscribe-done__body h2 { margin: 0; font-family: var(--shelf-serif); font-size: 24px; line-height: 1.15; }
.subscribe-done__body p { margin: 0; }
.subscribe-done__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* The unsubscribe confirm: the dialog element is the frame, the retro window inside draws everything. */
.subscribe-confirm-frame {
  width: min(380px, calc(100vw - 32px)); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; background: transparent; overflow: visible;
  font-family: var(--shelf-chrome); font-size: 14px; line-height: 1.45; color: var(--shelf-ink);
}
.subscribe-confirm-frame::backdrop { background: rgba(0, 0, 0, 0.4); }
.subscribe-confirm { box-shadow: 5px 5px 0 var(--shelf-ink); }
.subscribe-confirm__body { padding: 14px; display: grid; gap: 12px; }
.subscribe-confirm__body p { margin: 0; }
.subscribe-confirm__actions { display: flex; gap: 8px; justify-content: flex-end; }
/* The subscription status pages (active, canceled, pending) on the shelf chrome: one window per state,
   the writer in the rail. Tokens and window parts come from shelf_page.css. */
.shelf-main--sub-status { gap: 24px; }

/* ---------- state window ---------- */
.sub-status__body { padding: 16px; display: grid; gap: 14px; }
.sub-status__body h2 { margin: 0; font-family: var(--shelf-serif); font-size: 24px; line-height: 1.15; }
.sub-status__body h3 { margin: 0; font-family: var(--shelf-serif); font-size: 18px; line-height: 1.2; }
.sub-status__body p { margin: 0; max-width: 60ch; }
.sub-status__label {
  display: block; margin-bottom: 6px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.sub-status__facts {
  margin: 0; padding: 10px 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  font-size: 13px; border: 2px solid var(--shelf-ink); background: var(--shelf-row-hover);
}
.sub-status__facts dt {
  color: var(--shelf-muted);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; padding-top: 2px;
}
.sub-status__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-status__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; }
.sub-status__list li { display: flex; gap: 8px; align-items: flex-start; }
.sub-status__list li i { flex: none; width: 12px; margin-top: 3px; text-align: center; font-size: 12px; color: var(--shelf-gold); }
.sub-status__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.sub-status__actions form { display: contents; }
.sub-status__note { font-size: 13px; font-style: italic; color: var(--shelf-muted); }
.sub-status__note.hidden { display: none; }

/* ---------- live status checks ---------- */
.sub-status__check {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 2px solid var(--shelf-ink); background: var(--shelf-row-selected);
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.sub-status__check i { color: var(--shelf-gold); }
.sub-status__result { padding: 12px; border: 2px solid var(--shelf-ink); display: grid; gap: 4px; font-size: 13px; }
.sub-status__result.hidden { display: none; }
.sub-status__result b { display: block; }
.sub-status__result--ok { background: var(--shelf-row-selected); }
.sub-status__result--error { color: var(--shelf-danger); }

/* ---------- payment window (retry) ---------- */
.sub-status__pay { width: min(440px, 100%); }
.sub-status__pay.hidden { display: none; }
.sub-status__pay-body { padding: 14px; display: grid; gap: 10px; }
.sub-status__card { border: 2px solid var(--shelf-ink); background: var(--shelf-window); padding: 10px; }
.sub-status__card:focus-within { outline: 3px solid var(--shelf-gold); outline-offset: 1px; }
.sub-status__errors { color: var(--shelf-danger); font-size: 13px; overflow-wrap: anywhere; }
.sub-status__errors:empty, .sub-status__errors.hidden { display: none; }
.sub-status__pay-btn { justify-self: start; }

/* ---------- the two ways out of a stale subscription ---------- */
.sub-status__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; align-items: stretch; }
.sub-status__option { display: flex; flex-direction: column; }
.sub-status__option .sub-status__body { flex: 1; align-content: start; }
.sub-status__option--pick { outline: 3px solid var(--shelf-gold); outline-offset: 3px; }
/* The support (tip) dialog: a retro window that can open over any page, so it carries its own chrome
   (font, size, color) and only borrows the tokens and window parts from shelf_page.css. */
/* The dialog element is the frame: no chrome of its own, the retro window inside draws everything. */
.support-dialog-frame {
  width: min(420px, calc(100vw - 32px)); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; background: transparent; overflow: visible;
  font-family: var(--shelf-chrome); font-size: 14px; line-height: 1.45;
  color: var(--shelf-ink); text-align: left;
}
.support-dialog-frame::backdrop { background: rgba(0, 0, 0, 0.4); }
.support-dialog { box-shadow: 5px 5px 0 var(--shelf-ink); }
.support-dialog__lights button {
  width: 12px; height: 12px; border-radius: 50%; padding: 0; display: block;
  border: 2px solid var(--shelf-ink); background: #ff5f57; cursor: pointer;
}
.support-dialog__lights button:hover { opacity: 0.8; }
.support-dialog__body { max-height: calc(100vh - 32px - 64px); overflow-y: auto; }

.support-dialog__creator {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; border-bottom: 2px solid var(--shelf-ink);
  background: var(--shelf-row-hover);
}
.support-dialog__creator b { display: block; font-size: 15px; }
.support-dialog__creator small { display: block; font-size: 12px; color: var(--shelf-muted); }
.support-dialog__avatar { display: block; flex: none; }

.support-dialog__section {
  display: grid; gap: 8px; margin: 0; padding: 12px; min-width: 0;
  border: 0; border-bottom: 1px solid var(--shelf-rule);
}
.support-dialog__label {
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}
.support-dialog__amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.support-dialog .amount-btn {
  appearance: none; cursor: pointer;
  background: var(--shelf-window); color: var(--shelf-ink);
  border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
  padding: 8px 4px; font: 700 15px/normal var(--shelf-chrome);
}
.support-dialog .amount-btn:hover { background: var(--shelf-row-selected); }
.support-dialog .amount-btn[aria-pressed="true"] {
  background: var(--shelf-gold); color: #fff;
  box-shadow: inset 1px 1px 0 var(--shelf-ink); transform: translate(1px, 1px);
}
.support-dialog__custom { display: grid; gap: 6px; }
.support-dialog__custom.hidden { display: none; }
.support-dialog__money { position: relative; display: block; }
.support-dialog__money > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-weight: 700; }
.support-dialog__money .retro-input { padding-left: 24px; font-variant-numeric: tabular-nums; }
.support-dialog textarea.retro-input { resize: vertical; font-family: var(--shelf-serif); font-size: 15px; }
.support-dialog__count { font-family: var(--shelf-mono); font-size: 11px; color: var(--shelf-muted); text-align: right; }
.support-dialog__option { border-top: 0; border-bottom: 1px solid var(--shelf-rule); }
.support-dialog__card { border: 2px solid var(--shelf-ink); background: var(--shelf-window); padding: 10px; }
.support-dialog__card:focus-within { outline: 3px solid var(--shelf-gold); outline-offset: 1px; }
.support-dialog__errors { color: var(--shelf-danger); font-size: 13px; overflow-wrap: anywhere; }
.support-dialog__errors:empty { display: none; }
.support-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; }
.support-dialog .retro-win__status b { color: var(--shelf-gold); font-size: 12px; }
/* Hashtag page (browse#interest_tag): the cards-page chrome (cards_page.css brings the card
   windows, the layout toggle and the empty window) over the striped ground the old page had,
   with the room page's paper masthead band (rooms_page.css). Tokens from retro_tokens.css. */
.tag-page {
  min-height: 85svh;
  background: repeating-linear-gradient(135deg, var(--shelf-ground), var(--shelf-ground) 40px, #f3eac2 40px, #f3eac2 80px);
}
.tag-page__inner { max-width: var(--site-width); margin: 0 auto; padding: 0 var(--site-gutter) 40px; }
.tag-page .feed-empty { margin: 24px 0 0; max-width: none; }
.tag-page__pager { margin-top: 24px; }
.trix-content {
  @apply prose prose-lg max-w-none;
}

.trix-button-group {
  @apply border border-gray-200 rounded-md overflow-hidden;
}

.trix-button {
  @apply p-2 hover:bg-gray-100 transition-colors duration-200;
}

.trix-button.trix-active {
  @apply bg-[#B39B63] text-white;
}

.trix-button--icon {
  @apply w-8 h-8 flex items-center justify-center;
}

.trix-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.trix-button--icon-bold::before {
  @apply font-bold;
}

trix-toolbar .trix-dialog {
  @apply bg-white border border-gray-200 rounded-lg shadow-lg;
}

trix-editor {
  @apply min-h-[400px] p-4 prose max-w-none focus:outline-none focus:ring-2 focus:ring-[#B39B63] focus:border-transparent;
}

trix-editor h1 {
  @apply text-3xl font-bold mb-4;
}

trix-editor a {
  @apply text-[#B39B63] hover:text-[#9A855A];
}

/* Trix freezes the selection with an inline "background-color: highlight" while
   the link dialog is open; that system color is nearly invisible, so override
   it with a visible brand highlight to show which words are being linked. */
trix-editor [style*="background-color: highlight"] {
  background-color: rgba(179, 155, 99, 0.35) !important;
  box-shadow: 0 2px 0 0 #B39B63;
}

.trix-dialog__link-selection {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 6px;
}

.trix-dialog__link-selection strong {
  color: #111827;
  font-weight: 600;
}

.trix-content ul {
  @apply list-disc pl-5;
}

.trix-content ol {
  @apply list-decimal pl-5;
}

.trix-content blockquote {
  @apply border-l-4 border-[#B39B63] pl-4 italic my-4;
}

.trix-content pre {
  @apply bg-gray-100 p-4 rounded-lg font-mono text-sm my-4;
}

/* Deep Dive Trix Editor Styles */
.deep-dive-trix-editor trix-editor {
  @apply min-h-[200px] p-3 prose prose-sm max-w-none focus:outline-none focus:ring-1 focus:ring-[#B39B63] focus:border-transparent;
}

.deep-dive-trix-editor trix-toolbar {
  @apply border border-gray-200 rounded-t-lg bg-white;
}

.deep-dive-trix-editor .trix-content {
  @apply prose prose-sm max-w-none;
}

.deep-dive-trix-editor .trix-content p {
  @apply my-2;
}

.deep-dive-trix-editor .trix-content ul,
.deep-dive-trix-editor .trix-content ol {
  @apply my-2 pl-5;
}

.deep-dive-trix-editor .trix-content blockquote {
  @apply border-l-2 border-[#B39B63] pl-3 italic my-2 text-gray-600;
}

.deep-dive-trix-editor .trix-content img {
  @apply rounded-lg my-2;
}

.deep-dive-trix-editor .trix-content a {
  @apply text-[#B39B63] hover:text-[#9A855A] underline;
} 
/* Watch: the overview, the Live page and the Videos page on the shelf chrome.
   Tokens and the .retro-win / .retro-btn / .retro-chip / .retro-avatar chrome
   come from shelf_page.css; this file only lays the three pages out and
   dresses the tiles. The watch room (player page) keeps watch_room.css. */
.watch-page.shelf-page { min-height: 85svh; }
.watch-page__inner {
  max-width: 1400px; margin: 0 auto;
  padding: 22px 20px 60px;
  display: grid; gap: 22px;
}
.watch-masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.watch-masthead__intro { margin: 0; font-size: 14px; color: var(--shelf-muted); max-width: 62ch; }
.watch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; min-width: 0; max-width: 100%; }
/* The make-or-find links. They wrap; they never ask for more than the screen (a shrink-0 group
   once kept its one-line width on a phone and the whole page scrolled sideways). */
.watch-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.watch-links .retro-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
@media (max-width: 639px) {
  .watch-masthead, .watch-toolbar { flex-direction: column; align-items: stretch; }
  .watch-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .watch-links .retro-btn { padding-left: 8px; padding-right: 8px; }
  .watch-links .retro-btn:only-child { grid-column: 1 / -1; }
}
.watch-counts {
  margin: 0;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; color: var(--shelf-muted);
}
.watch-counts strong { color: var(--shelf-ink); }
.watch-tabs { flex-wrap: wrap; }
.watch-intro { font-size: 13px; color: var(--shelf-muted); max-width: 62ch; }
.watch-intro summary {
  cursor: pointer; list-style: none;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-ink);
}
.watch-intro summary::-webkit-details-marker { display: none; }
.watch-intro p { margin: 8px 0 0; line-height: 1.5; }
.watch-intro a, .watch-note a { color: var(--shelf-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.watch-note { border: 2px solid var(--shelf-ink); background: var(--shelf-window); padding: 10px 14px; font-size: 13px; }

/* ---------- window sections ---------- */
.watch-win__bar--live { background: var(--shelf-ink); }
.watch-win__bar--live .retro-win__lights i { border-color: #fff; }
.watch-win__note {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.watch-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; display: inline-block; }
.watch-win__body { padding: 16px 16px 20px; }
.watch-win__status a { text-decoration: none; margin-left: auto; }
.watch-win__status a::after { content: " ▸"; }
.watch-win__status a:hover { color: var(--shelf-gold-hover); }
.watch-empty { margin: 0; border: 2px dashed var(--shelf-rule); padding: 24px 16px; text-align: center; color: var(--shelf-muted); font-size: 13px; }
.watch-empty__title { margin: 0; font-weight: 700; color: var(--shelf-ink); }
.watch-empty__sub { margin: 6px 0 0; }
.watch-empty .retro-btn { margin-top: 12px; }

/* ---------- tiles ---------- */
.watch-tile { display: block; min-width: 0; text-decoration: none; color: inherit; }
.watch-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink);
  background: #2a2621; display: grid; place-items: center;
}
.watch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-thumb__initial { font-size: 30px; font-weight: 700; color: rgba(255, 255, 255, 0.3); }
@media (prefers-reduced-motion: no-preference) {
  .watch-thumb { transition: transform 0.08s; }
  .watch-tile:hover .watch-thumb, .watch-series__row:hover .watch-poster { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shelf-ink); }
}
.watch-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 2px solid var(--shelf-ink); padding: 2px 8px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; line-height: 1.3;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.watch-badge--live { background: #c8102e; color: #fff; }
.watch-badge--premiere { background: var(--shelf-gold); color: #fff; }
.watch-badge--upcoming { background: var(--shelf-window); color: var(--shelf-ink); }
.watch-badge--streamed { background: var(--shelf-row-selected); color: var(--shelf-muted); }
.watch-tag {
  position: absolute; background: var(--shelf-ink); color: #fff; padding: 2px 6px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; line-height: 1.3;
}
.watch-tag--duration { right: 8px; bottom: 8px; }
.watch-tag--trailer { right: 8px; top: 8px; background: var(--shelf-window); color: var(--shelf-ink); border: 2px solid var(--shelf-ink); text-transform: uppercase; letter-spacing: 0.14em; }
/* The player page's Up next rows are small; keep their badges in proportion. */
.watch-row__thumb .watch-badge { top: 4px; left: 4px; padding: 1px 5px; font-size: 9px; border-width: 1.5px; }
.watch-tile__meta { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.watch-tile__text { min-width: 0; display: block; }
.watch-tile__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--shelf-ink);
}
.watch-tile:hover .watch-tile__title, .watch-series__row:hover .watch-tile__title { color: var(--shelf-gold-hover); }
.watch-tile__host { display: block; margin: 0; font-size: 13px; color: var(--shelf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch-tile__sub {
  display: block; margin: 2px 0 0;
  font-family: var(--shelf-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted);
}

/* ---------- series rows ---------- */
.watch-series { display: grid; grid-template-columns: 1fr; }
.watch-series__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-decoration: none; color: inherit;
  border-bottom: 2px solid var(--shelf-ink);
}
.watch-series__row:last-child { border-bottom: 0; }
.watch-series__row:hover { background: var(--shelf-row-hover); box-shadow: inset 3px 0 0 var(--shelf-gold); }
@media (min-width: 768px) {
  .watch-series { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .watch-series__row { border-bottom: 0; border-right: 2px solid var(--shelf-ink); }
  .watch-series__row:last-child { border-right: 0; }
}
.watch-poster {
  width: 44px; aspect-ratio: 2 / 3; flex: none;
  border: 2px solid var(--shelf-ink); box-shadow: 2px 2px 0 var(--shelf-ink);
  background: #1a1a1a; display: grid; place-items: center;
  color: #777; font-family: var(--shelf-mono); font-size: 8px; letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: no-preference) { .watch-poster { transition: transform 0.08s; } }

/* ---------- Live page filters + search ---------- */
.watch-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.watch-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0; }
.watch-filters__rule { width: 2px; height: 22px; background: var(--shelf-ink); margin: 0 4px; }
.watch-filter-link {
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--shelf-muted);
}
.watch-filter-link:hover { color: var(--shelf-ink); }
.watch-filter-link.is-active { color: var(--shelf-ink); text-decoration: underline; text-decoration-color: var(--shelf-gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.watch-search { display: flex; flex-wrap: wrap; gap: 8px; }
.watch-search .retro-input { width: auto; min-width: 220px; flex: 1; padding: 6px 10px; font-size: 13px; }
.watch-topics { overflow-x: auto; padding-bottom: 4px; }

/* ---------- Videos page cycles ---------- */
.watch-cycles { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .watch-cycles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.watch-cycle { border: 2px solid var(--shelf-ink); box-shadow: 3px 3px 0 var(--shelf-ink); background: var(--shelf-window); padding: 14px; }
.watch-cycle__cadence { margin: 0; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-gold); }
.watch-cycle h3 { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.watch-cycle__blurb { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--shelf-muted); }
.watch-cycle__list { margin-top: 10px; border-top: 2px solid var(--shelf-rule); padding-top: 10px; display: grid; gap: 4px; font-size: 13px; }
.watch-cycle__list a { font-weight: 700; color: var(--shelf-ink); text-decoration: underline; text-decoration-color: var(--shelf-gold); text-underline-offset: 2px; }
.watch-cycle__list a:hover { color: var(--shelf-gold-hover); }
/* The watch room, phone first. On a phone it is one column in reading order, which is the DOM
   order: the stage (pinned under the site header), chat, the page's own content, Up next, then
   the foot (comments). A flex column reads no grid placement, so nothing written for a desktop
   can move a phone's rows. From 1024px (Tailwind's lg, where the site header goes desktop; the
   watch-room controller's phone query is the other half of that pair) it is a page-level grid: left the
   stage, the page, the foot; right chat at stage height with Up next beneath, or Up next from
   the top when there is no chat. Theater widens the stage to the viewport; full screen keeps
   only the stage and chat. Tokens and .retro-* come from retro_tokens.css and shelf_page.css. */

/* ---------- the page around the room ---------- */
.watch-room-page {
  background: var(--shelf-ground);
  background-image: radial-gradient(rgba(26, 26, 26, 0.09) 1px, transparent 1px);
  background-size: 6px 6px;
  color: var(--shelf-ink);
  min-height: 85svh;
}
.watch-room-page__inner { max-width: 1400px; margin: 0 auto; padding: 0 0 40px; }
/* Notices above the room (the host bar, a hidden-event note): inset on a phone where the room
   itself runs edge to edge. Empty on most pages, so it takes no room of its own. */
.watch-room-page__notices { padding: 0 16px; }
.watch-room-page__notices > :first-child { margin-top: 12px; }

/* ---------- one column ---------- */
.watch-room { display: flex; flex-direction: column; }

/* Edge to edge, no frame, and it stays put under the site header while the page scrolls
   (the watch-room controller measures --watch-sticky-top at phone widths). */
.watch-room__stage {
  display: flex; flex-direction: column;
  min-width: 0;
  background: #000;
  overflow: hidden; /* the stage is the thing that grows, so it clips nothing of its own */
  position: sticky; top: var(--watch-sticky-top, 0px); z-index: 30;
}
/* Theater is a phone's normal state; the button would do nothing. */
.watch-room [data-watch-room-target="theaterButton"] { display: none; }

.watch-room__chat {
  position: relative;
  height: 360px;
  margin: 16px 16px 0;
  border: 2.5px solid var(--shelf-ink);
  box-shadow: 4px 4px 0 var(--shelf-ink);
  overflow: hidden;
  background: #0f0b08;
}
.watch-room__chat > [data-controller~="event-chat"] { position: absolute; inset: 0; }
.watch-room.is-chat-hidden .watch-room__chat { display: none; }

.watch-room__main { min-width: 0; padding: 12px 16px 0; }
.watch-room__rail { min-width: 0; padding: 22px 16px 0; }
.watch-room__foot { min-width: 0; padding: 22px 16px 0; }

.watch-room__player {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  --media-object-fit: contain;
}

/* A film's screen: the shared video player fills a 16:9 box, sized like the live player. */
.watch-room__screen { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* The room's toolbar owns full screen (it keeps chat). Mux Player's own button would fullscreen the
   video alone, so it is hidden for every player in the room. Except where the room cannot go full
   screen at all (iPhone Safari has no element full screen): the watch-room controller marks the
   room is-native-fullscreen there, and Mux Player's button, the phone's native player, is the way in. */
.watch-room:not(.is-native-fullscreen) mux-player { --fullscreen-button: none; }

.watch-room__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--shelf-ink);
  color: #fff;
  border-top: 2px solid rgba(255, 255, 255, 0.12);
}

.watch-room__spacer { flex: 1; }

.watch-room__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  font-family: var(--shelf-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.watch-room__btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.watch-room__btn:focus-visible { outline: 2px solid var(--shelf-gold); outline-offset: 1px; }
.watch-room__btn[aria-pressed="true"] { color: var(--shelf-gold); }
.watch-room__btn svg { width: 16px; height: 16px; }
.watch-room__btn[hidden] { display: none; }

/* ---------- full screen, any width: only the stage and chat show ---------- */
.watch-room:fullscreen,
.watch-room.is-fullscreen { width: 100%; height: 100%; background: #000; }
.watch-room:fullscreen .watch-room__main,
.watch-room.is-fullscreen .watch-room__main,
.watch-room:fullscreen .watch-room__foot,
.watch-room.is-fullscreen .watch-room__foot,
.watch-room:fullscreen .watch-room__rail,
.watch-room.is-fullscreen .watch-room__rail { display: none; }
.watch-room:fullscreen .watch-room__stage,
.watch-room.is-fullscreen .watch-room__stage { position: static; border: 0; box-shadow: none; }
.watch-room:fullscreen .watch-room__chat,
.watch-room.is-fullscreen .watch-room__chat { flex: 1; min-height: 0; height: auto; margin: 0; box-shadow: none; border-width: 2px 0 0; }

/* ---------- under the stage: title, filmmaker, reactions, description ---------- */
.watch-title { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.watch-meta {
  margin: 6px 0 0;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted);
}
.watch-host { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.watch-host__who { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.watch-host__who:hover .watch-host__name { color: var(--shelf-gold-hover); }
.watch-host__name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-host__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.watch-host__tools .support-btn { display: inline-flex; align-items: center; gap: 6px; }

/* One row of reactions that scrolls sideways rather than wrapping. */
.watch-actions {
  display: flex; align-items: center; gap: 8px;
  margin: 12px -16px 0; padding: 2px 16px 6px; /* bleeds to the phone's edges so the next chip peeks */
  overflow-x: auto; scrollbar-width: none;
}
.watch-actions::-webkit-scrollbar { display: none; }
.watch-actions > *, .watch-actions form { flex: none; }
.watch-actions .retro-chip { white-space: nowrap; }

.watch-rsvp, .watch-prompt { margin-top: 14px; font-size: 14px; }

.watch-description {
  margin-top: 14px;
  border: 2px solid var(--shelf-ink);
  box-shadow: 3px 3px 0 var(--shelf-ink);
  background: var(--shelf-window);
  padding: 12px 14px;
  font-size: 14px; line-height: 1.5;
}
.watch-description summary { cursor: pointer; list-style: none; }
.watch-description summary::-webkit-details-marker { display: none; }
.watch-description__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-muted);
}
.watch-description__meta strong { color: var(--shelf-ink); }
.watch-description__tag { color: var(--shelf-gold-hover); }
.watch-description__logline { margin: 8px 0 0; max-width: 65ch; }
.watch-description__toggle { display: inline-block; margin-top: 8px; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.watch-description[open] .watch-description__toggle--more, .watch-description:not([open]) .watch-description__toggle--less { display: none; }
.watch-description__more { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--shelf-rule); display: grid; gap: 14px; }
.watch-description__label {
  margin: 0; font-family: var(--shelf-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf-muted);
}

/* ---------- comments ---------- */
.watch-comments__body { padding: 16px; }

/* ---------- the Up next rail: full-width tiles on a phone, rows with the thumbnail left on a desktop ---------- */
.watch-rail__title {
  margin: 0 0 10px;
  font-family: var(--shelf-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--shelf-ink);
}

.watch-rail__list { display: flex; flex-direction: column; gap: 18px; }

.watch-row { display: flex; flex-direction: column; gap: 8px; color: var(--shelf-ink); text-decoration: none; }
.watch-row:hover .watch-row__title { color: var(--shelf-gold-hover); }
.watch-row__thumb {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--shelf-ink);
  box-shadow: 3px 3px 0 var(--shelf-ink);
  background: #2a2621;
  display: grid;
  place-items: center;
}
.watch-row__initial { font-size: 22px; font-weight: 700; color: rgba(255, 255, 255, 0.3); }
.watch-row__duration {
  position: absolute; right: 4px; bottom: 4px;
  background: var(--shelf-ink); color: #fff; padding: 1px 5px;
  font-family: var(--shelf-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}
.watch-row__title {
  margin: 0;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.watch-row__sub {
  margin: 2px 0 0;
  font-family: var(--shelf-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--shelf-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- from 1024px: the video-site grid (pairs with the controller's max-width: 1023px) ---------- */
@media (min-width: 1024px) {
  .watch-room-page__inner { padding: 22px 20px 60px; }
  .watch-room-page__notices { padding: 0; }
  .watch-room-page__notices > :first-child { margin-top: 0; }

  .watch-room {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 16px;
    align-items: start;
  }
  .watch-room.has-foot { grid-template-rows: auto auto auto; }

  .watch-room__stage {
    grid-column: 1; grid-row: 1;
    position: static; z-index: auto;
    border: 2.5px solid var(--shelf-ink);
    box-shadow: 4px 4px 0 var(--shelf-ink);
  }
  .watch-room [data-watch-room-target="theaterButton"] { display: inline-flex; }

  /* The chat cell takes the row height the stage sets; the inner box scrolls instead of growing the row. */
  .watch-room__chat { grid-column: 2; grid-row: 1; align-self: stretch; height: auto; min-height: 0; margin: 0; }

  .watch-room__main { grid-column: 1; grid-row: 2; padding: 0; }
  .watch-room__foot { grid-column: 1; grid-row: 3; padding: 0; }
  .watch-room__rail { grid-column: 2; grid-row: 2; padding: 0; }
  /* A foot (comments) adds a third row under the page content; the rail runs alongside it. */
  .watch-room.has-foot .watch-room__rail { grid-row: 2 / span 2; }
  /* No chat: the rail starts beside the stage, the way a video site's sidebar does. */
  .watch-room.is-chat-hidden .watch-room__rail { grid-row: 1 / span 2; }
  .watch-room.has-foot.is-chat-hidden .watch-room__rail { grid-row: 1 / span 3; }

  .watch-title { font-size: 22px; }
  .watch-actions { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

  /* Up next: rows, thumbnail left. */
  .watch-rail__list { gap: 12px; }
  .watch-row { flex-direction: row; gap: 10px; }
  .watch-row__thumb { width: 168px; box-shadow: 2px 2px 0 var(--shelf-ink); }

  /* Theater: the stage breaks out to the viewport edges across both columns, capped so the picture
     never pushes the controls off screen. Chat drops beside the page content, the rail beneath it. */
  .watch-room.is-theater .watch-room__stage {
    grid-column: 1 / -1;
    border-width: 2.5px 0;
    box-shadow: none;
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
  .watch-room.is-theater .watch-room__player,
  .watch-room.is-theater .watch-room__screen { max-height: 78vh; }
  .watch-room.is-theater .watch-room__chat { grid-row: 2; align-self: start; height: 520px; }
  .watch-room.is-theater .watch-room__main { grid-row: 2; }
  .watch-room.is-theater .watch-room__foot { grid-row: 3; }
  .watch-room.is-theater .watch-room__rail { grid-row: 3; }
  .watch-room.is-theater.is-chat-hidden .watch-room__rail { grid-row: 2; }
  .watch-room.is-theater.has-foot.is-chat-hidden .watch-room__rail { grid-row: 2 / span 2; }

  /* Full screen: the grid fills the screen, stage and chat side by side. */
  .watch-room:fullscreen,
  .watch-room.is-fullscreen {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
  .watch-room:fullscreen.is-chat-hidden,
  .watch-room.is-fullscreen.is-chat-hidden { grid-template-columns: minmax(0, 1fr); }
  .watch-room:fullscreen .watch-room__stage,
  .watch-room.is-fullscreen .watch-room__stage { grid-column: 1; grid-row: 1; width: auto; max-width: none; left: auto; right: auto; margin: 0; min-height: 0; }
  .watch-room:fullscreen .watch-room__chat,
  .watch-room.is-fullscreen .watch-room__chat { grid-column: 2; grid-row: 1; align-self: stretch; border-width: 0 0 0 2px; }
  .watch-room:fullscreen .watch-room__player,
  .watch-room.is-fullscreen .watch-room__player,
  .watch-room:fullscreen .watch-room__screen,
  .watch-room.is-fullscreen .watch-room__screen { flex: 1; min-height: 0; max-height: none; aspect-ratio: auto; height: auto; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


/* Trix Editor Styles */
.trix-content {
  @apply prose prose-sm max-w-none;
}

/* Image Grid Styles */
.trix-image-grid {
  @apply grid grid-cols-2 gap-2 mb-4;
}

.trix-image-grid figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
}

.trix-image-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.trix-image-grid .image-count-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  cursor: pointer;
}

.trix-image-grid .image-count-overlay span {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Hide other attachments in the content */
.trix-content .attachment-hidden {
  display: none;
}

/* Existing Trix styles */
.trix-content .attachment {
  display: inline-block;
}

.trix-content .attachment__caption,
.trix-content .attachment__name,
.trix-content .attachment__size,
.trix-content .attachment__metadata,
.trix-content .attachment__toolbar {
  display: none;
}

.trix-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

@media (hover: hover) {
  .trix-content img:hover {
    opacity: 0.9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

.trix-content .attachment__preview {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Trix Editor Gallery Styles */
.trix-content .attachment--preview {
  margin-bottom: 1rem;
}

/* Trix attachment styles */
.trix-content figure.attachment--preview {
  margin-bottom: 1rem;
  display: inline-block;
}

.trix-content figure.attachment--preview img {
  max-width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  cursor: pointer;
}

@media (hover: hover) {
  .trix-content figure.attachment--preview img:hover {
    opacity: 0.9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

.trix-content figure.attachment--preview figcaption {
  display: none;
}

/* Gallery Modal Styles */
.trix-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
}

.trix-gallery-modal img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
}

.gallery-modal img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

.gallery-modal .gallery-nav {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.gallery-modal .gallery-nav button {
  padding: 0.5rem;
  color: white;
  transition: color 0.2s;
}

@media (hover: hover) {
  .gallery-modal .gallery-nav button:hover {
    color: theme('colors.lavish.gold');
  }
}



.notification-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.mark-read-btn {
  font-size: 0.75rem;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (hover: hover) {
  .mark-read-btn:hover {
    color: var(--accent-color);
  }
}

.notification-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

.notification-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex !important;
  align-items: center;
  background-color: rgba(179, 155, 99, 0.05);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-content {
  flex: 1;
}

.notification-text {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.75rem;
  color: #666;
}

.notification-mark-read {
  margin-left: 0.5rem;
  color: #ccc;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .notification-mark-read:hover {
    color: var(--accent-color);
    background-color: rgba(179, 155, 99, 0.1);
  }
}

.notification-footer {
  padding: 0.75rem 1rem;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
}

.view-all-btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--accent-color);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .view-all-btn:hover {
    background-color: #9a8652;
  }
}

.empty-notifications {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.loading-spinner {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.error-message {
  padding: 1rem;
  text-align: center;
  color: #ff4757;
  font-size: 0.9rem;
}

/* Portal styling */
.dropdown-portal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.dropdown-portal .notification-dropdown {
  pointer-events: auto;
}


/* Ensure notification items are visible */
.notification-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex !important;
  align-items: center;
  background-color: rgba(179, 155, 99, 0.05);
}

.notification-content {
  flex: 1;
}

.notification-text {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.75rem;
  color: #666;
}

/* Make sure empty-notifications is styled correctly */
.empty-notifications {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

/* Ensure notification list scrolls properly */
.notification-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

/* Notification styling */
.notification-section-title {
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem;
  padding: 0 1rem;
  color: #444;
}

.notification-item {
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  position: relative;
}

.notification-item.unread {
  background-color: rgba(179, 155, 99, 0.1);
}

.notification-item.read {
  background-color: rgba(255, 255, 255, 0.5);
}

.notification-content {
  flex: 1;
}

.notification-text {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.75rem;
  color: #777;
  margin-bottom: 0.5rem;
}

.notification-cta {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.notification-link, .cta-link {
  color: #B39B63;
  text-decoration: none;
  padding-right: 1rem;
  position: relative;
}

@media (hover: hover) {
  .notification-link:hover, .cta-link:hover {
    text-decoration: underline;
  }
}

.notification-link:not(:last-child)::after, .cta-link:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: 0.4rem;
  color: #ccc;
}

.notification-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.btn-action {
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
}

.btn-accept {
  background-color: #B39B63;
  color: white;
}

.btn-decline {
  background-color: white;
  color: #444;
}

.btn-view {
  background-color: transparent;
  color: #B39B63;
  border: 1.5px solid #B39B63;
  box-shadow: 1px 1px 0 #B39B63;
}

.btn-secondary {
  background-color: white;
  color: #444;
  padding: 0.5rem 1rem;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  margin-bottom: 1rem;
}

@media (hover: hover) {
  .btn-secondary:hover {
    background-color: #e1e1e1;
  }
}

.notification-status {
  font-size: 0.85rem;
  color: #777;
  font-style: italic;
  margin-top: 0.5rem;
}

.notification-mark-read {
  background: white;
  border: 1.5px solid #e8e0d0;
  padding: 0.4rem;
  cursor: pointer;
  color: #ccc;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
}

@media (hover: hover) {
  .notification-mark-read:hover {
    border-color: #B39B63;
    color: #B39B63;
  }
}

/* Style for the dropdown */
.notification-dropdown .notification-cta {
  margin-top: 0.5rem;
}

.notification-dropdown .cta-link {
  display: inline-block;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: #777;
}

/* Notification dropdown styles */
#notification-dropdown {
  display: none;
  position: fixed;
  top: 100px;
  right: 20px;
  width: 360px;
  background-color: white;
  border: 2px solid #B39B63;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100000;
}

#notification-dropdown.active {
  display: block !important;
}

/* Debug outline to make sure it's visible */
#notification-dropdown.active::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid red;
  z-index: -1;
  border-radius: 13px;
}

.lavish-highlight {
  background: #fdf6ed !important;
  border: 2px solid #B39B63 !important;
  box-shadow: 0 4px 16px 0 rgba(179,155,99,0.15), 0 0 0 4px #B39B6333 !important;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* Tom Select Custom Styles */
.ts-wrapper.single .ts-control {
  background-color: white;
  border-color: #D1D5DB;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ts-wrapper.focus .ts-control {
  border-color: #B39B63;
  box-shadow: 0 0 0 3px rgba(179, 155, 99, 0.5);
}

.ts-dropdown {
  margin-top: 0.25rem;
  background-color: white;
  border: 1px solid #D1D5DB;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ts-dropdown .option {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: #374151;
}

@media (hover: hover) {
  .ts-dropdown .option:hover {
    background-color: rgba(179, 155, 99, 0.1);
  }
}

.ts-dropdown .active {
  background-color: rgba(179, 155, 99, 0.1);
  color: #111827;
}

.ts-wrapper.multi .ts-control > div {
  background-color: rgba(179, 155, 99, 0.1);
  border: 1px solid rgba(179, 155, 99, 0.2);
  color: #374151;
  border-radius: 0.25rem;
  padding: 1px 5px;
}

.ts-wrapper.multi .ts-control > div.active {
  background-color: #B39B63;
  border-color: #B39B63;
  color: white;
}

.ts-wrapper.multi.focus .ts-control > div {
  border-color: #B39B63;
}

.ts-wrapper .ts-control > input {
  font-size: 0.875rem;
}

.ts-wrapper.multi .ts-control > div .remove {
  border: none;
  color: #6B7280;
  padding-left: 5px;
}

@media (hover: hover) {
  .ts-wrapper.multi .ts-control > div .remove:hover {
    color: #374151;
  }
}

/* Deep Dive Item Trix Editor Mobile Styles */
@media (max-width: 640px) {
  /* Scope all styles to deep dive items only */
  .deep-dive-item .trix-toolbar .trix-button-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
  }

  /* Only show essential buttons on mobile for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button-group {
    display: none;
  }

  /* Show only bold and italic buttons for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button-group[data-trix-button-group="text-tools"] {
    display: flex;
  }

  /* Hide all buttons except bold and italic for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button-group[data-trix-button-group="text-tools"] .trix-button:not([data-trix-attribute="bold"]):not([data-trix-attribute="italic"]) {
    display: none;
  }

  /* Make the editor take full width on mobile for deep dive items */
  .deep-dive-item .trix-editor {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
  }

  /* Adjust toolbar spacing for deep dive items */
  .deep-dive-item .trix-toolbar {
    padding: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
  }

  /* Make buttons more touch-friendly for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button {
    padding: 0.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
  }

  /* Style the editor content for deep dive items */
  .deep-dive-item .trix-content {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .deep-dive-item .trix-content p {
    margin-bottom: 0.75rem;
  }

  .deep-dive-item .trix-content ul,
  .deep-dive-item .trix-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
  }

  .deep-dive-item .trix-content li {
    margin-bottom: 0.25rem;
  }

  /* Make the editor container more compact on mobile */
  .deep-dive-item .deep-dive-trix-editor {
    margin-bottom: 0.5rem;
  }
}

/* Mobile Deep Dive Video & Embed Styles */
@media (max-width: 768px) {
  /* Ensure embedded videos are responsive on mobile */
  .dive-item-row iframe {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0.5rem;
  }
  
  /* YouTube embeds specifically */
  .dive-item-row iframe[src*="youtube.com"],
  .dive-item-row iframe[src*="youtu.be"] {
    aspect-ratio: 16/9;
    height: auto !important;
    min-height: 200px;
  }
  
  /* Vimeo embeds */
  .dive-item-row iframe[src*="vimeo.com"] {
    aspect-ratio: 16/9;
    height: auto !important;
    min-height: 200px;
  }
  
  /* Spotify embeds */
  .dive-item-row iframe[src*="spotify.com"] {
    height: 152px !important;
    border-radius: 0.75rem;
  }
  
  /* General iframe styling for mobile */
  .dive-item-row .spotify-embed iframe,
  .dive-item-row iframe {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
}

/* Desktop Deep Dive Video & Embed Styles - Make YouTube embeds responsive on desktop too */
.dive-item-row iframe[src*="youtube.com"],
.dive-item-row iframe[src*="youtu.be"] {
  width: 100% !important;
  max-width: 700px !important;
  aspect-ratio: 16/9;
  height: auto !important;
  min-height: 200px;
  border-radius: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Vimeo embeds on desktop */
.dive-item-row iframe[src*="vimeo.com"] {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16/9;
  height: auto !important;
  min-height: 200px;
  border-radius: 0.5rem;
}

/* Mobile Deep Dive - Remove horizontal padding */
@media (max-width: 768px) {
  .deep-dive-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .deep-dive-content .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* User Mention Link Styles */
.prose a[href*="/users/"] {
  color: #B39B63 !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .prose a[href*="/users/"]:hover {
    color: #A08C5C !important;
    text-decoration: underline;
  }
}

/* Image orientation fix for CDN-processed images */
.image-orientation-fix {
  image-orientation: from-image;
  -webkit-image-orientation: from-image;
  -moz-image-orientation: from-image;
  -ms-image-orientation: from-image;
}

/* Fallback for browsers that don't support image-orientation */
.image-orientation-fix {
  transform: rotate(0deg);
}

/* Additional fix for specific orientation issues */
.image-orientation-fix[style*="transform: rotate(90deg)"] {
  transform: rotate(90deg);
}

.image-orientation-fix[style*="transform: rotate(180deg)"] {
  transform: rotate(180deg);
}

.image-orientation-fix[style*="transform: rotate(270deg)"] {
  transform: rotate(270deg);
}

.image-orientation-fix[style*="transform: rotate(270deg)"] {
  width: 100vh;
  height: 100vw;
}

/* Mobile Header Auto-Hide Animation */
.mobile-header {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.mobile-header.header-hidden {
  transform: translateY(-100%);
}

/* Prevent transitions during page load */
.mobile-header.no-transition {
  transition: none !important;
}

/* Ensure smooth transitions only on mobile */
@media (max-width: 1023px) {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

/* Desktop: always show header, no transitions */
@media (min-width: 1024px) {
  .mobile-header {
    transform: translateY(0) !important;
    transition: none;
  }
}

/* Mobile full-bleed utility for single-column feeds */
@media (max-width: 639px) {
  /* Small mobile screens */
  .lm-mobile-bleed {
    width: 100%;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50%;
    margin-right: -50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  .lm-mobile-bleed-inner {
    max-width: 100%;  /* Full width on mobile */
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* Tablet screens */
  .lm-mobile-bleed {
    width: 100%;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50%;
    margin-right: -50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  .lm-mobile-bleed-inner {
    max-width: 42rem;  /* 672px for tablet */
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }
}
@media (min-width: 1024px) {
  .lm-mobile-bleed {
    width: auto;
    position: static;
    margin-left: 0;
    margin-right: 0;
  }
  .lm-mobile-bleed-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Full-bleed grid shell shared by the feed, now and read pages.
   Declared after the .lm-mobile-bleed resets above and with compound
   selectors, so it wins at every width regardless of load order. */
.full-bleed,
.full-bleed.lm-mobile-bleed {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: visible;
}
.feed-inner,
.feed-inner.lm-mobile-bleed-inner {
  max-width: 2400px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 640px) {
  .feed-inner,
  .feed-inner.lm-mobile-bleed-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
/* Read: the writers tile belongs to the grid, not the single-thread column */
#read-single-column [data-read-writers] { display: none; }
/* 100vw includes the scrollbar, so a full-bleed shell overshoots the viewport by a few pixels.
   Clip at the viewport (body's overflow propagates to it) so no page scrolls sideways. clip, not
   hidden: it creates no scroll container, so position: sticky keeps working. */
body { overflow-x: clip; }

/* AOL Chat Room Style for LavishMade */
.aol-chat-box {
  background: #f4f8fd;
  border: 2px solid #B39B63;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(179, 155, 99, 0.08);
  padding: 0.5rem 0.5rem 0 0.5rem;
  margin-bottom: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Message Container Scrollbar Styling */
[data-controller="messages"] [data-messages-target="container"],
[data-controller="room-chat"] [data-room-chat-target="messages"] {
  /* Make scrollbars always visible and more prominent on desktop */
  scrollbar-width: thin;
  scrollbar-color: rgba(179, 155, 99, 0.6) rgba(179, 155, 99, 0.1);
}

/* Webkit scrollbar styling for better visibility */
[data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar,
[data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar {
  width: 8px;
}

[data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar-track,
[data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar-track {
  background: rgba(179, 155, 99, 0.1);
  border-radius: 4px;
}

[data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar-thumb,
[data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar-thumb {
  background: rgba(179, 155, 99, 0.6);
  border-radius: 4px;
}

@media (hover: hover) {
  [data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar-thumb:hover,
  [data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar-thumb:hover {
    background: rgba(179, 155, 99, 0.8);
  }
}

/* Only apply visible scrollbars on desktop */
@media (min-width: 1024px) {
  [data-controller="messages"] [data-messages-target="container"],
  [data-controller="room-chat"] [data-room-chat-target="messages"] {
    scrollbar-width: auto;
  }
  
  [data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar,
  [data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar {
    width: 12px;
  }
}

.aol-chat-header {
  font-weight: bold;
  color: #3B82F6;
  background: #e6eaf3;
  border-bottom: 1px solid #B39B63;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: left;
  margin-bottom: 0.5rem;
}
.aol-message {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.1rem;
  background: transparent;
}
.aol-username {
  font-weight: bold;
  letter-spacing: 0.01em;
}
.aol-timestamp {
  font-family: monospace;
  color: #b0b0b0;
  font-size: 0.85em;
}
.aol-message-content {
  font-family: inherit;
  color: #222;
}
.aol-system-message {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.98rem;
  color: #2563eb;
  background: #e6eaf3;
  border-left: 4px solid #3B82F6;
  padding: 0.15rem 0.75rem;
  margin: 0.25rem 0;
  border-radius: 4px;
}
.aol-chat-input-bar {
  display: flex;
  align-items: center;
  background: #fffbe6;
  border-top: 1px solid #B39B63;
  padding: 0.5rem 0.75rem;
  border-radius: 0 0 10px 10px;
}
.aol-chat-input-bar textarea {
  flex: 1;
  border: 1px solid #B39B63;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
  font-family: Verdana, Arial, sans-serif;
  background: #f9f7f3;
  resize: none;
  margin-right: 0.5rem;
}
.aol-chat-input-bar button {
  background: #B39B63;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1.2rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
@media (hover: hover) {
  .aol-chat-input-bar button:hover {
    background: #9A8A5A;
  }
}

/* Moment Overlay System Styles */
.overlay-box { 
  position: absolute; 
  transform-origin: center center; 
}

.overlay-tappable { 
  pointer-events: auto; 
}

.overlay-pill { 
  border-radius: 12px; 
  padding: 6px 10px; 
  background: rgba(0,0,0,.5); 
  color: #fff; 
  text-decoration: none; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* Editor Styles */
.edit-box { 
  position: absolute; 
  border: 1px dashed rgba(255,255,255,.6); 
}

.handle { 
  position: absolute; 
  width: 14px; 
  height: 14px; 
  border-radius: 7px; 
  background: #fff; 
  border: 1px solid #000; 
}

.handle.br { 
  right: -7px; 
  bottom: -7px; 
  cursor: se-resize; 
}

.handle.rot { 
  top: -24px; 
  left: 50%; 
  transform: translateX(-50%); 
  cursor: grab; 
}

/* Deep Dive Preview Mode Styles */
.preview-hidden {
  display: none !important;
}

/* Remove extra padding in preview mode */
.dive-item-row.preview-mode > div:first-child {
  padding-left: 0 !important;
}

/* Preview mode button styles */
.preview-toggle-button {
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .preview-toggle-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(179, 155, 99, 0.2), 0 2px 4px -1px rgba(179, 155, 99, 0.1);
  }
}

.preview-toggle-button.active {
  background: linear-gradient(135deg, #B39B63, #A08C5C);
  color: white;
  border-color: #B39B63;
}

/* Smooth transitions for mode switching */
body.deep-dive-preview-mode .drag-handle,
body.deep-dive-preview-mode [data-deep-dive-items-target="stickyAddButton"],
body.deep-dive-preview-mode .dive-item-controls,
body.deep-dive-preview-mode .add-item-button,
body.deep-dive-preview-mode .remove-item {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Message content formatting - preserve line breaks without unwanted indentation */
.message-content p {
  margin: 0 !important;
  padding: 0 !important;
  display: inline;
}

.message-content > p:first-child {
  display: inline;
}

.message-content br {
  display: block;
  content: "";
  margin: 0;
}

/* Keep embeds as block elements */
.message-content div[class*="aspect-video"],
.message-content div[class*="relative"] {
  display: block !important;
  margin: 0.5rem 0 !important;
}

/* Markdown styling in messages */
.message-content strong,
.message-content b {
  font-weight: 700;
}

.message-content em,
.message-content i {
  font-style: italic;
}

.message-content code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
}

/* Code styling needs to adapt based on message bubble color */
.bg-\[\#B39B63\] .message-content code {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.95);
}

.message-content del {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Faster taps: interactive elements opt out of the browser's double-tap-to-zoom
   delay. touch-action: manipulation still allows scroll and pinch. */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  touch-action: manipulation;
}