/* ============================================================================
   Ethica — Shared components
   ----------------------------------------------------------------------------
   Built entirely on /css/theme.css tokens. Served at /css/components.css and
   linked by BOTH the Hugo pages and the Python admin, AFTER theme.css and
   BEFORE any page CSS. These are the reusable building blocks every surface
   (public, products, docs, blog, admin) shares — use them instead of inventing
   new component styles. See assets/css/DESIGN.md.
   ========================================================================== */

/* Always reserve the scrollbar gutter so the centered header/footer don't
   shift sideways between short pages (no scrollbar) and tall ones. */
html { scrollbar-gutter: stable; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: .18s ease;
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
.btn--ghost { border-color: var(--color-border-strong); color: var(--color-text); background: transparent; }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.btn--sm { padding: 8px 14px; font-size: .86rem; border-radius: var(--radius-sm); }
.btn--block { width: 100%; justify-content: center; }

/* ---- Cards & panels (glass surface) -------------------------------------- */
.card, .panel {
  position: relative; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
}
.card { padding: 24px 22px 26px; transition: .18s ease; }
.card:hover { border-color: var(--color-border-strong); transform: translateY(-3px); background: var(--color-surface-hover); }
.panel { padding: 26px; }
.card h3, .panel h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }

/* feature card — landing suite grid (idx + tag + title + blurb, ↗ on hover) */
.card--feature .idx { font-family: var(--font-mono); font-size: .78rem; color: var(--color-text-muted); transition: .18s; }
.card--feature:hover .idx { color: var(--color-primary); }
.card--feature .tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }
.card--feature h3 { font-size: 1.32rem; margin: 10px 0 6px; }
.card--feature p { color: var(--color-text-muted); font-size: .96rem; margin: .5em 0 0; }
.card--feature::after { content: "\2197"; position: absolute; right: 18px; top: 18px; color: var(--color-text-muted); opacity: 0; transition: .18s; }
.card--feature:hover::after { opacity: 1; color: var(--color-primary); }

/* project card — products page */
.card--project { display: flex; flex-direction: column; }
.card--project .project-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card--project .project-name { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; margin: 0; }
.card--project .project-tagline { color: var(--color-primary); font-size: .82rem; font-weight: 600; letter-spacing: .04em; margin: 8px 0 10px; }
.card--project .project-desc { color: var(--color-text-muted); font-size: .94rem; margin: 0 0 16px; }
.card--project .project-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; border-top: 1px solid var(--color-border); padding-top: 12px; }
.card--project .project-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.card--project .project-link { font-weight: 600; color: var(--color-primary); white-space: nowrap; }

/* ---- Badges (status pills) ----------------------------------------------- */
.badge {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 3px 10px;
  border: 1px solid var(--color-border); color: var(--color-text-muted); white-space: nowrap;
}
.badge--live { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border)); }
.badge--building { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-border)); }
.badge--info { color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 50%, var(--color-border)); }
.badge--warn { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-border)); }
.badge--maintained { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 50%, var(--color-border)); }

/* ---- Chips (tags) -------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 6px 11px;
  color: var(--color-text); font-size: .8rem; font-weight: 600; text-decoration: none;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.chip .ic { display: inline-flex; color: var(--color-primary); }
.chip .count { background: var(--color-surface-elevated); color: var(--color-text-muted); border-radius: 6px; padding: 1px 7px; font-size: .74rem; }

/* ---- Form fields --------------------------------------------------------- */
.field { display: block; margin: 14px 0 0; }
.panel label, .field > label {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--color-text-muted); display: block; margin: 0 0 6px;
}
.panel label { margin: 14px 0 6px; }
.field input, .field textarea, .field select,
.panel input, .panel textarea, .panel select {
  width: 100%; background: var(--color-bg-muted); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text);
  padding: 11px 13px; font: inherit; font-size: .96rem;
}
.field input:focus, .field textarea:focus, .field select:focus,
.panel input:focus, .panel textarea:focus, .panel select:focus {
  outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-glow);
}
.field textarea, .panel textarea { min-height: 104px; resize: vertical; }
.panel .sub { color: var(--color-text-muted); font-size: .94rem; margin: 0 0 18px; }

/* ---- Section rhythm ------------------------------------------------------ */
.section { padding: var(--space-section-y) 0; border-top: 1px solid var(--color-border); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.01em; margin: .2em 0 0; }
.eyebrow-mono { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---- Status widget (rail) ------------------------------------------------ */
.status-state { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.status-dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent); }
.status-state.down { color: var(--color-danger); }
.status-state.down .status-dot { background: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent); }
.status-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--color-border); font-size: .9rem; }
.status-row .lbl { color: var(--color-text-muted); }
.status-row .val { font-weight: 600; }
.status-row .val .note { color: var(--color-primary); font-weight: 600; margin-left: 8px; font-size: .82rem; }
.status-updated { margin-top: 12px; color: var(--color-text-soft); font-size: .76rem; }

/* ---- Reveal (staggered entrance) ----------------------------------------- */
.reveal, .rise { opacity: 0; transform: translateY(14px); animation: ethica-rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes ethica-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal, .rise { animation: none; opacity: 1; transform: none; } }

/* ---- Site chrome: sticky glass top bar + footer (shared by site + admin) -- */
.ev-top {
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(9,13,22,.82), rgba(9,13,22,0));
}
:root[data-theme="light"] .ev-top { background: linear-gradient(180deg, rgba(238,242,248,.85), rgba(238,242,248,0)); }
.ev-top .wrap { width: min(var(--layout-page-max), calc(100% - 44px)); margin-inline: auto; display: flex; align-items: center; gap: 22px; height: var(--layout-header-height); }
.ev-brand { display: inline-flex; align-items: center; }
.ev-logo { height: 26px; width: auto; display: block; }
.ev-logo.dark { display: none; }
:root[data-theme="light"] .ev-logo.white { display: none; }
:root[data-theme="light"] .ev-logo.dark { display: block; }
.ev-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: .94rem; color: var(--color-text-muted); }
.ev-nav a { color: inherit; text-decoration: none; }
.ev-nav a:hover { color: var(--color-text); }
.ev-nav a.active, .ev-nav a.navlink.active { color: var(--color-primary); }
.ev-nav .cta { color: var(--color-text); border: 1px solid var(--color-border-strong); padding: 8px 15px; border-radius: var(--radius-pill); }
.ev-nav .cta:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ev-nav .rss { display: inline-flex; gap: 6px; align-items: center; }
.ev-nav form { display: inline-flex; margin: 0; }

.ev-foot { border-top: 1px solid var(--color-border); margin-top: 64px; padding: 42px 0; color: var(--color-text-muted); font-size: .9rem; }
.ev-foot .wrap { width: min(var(--layout-page-max), calc(100% - 44px)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; }
.ev-foot .tagline { font-style: italic; color: var(--color-text); }
.ev-foot .flinks { display: flex; gap: 16px; }
.ev-foot a { color: var(--color-text-muted); }
.ev-foot a:hover { color: var(--color-primary); }

@media (max-width: 620px) { .ev-nav { gap: 15px; font-size: .88rem; } .ev-nav a.hide-sm { display: none; } }
@media (max-width: 680px) { .ev-foot .wrap { flex-direction: column; text-align: center; } }