/* ============================================================
   Shared MMO visual theme - loaded (after Bootstrap) by BOTH the
   public site and the editor, so the accent colour, link
   treatment and base typography are identical across them.

   It works by driving Bootstrap's OWN link variables rather than
   hard-overriding selectors, so component styles that set their
   own colour (buttons, .lm-item rows, muted secondary links)
   keep winning.  Page-specific layout (the public reading column,
   editor list widths, heading roles) stays in public.css /
   liminal.css.
   ============================================================ */

:root {
  --mmo-link:        #155a9c;   /* calmer than Bootstrap's bright #0d6efd */
  --mmo-link-hover:  #0e3f70;
  --mmo-ink:         #222;      /* body text */
  --mmo-muted:       #5a5a5a;   /* sub-headings, secondary text */
  --mmo-rule:        #e7e7e7;

  /* Recolour every Bootstrap-driven link to the calm accent.  Component
     rules that set their own colour (e.g. .lm-item-secondary a {color:inherit})
     still override this, because they set `color` directly. */
  --bs-link-color:           var(--mmo-link);
  --bs-link-color-rgb:       21, 90, 156;
  --bs-link-hover-color:     var(--mmo-link-hover);
  --bs-link-hover-color-rgb: 14, 63, 112;

  /* Adopt liminal's accent-link language (design-language.md): --lm-nav is
     the reserved "tap to go here" colour on navigable names (.lm-nav-link).
     Wordwiki reuses its one calm blue rather than introducing a second hue -
     blue already means "tappable" app-wide, so one colour keeps one meaning
     (rabid uses a teal; the MECHANISM in liminal.css is shared). */
  --lm-nav:       var(--mmo-link);
  --lm-nav-hover: var(--mmo-link-hover);
}

/* A navigable title underlines on hover - confirmation atop the colour
   (mirrors rabid.css; the hover colour itself comes from liminal.css). */
.lm-nav-link:hover, .lm-nav-link:focus,
.lm-item-primary a.lm-nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body {
  color: var(--mmo-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Links inside the page content (NOT the dark navbar): drop Bootstrap's
   blanket underline; underline only on hover / keyboard focus, so a
   link-dense page reads cleanly.  Scoped to the two content wrappers -
   `.page-content` (public) and `.ww-content` (editor) - so the navbar and
   button-links are untouched. */
.page-content a,
.ww-content a {
  text-decoration: none;
}
.page-content a:hover,
.page-content a:focus-visible,
.ww-content a:hover,
.ww-content a:focus-visible {
  text-decoration: underline;
}

/* The editor's centred reading column - the counterpart of the public site's
   `.page-content`.  Every editor page (htmx + legacy) wraps its body in
   `.ww-content`; a wide tool (the scanned-page editor) opts out with
   `.ww-full`. */
.ww-content {
  max-width: 75rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 2.5rem;
}
.ww-content.ww-full {
  max-width: none;
  padding: 0;
}

/* Chevrons are retired chrome (liminal/design-language.md): the trailing ›
   on navigable rows (the users table, category lists) was a second,
   redundant "this navigates" cue.  rabid.css already hides them; this is
   wordwiki's counterpart (navChevron() markup still renders - the hide is
   presentation, so shared list markup stays byte-identical across apps). */
.lm-nav-chevron { display: none; }

/* The shared "play recording" speaker icon (audio.audioPlayIcon): size it to
   the surrounding text, sit it on the baseline like a text icon, and colour it
   with the accent so it reads as the clickable "play" affordance everywhere -
   the public lists, the home-page hint, and the editor's audio field. */
.audio-icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: var(--mmo-link);
}

/* ---------------------------------------------------------------------------
   .page-content: the read-only entry/word rendering, shared by the public
   site and the internal read-only word view (wordwiki.wordView).  Kept HERE
   (not in public.css) so the editor loads it directly - public.css re-imports
   site-theme, so published pages still get it, and the editor never has to
   load public.css (whose @import would reorder the cascade and clobber other
   editor styles).  All .page-content-scoped, so the rest of the chrome is
   untouched.
--------------------------------------------------------------------------- */
.page-content {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  line-height: 1.6;
}
.page-content h1 { font-size: 2rem;    font-weight: 600; margin: .25rem 0 1rem; }
.page-content h2 { font-size: 1.4rem;  font-weight: 600; margin: 1.75rem 0 .6rem;
                   padding-bottom: .25rem; border-bottom: 1px solid var(--mmo-rule); }
.page-content h3 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .4rem;
                   color: var(--mmo-muted); }
/* `headword : meanings` - the English rides the title line, smaller & muted. */
.page-content h1 .entry-gloss-title {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--mmo-muted);
}
.page-content a:hover         { color: var(--mmo-link-hover); }
.page-content a:focus-visible { outline: 2px solid var(--mmo-link); outline-offset: 2px; }
/* Word-list `<a><strong>headword</strong> : gloss</a>`: headword coloured,
   gloss plain dark. */
.page-content a:has(strong)              { color: var(--mmo-ink); }
.page-content a:has(strong) strong       { color: var(--mmo-link); font-weight: 600; }
.page-content a:has(strong):hover        { text-decoration: none; }
.page-content a:has(strong):hover strong { color: var(--mmo-link-hover);
                                           text-decoration: underline; }
.page-content ul { padding-left: 1.25rem; }
.page-content li { margin: .2rem 0; }
.page-content a.audio-icon       { margin-left: .4em; }
.page-content a.audio-icon:hover { text-decoration: none; }

/* The metadata-driven word renderer (render-entry-meta.ts, experiment): keep a
   reference scan inside its column.  The svg defaults to display:inline, so its
   height doesn't push following content down (the transcription overlaps it) -
   make it a block so its height is reserved.  We do NOT set height:auto (with
   an unconstrained width that collapses the reserved height to ~0 while the svg
   still paints full-size); an over-wide scan scrolls in the wrapper instead. */
/* Vertical rhythm for the metadata renderer (render-entry-meta.ts).  A "block"
   is a titled section (.lm-me-section) or a label/value line (.lm-me-line).
   Every block gets ONE consistent gap above it; a run of consecutive lines
   (Part of speech / Translation / Gloss) stays tight so it reads as one block.
   Applied by class, so it holds at every nesting depth (e.g. inside Example).
   The first block under any container has no top gap. */
.lm-me-section, .lm-me-line, .lm-me-empty { margin-top: .55rem; }
.lm-me-line + .lm-me-line { margin-top: .12rem; }
/* EDIT mode wraps each RELATION in a shape-keyed fragment (.lm-me-rel,
   meta-editor-refresh-design.md); the wrapper takes the relation's place in
   the rhythm and the first element inside it drops its own top margin.
   Line-form relations (Part of speech / Translation / Gloss) run tight so
   they still read as one block; sections keep the block gap. */
.lm-me-rel { margin-top: .55rem; }
.lm-me-rel-line + .lm-me-rel-line,
.lm-me-editable + .lm-me-rel-line { margin-top: .12rem; }  /* a container's scalar line (Part of speech) runs tight into the wrappers below */
.lm-me-rel > :first-child { margin-top: 0; }
/* EDIT mode wraps each line in an editable-surface flex row (.lm-me-editable);
   the wrapper takes over the line's place in the rhythm, and the line inside
   it must NOT keep its own top margin (it would push the text below the ☰
   sitting in the same flex row). */
.lm-me-editable { margin-top: .55rem; }
.lm-me-editable + .lm-me-editable,
.lm-me-editable + .lm-me-empty,
.lm-me-empty + .lm-me-editable,
.lm-me-empty + .lm-me-empty { margin-top: .12rem; }
.lm-me-editable .lm-me-line { margin-top: 0; }
.lm-me-editable .lm-me-line + .lm-me-line { margin-top: .12rem; }
.lm-meta-entry > :first-child,
.lm-me-section .ms-3 > :first-child,
.lm-me-item > :first-child,
.lm-me-num-body > :first-child { margin-top: 0; }
.lm-me-heading { margin: 0; }
/* Container items (senses, document references) are set off from each other by
   a gap - enough to read as separate items without a bullet or number. */
.lm-me-item + .lm-me-item { margin-top: .6rem; }
/* A simple list (recordings) reads tight, like a run of label/value lines -
   not the airy container gap. */
.lm-me-listitem + .lm-me-listitem { margin-top: .12rem; }
/* Multi-block markdown (a note that is genuinely more than a line) is indented
   containment below its label; plain-text notes stay inline (see markdownInline). */
.lm-me-mdblock { margin-left: 1rem; }
.lm-me-mdblock .lm-markdown > :first-child { margin-top: 0; }
/* A numbered sense: the "1." hangs to the left of the block, aligned with its
   first line, instead of sitting on a line of its own. */
.lm-me-numbered { display: flex; gap: .4rem; }
.lm-me-num { flex: 0 0 auto; }
.lm-me-num-body { flex: 1 1 auto; min-width: 0; }

/* View-changes mode (meta-editor-changes-mode.md).  The "was: old" annotation
   rides INLINE on the edited row's own line (never an indented history level);
   the diff del/elide colors come from liminal.css.  The bar holds the count,
   Approve all, and each pending deletion with its value. */
/* The annotation carries the pending-yellow family (the dot, the edited chip)
   as a soft background wash, so "what changed" scans out of a page of black
   text instead of hiding as slightly-smaller prose. */
.lm-me-chg-was {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85em;
    background: rgba(255, 193, 7, .18);
    border-radius: .25rem;
    padding: .05em .35em;
}
.lm-me-changes-hint { margin-bottom: .25rem; }
.lm-me-changes-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-bottom: .75rem; padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .375rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.lm-me-chg-del { flex-basis: 100%; }

/* The change-note disclosure in the edit/insert dialogs (lexeme-editor.ts
   ChangeNoteField): closed by default so it doesn't read as a data field. */
.lm-change-note summary { cursor: pointer; }
.lm-change-note[open] summary { margin-bottom: .25rem; }

/* The per-tuple annotation disclosures (lexeme-editor.ts
   AnnotationDisclosureField): same closed-by-default pattern as the change
   note, but they PERSIST on the tuple (open pre-filled when a value exists).
   The internal-note textarea is visibly muted so it never reads as public
   content while typing. */
.lm-annotation summary { cursor: pointer; }
.lm-annotation[open] summary { margin-bottom: .25rem; }
.lm-annotation textarea.lm-annotation-note { background: var(--bs-tertiary-bg, #f8f9fa); }

/* The rendered annotations on a fact's line (render-entry-meta.ts annotate):
   the ASIDE is public content - quiet but not editorial; the INTERNAL note
   is unmistakably editorial (muted + lock), editor audience only. */
.lm-me-aside { font-style: italic; color: var(--bs-secondary-color, #6c757d); }
.lm-me-internal-note { font-style: italic; }

/* The reference scan (render-entry-meta.ts).  display:block + line-height:0 so
   the scan reserves its own height (an inline svg lets the transcription flow
   into it).  The scan renders at natural width - it fits the single-column word
   view; in the narrow side-by-side experiment column it can spill to the right,
   which is a harness artifact, not a destination concern.  (We do NOT scale it:
   the scan is a nested svg whose inner page-svg has a fixed size CSS scaling of
   the outer svg doesn't reach.) */
.lm-me-scan { margin: .5rem 0; line-height: 0; }
.lm-me-scan a { display: block; }
.lm-me-scan svg { display: block; }

/* The Public row (lexeme-editor.ts metaPublicRow): per-orthography
   publish-gate chips.  Set = a quiet green wash; unset = muted.  The verbs
   live behind the row's ☰, approvers only. */
.lm-public-chip {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem; padding: .05em .5em; font-size: .85em;
}
.lm-public-chip-on { background: rgba(25, 135, 84, .12); }
.lm-public-chip-off { color: var(--bs-secondary-color, #6c757d); }

/* The orthography badge (render-entry-meta.ts annotate): the QUIET marker
   beside a text in the editor's side-by-side-orthographies rows.  Sized and
   raised to read as a diacritic, not a label - dz's clutter fear is the
   design constraint. */
.lm-me-orth {
    font-size: .62em;
    color: var(--bs-secondary-color, #6c757d);
    vertical-align: super;
    margin-left: .18em;
    letter-spacing: .02em;
    user-select: none;
}

/* Other-lane de-emphasis (lexeme-editor.ts metaEditingHooks): a row whose
   text is in a LIVING orthography other than the editor's working one reads
   quietly - my-lane/other-lane sorts at a glance.  Muted foreground on the
   content only (never opacity on the row: the pending dot and menus must
   stay crisp), and PENDING rows are exempt at the class level, not here. */
.lm-orth-other > .flex-grow-1 { color: var(--bs-secondary-color, #6c757d); }

/* Confidence bands on pending auto-transliterations (lexeme-editor.ts): the
   LOW band earns a warning tint - it genuinely needs eyes; the others stay
   in the quiet was-chip family. */
.lm-tr-band-low { background: rgba(220, 53, 69, .14); }
.lm-tr-band-uncertain { background: rgba(255, 193, 7, .25); }

/* Click-to-pick transliteration candidate chips (pickTransliteration): quiet
   until hovered - alternates, not calls to action. */
.lm-tr-pick { font-size: .78em; line-height: 1.1; }

/* ------------------------------------------------------------------ */
/* --- The word view's session-log pane (editor only) ---------------- */
/* ------------------------------------------------------------------ */

.ww-log-pane textarea { max-width: 46rem; }
.ww-log-list { max-width: 46rem; }
.ww-log-entry > .lm-markdown { display: inline-block; vertical-align: top; }
.ww-log-entry > .lm-markdown > p:first-child { margin-top: 0; }
.ww-log-entry > .lm-markdown > p:last-child { margin-bottom: 0; }

/* The floating log dock: a fab lower-left toggling a bottom drawer that
   stays put while scrolling (dz: notes are taken WHILE reviewing the
   word).  The dot marks an unposted draft. */
.ww-log-fab { position: fixed; bottom: 1rem; left: 1rem; z-index: 1080;
              width: 2.75rem; height: 2.75rem; border-radius: 50%;
              border: 1px solid #bbb; background: #fff; font-size: 1.2rem;
              box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer;
              line-height: 1; }
.ww-log-fab:hover { background: #f2f2f2; }
.ww-log-fab-dot { position: absolute; top: .1rem; right: .1rem;
                  width: .7rem; height: .7rem; border-radius: 50%;
                  background: #d9534f; border: 1px solid #fff; }
.ww-log-drawer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1070;
                 background: #fff; border-top: 1px solid #bbb;
                 box-shadow: 0 -2px 8px rgba(0,0,0,.15);
                 padding: .6rem 1rem .6rem 4.5rem; max-height: 60vh;
                 overflow-y: auto; }
.ww-log-drawer textarea { max-width: 46rem; }

/* Multi-block log entries: the body sits indented under the byline
   (single-paragraph entries ride the byline's own line). */
.ww-log-entry .ww-log-body { margin-left: 1.5rem; }
.ww-log-entry .ww-log-body > .lm-markdown > :first-child { margin-top: 0; }
.ww-log-entry .ww-log-body > .lm-markdown > :last-child { margin-bottom: 0; }
.ww-log-entry .ww-log-body ul, .ww-log-entry .ww-log-body ol { padding-left: 1.25rem; margin-bottom: .25rem; }

/* The word's Tags section (both read + edit): one line per tag with inline
   ✓ / ✎ / × affordances; a done tag stays, struck-through. */
.ww-tag-list { list-style: none; padding-left: 0; }
.ww-tag { padding: .1rem 0; }
.ww-tag-name { font-weight: 600; }
.ww-tag-is-done .ww-tag-name, .ww-tag-is-done { text-decoration: line-through; color: #888; }
.ww-tag-acts .btn { font-size: 1rem; line-height: 1; vertical-align: baseline; text-decoration: none; }
.ww-tag-acts .ww-tag-done { color: #198754; }

/* click-to-edit tag text (the ✎ pencil sits right after) */
.ww-tag-label.lm-clickedit { cursor: pointer; }
.ww-tag-label.lm-clickedit:hover .ww-tag-name { text-decoration: underline; }
/* a tag value that is BLOCK markdown (lists...) sits indented under the
   tag's line, exactly like a multi-paragraph log post (.ww-log-body) */
.ww-tag .ww-tag-value-block { margin-left: 1.5rem; }
.ww-tag .ww-tag-value-block > .lm-markdown > :first-child { margin-top: 0; }
.ww-tag .ww-tag-value-block > .lm-markdown > :last-child { margin-bottom: 0; }
.ww-tag .ww-tag-value-block ul, .ww-tag .ww-tag-value-block ol { padding-left: 1.25rem; margin-bottom: .25rem; }
.ww-log-drawer textarea, .ww-log-drawer { }