/*
 *  app.css
 *  Hana Reader
 *
 *  Chrome recedes so the page can be the subject: cool ink greys, one accent
 *  drawn from Goryeo celadon, and the reading surface kept warm and separate.
 */

@font-face {
  font-family: 'Pretendard';
  src: local('Pretendard Variable'), local('Pretendard');
  font-display: swap;
}

:root {
  --ink-0: #0e1218;
  --ink-1: #12161c;
  --ink-2: #1a2027;
  --ink-3: #232c36;
  --ink-4: #2f3a46;

  --fg: #e2e7ed;
  --fg-dim: #97a3b1;
  --fg-faint: #66727f;

  --celadon: #7fb3a3;
  --celadon-deep: #4d7d6f;
  --amber: #d9a441;
  --alert: #d97a6c;

  --sans: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
          system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Noto Serif KR', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;

  --rail-w: 76px;
  --radius: 10px;
  --shadow: 0 18px 44px -18px rgba(0, 0, 0, .78);
}

/* ── App themes ────────────────────────────────────────────────────
   The chrome is themed separately from the page you read: one is furniture,
   the other is the thing you look at for an hour. */

html[data-chrome='ink']      { }   /* the :root values above */

html[data-chrome='midnight'] {
  --ink-0: #000000; --ink-1: #08090b; --ink-2: #101216; --ink-3: #1b1f25; --ink-4: #2b313a;
  --fg: #dde2e8; --fg-dim: #939ca8; --fg-faint: #666e79;
}
html[data-chrome='slate'] {
  --ink-0: #171a1f; --ink-1: #1d2127; --ink-2: #252a32; --ink-3: #323945; --ink-4: #454e5d;
  --fg: #e4e8ee; --fg-dim: #a3adbb; --fg-faint: #78828f;
}
html[data-chrome='warm'] {
  --ink-0: #17150f; --ink-1: #1e1b14; --ink-2: #27231a; --ink-3: #342f23; --ink-4: #473f2f;
  --fg: #ece5d6; --fg-dim: #ad a498; --fg-dim: #aca498; --fg-faint: #7d7669;
}
html[data-chrome='light'] {
  --ink-0: #f3f4f6; --ink-1: #ffffff; --ink-2: #f0f2f5; --ink-3: #dde1e6; --ink-4: #c3c9d1;
  --fg: #1d232b; --fg-dim: #4f5b68; --fg-faint: #7d8794;
  --shadow: 0 18px 44px -18px rgba(20, 30, 40, .35);
}
html[data-chrome='parchment'] {
  --ink-0: #efe9dd; --ink-1: #f8f4ec; --ink-2: #ebe4d6; --ink-3: #d9d0be; --ink-4: #bcb09a;
  --fg: #262019; --fg-dim: #5b5245; --fg-faint: #877d6d;
  --shadow: 0 18px 44px -18px rgba(60, 48, 30, .3);
}
html[data-chrome='contrast'] {
  --ink-0: #000000; --ink-1: #000000; --ink-2: #101010; --ink-3: #3a3a3a; --ink-4: #5c5c5c;
  --fg: #ffffff; --fg-dim: #d6d6d6; --fg-faint: #adadad;
}
html[data-chrome='light'] .button.primary,
html[data-chrome='parchment'] .button.primary { color: #fff; }

html[data-accent='amber']  { --celadon: #d9a441; --celadon-deep: #9c7526; }
html[data-accent='sky']    { --celadon: #7fb0d9; --celadon-deep: #4a7aa3; }
html[data-accent='rose']   { --celadon: #d98fa4; --celadon-deep: #a05e72; }
html[data-accent='violet'] { --celadon: #a78fd9; --celadon-deep: #71599f; }
html[data-accent='coral']  { --celadon: #e08a6b; --celadon-deep: #a25a3f; }
html[data-accent='mono']   { --celadon: #c9ced4; --celadon-deep: #8b949e; }

/* Density and corner style, applied through the values the rest of the
   sheet already reads. */
html[data-density='compact'] { --row-pad: 5px; --view-pad: 24px; --rail-w: 66px; }
html[data-density='normal']  { --row-pad: 9px; --view-pad: 34px; --rail-w: 76px; }
html[data-density='roomy']   { --row-pad: 14px; --view-pad: 46px; --rail-w: 88px; }

html[data-corners='sharp']   { --radius: 3px; }
html[data-corners='round']   { --radius: 10px; }
html[data-corners='soft']    { --radius: 18px; }

html[data-ui-font='system'] { --sans: -apple-system, 'Apple SD Gothic Neo', system-ui, 'Segoe UI', 'Noto Sans KR', sans-serif; }
html[data-ui-font='serif']  { --sans: 'Noto Serif KR', 'Nanum Myeongjo', Georgia, serif; }
html[data-ui-font='mono']   { --sans: ui-monospace, SFMono-Regular, Menlo, 'Noto Sans KR', monospace; }

html[data-motion='reduced'] * { animation: none !important; transition: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }
html, body {
  height: 100%;
  height: 100dvh;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: var(--ink-0);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; overflow: hidden; }
html[data-rail='right'] body { flex-direction: row-reverse; }
html[data-rail='right'] .rail { border-right: 0; border-left: 1px solid var(--ink-3); }
html[data-rail='right'] .rail-tab { border-left: 0; border-right: 2px solid transparent; }
html[data-rail='right'] .rail-tab[aria-current='page'] { border-right-color: var(--celadon); }

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--celadon); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Left rail ─────────────────────────────────────────────────── */

.rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--ink-1);
  border-right: 1px solid var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 0 18px;
  gap: 2px;
}

.rail-mark {
  font-size: 22px;
  color: var(--celadon);
  text-align: center;
  padding-bottom: 16px;
  letter-spacing: .02em;
}

.rail-fill { flex: 1; }

.rail-tab {
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  padding: 11px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--fg-faint);
  transition: color .12s ease, background .12s ease;
}
.rail-tab:hover { color: var(--fg-dim); background: var(--ink-2); }
.rail-tab[aria-current='page'] {
  color: var(--celadon);
  border-left-color: var(--celadon);
  background: var(--ink-2);
}
.rail-glyph { font-size: 17px; line-height: 1; }
.rail-label { font-size: 10.5px; letter-spacing: .01em; }

/* ── Stage & views ─────────────────────────────────────────────── */

.stage { flex: 1; min-width: 0; position: relative; }

.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  /* Up and down only: a screen never slides sideways (a row wider than a phone wraps or scrolls in itself). */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  padding: var(--view-pad, 34px) calc(var(--view-pad, 34px) + 6px) 60px;
}
.view[hidden] { display: none; }

.view-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  max-width: 60rem;
}
.view-head h1 { font-size: 25px; font-weight: 600; letter-spacing: -.01em; }
.head-actions { display: flex; gap: 8px; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: var(--radius, 7px);
  border: 1px solid var(--ink-4);
  background: var(--ink-2);
  cursor: pointer;
  color: var(--fg);
  transition: background .12s ease, border-color .12s ease;
}
.button:hover { background: var(--ink-3); border-color: var(--celadon-deep); }
.button.primary { background: var(--celadon-deep); border-color: var(--celadon-deep); color: #06110d; font-weight: 600; }
.button.primary:hover { background: var(--celadon); }
.button.quiet { background: none; border-color: transparent; color: var(--fg-dim); }
.button.quiet:hover { background: var(--ink-2); color: var(--fg); }
.button.danger:hover { border-color: var(--alert); color: var(--alert); }
.button[disabled] { opacity: .45; cursor: default; }

.icon-button {
  background: none; border: 0; cursor: pointer;
  color: var(--fg-dim); padding: 6px 9px; border-radius: 6px;
  font-size: 15px; line-height: 1;
}
.icon-button:hover { background: var(--ink-3); color: var(--fg); }

.empty { max-width: 34rem; color: var(--fg-dim); }
.empty-lead { color: var(--fg); font-size: 17px; margin-bottom: 6px; }

/* ── Bookshelf ─────────────────────────────────────────────────── */

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cover-min, 148px), 1fr));
  gap: 26px 22px;
  max-width: 76rem;
}

.book-card { position: relative; width: 100%; display: block; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }

.book-cover {
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  background: linear-gradient(157deg, var(--ink-3), var(--ink-1));
  border: 1px solid var(--ink-4);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  box-shadow: var(--shadow);
}
/* A cover fills its card edge to edge; the padding is only there to inset the
   text fallback when a book has no cover image. */
.book-cover.has-image { padding: 0; display: block; }
.book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-cover .cover-fallback {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  color: var(--fg-dim);
  word-break: keep-all;
}

.book-badge {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(6, 9, 13, .82); color: var(--celadon);
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
}
.book-cover { position: relative; }

.book-meta { padding-top: 9px; }
.book-title { font-size: 13.5px; line-height: 1.35; word-break: keep-all; }
.book-author { font-size: 12px; color: var(--fg-faint); margin-top: 2px; }

.book-progress {
  height: 2px; margin-top: 7px; background: var(--ink-3); border-radius: 2px; overflow: hidden;
}
.book-progress span { display: block; height: 100%; background: var(--celadon-deep); }

.book-remove {
  position: absolute; top: 6px; right: 6px;
  background: rgba(6, 9, 13, .86); border: 1px solid var(--ink-4);
  color: var(--fg-dim);
  border-radius: 6px; padding: 2px 8px; height: 22px; line-height: 1;
  font-size: 11px; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.book-card:hover .book-remove, .book-remove:focus-visible, .book-remove:hover { opacity: 1; }
/* No hover on a touch screen, so it is always there. */
@media (hover: none) { .book-remove { opacity: 1; } }
.book-remove:hover { color: var(--alert); }

/* ── Search view ───────────────────────────────────────────────── */

.search-bar { max-width: 44rem; }
#search-input {
  width: 100%;
  padding: 13px 16px;
  font-size: 20px;
  background: var(--ink-1);
  border: 1px solid var(--ink-4);
  border-radius: 9px;
}
#search-input:focus { border-color: var(--celadon-deep); }
.search-note { color: var(--fg-faint); font-size: 13px; margin: 9px 0 22px; max-width: 44rem; }
.search-results { max-width: 44rem; }

/* Reuse the popup entry styling for search results. */
.search-results .entry { border-bottom: 1px solid var(--ink-2); padding: 16px 0; }
.search-results .entry:last-child { border-bottom: 0; }

/* ── Settings ──────────────────────────────────────────────────── */

.settings-body { max-width: 46rem; display: flex; flex-direction: column; gap: 34px; }

.panel { border-top: 1px solid var(--ink-3); padding-top: 18px; }
.panel > h2 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.panel > .panel-note { color: var(--fg-faint); font-size: 13px; margin-bottom: 16px; max-width: 40rem; }

.field { display: flex; align-items: center; gap: 14px; padding: var(--row-pad, 9px) 0; }
.field > label { flex: 0 0 13rem; color: var(--fg-dim); font-size: 13.5px; }
.field > .control { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.field .hint { color: var(--fg-faint); font-size: 12.5px; padding-left: calc(13rem + 14px); margin-top: -6px; }

input[type='text'], input[type='number'], input[type='url'], select, textarea {
  background: var(--ink-1);
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
}
input[type='range'] { flex: 1; accent-color: var(--celadon); }
input[type='checkbox'] { width: 16px; height: 16px; accent-color: var(--celadon); }
.range-value { color: var(--fg-dim); font-size: 13px; min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }

.dict-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--ink-2);
}
.dict-row:last-of-type { border-bottom: 0; }
.dict-row .dict-info { flex: 1; min-width: 0; }
.dict-row .dict-name { font-size: 14.5px; }
.dict-row .dict-sub { color: var(--fg-faint); font-size: 12.5px; margin-top: 2px; }
.dict-row .warn { color: var(--amber); }
.dict-fold {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--fg-faint); cursor: pointer; user-select: none;
}
.dict-fold input { width: 14px; height: 14px; }

.import-progress { margin-top: 12px; }
.import-progress .bar { height: 3px; background: var(--ink-3); border-radius: 2px; overflow: hidden; }
.import-progress .bar span { display: block; height: 100%; background: var(--celadon); transition: width .2s ease; }
.import-progress .label { color: var(--fg-dim); font-size: 12.5px; margin-top: 6px; }

.field-templates { display: flex; flex-direction: column; gap: 8px; }
.field-template { display: flex; gap: 8px; align-items: center; }
.field-template input:first-child { flex: 0 0 11rem; }
.diag {
  margin-top: 12px; padding: 11px 13px;
  background: var(--ink-1); border: 1px solid var(--ink-4); border-radius: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6; color: var(--fg-dim);
  white-space: pre-wrap; word-break: break-all; max-height: 22rem; overflow: auto;
}
.diag[hidden] { display: none; }

.placeholder-legend { font-size: 12.5px; color: var(--fg-faint); line-height: 1.7; }
.placeholder-legend code { color: var(--celadon); background: var(--ink-2); padding: 1px 5px; border-radius: 4px; }

/* ── Reader ────────────────────────────────────────────────────── */

.reader-view { padding: 0; display: flex; flex-direction: column; background: var(--reader-bg, #faf7f0); overflow: hidden; }

.reader-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--ink-3);
  flex: 0 0 auto;
}
.reader-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reader-title > span:first-child { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-chapter { font-size: 11.5px; color: var(--fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reader-stage { flex: 1 1 auto; min-height: 0; height: 100%; position: relative; display: flex; justify-content: center; }
.reader-container {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  max-width: var(--reader-max-width, 46rem);
  padding: 0 var(--reader-gutter, 6%);
}
.reader-view[data-scheme='dark'] .page-edge:hover { background: linear-gradient(90deg, rgba(255,255,255,.06), transparent); }
.reader-view[data-scheme='dark'] .page-edge.right:hover { background: linear-gradient(270deg, rgba(255,255,255,.06), transparent); }
.reader-container iframe { border: 0; }

.page-edge {
  flex: 0 0 44px;
  border: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
.page-edge:hover { opacity: 1; background: linear-gradient(90deg, rgba(0,0,0,.06), transparent); }
.page-edge.right:hover { background: linear-gradient(270deg, rgba(0,0,0,.06), transparent); }

.tap-catcher {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  cursor: pointer;
  /* pan-y, not none: in continuous mode this element is a child of the
     scroller, and the browser must stay free to scroll it natively. */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.tap-catcher[data-mode='scrolled'] { inset: 0 0 auto 0; width: 100%; }
.tap-catcher[hidden] { display: none; }
.tap-catcher[data-debug='on'] {
  outline: 2px dashed var(--celadon);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--celadon) 6%, transparent);
}

.page-pads { display: none; }

@media (max-width: 760px) {
  .page-pads {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    padding: 0 10px;
    pointer-events: none;
    z-index: 20;
  }
  .page-pad {
    pointer-events: auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--reader-fg, #222) 18%, transparent);
    background: color-mix(in srgb, var(--reader-bg, #fff) 72%, transparent);
    color: color-mix(in srgb, var(--reader-fg, #222) 62%, transparent);
    font-size: 22px; line-height: 1;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer;
  }
  .page-pad:active { background: var(--reader-bg, #fff); }
}

.reader-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px;
  background: var(--ink-1);
  border-top: 1px solid var(--ink-3);
}
.progress-track { flex: 1; height: 2px; background: var(--ink-3); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--celadon-deep); transition: width .25s ease; }
.progress-label { font-size: 11.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; min-width: 6rem; text-align: right; }

.drawer {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(330px, 82vw);
  background: var(--ink-1);
  border-right: 1px solid var(--ink-3);
  display: flex; flex-direction: column;
  z-index: 40;
  box-shadow: var(--shadow);
}
.drawer.right { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--ink-3); }
.drawer[hidden] { display: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--ink-3);
}
.drawer-head h2 { font-size: 14.5px; font-weight: 600; }
.drawer-body { padding: 14px; overflow-y: auto; }
.drawer-body .field > label { flex: 0 0 7.5rem; }

.toc-list { list-style: none; overflow-y: auto; padding: 6px 0 20px; }
.toc-list li a {
  display: block; padding: 8px 16px; color: var(--fg-dim);
  text-decoration: none; font-size: 13.5px; line-height: 1.4;
  border-left: 2px solid transparent; word-break: keep-all;
}
.toc-list li a:hover { background: var(--ink-2); color: var(--fg); }
.toc-list li a[aria-current] { color: var(--celadon); border-left-color: var(--celadon); }
.toc-list li ol { list-style: none; }
.toc-list li li a { padding-left: 30px; font-size: 13px; }

.drawer-section {
  font-size: 11px; letter-spacing: .04em; text-transform: none;
  color: var(--celadon); font-weight: 600;
  margin: 16px 0 2px; padding-bottom: 4px;
  border-bottom: 1px solid var(--ink-3);
}
.drawer-section:first-child { margin-top: 0; }
.drawer-body input[type='color'] {
  width: 44px; height: 26px; padding: 0; border: 1px solid var(--ink-4);
  border-radius: 5px; background: none; cursor: pointer;
}
.theme-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.theme-swatch {
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  border: 2px solid var(--ink-3);
  font-size: 13px; line-height: 1;
}
.theme-swatch[aria-pressed='true'] { border-color: var(--celadon); }

/* ── Manga reader ──────────────────────────────────────────────── */

.manga-view { padding: 0; display: flex; flex-direction: column; background: var(--manga-bg, var(--ink-0)); overflow: hidden; }

.manga-container {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--manga-gap, 12px);
  padding: var(--manga-gap, 12px) 0;
  background: var(--manga-bg, var(--ink-0));
  -webkit-overflow-scrolling: touch;
  /* Pinch is handled in script so the overlay scales with the art; the
     browser's own zoom would scale the popup and the chrome too. */
  touch-action: pan-x pan-y;
}

.manga-page {
  position: relative;
  /* Set from script: calc() on a var percentage times a var number was
     silently collapsing to the plain percentage. */
  width: var(--manga-page-width, 100%);
  max-width: none;
  flex: 0 0 auto;
  background: var(--ink-2);
  /* Centred with auto margins rather than align-items, because a flex item
     centred in an overflowing container has its left side clipped off and
     unreachable by scrolling — which is what puts a zoomed page mostly
     off-screen. */
  margin-inline: auto;
  /* Lets the overlay size itself against the page, not the viewport. */
  container-type: inline-size;
}

/* One page at a time, fitted to the window. */
.manga-container[data-mode='page'] {
  scroll-snap-type: y mandatory;
  padding: 0;
  gap: 0;
}
.manga-container[data-mode='page'] .manga-page {
  scroll-snap-align: center;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.manga-container[data-mode='page'] .manga-image {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.manga-image { display: block; width: 100%; height: auto; }

/* Boxes sit over the art. Transparent until wanted, so the page reads as a
   page — the text is there for the tap, not for the eye. */
.manga-box {
  position: absolute;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  font-family: var(--sans);
  /* Proportional to the page, so zooming keeps art and text in step. */
  font-size: calc(var(--manga-text-scale, 2.2) * 1cqw);
  line-height: 1.3;
  color: transparent;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s ease, color .1s ease;
}
.manga-box.vertical { writing-mode: vertical-rl; }

.manga-container[data-boxes='outline'] .manga-box {
  background: rgba(127, 179, 163, .14);
  border-color: rgba(127, 179, 163, .5);
}
.manga-container[data-boxes='always'] .manga-box {
  background: rgba(250, 247, 240, .96);
  color: #16181c;
  border-color: rgba(0, 0, 0, .25);
  padding: 3px 5px;
}
.manga-container[data-boxes='hover'] .manga-box:hover,
.manga-container[data-boxes='outline'] .manga-box:hover,
.manga-box:focus-within {
  background: rgba(250, 247, 240, .98);
  color: #16181c;
  border-color: var(--celadon-deep);
  padding: 3px 5px;
  z-index: 5;
}
/* The lines must stay hit-testable: the scan resolves a character under the
   finger, and a transparent line with pointer-events:none puts the tap on the
   artwork instead. `nowrap` is kept from the source format, so a long line can
   sit outside its box — hit testing has to follow the text, not the box. */
.manga-line { pointer-events: auto; }

@media (max-width: 760px) {
  .manga-view { padding: 0 !important; }
  .manga-view .reader-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .manga-container { padding-bottom: calc(var(--manga-gap, 12px) + env(safe-area-inset-bottom, 0px)); }
}

/* ── Lookup popup ──────────────────────────────────────────────── */

.hana-popup {
  position: fixed;
  z-index: 200;
  font-size: var(--popup-font, 14px);
  width: min(var(--popup-width, 410px), calc(100vw - 16px));
  background: var(--ink-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--fg);
}
.hana-popup[hidden] { display: none; }

/* Panels beneath the top of the stack recede but stay readable and clickable —
   tapping one closes everything above it. */
.hana-popup.buried { filter: brightness(.72); }
.hana-popup.buried .popup-body { pointer-events: none; }
.hana-popup[data-placement='cascade'] { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); }

.popup-chrome {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 5px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
  flex: 0 0 auto;
}
.chrome-spacer { flex: 1; }
.chrome-button {
  background: none; border: 0; cursor: pointer; color: var(--fg-faint);
  width: 26px; height: 24px; border-radius: 5px; line-height: 1; font-size: 14px;
}
.chrome-button:hover { background: var(--ink-3); color: var(--fg); }
.chrome-button.back { visibility: hidden; }
.hana-popup.has-history .chrome-button.back { visibility: visible; }
.hana-popup.pinned .chrome-button.pin { color: var(--celadon); }

.popup-body { overflow-y: auto; padding: 4px 14px 14px; overscroll-behavior: contain; }

.entry + .entry { border-top: 1px solid var(--ink-2); margin-top: 12px; padding-top: 12px; }

.entry-header { display: flex; align-items: flex-start; gap: 8px; padding-top: 10px; }
.expression-scroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.expression-scroll::-webkit-scrollbar { display: none; }
.expression {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.expression .reading { font-size: 15px; color: var(--fg-dim); }
.expression .reading.hanja { font-size: 17px; opacity: .75; }

.entry-actions { display: flex; gap: 4px; flex: 0 0 auto; padding-top: 3px; }
.entry-action {
  width: 27px; height: 27px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--ink-4); background: var(--ink-2);
  color: var(--fg-dim); font-size: 15px; line-height: 1;
}
.entry-action:hover { border-color: var(--amber); color: var(--amber); }
.entry-action.added { border-color: var(--celadon-deep); color: var(--celadon); }
.entry-action.duplicate { opacity: .4; }
.entry-action.audio.playing { border-color: var(--celadon); color: var(--celadon); }
.entry-action.audio.loading { border-color: var(--celadon-deep); }
.entry-action.audio.loading::after {
  content: ''; position: absolute; inset: 4px;
  border: 1.5px solid transparent; border-top-color: var(--celadon);
  border-radius: 50%; animation: hana-spin .7s linear infinite;
}
.entry-action.audio.loading { position: relative; color: transparent; }
@keyframes hana-spin { to { transform: rotate(360deg); } }
.entry-action.audio.none { opacity: .35; }
.audio-menu {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
}
.audio-menu button {
  font-size: 11.5px; padding: 2px 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--ink-4); background: var(--ink-2); color: var(--fg-dim);
}
.audio-menu button:hover, .audio-menu button.playing { border-color: var(--celadon); color: var(--celadon); }
.entry-action.failed { border-color: var(--alert); color: var(--alert); }

.pronunciation {
  display: flex; flex-wrap: wrap; gap: 10px;
  /* IPA needs a font that has it (fonts/fonts.css); the handwritten one showed boxes. */
  font-family: 'Flor IPA', 'Andika', 'Charis SIL', 'Doulos SIL', 'Noto Sans', 'Segoe UI', 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif;
  font-size: 14.5px;
  color: var(--celadon);
  margin-top: 3px;
}
.pronunciation[hidden] { display: none; }
.pronunciation .lemma { color: var(--fg-faint); }

.entry-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.matched-tag,
.deinflection-tag,
.frequency-tag {
  font-size: 11.5px;
  line-height: 1.5;
  border-radius: 4px;
  padding: 1px 7px;
  border: 1px solid var(--ink-4);
  color: var(--fg-dim);
}
.matched-tag { font-family: var(--serif); color: var(--fg); background: var(--ink-3); border-color: var(--ink-3); }
.deinflection-tag { color: var(--celadon); border-color: var(--celadon-deep); }
.frequency-tag { display: inline-flex; gap: 0; padding: 0; overflow: hidden; }
.frequency-tag .frequency-dict { padding: 1px 6px; background: var(--ink-3); color: var(--fg-faint); }
.frequency-tag .frequency-value { padding: 1px 7px; font-variant-numeric: tabular-nums; }

.glossary-group { margin-top: 12px; }
.glossary-group > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  color: var(--fg-faint);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.glossary-group > summary::-webkit-details-marker { display: none; }
.glossary-group > summary::before {
  content: '▾'; font-size: 9px; color: var(--ink-4); transition: transform .12s ease;
}
.glossary-group:not([open]) > summary::before { transform: rotate(-90deg); }

.glossary-content { padding-top: 7px; }
.glossary-list { padding-left: 1.45em; margin: 0; }
/* Dictionary structured content brings its own lists; the global reset strips
   their indent, which pushed KRDICT's sense numbers outside the popup. */
.glossary-content ol, .glossary-content ul { padding-left: 1.45em; margin: 2px 0; }
.glossary-content li { margin: 2px 0; }
.glossary-list[data-count='1'] { list-style: none; padding-left: 0; }
.glossary-item { margin: 3px 0; line-height: 1.55; }
.glossary-item::marker { color: var(--fg-faint); font-size: 12px; }

.glossary-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.glossary-tag {
  font-size: 11px; padding: 0 6px; border-radius: 3px;
  background: var(--ink-3); color: var(--fg-dim);
}
.glossary-tag[data-category='partOfSpeech'] { color: var(--celadon); }

.lookup-text { cursor: pointer; }
/* iOS withholds click on plain text unless it reads as clickable. */
.popup-body { cursor: pointer; }
.popup-body button, .popup-body summary { cursor: pointer; }

/* ── Structured content from dictionaries ──────────────────────
   These dictionaries carry inline styles but no stylesheet, so the popup
   supplies the hierarchy: translation reads as the answer, the definition
   sits under it, example sentences recede. */

/* Newlines are meaningful in the plain-string dictionaries. */
.glossary-item.plain-text { white-space: pre-line; }
.glossary-item.plain-text .sc-more span { white-space: pre-line; }

.sc-more { display: inline; }
.sc-more > summary {
  display: inline-flex; align-items: center; gap: 4px;
  list-style: none; cursor: pointer;
  font-size: 11.5px; color: var(--fg-faint);
  padding: 0 7px; margin-left: 4px;
  border: 1px solid var(--ink-3); border-radius: 10px;
  white-space: nowrap; vertical-align: middle;
}
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more > summary:hover { border-color: var(--celadon-deep); color: var(--celadon); }
.sc-more[open] > summary { display: none; }

/* Every dictionary rolls its own pill colours inline. Normalise the shape so
   they read as one interface rather than four. */
.glossary-content span[style*="background"] {
  border-radius: 3px !important;
  padding: 1px 5px !important;
  font-size: .76em !important;
  font-weight: 700 !important;
  vertical-align: middle;
  margin-right: .25em;
  white-space: nowrap;
}

/* KRDICT-style senses lead with the translation, then the definition, then
   examples. Give the translation the weight it earns. */
.glossary-content > div > span:first-child:not([style*="background"]) {
  display: block;
  font-size: 1.05em;
  color: var(--fg);
}
.glossary-content > div > div { color: var(--fg-dim); }

.glossary-content ul, .glossary-content ol { padding-left: 1.35em; margin: 3px 0; }
.glossary-content li { margin: 2px 0; }
.glossary-content div { margin: 1px 0; }

/* Example sentences: the source marks them with lang="ko" inside a gloss
   written in another language, which is a reliable enough signal. */
.glossary-content ul li,
.sc-example-preview li {
  color: var(--fg-dim);
  font-size: .93em;
  line-height: 1.5;
}
.sc-example-preview { padding-left: 1.35em; margin: 3px 0; }
.sc-example-preview li::marker { color: var(--ink-4); }

.sc-examples { margin: 2px 0 4px; }
.sc-examples > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--fg-faint);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px;
  border: 1px solid var(--ink-3);
  border-radius: 10px;
}
.sc-examples > summary::-webkit-details-marker { display: none; }
.sc-examples > summary::after { content: '\25be'; font-size: 9px; }
.sc-examples[open] > summary::after { transform: rotate(180deg); }
.sc-examples > summary:hover { border-color: var(--celadon-deep); color: var(--celadon); }
.sc-example-rest { margin-top: 3px; }

/* Dictionary name reads as a label, not as body text. */
.glossary-group > summary {
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--celadon);
  border-bottom: 1px solid var(--ink-3);
}

.sc-table-wrap { overflow-x: auto; margin: 6px 0; }
.sc-table { border-collapse: collapse; font-size: 13px; }
.sc-table td, .sc-table th { border: 1px solid var(--ink-3); padding: 3px 7px; text-align: left; }
.sc-image { display: inline-block; max-width: 100%; }
.sc-image img { max-width: 100%; border-radius: 4px; }
.sc-image[data-appearance='monochrome'] img { filter: grayscale(1) invert(.85); }
.sc-image-caption { display: block; font-size: 11.5px; color: var(--fg-faint); }
.sc-link { color: var(--celadon); }

.low-confidence {
  margin-top: 10px; padding: 9px 11px;
  border: 1px dashed var(--ink-4); border-radius: 7px;
  color: var(--fg-dim); font-size: 12.5px; line-height: 1.5;
}
.low-confidence b { color: var(--fg); font-family: var(--serif); font-weight: 400; }

.popup-empty { padding: 16px 2px 6px; }
.popup-empty-title { font-size: 15px; margin-bottom: 5px; }
.popup-empty-detail { color: var(--fg-dim); font-size: 13px; line-height: 1.55; }

/* ── Toast ─────────────────────────────────────────────────────── */

.diag-log {
  position: fixed; left: 8px; width: min(420px, calc(100vw - 16px)); top: 8px;
  max-height: 30vh; overflow-y: auto; z-index: 400;
  opacity: .93;
  background: rgba(8, 11, 15, .93);
  border: 1px solid var(--celadon-deep); border-radius: 8px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5; color: #cfe6dd;
  white-space: pre-wrap; word-break: break-word;
}
.diag-log[hidden] { display: none; }
.diag-log .diag-close {
  position: sticky; top: 0; float: right;
  background: none; border: 0; color: var(--celadon); cursor: pointer; font-size: 14px;
}

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink-3); border: 1px solid var(--ink-4);
  padding: 9px 16px; border-radius: 8px; z-index: 300;
  font-size: 13.5px; box-shadow: var(--shadow); max-width: 32rem;
}
.toast[hidden] { display: none; }
.toast.error { border-color: var(--alert); color: #f3d6d1; }

/* ── Phones ────────────────────────────────────────────────────── */

.install-prompt {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  background: var(--celadon-deep); color: #06110d; font-weight: 600;
  border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer;
  z-index: 250; box-shadow: var(--shadow);
}
.install-prompt[hidden] { display: none; }
@media (min-width: 761px) { .install-prompt { display: none !important; } }

@media (max-width: 760px) {
  body { flex-direction: column-reverse; }

  .rail {
    width: 100%; flex: 0 0 auto; flex-direction: row;
    border-right: 0; border-top: 1px solid var(--ink-3);
    padding: 0 0 env(safe-area-inset-bottom, 0px); align-items: stretch;
  }
  .rail-mark, .rail-fill { display: none; }
  .rail-tab { flex: 1; border-left: 0; border-top: 2px solid transparent; padding: 9px 4px 7px; }
  .rail-tab[aria-current='page'] { border-left-color: transparent; border-top-color: var(--celadon); }
  /* Up to eight tabs on a phone (with Game, Pasukkun and Reading): one line each. */
  .rail-tab { min-width: 0; padding-left: 1px; padding-right: 1px; }
  .rail-label { white-space: nowrap; overflow: hidden; max-width: 100%; }

  .view { padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 32px; }
  .reader-view { padding: 0; }
  .view-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .head-actions { flex-wrap: wrap; max-width: 100%; }
  .view-head h1 { font-size: 21px; }

  .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px 14px; }
  .book-remove { opacity: 1; }

  .field { flex-direction: column; align-items: flex-start; gap: 6px; }
  .field > label { flex: none; }
  .field > .control { width: 100%; }
  .field .hint { padding-left: 0; }
  .field-template { flex-direction: column; align-items: stretch; }
  .field-template input:first-child { flex: none; }

  .page-edge { display: none; }
  .reader-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .reader-container { padding: 0 var(--reader-gutter, 5%); }

  .drawer { width: 100%; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .drawer-head { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }

  /* The popup becomes a bottom sheet. An anchored 410px panel has nowhere to
     go on a phone: it covers the word it is defining, and half of it lands
     off-screen. A sheet always opens from the bottom, never hides the line
     being read, and can be flicked away. */
  .hana-popup[data-placement='sheet'] {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100% !important;
    max-height: 62dvh !important;
    border-radius: 16px 16px 0 0;
    border-width: 1px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(0);
    transition: transform .18s ease-out;
  }
  .hana-popup[data-sheet='closing'] { transform: translateY(100%); }
  .hana-popup.buried { filter: brightness(.6); }
  .popup-chrome {
    padding: 8px 10px;
    position: relative;
  }
  /* Floating on a phone (the default): a compact card next to the word. */
  .hana-popup:not([data-placement='sheet']) { width: calc(100vw - 16px) !important; border-radius: 12px; }
  .hana-popup:not([data-placement='sheet']) .popup-chrome { padding: 3px 6px; }
  .hana-popup[data-placement='sheet'] .popup-chrome::before {
    content: '';
    position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: var(--ink-4);
  }
  .chrome-button { width: 34px; height: 30px; font-size: 16px; }
  .popup-body { padding: 6px 16px 18px; }
  .expression { font-size: 27px; }
  .entry-action { width: 32px; height: 32px; }
  .diag-log {
  position: fixed; left: 8px; width: min(420px, calc(100vw - 16px)); top: 8px;
  max-height: 30vh; overflow-y: auto; z-index: 400;
  opacity: .93;
  background: rgba(8, 11, 15, .93);
  border: 1px solid var(--celadon-deep); border-radius: 8px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5; color: #cfe6dd;
  white-space: pre-wrap; word-break: break-word;
}
.diag-log[hidden] { display: none; }
.diag-log .diag-close {
  position: sticky; top: 0; float: right;
  background: none; border: 0; color: var(--celadon); cursor: pointer; font-size: 14px;
}

.toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); left: 16px; right: 16px; transform: none; max-width: none; }
}

@media (display-mode: standalone) {
  .install-prompt { display: none !important; }
}

/* ── Sentence translation ────────────────────────────────
   The trigger is a chrome button next to the pin, and the slot below
   is hidden and empty until it is pressed — so a popup with this
   switched on lays out exactly like one without it.                  */

.chrome-button.translate.on { color: var(--celadon); }

.popup-translation {
  margin: 2px 0 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ink-3);
}
.popup-translation[hidden] { display: none; }

.translate-main {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
}

.translate-literal {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-dim);
}

.translate-notes {
  margin: 7px 0 0;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-dim);
}
.translate-notes li { margin-top: 3px; }
.translate-notes li::marker { color: var(--celadon-deep); }

.translate-status { font-size: 12.5px; color: var(--fg-faint); line-height: 1.5; }
.translate-status.error { color: var(--alert); }

.translate-retry {
  margin-top: 6px;
  padding: 3px 10px;
  background: none;
  border: 1px solid var(--ink-4);
  border-radius: 999px;
  color: var(--fg-dim);
  font-family: var(--sans);
  font-size: 11.5px;
  cursor: pointer;
}
.translate-retry:hover { color: var(--fg); border-color: var(--celadon-deep); }

@media (max-width: 760px) {
  .translate-main { font-size: 15px; }
  .translate-literal, .translate-notes { font-size: 13px; }
}

/* ── Grammar patterns ───────────────────────────────────────────────
   -ㄴ 채, -을 수 있다, -는 바람에: the half of the phrase that carries
   the meaning sits behind the tap, so these are found by a separate
   backward pass and arrive a moment after the rest of the popup. The
   band and the rule underneath mark them as a different kind of
   answer to the same tap, rather than as another dictionary hit. */

.pattern-section {
  margin: 0 0 12px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ink-3);
  animation: pattern-in .18s ease-out;
}

@keyframes pattern-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-section { animation: none; }
}

.pattern-label {
  display: flex; align-items: baseline; gap: 7px;
  padding: 2px 0 1px;
}

.pattern-label-text {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--celadon);
}

.pattern-label-hint {
  font-size: 10.5px; color: var(--fg-faint);
}

/* The first card in the section would otherwise pick up the divider the
   entry list uses between siblings. */
.pattern-section .entry + .entry { border-top: 1px solid var(--ink-2); }
.pattern-entry .entry-header { padding-top: 4px; }
.pattern-entry .expression { color: var(--fg); }
.pattern-entry .matched-tag { border-color: var(--celadon-deep); color: var(--celadon); }

.pattern-index-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -2px 0 14px;
}
.pattern-index-row .dict-sub { color: var(--fg-faint); font-size: 12.5px; }
.pattern-index-row .button { flex: 0 0 auto; }

/* ── Sync ───────────────────────────────────────────────────────── */

.sync-actions { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }

.sync-action { display: flex; align-items: center; gap: 12px; }
.sync-action .button { flex: 0 0 auto; min-width: 150px; }
.sync-action .dict-sub { color: var(--fg-faint); font-size: 12.5px; }

.sync-report { margin: 0 0 14px; color: var(--fg-faint); font-size: 12.5px; min-height: 1.2em; }

@media (max-width: 560px) {
  .sync-action { flex-direction: column; align-items: stretch; gap: 4px; }
  .sync-action .button { width: 100%; }
}

/* ── Videos: library (feed) ────────────────────────────────────── */

.video-stats { color: var(--fg-dim); font-size: 13.5px; margin: -14px 0 18px; max-width: 76rem; }

.feed-bar { display: flex; gap: 10px; margin-bottom: 20px; max-width: 76rem; flex-wrap: wrap; }
.feed-bar input, .feed-bar select, .known-panel select, .known-text {
  background: var(--ink-2); color: var(--fg); border: 1px solid var(--ink-4);
  border-radius: var(--radius, 7px); padding: 7px 11px; font: inherit; font-size: 14px;
}
.feed-bar input { flex: 1 1 16rem; min-width: 0; }

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px 18px;
  max-width: 76rem;
}
.vcard { position: relative; }
.vcard-open {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--fg);
}
.vthumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 8px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.vthumb-none { color: var(--fg-faint); font-size: 12.5px; }
.vthumb-file { color: var(--celadon); }
.vthumb-site { color: var(--fg-dim, var(--fg-faint)); }
.vcard-open:hover .vthumb { border-color: var(--celadon-deep); }
.vbadge {
  position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 6px;
  font-size: 13px; font-weight: 700; color: #0b1210; background: #9aa6b2;
}
.vbadge.easy    { background: #8cb8d9; }
.vbadge.sweet   { background: #7fcf9f; }
.vbadge.stretch { background: #e0b75a; }
.vbadge.hard    { background: #e08a7c; }
.vdur {
  position: absolute; bottom: 7px; right: 7px; padding: 1px 6px; border-radius: 4px;
  font-size: 11.5px; background: rgba(0, 0, 0, .72); color: #fff;
}
.vtitle {
  margin-top: 8px; font-size: 14px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vmeta { color: var(--fg-faint); font-size: 12.5px; margin-top: 3px; }
.vprog { height: 3px; background: var(--ink-3); border-radius: 2px; margin-top: 7px; overflow: hidden; }
.vprog span { display: block; height: 100%; background: var(--celadon); }
.vcard-remove {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; opacity: 0;
  transition: opacity .12s ease;
}
.vcard:hover .vcard-remove { opacity: 1; }
@media (hover: none) { .vcard-remove { opacity: .8; } }

.known-panel {
  max-width: 76rem; margin-bottom: 24px; padding: 6px 20px 14px;
  border: 1px solid var(--ink-3); border-radius: 10px; background: var(--ink-1);
}
.known-panel[hidden] { display: none; }
.known-section { padding: 14px 0; border-bottom: 1px solid var(--ink-3); }
.known-section:last-child { border-bottom: 0; }
.known-section h3 { font-size: 15px; margin-bottom: 4px; }
.known-lead { color: var(--fg-dim); font-size: 13px; margin-bottom: 10px; max-width: 52rem; }
.known-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.known-check { display: inline-flex; gap: 6px; align-items: center; color: var(--fg-dim); font-size: 13.5px; }
.known-check[hidden] { display: none; }
.known-text { width: 100%; max-width: 40rem; display: block; margin-bottom: 8px; resize: vertical; }
.known-status { color: var(--celadon); font-size: 13px; margin-top: 8px; min-height: 1em; }

/* ── Videos: player ────────────────────────────────────────────── */

.player-view { padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ink-0); }

.pv-body {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
}
.pv-body[data-panel='off'] { grid-template-columns: minmax(0, 1fr); }
.pv-body[data-panel='off'] .pv-list { display: none; }

.pv-main {
  min-height: 0; overflow-y: auto; padding: 16px 20px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pv-main > * { width: 100%; max-width: 1100px; }

.pv-media {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: 8px; overflow: hidden; flex: 0 0 auto;
}
/* The player is made taller than the box it sits in. YouTube letterboxes the
   picture inside it, and puts its pause overlays (title bar, "more videos",
   logo) at the very top and bottom edges, which the box then crops away.
   Nothing of the picture itself is lost. */
.pv-host { position: absolute; left: 0; right: 0; top: -110px; bottom: -110px; }
.pv-host > div, .pv-host iframe, .pv-host video { width: 100%; height: 100%; display: block; border: 0; }
.pv-host video { object-fit: contain; background: #000; }
.pv-host video.audio-only { background: radial-gradient(circle at 50% 40%, var(--ink-3), #000 70%); }
.pv-shield { position: absolute; inset: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pv-shield[hidden] { display: none; }
/* Our own play symbol, covering YouTube's big one while paused. */
.pv-shield[data-paused='yes']::after {
  content: '\25b6'; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-left: 6px;
  background: #0e1218; color: var(--fg); font-size: 30px;
  box-shadow: 0 0 0 30px #0e1218;
}
.pv-row { cursor: pointer; }
.pv-row:hover { background: var(--ink-2); }
.pv-message {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center; background: rgba(8, 10, 14, .9); color: var(--fg);
}
.pv-message[hidden] { display: none; }
.pv-message p { max-width: 30rem; line-height: 1.5; }
.pv-message-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.pv-timeline { height: 8px; background: var(--ink-3); border-radius: 4px; cursor: pointer; overflow: hidden; flex: 0 0 auto; }
.pv-fill { height: 100%; width: 0; background: var(--celadon); }

.pv-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; flex: 0 0 auto; }
.pv-group { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pv-btn {
  background: var(--ink-2); color: var(--fg); border: 1px solid var(--ink-4);
  border-radius: 7px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.2;
}
.pv-btn:hover { border-color: var(--celadon-deep); background: var(--ink-3); }
.pv-btn[disabled] { opacity: .4; cursor: default; }
.pv-toggle[aria-pressed='true'] { background: var(--celadon-deep); border-color: var(--celadon-deep); color: #06110d; font-weight: 600; }
.pv-select {
  background: var(--ink-2); color: var(--fg); border: 1px solid var(--ink-4);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 13px;
}
.pv-time, .pv-offset { color: var(--fg-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; padding: 0 4px; }

.pv-sub {
  min-height: calc(var(--pv-font, 30px) * 2.9);
  padding: 14px 18px; border-radius: 10px; background: var(--ink-1); border: 1px solid var(--ink-3);
  font-size: var(--pv-font, 30px); line-height: 1.55; text-align: center; color: var(--fg);
  word-break: keep-all; flex: 0 0 auto; transition: opacity .15s ease, filter .15s ease;
}
.pv-sub.stale { opacity: .45; }

/* the Japanese line (日本語 line, ticked in the player) */
.pv-sub2 {
  display: none; text-align: center; color: var(--fg-dim); flex: 0 0 auto; cursor: pointer;
  font-size: calc(var(--pv-font, 30px) * .62); line-height: 1.5; margin-top: -4px; min-height: 1.5em;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  transition: filter .15s ease;
}
.pv-body[data-second='on'] .pv-sub2 { display: block; }
.pv-body:not([data-second-blur='off']) .pv-sub2:not(.revealed):not(:hover) { filter: blur(7px); }
.pv-row-body { min-width: 0; }
.pv-row-ja { display: none; font-size: .82em; color: var(--fg-faint); margin-top: 2px; filter: blur(5px); transition: filter .15s ease;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }
.pv-body[data-second='on'] .pv-row-ja:not(:empty) { display: block; }
.pv-row:hover .pv-row-ja, .pv-body[data-second-blur='off'] .pv-row-ja { filter: none; }

.pv-wordbar { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
.pv-word { font-size: 18px; font-weight: 600; padding-right: 6px; color: var(--fg); }
.pv-word.empty { font-size: 13px; font-weight: 400; color: var(--fg-faint); }
.pv-status[aria-pressed='true'] { outline: 2px solid var(--celadon); outline-offset: 1px; }
.pv-linestat { color: var(--fg-dim); font-size: 12.5px; }

/* word colours */
.tok { cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .12s ease; }
.tok:hover { background: color-mix(in srgb, var(--celadon) 22%, transparent); }
.tok.hl { background: color-mix(in srgb, var(--celadon) 38%, transparent); }
.tok.sel { box-shadow: inset 0 -2px 0 var(--celadon); }
.pv-body[data-colors='on'] .tok.w-new { background: color-mix(in srgb, #5b9bd5 30%, transparent); }
.pv-body[data-colors='on'] .tok.w-learning { background: color-mix(in srgb, #e0b75a 30%, transparent); }
.pv-body[data-colors='on'] .tok.w-nomatch { color: var(--fg-dim); }
.pv-body[data-colors='on'] .tok.w-ignored { color: var(--fg-dim); }
.pv-body .tok.hl { background: color-mix(in srgb, var(--celadon) 45%, transparent); }
.pv-status.w-new[aria-pressed='true'] { background: color-mix(in srgb, #5b9bd5 45%, var(--ink-2)); }
.pv-status.w-learning[aria-pressed='true'] { background: color-mix(in srgb, #e0b75a 45%, var(--ink-2)); }
.pv-status.w-known[aria-pressed='true'] { background: var(--celadon-deep); color: #06110d; }

/* blind listening */
.pv-body[data-subs='blur'] .pv-sub:not(.revealed):not(:hover),
.pv-body[data-subs='blur'] .pv-row.active .pv-row-text:not(:hover) { filter: blur(9px); }
.pv-body[data-subs='hide'] .pv-sub:not(.revealed) > * { visibility: hidden; }
.pv-body[data-subs='hide'] .pv-sub:not(.revealed) { color: transparent; }
.pv-body[data-subs='hide'] .pv-row-text,
.pv-body[data-subs='blur'] .pv-row:not(.active) .pv-row-text { filter: blur(7px); }
.pv-body[data-subs='hide'] .pv-row-text:hover,
.pv-body[data-subs='blur'] .pv-row-text:hover { filter: none; }

/* list of lines */
.pv-list { position: relative; min-height: 0; overflow-y: auto; border-left: 1px solid var(--ink-3); background: var(--ink-1); padding: 8px 0 60px; }
.pv-row { display: flex; gap: 10px; padding: 7px 14px 7px 10px; border-left: 3px solid transparent; font-size: 15.5px; line-height: 1.55; }
.pv-row.active { background: var(--ink-2); border-left-color: var(--celadon); }
.pv-row-time {
  flex: 0 0 auto; background: none; border: 0; color: var(--fg-faint); cursor: pointer;
  font: inherit; font-size: 11.5px; font-variant-numeric: tabular-nums; padding: 3px 0 0; width: 3.4em; text-align: left;
}
.pv-row-time:hover { color: var(--celadon); }
.pv-row-text { flex: 1; min-width: 0; word-break: keep-all; }

/* shortcut help */
.pv-help { position: absolute; inset: 0; z-index: 60; background: rgba(5, 7, 10, .72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pv-help[hidden] { display: none; }
.pv-help-card { background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 12px; padding: 20px 24px; max-width: 34rem; max-height: 100%; overflow-y: auto; box-shadow: var(--shadow); }
.pv-help-card h2 { font-size: 17px; margin-bottom: 10px; }
.pv-help-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-bottom: 16px; font-size: 13.5px; }
.pv-help-card dt { color: var(--celadon); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-help-card dd { color: var(--fg-dim); }

@media (max-width: 900px) {
  .pv-body { display: flex; flex-direction: column; overflow-y: auto; }
  .pv-main { flex: 0 0 auto; min-height: auto; overflow: visible; padding: 10px 10px 16px; }
  .pv-list { flex: 0 0 auto; }
  /* The list gets its own scroll box under the video, so following the
     current line never moves the page (and the video) out of view. */
  .pv-list { border-left: 0; border-top: 1px solid var(--ink-3); height: 42vh; max-height: 42vh; overflow-y: auto; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
  .pv-sub { --pv-font: 22px; }
  /* a smaller pause symbol on a small video */
  .pv-shield[data-paused='yes']::after { width: 44px; height: 44px; font-size: 17px; padding-left: 3px; box-shadow: 0 0 0 16px #0e1218; }
}
.pv-controls select.pv-select, .known-panel select, .feed-bar select { width: auto; flex: 0 0 auto; max-width: 100%; }
.pv-status.pv-here[aria-pressed='true'] { background: var(--ink-4); outline: 2px solid var(--fg-dim); outline-offset: 1px; }
.pv-alts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: var(--ink-1); border: 1px dashed var(--ink-4); }
.pv-alts[hidden] { display: none; }
.pv-alts-label { color: var(--fg-dim); font-size: 13px; padding-right: 2px; }
.pv-alt { font-size: 14px; }
.tok.fixed { text-decoration: underline dotted var(--fg-faint); text-underline-offset: 4px; }
.pv-alt[aria-pressed='true'] { background: var(--celadon-deep); border-color: var(--celadon-deep); color: #06110d; font-weight: 600; cursor: default; }
.guide-steps { padding-left: 1.4em; display: flex; flex-direction: column; gap: 9px; max-width: 52rem; font-size: 14px; line-height: 1.6; color: var(--fg); }
.guide-steps li::marker { color: var(--celadon); font-weight: 600; }
.guide-steps .button { margin-left: 6px; padding: 3px 11px; font-size: 13px; }
.subs-guide a:not(.button) { color: var(--celadon); }
.subs-guide code { background: var(--ink-3); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.guide-trouble { display: grid; gap: 4px 0; max-width: 52rem; font-size: 14px; line-height: 1.6; }
.guide-trouble dt { color: var(--fg); font-weight: 600; margin-top: 8px; }
.guide-trouble dd { color: var(--fg-dim); }

/* ── Japanese ──────────────────────────────────────────────────────
   Text marked lang="ja" (Japanese glosses, the translation) gets a Japanese
   font. Without it the kanji come from whatever Korean or Chinese font the
   page falls back to, which draws many of them in the wrong regional shape. */

:lang(ja) {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', YuGothic,
               'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', system-ui, sans-serif;
}

/* ── Pasukkun: cards one after another, as in Anki ──────────────────
   The card sits in the middle of the page (Pasukkun's own card, drawn
   in the flow of the page instead of floating in a corner), the next
   one comes as soon as you finish, Stop or Esc ends the round. */

.view[data-view='pasukkun']:not([hidden]) { display: flex; flex-direction: column; }
.view[data-view='pasukkun'] .view-head { flex: 0 0 auto; }
.pasu-page {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px 24px;
  min-height: 0; overflow-y: auto;
}
.pasu-start {
  width: 100%; max-width: 560px;
  margin: auto 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  text-align: center;
}
.pasu-page-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.pasu-figure {
  background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 10px;
  padding: 12px 6px; display: flex; flex-direction: column; gap: 2px;
}
.pasu-figure b { font-size: 24px; font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; }
.pasu-figure span { font-size: 12px; color: var(--fg-faint); }
.pasu-start .button { justify-content: center; text-align: center; }
.pasu-go { font-size: 17px; padding: 14px 18px; }
.pasu-start-note, .pasu-last { font-size: 13px; color: var(--fg-dim); line-height: 1.5; margin: 0; }
.pasu-last { color: var(--fg); }
.pasu-stage {
  width: 100%; max-width: 560px;
  margin: auto 0;
}
.pasu-stage:empty, .pasu-start[hidden] { display: none; }
.pasu-session {
  width: 100%; max-width: 560px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px;
  font-size: 13px; color: var(--fg-faint); font-variant-numeric: tabular-nums;
}
.pasu-session[hidden] { display: none; }
@media (max-width: 760px) {
  .pasu-page { padding: 4px 10px 16px; }
  .pasu-page-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Videos → Make subtitles (video/colab.js) ───────────────────── */
.colab-form { display: flex; gap: 8px; margin: 4px 0 12px; }
.colab-form input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--ink-3); background: var(--ink-0, var(--ink-1)); }
.colab-worker-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.colab-worker { font-size: 13px; color: var(--fg-dim); }
.colab-worker[data-alive='true'] { color: var(--celadon); }
.colab-jobs { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 10px; }
.colab-job-head { display: flex; align-items: baseline; gap: 10px; }
.colab-job-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.colab-job-status { font-size: 12px; color: var(--fg-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.colab-job.is-done .colab-job-status { color: var(--celadon); }
.colab-job.is-error .colab-job-status, .colab-job.is-error .colab-job-note { color: var(--danger, #e0a080); }
.colab-job-remove { background: none; border: 0; color: var(--fg-faint); font-size: 16px; cursor: pointer; padding: 0 4px; }
.colab-bar { height: 3px; background: var(--ink-3); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.colab-bar span { display: block; height: 100%; background: var(--celadon); transition: width .4s ease; }
.colab-job-note { font-size: 12px; color: var(--fg-faint); margin-top: 3px; }
.colab-empty { font-size: 13px; color: var(--fg-faint); }
.colab-setup { margin-top: 6px; font-size: 13px; color: var(--fg-dim); }
.colab-setup summary { cursor: pointer; color: var(--fg); }
.colab-steps { padding-left: 18px; line-height: 1.5; }
.colab-setup input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ink-3); background: var(--ink-1); margin: 4px 0 8px; }
.colab-setup-line { width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ink-3); background: var(--ink-1); color: var(--fg); font: 12px/1.4 ui-monospace, monospace; word-break: break-all; }
.colab-setup .button { margin: 0 8px 8px 0; }

/* ── Videos as playlists (video/playlists.js) ───────────────────── */
.feed-grid.feed-playlists { display: block; }
.vplaylist { max-width: 76rem; margin: 0 0 30px; }
.vplaylist-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vplaylist-name { font-size: 18px; font-weight: 600; margin: 0; }
.vplaylist-meta { font-size: 12.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.vplaylist-meta.has-gap { color: var(--amber); }
.vplaylist-go { margin-left: auto; padding: 6px 14px; font-size: 13.5px; }
.vplaylist-edit { background: none; border: 0; color: var(--fg-faint); cursor: pointer; font-size: 15px; padding: 2px 4px; }
.vplaylist-edit:hover { color: var(--fg); }
.vplaylist-bar { height: 3px; background: var(--ink-3); border-radius: 2px; overflow: hidden; margin-bottom: 12px; }
.vplaylist-bar span { display: block; height: 100%; background: var(--celadon); }
.vplaylist-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 250px); gap: 16px;
  overflow-x: auto; padding: 4px 4px 8px; margin: -4px -4px 0; scroll-snap-type: x proximity;
}
.vplaylist-row > .vcard { scroll-snap-align: start; }
.vplaylist-rest .feed-grid { max-width: none; }
.vcard.is-next .vthumb { outline: 2px solid var(--celadon); outline-offset: 2px; }
.vcard.is-watched .vthumb::after {
  /* Watched: darker, by a shade over the picture (opacity on a whole card makes the phone draw it twice). */
  content: ''; position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .42); pointer-events: none; border-radius: inherit;
}
.vcard.is-watched .vtitle, .vcard.is-watched .vmeta { color: var(--fg-faint); }
.vcard-list {
  position: absolute; top: 6px; right: 40px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity .15s ease;
}
.vcard:hover .vcard-list, .vcard:focus-within .vcard-list { opacity: 1; }
@media (hover: none) { .vcard-list { opacity: .8; } }
@media (max-width: 760px) {
  .vplaylist-row { grid-auto-columns: 72%; gap: 12px; }
  .vplaylist-go { margin-left: 0; }
}

/* ── Playlists by hand: sheet, select several (video/sheet.js) ──── */
.vplaylist-name.is-tappable { cursor: pointer; }
.vplaylist-edit { font-size: 20px; line-height: 1; padding: 2px 8px; min-width: 36px; min-height: 32px; }
.vplaylist-pick { padding: 5px 12px; font-size: 13px; }
.vcard { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.vcard-check {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
  border: 2px solid #fff; background: rgba(0, 0, 0, .45); color: transparent; pointer-events: none; z-index: 2;
}
.vcard.is-selecting .vcard-list, .vcard.is-selecting .vcard-remove { display: none; }
.vcard.is-selected .vcard-check { background: var(--celadon); border-color: var(--celadon); color: #06110d; }
.vcard.is-selected .vthumb { outline: 3px solid var(--celadon); outline-offset: 2px; }
.vcard.is-selecting.is-watched .vthumb::after { display: none; }
.select-bar {
  position: sticky; bottom: 12px; z-index: 30; max-width: 34rem; margin: 18px auto 0;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px;
  background: var(--ink-1); border: 1px solid var(--ink-4); border-radius: 14px; box-shadow: var(--shadow);
}
.select-count { flex: 1; font-size: 14px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* 📖 on a Pasukkun card: that point's part of your book */
.pasu-book-sheet { max-width: min(760px, 96vw); width: 96vw; }
.pasu-book-sheet .sheet-body { max-height: 78vh; overflow-y: auto; }
.pasu-book-crop { display: block; width: 100%; height: auto; border-radius: 6px; margin: 0 0 10px; background: #fff; }
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s ease;
}
.sheet-backdrop.is-open { opacity: 1; }
.sheet {
  width: min(26rem, calc(100% - 32px)); max-height: min(36rem, 86vh); display: flex; flex-direction: column;
  background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 16px; box-shadow: var(--shadow);
}
.sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 8px 20px; }
.sheet-head > div { flex: 1; min-width: 0; }
.sheet-head h3 { margin: 0; font-size: 16px; }
.sheet-sub { margin: 3px 0 0; font-size: 13px; color: var(--fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-close { background: none; border: 0; color: var(--fg-faint); font-size: 16px; cursor: pointer; padding: 4px 6px; }
.sheet-body { overflow-y: auto; padding: 4px 8px 14px; overscroll-behavior: contain; display: flex; flex-direction: column; }
.sheet-list { display: flex; flex-direction: column; }
.sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px;
  background: none; border: 0; border-radius: 10px; color: var(--fg); font: inherit; font-size: 15px;
  text-align: left; cursor: pointer;
}
.sheet-item[hidden] { display: none; }
.sheet-item:hover, .sheet-item:active { background: var(--ink-2); }
.sheet-mark { width: 20px; flex: 0 0 20px; text-align: center; color: var(--celadon); font-weight: 700; }
.sheet-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-note { color: var(--fg-faint); font-size: 13px; font-variant-numeric: tabular-nums; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-item.is-current .sheet-text { color: var(--celadon); }
.sheet-list + .sheet-new-row, .sheet-list + .sheet-new { border-top: 1px solid var(--ink-3); margin-top: 4px; padding-top: 12px; }
.sheet-new { display: flex; gap: 8px; padding: 8px 4px; }
.sheet-new[hidden] { display: none; }
.sheet-new input, .sheet-filter {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ink-4);
  background: var(--ink-0); color: var(--fg); font-size: 16px;
}
.sheet-filter { flex: 0 0 auto; margin: 4px 4px 8px; }
.sheet-rename { margin-bottom: 6px; }
.sheet-checks .sheet-mark { border: 2px solid var(--ink-4); border-radius: 6px; height: 20px; line-height: 16px; font-size: 13px; }
.sheet-checks .is-picked .sheet-mark { background: var(--celadon); border-color: var(--celadon); color: #06110d; }
.sheet-done { margin: 10px 4px 0; justify-content: center; padding: 11px; }
.sheet-empty { color: var(--fg-faint); font-size: 14px; padding: 6px 12px; margin: 0; }
@media (max-width: 760px) {
  .sheet-backdrop { align-items: flex-end; }
  .sheet {
    width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(24px); transition: transform .18s ease;
  }
  .sheet-backdrop.is-open .sheet { transform: none; }
  .select-bar { bottom: 10px; }
}

/* ── A preview for every video (video/thumbs.js) ──────────────────── */
.vthumb > img { position: absolute; inset: 0; z-index: 1; }
/* Under a picture the cover is not drawn at all (its gradients and text cost the phone at every scroll). */
.vthumb > img.is-loaded ~ .vcover { visibility: hidden; }
.vthumb .vbadge, .vthumb .vdur, .vthumb .vsource { z-index: 2; }
.vcover {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: 12px 16px 26px; overflow: hidden; text-align: left;
  /* One flat colour, no gradients: an iPhone paints the page on the thread that scrolls it. */
  background: hsl(var(--hue) 36% 19%); border-radius: inherit;
  color: #f3f1ec;
}
.vcover-title {
  font-weight: 700; font-size: 17px; line-height: 1.2; max-width: 78%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcover-line {
  font-size: 12.5px; line-height: 1.35; color: rgba(243, 241, 236, .78); max-width: 86%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcover-line::before { content: '\201c'; }
.vcover-line::after { content: '\201d'; }
.vcover-ep {
  position: absolute; right: 12px; top: calc(50% - 37px);
  font-size: 64px; font-weight: 800; line-height: 1; color: rgba(243, 241, 236, .22); font-variant-numeric: tabular-nums;
}
.vsource {
  position: absolute; left: 7px; bottom: 7px; padding: 1px 7px; border-radius: 4px;
  font-size: 11.5px; background: rgba(0, 0, 0, .66); color: var(--celadon);
  max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vsource.is-none { color: rgba(255, 255, 255, .7); }
.pv-host iframe.pv-vk { background: #000; }

/* ── News: KBS News as a news app (news/news.js) ─────────────────── */
.news-from { font-size: 14px; font-weight: 500; color: var(--fg-faint); margin-left: 6px; }
#news-feed { max-width: 46rem; }
.news-sections {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin: 0 -2px 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.news-sections::-webkit-scrollbar { display: none; }
.news-section {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ink-4);
  background: var(--ink-1); color: var(--fg-dim); font: inherit; font-size: 14.5px; cursor: pointer;
}
.news-section { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.news-section.is-holding { box-shadow: 0 0 0 2px var(--celadon); }
.news-section[aria-pressed='true'] { background: var(--fg); border-color: var(--fg); color: var(--ink-0); font-weight: 600; }
.news-status { color: var(--fg-faint); font-size: 13px; margin: 0 0 10px; min-height: 0; }
.news-status:empty { display: none; }
.news-list { display: flex; flex-direction: column; }
.news-card { border-bottom: 1px solid var(--ink-3); }
.news-open {
  display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 14px 0; text-align: left;
  background: none; border: 0; color: var(--fg); font: inherit; cursor: pointer;
}
.news-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.news-meta { font-size: 12.5px; color: var(--fg-faint); }
.news-title {
  margin: 0; font-size: 16.5px; line-height: 1.42; font-weight: 600; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-img { flex: 0 0 auto; width: 112px; height: 76px; object-fit: cover; border-radius: 8px; background: var(--ink-2); }
.news-card.is-lead .news-open { flex-direction: column-reverse; gap: 12px; padding-top: 4px; }
.news-card.is-lead .news-img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.news-card.is-lead .news-title { font-size: 21px; line-height: 1.35; -webkit-line-clamp: 4; }
.news-summary {
  margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card.is-read .news-title { color: var(--fg-dim); font-weight: 500; }
.news-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.news-badge { font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: var(--ink-2); color: var(--fg-dim); }
.news-badge:empty { display: none; }
.news-vod { color: var(--celadon); }
.news-score.easy { background: color-mix(in srgb, #8cb8d9 28%, var(--ink-2)); color: var(--fg); }
.news-score.sweet { background: color-mix(in srgb, #7fcf9f 30%, var(--ink-2)); color: var(--fg); }
.news-score.stretch { background: color-mix(in srgb, #e0b75a 28%, var(--ink-2)); color: var(--fg); }
.news-score.hard { background: color-mix(in srgb, #e08a7c 26%, var(--ink-2)); color: var(--fg); }
.news-more { display: block; margin: 18px auto 8px; }
.news-more[hidden] { display: none; }
.news-empty { color: var(--fg-faint); padding: 20px 0; }

.article-view { padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ink-0); }
.article-view .reader-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
#article-colors[aria-pressed='true'] { color: var(--celadon); }
.article-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.news-article { --news-size: 18px; max-width: 40rem; margin: 0 auto; padding: 18px 20px 40px; font-size: var(--news-size); }
.news-article .news-meta { font-size: 13px; margin: 0 0 8px; }
.news-headline { font-size: calc(var(--news-size) * 1.38); line-height: 1.38; margin: 0 0 10px; letter-spacing: -0.015em; }
.news-byline { color: var(--fg-faint); font-size: 13px; margin: 0 0 14px; }
.news-figure { margin: 14px -20px 18px; }
.news-figure img { display: block; width: 100%; height: auto; background: var(--ink-2); }
.news-figure figcaption { font-size: 13px; color: var(--fg-faint); padding: 6px 20px 0; line-height: 1.45; }
.news-watch { margin: 0 0 18px; }
.news-p { margin: 0 0 1.05em; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.news-label { font-size: 13px; font-weight: 600; color: var(--celadon); margin: 1.4em 0 .5em; letter-spacing: .02em; }
.news-quote { margin: 0 0 1.05em; padding: 2px 0 2px 14px; border-left: 3px solid var(--ink-4); color: var(--fg-dim); }
.news-credit { font-size: 13px; color: var(--fg-faint); line-height: 1.6; }
.news-foot { margin: 26px 0 0; padding-top: 12px; border-top: 1px solid var(--ink-3); font-size: 13px; color: var(--fg-faint); }
.news-article .tok { padding: 0; border-radius: 3px; }
.news-article[data-colors='on'] .tok.w-new { background: color-mix(in srgb, #5b9bd5 26%, transparent); }
.news-article[data-colors='on'] .tok.w-learning { background: color-mix(in srgb, #e0b75a 28%, transparent); }
.news-article .tok.hl { background: color-mix(in srgb, var(--celadon) 45%, transparent); }
.article-word {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px); background: var(--ink-1); border-top: 1px solid var(--ink-3);
}
.article-word .pv-word { flex: 1 1 auto; min-width: 5em; }
/* ── Lyrics: the video on top, the words scrolling below (lyrics/lyrics.js) ── */
#lyrics-list { max-width: 46rem; }
.lyr-album { font-size: 15px; font-weight: 600; color: var(--fg-dim); margin: 18px 0 8px; }
.lyr-album:first-child { margin-top: 0; }
.lyr-list { display: flex; flex-direction: column; }
.lyr-card {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left;
  padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--ink-3);
  color: inherit; font: inherit; cursor: pointer;
}
.lyr-thumb { flex: 0 0 auto; width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--ink-2); }
.lyr-thumb.is-missing { visibility: hidden; }
.lyr-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; align-items: flex-start; }
.lyr-title { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.lyr-form { display: flex; flex-direction: column; gap: 12px; }
.lyr-form h2 { font-size: 17px; margin: 0; }
.lyr-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--fg-dim); }
.lyr-field input, .lyr-paste {
  font: inherit; font-size: 15px; color: var(--fg); background: var(--ink-1);
  border: 1px solid var(--ink-3); border-radius: 8px; padding: 9px 11px;
}
.lyr-paste { resize: vertical; line-height: 1.6; min-height: 12em; }
.sheet-item.is-other .sheet-text { color: var(--fg-dim); }
.lyr-search { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.lyr-search-bar { display: flex; gap: 8px; }
.lyr-search-bar input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--fg); background: var(--ink-1);
  border: 1px solid var(--ink-3); border-radius: 8px; padding: 9px 11px;
}
.lyr-results { display: flex; flex-direction: column; }
.lyr-results:empty { display: none; }
.lyr-video-meta { font-size: 12.5px; color: var(--fg-dim); }
.lyr-video .lyr-title { font-size: 14.5px; font-weight: 500; }
.lyr-video.is-busy { opacity: .6; pointer-events: none; }
.lyr-video.is-busy .lyr-video-meta { color: var(--celadon); }
.lyr-find { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lyr-found { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lyr-found:empty { display: none; }
.lyr-pick {
    display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
    padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ink-3);
    background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.lyr-pick[aria-pressed='true'] { border-color: var(--celadon); background: color-mix(in srgb, var(--celadon) 12%, transparent); }
.lyr-pick-title { font-size: 14px; font-weight: 600; }
.lyr-pick-meta { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lyr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lyr-remove { margin-left: auto; color: #e08a7c; }
.lyr-media {
  flex: 0 0 auto; width: 100%; max-width: 46rem; margin: 0 auto; aspect-ratio: 16 / 9;
  max-height: 42vh; background: #000; position: relative;
}
.lyr-media:empty { display: none; }
.lyr-host, .lyr-host > div, .lyr-host iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lyr-verse { margin: 0 0 1.3em; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.lyr-line { display: block; }
.lyr-ja { display: block; font-size: .78em; line-height: 1.5; color: var(--fg-dim); margin: 0 0 .45em; }
.lyr-ja:empty, .lyr-page[data-ja='off'] .lyr-ja { display: none; }
#song-ja[aria-pressed='true'] { color: var(--celadon); }
.lyr-page .news-byline { margin-bottom: 20px; }

@media (max-width: 760px) {
  .news-head { margin-bottom: 10px; }
  .news-img { width: 96px; height: 66px; }
  .article-word { padding-bottom: 10px; }
  .article-word .pv-btn { padding: 6px 9px; }
}
.vplaylist-tools { display: flex; gap: 8px; margin: 0 0 18px; max-width: 76rem; }
.sheet-name { margin-top: 2px; }
.sheet-hint { margin: 4px 6px 2px; font-size: 13px; color: var(--fg-faint); }

/* ── The popup's word grade: folded, then New / Learning / Known / Ignore ── */
.entry-action.grade-toggle {
  width: auto; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--fg-dim); white-space: nowrap;
}
.grade-dot { width: 8px; height: 8px; border-radius: 50%; background: #5b9bd5; flex: 0 0 auto; }
.grade-toggle.w-learning .grade-dot { background: #e0b75a; }
.grade-toggle.w-known .grade-dot { background: var(--celadon); }
.grade-toggle.w-ignored .grade-dot { background: var(--fg-faint); }
.grade-toggle[aria-expanded='true'] { border-color: var(--celadon-deep); color: var(--fg); }
.grade-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; }
.grade-choices[hidden] { display: none; }
.grade-choice {
  min-height: 38px; border-radius: 8px; border: 1px solid var(--ink-4); background: var(--ink-2);
  color: var(--fg); font: inherit; font-size: 13.5px; cursor: pointer;
}
.grade-choice.w-new[aria-pressed='true'] { background: color-mix(in srgb, #5b9bd5 45%, var(--ink-2)); border-color: #5b9bd5; }
.grade-choice.w-learning[aria-pressed='true'] { background: color-mix(in srgb, #e0b75a 45%, var(--ink-2)); border-color: #e0b75a; }
.grade-choice.w-known[aria-pressed='true'] { background: var(--celadon-deep); border-color: var(--celadon); color: #06110d; font-weight: 600; }
.grade-choice.w-ignored[aria-pressed='true'] { background: var(--ink-4); }
.feed-grid > .vplaylist-tools { grid-column: 1 / -1; margin-bottom: 4px; }
.sheet-danger .sheet-text, .sheet-danger .sheet-mark { color: var(--alert); }
.sheet-confirm { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 4px 2px; }
.button.danger-fill { background: var(--alert); border-color: var(--alert); color: #1a0806; font-weight: 600; }
.button.danger { color: var(--alert); }
.select-bar .button { padding: 7px 11px; }

/* The card's own buttons above its picture (the picture is layered over the cover),
   and always in sight, not only under a mouse. */
.vthumb { isolation: isolate; }
.vcard-list, .vcard-remove, .vcard-check { z-index: 3; }
.vcard-list, .vcard-remove { opacity: .78; }
.vcard:hover .vcard-list, .vcard:hover .vcard-remove, .vcard-list:focus-visible, .vcard-remove:focus-visible { opacity: 1; }
.news-figure { position: relative; }
.news-novideo { aspect-ratio: 16 / 9; background: #000; }
.news-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.news-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .62); color: #fff; font-size: 24px; padding-left: 5px; cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}
.news-figure:has(figcaption) .news-play { top: calc(50% - 14px); }
.news-play.is-loading { opacity: .5; }
.news-colab, .news-whisper, .news-kbs { margin: 0 0 18px 8px; }

/* ── Game (js/game/game.js) ─────────────────────────────────────── */
#game-body { max-width: 52rem; display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; }
.game-sources, .game-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.game-tools[hidden], #game-body .button[hidden] { display: none; }
.game-help, .game-folder-help { color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; }
.game-help p, .game-folder-help p { margin: 0 0 8px; }
.game-folder-help { border: 1px solid var(--ink-3); border-radius: 10px; padding: 12px 14px; }
.game-folder-help[hidden] { display: none; }
.game-folder-command { white-space: pre-wrap; word-break: break-all; font-size: 12.5px; background: var(--ink-2); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; user-select: all; -webkit-user-select: all; }
.game-folder-copy { margin-bottom: 10px; }
.game-stage { position: relative; background: #000; border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.game-video { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: #000; }
.game-video[hidden] { display: none; }
.game-stage.is-folded { height: 2px; }
.game-stage.is-folded .game-video { position: absolute; width: 2px; height: 2px; opacity: 0.01; }
.game-stage.is-folded .game-box { display: none; }
.game-box { position: absolute; border: 2px solid var(--celadon); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); pointer-events: none; }
.game-box.is-drawing { border-style: dashed; box-shadow: none; }
.game-stage.is-reading .game-box { border-color: #e0b75a; }
.game-tools .button[aria-pressed='false'] { opacity: .65; }
.game-read { min-width: 7.5em; }
.game-state { min-height: 1.3em; margin: 0; font-size: 13.5px; color: var(--fg-faint); }
.game-state.is-error { color: #e07a6b; }
.game-line { list-style: none; padding: 10px 2px; border-bottom: 1px solid var(--ink-3); }
.game-line.is-current { border: 1px solid var(--ink-3); border-radius: 12px; padding: 14px 16px; background: var(--ink-2); }
.game-name { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--celadon) 30%, transparent); margin-bottom: 4px; }
.game-text { margin: 0; font-size: 18px; line-height: 1.75; }
.game-line.is-current .game-text { font-size: 23px; }
.game-ja { margin: 4px 0 0; font-size: 14px; color: var(--fg-dim); filter: blur(6px); cursor: pointer; transition: filter .15s ease; }
.game-ja.revealed { filter: none; }
.game-history { margin: 0; padding: 0; }
.game-text .tok { padding: 0; border-radius: 3px; }
.game-text .tok.w-new { background: color-mix(in srgb, #5b9bd5 26%, transparent); }
.game-text .tok.w-learning { background: color-mix(in srgb, #e0b75a 28%, transparent); }
.game-text .tok.hl { background: color-mix(in srgb, var(--celadon) 45%, transparent); }
@media (max-width: 430px) { .rail-label { font-size: 9.5px; letter-spacing: 0; } }
@media (max-width: 760px) {
  .game-line.is-current .game-text { font-size: 21px; }
  .game-video { max-height: 38vh; }
}
/* Game's floating window (Document Picture-in-Picture): its own small page. */
body.game-float-body { display: block; overflow: auto; height: auto; min-height: 100vh; margin: 0; padding: 10px 12px 16px; flex-direction: column; }
.game-float { display: flex; flex-direction: column; gap: 10px; }
.game-float-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game-float-bar .button { padding: 5px 12px; font-size: 13px; }
.game-float-state { font-size: 12px; color: var(--fg-faint); flex: 1; min-width: 8em; }
.game-float-state.is-error { color: #e07a6b; }
.game-float .game-line.is-current { padding: 10px 12px; }
.game-float .game-line.is-current .game-text { font-size: 22px; }
.game-float .game-history .game-text { font-size: 15px; color: var(--fg-dim); }

/* ── Hana Lens overlay (js/game/overlay.js): transparent over a game ─ */
html.overlay-mode, html.overlay-mode body { background: transparent !important; overflow: hidden; }
html.overlay-mode .rail, html.overlay-mode .stage, html.overlay-mode .install-prompt { display: none !important; }
.overlay-layer { position: fixed; inset: 0; pointer-events: none; }
.overlay-word { position: absolute; border-radius: 4px; }
.overlay-word.hl { background: rgba(224, 183, 90, .28); box-shadow: 0 0 0 1px rgba(224, 183, 90, .7); }
.overlay-chooser { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); cursor: crosshair; z-index: 50; }
.overlay-chooser p { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 8px;
  background: rgba(20, 20, 20, .85); color: #fff; font: 15px system-ui; }
.overlay-chooser-box { position: absolute; border: 2px solid #e0b75a; background: rgba(224, 183, 90, .12); border-radius: 6px; }

/* ✎ Rename (only in Reader), beside ≡ and ×. */
.vcard-rename {
  position: absolute; top: 6px; right: 74px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: 14px; line-height: 1;
  opacity: .78; z-index: 3; transition: opacity .15s ease;
}
.vcard:hover .vcard-rename, .vcard-rename:focus-visible { opacity: 1; }
.vcard.is-selecting .vcard-rename { display: none; }
/* Videos in twice: said above the cards, with Merge them. */
.vdupes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--ink-2); font-size: 13.5px; }
.vdupes[hidden] { display: none; }
/* Rename… (find & replace in the names shown in Reader). */
.sheet-replace { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.sheet-replace .sheet-list { max-height: 40vh; overflow-y: auto; }
.sheet-replace .sheet-hint { margin: 2px 0; font-size: 13px; }

/* A phone: the buttons on a card drawn solid (a see-through element is drawn twice, three a card). */
@media (hover: none) {
  .vcard-list, .vcard-remove, .vcard-rename { opacity: 1; transition: none; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .85); }
}
/* The buttons on a card above its picture (the picture sat over them). */
.vcard-list, .vcard-remove, .vcard-rename { z-index: 4; }

/* Popup look: Glass (Settings → Appearance). The page shows through, blurred; the parts inside go clear. */
html[data-popup-look='glass'] .hana-popup {
  background: color-mix(in srgb, var(--ink-1) 68%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .09);
}
html[data-popup-look='glass'] .hana-popup .popup-chrome {
  background: rgba(255, 255, 255, .05); border-bottom-color: rgba(255, 255, 255, .09);
}
html[data-popup-look='glass'] .hana-popup .entry + .entry { border-top-color: rgba(255, 255, 255, .1); }
html[data-popup-look='glass'] .hana-popup.buried { filter: none; opacity: .8; }
.pv-literal[aria-pressed='true'] { color: var(--celadon); border-color: var(--celadon-deep); }