/* =====================================================================
   nousspace Feed (/feed/): video-first page of HackerTube's AI & Data videos,
   plus one page per video. Built on blog.css (tokens, themes, header, toast).
   Page: tools/feed.py. Behaviour: assets/feed.js; appearance settings: assets/blog.js.

   Reader settings on <html> (saved in this browser):
     data-theme  paper | sepia | night  ("system" resolves to one of these)
     data-face   serif | sans
     data-size   0..4  (scales all Feed text through --vs)
     data-density comfortable | compact
   ===================================================================== */

body.is-feed { --vs: 1; }
[data-size="0"] body.is-feed { --vs: .88; }
[data-size="1"] body.is-feed { --vs: .94; }
[data-size="3"] body.is-feed { --vs: 1.1; }
[data-size="4"] body.is-feed { --vs: 1.22; }
[data-face="sans"] body.is-feed { --serif: var(--sans); }
body.is-feed { transition: background-color .35s ease, color .35s ease, padding .3s var(--ease); }

/* SVG icons: outlines by default, solid where marked. */
.is-feed svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.is-feed svg .fill { fill: currentColor; stroke: none; }

.vf { container: feed / inline-size; width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; padding-bottom: clamp(2.5rem, 6vw, 4rem); }

/* Compact heading: the videos start right below it. */
.vf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; padding: clamp(1.1rem, 3vw, 1.6rem) 0 clamp(.9rem, 2.4vw, 1.3rem); }
.vf-title { margin: 0; font: 420 calc(clamp(26px, 3.2vw, 34px) * var(--vs))/1.05 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.025em; }
.vf-sub { margin: 0 0 .9rem; color: var(--ink-2); font: 400 calc(13.5px * var(--vs))/1.4 var(--sans); }
.vf-sub a { color: var(--ink-2); text-underline-offset: 3px; }

/* Grid: one column, then two and three as the space allows (the space, not the window,
   so it reflows when the notes panel is open). */
.vf-grid { --card-gap: 2rem; display: grid; grid-template-columns: 1fr; gap: var(--card-gap) 1.5rem; margin: 0; padding: 0; list-style: none; }
@container feed (min-width: 620px) { .vf-grid { --card-gap: 2.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
@container feed (min-width: 980px) { .vf-grid { --card-gap: 2.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.75rem; } }


.v-card { scroll-margin-top: 76px; }
.v-card article { display: flex; flex-direction: column; height: 100%; }

/* Thumbnail / player */
.v-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-small); background: var(--bg-2); transition: box-shadow .3s ease; }
.v-thumb { position: absolute; inset: 0; display: block; color: #fff; }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.v-thumb:hover img { transform: scale(1.03); }
.v-thumb:focus-visible { outline-offset: -3px; outline-color: #fff; box-shadow: inset 0 0 0 5px var(--accent); }
.v-playicon { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(12, 12, 10, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translate(-50%, -50%); transition: background .2s, transform .3s var(--ease); }
.v-playicon svg { width: 26px; height: 26px; margin-left: 3px; }
.v-thumb:hover .v-playicon, .v-thumb:focus-visible .v-playicon { background: rgba(12, 12, 10, .82); transform: translate(-50%, -50%) scale(1.08); }
.v-dur { position: absolute; right: 8px; bottom: 8px; padding: .2em .5em; border-radius: 6px; background: rgba(12, 12, 10, .8); font: 600 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.v-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.is-playing .v-player { box-shadow: 0 0 0 2px var(--accent); }

/* Text */
.v-body { display: flex; flex-direction: column; flex: 1; padding-top: .9rem; }
.v-title { margin: 0 0 .35rem; font: 500 calc(clamp(18px, 1.5vw, 19.5px) * var(--vs))/1.28 var(--serif); font-variation-settings: "opsz" 24; letter-spacing: -.01em; text-wrap: balance; }
.v-title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
.v-title a:hover, .v-title a:focus-visible { background-size: 100% 1px; }
.v-meta { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 .75rem; color: var(--muted); font: 400 calc(13px * var(--vs))/1.45 var(--sans); }
.v-creator { color: var(--ink-2); font-weight: 600; }
.v-note { margin: 0 0 .7rem; color: var(--ink-2); font: 400 calc(15px * var(--vs))/1.5 var(--sans); }
.v-note-label { display: block; margin-bottom: .2rem; color: var(--accent); font: 400 calc(10.5px * var(--vs))/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.v-moment-label { margin: 0 0 .8rem; color: var(--ink-2); font: 400 calc(13.5px * var(--vs))/1.45 var(--sans); }
.v-moment-label .v-at { margin-right: .45em; }
.v-moment-src { color: var(--muted); }
.v-at { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.v-source { margin: .55rem 0 0; color: var(--muted); font: 400 calc(12px * var(--vs))/1.4 var(--sans); }
.v-source a { color: var(--ink-2); text-underline-offset: 3px; }

/* ---- Actions: two watching buttons (primary), then quiet tools ---- */
.v-actions { display: grid; gap: .55rem; margin-top: auto; padding-top: .2rem; }
.v-primary { display: flex; flex-wrap: wrap; gap: .5rem; }
.v-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .95rem 0 .8rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 500 calc(13.5px * var(--vs))/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .15s; }
.v-btn svg { width: 15px; height: 15px; flex: none; }
.v-btn:hover { background: var(--chip); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.v-btn:active, .v-tool:active { transform: scale(.97); }
.v-start { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.v-start:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); border-color: transparent; }
.v-moment { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.v-moment:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: transparent; }
.v-moment .v-at { color: inherit; }
.v-quiet { border-color: var(--line); }

.v-tools { display: flex; flex-wrap: wrap; gap: .1rem; margin-left: -.55rem; }
.v-tool { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .6rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 calc(13px * var(--vs))/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.v-tool svg { width: 17px; height: 17px; flex: none; }
.v-tool:hover, .v-tool[aria-expanded="true"] { background: var(--chip); color: var(--ink); }
.v-tool[aria-expanded="true"] { color: var(--accent); }
.v-tool-dot { position: absolute; top: 6px; left: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }

/* ---- Density: compact tightens the grid and keeps only the essentials ---- */
[data-density="compact"] .vf-grid { --card-gap: 1.5rem; column-gap: 1.1rem; }
@container feed (min-width: 560px) { [data-density="compact"] .vf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container feed (min-width: 820px) { [data-density="compact"] .vf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container feed (min-width: 1100px) { [data-density="compact"] .vf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
[data-density="compact"] .v-card .v-note-label,
[data-density="compact"] .v-card .v-moment-label,
[data-density="compact"] .v-card .v-source,
[data-density="compact"] .v-card .v-cat,
[data-density="compact"] .v-card .v-cat + .v-sep,
[data-density="compact"] .v-meta .v-sep:last-of-type { display: none; }
[data-density="compact"] .v-card .v-body { padding-top: .65rem; }
[data-density="compact"] .v-card .v-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .55rem; }
[data-density="compact"] .v-card .v-btn { min-height: 34px; padding: 0 .75rem 0 .65rem; }
[data-density="compact"] .v-card .v-tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-density="compact"] .v-card .v-tool { width: 34px; min-height: 34px; padding: 0; justify-content: center; }
[data-density="compact"] .v-card .v-tool-dot { left: 21px; top: 5px; }
[data-density="compact"] .v-actions { grid-template-columns: 1fr auto; align-items: center; }
[data-density="compact"] .v-tools { margin-left: 0; }
[data-density="compact"] .vp-note { padding: .8rem 1rem; }

/* Attribution and empty state */
.vf-credit { max-width: 46rem; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font: 400 calc(12.5px * var(--vs))/1.6 var(--sans); }
.vf-credit p { margin: 0 0 .5rem; }
.vf-credit a { color: var(--ink-2); text-underline-offset: 3px; }
.vf-empty { padding: 2rem; border-radius: var(--r-block); background: var(--bg-2); }
.vf-empty h2 { margin: 0 0 .5rem; font: 400 26px/1.2 var(--serif); }
.vf-empty p { max-width: 34rem; color: var(--ink-2); font: 400 15.5px/1.55 var(--sans); }

/* ---- Video page (/feed/<video>/) ---- */
.vp { width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.vp-pager { display: flex; align-items: center; gap: 1rem; min-height: 56px; font: 500 calc(14px * var(--vs)) var(--sans); }
.vp-pager a { display: inline-flex; align-items: center; gap: .2rem; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.vp-pager a:hover { color: var(--ink); }
.vp-pager svg { width: 18px; height: 18px; stroke-width: 1.8; }
.vp-count { color: var(--muted); font-size: .93em; font-variant-numeric: tabular-nums; }
.vp-nextlink { margin-left: auto; }
.vp { container: vpage / inline-size; }
.vp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@container vpage (min-width: 940px) { .vp-layout { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; } }
.vp-main .v-player { width: min(100%, 62svh * 16 / 9); border-radius: var(--r-block); }
.vp-resume { margin: .8rem 0 0; }
.vp-title { margin: 1.2rem 0 .5rem; font: 420 calc(clamp(25px, 3vw, 36px) * var(--vs))/1.15 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.02em; text-wrap: balance; }
.vp-main .v-meta { font-size: calc(14px * var(--vs)); margin-bottom: 1.1rem; }
.vp-note { max-width: 44rem; margin: 0 0 1rem; padding: 1rem 1.2rem; border-radius: var(--r-block); background: var(--bg-2); }
.vp-note p { margin: 0; color: var(--ink); font: 400 calc(18px * var(--vs))/1.55 var(--serif); }
.vp-main .v-moment-label { max-width: 44rem; }
.vp-main .v-actions { margin-top: .2rem; }
.vp-aside { align-self: start; }
.vp-list { display: grid; gap: .9rem; margin: .5rem 0 1rem; padding: 0; list-style: none; }
.vp-next { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .8rem; align-items: start; color: inherit; text-decoration: none; }
.vp-next-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--bg-2); color: #fff; }
.vp-next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vp-next-thumb .v-dur { right: 5px; bottom: 5px; font-size: 11px; }
.vp-next-text { display: grid; gap: .25rem; }
.vp-next-title { font: 500 calc(15px * var(--vs))/1.3 var(--serif); }
.vp-next:hover .vp-next-title { text-decoration: underline; text-underline-offset: 3px; }
.vp-next-by { color: var(--muted); font: 400 calc(12.5px * var(--vs))/1.3 var(--sans); }
.vp-all { margin: 0; font: 500 calc(13.5px * var(--vs)) var(--sans); }
.vp-all a { color: var(--ink-2); text-underline-offset: 3px; }

/* ---- Header tools (top right): Your notes + Appearance ---- */
.nav-tools { display: flex; align-items: center; gap: .5rem; }
.notes-cta { position: relative; }
.notes-cta svg { width: 17px; height: 17px; }
.notes-cta[aria-expanded="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.notes-cta .v-tool-dot { top: 7px; left: 22px; }

/* ---- Appearance control (top right) ---- */
.appear { position: relative; }
.appear-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; padding: 0 .9rem 0 .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 500 13.5px/1 var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.appear-btn:hover, .appear-btn[aria-expanded="true"] { background: var(--chip); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.appear-aa { font: 500 15px/1 var(--serif); letter-spacing: -.02em; }
.appear-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 300px; padding: 1rem 1rem .8rem;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg);
  /* Solid, not frosted: Chrome clips a blurred element nested in the blurred header to the header's box. */
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .35); transform-origin: top right; animation: pop-in .18s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.appear-group { margin: 0 0 .95rem; padding: 0; border: 0; }
.appear-group legend, .appear-legend { display: block; margin: 0 0 .45rem; padding: 0; color: var(--muted); font: 400 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: var(--chip); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 34px; padding: 0 .4rem; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 500 12.5px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); }
.seg-4 button { flex-direction: column; gap: .3rem; min-height: 54px; font-size: 11.5px; }
.sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.sw-paper { background: #FFF9F1; } .sw-sepia { background: #F3E9D6; } .sw-night { background: #121110; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.sw-system { background: linear-gradient(135deg, #FFF9F1 50%, #121110 50%); }
.face-serif { font-family: "Newsreader", Georgia, serif !important; font-size: 14px !important; }
.face-sans { font-family: "Schibsted Grotesk", system-ui, sans-serif !important; }
.size-row { display: flex; align-items: center; gap: .7rem; }
.size-a { color: var(--ink-2); font-family: "Newsreader", Georgia, serif; line-height: 1; }
.size-a-s { font-size: 13px; } .size-a-l { font-size: 21px; }
.size-row input { flex: 1; accent-color: var(--accent); height: 28px; }
.appear-foot { display: flex; align-items: center; justify-content: space-between; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--muted); font: 400 12px var(--sans); }
.appear-reset { min-height: 32px; padding: 0 .6rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 12.5px var(--sans); cursor: pointer; }
.appear-reset:hover { background: var(--chip); color: var(--ink); }
@media (max-width: 640px) {
  .appear-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .appear-btn { width: 40px; padding: 0; justify-content: center; }
  .nav-tools { gap: .35rem; }
  .appear-panel { position: fixed; top: 66px; right: 12px; left: 12px; width: auto; }
}

/* ---- Share menu ---- */
.share-pop { position: fixed; z-index: 70; width: 320px; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); box-shadow: 0 18px 50px -16px rgba(0, 0, 0, .35); animation: pop-in .18s var(--ease); }
.share-title { margin: 0 0 .7rem; font: 500 calc(16px * var(--vs))/1.3 var(--serif); }
.share-at { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; color: var(--ink-2); font: 400 13.5px var(--sans); cursor: pointer; }
.share-at[hidden] { display: none; }
.share-at input { width: 16px; height: 16px; accent-color: var(--accent); }
.share-at span { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.share-url { width: 100%; min-height: 38px; margin: 0 0 .7rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink-2); font: 400 12.5px var(--mono); }
.share-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-yt { margin-top: .6rem; padding: .3rem 0; border: 0; background: none; color: var(--muted); font: 400 12.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.share-yt:hover { color: var(--ink); }
@media (max-width: 600px) { .share-pop { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; } }

/* ---- Notes panel: a resizable side panel on wide screens, a bottom sheet on phones ---- */
.notes {
  position: fixed; z-index: 25; top: 58px; right: 0; bottom: 0; width: var(--notes-w, 380px);
  display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line);
  opacity: 0; transform: translateX(14px); transition: opacity .25s ease, transform .3s var(--ease);
}
.notes.is-in { opacity: 1; transform: none; }
@media (min-width: 900px) {
  html.notes-open:not(.notes-float) body.is-feed { padding-right: var(--notes-w, 380px); }
  html.notes-open .blog-foot { margin-right: 0; }
}
html.notes-resizing, html.notes-resizing * { cursor: col-resize !important; user-select: none; }
html.notes-resizing body.is-feed { transition: none; }
.notes-resize { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; }
.notes-resize::after { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 44px; margin-top: -22px; border-radius: 2px; background: var(--line); transition: background .2s, height .2s; }
.notes-resize:hover::after, .notes-resize:focus-visible::after { background: var(--accent); height: 64px; margin-top: -32px; }

/* View switch in the notes header: side panel or floating window */
.notes-mode { display: inline-flex; gap: 2px; padding: 3px; margin-right: .15rem; border-radius: 10px; background: var(--chip); }
.notes-mode button { display: grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.notes-mode button svg { width: 17px; height: 17px; }
.notes-mode button:hover { color: var(--ink); }
.notes-mode button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* Floating window: drag it by its header, resize it from the corner; the page stays full width. */
.notes-grip { display: none; }
@media (min-width: 900px) {
  html.notes-float .notes {
    top: var(--nf-y, 90px); left: var(--nf-x, auto); right: auto; bottom: auto; width: var(--nf-w, 380px); height: var(--nf-h, 520px);
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    box-shadow: 0 28px 70px -24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .04);
    transform: translateY(8px) scale(.985);
  }
  html.notes-float .notes.is-in { transform: none; }
  html.notes-float .notes-resize { display: none; }
  html.notes-float .notes-head { cursor: grab; touch-action: none; }
  html.notes-float.notes-dragging .notes-head { cursor: grabbing; }
  html.notes-float .notes-grip { display: block; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; }
  html.notes-float .notes-grip::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); border-radius: 0 0 3px 0; opacity: .6; }
  html.notes-float .notes-grip:hover::after, html.notes-float .notes-grip:focus-visible::after { border-color: var(--accent); opacity: 1; }
  html.notes-dragging, html.notes-dragging * { user-select: none; }
  html.notes-float.notes-dragging .notes { transition: none; }
}
.notes-head { display: flex; align-items: center; gap: .4rem; padding: .9rem .9rem .7rem 1.2rem; border-bottom: 1px solid var(--line); }
.notes-heading { flex: 1; min-width: 0; }
.notes-goto { display: inline-block; margin-top: .2rem; color: var(--accent); font: 500 12px var(--sans); text-decoration: none; }
.notes-goto:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Notes history: your notes on other videos, as a row of tabs under the header. */
.notes-history { border-bottom: 1px solid var(--line); }
.notes-history[hidden] { display: none; }
.notes-history-row { display: flex; gap: .35rem; padding: .55rem .9rem .55rem 1.2rem; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 1.2rem; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.notes-history-row::-webkit-scrollbar { display: none; }
.notes-htab { display: inline-flex; flex: none; align-items: center; gap: .45rem; max-width: 12.5rem; min-height: 32px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 12.5px var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.notes-htab:hover { background: var(--chip); color: var(--ink); }
.notes-htab[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.notes-htab-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notes-htab-meta { flex: none; color: inherit; opacity: .6; font-weight: 400; font-variant-numeric: tabular-nums; }
.notes-kicker { margin: 0 0 .15rem; color: var(--accent); font: 400 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.notes-title { margin: 0; overflow: hidden; font: 500 calc(15.5px * var(--vs))/1.3 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover, .icon-btn[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.notes-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.notes-body[hidden] { display: none; }
.notes-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem .5rem 1.2rem; }
.notes-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--chip); }
.notes-tabs button { min-height: 30px; padding: 0 .75rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 12.5px var(--sans); cursor: pointer; }
.notes-tabs button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.notes-stamp { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: 0 .7rem; border: 1px solid transparent; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 12.5px var(--sans); cursor: pointer; transition: background .2s, opacity .2s; }
.notes-stamp svg { width: 16px; height: 16px; }
.notes-stamp:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.notes-stamp:disabled { background: var(--chip); color: var(--muted); cursor: default; }
.notes-now { font-variant-numeric: tabular-nums; opacity: .8; }
.notes-now:empty { display: none; }
.notes-text, .notes-preview { flex: 1; min-height: 0; margin: 0; padding: .6rem 1.2rem 1rem; overflow: auto; color: var(--ink); font: 400 calc(15px * var(--vs))/1.65 var(--sans); }
.notes-text { width: 100%; border: 0; background: transparent; resize: none; outline: none; }
.notes-text::placeholder { color: var(--muted); }
.notes-text:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.notes-preview h3, .notes-preview h4, .notes-preview h5 { margin: 1em 0 .4em; font-family: var(--serif); font-weight: 500; line-height: 1.25; }
.notes-preview h3 { font-size: 1.3em; } .notes-preview h4 { font-size: 1.12em; } .notes-preview h5 { font-size: 1em; }
.notes-preview p, .notes-preview ul, .notes-preview ol, .notes-preview blockquote { margin: 0 0 .7em; }
.notes-preview ul, .notes-preview ol { padding-left: 1.2em; }
.notes-preview blockquote { padding-left: .8em; border-left: 3px solid var(--accent); color: var(--ink-2); }
.notes-preview code { padding: .1em .35em; border-radius: 5px; background: var(--chip); font: .88em var(--mono); }
.notes-preview a { color: var(--accent); }
.stamp { display: inline-flex; align-items: center; padding: .05em .45em; margin: 0 .1em; border: 0; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: 600 .9em var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.stamp:hover { background: var(--accent); color: var(--bg); }
.notes-moments { padding: .7rem 1.2rem .4rem; border-top: 1px solid var(--line); }
.notes-moments[hidden] { display: none; }
.notes-mini { margin: 0 0 .5rem; color: var(--muted); font: 400 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.notes-library .notes-mini { padding: 1rem 1.2rem 0; }
.notes-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
.chip-moment { display: inline-flex; flex: none; align-items: center; gap: .45rem; max-width: 15rem; min-height: 32px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 400 12.5px var(--sans); cursor: pointer; }
.chip-moment .v-at { color: var(--accent); }
.chip-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip-moment:hover { background: var(--chip); color: var(--ink); }
.notes-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .9rem .8rem 1.2rem; border-top: 1px solid var(--line); }
.notes-status { color: var(--muted); font: 400 12px var(--sans); }
.notes-status.is-error { color: #B3261E; }
.notes-export { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 500 12.5px var(--sans); cursor: pointer; }
.notes-export svg { width: 16px; height: 16px; }
.notes-export:hover { background: var(--chip); }
.notes-list { flex: 1; margin: .4rem 0 0; padding: 0 .7rem; overflow: auto; list-style: none; }
.notes-item { display: grid; gap: .15rem; width: 100%; padding: .7rem .6rem; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.notes-item:hover { background: var(--chip); }
.notes-item-title { font: 500 calc(14.5px * var(--vs))/1.3 var(--serif); }
.notes-item-meta { color: var(--muted); font: 400 12px var(--sans); }
.notes-empty { padding: 0 1.2rem; color: var(--ink-2); font: 400 14px/1.5 var(--sans); }

@media (max-width: 899px) {
  .notes { top: auto; left: 0; width: auto; height: min(52svh, 460px); border-left: 0; border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .3); transform: translateY(24px); }
  .notes.is-in { transform: none; }
  .notes-resize, .notes-mode { display: none; }
  .notes-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line); }
  html.notes-open body.is-feed { padding-bottom: min(52svh, 460px); }
  /* Keep the video you are writing about in view above the sheet. */
  html.notes-open .vp-main .v-player, html.notes-open .is-playing .v-player { position: sticky; top: 66px; z-index: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .v-thumb img, .v-playicon, .notes, .appear-panel, .share-pop, body.is-feed { transition: none; animation: none; }
  .v-thumb:hover img { transform: none; }
  .notes { transform: none; }
}

/* Cards in the same row share their row lines (CSS subgrid), so titles, details, descriptions
   and buttons start at the same height across the row, whatever each text's length.
   To keep that from opening gaps: the details line never wraps (the category shortens with an
   ellipsis), and the moment's label is read by screen readers and shown as the button's tooltip
   instead of taking a line of its own (the video page still shows it). */
@supports (grid-template-rows: subgrid) {
  .vf-grid { row-gap: 0; }
  .v-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding-bottom: var(--card-gap); }
  .v-card article { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; height: auto; }
  .v-card .v-player { grid-row: 1; }
  .v-card .v-body { display: grid; grid-row: 2 / -1; grid-template-rows: subgrid; row-gap: 0; padding-top: 0; }
  .v-card .v-title { grid-row: 1; padding-top: .9rem; }
  .v-card .v-meta { grid-row: 2; }
  .v-card .v-note { grid-row: 3; }
  .v-card .v-actions { grid-row: 4; margin-top: 0; align-self: start; }
}
.v-card .v-meta { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.v-card .v-meta > * { flex: none; }
.v-card .v-meta .v-cat { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v-card .v-moment-label { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================
   Notes: formatting toolbar, styled document, Style panel and full screen
   ===================================================================== */
.notes-format { display: flex; align-items: center; gap: 2px; padding: 0 .9rem .5rem 1.2rem; overflow-x: auto; scrollbar-width: none; }
.notes-format::-webkit-scrollbar { display: none; }
.notes-format button { display: grid; flex: none; place-items: center; width: 32px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.notes-format button:hover { background: var(--chip); color: var(--ink); }
.notes-format svg { width: 18px; height: 18px; }
.nf-glyph { font: 600 14px/1 var(--sans); }
.nf-glyph i { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.nf-glyph s { font-weight: 500; }
[data-fmt="code"] .nf-glyph { font: 500 12px/1 var(--mono); }
.nf-sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--line); }

/* The document: font, colours, alignment and layout come from the note's Style. */
.notes-doc { --acc: var(--n-accent, var(--accent)); position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; background: var(--n-doc, transparent); color: var(--n-text, var(--ink)); transition: background-color .25s, color .25s; }
.notes .notes-doc .notes-text, .notes .notes-doc .notes-preview { color: inherit; font-family: var(--n-font, var(--sans)); text-align: var(--n-align, left); }
.notes .notes-doc .notes-text::placeholder { color: color-mix(in srgb, currentColor 45%, transparent); }
.notes-cover { flex: none; height: 104px; background: center / cover no-repeat; }
.notes-cover[hidden] { display: none; }
.notes[data-layout="card"] [data-notes-editor] { background: var(--n-backdrop, var(--bg-2)); }
.notes[data-layout="card"] .notes-doc { margin: 0 .8rem .2rem; border-radius: 14px; overflow: hidden; background: var(--n-doc, var(--bg)); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 30px -18px rgba(0, 0, 0, .35); }
.notes[data-layout="page"] [data-notes-editor] { background: var(--n-backdrop, transparent); }
.notes[data-layout="page"] .notes-doc { background: var(--n-doc, transparent); }

/* Preview elements follow the note's accent */
.notes-doc .stamp { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
.notes-doc .stamp:hover { background: var(--acc); color: var(--n-doc, var(--bg)); }
.notes-doc .notes-preview a { color: var(--acc); }
.notes-doc .notes-preview li::marker { color: var(--acc); }
.notes-doc .notes-preview h3, .notes-doc .notes-preview h4, .notes-doc .notes-preview h5 { font-family: inherit; }
.notes-doc .notes-preview del { opacity: .6; }
.notes-doc .notes-preview code { background: color-mix(in srgb, currentColor 9%, transparent); }
.n-tasks { padding-left: 0 !important; list-style: none; }
.n-task label { display: flex; align-items: flex-start; gap: .55em; cursor: pointer; }
.n-task input { flex: none; width: 1.05em; height: 1.05em; margin-top: .3em; accent-color: var(--acc); cursor: pointer; }
.n-task.is-done span { opacity: .55; text-decoration: line-through; }
.n-toggle { margin: 0 0 .5em; }
.n-toggle > summary { display: flex; align-items: center; gap: .45em; list-style: none; cursor: pointer; font-weight: 600; }
.n-toggle > summary::-webkit-details-marker { display: none; }
.n-toggle > summary::before { content: ""; flex: none; border-block: .32em solid transparent; border-inline-start: .5em solid var(--acc); transition: transform .2s var(--ease); }
.n-toggle[open] > summary::before { transform: rotate(90deg); }
.n-toggle-body { padding: .35em 0 0 1.05em; }
/* Quote decorations */
.notes[data-deco="focus"] .notes-doc .notes-preview blockquote { padding: .1em 0 .1em .8em; border-left: 3px solid var(--acc); background: none; color: inherit; }
.notes[data-deco="block"] .notes-doc .notes-preview blockquote { padding: .6em .85em; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: inherit; }
/* Separators */
.n-sep { height: 0; margin: 1.1em 0; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.notes[data-sep="dots"] .n-sep { height: 6px; border: 0; background: radial-gradient(circle, var(--acc) 1.6px, transparent 2px) center / 14px 6px repeat-x; }
.notes[data-sep="doodle"] .n-sep { height: 10px; border: 0; background: var(--acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 40px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 40px 10px repeat-x; }

/* Header buttons */
.notes-style-btn span[aria-hidden] { font: 500 14px/1 var(--serif); letter-spacing: -.02em; }
.notes-style-btn[aria-expanded="true"] { background: var(--chip); color: var(--ink); }
.notes-full-btn svg:last-of-type { display: none; }
html.notes-full .notes-full-btn svg:first-of-type { display: none; }
html.notes-full .notes-full-btn svg:last-of-type { display: block; }

/* ---- Style panel ---- */
.notes-style { position: absolute; z-index: 5; top: 64px; right: .6rem; width: min(320px, 100% - 1.2rem); max-height: calc(100% - 76px); overflow: auto; padding: .4rem 1rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 22px 60px -20px rgba(0, 0, 0, .45); animation: pop-in .18s var(--ease); scrollbar-width: thin; }
.notes-style[hidden] { display: none; }
.ns-head { display: flex; align-items: center; justify-content: space-between; margin: 0 -.4rem .3rem 0; }
.ns-head h3 { margin: 0; font: 600 15px var(--sans); }
.ns-preview { display: grid; place-items: center; height: 116px; margin-bottom: .7rem; border-radius: 14px; background: var(--bg-2); transition: background .25s; }
.ns-mini { --mini-accent: var(--accent); display: flex; flex-direction: column; gap: 5px; width: 92px; height: 96px; padding: 8px; overflow: hidden; border-radius: 10px; background: var(--bg); color: var(--ink); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4); }
.ns-mini-cover { height: 22px; margin: -8px -8px 2px; background: center / cover; }
.ns-mini-cover[hidden] { display: none; }
.ns-mini-title { font-size: 11px; font-weight: 700; line-height: 1.15; }
.ns-mini-line { height: 4px; border-radius: 2px; background: currentColor; opacity: .25; }
.ns-mini-line.short { width: 60%; background: var(--mini-accent); opacity: 1; }
.ns-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.ns-presets button { display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; padding: 0 .65rem 0 .4rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 12px var(--sans); cursor: pointer; }
.ns-presets button:hover { background: var(--chip); color: var(--ink); }
.ns-presets button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.ns-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.ns-group { margin: 0 0 .9rem; }
.ns-label { margin: 0 0 .45rem; color: var(--muted); font: 400 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ns-label span { letter-spacing: 0; text-transform: none; font-family: var(--sans); }
.notes-style .seg button svg { width: 18px; height: 18px; }
.ns-focus-bar { width: 3px; height: 14px; border-radius: 2px; background: currentColor; }
.ns-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ns-sw { position: relative; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; transition: transform .15s; }
.ns-sw:hover { transform: scale(1.08); }
.ns-sw[aria-pressed="true"], .ns-sw.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.ns-sw-custom { background: conic-gradient(#ff5e62, #f5c531, #5bd99a, #00c8e8, #4f9dff, #e46cf0, #ff5e62); }
.ns-sw-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ns-row-head { display: flex; align-items: center; justify-content: space-between; }
.ns-row-head .icon-btn { width: 28px; height: 28px; margin-top: -.4rem; }
.ns-color { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 40px; border-bottom: 1px solid var(--line); font: 400 14px var(--sans); cursor: pointer; position: relative; }
.ns-color:last-child { border-bottom: 0; }
.ns-color input { position: absolute; right: 0; width: 46px; height: 30px; opacity: 0; cursor: pointer; }
.ns-chip { width: 46px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.ns-chip.is-auto { background: linear-gradient(135deg, var(--bg) 50%, var(--ink) 50%) !important; }
.ns-cover-row { display: flex; gap: .5rem; }
.ns-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 500 12.5px var(--sans); cursor: pointer; }
.ns-btn svg { width: 17px; height: 17px; }
.ns-btn:hover { background: var(--chip); }
.ns-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ns-quiet { border-color: transparent; color: var(--muted); }
.ns-fonts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ns-fonts button { display: grid; justify-items: center; gap: .2rem; padding: .55rem 0 .45rem; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink-2); font: 400 11px var(--sans); cursor: pointer; }
.ns-fonts button b { font-size: 19px; font-weight: 500; color: var(--ink); }
.ns-fonts button[aria-pressed="true"] { border-color: var(--ink); background: var(--chip); color: var(--ink); }
.nsf-system { font-family: system-ui, -apple-system, sans-serif; } .nsf-serif { font-family: "Newsreader", Georgia, serif; } .nsf-mono { font-family: var(--mono); } .nsf-round { font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif; }
.ns-switch-row { display: flex; align-items: center; justify-content: space-between; font: 400 14px var(--sans); }
.ns-switch-row small { color: var(--muted); font-size: 12px; }
.ns-switch { position: relative; width: 44px; height: 26px; border: 0; border-radius: 999px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .2s; }
.ns-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.ns-switch[aria-checked="true"] { background: var(--accent); }
.ns-switch[aria-checked="true"] span { transform: translateX(18px); }
.ns-foot { margin: .2rem 0 0; color: var(--muted); font: 400 11.5px/1.45 var(--sans); }

/* ---- Full screen: the notes fill the page area under the site header; the header and its navigation stay ---- */
html.notes-full .notes {
  top: 58px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; z-index: 29; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important; opacity: 1;
}
html.notes-full body.is-feed { padding-right: 0 !important; padding-bottom: 0 !important; }
html.notes-full .notes-resize, html.notes-full .notes-grip, html.notes-full .notes-mode { display: none !important; }
html.notes-full .notes-head { cursor: default; }
html.notes-full .notes { --n-col: 46rem; }
html.notes-full .notes[data-wide="true"] { --n-col: 72rem; }
html.notes-full .notes-head, html.notes-full .notes-history-row, html.notes-full .notes-bar, html.notes-full .notes-format,
html.notes-full .notes-moments, html.notes-full .notes-foot { width: min(100%, var(--n-col) + 2.4rem); margin-inline: auto; }
html.notes-full .notes-doc { width: min(100% - 1.6rem, var(--n-col)); margin-inline: auto; }
html.notes-full .notes[data-layout="page"] .notes-doc { width: min(100%, var(--n-col) + 2.4rem); }
html.notes-full .notes-text, html.notes-full .notes-preview { font-size: calc(17px * var(--vs)); padding-top: 1.2rem; }
html.notes-full .notes-cover { height: 180px; }
html.notes-full .notes-style { right: max(.6rem, (100% - var(--n-col)) / 2 - 2rem); }
html.notes-full body { overflow: hidden; }
html.notes-full .notes[data-layout] .notes-doc { margin-inline: auto; }
html.notes-full .notes[data-layout="card"] .notes-doc { margin-block: .4rem 1rem; }

/* Bar: the highlights only; "More" opens every format and style option in the Aa panel. */
.nf-more { display: inline-flex !important; width: auto !important; gap: .35rem; padding: 0 .6rem !important; margin-left: 2px; color: var(--ink-2); }
.nf-more span[aria-hidden] { font: 500 13px/1 var(--serif); }
.nf-more-label { font: 500 12.5px var(--sans); }
/* Aa panel: the full formatting set as grouped segments */
.ns-format { display: grid; gap: 6px; }
.ns-fgroup { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.ns-fgroup button { display: grid; place-items: center; height: 38px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s; }
.ns-fgroup button:first-child { border-left: 0; }
.ns-fgroup button:hover { background: var(--chip); }
.ns-fgroup button[aria-pressed="true"] { background: var(--chip); color: var(--accent); }
.ns-fgroup svg { width: 19px; height: 19px; }
.ns-fgroup .nf-glyph { font-size: 15px; }
.ns-frow { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; }

/* ---- Highlights ---- */
.nf-hls { display: inline-flex; align-items: center; gap: 2px; }
.notes-format .nf-hl { width: 26px !important; }
.nf-hl span, .ns-hl span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--hl-c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); transition: transform .15s; }
.nf-hl:hover span, .ns-hl:hover span { transform: scale(1.18); }
.ns-hlrow { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 12px; }
.ns-hl-label { margin-right: auto; color: var(--ink-2); font: 500 12.5px var(--sans); }
.ns-hl { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.ns-hl:hover { background: var(--chip); }
.ns-hl span { width: 17px; height: 17px; }
.ns-hl-none span { background: linear-gradient(135deg, transparent 45%, var(--ink-2) 45%, var(--ink-2) 55%, transparent 55%); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
mark.hl { color: inherit; border-radius: 3px; padding: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.hl.hl-yellow { background: color-mix(in srgb, #F8E37A 62%, transparent); }
mark.hl.hl-green { background: color-mix(in srgb, #5BD99A 45%, transparent); }
mark.hl.hl-blue { background: color-mix(in srgb, #4F9DFF 40%, transparent); }
mark.hl.hl-pink { background: color-mix(in srgb, #E46CF0 40%, transparent); }
mark.hl.hl-red { background: color-mix(in srgb, #FF5E62 40%, transparent); }
mark.hl.hl-cyan { background: color-mix(in srgb, #00C8E8 40%, transparent); }
/* Write view: the textarea sits over a mirror that paints the highlights */
.notes-write { position: relative; display: flex; flex: 1; min-height: 0; }
.notes-write[hidden] { display: none; }
.notes-write .notes-text { position: relative; z-index: 1; background: transparent; }
.notes-mirror { position: absolute; inset: 0; z-index: 0; overflow: hidden; margin: 0; color: transparent; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; pointer-events: none; }
.notes-mirror mark.hl { color: transparent; }

/* ---- Feed categories (HackerTube areas) ---- */
.vf-areas { position: sticky; top: 58px; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.vf-areas-row { display: flex; gap: .3rem; width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: .55rem 0; overflow-x: auto; scrollbar-width: none; }
.vf-areas-row::-webkit-scrollbar { display: none; }
.vf-areas a { display: inline-flex; flex: none; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .85rem; border-radius: 999px; color: var(--ink-2); font: 500 calc(13.5px * var(--vs))/1 var(--sans); text-decoration: none; transition: background .2s, color .2s; }
.vf-areas a:hover { background: var(--chip); color: var(--ink); }
.vf-areas a[aria-current] { background: var(--ink); color: var(--bg); }
.vf-tab-n { opacity: .6; font-size: .86em; font-variant-numeric: tabular-nums; }
html.notes-open:not(.notes-float) .vf-areas { margin-right: 0; }
.vf-page { margin: 0; color: var(--muted); font: 400 calc(13px * var(--vs)) var(--sans); font-variant-numeric: tabular-nums; }

/* Page links */
.vf-pages { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }
.vf-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.vf-nums a, .vf-gap { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 .4rem; border-radius: 10px; color: var(--ink-2); font: 500 calc(14px * var(--vs)) var(--sans); text-decoration: none; font-variant-numeric: tabular-nums; }
.vf-nums a:hover { background: var(--chip); color: var(--ink); }
.vf-nums a[aria-current] { background: var(--ink); color: var(--bg); }
.vf-gap { min-width: 20px; color: var(--muted); }
.vf-step { display: inline-flex; align-items: center; gap: .3rem; min-width: 7rem; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: 500 calc(13.5px * var(--vs)) var(--sans); text-decoration: none; }
.vf-step:last-child { justify-content: flex-end; }
.vf-step svg { width: 17px; height: 17px; }
.vf-step:hover { background: var(--chip); }
.vf-step.is-off { visibility: hidden; }
@media (max-width: 560px) { .vf-step { min-width: 0; } .vf-step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .vf-nums a:not([aria-current]):not(:first-child):not(:last-child) { display: none; } .vf-gap { display: none; } }

/* HackerTube summaries ("In brief"): quieter label, kept to a few lines on cards */
.v-note-summary .v-note-label, .vp-note-summary .v-note-label { color: var(--muted); }
.v-card .v-note-summary { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Endless list: loading and end messages ---- */
.vf-more { min-height: 2rem; padding: 1.4rem 0 .4rem; color: var(--muted); font: 400 calc(13.5px * var(--vs))/1.5 var(--sans); text-align: center; }
.vf-more p { margin: 0; }
.vf-more a, .vf-retry { color: var(--ink-2); text-underline-offset: 3px; }
.vf-retry { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.vf-loading { display: inline-flex; align-items: center; gap: .6rem; }
.vf-loading span { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--ink-2); border-radius: 50%; animation: vf-spin .8s linear infinite; }
@keyframes vf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vf-loading span { animation-duration: 2s; } }