/* Окно встречи v2 — reset, type scale and shared primitives. Owner: agent D.
   Requires tokens.css first.

   Fonts (Google Fonts only; the <link> lives in index.html, phase 1):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap">
   One family for text and times (Onest has tabular digits); fallback stacks are in --f-ui / --f-time.

   Primitives (all ≥ 44×44 px hit area, all states):
     .btn            neutral button          + .btn--primary (accent) | .btn--ghost | .btn--danger | .btn--block
     .chip           pill toggle             selected: aria-pressed="true" | aria-checked="true" | .is-selected
     .icon-btn       44×44 icon-only button  (needs aria-label); pressed/expanded states
     .field          label + control + .field__hint / .field__error
     .input          text input / select / textarea; invalid: aria-invalid="true"
     .vh             visually hidden (screen-reader only)
     .st[data-st]    status word colour: work → --st-ok; early/late → --st-mid; night/off → --st-bad
     .fit-icon[data-rank]  20 px verdict circle: 0 ok, 1 mid (hatched), 2 bad
     .mono, .kbd, .t-* type helpers
   Disabled state: [disabled] or aria-disabled="true" (the latter stays focusable). */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* no px font-size here: the user's root size (125–200 %) must flow into every rem */
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 600px) {
  body { background: var(--bg); }
}
img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button, a, [role="button"], [role="radio"], [role="slider"] { touch-action: manipulation; }
a { color: inherit; }
ul[role], ol[role] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }
[hidden] { display: none !important; }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* sheet titles (h1–h3 with tabindex=-1) receive focus programmatically: no ring for those */
:is(h1, h2, h3)[tabindex="-1"]:focus-visible { outline: none; }

/* ---------- type scale ---------- */
.t-readout { font: var(--fw-bold) var(--fs-readout)/var(--lh-tight) var(--f-time); font-variant-numeric: tabular-nums; }
.t-cell    { font: var(--fw-medium) var(--fs-cell)/var(--lh-tight) var(--f-time); font-variant-numeric: tabular-nums; }
.t-cell-min{ font: var(--fw-medium) var(--fs-cell-min)/var(--lh-tight) var(--f-time); font-variant-numeric: tabular-nums; }
.t-title   { font: var(--fw-semibold) var(--fs-title)/var(--lh-tight) var(--f-ui); }
.t-body    { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--f-ui); }
.t-city    { font: var(--fw-semibold) var(--fs-city)/var(--lh-tight) var(--f-ui); }
.t-meta    { font: var(--fw-regular) var(--fs-meta)/var(--lh-tight) var(--f-ui); }
.t-caption { font: var(--fw-semibold) var(--fs-caption)/var(--lh-tight) var(--f-ui); }
.t-muted   { color: var(--ink-2); }
.mono      { font-family: var(--f-time); font-variant-numeric: tabular-nums; }
.nowrap    { white-space: nowrap; }
.ellipsis  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 var(--sp-1);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  font: var(--fw-medium) var(--fs-caption)/1.6 var(--f-time);
  text-align: center;
  color: var(--ink);
}

/* ---------- .vh ---------- */
.vh:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- .btn ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  color: var(--ink);
  font: var(--fw-semibold) var(--fs-body)/var(--lh-tight) var(--f-ui);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn > svg { font-size: 1.25em; }
.btn:hover { background: color-mix(in srgb, var(--surface-2), var(--ink) 8%); }
.btn:active { background: color-mix(in srgb, var(--surface-2), var(--ink) 14%); transform: translateY(1px); }
.btn[aria-pressed="true"], .btn[aria-expanded="true"] { border-color: var(--ink-2); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent); filter: brightness(.92); } /* darker keeps text contrast in both themes */
.btn--primary:active { background: var(--accent); filter: brightness(.86); }

.btn--ghost { background: transparent; border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--ghost:active { background: color-mix(in srgb, var(--surface-2), var(--ink) 10%); }

.btn--danger { background: transparent; border-color: currentColor; color: var(--danger); }
.btn--danger:hover { background: color-mix(in srgb, var(--surface), var(--danger) 8%); }
.btn--danger:active { background: color-mix(in srgb, var(--surface), var(--danger) 14%); }

.btn--block { display: flex; width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--ink-2);
  filter: none;
  transform: none;
  opacity: .7;
}
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"],
.btn--danger:disabled, .btn--danger[aria-disabled="true"] { background: transparent; border-color: var(--line); }

/* ---------- .icon-btn ---------- */
/* country flag (flags.js): 3:2 with a thin frame so a white stripe does not melt into the page */
.flag {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 0.875rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
  object-fit: cover;
}
.flag--none { display: inline-block; box-shadow: none; } /* keeps rows aligned when a country has no flag */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  border-radius: var(--r-ctl);
  color: var(--ink);
  font-size: 1.25rem; /* icon size: the svg is 1em */
  transition: background-color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { background: color-mix(in srgb, var(--surface-2), var(--ink) 12%); }
.icon-btn[aria-pressed="true"], .icon-btn[aria-expanded="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { color: var(--ink-2); background: transparent; opacity: .55; }
.icon-btn--sm { font-size: 1rem; } /* smaller glyph, same 44 px target */

/* ---------- .chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: var(--fw-medium) var(--fs-body)/var(--lh-tight) var(--f-ui);
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { background: var(--surface-2); }
.chip:active { background: color-mix(in srgb, var(--surface-2), var(--ink) 10%); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.chip:disabled, .chip[aria-disabled="true"] { color: var(--ink-2); background: var(--surface-2); border-color: transparent; opacity: .7; }
.chip > svg { font-size: 1.1em; }

/* ---------- .field / .input ---------- */
.field { display: grid; gap: var(--sp-1); min-width: 0; }
.field > label, .field__label {
  font: var(--fw-semibold) var(--fs-meta)/var(--lh-tight) var(--f-ui);
  color: var(--ink-2);
}
.field__hint  { font-size: var(--fs-meta); color: var(--ink-2); }
.field__error { font-size: var(--fs-meta); color: var(--danger); font-weight: var(--fw-medium); }

.input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  color: var(--ink);
  font: var(--fw-regular) var(--fs-input)/var(--lh-tight) var(--f-ui);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--ink-2); opacity: 1; }
.input:hover { border-color: var(--ink-2); }
.input:focus, .input:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus); /* 1 px border + 1 px ring = 2 px focus frame */
}
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.input:disabled { color: var(--ink-2); opacity: .7; }
select.input {
  appearance: none;
  padding-right: calc(var(--sp-3) + 1.25rem);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
textarea.input { min-height: 6rem; resize: vertical; line-height: var(--lh-body); }
.input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ---------- status word and verdict icon (shared by grid, sheets, bottom bar) ---------- */
.st { display: inline-flex; align-items: center; gap: 0.25em; font: var(--fw-semibold) var(--fs-caption)/var(--lh-tight) var(--f-ui); }
.st > svg { font-size: 1em; }
.st[data-st="work"] { color: var(--st-ok); }
.st[data-st="early"], .st[data-st="late"] { color: var(--st-mid); }
.st[data-st="night"], .st[data-st="off"] { color: var(--st-bad); }

.fit-icon {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;   /* 20 px at the default root size */
  height: 1.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 0.875rem; /* glyph inside; not text */
}
.fit-icon[data-rank="0"] { background: var(--fit-ok); color: var(--on-fit-ok); }
.fit-icon[data-rank="1"] { background: var(--fit-mid-fill); color: var(--on-fit-mid); box-shadow: inset 0 0 0 1px var(--st-mid); }
.fit-icon[data-rank="2"] { background: var(--fit-bad); color: var(--on-fit-bad); }
.fit-icon[data-rank="none"] { background: transparent; color: var(--ink-2); font-size: 1.125rem; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-sheet: 0ms; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Windows high contrast ---------- */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .btn, .chip, .icon-btn, .input { border: 1px solid ButtonText; }
  .chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.is-selected { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .fit-icon { forced-color-adjust: none; border: 1px solid CanvasText; }
}