.dictionary-root {
  --fg: #24292e;
  --muted: #6a737d;
  --accent: #0366d6;
  --muted-border: #e1e4e8;
  --input-bg: white;
  --mark: #fff5b1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--fg);
  background: white;
  padding-bottom: 2rem;
}

/* Basic layout */
.dictionary-root .search-row{ display:flex; gap:.5rem; margin-bottom:.6rem; align-items:center; }
.dictionary-root #search{
  flex:1;
  padding:.5rem .75rem;
  border:1px solid var(--muted-border);
  border-radius:6px;
  background: var(--input-bg);
  color: var(--fg);
}

.dictionary-root #search::placeholder {
  color: var(--muted);
}

.dictionary-root #search:focus{
  box-shadow: 0 0 0 4px rgba(3,102,214,0.08);
  border-color: var(--accent);
}
.dictionary-root #clear{ background:transparent; border:0; color:var(--muted); cursor:pointer; }

/* controls row for filter toggles */
.dictionary-root .controls-row{
  margin: .5rem 0 1rem;
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
  font-size:0.95rem;
  color:var(--muted);
}
.dictionary-root .controls-row label{ cursor:pointer; display:inline-flex; gap:.35rem; align-items:center; color:var(--muted); }
.dictionary-root select {
  background: var(--input-bg);
  color: var(--fg);
  border: 1px solid var(--muted-border);
}

/* Results list scoped to the dictionary page */
.dictionary-root .results{ margin-top:0; }
.results .count{ font-size:.95rem; color:var(--muted); margin-bottom:.5rem; }

/* Each result */
.card{
  padding: .75rem 0;
  padding-left: 1.25rem; /* indentation for the entry body */
  position: relative;
  outline: none;
  border-radius: 4px;
  overflow: auto;      /* ensure floated image doesn't overlap next entry */
}

/* Separator between results */
.card + .card{
  border-top: 1px solid var(--muted-border);
  margin-top: .5rem;
  padding-top: .75rem;
}

/* Headwords: bold and hanging-indent (pulled left) */
.headwords{
  font-weight:700;
  margin: 0 0 .25rem;
  margin-left: -1.25rem; /* pull the headword to the left of the indented body */
  display:block;
  line-height:1.25;
}

/* Sign text */
.sign{
  white-space:pre-wrap;
  margin:0 0 .4rem 0;
  color:var(--fg);
  font-size:0.98rem;
}

/* Note is italic and muted */
.note{
  font-style:italic;
  color:var(--muted);
  margin-top:.25rem;
  font-size:.95rem;
}

/* Author / book (no longer Source)*/
.dictionary-root .book {
  font-style:italic;
  color:var(--muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
  margin-bottom: 0.95rem;
}

/* tags line */
.tags{ color:var(--muted); font-size:.85rem; margin-top:.3rem; }

/* Dictionary entry image - floated right for text wrapping */
.dict-image {
  width: 120px;
  height: auto;
  float: right;
  margin-left: 12px;
  margin-bottom: 6px;
  border-radius: 4px;
  object-fit: contain;
}

/* Highlighting used by the search script */
mark{ background: var(--mark); padding:0 .12rem; border-radius:3px; }

/* Focused result for keyboard nav */
.card.focused{
  box-shadow: 0 0 0 3px rgba(3,102,214,0.08);
  background: var(--input-bg);
}

/* Detail modal */
.detail-modal{ display:none; position:fixed; inset:0; z-index:1200; }
.detail-modal.open{ display:block; }
.detail-panel{
  position:fixed;
  right: 2rem;
  top: 5rem;
  width: min(680px, 86vw);
  max-height: 80vh;
  overflow:auto;
  background: white;
  z-index:1220;
  border-radius:8px;
  padding:1rem 1rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border:1px solid var(--muted-border);
}
.detail-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.32);
  z-index:1210;
}
.close-btn{
  position:absolute;
  right:8px;
  top:8px;
  background:transparent;
  border:0;
  font-size:1rem;
  cursor:pointer;
  color:var(--muted);
}

/* Small responsive adjustments */
@media (max-width: 700px){
  .detail-panel{ left: 4%; right: 4%; top: 4rem; width: auto; }
  .dictionary-root .controls-row{ gap:.5rem; font-size:.9rem; }
}

/* Dark mode: flip the dictionary root variables */
@media (prefers-color-scheme: dark) {
  .dictionary-root {
    --fg: #ffffff;
    --muted: #8b949e;
    --muted-border: #30363d;
    --input-bg: #000;
    --mark: #3d3400;
    background: #000;
    color: var(--fg);
  }

  .dict-image {
    filter: invert(1);
  }
  
  .detail-panel {
    background: #000;
  }
}