/* «Shevalar» — the map, region pages and the literary→dialect converter.
   Kept apart from portal.css so the section can change without touching the
   shared sheet; it only uses the portal's tokens. */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- tokens */
:root {
  --g-qarluq: #B8573F;   /* terracotta */
  --g-qipchoq: #2F7F7A;  /* deep teal */
  --g-oguz: #D39A2E;     /* saffron */
  --g-none: #E9E1D5;
  --heat-1: #F8D3CC; --heat-2: #F39A8C; --heat-3: #E0503E;
}

/* ------------------------------------------------------------------ hero */
.atlas-page { padding-block: 2.25rem 3.5rem; }
.atlas-hero h1 { margin: .25rem 0 .5rem; font-size: clamp(1.9rem, 4vw, 2.75rem); }
.atlas-hero__lede { max-width: 48rem; color: var(--ink-soft); font-size: 1.05rem; margin: 0; }
.atlas-stats { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.25rem 0 .75rem; }
.atlas-stats div { display: flex; flex-direction: column-reverse; }
.atlas-stats dd { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.atlas-stats dt { font-size: .8rem; color: var(--faint); }

/* ----------------------------------------------------------------- atlas */
.atlas { margin-top: 1.75rem; }
.atlas__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.atlas__tabs a { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; border-radius: 12px 12px 0 0;
                 border: 1px solid var(--line); border-bottom: 0; background: var(--paper-warm); color: var(--ink); }
.atlas__tabs a[aria-selected="true"] { background: var(--white); box-shadow: inset 0 3px 0 var(--accent); }
.atlas__tabs a:hover { background: var(--white); }
.atlas__tab-title { font-weight: 700; }
.atlas__tab-short { display: none; font-weight: 700; }
.atlas--plain[data-mode="lahja"] .uzmap__region path { fill: var(--paper-warm) !important; stroke: var(--map-plain-stroke); }
.atlas__tab-sub { font-size: .8rem; color: var(--faint); }
.atlas__body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); background: var(--white);
               border: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.atlas__map { margin: 0; padding: 1rem 1rem .75rem; border-right: 1px solid var(--line); min-width: 0; }
.atlas__map-scroll { overflow-x: auto; }
.atlas__panel { padding: 1.25rem 1.25rem 1.5rem; min-width: 0; }
.atlas__panel-title { font-size: 1.2rem; margin: 0 0 .5rem; }
.atlas [data-panel], .atlas [data-legend] { display: none; }
.atlas[data-mode="lahja"] [data-panel="lahja"], .atlas[data-mode="soz"] [data-panel="soz"], .atlas[data-mode="gap"] [data-panel="gap"],
.atlas[data-mode="lahja"] [data-legend="lahja"], .atlas[data-mode="soz"] [data-legend="soz"], .atlas[data-mode="gap"] [data-legend="gap"] { display: block; }

.atlas__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: baseline;
                 font-size: .8rem; color: var(--ink-soft); margin-top: .5rem; }
.legend-item { display: inline-flex; align-items: center; gap: .35rem; margin-right: .875rem; }
.atlas__legend-note { display: block; color: var(--faint); margin-top: .25rem; }
.atlas__credit { color: var(--faint); font-size: .72rem; }
.swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; flex: none; }
.swatch--qarluq { background: var(--g-qarluq); } .swatch--qipchoq { background: var(--g-qipchoq); }
.swatch--oguz { background: var(--g-oguz); }
.swatch--none { background: repeating-linear-gradient(45deg, var(--g-none) 0 3px, var(--map-stroke) 3px 6px); border: 1px solid var(--line-strong); }
.swatch--hit { background: var(--accent); }
.swatch--heat1 { background: var(--heat-1); } .swatch--heat2 { background: var(--heat-2); } .swatch--heat3 { background: var(--heat-3); margin-right: .35rem; }

/* ------------------------------------------------------------------ map */
.uzmap { width: 100%; height: auto; display: block; }
.uzmap__hatch-bg { fill: var(--map-stroke); } .uzmap__hatch-line { stroke: var(--g-none); stroke-width: 4; }
.uzmap__region path { fill: var(--paper-warm, #F6F0E7); stroke: var(--map-stroke); stroke-width: 1.6; stroke-linejoin: round;
                      transition: fill .2s ease, fill-opacity .2s ease, opacity .2s ease; }
.uzmap__region:focus-visible { outline: none; }
.uzmap__region:focus-visible path, .uzmap__region.is-active path { stroke: var(--ink); stroke-width: 2.5; }
.uzmap__region.is-city circle { fill: var(--ink); stroke: var(--map-stroke); stroke-width: 3; }
.uzmap__region.is-city path { fill: var(--ink); }

/* by dialect group */
.atlas[data-mode="lahja"] .uzmap__region[data-group="qarluq"] path { fill: var(--g-qarluq); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="qipchoq"] path { fill: var(--g-qipchoq); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="oguz"] path { fill: var(--g-oguz); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="none"] path { fill: url(#uzmap-hatch); stroke: var(--line-strong); }
/* Strength is how clearly one group dominates: the colour deepens with it,
   mixed toward paper rather than made transparent (terracotta at half
   opacity reads as pink). */
.atlas[data-mode="lahja"] .uzmap__region[data-group="qarluq"][data-strength="1"] path { fill: color-mix(in srgb, var(--g-qarluq) 55%, var(--map-mix)); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="qarluq"][data-strength="2"] path { fill: color-mix(in srgb, var(--g-qarluq) 78%, var(--map-mix)); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="qipchoq"][data-strength="1"] path { fill: color-mix(in srgb, var(--g-qipchoq) 55%, var(--map-mix)); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="qipchoq"][data-strength="2"] path { fill: color-mix(in srgb, var(--g-qipchoq) 78%, var(--map-mix)); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="oguz"][data-strength="1"] path { fill: color-mix(in srgb, var(--g-oguz) 55%, var(--map-mix)); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="oguz"][data-strength="2"] path { fill: color-mix(in srgb, var(--g-oguz) 78%, var(--map-mix)); }
.atlas[data-mode="lahja"] .uzmap__region[data-group="qarluq"].is-city circle { fill: var(--g-qarluq); }
.atlas[data-mode="lahja"] .uzmap.has-active .uzmap__region:not(.is-active) path { opacity: .72; }

/* by a word */
.atlas[data-mode="soz"] .uzmap__region.is-hit path { fill: var(--accent); fill-opacity: .85; }
.atlas[data-mode="soz"] .uzmap__region:hover path { fill: var(--accent-wash); }
.atlas[data-mode="soz"] .uzmap__region.is-hit:hover path { fill: var(--accent); fill-opacity: 1; }

/* by a sentence */
.atlas[data-mode="gap"] .uzmap__region[data-heat="1"] path { fill: var(--heat-1); }
.atlas[data-mode="gap"] .uzmap__region[data-heat="2"] path { fill: var(--heat-2); }
.atlas[data-mode="gap"] .uzmap__region[data-heat="3"] path { fill: var(--heat-3); }
.atlas[data-mode="gap"] .uzmap__region:hover path { stroke: var(--ink); stroke-width: 2; }

.uzmap__labels text { font: 600 14px/1 var(--font-ui, Onest, sans-serif); fill: var(--ink); pointer-events: none;
                      paint-order: stroke; stroke: var(--map-halo); stroke-width: 4px; stroke-linejoin: round; }
.atlas[data-mode="soz"] .uzmap__labels text.is-hit { font-size: 17px; font-weight: 700; }

/* ---------------------------------------------------------------- panel */
.atlas__groups { list-style: none; padding: 0; margin: 1rem 0 .75rem; display: grid; gap: .75rem; }
.atlas__groups li { display: flex; gap: .625rem; align-items: flex-start; }
.atlas__groups .swatch { margin-top: .3rem; }
.atlas__form { display: flex; gap: .5rem; margin: .25rem 0 .75rem; }
.atlas__form input, .atlas__form textarea { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--ink); background: var(--white);
                   border: 1px solid var(--line-strong); padding: .5rem .75rem; min-height: 42px; border-radius: 10px; }
.atlas__form textarea { resize: vertical; font-size: 1rem; }
.atlas__form--text { flex-direction: column; align-items: flex-start; }
.atlas__form--text textarea { width: 100%; }
.atlas__form input:focus, .atlas__form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip { display: inline-block; padding: .25rem .625rem; border-radius: 999px; background: var(--paper-warm);
        border: 1px solid var(--line); color: var(--ink); font-size: .85rem; }
.chip:hover, .chip.is-on { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }
.word-forms { list-style: none; padding: 0; margin: 0; display: grid; gap: .375rem; max-height: 26rem; overflow: auto; }
.word-forms li { display: flex; justify-content: space-between; gap: .75rem; padding: .375rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.word-forms li.is-active { background: var(--accent-wash); }
.word-forms__list { text-align: right; color: var(--accent-deep); }
.dx-results { display: grid; gap: .625rem; max-height: 30rem; overflow: auto; margin-top: .75rem; }
.dx-results .dx-out.is-active { background: var(--accent-wash); border-radius: 8px; }
.dx-unchanged a { color: var(--ink-soft); }

/* the region card shown on hover/tap */
.rcard { position: relative; }
.rcard__close { position: absolute; top: -.25rem; right: -.25rem; border: 0; background: transparent; font-size: 1.5rem;
                line-height: 1; color: var(--faint); cursor: pointer; padding: .25rem .5rem; }
.rcard__name { font-size: 1.35rem; margin: 0 1.5rem .5rem 0; }
.rcard__mixlabel { margin: .375rem 0 0; }
.rcard__groups { margin: .625rem 0; color: var(--ink-soft); }
.rcard__points { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .5rem; }
.rcard__points li { border-left: 3px solid var(--line-strong); padding-left: .625rem; }
.rcard__points b { display: block; font-size: .9rem; }
.rcard__points span { font-size: .9rem; }
.rcard__meta { margin: .5rem 0 .875rem; }

.mixbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--g-none); width: 100%; }
.mixbar--lg { height: 10px; border-radius: 5px; }
.mixbar__q { background: var(--g-qarluq); } .mixbar__k { background: var(--g-qipchoq); } .mixbar__o { background: var(--g-oguz); }

/* --------------------------------------------------------- below the map */
.atlas-regions, .atlas-highlights { margin-top: 3rem; }
.region-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem;
               grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.region-tile { display: flex; flex-direction: column; gap: .4rem; padding: .75rem .875rem; background: var(--white);
               border: 1px solid var(--line); border-radius: 12px; color: var(--ink); height: 100%; }
.region-tile:hover, .region-tile.is-active { border-color: var(--ink); }
.region-tile__name { font-weight: 600; }
.region-tile__meta { font-size: .8rem; color: var(--faint); }
.highlight-grid { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.highlight { display: flex; flex-direction: column; gap: .375rem; padding: 1rem 1.125rem; background: var(--white);
             border: 1px solid var(--line); border-radius: 14px; color: var(--ink); }
.highlight:hover { border-color: var(--ink); }
.highlight__region { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.highlight__title { font-weight: 600; font-size: 1.02rem; }
.highlight__pairs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .95rem; margin-top: .25rem; }
.atlas-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-top: 3rem; }

@media (max-width: 900px) {
  .atlas__body { grid-template-columns: 1fr; }
  .atlas__map { border-right: 0; border-bottom: 1px solid var(--line); }
  .atlas-foot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .atlas__tabs { gap: .25rem; }
  .atlas__tabs a { padding: .5rem .5rem; }
  .atlas__tab-sub, .atlas__tab-title { display: none; }
  .atlas__tab-short { display: block; font-size: .95rem; text-align: center; }
  .atlas__map { padding: .5rem .25rem; }
  .uzmap__labels text { font-size: 22px; stroke-width: 5px; }
  .atlas[data-mode="soz"] .uzmap__labels text.is-hit { font-size: 24px; }
  .atlas__panel { padding: 1rem; }
}

/* ----------------------------------------------------------- region page */
.region-page { padding-block: 2.25rem 3.5rem; }
.region-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem); gap: 2rem; align-items: start; }
.region-head h1 { margin: .25rem 0 .75rem; }
.region-head__mix { max-width: 26rem; }
.region-head__mix .mixbar { height: 10px; border-radius: 5px; }
.region-head__mix p { margin: .375rem 0 0; }
.region-head__groups { max-width: 46rem; color: var(--ink-soft); font-size: 1.02rem; margin: 1rem 0 0; }
.region-head__stats { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; font-size: .9rem; color: var(--ink-soft); }
.region-head__stats b { color: var(--ink); font-size: 1.1rem; }
.region-head__locator { display: block; }
.locator { width: 100%; height: auto; display: block; }
.locator path { fill: var(--paper-warm); stroke: var(--map-stroke); stroke-width: 2; }
.locator path.is-here { fill: var(--accent); }
.locator path.is-here[data-group="qarluq"] { fill: var(--g-qarluq); }
.locator path.is-here[data-group="qipchoq"] { fill: var(--g-qipchoq); }
.locator path.is-here[data-group="oguz"] { fill: var(--g-oguz); }
.dx-thin { margin-top: 1.5rem; border-left: 3px solid var(--g-oguz); }

.region-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; margin-top: 2rem;
              padding: 1.25rem 1.375rem; background: var(--paper-warm); border-radius: 16px; }
.region-try h2 { font-size: 1.2rem; margin: 0 0 .375rem; }
.region-try .dx-convert__out { margin-top: .75rem; }

.region-tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; display: flex; gap: .25rem; overflow-x: auto;
               margin-top: 2.5rem; padding: .5rem 0; background: var(--paper); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.region-tabs a { flex: none; padding: .5rem .875rem; border-radius: 999px; color: var(--ink); font-weight: 600; font-size: .92rem; }
.region-tabs a span { font-weight: 400; color: var(--faint); margin-left: .25rem; }
.region-tabs a:hover { background: var(--paper-warm); }
.region-tabs a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.region-tabs a[aria-current="true"] span { color: #C9BBA8; }
.region-page .dx-section { margin-top: 1.5rem; }
.region-page .dx-overview { margin-top: 2rem; }

@media (max-width: 760px) {
  .region-head { grid-template-columns: 1fr; gap: 1rem; }
  .region-head__locator { max-width: 14rem; order: -1; }
  .region-try { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ citations */
.dx-src { font-style: normal; color: var(--ink-soft); border-bottom: 1px dotted var(--line-strong); cursor: help; }
.dx-cite { font-size: .8rem; margin-top: .125rem; }

/* ------------------------------------------------------------ region page */
.dx-toc { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.25rem 0 0;
          padding: .75rem 0; border-block: 1px solid var(--line); }
.dx-section { margin-top: 2.75rem; }
.dx-lede { margin: -.25rem 0 1rem; max-width: 44rem; }
.dx-h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .625rem; }
.dx-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .875rem; }
.dx-rule { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: .875rem 1rem;
           display: flex; flex-direction: column; gap: .375rem; }
.dx-rule.is-live { border-left: 3px solid var(--ok, #2F7A4F); }
.dx-rule p { margin: 0; }
.dx-rule__map { font-size: 1.1rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; }
.dx-rule__title { font-weight: 600; }
.dx-lit { color: var(--ink-soft); }
.dx-dia { color: var(--accent-deep); font-weight: 600; }
.dx-arrow { color: var(--faint, #9A8E7F); }
.dx-examples { list-style: none; margin: .125rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .875rem; }
.dx-rule__foot { margin-top: auto; padding-top: .375rem; display: flex; flex-wrap: wrap; gap: .375rem .625rem; align-items: center; }

.dx-lex { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; font-size: .925rem; }
.dx-lex th { text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint, #9A8E7F);
             padding: .625rem .75rem; border-bottom: 1px solid var(--line); }
.dx-lex td { padding: .625rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.dx-lex tr:last-child td { border-bottom: 0; }

.dx-sources { padding-left: 1.25rem; display: grid; gap: .375rem; }

.dx-overview { margin-top: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: 16px;
               padding: 1.25rem 1.375rem; }
.dx-overview__title { margin: 0; font-size: 1.35rem; }
.dx-overview__groups { margin: .5rem 0 0; color: var(--ink-soft); max-width: 50rem; }
.dx-points { margin: 1rem 0 .75rem; padding-left: 1.25rem; display: grid; gap: .875rem;
             grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); column-gap: 2rem; }
.dx-point p { margin: .25rem 0 .375rem; }
.dx-point__cites { color: var(--faint); margin-top: .25rem; }
.dx-group { border-top: 1px solid var(--line); padding: .5rem 0; }
.dx-group > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .5rem; padding: .375rem 0; }
.dx-group > summary::-webkit-details-marker { display: none; }
.dx-group > summary::before { content: "▸"; color: var(--faint); transition: transform .15s; display: inline-block; }
.dx-group[open] > summary::before { transform: rotate(90deg); }
.dx-group > summary .dx-h3 { margin: 0; }
.dx-group[open] > .dx-rules { margin: .5rem 0 1rem; }

/* ------------------------------------------------------------ converter */
.dx-convert__form { display: grid; gap: .75rem; }
.dx-convert__form textarea { width: 100%; font: inherit; font-size: 1.05rem; padding: .75rem .875rem; resize: vertical;
                             border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); color: var(--ink); }
.dx-convert__form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.dx-convert__row { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
.dx-convert__row select { min-height: 40px; padding: .375rem .625rem; border: 1px solid var(--line-strong);
                          border-radius: 8px; background: var(--white); font: inherit; color: var(--ink); max-width: 100%; }
.dx-convert__out { margin-top: 1.25rem; display: grid; gap: .75rem; }
.dx-convert__out[aria-busy="true"] { opacity: .55; }
.dx-out { border-top: 1px solid var(--line); padding-top: .75rem; }
.dx-out__head { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.dx-out__region { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dx-out__text { font-size: 1.15rem; line-height: 1.9; margin: .25rem 0 0; }
.dx-tok { position: relative; font: inherit; color: var(--accent-deep); background: var(--accent-wash);
          border: 0; border-bottom: 2px solid var(--accent); border-radius: 4px 4px 0 0; padding: 0 .15em; cursor: pointer; }
.dx-tok__why { display: none; position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: max-content; max-width: min(24rem, 80vw);
               background: var(--band); color: var(--band-ink-strong); font-size: .8rem; line-height: 1.45; text-align: left;
               padding: .625rem .75rem; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); white-space: normal; }
.dx-tok__why .faint { color: #C9BBA8; }
.dx-tok__row { display: block; margin-top: .25rem; }
.dx-tok__row cite { font-style: normal; color: #E9C9A8; }
.dx-tok:hover .dx-tok__why, .dx-tok:focus .dx-tok__why, .dx-tok[aria-expanded="true"] .dx-tok__why { display: block; }

@media (max-width: 640px) {
  .dx-search { flex-direction: row; }
  .dx-lex th:nth-child(3), .dx-lex td:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------- sources page */
.source-list { padding-left: 1.5rem; display: grid; gap: .875rem; margin-top: 1.5rem; }
.source-item__head { display: flex; flex-wrap: wrap; gap: .375rem .625rem; align-items: center; }
.source-item__meta { margin-top: .25rem; }