/* updates-rail.css — Phase 122. Subscribed "New chapters" rail shown at
   the top of the manga / comic portal view (mounted by manga/portal.js
   via window.updatesRail.mount). Matches the light portal aesthetic
   (portal.css): white poster cards, #2945d6 accent. */

.updates-rail{
  margin:18px 14px 6px;   /* side margin matches .manga-grid padding (14px) so
                             the rail aligns with the library poster grid */
  padding:0;              /* no internal side padding — header/posters sit at
                             the same gutter as the other portal sections */
  /* .content sets a serif body font; force Inter so the freshness/empty/count
     text doesn't inherit it. */
  font-family:'Inter', sans-serif;
}

/* Reader portal context: its grid (.portal-grid) insets 12px, not 14px,
   so align the rail's side margins to 12px there. */
#portalView .updates-rail{ margin-left:12px; margin-right:12px; margin-bottom:16px; }

.updates-rail-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
/* Title + count + freshness group — also the collapse toggle (a button).
   Inline on desktop; stacks (title row over datestamp) on mobile. */
.updates-rail-headline{
  display:flex; align-items:baseline; gap:8px; flex:0 0 auto;
  background:transparent; border:none; padding:0; margin-left:-8px; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
}
.updates-rail .pa-chevron{ font-size:13px; color:#2945d6; transition:transform .2s ease; transform-origin:center; line-height:1; align-self:center; }
.updates-rail.collapsed .pa-chevron{ transform:rotate(-90deg); }
/* Collapsed — hide the poster track + empty message; keep the header row. */
.updates-rail.collapsed .updates-rail-track,
.updates-rail.collapsed .updates-rail-empty{ display:none; }
.updates-rail-titlewrap{ display:inline-flex; align-items:center; gap:8px; }
.updates-rail-title{
  margin-left:4px;   /* extra breathing room between the chevron and the title */
  font-size:11px; font-weight:700; color:#1c2030;
  font-family:'Inter',sans-serif;
  text-transform:uppercase; letter-spacing:.1em;   /* editorial kicker tracking */
}
/* Series-with-new-chapters count badge (hidden when 0). Neutral grey pill,
   matching the Currently-reading / Not-started / Archives counts. */
.updates-rail-count{
  font-size:12px; font-weight:600; line-height:1.4;
  color:#2945d6; background:#dbe1fa; border-radius:10px; padding:1px 9px;
}
.updates-rail-count:empty{ display:none; }
/* Sits inline after the count. Shrinks + ellipsis so it never pushes/wraps
   the Get-updates button on narrow screens. */
.updates-rail-fresh{
  font-size:12px; color:#8a93a6;
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.updates-rail-note{
  font-size:12px; color:#2945d6; font-weight:600;
  margin-left:auto; text-align:right;
}
/* When a note is present it takes the right slot; otherwise the button
   pins right via margin-left:auto on the button itself. */
.updates-rail-note:empty{ margin-left:0; }
/* Match the app's standard .btn (admin-base.css) so it's consistent with
   Refresh all etc. — kept self-contained here since the reader page doesn't
   load admin-base.css. */
.updates-rail-btn{
  flex:0 0 auto;   /* sits right after the count; never shrinks */
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:6px; cursor:pointer; white-space:nowrap;
  /* Muted ghost button — secondary to the section header, not a loud CTA. */
  background:transparent; border:1px solid #d9dce6; color:#5a6172;
  font-size:12px; font-weight:600; font-family:'Inter',sans-serif;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
/* Refresh glyph — shown alongside the label on desktop; on mobile the label
   hides and the button collapses to icon-only. */
.updates-rail-btn-icon{ display:inline-block; font-size:14px; }
.updates-rail.is-busy .updates-rail-btn-icon{ animation:updates-rail-spin .8s linear infinite; }
@keyframes updates-rail-spin{ to{ transform:rotate(360deg); } }
.updates-rail-note:not(:empty) + .updates-rail-btn{ margin-left:10px; }
.updates-rail-btn:hover{ background:#f1f3f9; border-color:#b8bcce; color:#3a4154; }
.updates-rail-btn:disabled{ background:transparent; color:#aeb4c2; border-color:#e6e8f0; cursor:not-allowed; }

/* Horizontal scrolling poster track. */
.updates-rail-track{
  display:flex; gap:9px; overflow-x:auto; overflow-y:hidden;
  padding:2px 2px 12px; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.updates-rail-track::-webkit-scrollbar{ height:8px; }
.updates-rail-track::-webkit-scrollbar-thumb{ background:#cdd3e6; border-radius:4px; }
.updates-rail-track::-webkit-scrollbar-track{ background:transparent; }

.updates-poster{
  flex:0 0 auto; width:88px; scroll-snap-align:start;
  background:#fff; border:1px solid #d9dce6; border-radius:10px;
  overflow:hidden; cursor:pointer; padding:0; text-align:left;
  display:flex; flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease,opacity .2s ease;
}
.updates-poster:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(28,32,48,.12);
  border-color:#b8bcce;
}
.updates-poster.is-acking{ opacity:.6; pointer-events:none; }
.updates-poster.is-done{ opacity:0; transform:scale(.9); }

.updates-poster-cover{
  aspect-ratio:2/3; background:#e3e6ee; position:relative; overflow:hidden;
}
.updates-poster-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.updates-poster-ph{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#8a93a6; font-size:28px;
}
/* "+N" new-chapter count — big, centered over the cover, on a translucent
   blue disc (frosted) so the art still shows through. Text-shadow keeps it
   legible over the blur. */
.updates-poster-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 8px; box-sizing:border-box;
  background:rgba(41,69,214,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border-radius:50%;
  color:#fff; font-size:19px; font-weight:800; line-height:1; letter-spacing:-.02em;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
  pointer-events:none;
}
.updates-poster-title{
  margin:6px 7px 8px; font-size:11px; line-height:1.3;
  color:#1c2030; font-weight:500;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; overflow:hidden;
}

/* Empty / caught-up state: no copy shown (see updates-rail.js), so collapse
   the rail down to just its header row — hide the track AND the empty block,
   and drop the header's bottom margin so there's no dangling gap. */
.updates-rail-empty{ display:none; padding:8px 2px 14px; color:#5a6172; font-size:13px; }
.updates-rail.is-empty .updates-rail-track{ display:none; }
.updates-rail.is-empty .updates-rail-empty{ display:none; }
.updates-rail.is-empty .updates-rail-head{ margin-bottom:0; }

@media (max-width:600px){
  .updates-rail{ margin:14px 14px 4px; }
  /* Reader portal: rail flush to the .main gutter (no extra side inset). */
  #portalView .updates-rail{ margin-left:0; margin-right:0; margin-bottom:16px; }
  .updates-poster{ width:76px; }
  .updates-rail-note{ display:none; }
  /* Single row: [title (count)] [↻] Data from… — refresh collapses to an
     icon-only square right after the count; freshness truncates before it
     ever wraps; tighter gap to fit. */
  .updates-rail-head{ gap:8px; }
  .updates-rail-btn{ padding:7px; }
  .updates-rail-btn-label{ display:none; }
  .updates-rail-btn-icon{ display:inline-block; font-size:16px; }
}