/* Maplore UI — the one set of controls shared by maplore.in, Machhar
   and Tiddi. Same file in each repo; this copy (machhar web/app/ui.css)
   is canonical — change it here and copy it across.

   Rules: one control height (40px), one control radius (8px), one chevron,
   one focus ring. Panels are square hairline frames; only controls and
   dialogs are rounded. Dialogs scroll in their body, never sideways. */

:root {
  --ui-paper: #F7F7F5;
  --ui-surface: #FFFFFF;
  --ui-ink: #1A1C1F;
  --ui-ink-2: #4A4944;
  --ui-muted: #7C7A73;
  --ui-rule: #E3E1DB;
  --ui-rule-strong: #CFCCC4;
  --ui-track: #ECEBE6;
  --ui-h: 40px;
  --ui-r: 8px;
  --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A4944' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Dark: the same controls on a dark ground. Tokens only; nothing below
   names a colour directly. */
@media (prefers-color-scheme: dark) {
  :root {
    --ui-paper: #1A1C1F;
    --ui-surface: #202226;
    --ui-ink: #ECECEE;
    --ui-ink-2: #C3C2B7;
    --ui-muted: #8A8A86;
    --ui-rule: #2C2C2A;
    --ui-rule-strong: #45464B;
    --ui-track: #26272A;
    --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C3C2B7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Label above or beside a control. */
.ui-label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }

/* Select: native element, our chevron. */
.ui-select {
  appearance: none; -webkit-appearance: none;
  height: var(--ui-h); padding: 0 40px 0 14px;
  font: inherit; font-size: 15px; color: var(--ui-ink);
  background: var(--ui-surface) var(--ui-chevron) no-repeat right 14px center / 12px 8px;
  border: 1px solid var(--ui-rule-strong); border-radius: var(--ui-r);
  cursor: pointer; transition: border-color .15s;
  max-width: 100%;
}
.ui-select:hover { border-color: var(--ui-ink-2); }

/* A button that shows a value and opens a chooser: looks like the select. */
.ui-pick {
  display: inline-flex; align-items: center; gap: 12px;
  height: var(--ui-h); padding: 0 14px 0 16px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ui-ink);
  background: var(--ui-surface); border: 1px solid var(--ui-rule-strong); border-radius: var(--ui-r);
  cursor: pointer; transition: border-color .15s;
}
.ui-pick::after { content: ""; width: 12px; height: 8px; background: var(--ui-chevron) no-repeat center / 12px 8px; }
.ui-pick:hover { border-color: var(--ui-ink-2); }

/* Segmented control. */
.ui-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--ui-track); border-radius: 10px; max-width: 100%; overflow-x: auto; }
.ui-seg > button, .ui-seg > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 16px; border: 0; border-radius: 7px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ui-ink-2); text-decoration: none; white-space: nowrap;
  background: transparent; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s;
}
.ui-seg > button:hover, .ui-seg > a:hover { color: var(--ui-ink); }
.ui-seg > [aria-selected="true"], .ui-seg > [aria-current] {
  background: var(--ui-surface); color: var(--ui-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .04);
}
.ui-seg.sm > button, .ui-seg.sm > a { height: 30px; padding: 0 12px; font-size: 14px; }

/* Buttons. */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ui-h); padding: 0 16px; border-radius: var(--ui-r);
  font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer;
  color: var(--ui-ink); background: var(--ui-surface); border: 1px solid var(--ui-rule-strong);
  transition: border-color .15s, background-color .15s;
}
.ui-btn:hover { border-color: var(--ui-ink-2); }
.ui-btn.primary { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-surface); }
.ui-btn.primary:hover { background: color-mix(in srgb, var(--ui-ink) 85%, var(--ui-surface)); }
.ui-btn.quiet { border-color: transparent; background: transparent; color: var(--ui-ink-2); }
.ui-btn.quiet:hover { background: var(--ui-track); }
.ui-link { font: inherit; color: var(--ui-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-rule-strong); }
.ui-link:hover { text-decoration-color: var(--ui-ink); }

/* One focus ring everywhere. */
.ui-select:focus-visible, .ui-pick:focus-visible, .ui-btn:focus-visible, .ui-link:focus-visible,
.ui-seg > button:focus-visible, .ui-seg > a:focus-visible {
  outline: 2px solid var(--ui-ink); outline-offset: 2px;
}

/* Dialog: head fixed, body scrolls vertically only. */
.ui-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 820px);
  padding: 0; border: 0; border-radius: 12px; color: var(--ui-ink); background: var(--ui-surface);
  box-shadow: 0 24px 70px rgb(0 0 0 / .20); overflow: hidden;
}
.ui-dialog[open] { display: flex; flex-direction: column; }
.ui-dialog::backdrop { background: rgb(26 28 31 / .32); backdrop-filter: blur(2px); }
.ui-dialog__head { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--ui-rule); }
.ui-dialog__head > :first-child { flex: 1; min-width: 0; }
.ui-dialog__body { overflow-y: auto; overflow-x: hidden; padding: 24px; }
.ui-dialog[open] { animation: ui-in .18s ease-out; }
@keyframes ui-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-dialog[open] { animation: none; } }