/* portal.css — Phase 11a sub-task 15. Manga / comic landing grid
   shown when the active filter is `manga:all` / `comic:all`. The
   #portalView container is created on demand by manga/portal.js
   and inserted into `.content`. The body[data-portal-mode] flag
   hides the existing news content well so the portal grid takes
   over the main pane. */

#portalView{display:none;padding:8px 4px 32px}
body[data-portal-mode="manga"] #portalView,
body[data-portal-mode="comic"] #portalView{display:block}

body[data-portal-mode="manga"] .content > .region-panel:not(#portalHost),
body[data-portal-mode="comic"] .content > .region-panel:not(#portalHost){display:none !important}

.portal-header{font-size:24px;font-weight:600;margin:8px 12px 16px;font-family:'Alkatra',cursive;color:#1c2030;letter-spacing:.01em}
.portal-empty{padding:48px 16px;text-align:center;color:#5a6172;font-size:14px}
.portal-empty a{color:#2945d6;font-weight:600}

.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;padding:0 12px}
.portal-tile{background:#fff;border:1px solid #d9dce6;border-radius:10px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.portal-tile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(28,32,48,.10);border-color:#b8bcce}
.portal-tile-cover{aspect-ratio:2/3;background:#e3e6ee;position:relative;overflow:hidden}
.portal-tile-cover img{width:100%;height:100%;object-fit:cover;display:block}
.portal-tile-cover .portal-tile-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a93a6;font-size:32px}
.portal-tile-badge{position:absolute;right:6px;bottom:6px;background:rgba(28,32,48,.78);color:#fff;font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px;line-height:1}
/* "Resume reading" overlay — where the user left off. Full-width bottom
   rectangle, two centered lines, transparent (text sits on the cover; a soft
   shadow keeps it legible over any art). */
.portal-tile-progress{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 4px;min-height:42px;box-sizing:border-box;background:rgba(15,17,23,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fff;text-align:center;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.portal-tile-progress .ptp-l1{font-size:10px;font-weight:600;letter-spacing:.02em;opacity:.95}
.portal-tile-progress .ptp-l2{font-size:12px;font-weight:700}
/* NOTE: spacing is MARGIN, not padding — -webkit-line-clamp leaks an extra
   line when the clamped element has padding-bottom, which is why titles
   rendered 3 lines. Margin keeps the clamp accurate (matches the settings
   .manga-tile-title pattern, which has no padding and clamps correctly). */
.portal-tile-title{margin:8px 10px 12px;font-size:13px;line-height:1.3;color:#1c2030;font-weight:500;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* Pinned series (mirrors the sidebar pin order). The 📌 sits right before the
   title text — same placement as the sidebar nav row's pin glyph. */
.portal-tile-pinned .portal-tile-title::before{
  content:"📌";
  margin-right:4px;
  font-size:11px;
}

/* Genre filter row (desktop) — ported from the settings catalog filter,
   driven by per-series tags. Hidden on mobile (the .mobile-chrome chips cover
   that case). */
.portal-filter{ display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 14px; }
.portal-filter:empty{ display:none; }
.portal-filter-chip{
  padding:5px 12px; border-radius:16px; cursor:pointer; white-space:nowrap;
  background:#eef0f7; border:1px solid #d9dce6; color:#3a4154;
  font-size:12px; font-weight:600; font-family:'Inter',sans-serif;
}
.portal-filter-chip:hover{ border-color:#b8bcce; }
.portal-filter-chip.active{ background:#dbe1fa; border-color:#bccfee; color:#2945d6; }
/* Red-tier content-warning genres — mirrors .tag-filter-pill-red in the admin
   browse filters (admin-mangas-filters.css). Coloured border + text even when
   inactive so the warning reads at a glance; deeper red wash when selected. */
.portal-filter-chip.portal-filter-chip-red{ border-color:#e8a0a0; color:#7a1e16; }
.portal-filter-chip.portal-filter-chip-red:hover{ background:#fde8e8; border-color:#cc6060; }
.portal-filter-chip.portal-filter-chip-red.active{ background:#fde2e0; border-color:#cc1e1e; color:#7a1e16; }
.portal-filter-chip.portal-filter-chip-red.active:hover{ background:#fac8c4; border-color:#b41212; }

@media (max-width:800px){
  .portal-filter{ display:none; }   /* mobile uses the .mobile-chrome chips */
}
@media (max-width:600px){
  .portal-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
  /* Phase 127 follow-up — flush portal content to the .main gutter on mobile
     (no double inset). The 10px .main side padding is the only gutter. */
  #portalView{ padding-left:0; padding-right:0; }
  .portal-grid{ padding-left:0; padding-right:0; }
}

/* ── Phase 127 — "Currently reading" section (grid, below filters, above the
   main library grid). Reuses .portal-grid for an identical responsive grid.
   A "Not started yet" header (.portal-grid-head) labels the library grid
   below instead of a divider. ── */
.portal-reading{ margin:0 12px 16px; }
.portal-reading-head{
  display:flex; align-items:center; gap:8px; width:100%;
  background:transparent; border:none; cursor:pointer;
  font-size:13px; font-weight:700; color:#3a4154;
  font-family:'Inter',sans-serif; margin:0 0 12px; padding:8px 2px;
  text-transform:uppercase; letter-spacing:.04em;
}
.portal-reading-head:hover{ color:#1c2030; }
.portal-reading .pa-chevron{ font-size:12px; color:#8a93a6; transition:transform .2s ease; transform-origin:center; line-height:1; }
.portal-reading.collapsed .pa-chevron{ transform:rotate(-90deg); }
.portal-reading .pa-count{
  font-size:12px; font-weight:600; line-height:1.4; color:#5a6172;
  background:#eef0f7; border-radius:10px; padding:1px 9px;
}
.portal-reading-grid{ padding:0; }
.portal-reading.collapsed .portal-reading-grid{ display:none; }

/* Phase 128 — "Caught up" section (ongoing series read to the latest),
   between Currently reading and Not started. Same chrome as the others. */
.portal-caughtup{ margin:0 12px 16px; }
.portal-caughtup-head{
  display:flex; align-items:center; gap:8px; width:100%;
  background:transparent; border:none; cursor:pointer;
  font-size:13px; font-weight:700; color:#3a4154;
  font-family:'Inter',sans-serif; margin:0 0 12px; padding:8px 2px;
  text-transform:uppercase; letter-spacing:.04em;
}
.portal-caughtup-head:hover{ color:#1c2030; }
.portal-caughtup .pa-chevron{ font-size:12px; color:#8a93a6; transition:transform .2s ease; transform-origin:center; line-height:1; }
.portal-caughtup.collapsed .pa-chevron{ transform:rotate(-90deg); }
.portal-caughtup .pa-count{
  font-size:12px; font-weight:600; line-height:1.4; color:#5a6172;
  background:#eef0f7; border-radius:10px; padding:1px 9px;
}
.portal-caughtup-grid{ padding:0; }
.portal-caughtup.collapsed .portal-caughtup-grid{ display:none; }

/* Collapsible "Not started yet" section (the rest of the library, shown
   below Currently-reading). No divider — the header carries the separation. */
/* Uniform top:0 / bottom:16 rhythm — every section's bottom margin owns the
   gap to the next, so spacing stays even regardless of which are collapsed. */
.portal-notstarted{ margin:0 12px 16px; }
.portal-notstarted-head{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 2px; background:transparent; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#3a4154;
  text-transform:uppercase; letter-spacing:.04em;
}
.portal-notstarted-head:hover{ color:#1c2030; }
.portal-notstarted .pa-chevron{ font-size:12px; color:#8a93a6; transition:transform .2s ease; transform-origin:center; line-height:1; }
.portal-notstarted.collapsed .pa-chevron{ transform:rotate(-90deg); }
.portal-notstarted .pa-count{
  font-size:12px; font-weight:600; line-height:1.4; color:#5a6172;
  background:#eef0f7; border-radius:10px; padding:1px 9px;
}
.portal-notstarted .portal-grid{ margin-top:12px; padding:0; }
.portal-notstarted.collapsed .portal-grid{ display:none; }

@media (max-width:600px){
  /* Flush to the .main gutter on mobile (the 10px .main padding is the gutter). */
  .portal-reading{ margin-left:0; margin-right:0; margin-bottom:16px; }
  .portal-caughtup{ margin-left:0; margin-right:0; margin-bottom:16px; }
  .portal-notstarted{ margin-left:0; margin-right:0; }
  /* .portal-archives mobile-flush lives below its base rule (cascade order). */
}

/* ── Phase 123 — archive ── */
/* Archived series are hidden from the active sidebar list. */
.nav-item.nav-archived{ display:none; }

/* Bottom "Archives" section on the portal — collapsed by default. */
.portal-archives{ margin:0 12px 16px; }
.portal-archives-head{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 2px; background:transparent; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#3a4154;
  text-transform:uppercase; letter-spacing:.04em;   /* match the other section headers */
}
.portal-archives-head:hover{ color:#1c2030; }
.portal-archives .pa-chevron{ font-size:12px; color:#8a93a6; transition:transform .2s ease; transform-origin:center; line-height:1; }
.portal-archives.collapsed .pa-chevron{ transform:rotate(-90deg); }
.portal-archives .pa-count{
  font-size:12px; font-weight:600; line-height:1.4; color:#5a6172;
  background:#eef0f7; border-radius:10px; padding:1px 9px;
}
.portal-archives-grid{ margin-top:12px; }
.portal-archives.collapsed .portal-archives-grid{ display:none; }
/* Mobile flush — placed AFTER the base .portal-archives rule so it wins the
   cascade (the shared ≤600 block above is defined before that base rule). */
@media (max-width:600px){
  .portal-archives{ margin-left:0; margin-right:0; }
}

/* Reader topbar archive toggle — accent when the series is archived. */
.manga-reader .reader-archive-btn.is-archived{ color:#2945d6; }

/* ── Section headers (New releases / Currently reading / Caught up / Not
   started / Archives) — bumped for visibility: larger, darker title, an
   accent-blue chevron, a thin bottom rule, and a brand-tinted count badge.
   Placed last so it wins over the per-section definitions above. ── */
.portal-reading .pa-title,
.portal-caughtup .pa-title,
.portal-notstarted .pa-title,
.portal-archives .pa-title{
  color:#1c2030; letter-spacing:.1em; font-size:11px;
}
/* Outdent the section headers a touch to the left of the tile grid. */
.portal-reading-head,
.portal-caughtup-head,
.portal-notstarted-head,
.portal-archives-head{
  margin-left:-8px; padding-left:0;
}
/* Kicker = chevron + title, wrapped so an animated aurora wash sits behind
   just the label and fades out a bit after the text (count sits outside, in
   the clear). The aurora lives on ::before so the chevron + title stay crisp;
   a mask fades the whole wash to transparent on the right. */
.pa-kicker{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 26px 5px 9px; border-radius:6px;
}
.pa-kicker > *{ position:relative; z-index:1; }
.pa-kicker::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:
    radial-gradient(70% 180% at 12% 15%, rgba(70,120,245,.11), transparent 70%),
    radial-gradient(65% 180% at 48% 90%, rgba(170,80,225,.08), transparent 72%),
    radial-gradient(60% 180% at 82% 35%, rgba(40,195,205,.07), transparent 72%),
    radial-gradient(58% 180% at 30% 65%, rgba(235,90,155,.06), transparent 74%),
    linear-gradient(90deg, #f6f8fd, #fbfcfe);
  background-size:200% 200%, 210% 210%, 190% 190%, 220% 220%, 100% 100%;
  background-repeat:no-repeat;
  -webkit-mask:linear-gradient(90deg, #000 0%, #000 58%, transparent 100%);
          mask:linear-gradient(90deg, #000 0%, #000 58%, transparent 100%);
  animation:pa-kicker-aurora 16s ease-in-out infinite alternate;
}
@keyframes pa-kicker-aurora{
  0%   { background-position:0% 0%,   100% 50%, 50% 100%,  0% 50%, 0 0; }
  50%  { background-position:60% 40%, 30% 60%,  80% 20%,  40% 30%, 0 0; }
  100% { background-position:30% 80%, 70% 20%,  20% 60%,  60% 0%,  0 0; }
}
@media (prefers-reduced-motion: reduce){
  .pa-kicker::before{ animation:none; }
}
.portal-reading .pa-chevron,
.portal-caughtup .pa-chevron,
.portal-notstarted .pa-chevron,
.portal-archives .pa-chevron{
  font-size:13px; color:#2945d6;
}
.portal-reading .pa-count,
.portal-caughtup .pa-count,
.portal-notstarted .pa-count,
.portal-archives .pa-count{
  font-size:12px; background:#dbe1fa; color:#2945d6;
}