/* ---------------------------------------------------------------
   Anutosh, s.r.o. — presentation site
   Plain CSS, no build step. Light + dark, container-free layout.
   --------------------------------------------------------------- */

:root {
  --bg: #f7f7f5;
  --bg-alt: #eeeeea;
  --surface: #ffffff;
  --surface-2: #f2f2ee;
  --ink: #16171a;
  --ink-2: #4a4d55;
  --ink-3: #7c8089;
  --line: #dcdcd6;
  --accent: #b4532a;
  --accent-soft: #f0e0d7;
  --accent-ink: #8a3d1d;
  --radius: 10px;
  --wrap: 1120px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101113;
    --bg-alt: #16181b;
    --surface: #1a1c20;
    --surface-2: #212429;
    --ink: #ecedf0;
    --ink-2: #b4b8c0;
    --ink-3: #82868f;
    --line: #2c2f35;
    --accent: #e08a5e;
    --accent-soft: #33241c;
    --accent-ink: #f0a37b;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }
a:hover { color: var(--accent); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

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

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

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { color: var(--accent); font-size: 1.15rem; }
.brand__text strong { font-weight: 650; letter-spacing: 0.02em; }
.brand__text small { color: var(--ink-3); font-size: 0.8rem; }

.site-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a.is-active { color: var(--accent-ink); background: var(--accent-soft); }

.nav-toggle, .nav-burger { display: none; }

.langswitch { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
.langswitch a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-3);
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
}
.langswitch a:hover { color: var(--ink); background: var(--surface-2); }
.langswitch a.is-active { background: var(--accent); color: #fff; }

@media (max-width: 760px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px; height: 34px;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px;
  }
  .nav-burger span { display: block; height: 2px; background: var(--ink-2); }
  .site-nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    padding-bottom: 0.75rem;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-header__inner { flex-wrap: wrap; }
}

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

.hero {
  padding: clamp(3rem, 8vw, 6rem) 0 3rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60rem 22rem at 12% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}

.hero__title {
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
  max-width: 18ch;
  font-weight: 600;
}

.hero__lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink-2);
  max-width: 62ch;
  margin: 1.25rem 0 0;
}

.hero__intro {
  color: var(--ink-3);
  max-width: 62ch;
  margin: 1rem 0 0;
}

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 1.5rem;
  align-items: start;
}

.hero__copy { min-width: 0; }
.hero__card { margin: 0; }

@media (max-width: 860px) {
  .hero__layout { grid-template-columns: 1fr; }
}

.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }

.btn {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { color: #fff; }

.stats {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--surface); padding: 1.1rem 1.25rem; }
.stat__value {
  display: block;
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.stat__label { display: block; font-size: 0.83rem; color: var(--ink-3); }

/* ---------- generic sections ---------- */

.page-head {
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.page-head__title { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 600; }
.page-head__lead { color: var(--ink-2); max-width: 65ch; margin: 0.9rem 0 0; }

.section { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section__head { margin-bottom: 1.75rem; }
.section__title { font-size: 1.45rem; font-weight: 600; }
.section__sub { color: var(--ink-3); margin: 0.4rem 0 0; max-width: 60ch; }
.section__more { margin-top: 1.75rem; }

.empty {
  color: var(--ink-3);
  font-style: italic;
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin: 0;
}

/* ---------- capability grid ---------- */

.cap-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cap-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.8rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.cap-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cap-card__icon { grid-row: 1 / 3; font-size: 1.3rem; color: var(--accent); line-height: 1.4; }
.cap-card__title { font-weight: 600; }
.cap-card__summary { font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }

.cap-detail { margin-top: 1.25rem; }

.detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.4rem;
  animation: fade-in 0.2s ease;
}
.detail__head { display: flex; gap: 1rem; align-items: flex-start; }
.detail__icon { font-size: 1.6rem; color: var(--accent); }
.detail__title { font-size: 1.2rem; font-weight: 600; }
.detail__summary { color: var(--ink-2); margin: 0.35rem 0 0; max-width: 65ch; }
.detail__count {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  margin: 1.25rem 0 0.5rem;
}
.detail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.detail__list li { display: flex; gap: 0.9rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.detail__year { font-family: var(--mono); font-size: 0.85rem; color: var(--accent-ink); min-width: 3.5rem; }
.detail__meta { color: var(--ink-3); font-size: 0.85rem; }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

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

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem;
}
.card__period { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); margin: 0 0 0.5rem; }
.card__title { font-size: 1.1rem; font-weight: 600; }
.card__role { color: var(--accent-ink); font-size: 0.88rem; margin: 0.3rem 0 0.7rem; }
.card__text { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 0.9rem; }

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

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-2);
  background: var(--surface-2);
  white-space: nowrap;
}
.chip--active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.chips--active { margin-left: 0.75rem; }

.chips--cloud { gap: 0.4rem; }
.chips--cloud .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; }
.chips--cloud .chip a { text-decoration: none; color: inherit; }
.chips--cloud .chip:hover { border-color: var(--accent); }
.chip__count { color: var(--ink-3); font-size: 0.68rem; }
.chip--w2 { font-size: 0.8rem; }
.chip--w3 { font-size: 0.87rem; color: var(--ink); }
.chip--w4 { font-size: 0.95rem; color: var(--ink); border-color: var(--accent); }

/* Brand glyphs sit in the chip at text size and take the text colour — one em, one
   colour, no logo louder than its neighbour. Names without a mark stay text-only. */
.tech-icon { width: 1em; height: 1em; flex: none; color: var(--ink-3); }
.chips--cloud .chip:hover .tech-icon { color: var(--accent); }

/* ---------- the stack carousel under the hero numbers ----------

   An endless strip rather than a slideshow: these are peers with no order and no first
   item, so there is nothing for slides, dots or arrows to mean. The track carries the
   tiles twice and travels the width of exactly one copy, which puts it back where it
   started — the loop never shows a seam and needs no script. It drifts slowly enough to
   read at a glance and pauses under the pointer.                                        */

.stack { margin-top: 2.75rem; }

/* The rule runs from the caption to the edge, marking where the strip begins. */
.stack__caption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
}
.stack__caption::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.stack__viewport {
  --tile: clamp(5.75rem, 8.5vw, 7.5rem);
  --tile-gap: 0.6rem;
  overflow: hidden;
  /* Tiles fade at both ends instead of being sliced, so the strip reads as continuing
     past the frame rather than being clipped by it. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.stack__track {
  display: flex;
  width: max-content;
  animation: stack-drift 52s linear infinite;
}
.stack__viewport:hover .stack__track,
.stack__viewport:focus-within .stack__track { animation-play-state: paused; }

/* Every tile carries its own right margin rather than the track using `gap`: it keeps the
   two copies exactly equal in width, which is what makes -50% land on the seam. */
.stack__group { display: flex; list-style: none; margin: 0; padding: 0; }

@keyframes stack-drift {
  to { transform: translateX(-50%); }
}

.stack__tile {
  flex: none;
  width: var(--tile);
  height: var(--tile);
  margin-right: var(--tile-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.stack__mark { width: 40%; height: 40%; color: var(--ink-2); }

/* A mark that already spells the name carries the tile alone, so it gets the room the
   label would have taken. The name is still in the markup for screen readers. */
.stack__tile--mark-only .stack__mark { width: 58%; height: 58%; }
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stack__name {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.1;
  color: var(--ink-3);
}

/* The marks their owners do not license for this use. Spelled out at the size the logos
   are drawn at, on the quieter surface, so the tile reads as a wordmark and not as a logo
   that failed to load. */
.stack__tile--word { background: var(--surface-2); border-color: var(--line); }
.stack__word {
  font-family: var(--mono);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  /* Fill the tile: a mono glyph advances about 0.62em, so this is the size at which the
     longest string still clears the padding. Capped so the short names stay in the family. */
  font-size: min(2.1rem, calc((var(--tile) - 1rem) / (var(--chars) * 0.62)));
}

/* ---------- filters ---------- */

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  display: grid;
  gap: 0.9rem;
}
.filters__row {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 2fr 1fr 1fr;
}
.filters__row--quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
.filters__hint { font-size: 0.8rem; color: var(--ink-3); margin-right: 0.25rem; }

@media (max-width: 720px) {
  .filters__row { grid-template-columns: 1fr; }
}

.field { display: grid; gap: 0.3rem; }
.field__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}

.tagbtn {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
}
.tagbtn:hover { border-color: var(--accent); color: var(--ink); }
.tagbtn.is-active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.tagbtn--reset { color: var(--ink-3); }

.result-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.5rem 0 1rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}
.result-head__count strong { color: var(--ink); font-size: 1.05rem; }

/* ---------- spinner ---------- */

.spinner {
  display: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-ink);
  padding: 0.5rem 0;
}
.htmx-request .spinner,
.spinner.htmx-request { display: block; }
.htmx-indicator.htmx-request { display: block; }

/* ---------- timelines ---------- */

.timeline, .track { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.timeline__item, .track__item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.25rem;
}
@media (max-width: 700px) {
  .timeline__item, .track__item { grid-template-columns: 1fr; gap: 0.4rem; }
}

.timeline__period, .track__period {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-3);
  padding-top: 1.35rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding-right: 0.75rem;
}
@media (max-width: 700px) {
  .timeline__period, .track__period {
    flex-direction: row;
    gap: 0.5rem;
    border-right: 0;
    padding: 0;
  }
  .timeline__to::before, .track__to::before { content: "— "; }
}
.timeline__from, .track__from { color: var(--accent-ink); }

.timeline__card, .track__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
}

.timeline__domain, .track__badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  margin: 0 0 0.6rem;
}
.timeline__title, .track__role { font-size: 1.08rem; font-weight: 600; }
.timeline__role { color: var(--ink-3); font-size: 0.85rem; margin: 0.25rem 0 0.7rem; }
.timeline__text { color: var(--ink-2); font-size: 0.93rem; margin: 0 0 0.9rem; }
.track__org { margin: 0.3rem 0 0.7rem; color: var(--ink-2); font-size: 0.92rem; }
.track__note { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 0.8rem; }

/* ---------- era switch ---------- */

.era-switch { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.era {
  font: inherit;
  cursor: pointer;
  display: grid;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  color: var(--ink-2);
}
.era strong { font-size: 0.92rem; font-weight: 600; }
.era small { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.era:hover { border-color: var(--accent); }
.era.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.era.is-active small { color: var(--accent-ink); }

/* ---------- skills ---------- */

.skillgroup { margin-bottom: 2rem; }
.skillgroup__title {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.8rem;
}
.skills { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.skill {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.skill__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.skill__name { font-weight: 550; }
.skill__level { font-family: var(--mono); font-size: 0.75rem; color: var(--accent-ink); }
.meter {
  height: 6px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  margin: 0.55rem 0 0.35rem;
}
.meter__fill { height: 100%; background: var(--accent); border-radius: 99px; }
.skill__praxis { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }

.courses { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.course { display: flex; gap: 1rem; background: var(--surface); padding: 0.7rem 1.1rem; }
.course__year { font-family: var(--mono); color: var(--accent-ink); min-width: 3.5rem; }
.course__name { color: var(--ink-2); font-size: 0.94rem; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; }
.langs { border-collapse: collapse; width: 100%; min-width: 34rem; }
.langs th, .langs td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.langs thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.langs tbody th { font-weight: 600; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 0.5rem; }
.dot { width: 8px; height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.dot.is-on { background: var(--accent); border-color: var(--accent); }
.dots__label { font-size: 0.8rem; color: var(--ink-3); }

/* ---------- contact ---------- */

.contact { display: grid; gap: 1rem; grid-template-columns: minmax(320px, 1.15fr) minmax(280px, 1fr); align-items: start; }
.contact__side { display: grid; gap: 1rem; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.contact__lead { color: var(--ink-3); font-size: 0.92rem; margin: -0.5rem 0 1.1rem; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.panel--muted { background: var(--surface-2); margin-top: 1.5rem; }
.hero__card { padding-top: 2rem; }
.panel__title { font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.contact__list { display: grid; grid-template-columns: 8rem 1fr; gap: 0.55rem 1rem; margin: 0; }
.contact__list dt { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.contact__list dd { margin: 0; color: var(--ink-2); }
.placeholder { color: var(--ink-3); font-style: italic; }
.panel__points { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.6rem; color: var(--ink-2); font-size: 0.94rem; }

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

.cform { display: grid; gap: 1rem; }
.cform .field__label { text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: var(--ink-2); }
.cform .field__opt { color: var(--ink-3); font-weight: 400; }
.cform input,
.cform textarea {
  font: inherit;
  font-size: 0.94rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}
.cform input:focus, .cform textarea:focus { border-color: var(--accent); }
.cform input[aria-invalid="true"],
.cform textarea[aria-invalid="true"] { border-color: #c0392b; }
.field__error { color: #c0392b; font-size: 0.82rem; margin: 0.3rem 0 0; }

.cform__foot { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.cform__legal { font-size: 0.74rem; color: var(--ink-3); margin: 0; line-height: 1.5; }

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

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--surface-2);
  animation: fade-in 0.2s ease;
}
.notice p { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.notice--ok { border-left-color: #2e8b57; }
.notice--warn { border-left-color: #c0392b; }

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 2.5rem 0;
  margin-top: 2rem;
}
.site-footer__inner {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}
.site-footer__brand { font-weight: 600; margin: 0; }
.site-footer__note, .site-footer__meta { color: var(--ink-3); font-size: 0.86rem; margin: 0.3rem 0 0; }
.site-footer__nav { display: flex; flex-direction: column; gap: 0.35rem; }
.site-footer__nav a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; }
.site-footer__nav a:hover { color: var(--accent); }

/* ---------- accounts ---------- */

/* A button that has to read as a link — used for actions that must be POSTed
   (sign out, approve) but belong visually among the navigation links. */
.linklike {
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
}
.linklike:hover { background: var(--surface-2); color: var(--ink); }
.linklike--danger:hover { color: #c0392b; }

.site-nav__form { display: inline-flex; }
.site-nav__cta {
  border: 1px solid var(--line);
  color: var(--ink) !important;
}
.site-nav__cta:hover { border-color: var(--accent); }

.btn--danger { border-color: #c0392b; color: #c0392b; }
.btn--danger:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

.auth__wrap { max-width: 30rem; }
.auth__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.auth__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.auth__card--muted { background: var(--surface-2); }
.auth__title { font-size: 1.25rem; margin: 0 0 0.4rem; }
.auth__lead { color: var(--ink-2); font-size: 0.94rem; margin: 0 0 1.5rem; }
.auth__form { display: grid; gap: 1.1rem; margin-top: 0.5rem; }
.auth__form .btn { justify-self: start; cursor: pointer; }
.auth__note {
  font-size: 0.84rem;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 1.25rem 0 0;
}
.auth__steps {
  margin: 1.25rem 0;
  padding-left: 1.2rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.9;
}
.auth__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}
.auth__links a { color: var(--accent-ink); text-decoration: none; }
.auth__links a:hover { text-decoration: underline; }
.auth__inline { display: inline-flex; }
.auth__inline .linklike { padding: 0; }
.auth__list { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0 0 1.5rem; }
.auth__list dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.auth__list dd { margin: 0; font-size: 0.92rem; }

.field__hint { color: var(--ink-3); font-size: 0.8rem; margin: 0.3rem 0 0; }
.field input:focus { border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: #c0392b; }
.field input:disabled { background: var(--surface-2); color: var(--ink-3); }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge--approved { border-color: #2e8b57; color: #2e8b57; }
.badge--verified { border-color: var(--accent); color: var(--accent-ink); }
.badge--admin { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- approval queue ---------- */

.userrow {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 0.75rem;
}
.userrow__who { display: grid; gap: 0.15rem; }
.userrow__email { color: var(--ink-2); font-size: 0.88rem; }
.userrow__company { color: var(--ink-3); font-size: 0.82rem; }
.userrow__meta { display: grid; gap: 0.3rem; justify-items: end; }
.userrow__date { color: var(--ink-3); font-size: 0.8rem; font-family: var(--mono); }
.userrow__actions { display: flex; gap: 0.5rem; }
.userrow__actions .btn { cursor: pointer; }

.usertable { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.usertable th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
}
.usertable td { padding: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.usertable__actions { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.usertable__actions .linklike { font-size: 0.84rem; }

.section__head--spaced { margin-top: 3rem; }

/* Wide tables scroll inside their own box rather than the page. */
@media (max-width: 720px) {
  .userrow { grid-template-columns: 1fr; }
  .userrow__meta { justify-items: start; }
  .usertable { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- locked notice on the public homepage ---------- */

.locked {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
}
.locked__mark { font-size: 2rem; color: var(--accent); margin: 0 0 0.75rem; }
.locked__title { font-size: 1.4rem; margin: 0 0 0.5rem; }
.locked__sub { color: var(--ink-2); margin: 0 0 1rem; }
.locked__text {
  color: var(--ink-3);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 auto 1.75rem;
}
.locked__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

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

  /* With the drift stopped the strip would show only the tiles that happen to fit, so it
     lays itself out as a static block instead — every tile visible, the loop copy dropped. */
  .stack__viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .stack__track { width: auto; }
  .stack__group { flex-wrap: wrap; }
  .stack__group[aria-hidden="true"] { display: none; }
  .stack__tile { margin-bottom: var(--tile-gap); }
}