/* Georgian Roots — static root pages (root/<id>.html) and the root index (root/index.html). Owner: ROOT PAGES worker.
   Same look as the old root.html (white paper, black ink, 2px outlines, pills); one translation at a time. */
body[data-page="root"] {
  --rp-paper: #fff; --rp-ink: #111; --rp-muted: #6a6a66; --rp-faint: #bdbdb6; --rp-line: #e3e3dc;
  --rp-accent: #143CAA; --rp-red: #C83C1E; --rp-green: #146E32;
  --rp-ka: var(--f-ka, "Noto Sans Georgian", system-ui, sans-serif);
  --rp-ui: var(--f-text, "Golos Text", system-ui, sans-serif);
  background: var(--rp-paper); color: var(--rp-ink); overflow-x: hidden;
}
.rp [lang="ka"] { font-family: var(--rp-ka); }
.rp { display: block; }
.rp-wrap { max-width: 1040px; margin: 0 auto; padding: 18px 16px 56px; box-sizing: border-box; }
.rp a:focus-visible { outline: 3px solid var(--rp-accent); outline-offset: 2px; }

/* chips */
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.rp-chip { font: 500 12.5px/1.2 var(--rp-ui); border: 1.5px solid var(--line-c, #DADAD7); border-radius: 999px; padding: 4px 10px; background: var(--rp-paper);
  color: var(--rp-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.rp-chip.th { background: oklch(.95 .035 var(--h)); border-color: transparent; }
.rp-chip b { font: 700 14px var(--rp-ka); }
.rp-chip small { color: var(--rp-muted); }
a.rp-chip { cursor: pointer; }
@media (hover: hover) { a.rp-chip:hover { background: var(--rp-ink); color: var(--rp-paper); } a.rp-chip:hover small { color: inherit; } }
.rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rp-green); margin-left: 5px; vertical-align: middle; flex: none; }
.rp-chip .rp-dot { margin: 0 2px 0 0; }
.rp .rt { font-weight: 800; }

/* prev / all / next */
.rp-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 4px 0 24px; }
.rp-nav:last-child { margin: 40px 0 0; padding-top: 18px; border-top: 2px solid var(--rp-ink); }
.rp-nl { display: flex; align-items: center; gap: 10px; color: var(--rp-ink); text-decoration: none; min-width: 0; }
.rp-nl.next { justify-content: flex-end; text-align: right; }
.rp-nl span { min-width: 0; }
.rp-nl small { display: block; font-size: 12px; color: var(--rp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-nl b { font: 700 19px var(--rp-ka); }
.rp-nl em { font-style: normal; color: var(--rp-muted); font-size: 14px; }
.rp-nl .ar { flex: none; width: 38px; height: 38px; border: 2px solid var(--line-c, #DADAD7); border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
@media (hover: hover) { .rp-nl:hover .ar { background: var(--rp-ink); color: var(--rp-paper); } }
.rp-all { font: 600 14px var(--rp-ui); color: var(--rp-ink); border: 2px solid var(--line-c, #DADAD7); border-radius: 999px; padding: 7px 14px; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .rp-all:hover { background: var(--rp-ink); color: var(--rp-paper); } }

/* hero */
.rp-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; padding: 26px; border: 2px solid var(--line-c, #DADAD7);
  border-radius: 28px; background: #FEF7ED; margin-bottom: 28px; }
.rp-hero.no-ic { grid-template-columns: 1fr; }
.rp-ic { width: 150px; height: 150px; background: var(--rp-paper); border: 2px solid var(--line-c, #DADAD7); border-radius: 24px; display: grid; place-items: center; color: var(--rp-ink); }
.rp-ic svg { width: 116px; height: 116px; display: block; }
.rp-hd { min-width: 0; }
.rp-hd h1 { font: 800 clamp(48px, 9vw, 84px)/1.12 var(--rp-ka); margin: 0 0 10px; word-break: break-word; letter-spacing: 0; }
.rp-var { margin: 0 0 6px; color: var(--rp-muted); font-size: 15px; }
.rp-var b { color: var(--rp-ink); font-weight: 600; }
.rp-gloss { font: 600 22px/1.35 var(--rp-ui); margin: 10px 0 14px; max-width: 40ch; }
.rp-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--rp-ui); color: var(--rp-paper); background: var(--rp-ink);
  border: 2px solid var(--rp-ink); border-radius: 999px; padding: 10px 18px; text-decoration: none; }
@media (hover: hover) { .rp-btn:hover { background: var(--rp-paper); color: var(--rp-ink); } }
.rp-hero .rp-chips { margin: 0 0 16px; }

/* word groups: Georgian | translation */
.rp-group { margin: 30px 0 0; }
.rp-group h2, .rp-rel h2 { font: 700 15px var(--rp-ui); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 6px; padding-bottom: 8px;
  border-bottom: 2px solid var(--rp-ink); display: flex; gap: 10px; align-items: baseline; }
.rp-group h2 span { color: var(--rp-muted); font-weight: 500; }
.rp-words { width: 100%; border-collapse: collapse; font-size: 16px; table-layout: fixed; }
.rp-words td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rp-line); vertical-align: top; line-height: 1.4; overflow-wrap: anywhere; }
.rp-words td.k { width: 42%; font-size: 17px; }
.rp-words td.t { color: var(--rp-ink); }
.rp-words tr.sub td.k .kw { padding-left: 14px; position: relative; }
.rp-words tr.sub td.k .kw::before { content: "↳"; position: absolute; left: 0; color: var(--rp-faint); font-size: 13px; }
.rp-words .kw { display: inline-block; }
.rp-ms { display: block; font-size: 13.5px; color: var(--rp-muted); margin-top: 2px; }
.rp-ms .rt { font-weight: 700; }
.rp-tense { display: inline-block; font: 500 11px var(--rp-ui); color: var(--rp-muted); border: 1px solid var(--rp-line); border-radius: 999px; padding: 1px 7px; margin-top: 3px; }
@media (hover: hover) { .rp-words tr:hover td { background: #FAFAF6; } }

.rp-rel { margin-top: 34px; }
.rp-rel .rp-chips { margin-top: 12px; gap: 8px; }
.rp-rel .rp-chip { font-size: 14px; padding: 6px 13px; }
.rp-rel .rp-chip b { font-size: 16px; }

/* index of all roots */
.rp-ihead h1 { font: 800 clamp(34px, 6vw, 52px)/1.1 var(--rp-ui); margin: 6px 0 8px; }
.rp-lead { font-size: 17px; color: #3f3f3b; max-width: 640px; margin: 0 0 16px; }
.rp-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.rp-letters a { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--line-c, #DADAD7); border-radius: 50%; color: var(--rp-ink);
  text-decoration: none; font: 700 17px var(--rp-ka); }
@media (hover: hover) { .rp-letters a:hover { background: var(--rp-ink); color: var(--rp-paper); } }
.rp-iletter { scroll-margin-top: 16px; }
.rp-iletter h2 { font: 800 34px var(--rp-ka); margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--rp-ink); }
.rp-index { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 24px; }
.rp-index li { break-inside: avoid; padding: 3px 0; }
.rp-index a { color: var(--rp-ink); text-decoration: none; }
.rp-index a b { font: 700 16px var(--rp-ka); }
.rp-index a span { color: var(--rp-muted); font-size: 14px; }
.rp-index a:hover b { color: var(--rp-red); }
@media (prefers-reduced-motion: no-preference) { html:has(body[data-page="root"]) { scroll-behavior: smooth; } }

@media (max-width: 700px) {
  .rp-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px; border-radius: 22px; }
  .rp-ic { width: 104px; height: 104px; border-radius: 18px; }
  .rp-ic svg { width: 80px; height: 80px; }
  .rp-gloss { font-size: 19px; }
  .rp-nav { grid-template-columns: 1fr 1fr; }
  .rp-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .rp-nl em { display: none; }
  .rp-words, .rp-words tbody, .rp-words tr, .rp-words td { display: block; width: auto; }
  .rp-words td.k { width: auto; }
  .rp-words tr { padding: 10px 0; border-bottom: 1px solid var(--rp-line); }
  .rp-words td { border: 0; padding: 1px 0; }
  .rp-words td.k { padding-bottom: 3px; }
  .rp-words td.t { font-size: 15px; color: #3f3f3b; }
  .rp-words tr.sub td.t { padding-left: 14px; }
}
@media print { .rp-nav, .rp-btn { display: none; } .rp-hero { border-radius: 0; } }