/* design-os · P4 H4 E4 S4 R4 V4 · register:product · slop:pass
   АРИ ОСНОВА — операторский UI кадастрового скрининга. Система: DESIGN.md.
   4-цветная система из знака (4 треугольника): зелёный=готово/действие,
   синий=данные/в работе, оранжевый=внимание, красный=риск. OKLCH, тон-нейтрали. */

/* Self-hosted Inter (variable) — the whole type scale uses fractional weights
   (620/680/830) that only resolve with the real variable font; without this
   @font-face they silently degraded to the system fallback. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/ui/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Brand — АРИ mark, OKLCH (руководство: #05BC6E #0262DE #FF9F00 #F22409) */
  --green:   oklch(0.70 0.155 158);
  --green-1: oklch(0.96 0.03 158);
  --green-ink: oklch(0.52 0.13 158);   /* text/buttons on light — AA */
  --blue:    oklch(0.53 0.19 258);
  --blue-1:  oklch(0.96 0.03 258);
  --blue-ink: oklch(0.50 0.18 258);
  --orange:  oklch(0.78 0.15 66);
  --orange-1: oklch(0.96 0.04 66);
  --orange-ink: oklch(0.58 0.12 66);
  --red:     oklch(0.58 0.21 30);
  --red-1:   oklch(0.96 0.035 30);
  --red-ink: oklch(0.53 0.20 30);

  /* Neutrals — tinted cool toward the brand blue, never pure gray/white */
  --bg:     oklch(0.975 0.006 250);
  --panel:  oklch(1 0.002 250);
  --ink:    oklch(0.26 0.03 258);
  --ink-2:  oklch(0.44 0.03 258);
  --muted:  oklch(0.58 0.025 258);
  --line:   oklch(0.92 0.01 258);
  --line-2: oklch(0.87 0.014 258);
  --soft:   oklch(0.975 0.008 258);

  --focus: var(--blue);

  --shadow-sm: 0 1px 2px oklch(0.26 0.03 258 / 0.06);
  --shadow: 0 1px 2px oklch(0.26 0.03 258 / 0.05), 0 16px 34px -20px oklch(0.26 0.06 258 / 0.30);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --wrap: min(1200px, calc(100% - 40px));

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  accent-color: var(--green);
}

* { box-sizing: border-box; }

/* base canvas on html so the fixed aurora layer (z-index:-1) never flashes
   edges; body is transparent so that layer shows through in the gutters. */
html { background: var(--bg); }
body {
  margin: 0; min-width: 320px;
  color: var(--ink); background: transparent; position: relative;
  /* clip the full-bleed fixed .aurora layer (inset:-45% → 190vw) so it never
     creates horizontal scroll on narrow viewports (login does the same). */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button {
  min-height: 44px; border: 0; border-radius: var(--r-md); cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 60ms ease;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: wait; opacity: 0.55; }
a { color: var(--blue-ink); text-underline-offset: 2px; }

:focus-visible { outline: 3px solid oklch(0.53 0.19 258 / 0.5); outline-offset: 2px; }

h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2.15rem); line-height: 1.06; letter-spacing: -0.025em; font-weight: 830; text-wrap: balance; }
h2 { font-size: 1.1rem; letter-spacing: -0.01em; font-weight: 780; }

/* Section label — quiet, NOT the tracked-uppercase-green eyebrow cliché */
.eyebrow {
  margin-block-end: 0.3rem;
  color: var(--muted); font-size: 0.82rem; font-weight: 650; letter-spacing: 0;
}
.intro .eyebrow { color: var(--green-ink); font-weight: 700; }
.lead { max-width: 62ch; margin-block-start: 0.5rem; color: var(--muted); font-size: 1rem; line-height: 1.55; }

.skip-link {
  position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 20;
  padding: 0.7rem 1rem; color: #fff; background: var(--ink); border-radius: 999px; transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Shell ------------------------------------------------------------ */

.topbar { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar-inner {
  width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem;
}
.brand-logo-wrap { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; height: 34px; width: auto; }
.topbar-actions { display: flex; align-items: center; gap: 0.7rem; }

/* Signature: the four mark colours as a full-bleed rule — the brand's DNA */
.brand-accent {
  height: 3px;
  background: linear-gradient(90deg,
    var(--green) 0 25%, var(--blue) 25% 50%, var(--orange) 50% 75%, var(--red) 75% 100%);
}

.intro { width: var(--wrap); margin-inline: auto; padding-block: 1.9rem 1.25rem; }

.health-card {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 36px; padding: 0.35rem 0.75rem;
  color: var(--ink-2); font-size: 0.9rem; font-weight: 600;
  background: var(--soft); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
}
.dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-1); }
.dot.ok { background: var(--green); box-shadow: 0 0 0 4px var(--green-1); }
.dot.fail { background: var(--red); box-shadow: 0 0 0 4px var(--red-1); }

/* ---- Grid + panels ---------------------------------------------------- */

.app-grid {
  width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.72fr);
  align-items: start; gap: 1rem; padding-block-end: 3rem;
}
/* Two independent vertical stacks so the result rises right under the form
   (no grid-row void when the progress console is taller than the input). */
.col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.panel {
  position: relative; padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}

/* Colour-coded corner tab per functional area — uses the mark's 4 hues with
   meaning: data=blue, action=green, progress=orange-working, result=green. */
.panel::before {
  content: ""; position: absolute; top: -1px; left: 22px; width: 34px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--tab, var(--line-2));
}
.launch-panel   { --tab: var(--green); }
.progress-panel { --tab: var(--orange); }
.result-panel   { --tab: var(--green); }
.history-panel  { --tab: var(--line-2); }
.chat-panel     { --tab: var(--blue); }

.section-head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-block-end: 1.1rem; }

/* ---- Forms ------------------------------------------------------------ */

.field { display: grid; gap: 0.4rem; margin-block-end: 1rem; }
label { font-weight: 680; font-size: 0.95rem; color: var(--ink); }
input {
  width: 100%; min-height: 48px; padding: 0.75rem 0.9rem;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input::placeholder { color: var(--muted); }
input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-1); }
input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-1); }

/* Native <select> — same shell as text inputs, custom caret, no UA chrome. */
select {
  width: 100%; min-height: 48px; padding: 0.75rem 2.2rem 0.75rem 0.9rem;
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: 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.5 6 6.5 11 1.5' fill='none' stroke='%23667' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
select:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-1); }

/* Native date input — same shell as text inputs, tamed calendar icon. */
input[type="date"] {
  padding-right: 0.6rem; cursor: pointer;
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  padding: 0.3rem; margin-inline-start: 0.4rem; border-radius: var(--r-sm);
  cursor: pointer; opacity: 0.65; transition: opacity 140ms ease, background 140ms ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--soft); }

.hint, .empty-state { color: var(--muted); line-height: 1.5; font-size: 0.92rem; }
.error-text { min-height: 1.3rem; color: var(--red-ink); font-size: 0.9rem; line-height: 1.4; }

.advanced { margin-block: 0.4rem 1rem; padding: 0.85rem; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); }
.advanced summary { min-height: 40px; font-weight: 680; cursor: pointer; }
.advanced-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-block-start: 0.8rem; }
.form-actions, .downloads { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- Buttons ---------------------------------------------------------- */

.primary-button, .secondary-button, .ghost-button, .download-button { padding-inline: 1.15rem; font-weight: 680; font-size: 0.95rem; }
.primary-button { color: #fff; background: var(--green-ink); box-shadow: 0 10px 22px -12px oklch(0.52 0.13 158 / 0.6); }
.primary-button:hover:not(:disabled) { background: oklch(0.46 0.13 158); }
.secondary-button, .ghost-button, .download-button { color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); }
.secondary-button:hover:not(:disabled), .ghost-button:hover:not(:disabled), .download-button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-ink); }
.ghost-button { min-height: 38px; padding-inline: 0.85rem; font-size: 0.9rem; }
.download-button.primary { color: var(--green-ink); background: var(--green-1); border-color: oklch(0.86 0.09 158); }

/* ---- Progress + steps (blue = working, green = done) ------------------ */

progress { width: 100%; height: 0.65rem; border: 0; border-radius: 999px; }
progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--blue); border-radius: 999px; transition: width 300ms ease; }
progress::-moz-progress-bar { background: var(--blue); border-radius: 999px; }
#progressPercent { font-size: 1.15rem; font-weight: 820; letter-spacing: -0.02em; color: var(--blue-ink); }

.current-step { margin-block: 0.9rem 0.3rem; font-weight: 680; color: var(--ink); }
.activity-line { min-height: 1.1rem; margin-block-end: 0.5rem; color: var(--muted); font-size: 0.9rem; font-style: italic; line-height: 1.4; }
.activity-feed { display: grid; gap: 0.15rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.activity-feed li { opacity: 0.85; }

.steps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; padding: 0.7rem 0.8rem; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); }
.step-marker { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: #fff; background: oklch(0.72 0.02 258); border-radius: 999px; font-size: 0.75rem; font-weight: 800; }
.step.done { border-color: oklch(0.88 0.08 158); background: var(--green-1); }
.step.done .step-marker { background: var(--green); }
.step.current { border-color: var(--blue); background: var(--blue-1); box-shadow: 0 0 0 3px var(--blue-1); }
.step.current .step-marker { background: var(--blue); }
.step.error { border-color: oklch(0.86 0.12 30); background: var(--red-1); }
.step.error .step-marker { background: var(--red); }
.step-title { display: block; font-weight: 720; font-size: 0.95rem; }
.step-desc { display: block; margin-block-start: 0.12rem; color: var(--muted); font-size: 0.9rem; line-height: 1.42; }

/* ---- Status pills (green/blue/orange/red) ----------------------------- */

.status-pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 32px; padding: 0.3rem 0.75rem; font-size: 0.86rem; font-weight: 620; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: var(--soft); }
.status-pill.idle { color: var(--muted); }
.status-pill.ok { color: var(--green-ink); background: var(--green-1); border-color: oklch(0.86 0.09 158); }
.status-pill.info { color: var(--blue-ink); background: var(--blue-1); border-color: oklch(0.86 0.08 258); }
.status-pill.warn { color: var(--orange-ink); background: var(--orange-1); border-color: oklch(0.88 0.08 66); }
.status-pill.fail { color: var(--red-ink); background: var(--red-1); border-color: oklch(0.86 0.12 30); }

/* ---- Badges (role/status pills used in admin tables) ------------------ */

.badge { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 620; white-space: nowrap; }
.badge.admin { color: var(--blue-ink); background: var(--blue-1); }
.badge.operator { color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); }
.badge.active { color: var(--green-ink); background: var(--green-1); }
.badge.inactive { color: var(--red-ink); background: var(--red-1); }
.badge.warn { color: var(--orange-ink); background: var(--orange-1); }
.badge.info { color: var(--blue-ink); background: var(--blue-1); }
.badge.muted { color: var(--muted); background: var(--soft); border: 1px solid var(--line); }

/* ---- Result / metrics ------------------------------------------------- */

/* Idle preview — the four report dimensions, each a brand colour (squares
   echo the mark's triangles): data=blue, rules=green, risk=red, output=orange.
   Fills the idle result panel and makes the 4-colour system legible. */
.preview-lead { color: var(--muted); margin: 0 0 0.9rem; font-size: 0.92rem; }
.report-preview { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.report-preview li { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; color: var(--ink-2); font-size: 0.94rem; line-height: 1.45; }
.report-preview strong { color: var(--ink); font-weight: 660; }
.rp-dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-top: 0.26rem; }
.rp-dot[data-c="blue"] { background: var(--blue); }
.rp-dot[data-c="green"] { background: var(--green); }
.rp-dot[data-c="red"] { background: var(--red); }
.rp-dot[data-c="orange"] { background: var(--orange); }

.result-content { display: grid; gap: 0.2rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.metric { min-height: 6.5rem; padding: 0.95rem; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); }
.metric strong { display: block; margin-block-end: 0.4rem; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--ink); }
.metric span { color: var(--muted); font-size: 0.9rem; line-height: 1.42; }

.result-notes { display: grid; gap: 0.5rem; margin-block: 1rem; }
.note { padding: 0.75rem 0.85rem; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); line-height: 1.45; font-size: 0.92rem; }
.downloads { margin-block-start: 1rem; }

/* ---- History ---------------------------------------------------------- */

.history-list { display: grid; gap: 0.55rem; }
.history-item { width: 100%; min-height: auto; padding: 0.8rem 0.85rem; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.history-item:hover:not(:disabled) { border-color: var(--line-2); }
.history-item strong { display: block; margin-block-end: 0.2rem; font-size: 0.95rem; }
.history-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--muted); font-size: 0.86rem; }

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

/* ---- Chat ------------------------------------------------------------- */

.chat-panel { grid-column: 1 / -1; }
.chat-panel .section-head { margin-bottom: 4px; }
.chat-lead { color: var(--muted); font-size: 0.92rem; margin: 0 0 18px; max-width: 68ch; }
.chat-suggests { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 20px; }
.chat-chip { padding: 8px 13px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.chat-chip:hover { border-color: var(--blue); background: var(--blue-1); }
.chat-thread { display: flex; flex-direction: column; }
.chat-thread:empty { display: none; }
.qa-exchange { padding: 18px 0; border-top: 1px solid var(--line); animation: qaIn 200ms ease-out; }
.qa-exchange:first-child { border-top: 0; padding-top: 0; }
.qa-q { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.qa-q::before { content: ""; flex: none; width: 3px; align-self: stretch; margin-top: 2px; background: var(--blue); border-radius: 2px; }
.qa-qtext { font-size: 15px; font-weight: 640; color: var(--ink); line-height: 1.45; }
.qa-a { padding-left: 13px; max-width: 72ch; font-size: 14px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.qa-a strong { color: var(--ink); font-weight: 640; }
.qa-pending { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.qa-pending .bar { height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--soft) 25%, var(--line) 50%, var(--soft) 75%); background-size: 200% 100%; animation: qaShimmer 1.3s infinite linear; }
.qa-pending .bar:nth-child(1) { width: 92%; }
.qa-pending .bar:nth-child(2) { width: 78%; }
.qa-pending .bar:nth-child(3) { width: 60%; }
.chat-form { display: flex; gap: 10px; margin-top: 22px; }
.chat-form input { flex: 1; min-height: 46px; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: var(--r-md); font: inherit; background: var(--panel); color: var(--ink); }
.chat-form input::placeholder { color: var(--muted); }
.chat-form input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-1); }
.chat-form button { min-height: 46px; padding: 0 22px; border-radius: var(--r-md); background: var(--green-ink); color: #fff; font: inherit; font-weight: 640; }
.chat-form button:hover:not(:disabled) { background: oklch(0.46 0.13 158); }
.chat-form button:disabled { opacity: 0.5; cursor: default; }

@keyframes qaIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qaShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 940px) {
  :root { --wrap: calc(100% - 28px); }
  .app-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .advanced-grid, .summary-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: stretch; }
  .form-actions { align-items: stretch; }
  .form-actions > button, .downloads > button { width: 100%; }
  .intro { padding-block: 1.3rem 1rem; }
  /* Header wraps instead of clipping/overflowing: logo on the first row, the
     user actions drop to their own full-width row. */
  .topbar-inner { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem 0.6rem; }
  .topbar-actions { flex-wrap: wrap; gap: 0.4rem; margin-inline-start: auto; }
  .topbar-actions .ghost-button { white-space: nowrap; }
  h1 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
}
@media (prefers-reduced-motion: reduce) {
  .qa-exchange, .qa-pending .bar { animation: none; }
  button:active:not(:disabled) { transform: none; }
}

/* ── Aurora background layer (shared, index/app page) ──────────────────
   Fixed mesh of the four ARI brand colours behind all content. Idle = calm
   slow drift; body.parsing (a live check is running) speeds it up + brightens
   it so the background visibly "comes alive" while the report is building. */
.aurora { position: fixed; inset: -45%; z-index: -1; filter: blur(70px);
  pointer-events: none; transform-origin: center;
  animation: auroraSpin 60s linear infinite; will-change: transform; }
.aurora .blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  opacity: 0.34; will-change: transform; }
.aurora .b1 { background: var(--green);  top: 4%;  left: 6%;   animation: drift1 22s ease-in-out infinite; }
.aurora .b2 { background: var(--blue);   top: 8%;  right: 5%;  animation: drift2 26s ease-in-out infinite; }
.aurora .b3 { background: var(--orange); bottom: 5%; left: 12%; animation: drift3 24s ease-in-out infinite; }
.aurora .b4 { background: var(--red);    bottom: 7%; right: 9%; opacity: 0.26; animation: drift4 28s ease-in-out infinite; }
@keyframes auroraSpin { to { transform: rotate(360deg); } }
@keyframes drift1 { 50% { transform: translate(12vmax, 9vmax) scale(1.18); } }
@keyframes drift2 { 50% { transform: translate(-11vmax, 12vmax) scale(1.1); } }
@keyframes drift3 { 50% { transform: translate(10vmax, -11vmax) scale(1.2); } }
@keyframes drift4 { 50% { transform: translate(-10vmax, -8vmax) scale(1.12); } }

/* parsing in progress → energise the aurora */
.parsing .aurora { animation-duration: 22s; }
.parsing .aurora .blob { opacity: 0.55; animation-duration: 7s; }
.parsing .aurora .b4 { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .aurora, .aurora .blob { animation: none !important; }
}