/* autoiasi.ro — DIRECTION CONTRACT (redesign, code-led, seed 4ca4bf78)
   THESIS: a directory reads like the shop's own painted sign, not a SaaS
   card grid — it refuses the warm-cream/serif/terracotta look every AI
   redesign converges on.
   OWN-WORLD: hand-painted tablă vopsită — flat enamel-green panels on bone
   paper ground, rivet-mounted corners, Bungee for anything that IS a sign
   (wordmark, page h1, category tiles), Lato for anything that lists one
   (listing names, body, labels). One accent: the sign-paint green.
   STORY: a driver in Iași finds a category, reads it like a shop sign,
   picks a listing, calls.
   FIRST VIEWPORT: header as a mounted green nameplate, category rail below
   it, hero panel with the search bar as the one loud action.
   FORM: hand-painted sheet-metal garage signage, direction 3 of 7 grounded
   candidates, assigned by the roll. Raised past origami (verification as a
   visible stamp, not a sentence), past generative identity (every color
   traced to one committed paint hue), past cracktro (editorial listings
   carry more ink weight, not a badge shape).
   FINISH: unreviewed and undocumented is unfinished; this build ends with
   the finish review, the verdict, DESIGN.md, and every shipping raster
   carrying its provenance. */

@view-transition { navigation: auto; }

/* Fonturi gazduite local -- niciun request catre Google Fonts, deci IP-ul
   vizitatorului nu mai ajunge la Google (vezi SECURITY.md, punctul 2).
   Descarcate manual din raspunsul css2 al Google Fonts, cate o greutate
   deodata: cererea combinata wght@500;600;700 intoarce acelasi fisier pentru
   toate cele trei greutati (bug confirmat al endpoint-ului), deci fiecare
   fisier de aici a fost verificat individual, cu hash distinct. */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bungee-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bungee-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lato-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lato-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lato-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lato-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  color-scheme: light;
  /* Bone paper / primed panel ground -- not the cream-peach every AI
     directory ships. Everything below traces back to one committed
     sign-paint hue: enamel garage green. */
  --bg: #f2efe3;
  --bg-tint: #e7e0c9;
  --surface: #faf8ee;
  --surface-2: #f4f0df;
  --fg: #1c1712;
  --muted: #6b6153;
  --line: #ddd3b7;
  --line-strong: #b7a97f;
  --brand: #204c39;          /* enamel garage green, 9.8:1 with bone text */
  --brand-hover: #163a2a;
  --brand-soft: #8a3b22;     /* rust bleed -- decorative only, never behind text */
  --brand-wash: #e2ead9;
  --on-brand: #f6f2e4;
  --link: #204c39;           /* same enamel green as --brand: no second hue */
  --danger: #96291b;
  --ok-bg: #e6efdf;
  --ok-line: #9dc08c;
  --err-bg: #f3e6df;
  --err-line: #d6a186;
  --ring: #204c39;

  --radius: 8px;
  --radius-sm: 4px;
  --radius-pill: 6px;        /* a stamped tag corner, not a soft app pill */

  /* Flush-mounted, not floating: a small solid rise plus a soft cast, like
     a panel sitting proud of the wall rather than an app card glow. */
  --shadow-1: 0 1px 0 rgba(28,23,18,0.10), 0 2px 5px -1px rgba(28,23,18,0.20);
  --shadow-2: 0 2px 0 rgba(28,23,18,0.12), 0 8px 16px -6px rgba(28,23,18,0.30);
  --shadow-3: 0 3px 0 rgba(28,23,18,0.14), 0 12px 26px -10px rgba(28,23,18,0.36);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out, for things arriving */
  --fast: 180ms;
  --base: 240ms;

  /* Bungee marks anything that IS a sign -- the wordmark, a page's own
     headline, a category tile. A listing underneath a sign stays in Lato:
     it's read from a ledger, not painted on a wall. */
  --font-head: "Bungee", "Arial Narrow", "Arial Black", sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Night garage: asphalt ground, the same paint hue lit brighter to
       carry contrast, not a naive inversion. */
    --bg: #16130e;
    --bg-tint: #1e1a12;
    --surface: #221d15;
    --surface-2: #282219;
    --fg: #f1ead9;
    --muted: #b3a488;
    --line: #362e1e;
    --line-strong: #4c4128;
    --brand: #4fae7c;         /* enamel green, brightened for dark ground */
    --brand-hover: #6fc79a;
    --brand-soft: #cc7a52;
    --brand-wash: #1d2a1f;
    --on-brand: #0d1a10;
    --link: #4fae7c;
    --danger: #e18a6c;
    --ok-bg: #17251b;
    --ok-line: #34573c;
    --err-bg: #2a1c14;
    --err-line: #6c3e26;
    --ring: #4fae7c;
    --shadow-1: 0 1px 0 rgba(0,0,0,0.45), 0 2px 5px -1px rgba(0,0,0,0.55);
    --shadow-2: 0 2px 0 rgba(0,0,0,0.50), 0 10px 20px -8px rgba(0,0,0,0.65);
    --shadow-3: 0 3px 0 rgba(0,0,0,0.55), 0 16px 32px -12px rgba(0,0,0,0.72);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

::selection { background: var(--brand); color: var(--on-brand); }

button, input, select, textarea { accent-color: var(--brand); }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 82%, var(--surface)); opacity: 1; }
input, select, textarea { caret-color: var(--brand); }

h1, h2, h3 { font-family: var(--font-body); font-weight: 700; line-height: 1.2; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Fara border-radius aici: ar rescrie forma elementului la focus, iar colturile
   ar sari (input 10px -> 4px, chips rotunde -> aproape drepte). Outline-ul
   urmeaza oricum raza proprie a elementului. */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

svg { width: 18px; height: 18px; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: var(--space-2); z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.skip:focus { left: var(--space-4); }

main, .site-footer { max-width: 64rem; margin-inline: auto; padding-inline: var(--space-4); }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 2px solid var(--line-strong);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(14px) saturate(1.4); }
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  max-width: 64rem; margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-head); font-weight: 400; font-size: 1.15rem;
  color: var(--fg); text-decoration: none; letter-spacing: 0;
}
.brand strong { color: var(--brand); font-weight: 400; }
.brand-tld { color: var(--muted); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand);
  box-shadow: var(--shadow-1);
}

/* Category rail: reachable from every page, scrolls sideways when it doesn't
   fit. Constrained to the site's own column (not the viewport) so on desktop
   the rail, its scroll edges, and its fade line up with the header and main
   content instead of bleeding into empty margin. */
.catbar {
  position: relative;
  border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
  max-width: 64rem; margin-inline: auto;
}
.catbar::-webkit-scrollbar { display: none; }

/* Fade only appears on the side there's actually more to scroll to (JS
   toggles these), so it reads as "more here" instead of a decorative edge. */
.catbar::before, .catbar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--space-4);
  pointer-events: none; opacity: 0; transition: opacity var(--fast) var(--ease);
}
.catbar::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.catbar::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.catbar.can-scroll-left::before { opacity: 1; }
.catbar.can-scroll-right::after { opacity: 1; }

.catbar-track {
  display: flex; gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
}

.catbar-item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); min-height: 44px;
  border-radius: var(--radius-pill);
  color: var(--muted); text-decoration: none; white-space: nowrap;
  font-size: 0.9rem; font-weight: 700;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.catbar-item:hover { background: var(--bg-tint); color: var(--fg); }
.catbar-item.is-active { background: var(--brand); color: var(--on-brand); }
.catbar-icon { display: inline-flex; }
.catbar-icon svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  margin-block: var(--space-5) var(--space-6);
  padding: var(--space-6);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
/* Rivets: a panel screwed to the wall, not a card floating over it. */
.hero::before, .hero::after {
  content: ""; position: absolute; top: 10px; width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--surface) 60%, white), var(--line-strong) 70%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.35);
}
.hero::before { left: 10px; }
.hero::after { right: 10px; }

.hero-inner { max-width: 40rem; }

/* Pe acasa cautarea e unealta principala, deci titlul sta pe un rand si nu
   impinge caseta sub linia de plutire pe telefon. */
.hero-home h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); margin-bottom: var(--space-2); }
.hero-home .lede { margin-bottom: var(--space-4); font-size: 1.02rem; }

.hero-compact {
  margin-block: var(--space-5) var(--space-5);
  padding: var(--space-6);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand);
}

h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
}
.hero h1 {
  font-family: var(--font-head); font-weight: 400;
  color: var(--brand); letter-spacing: -0.01em;
}
.h1-accent { color: var(--muted); font-family: var(--font-body); font-weight: 700; }

.lede {
  margin: 0 0 var(--space-5); max-width: 34rem;
  color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}

.section-title {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-7) 0 var(--space-4);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.section-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

.crumbs { padding-top: var(--space-5); font-size: 0.9rem; color: var(--muted); }
.crumbs span[aria-hidden] { margin-inline: var(--space-1); }

/* ------------------------------------------------------------------ search */

.search { margin: 0 0 var(--space-4); }

.search-row { display: flex; align-items: stretch; gap: var(--space-2); }

.search-field { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }

.search-icon {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
  display: flex; color: var(--muted); pointer-events: none;
}

.search input {
  flex: 1 1 auto; min-width: 0; min-height: 56px;
  padding: var(--space-2) var(--space-4) var(--space-2) 3rem;
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg);
  font-family: var(--font-body); font-size: 16px;
  appearance: none;   /* iOS deseneaza input[type=search] ca pastila, cu alt padding */
  transition: border-color var(--fast) var(--ease);
}
.search input::-webkit-search-decoration { appearance: none; }
.search input:hover { border-color: var(--muted); }

/* Fara salt de umbra sau de raza la focus: doar inelul, in forma campului. */
/* Doar inelul pe focus, fara al doilea contur: offset negativ trage inelul
   peste chenarul campului (2px), nu langa el la o distanta care se vede ca
   o a doua bordura. */
.search input:focus-visible { outline-offset: -2px; }

.search button { flex: 0 0 auto; min-height: 56px; padding-inline: var(--space-5); }

.popular { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.popular[hidden] { display: none; }   /* higher specificity than .popular beats [hidden]'s UA style otherwise losing to it */
.popular-label {
  color: var(--muted); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* -------------------------------------------------------------- categories */

.cats {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

/* Each tile is its own painted sign for the trade -- flat panel, rivet
   corners, no floaty card-lift. Feedback is the paint deepening, not a
   hover shadow chasing an icon. */
.cat {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); min-height: 84px;
  background: var(--surface); border: 2px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  color: var(--fg); text-decoration: none;
  transition: background-color var(--base) var(--ease), border-color var(--base) var(--ease),
              box-shadow var(--base) var(--ease);
}
.cat::before, .cat::after {
  content: ""; position: absolute; top: 8px; width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--surface) 60%, white), var(--line-strong) 70%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.35);
}
.cat::before { left: 8px; }
.cat::after { right: 8px; }
.cat:hover { background: var(--brand-wash); border-color: var(--brand); box-shadow: var(--shadow-2); }
.cat:active { background: var(--brand-wash); }

.cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand);
}

.cat-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.cat-name { font-family: var(--font-head); font-weight: 400; font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.005em; }
.cat-count { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cat-arrow { color: var(--line-strong); transition: transform var(--base) var(--ease), color var(--base) var(--ease); }
.cat:hover .cat-arrow { transform: translateX(3px); color: var(--brand); }

.soon { margin-top: var(--space-4); color: var(--muted); font-size: 0.92rem; }

/* ------------------------------------------------------------------- cards */

.cards {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

/* A listing reads like a ledger entry, not a second sign: flatter, quieter
   than .cat, so the category tiles stay the loudest thing on the page. */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card[id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

.card-name { margin: 0 0 var(--space-2); font-size: 1.2rem; }
/* Editorial listings carry more ink, not a bigger badge: a rule under the
   name, in the one committed paint hue. Right padding clears the stamp on
   every wrapped line, not just the first. */
.card-verified .card-name {
  border-bottom: 2px solid var(--brand); padding-bottom: var(--space-1);
  padding-right: 60px;
}

.stamp {
  position: absolute; top: var(--space-4); right: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--brand); color: var(--brand);
  font-family: var(--font-body); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.03em; text-transform: uppercase; text-align: center;
  line-height: 1.05; transform: rotate(-8deg);
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { .stamp { mix-blend-mode: normal; } }

.card-cat { margin: 0 0 var(--space-3); font-size: 0.78rem; }
.card-cat a {
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--bg-tint); color: var(--muted); text-decoration: none;
}
.card-cat a:hover { color: var(--brand); }

.meta {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin: 0 0 var(--space-2); color: var(--muted); font-size: 0.95rem;
}
.meta svg { margin-top: 4px; color: var(--line-strong); }
.meta-unknown span { font-style: italic; }

.area {
  display: inline-block; margin-left: var(--space-1);
  padding: 1px var(--space-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); font-size: 0.76rem; white-space: nowrap;
}

.details {
  margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--brand-soft) 42%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--bg-tint); color: var(--fg);
  font-size: 0.9rem; overflow-wrap: anywhere;
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }
/* Call is the one action that matters most: its own full-width row. Hartă
   and Site share the row under it, evenly split regardless of label length. */
.actions .btn-call { flex: 1 1 100%; }
.actions .btn:not(.btn-call) { flex: 1 1 0; min-width: 0; }

.provenance {
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  color: var(--muted); font-size: 0.79rem; line-height: 1.45;
}

.empty { padding: var(--space-6) 0; color: var(--muted); }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg);
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { border-color: var(--brand); box-shadow: var(--shadow-1); }
.btn:focus-visible { border-color: var(--brand); }
.btn:active { transform: translateY(1px); }

.btn-call {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow-1);
}
.btn-call:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: var(--shadow-2); }

.btn-ghost { background: transparent; border-color: var(--line-strong); font-size: 0.9rem; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }
.btn-submit { width: 100%; min-height: 54px; font-size: 1.05rem; }

/* ------------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--fg);
  font-size: 0.88rem; font-weight: 700; text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.chip:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
.chip-n {
  margin-left: var(--space-2); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--bg-tint);
  font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums;
}

.related { margin-top: var(--space-8); }
.freshness { margin: var(--space-2) 0 0; color: var(--muted); font-size: 0.85rem; }

/* -------------------------------------------------------------------- form */

/* Fara cutie: formularul foloseste toata latimea paginii, iar campurile stau
   intr-o grila de doua coloane pe ecran larg. Un input singur intins pe 64rem
   ar fi mai greu de citit, nu mai usor. */
.form {
  margin-bottom: var(--space-8);
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .form { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .field-wide { grid-column: 1 / -1; }
}

.field { margin-bottom: 0; min-width: 0; }
.field label { display: block; margin-bottom: var(--space-1); font-weight: 700; font-size: 0.95rem; }
.req { color: var(--danger); }
.hint { margin: 0 0 var(--space-2); color: var(--muted); font-size: 0.85rem; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: var(--space-3);
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg);
  font-family: var(--font-body); font-size: 16px; /* 16px stops iOS zoom-on-focus */
  transition: border-color var(--fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brand); }
.field select { cursor: pointer; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--danger); }

.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; font-family: var(--font-body); }

.error { margin: var(--space-2) 0 0; color: var(--danger); font-size: 0.88rem; font-weight: 700; }
.fineprint { margin: 0; color: var(--muted); font-size: 0.82rem; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  margin-bottom: var(--space-5); padding: var(--space-4);
  border: 2px solid var(--line-strong); border-radius: var(--radius);
  font-size: 0.95rem;
}
.notice p { margin: 0 0 var(--space-2); }
.notice ul { margin: 0; padding-left: var(--space-5); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice-error { background: var(--err-bg); border-color: var(--err-line); }

.empty-state { padding-block: var(--space-4) var(--space-7); }
.empty-state p { color: var(--muted); }
.empty-state .empty {
  padding: 0 0 var(--space-2);
  color: var(--fg); font-size: 1.15rem; font-family: var(--font-body); font-weight: 700;
}

/* ------------------------------------------------------------------- admin */

.count-pill {
  display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.8rem; color: var(--fg); font-variant-numeric: tabular-nums;
}
.admin-row { margin-bottom: var(--space-3); }

/* ------------------------------------------------------------------ footer */

.site-footer {
  margin-top: var(--space-8); padding-block: var(--space-6) var(--space-7);
  border-top: 2px solid var(--line-strong);
  color: var(--muted); font-size: 0.9rem;
}
.site-footer a { text-underline-offset: 4px; }
.footer-grid { display: grid; gap: var(--space-4); }
.footer-grid p { margin: 0 0 var(--space-2); }
.footer-brand { font-family: var(--font-head); font-weight: 400; font-size: 1rem; color: var(--fg); }
.footer-brand strong { color: var(--brand); font-weight: 400; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-content: start; }
.footer-grid nav a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-note {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--line); font-size: 0.84rem;
}

/* ------------------------------------------------------------------ motion */

/* One authored moment: content arrives like a brush pass, wiped in from the
   left rather than fading up. Everything else is hover feedback only. */
@keyframes paint-in {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.cats > *, .cards > * { animation: paint-in var(--base) var(--ease) backwards; }
.cats > :nth-child(1),   .cards > :nth-child(1)   { animation-delay: 0ms; }
.cats > :nth-child(2),   .cards > :nth-child(2)   { animation-delay: 40ms; }
.cats > :nth-child(3),   .cards > :nth-child(3)   { animation-delay: 80ms; }
.cats > :nth-child(4),   .cards > :nth-child(4)   { animation-delay: 120ms; }
.cats > :nth-child(5),   .cards > :nth-child(5)   { animation-delay: 160ms; }
.cats > :nth-child(6),   .cards > :nth-child(6)   { animation-delay: 200ms; }
.cats > :nth-child(7),   .cards > :nth-child(7)   { animation-delay: 240ms; }
.cats > :nth-child(n+8), .cards > :nth-child(n+8) { animation-delay: 280ms; }

.hero-inner > * { animation: paint-in var(--base) var(--ease) backwards; }
.hero-inner > :nth-child(2) { animation-delay: 50ms; }
.hero-inner > :nth-child(3) { animation-delay: 100ms; }
.hero-inner > :nth-child(4) { animation-delay: 150ms; }
.hero-inner > :nth-child(5) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cat:active, .btn:active { transform: none; }
}

/* ------------------------------------------------------------- small screen */

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .bar { gap: var(--space-2); }
  .brand { font-size: 1rem; }
  .brand-mark { width: 30px; height: 30px; }
  .add-link { padding-inline: var(--space-3); font-size: 0.86rem; }
  .hero { padding: var(--space-5) var(--space-4); margin-block: var(--space-3) var(--space-5); }
  .hero-compact { padding: var(--space-5) var(--space-4); }
  .section-title { margin-top: var(--space-6); }
}

@media (max-width: 30rem) {
  .bar { padding-inline: var(--space-3); }
  main, .site-footer { padding-inline: var(--space-3); }
  .brand { gap: 6px; }
  .search-row { flex-wrap: wrap; }
  .search-field, .search button { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------- legal */

.legal { max-width: 44rem; }          /* text lung: lungime de rand lizibila */
.legal-section { margin-bottom: var(--space-6); }
.legal-section h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.2rem;
}
.legal-section p { margin: 0 0 var(--space-3); }
.legal-section ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.legal-section li { margin-bottom: var(--space-2); }
.legal-links { list-style: none; padding-left: 0; }

.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-content: start; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; }

/* -------------------------------------------------------------- live search */

/* Butonul dispare doar cand JS a preluat cautarea; fara JS ramane necesar. */
.search.is-live button[type="submit"] { display: none; }

.live-results[aria-busy="true"] { opacity: 0.55; transition: opacity var(--fast) var(--ease); }

.result-count {
  margin: 0 0 var(--space-4);
  color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums;
}