/* Polish layer: motion, focus, touch targets and typography.
   It defines no colors of its own: everything uses the palette tokens from brand.css. */

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Motion: every control answers a touch or hover. */
.btn, button, .icon-btn, .repair-card, .bottom-nav button, input, textarea, select {
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease, opacity .16s ease;
}
.btn:active, .icon-btn:active, .bottom-nav button:active { transform: scale(.97); }
@media (hover: hover) {
  /* Cards lift on hover; the border stays as it is. */
  .repair-card:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: 0 18px 44px #00000030, inset 0 1px 0 #ffffff0d; }
  .btn:hover:not(:disabled) { border-color: var(--blue); }
}

/* Focus: one clear ring for keyboard and switch users. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent);
}

/* Touch targets of at least 44px on controls that are often too small on phones. */
.btn, .icon-btn, .bottom-nav button { min-height: 44px; }
.field input, .field select { min-height: 46px; }
.icon-btn { min-width: 44px; }
.btn:disabled { opacity: .5; cursor: default; }

/* Typography. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.heading h1 { letter-spacing: -.03em; line-height: 1.12; }
.heading-subtitle { max-width: 60ch; }

/* Cards and panels: calm, consistent rhythm. */
.repair-card, .panel { border-radius: var(--radius); }
.panel { padding: 18px; }
.banner, .toast { border-radius: 16px; }

/* Anchors that look like buttons (the dashboard "Схемы" link). */
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Name / confirm dialog */
.ask{width:min(92vw,420px);padding:22px 20px 18px;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.ask::backdrop{background:#000a;backdrop-filter:blur(3px)}
.ask h2{margin:0 0 14px;font-size:20px;line-height:1.2}
.ask-text{margin:0 0 4px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.ask input{display:block;width:100%;min-height:52px;padding:0 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel2);color:var(--text);font:inherit;font-size:17px}
.ask input:focus{outline:2px solid var(--blue);outline-offset:1px}
.ask-actions{display:flex;gap:10px;margin-top:18px}
.ask-actions button{flex:1;min-height:50px;border-radius:16px;font-weight:600}
.ask-actions .danger{border-color:#a24a55;background:#a24a55;color:#fff}

/* Sidebar link to the library (same look as the nav buttons) */
.nav .nav-link{display:flex;align-items:center;gap:12px;padding:12px 11px;border-radius:13px;color:var(--muted);text-decoration:none;font-weight:500;font-size:13px}
.nav .nav-link:hover{background:#3197ff0d;color:var(--text)}
.nav .nav-link svg{width:20px;height:20px;flex:none}
.collapsed .nav .nav-link{justify-content:center;padding:12px 8px}
.collapsed .nav .nav-link span{display:none}

/* Dashboard shortcuts */
.shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}
.shortcut{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--line);border-radius:20px;background:var(--glass,var(--panel));color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.shortcut:hover{border-color:var(--blue)}
.shortcut:active{transform:scale(.98)}
.shortcut-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:#2f97ff26;color:var(--blue)}
.shortcut .shortcut-icon{flex:0 0 44px;height:44px}
.shortcut-icon svg{width:22px;height:22px}
.shortcut .shortcut-text{display:grid;gap:2px;min-width:0;flex:0 1 auto}
.shortcut-text strong{font-size:15px;line-height:1.2}
.shortcut-text small{color:var(--muted);font-size:12px;line-height:1.3}
@media(max-width:420px){.shortcut{flex-direction:column;align-items:flex-start;gap:10px}}
@media(max-width:760px){
  /* The brand is already in the top bar; drop the lone caption above the search. */
  .dashboard-heading{display:none}
  .section-heading h2{font-size:20px}
}

/* On phones the cookie notice sits above the floating bottom navigation instead of covering it. */
@media(max-width:600px){.cookie-notice{bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* ---- Visual refresh (DESIGN-004) --------------------------------------------------
   Same palette; clearer hierarchy, status at a glance, calmer glass and tactile feedback. */

/* Glass edges: a hairline of light on the top edge of floating surfaces. */
.topbar, .bottom-nav, .search-hero, .repair-card, .panel, .shortcut, .calendar-month {
  box-shadow: 0 10px 34px #00000014, inset 0 1px 0 #ffffff0d;
}
html[data-theme=light] .topbar, html[data-theme=light] .bottom-nav, html[data-theme=light] .search-hero,
html[data-theme=light] .repair-card, html[data-theme=light] .panel, html[data-theme=light] .shortcut,
html[data-theme=light] .calendar-month {
  box-shadow: 0 10px 30px #304d6e14, inset 0 1px 0 #ffffffb3;
}

/* Headings: tighter, sentence-like rhythm. */
.heading h1 { letter-spacing: -.035em; }
.section-heading h2 { font-size: 20px; letter-spacing: -.02em; }
.eyebrow { letter-spacing: .14em; }

/* Repair cards: a coloured edge shows the status before any text is read. */
.repair-card { position: relative; overflow: hidden; border-radius: 20px; }
.repair-card::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--line);
}
.repair-card:has(.badge.fixed)::before { background: #29c87e; box-shadow: 0 0 12px #29c87e66; }
.repair-card:has(.badge.partial)::before { background: #ffa754; box-shadow: 0 0 12px #ffa75466; }
.repair-card:has(.badge.unresolved)::before { background: #ff646b; box-shadow: 0 0 12px #ff646b66; }
.repair-card .vehicle-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.repair-card .vehicle-label span { color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.repair-card .card-title { font-size: 17px; line-height: 1.3; letter-spacing: -.012em; }
.repair-card .card-solution {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--muted); line-height: 1.5; min-height: 0; margin: 8px 0 14px;
}
.repair-card .card-footer { gap: 8px; }
.repair-card time { color: var(--muted); font-variant-numeric: tabular-nums; }
.repair-card:active { transform: scale(.99); }
.badge { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.tag { border-radius: 999px; }

/* Primary actions: soft glow that follows the press. */
.btn.primary { box-shadow: 0 8px 22px #136ff140, inset 0 1px 0 #ffffff33; }
.btn.primary:active { box-shadow: 0 3px 10px #136ff133, inset 0 1px 0 #ffffff26; }

/* Search block on the dashboard. */
.search-hero { position: relative; overflow: hidden; }
.search-hero::after {
  content: ""; position: absolute; right: -80px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, #3197ff2e, transparent 70%); pointer-events: none;
}
.search-hero > * { position: relative; z-index: 1; }

/* Floating navigation: the active tab gets a small light dot above its icon. */
.bottom-nav { backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.bottom-nav button { position: relative; }
.bottom-nav button.active::before {
  content: ""; position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue);
}
.bottom-nav .nav-add::before { display: none; }

@media (max-width: 760px) {
  /* "Что ищем?" reads better than a shouted label. */
  .search-hero h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 14px; }
  .search-hero { padding: 20px 18px; border-radius: 26px; }
  /* Shortcut tiles stay in one row: icon on the left, text on the right. */
  .shortcut { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 12px; min-height: 68px; }
  .shortcut .shortcut-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; }
  .shortcut-text strong { font-size: 14px; white-space: nowrap; }
  .shortcut { padding: 12px 10px; gap: 10px !important; }
  .shortcut .shortcut-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .shortcut-text small { font-size: 11.5px; }
  .repair-card .card-title { font-size: 16.5px; }
}

/* Compact feed: shorter cards so more repairs fit on one screen. `html` raises specificity
   above the Android shell's own card rules (android-ui.css). */
html .repair-card { padding: 14px 16px 14px 18px; }
html .repair-card .repair-copy { padding: 0; }
html .repair-card .card-top { margin-bottom: 6px; }
html .repair-card .card-top .icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
html .repair-card .card-title {
  font-size: 15.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html .repair-card .card-solution { -webkit-line-clamp: 1; font-size: 13px; margin: 4px 0 10px; }
html .repair-card .card-footer { min-height: 0; }
html .repair-card .tags { margin-top: 8px; }
html .repair-card .photo-preview { height: 120px; margin: 12px 0 0; width: 100%; border-radius: 12px; }
html .repair-card::before { top: 14px; bottom: 14px; }
html .repairs-grid, html .dashboard-grid { gap: 10px; align-items: start; }
html.android-app .repair-card { margin-bottom: 10px; }