/* Mandarin Stack — Dictionary app. Shares the universal header/bento and
   mirrors the layout idioms of the Reader + Flashcards apps. */

.dictionary-page { overscroll-behavior-y: contain; }

.dictionary-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  height: calc(100dvh - var(--header-h, 60px));
}

.dictionary-sidebar {
  border-right: 1px solid var(--bs-border-color);
  background: #fff;
  overflow-y: auto;
  min-height: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dictionary-sidebar-section .label {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  font-weight: 600;
  margin-bottom: .35rem;
}

.dictionary-mode { display: flex; }
.dictionary-mode .btn { flex: 1; }

.dictionary-recent {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.dictionary-recent-empty { padding: .25rem 0; }
.dictionary-recent-item { margin: 0; }
.dictionary-recent-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: .35rem;
  padding: .35rem .5rem;
  text-align: left;
  cursor: pointer;
  font-size: .95rem;
  color: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.dictionary-recent-link:hover {
  background: #f0f5ff;
  border-color: #d6e3ff;
}
.dictionary-recent-q {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dictionary-recent-mode {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  background: #eef2f7;
  padding: .1rem .4rem;
  border-radius: .25rem;
}

/* ---------- Main pane ---------- */

.dictionary-main {
  overflow-y: auto;
  /* Grid items default to min-height: auto, which lets them grow taller
     than the parent and breaks `overflow-y: auto` (body scrolls instead).
     min-height: 0 makes the scrollbar actually appear here. */
  min-height: 0;
  /* NB: no padding-top here. `position: sticky; top: 0` on a child pins
     after the container's padding-top, which would leave a gap above the
     sticky meta as content scrolled past. Inner wrappers handle the top
     breathing room themselves so the sticky bar sits flush. */
  padding: 0 1.75rem 1.5rem;
  background: var(--app-bg, #f7f7f9);
}

.dictionary-hero,
.dictionary-empty {
  /* Replace the top padding that used to live on .dictionary-main. */
  margin-top: 1.5rem;
}

.dictionary-hero {
  max-width: 640px;
  margin: 1rem auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dictionary-hero-mark {
  font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: .5rem;
}
.dictionary-hero-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.25rem;
}
.dictionary-hero-list li {
  padding: .55rem .75rem;
  border-radius: .5rem;
  background: #f8faff;
  border: 1px solid #e3eaf7;
  margin-bottom: .4rem;
  font-size: .95rem;
}

.dictionary-empty {
  text-align: center;
  color: var(--bs-secondary-color);
  margin-top: 4rem;
}
.dictionary-empty-mark {
  font-size: 3.5rem;
  color: #cdd5e0;
  line-height: 1;
}

.dictionary-results-meta {
  font-size: .85rem;
  color: var(--bs-secondary-color);
  margin-bottom: .75rem;
}
/* Sticky version when the meta contains jump chips for a segmented search —
   chips stay reachable as the user scrolls through long result lists.
   Horizontal negative margins extend the bar across the main pane's side
   padding so the background covers full width. No vertical negative margin
   is needed because .dictionary-main intentionally has no padding-top. */
.dictionary-results-meta:has(.dictionary-jump) {
  position: sticky;
  top: 0;
  background: var(--app-bg, #f7f7f9);
  z-index: 5;
  margin: 0 -1.75rem .5rem;
  padding: .85rem 1.75rem .65rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.dictionary-results-summary {
  margin-bottom: .4rem;
}
.dictionary-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.dictionary-jump-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid #d6e3ff;
  background: #fff;
  color: #1a2332;
  font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',var(--bs-body-font-family,sans-serif);
  font-size: .95rem;
  font-weight: 500;
  padding: .25rem .65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.dictionary-jump-chip:hover {
  background: #eef4ff;
  border-color: var(--bs-primary);
}
.dictionary-jump-chip:active { transform: translateY(1px); }
.dictionary-jump-chip-count {
  font-size: .7rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  background: #eef2f7;
  padding: 0 .35rem;
  border-radius: 999px;
  min-width: 1.25rem;
  text-align: center;
}

/* Jump target highlight: brief pulse so users can see where they landed. */
.dictionary-segment.is-jump-target .dictionary-segment-head {
  animation: dict-jump-pulse 1.3s ease-out;
}
@keyframes dict-jump-pulse {
  0%   { background: #fff3a3; }
  20%  { background: #fff3a3; }
  100% { background: transparent; }
}
.dictionary-segment {
  scroll-margin-top: 120px;
}

.dictionary-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Segmented view: outer list switches to a sectioned layout where each
   logical token from the query gets its own header + inner result list. */
.dictionary-segment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.dictionary-segment { margin: 0; }
.dictionary-segment-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .25rem 0 .5rem;
  border-bottom: 2px solid #e3eaf7;
  margin-bottom: .75rem;
}
.dictionary-segment-title {
  font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a2332;
  letter-spacing: -.01em;
}
.dictionary-segment-meta {
  font-size: .8rem;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dictionary-result {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 1rem;
  align-items: start;
}

.dictionary-result-head { display: flex; flex-direction: column; gap: .25rem; }
.dictionary-result-hanzi {
  font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  color: #1a2332;
  word-break: break-all;
}
.dictionary-result-pinyin {
  font-size: .95rem;
  color: var(--bs-primary);
  font-weight: 500;
}

.dictionary-result-body { display: flex; flex-direction: column; gap: .5rem; }

.dictionary-reading + .dictionary-reading {
  border-top: 1px dashed var(--bs-border-color);
  padding-top: .5rem;
}
.dictionary-reading-pinyin {
  font-size: .85rem;
  color: var(--bs-primary);
  font-weight: 500;
  margin-bottom: .15rem;
}
.dictionary-reading-defs {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .95rem;
  color: #222;
}
.dictionary-reading-defs li { margin-bottom: .15rem; }
.dictionary-reading-defs mark {
  background: #fff3a3;
  padding: 0 .15rem;
  border-radius: .2rem;
}

.dictionary-result-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: .5rem;
  border-top: 1px solid var(--bs-border-color);
  margin-top: .5rem;
  padding-top: .65rem;
  flex-wrap: wrap;
}

/* ---------- Mobile ---------- */

@media (max-width: 820px) {
  .dictionary-layout {
    grid-template-columns: 1fr;
  }
  .dictionary-sidebar {
    position: fixed;
    top: var(--header-h, 60px);
    left: 0;
    width: 86%;
    max-width: 360px;
    height: calc(100dvh - var(--header-h, 60px));
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 30;
    box-shadow: 4px 0 12px rgba(0,0,0,.08);
  }
  .dictionary-sidebar.open { transform: translateX(0); }
  .dictionary-main { padding: 0 1.1rem 1rem; }
  .dictionary-hero, .dictionary-empty { margin-top: 1rem; }
  .dictionary-results-meta:has(.dictionary-jump) {
    margin: 0 -1.1rem .5rem;
    padding: .75rem 1.1rem .65rem;
  }
  .dictionary-result {
    grid-template-columns: 1fr;
  }
  .dictionary-result-hanzi { font-size: 2rem; }
}