/* The Daily Delve — newsprint feed. Fully token-driven so it matches the active
   site palette in light AND dark (no hardcoded parchment that clashes with the
   theme around it). Card separation comes from the elevated --bg-card surface. */
.feed-host{--np-paper:var(--bg);--np-ink:var(--text);--np-rule:var(--border2);--np-card:var(--bg-card);}
.np-sheet{max-width:1080px;margin:0 auto;padding:1.2rem 1.3rem 3rem;color:var(--np-ink);
  background:var(--np-paper);}
.np-banner{display:flex;justify-content:space-between;font-family:var(--font-code);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--np-ink);padding-bottom:.3rem}
.np-banner .live{color:var(--warm)}
.np-mast{text-align:center;border-bottom:3px double var(--np-ink);padding:.5rem 0 .4rem;position:relative}
.np-ov{font-family:var(--font-code);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--text-muted)}
.np-mast h1{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(2rem,6vw,3rem);margin:.1rem 0 .15rem}
.np-dl{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;font-family:var(--font-code);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.np-dl i{width:3px;height:3px;border-radius:50%;background:var(--warm)}
.np-ednav{font:inherit;background:none;border:1px solid var(--np-ink);border-radius:5px;padding:.1rem .45rem;color:var(--np-ink);cursor:pointer}
.np-grid{display:grid;grid-template-columns:1fr 230px;gap:0;margin-top:.6rem}
.np-main{padding-right:1.1rem;border-right:1px solid var(--np-rule)}
.np-rail{padding-left:1rem}
.np-leader{border:1px solid var(--np-rule);padding:.75rem .9rem;margin:.6rem 0 1rem;position:relative;background:var(--np-card)}
.np-leader::before{content:"THE LEADER";position:absolute;top:-.55rem;left:.7rem;background:var(--np-paper);padding:0 .4rem;font-family:var(--font-code);font-size:.52rem;letter-spacing:.2em;color:var(--warm)}
.np-by{font-family:var(--font-code);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.25rem}
.np-leader p{font-family:var(--font-display);font-style:italic;font-size:1.15rem;line-height:1.6;margin:0}
.np-leader p::first-letter{font-size:2.4rem;line-height:.8;float:left;padding:.05rem .3rem 0 0;font-style:normal;color:var(--warm)}
.np-desk{margin:1rem 0}
.np-dh{display:flex;align-items:center;gap:.6rem;margin-bottom:.45rem}
.np-dh .nm{font-family:var(--font-code);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.np-dh .ln{flex:1;height:1px;background:var(--np-ink)}
.np-dh .ct{font-family:var(--font-code);font-size:.54rem;color:var(--text-muted)}
.np-db{display:grid;grid-template-columns:1.5fr 1fr;gap:1rem}
.np-art{height:90px;border:1px solid var(--np-rule);border-radius:6px;margin-bottom:.4rem;overflow:hidden}
.np-lead h2{font-family:var(--font-display);font-style:italic;font-size:1.35rem;line-height:1.2;margin:0 0 .2rem}
.np-sub{font-family:var(--font-code);font-size:.54rem;color:var(--text-muted);margin-bottom:.35rem}
.np-lead p{font-family:var(--font-heading);font-size:.98rem;line-height:1.6;color:var(--text-dim);text-align:justify;margin:0 0 .5rem}
.np-why{color:var(--np-ink)!important}
.np-side .np-item{padding:.45rem 0;border-bottom:1px solid var(--np-rule)}
.np-item h4{font-family:var(--font-heading);font-weight:600;font-size:.92rem;margin:0 0 .12rem}
.np-item .src{font-family:var(--font-code);font-size:.5rem;color:var(--text-muted)}
.np-item p{font-family:var(--font-heading);font-size:.86rem;color:var(--text-dim);line-height:1.6;margin:.2rem 0 .3rem}
.np-acts{display:flex;align-items:center;gap:.5rem;margin-top:.3rem}
.np-read{font-family:var(--font-code);font-size:.58rem;color:var(--text-dim);text-decoration:none}
.np-save{font:inherit;font-family:var(--font-heading);font-size:.7rem;background:none;border:1px solid var(--np-rule);border-radius:999px;padding:.15rem .5rem;color:var(--text-dim);cursor:pointer}
.np-save:hover{border-color:var(--warm);color:var(--warm)}
.chip.soon{font-family:var(--font-code);font-size:.52rem;color:var(--text-muted);border:1px solid var(--np-rule);border-radius:4px;padding:.08rem .3rem}
.np-box{margin-bottom:1rem}
.np-rh{font-family:var(--font-code);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--np-ink);padding-bottom:.2rem;margin-bottom:.35rem}
.np-drow{display:flex;justify-content:space-between;font-family:var(--font-heading);font-size:.76rem;color:var(--text-dim);padding:.2rem .15rem;cursor:pointer;border-radius:5px;transition:background .12s,color .12s}
.np-drow:hover{background:color-mix(in srgb,var(--np-ink) 6%,transparent)}
.np-drow.on{background:color-mix(in srgb,var(--warm) 14%,transparent);color:var(--warm)}
.np-drow .c{font-family:var(--font-code);font-size:.56rem;color:var(--text-muted)}
.np-cg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.np-cg .dow{font-family:var(--font-code);font-size:.5rem;text-align:center;color:var(--text-muted)}
.np-cg .cd{font-family:var(--font-code);font-size:.56rem;text-align:center;padding:.22rem 0;border-radius:4px;color:var(--text-muted)}
.np-cg .cd.has{color:var(--np-ink);background:color-mix(in srgb,var(--np-ink) 6%,transparent);cursor:pointer}
.np-cg .cd.on{background:var(--warm);color:#1a1612;font-weight:700}
.feed-gate{max-width:520px;margin:4rem auto;text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}
.feed-gate-mast{font-family:var(--font-display);font-style:italic;font-size:2.4rem;color:var(--text)}
.feed-gate p{color:var(--text-dim);max-width:40ch}
.feed-gate-btn{font-family:var(--font-heading);font-weight:600;background:var(--warm);color:#1a1612;border:0;border-radius:999px;padding:.6rem 1.4rem;cursor:pointer}
.feed-loading,.feed-empty{padding:4rem 1rem;text-align:center;color:var(--text-muted)}
/* Lead article image (real photo when image_url is set; hidden otherwise) */
.np-img{display:block;width:100%;height:120px;object-fit:cover;border-radius:6px;margin-bottom:.5rem;border:1px solid var(--np-rule);background:var(--np-card);}
/* Hide lesson search bar while the Feed view is active */
html.feed-active .disc-search{display:none!important;}
@media(max-width:760px){
  .np-grid{grid-template-columns:1fr}.np-main{border-right:0;padding-right:0}
  .np-rail{padding-left:0;margin-top:1.4rem;border-top:1px solid var(--np-rule);padding-top:1rem}
  .np-db{grid-template-columns:1fr}
}

/* ─── Mode toggle (Cards / Newspaper) ────────────────────────────────────── */
.nf-mode-toggle{
  display:inline-flex;
  align-items:center;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px;
  gap:0;
  flex-shrink:0;
}
.nf-mode-btn{
  font-family:var(--font-heading);
  font-size:.62rem;
  font-weight:500;
  border:none;
  border-radius:999px;
  padding:.22rem .6rem;
  cursor:pointer;
  background:none;
  color:var(--text-muted);
  transition:background .15s,color .15s;
  white-space:nowrap;
  line-height:1.3;
}
.nf-mode-btn.nf-mode-on{
  background:var(--warm);
  color:#1a1612;
}
.nf-mode-btn:not(.nf-mode-on):hover{
  background:color-mix(in srgb,var(--text) 8%,transparent);
  color:var(--text);
}
/* In masthead (paper view) center the toggle */
.np-dl .nf-mode-toggle{margin-left:.4rem;}

/* ─── Cards view wrapper ──────────────────────────────────────────────────── */

.nf-wrap{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--bg);
  color:var(--text);
}

/* Top app bar */
.nf-bar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 .75rem;
  height:52px;
  min-height:52px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  gap:.5rem;
}
@media(min-width:761px){
  .nf-bar{
    height:60px;
    min-height:60px;
    padding:0 1.5rem;
  }
}
.nf-bar-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-shrink:0;
}
.nf-menu,.nf-cal-btn{
  background:none;
  border:none;
  color:var(--text);
  font-size:1.1rem;
  padding:.4rem .5rem;
  cursor:pointer;
  border-radius:8px;
  transition:background .12s;
  line-height:1;
  flex-shrink:0;
}
.nf-menu:hover,.nf-cal-btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}

/* One-tap Sources button (cards app bar) — ghost pill, icon-only on phone */
.nf-src-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:500;
  padding:.3rem .55rem;
  border-radius:999px;
  cursor:pointer;
  line-height:1.2;
  flex-shrink:0;
  transition:background .12s,border-color .12s,color .12s;
}
.nf-src-btn:hover{
  background:color-mix(in srgb,var(--text) 8%,transparent);
  border-color:var(--border-hover);
}
.nf-src-ico{font-size:.85rem;line-height:1;}
.nf-src-lbl{display:none;}
@media(min-width:761px){
  .nf-src-lbl{display:inline;}
}
.nf-bar-center{
  flex:1;
  text-align:center;
  cursor:pointer;
  padding:.25rem 0;
  line-height:1.2;
  min-width:0;
}
.nf-bar-title{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.9rem;
  font-weight:400;
  color:var(--text);
}
@media(min-width:761px){
  .nf-bar-title{font-size:1.05rem;}
}
.nf-bar-date{
  display:block;
  font-family:var(--font-code);
  font-size:.52rem;
  letter-spacing:.1em;
  color:var(--text-muted);
  margin-top:.05rem;
}

/* Scrollable content area */
.nf-scroll{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:3rem;
}

/* Masthead strip */
.nf-masthead{
  text-align:center;
  padding:.8rem 1rem .7rem;
  border-bottom:1px solid var(--border);
}
.nf-mast-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(2rem,8vw,3rem);
  line-height:1.05;
  color:var(--text);
  margin-bottom:.3rem;
}
.nf-mast-sub{
  font-family:var(--font-code);
  font-size:.55rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* Leader block */
.nf-leader{
  margin:.75rem .75rem .5rem;
  padding:.7rem .85rem .6rem;
  border-left:4px solid var(--warm);
  background:color-mix(in srgb,var(--warm) 6%,var(--bg-card));
  border-radius:0 10px 10px 0;
  position:relative;
}
@media(min-width:761px){
  .nf-leader{
    max-width:1100px;
    margin:.75rem auto .5rem;
  }
}
.nf-leader-label{
  font-family:var(--font-code);
  font-size:.5rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--warm);
  margin-bottom:.4rem;
}
.nf-leader-text{
  font-family:var(--font-display);
  font-style:italic;
  font-size:.98rem;
  line-height:1.65;
  color:var(--text);
  /* Collapsed: clamp to 5 lines */
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:all .2s ease;
}
.nf-leader-expanded .nf-leader-text{
  display:block;
  -webkit-line-clamp:unset;
  overflow:visible;
}
.nf-leader-toggle{
  display:block;
  margin-top:.5rem;
  font-family:var(--font-code);
  font-size:.58rem;
  background:none;
  border:none;
  color:var(--warm);
  cursor:pointer;
  padding:0;
  letter-spacing:.05em;
}

/* Desk filter chips row */
.nf-chips{
  display:flex;
  gap:.4rem;
  padding:.6rem .75rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-bottom:1px solid var(--border);
}
@media(min-width:761px){
  .nf-chips{
    padding:.6rem 1.5rem;
    max-width:1100px;
    margin:0 auto;
    box-sizing:border-box;
  }
}
.nf-chips::-webkit-scrollbar{display:none}
.nf-chip{
  flex-shrink:0;
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:500;
  background:var(--bg2);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:999px;
  padding:.3rem .7rem;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:.3rem;
}
.nf-chip-on{
  background:var(--warm);
  color:#1a1612;
  border-color:var(--warm);
}
.nf-chip:active{transform:scale(.96)}
.nf-chip-count{
  font-family:var(--font-code);
  font-size:.6rem;
  opacity:.7;
}

/* Section header within stream */
.nf-sec{
  font-family:var(--font-code);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:.7rem 0 .3rem;
  /* spans full grid width */
  grid-column: 1 / -1;
}

/* Story stream — wraps the responsive grid */
.nf-stream{
  padding:.25rem .75rem;
}
@media(min-width:761px){
  .nf-stream{
    padding:.5rem 1.5rem;
    max-width:1100px;
    margin:0 auto;
    box-sizing:border-box;
  }
}

/* Responsive card grid */
.nf-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
}
@media(min-width:640px) and (max-width:999px){
  .nf-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(min-width:1000px){
  .nf-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
  }
}

/* Story card */
.nf-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s var(--ease-spring,ease),box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 3px color-mix(in srgb,var(--text) 5%,transparent);
  display:flex;
  flex-direction:column;
}
.nf-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px color-mix(in srgb,var(--text) 10%,transparent);
}
.nf-card:active{transform:scale(.98)}
[data-theme="light"] .nf-card{
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.nf-card-img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px 10px 0 0;
}
.nf-card-body{
  padding:.75rem .85rem .65rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.nf-desk-chip{
  display:inline-block;
  font-family:var(--font-code);
  font-size:.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--warm);
  background:color-mix(in srgb,var(--warm) 12%,transparent);
  border-radius:4px;
  padding:.12rem .35rem;
  margin-bottom:.4rem;
}
.nf-card-hl{
  font-family:var(--font-heading);
  font-size:1.05rem;
  font-weight:600;
  line-height:1.3;
  color:var(--text);
  margin-bottom:.3rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.nf-dek{
  font-family:var(--font-heading);
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-dim);
  margin-bottom:.4rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.nf-card-acts{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.2rem;
}
.nf-card-src{
  font-family:var(--font-code);
  font-size:.5rem;
  letter-spacing:.06em;
  color:var(--text-muted);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nf-save-btn{
  font-family:var(--font-heading);
  font-size:.68rem;
  background:none;
  border:1px solid var(--border2);
  border-radius:999px;
  padding:.18rem .5rem;
  color:var(--text-dim);
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .12s,color .12s;
}
.nf-save-btn:hover,.nf-save-btn:active{border-color:var(--warm);color:var(--warm)}
.nf-ext-link{
  font-family:var(--font-code);
  font-size:.7rem;
  color:var(--text-dim);
  text-decoration:none;
  flex-shrink:0;
  padding:.18rem .3rem;
  border-radius:6px;
  transition:color .12s,background .12s;
}
.nf-ext-link:hover{color:var(--warm)}

/* ─── Article Reader overlay ─────────────────────────────────────────────── */

/* Full-page takeover (mobile + desktop): slide up over everything, including the
   browse overlay (z:150 mobile / z:200 desktop). z:250 keeps it on top always. */
.nf-reader{
  position:fixed;
  inset:0;
  z-index:250;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  color:var(--text);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.nf-reader-open{transform:translateY(0)}
.nf-fade-out{opacity:0;transition:opacity .15s ease}
.nf-fade-in{opacity:1;transition:opacity .2s ease}

/* Desktop: centered modal */
.nf-reader-backdrop{
  position:fixed;
  inset:0;
  z-index:160;   /* dim the browse overlay behind the desktop modal reader */
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .22s ease;
}
.nf-reader-backdrop-open{opacity:1;}
[data-theme="light"] .nf-reader-backdrop{background:rgba(0,0,0,.35);}

.nf-reader.nf-reader-modal{
  position:fixed;
  inset:auto;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.96);
  opacity:0;
  width:min(760px,92vw);
  max-height:90vh;
  border-radius:16px;
  z-index:161;   /* above its backdrop (160) and the browse overlay (150) */
  box-shadow:0 24px 80px rgba(0,0,0,.4);
  overflow-y:auto;
}
.nf-reader.nf-reader-modal.nf-reader-open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}
@media(max-width:760px){
  /* Force mobile reader to be full-screen slide-up even when JS adds modal class */
  .nf-reader.nf-reader-modal{
    inset:0;
    top:unset;
    left:unset;
    transform:translateY(100%);
    opacity:1;
    width:100%;
    max-height:unset;
    border-radius:0;
    box-shadow:none;
  }
  .nf-reader.nf-reader-modal.nf-reader-open{
    transform:translateY(0);
  }
  .nf-reader-backdrop{display:none;}
}

.nf-reader-top{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem .75rem;
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  gap:.5rem;
}
.nf-reader-back{
  background:none;
  border:none;
  color:var(--text);
  font-size:1.2rem;
  padding:.3rem .5rem;
  cursor:pointer;
  border-radius:8px;
  flex-shrink:0;
  transition:background .12s;
}
.nf-reader-back:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.nf-reader-acts{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nf-reader-ext{
  font-family:var(--font-code);
  font-size:.62rem;
  color:var(--text-dim);
  text-decoration:none;
  padding:.2rem .4rem;
  border:1px solid var(--border2);
  border-radius:6px;
  transition:color .12s,border-color .12s;
}
.nf-reader-ext:hover{color:var(--warm);border-color:var(--warm)}

/* Desktop prev/next nav inside reader top bar */
.nf-reader-desk-nav{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-shrink:0;
}
.nf-reader-prev,.nf-reader-next{
  background:none;
  border:1px solid var(--border2);
  border-radius:6px;
  color:var(--text-dim);
  font-size:.9rem;
  padding:.15rem .45rem;
  cursor:pointer;
  transition:color .12s,border-color .12s,background .12s;
  line-height:1;
}
.nf-reader-prev:hover:not(:disabled),.nf-reader-next:hover:not(:disabled){
  color:var(--warm);
  border-color:var(--warm);
  background:color-mix(in srgb,var(--warm) 8%,transparent);
}
.nf-reader-prev:disabled,.nf-reader-next:disabled{
  opacity:.3;
  cursor:default;
}
.nf-reader-pos{
  font-family:var(--font-code);
  font-size:.55rem;
  color:var(--text-muted);
  white-space:nowrap;
}

.nf-reader-img{
  display:block;
  width:100%;
  height:40vh;
  object-fit:cover;
}
.nf-reader-body{
  padding:1rem .85rem 3rem;
  max-width:680px;
  margin:0 auto;
}
.nf-reader-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.65rem;
}
.nf-reader-src{
  font-family:var(--font-code);
  font-size:.52rem;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.nf-reader-time{
  font-family:var(--font-code);
  font-size:.52rem;
  color:var(--text-muted);
}
.nf-reader-hl{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.3rem,5vw,1.7rem);
  font-weight:400;
  line-height:1.25;
  color:var(--text);
  margin:.25rem 0 .85rem;
}
.nf-reader-summary{
  font-family:var(--font-heading);
  font-size:.95rem;
  line-height:1.75;
  color:var(--text-dim);
  margin-bottom:1rem;
}
.nf-reader-why{
  font-family:var(--font-heading);
  font-size:.9rem;
  line-height:1.7;
  color:var(--text);
  padding:.65rem .8rem;
  border-left:3px solid var(--warm);
  background:color-mix(in srgb,var(--warm) 6%,var(--bg2));
  border-radius:0 8px 8px 0;
  margin-bottom:1.25rem;
}
.nf-reader-nav-hint{
  font-family:var(--font-code);
  font-size:.58rem;
  letter-spacing:.1em;
  color:var(--text-muted);
  text-align:center;
  padding-top:1.5rem;
  opacity:.7;
}

/* ─── Bottom sheets (options + editions) ─────────────────────────────────── */

.nf-scrim{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .22s ease;
}
.nf-scrim-visible{opacity:1}

.nf-sheet{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:91;
  background:var(--bg2);
  border-radius:18px 18px 0 0;
  padding:0 0 1.5rem;
  max-height:78vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.nf-sheet-open{transform:translateY(0)}

.nf-sheet-handle{
  width:36px;
  height:4px;
  background:var(--border2);
  border-radius:999px;
  margin:.7rem auto .2rem;
}
.nf-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 1.1rem .6rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.25rem;
}
.nf-sheet-title{
  font-family:var(--font-heading);
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
}
.nf-sheet-close{
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:.9rem;
  cursor:pointer;
  padding:.25rem .4rem;
  border-radius:6px;
  transition:background .12s,color .12s;
}
.nf-sheet-close:hover{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}

.nf-sheet-section{
  padding:.75rem 1.1rem .5rem;
  border-bottom:1px solid var(--border);
}
.nf-sheet-section:last-child{border-bottom:none}
.nf-sheet-label{
  font-family:var(--font-code);
  font-size:.52rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:.5rem;
}
.nf-sheet-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  font-family:var(--font-heading);
  font-size:.84rem;
  color:var(--text-dim);
  background:none;
  border:none;
  text-align:left;
  padding:.45rem .3rem;
  border-radius:8px;
  cursor:pointer;
  transition:background .12s,color .12s;
}
.nf-sheet-row:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.nf-sheet-row-on{color:var(--warm);background:color-mix(in srgb,var(--warm) 10%,transparent)}
.nf-sheet-count{
  font-family:var(--font-code);
  font-size:.56rem;
  color:var(--text-muted);
}

/* Calendar in sheet — reuse .np-cg tokens */
.nf-sheet-section .np-cg{
  margin-top:.35rem;
}

/* ─── Audio buttons (.nf-audio-btn / .np-audio-btn) ──────────────────────── */

/* Shared base — used on both desktop (.np-audio-btn) and mobile (.nf-audio-btn) */
.nf-audio-btn,.np-audio-btn{
  font-family:var(--font-code);
  font-size:.58rem;
  letter-spacing:.04em;
  background:none;
  border:1px solid var(--border2);
  border-radius:999px;
  padding:.18rem .6rem;
  color:var(--text-dim);
  cursor:pointer;
  flex-shrink:0;
  transition:background .14s,color .14s,border-color .14s;
  line-height:1.4;
}
.nf-audio-btn:hover,.np-audio-btn:hover{
  border-color:var(--warm);
  color:var(--warm);
  background:color-mix(in srgb,var(--warm) 8%,transparent);
}
/* Active / playing state */
.nf-audio-btn.nf-audio-playing,.np-audio-btn.nf-audio-playing{
  background:var(--warm);
  color:#1a1612;
  border-color:var(--warm);
}
/* Lesson variant — slight teal tint when idle */
.nf-audio-lesson{
  border-color:color-mix(in srgb,var(--teal) 40%,var(--border2));
  color:var(--teal);
}
.nf-audio-lesson:hover{
  border-color:var(--teal);
  color:var(--teal);
  background:color-mix(in srgb,var(--teal) 8%,transparent);
}
.nf-audio-lesson.nf-audio-playing{
  background:var(--teal);
  color:#1a1612;
  border-color:var(--teal);
}

/* Compact mini play button (card acts row) */
.nf-audio-mini{
  font-size:.68rem;
  padding:.18rem .45rem;
  line-height:1;
}

/* Audio bar in article reader */
.nf-audio-bar{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
  margin:.5rem 0 .9rem;
  padding:.55rem .7rem;
  background:color-mix(in srgb,var(--warm) 6%,var(--bg2));
  border:1px solid color-mix(in srgb,var(--warm) 25%,var(--border));
  border-radius:10px;
}
.nf-audio-bar-btn{
  font-size:.62rem;
  padding:.22rem .75rem;
}

/* Desktop: audio bar buttons inside .np-acts */
.np-audio-btn{
  font-size:.58rem;
}

/* ─── Desktop source/topic tappables ─────────────────────────────────────── */
.np-src-link{
  cursor:pointer;
  transition:color .12s;
}
.np-src-link:hover{color:var(--warm);}

.np-topics{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin:.45rem 0 .25rem;
}
.np-topic-chip{
  font-family:var(--font-code);
  font-size:.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--border2);
  border-radius:4px;
  padding:.1rem .35rem;
  color:var(--text-muted);
  transition:color .12s,border-color .12s,background .12s;
}
.np-topic-link{
  cursor:pointer;
}
.np-topic-link:hover{
  color:var(--teal);
  border-color:var(--teal);
  background:color-mix(in srgb,var(--teal) 8%,transparent);
}

/* ─── Desktop Browse Panel ────────────────────────────────────────────────── */
.np-browse-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:200;
  width:clamp(320px,36vw,480px);
  background:var(--bg2);
  border-left:1px solid var(--border2);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,1,.36,1);
  box-shadow:-4px 0 32px color-mix(in srgb,var(--text) 8%,transparent);
}
.np-browse-panel.np-browse-open{transform:translateX(0);}

.np-browse-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1.1rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.np-browse-title{
  font-family:var(--font-heading);
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
}
.np-browse-title em{
  font-style:normal;
  color:var(--warm);
}
.np-browse-close{
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:.9rem;
  cursor:pointer;
  padding:.25rem .4rem;
  border-radius:6px;
  transition:background .12s,color .12s;
}
.np-browse-close:hover{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);}

.np-browse-body{
  flex:1;
  overflow-y:auto;
  padding:.5rem 0 2rem;
}
.np-browse-loading,.np-browse-empty{
  padding:2rem 1.1rem;
  text-align:center;
  font-family:var(--font-heading);
  font-size:.85rem;
  color:var(--text-muted);
}
.np-browse-empty em{font-style:italic;color:var(--text-dim);}

.np-browse-row{
  padding:.7rem 1.1rem;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.np-browse-row:last-child{border-bottom:none;}
.np-browse-row:hover{background:color-mix(in srgb,var(--text) 3%,transparent);}

.np-browse-row-meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.25rem;
}
.np-browse-src{
  font-family:var(--font-code);
  font-size:.5rem;
  letter-spacing:.08em;
  color:var(--warm);
  text-transform:uppercase;
}
.np-browse-date{
  font-family:var(--font-code);
  font-size:.5rem;
  color:var(--text-muted);
}
.np-browse-title-link{
  display:block;
  font-family:var(--font-heading);
  font-size:.88rem;
  font-weight:600;
  line-height:1.35;
  color:var(--text);
  text-decoration:none;
  margin-bottom:.2rem;
  transition:color .12s;
}
a.np-browse-title-link:hover{color:var(--warm);}
.np-browse-snippet{
  font-family:var(--font-heading);
  font-size:.78rem;
  line-height:1.55;
  color:var(--text-dim);
  margin:0;
}

/* ─── Browse feed grid (unified overlay — uses plain responsive .nf-grid) ─── */
/* Padding wrapper around the .nf-grid inside the browse overlay feed screen */
.nf-browse-feed-grid {
  padding: .5rem .75rem 2rem;
}
@media(min-width:761px){
  .nf-browse-feed-grid {
    padding: .75rem 1.25rem 2.5rem;
  }
}

/* ─── Mobile source/topic tappables ──────────────────────────────────────── */
.nf-card-src-tap{
  cursor:pointer;
  transition:color .12s;
}
.nf-card-src-tap:hover,.nf-card-src-tap:active{color:var(--warm);}

.nf-reader-src-tap{
  cursor:pointer;
  transition:color .12s;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-style:dotted;
}
.nf-reader-src-tap:hover,.nf-reader-src-tap:active{color:var(--warm);}

/* Reader topic chips */
.nf-reader-topics{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:1rem 0 .75rem;
}
.nf-topic-chip{
  font-family:var(--font-code);
  font-size:.52rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--border2);
  border-radius:4px;
  padding:.12rem .38rem;
  color:var(--text-muted);
  transition:color .12s,border-color .12s,background .12s;
}
.nf-topic-link{
  cursor:pointer;
}
.nf-topic-link:active,.nf-topic-link:hover{
  color:var(--teal);
  border-color:var(--teal);
  background:color-mix(in srgb,var(--teal) 10%,transparent);
}

/* ─── Mobile Browse Overlay (.nf-browse) ─────────────────────────────────── */
.nf-browse{
  position:fixed;
  inset:0;
  z-index:150;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.nf-browse-open{transform:translateX(0);}

.nf-browse-top{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .75rem;
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.nf-browse-back{
  background:none;
  border:none;
  color:var(--text);
  font-size:1.2rem;
  padding:.3rem .5rem;
  cursor:pointer;
  border-radius:8px;
  flex-shrink:0;
  transition:background .12s;
}
.nf-browse-back:hover{background:color-mix(in srgb,var(--text) 8%,transparent);}
.nf-browse-heading{
  font-family:var(--font-heading);
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nf-browse-heading em{
  font-style:normal;
  color:var(--warm);
}

.nf-browse-scroll{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0;
}
.nf-browse-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.nf-browse-loading,.nf-browse-empty{
  padding:2.5rem 1rem;
  text-align:center;
  font-family:var(--font-heading);
  font-size:.88rem;
  color:var(--text-muted);
}
.nf-browse-empty em{font-style:italic;color:var(--text-dim);}

.nf-browse-item{
  padding:.75rem 0;
  border-bottom:1px solid var(--border);
}
.nf-browse-item:last-child{border-bottom:none;}

.nf-browse-item-meta{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.2rem;
}
.nf-browse-item-src{
  font-family:var(--font-code);
  font-size:.5rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--warm);
}
.nf-browse-item-date{
  font-family:var(--font-code);
  font-size:.5rem;
  color:var(--text-muted);
}
.nf-browse-item-title{
  display:block;
  font-family:var(--font-heading);
  font-size:.95rem;
  font-weight:600;
  line-height:1.35;
  color:var(--text);
  text-decoration:none;
  margin-bottom:.25rem;
}
a.nf-browse-item-title:active,a.nf-browse-item-title:hover{color:var(--warm);}
.nf-browse-item-snippet{
  font-family:var(--font-heading);
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-dim);
  margin:0;
}

/* ─── Sources Catalog Overlay ────────────────────────────────────────────── */
/* Reuses .nf-browse full-screen slide pattern; adds catalog-specific internals */

.nf-sources-catalog .nf-browse-scroll{
  padding:0;
}

/* Segmented [ Sources | Tasks ] toggle atop Screen A */
.nf-catalog-tabs{
  display:flex;
  gap:0;
  align-items:center;
  margin:.7rem auto;
  width:max-content;
  max-width:calc(100% - 2rem);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
}
.nf-catalog-tab{
  font-family:var(--font-heading);
  font-size:.78rem;
  font-weight:500;
  border:none;
  background:none;
  color:var(--text-muted);
  padding:.35rem 1.1rem;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,color .15s;
}
.nf-catalog-tab.nf-catalog-tab-on{
  background:var(--warm);
  color:#1a1612;
}
.nf-catalog-tab:not(.nf-catalog-tab-on):hover{
  background:color-mix(in srgb,var(--text) 8%,transparent);
  color:var(--text);
}

/* Tasks grid (Tasks tab) — domain chips */
.nf-task-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  padding:.25rem 1rem 3rem;
}
.nf-task-chip{
  font-family:var(--font-heading);
  font-size:.82rem;
  font-weight:500;
  color:var(--text);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.5rem .9rem;
  cursor:pointer;
  line-height:1.25;
  transition:background .12s,border-color .12s,color .12s;
}
.nf-task-chip:hover,.nf-task-chip:active{
  background:color-mix(in srgb,var(--warm) 14%,var(--bg2));
  border-color:var(--warm);
  color:var(--text);
}

.nf-src-sections{
  padding:.5rem 0 3rem;
}

/* Category section */
.nf-src-section{
  border-bottom:1px solid var(--border);
}
.nf-src-section:last-child{
  border-bottom:none;
}

/* Category header row (toggle button) */
.nf-src-cat-hdr{
  display:flex;
  align-items:center;
  width:100%;
  gap:.6rem;
  padding:.75rem 1rem;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  transition:background .12s;
}
.nf-src-cat-hdr:hover{
  background:color-mix(in srgb,var(--text) 4%,transparent);
}
.nf-src-cat-label{
  font-family:var(--font-code);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
  flex-shrink:0;
}
.nf-src-cat-meta{
  font-family:var(--font-code);
  font-size:.5rem;
  letter-spacing:.06em;
  color:var(--text-muted);
  flex:1;
}
.nf-src-cat-arrow{
  font-size:.75rem;
  color:var(--text-muted);
  flex-shrink:0;
  transition:transform .18s ease;
  display:inline-block;
}
.nf-src-section-open .nf-src-cat-arrow{
  transform:rotate(0deg); /* already shows ▾ in open state via JS text */
}

/* Collapsible rows container */
.nf-src-rows{
  display:none;
  flex-direction:column;
  padding-bottom:.35rem;
}
.nf-src-section-open .nf-src-rows{
  display:flex;
}

/* Individual source row */
.nf-src-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:.55rem 1rem .55rem 1.25rem;
  background:none;
  border:none;
  border-top:1px solid var(--border);
  text-align:left;
  cursor:pointer;
  gap:.75rem;
  transition:background .12s;
}
.nf-src-row:hover,.nf-src-row:active{
  background:color-mix(in srgb,var(--warm) 6%,transparent);
}
.nf-src-row-name{
  font-family:var(--font-heading);
  font-size:.88rem;
  font-weight:500;
  color:var(--text);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nf-src-row-meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-shrink:0;
}
.nf-src-row-count{
  font-family:var(--font-code);
  font-size:.5rem;
  color:var(--text-muted);
  white-space:nowrap;
}
.nf-src-row-chev{
  font-size:.75rem;
  color:var(--text-muted);
}

/* ─── Unified Browse Overlay (.nf-browse-overlay) ────────────────────────── */
/* Mobile: inherits .nf-browse full-screen slide-from-right exactly as-is.    */
/* Desktop: large centered modal (max 1100px for 3-col card grid).            */

/* Backdrop (desktop only — created in JS, hidden on mobile via display:none) */
.nf-browse-backdrop {
  position: fixed;
  inset: 0;
  z-index: 149; /* just below .nf-browse (z:150) */
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .22s ease;
}
.nf-browse-backdrop-open { opacity: 1; }
[data-theme="light"] .nf-browse-backdrop { background: rgba(0,0,0,.35); }
@media(max-width:760px){
  .nf-browse-backdrop { display: none; }
}

/* Close ✕ button (top-right, Screen A and B) */
.nf-browse-close-x {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .9rem;
  cursor: pointer;
  padding: .25rem .45rem;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background .12s, color .12s;
  margin-left: auto;
}
.nf-browse-close-x:hover { background: color-mix(in srgb,var(--text) 8%,transparent); color: var(--text); }

/* "‹ Sources" back button (Screen B header) */
.nf-browse-back-cat {
  background: none;
  border: none;
  color: var(--warm);
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  padding: .25rem .45rem .25rem .1rem;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color .12s, background .12s;
}
.nf-browse-back-cat:hover { background: color-mix(in srgb,var(--warm) 8%,transparent); }

@media(min-width:761px){
  .nf-browse-overlay {
    /* Override the full-screen inset from .nf-browse */
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-46%) scale(.97);
    opacity: 0;
    width: min(1100px, 94vw);
    max-height: 88vh;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,.4);
    z-index: 200;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  }
  .nf-browse-overlay.nf-browse-open {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
  }
  .nf-browse-overlay .nf-browse-scroll {
    max-height: calc(88vh - 52px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* On mobile the overlay uses the default .nf-browse slide-from-right */
@media(max-width:760px){
  .nf-browse-overlay {
    transform: translateX(100%);
    opacity: 1;
    border-radius: 0;
    box-shadow: none;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    max-height: unset;
  }
  /* CRITICAL: two-class selector so the open state beats the (later, one-class)
     .nf-browse-overlay base rule above — without this the overlay stays off-screen
     on phone (page appears frozen: body is overflow:hidden but nothing slides in). */
  .nf-browse-overlay.nf-browse-open {
    transform: translateX(0);
  }
}

/* "Sources" sheet row chevron indicator */
.nf-sheet-chev{
  font-size:.75rem;
  opacity:.7;
}

/* ─── Daily Brief — entry pill (cards + paper) ──────────────────────────── */

/* Cards view: brief area sits between leader and chips */
.nf-brief-area{
  display:flex;
  justify-content:center;
  padding:.6rem .75rem .2rem;
}
@media(min-width:761px){
  .nf-brief-area{
    padding:.7rem 1.5rem .3rem;
    max-width:1100px;
    margin:0 auto;
    box-sizing:border-box;
  }
}

/* Paper view: brief area sits below the date line in the masthead */
.np-brief-area{
  display:flex;
  justify-content:center;
  padding:.55rem 0 .1rem;
}

/* The pill button itself — shared across both views */
.nf-brief-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-heading);
  font-size:.82rem;
  font-weight:600;
  background:var(--warm);
  color:#1a1612;
  border:none;
  border-radius:999px;
  padding:.45rem 1.1rem;
  cursor:pointer;
  transition:background .15s,transform .12s,box-shadow .15s;
  box-shadow:0 2px 10px color-mix(in srgb,var(--warm) 35%,transparent);
  white-space:nowrap;
  line-height:1.3;
  letter-spacing:.01em;
}
.nf-brief-pill:hover{
  background:var(--warm2);
  transform:translateY(-1px);
  box-shadow:0 4px 16px color-mix(in srgb,var(--warm) 45%,transparent);
}
.nf-brief-pill:active{transform:scale(.97);}
[data-theme="light"] .nf-brief-pill{box-shadow:0 2px 8px color-mix(in srgb,var(--warm) 30%,rgba(0,0,0,.08));}

/* ─── Daily Brief — sticky mini-player bar ──────────────────────────────── */

.nf-brief-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:300;
  background:color-mix(in srgb,var(--bg2) 95%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid color-mix(in srgb,var(--warm) 30%,var(--border));
  box-shadow:0 -4px 24px color-mix(in srgb,var(--warm) 12%,transparent);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  /* Keep above sheets (z:91) and browse panels (z:200) */
}
.nf-brief-bar-open{transform:translateY(0);}

.nf-brief-inner{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:.2rem .75rem;
  padding:.55rem .85rem .5rem;
  max-width:1100px;
  margin:0 auto;
  box-sizing:border-box;
}
@media(min-width:761px){
  .nf-brief-inner{
    grid-template-columns:1fr auto auto;
    grid-template-rows:auto;
    gap:0 1rem;
    padding:.6rem 1.5rem;
    align-items:center;
  }
}

/* Info block: label + title + position */
.nf-brief-info{
  display:flex;
  align-items:baseline;
  gap:.45rem;
  min-width:0;
  overflow:hidden;
}
.nf-brief-label{
  font-family:var(--font-code);
  font-size:.48rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--warm);
  flex-shrink:0;
}
.nf-brief-title{
  font-family:var(--font-heading);
  font-size:.8rem;
  font-weight:500;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.nf-brief-pos{
  font-family:var(--font-code);
  font-size:.52rem;
  color:var(--text-muted);
  flex-shrink:0;
  white-space:nowrap;
}

/* Progress bar — spans full inner width on mobile, sits between info+ctrls on desktop */
.nf-brief-progress{
  height:2px;
  background:color-mix(in srgb,var(--warm) 20%,var(--border));
  border-radius:999px;
  overflow:hidden;
  grid-column:1/-1;
}
@media(min-width:761px){
  .nf-brief-progress{
    grid-column:unset;
    width:120px;
    flex-shrink:0;
    align-self:center;
    margin:0 .25rem;
  }
}
.nf-brief-fill{
  height:100%;
  background:var(--warm);
  border-radius:999px;
  transition:width .5s linear;
}

/* Control buttons row */
.nf-brief-ctrls{
  display:flex;
  align-items:center;
  gap:.2rem;
  flex-shrink:0;
}
.nf-brief-btn{
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:.9rem;
  padding:.3rem .4rem;
  cursor:pointer;
  border-radius:7px;
  line-height:1;
  transition:background .12s,color .12s;
}
.nf-brief-btn:hover:not(:disabled){
  background:color-mix(in srgb,var(--warm) 12%,transparent);
  color:var(--warm);
}
.nf-brief-btn:disabled{opacity:.3;cursor:default;}
.nf-brief-playpause{
  font-size:1.05rem;
  color:var(--warm);
  padding:.3rem .45rem;
}
.nf-brief-close{
  color:var(--text-muted);
  font-size:.75rem;
}
.nf-brief-close:hover:not(:disabled){
  background:color-mix(in srgb,var(--text) 8%,transparent);
  color:var(--text);
}