/* briefing-sidebar.css — sidebar nav tree for the briefing page.
   Structure: top-level groups (All news, All mangas, All comics) wrap
   their region groups in a .nav-top-group; each region wraps its
   topics in a .nav-region-group. Both layers are independently
   collapsible. State persists in localStorage. */

/* Phase 36 follow-up — pin the Reader title + Show-read + Refresh-all
   row to the top of the sidebar so it stays visible while scrolling
   the nav. Mirrors the .sidebar-footer treatment: negative side
   margins extend the white background through the sidebar's 10px
   side padding; inner padding restores the original 14px content
   indent (10 sidebar + 4 inner) and adds 12px top + 10px bottom
   breathing room. No border-bottom — Maurice preferred a clean
   transition into the All-news row below. */
.sidebar-header{margin-left:-10px;margin-right:-10px;padding:12px 14px 10px;position:sticky;top:0;background:#fff;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px}
.sidebar .title{font-family:'Alkatra',cursive;font-size:28px;font-weight:600;color:#0f1117;margin-bottom:0;letter-spacing:.01em;line-height:1.1;text-align:left;flex:0 0 auto}
/* Desktop header row mirrors the mobile chrome: logo left, auth tile
   (avatar + stacked role pill + sign out) hugging the right. Name hidden —
   the avatar + ADMIN/READER pill + Sign out carry the identity. */
.sidebar #auth-mount{ width:auto; flex:0 0 auto; margin:0; }
.sidebar .auth-tile{ width:auto; }
.sidebar .auth-name{ display:none; }
.sidebar .auth-meta{ flex:0 0 auto; align-items:center; }
.sidebar .auth-name-row{ justify-content:center; }
.sidebar .auth-signout-btn{ align-self:center; }
/* Phase 36 follow-up — row layout so Show-read + Refresh-all-news sit
   side by side under the title. flex:1 splits the row evenly; the
   gap matches the previous vertical gap for visual continuity. */
.sidebar-actions{display:flex;flex-direction:row;gap:6px}
.sidebar-actions button{flex:1}

/* "Show read" is a low-traffic toggle — render it as a subtle ghost
   button so it doesn't compete visually with the primary blue
   "Refresh all news" sibling. aria-pressed="true" tints it lightly to
   indicate the on state. */
.show-read-btn{padding:5px 10px;background:transparent;border:1px solid #dde1ea;border-radius:6px;color:#5a6175;font-size:12px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif}
.show-read-btn:hover{background:#f3f4f8;color:#1a1d26}
.show-read-btn[aria-pressed="true"]{background:#eef0f7;border-color:#c8cee0;color:#1a1d26}

.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding-top:4px}

.nav-item{display:flex;align-items:center;gap:8px;padding:5px 8px;background:transparent;border:none;border-radius:6px;color:#1a1d26;font-size:14px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;text-align:left;width:100%}
.nav-item:hover{background:#eef0f7}
.nav-item.active{background:#2945d6;color:#fff}
.nav-item.active .nav-count{color:rgba(255,255,255,.75)}

.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:14px;flex-shrink:0}
.nav-icon .flag{width:18px;height:auto;display:block}
/* Kanji icon — matches admin's .tab-icon-kanji so the All-mangas / All-comics
   sidebar entries and the admin Mangas / Comics tabs share the same glyph
   and rendering. Hiragino Sans / Yu Gothic for predictable shape across
   macOS + Windows; the slight letter-spacing tweak prevents the kanji
   from feeling cramped against the label text. */
.nav-icon-kanji{font-family:'Hiragino Sans','Yu Gothic',sans-serif;font-weight:700;font-size:15px;line-height:1;letter-spacing:0}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-count{font-size:11px;font-weight:600;color:#8a93a6;background:transparent;padding:0 4px;flex-shrink:0;min-width:18px;text-align:right}
.nav-count:empty{display:none}
/* Highlight state: a background refresh just added new items to this
   section. Cleared the moment the user clicks into the matching filter. */
.nav-count.has-new{color:#2945d6;font-weight:700;background:#eef0f7;border-radius:10px;padding:2px 8px}
.nav-item.active .nav-count.has-new{color:#fff;background:rgba(255,255,255,.22)}

.nav-region{font-weight:600}
.nav-topic{padding-left:22px;font-size:13px;font-weight:500;color:#5a6172}
.nav-topic .nav-icon{width:16px;height:16px;font-size:12px}
.nav-region-group{display:flex;flex-direction:column;gap:1px;margin:3px 0}

/* Phase 11a follow-up — coloured backgrounds make the hierarchy
   readable: All-X buttons are light blue (visually tied to the
   primary action color), regions a softer blue-grey, topic items
   stay flat. Active state still wins. */
.nav-item.nav-all{background:#cfdcf4;border-radius:8px;font-weight:600}
.nav-item.nav-all:hover{background:#bccfee}
.nav-item.nav-all.active{background:#2945d6;color:#fff}
.nav-item.nav-region{background:#f1f3f8;border-radius:6px}
.nav-item.nav-region:hover{background:#e3e7f1}
.nav-item.nav-region.active{background:#2945d6;color:#fff}

/* Cover thumb in the sidebar nav-item (replaces .nav-icon emoji). */
.nav-item .nav-cover{display:inline-block;width:18px;height:18px;border-radius:3px;overflow:hidden;flex-shrink:0;margin-right:8px;background:#d9dce6}
.nav-item .nav-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* Phase 30 — sidebar pin button (chaptered series only). Unpinned is
   grayscale + 55% opacity (the 📌 emoji is naturally red, so CSS
   `color` doesn't apply — `filter: grayscale` desaturates it to actual
   grey). Pinned is full colour, full opacity. Big visual jump between
   the two so a glance distinguishes them. */
.nav-item .nav-pin{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;background:transparent;border:none;border-radius:4px;cursor:pointer;font-size:13px;line-height:1;padding:0;margin:0;filter:grayscale(100%);opacity:.55;transition:opacity .12s,filter .12s,background .12s;user-select:none}
.nav-item .nav-pin:hover{opacity:.9;background:#e3e7f1}
.nav-item .nav-pin[aria-pressed="true"]{filter:none;opacity:1}
.nav-item .nav-pin[aria-pressed="true"]:hover{background:#fde7d2}
.nav-item.active .nav-pin:hover{background:rgba(255,255,255,.18)}
@media (prefers-reduced-motion: reduce){
  .nav-item .nav-pin{transition:none}
}

/* Granular sidebar refresh — ↻ tile per news topic + per news region.
   Replaces the topic-header `.mini-refresh` which only showed for the
   currently-active topic-section. Always visible per row regardless
   of filter mode. Manga/comic series + the top-level All-X rows skip
   it (their refresh path is the reader's open-section trigger or the
   global Refresh All button respectively). */
.nav-item .nav-refresh{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;margin-left:4px;background:transparent;border:1px solid transparent;border-radius:5px;color:#8a93a6;font-size:13px;line-height:1;cursor:pointer;padding:0;font-family:inherit;transition:color .12s,background .12s,border-color .12s,opacity .12s,transform .25s;user-select:none;opacity:.55}
.nav-item:hover .nav-refresh{opacity:.95}
.nav-item .nav-refresh:hover{color:#2945d6;background:#fff;border-color:#c8cee0;opacity:1}
.nav-item .nav-refresh.busy{color:#2945d6;animation:nav-refresh-spin .9s linear infinite}
.nav-item .nav-refresh.ok{color:#1c5232;background:#d8efe1;border-color:#9bc8ad;opacity:1}
.nav-item .nav-refresh.err{color:#7a1e16;background:#fde2e0;border-color:#f0a7a0;opacity:1}
.nav-item .nav-refresh[disabled]{cursor:wait}
.nav-item.active .nav-refresh{color:rgba(255,255,255,.7)}
.nav-item.active .nav-refresh:hover{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32)}

@keyframes nav-refresh-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .nav-item .nav-refresh{transition:none}
  .nav-item .nav-refresh.busy{animation:none}
}

/* Phase 30 — toast for pin failures. Lives bottom-right, fades in on
   .visible. Reuses the colour palette of /admin's .toast.error. */
.cowork-pin-toast{position:fixed;right:18px;bottom:18px;z-index:9999;padding:10px 14px;border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;background:#eef0f7;border:1px solid #d9dce6;color:#1a1d26;box-shadow:0 4px 12px rgba(0,0,0,.08);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s;max-width:320px}
.cowork-pin-toast.visible{opacity:1;transform:translateY(0)}
.cowork-pin-toast.error{background:#fde2e0;border-color:#f0a7a0;color:#7a1e16}
@media (prefers-reduced-motion: reduce){
  .cowork-pin-toast{transition:none}
}

/* Phase 11a follow-up — collapsible top-level groups (All-X). */
.nav-top-group{display:flex;flex-direction:column;gap:2px;margin:6px 0}
.nav-top-children{overflow:hidden;max-height:1500px;transition:max-height .25s ease,opacity .15s ease}
.nav-top-group.toplevel-collapsed .nav-top-children{max-height:0;opacity:0;pointer-events:none}
.nav-item.nav-all .toplevel-chevron{margin-right:4px}
.nav-item.nav-all .toplevel-chevron:hover{color:#2945d6;background:#fff}
.nav-item.nav-all.active .toplevel-chevron{color:rgba(255,255,255,.85)}
.nav-item.nav-all.active .toplevel-chevron:hover{color:#fff;background:rgba(255,255,255,.18)}
.nav-item.nav-all.toplevel-collapsed .toplevel-chevron{transform:rotate(-90deg)}

/* Phase 17 — collapsible sidebar region groups. Click the chevron;
   the whole region row stays clickable as the "filter to this
   region" button. State persists in localStorage.
   Phase 31 — glyph swapped from unicode `▾` to inline SVG. The
   container box stays 28×28; only the visible mark is now an SVG
   sized via width/height on the child instead of font-size on the
   container. currentColor on the SVG `stroke` inherits from
   .region-chevron's `color` so the colour-state CSS below still
   drives both expanded and collapsed visuals. */
.nav-region-group .region-chevron,.nav-item.nav-all .region-chevron{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:#3a4154;cursor:pointer;border-radius:6px;transition:transform .15s,color .15s,background .15s;flex:0 0 auto;margin-right:6px;user-select:none}
.nav-region-group .region-chevron svg,.nav-item.nav-all .region-chevron svg{width:18px;height:18px;display:block}
.nav-item.nav-all .region-chevron svg{width:20px;height:20px}
.nav-region-group .region-chevron:hover{color:#2945d6;background:#eef0f7}
.nav-region-group.collapsed .region-chevron{transform:rotate(-90deg)}
.nav-item.nav-region.active .region-chevron{color:rgba(255,255,255,.85)}
.nav-item.nav-region.active .region-chevron:hover{color:#fff;background:rgba(255,255,255,.18)}

.nav-region-group .nav-topics{overflow:hidden;max-height:800px;transition:max-height .25s ease,opacity .15s ease}
.nav-region-group.collapsed .nav-topics{max-height:0;opacity:0;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .nav-top-children,
  .nav-region-group .region-chevron,
  .nav-region-group .nav-topics{transition:none}
}

/* Admin link at the bottom of the sidebar (Phase 9).
   Phase 36 follow-up — pin to the bottom of the sidebar so it stays
   visible when the nav overflows. margin-top:auto keeps it docked at
   the end of the flex flow for short content; position:sticky bottom:0
   takes over once the sidebar starts scrolling. Negative side margins
   extend the white background edge-to-edge through the sidebar's 10px
   side padding (sidebar's bottom padding was zeroed in
   briefing-layout.css so the footer pins flush against the bottom).
   Phase 45 follow-up — flex row so the dev .sidebar-version chip can
   sit to the right of the Config link. */
.sidebar-footer{margin-top:auto;margin-left:-10px;margin-right:-10px;padding:10px 10px 12px;border-top:1px solid #eef0f5;position:sticky;bottom:0;background:#fff;z-index:1;display:flex;align-items:center;gap:8px}
.sidebar-footer .nav-admin{flex:1;min-width:0}
.sidebar-version{font-family:'Inter',sans-serif;font-size:10px;color:#8a93a6;font-weight:500;letter-spacing:.02em;flex:0 0 auto;cursor:default;user-select:all}
/* Phase 36 follow-up — relabelled "Admin" → "Config"; styled to match
   the .show-read-btn at the top of the sidebar (transparent bg, 1px
   #dde1ea border, 6px radius, 5px×10px padding, #5a6175 idle text,
   #1a1d26 + #f3f4f8 bg on hover). The two utility chrome elements
   now read as a matched pair. */
.nav-admin{padding:5px 10px;background:transparent;border:1px solid #dde1ea;border-radius:6px;color:#5a6175;font-size:12px;font-weight:500;text-decoration:none}
.nav-admin:hover{background:#f3f4f8;color:#1a1d26}
.nav-admin .nav-icon{font-size:17px;width:22px;height:22px}

/* Mobile sidebar toggle (rendered inside .main-header on narrow viewports). */
.sidebar-toggle{display:none;background:transparent;border:1px solid #d9dce6;border-radius:6px;padding:6px 10px;font-size:18px;color:#5a6172;cursor:pointer;font-family:'Inter',sans-serif;margin-bottom:8px}
.sidebar-toggle:hover{border-color:#2945d6;color:#2945d6}

/* ── Desktop sidebar aurora (Phase 50c follow-up) ──
   Aurora wash across the ENTIRE left panel, painted as the sidebar's own
   background so it's fixed to the panel box (background-attachment defaults to
   scroll → it stays put while the nav scrolls over it, rather than scrolling
   away). A top→bottom white fade layer (front-most) keeps the aurora in the
   upper ~⅔ and lets it dissolve to clean white before the footer, so it never
   fills the full height. The pinned white .sidebar-header masks the very top;
   the aurora glows through the nav area below it. Desktop-scoped (the sidebar
   is display:none on ≤800px, where .mobile-chrome carries its own aurora). */
@media (min-width: 801px){
  .sidebar{
    background-color:#fff;
    background-image:
      linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, #fff 86%),
      radial-gradient(58% 44% at 18% 14%, rgba(70,120,245,.28), transparent 70%),
      radial-gradient(54% 42% at 82% 22%, rgba(170,80,225,.22), transparent 70%),
      radial-gradient(50% 42% at 55% 34%, rgba(40,195,205,.18), transparent 72%),
      radial-gradient(50% 40% at 34% 48%, rgba(235,90,155,.17), transparent 72%);
    background-size:100% 100%, 170% 170%, 180% 180%, 165% 165%, 190% 190%;
    background-repeat:no-repeat;
    background-position:50% 0%, 0% 0%, 100% 0%, 50% 10%, 0% 20%;
    animation:sidebar-aurora-wave 18s ease-in-out infinite alternate;
  }
  /* The pinned header sits over the strongest part of the aurora — make it
     transparent (not solid white) so the aurora glows through the top of the
     panel behind the wordmark + auth row. */
  .sidebar-header{ background:transparent; }
  /* Thick translucent-white outline that follows the letterforms of the Reader
     wordmark (not a box). paint-order:stroke fill draws the stroke first then
     the dark fill on top, so the outline reads as a clean halo around each
     glyph; a soft white text-shadow adds the frosted glow. */
  .sidebar .title{
    -webkit-text-stroke:8px rgba(255,255,255,0.88);
    paint-order:stroke fill;
    text-shadow:0 0 10px rgba(255,255,255,0.55);
  }
}
/* The first (fade-to-white) layer stays fixed at 50% 0% across all stops; only
   the four pastel blobs drift. */
@keyframes sidebar-aurora-wave{
  0%   { background-position:50% 0%,   0% 0%,  100% 0%,  50% 10%,   0% 20%; }
  50%  { background-position:50% 0%,  60% 30%,  30% 20%, 80% 0%,   20% 40%; }
  100% { background-position:50% 0%,  30% 40%,  60% 10%,  0% 30%,  40% 0%; }
}
@media (prefers-reduced-motion: reduce){
  .sidebar{animation:none}
}