/* ============================================================
   components.css — UI component library
   Depends on tokens.css being loaded first.

   The metaphor is a 90s desktop: a patterned ground, bevelled
   windows with title bars, chunky buttons, group boxes. The
   discipline that keeps it from turning into costume is that
   the retro signal lives in the CHROME, while every piece of
   running text sits on a plain near-white document surface at
   a modern size and measure.
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-ink);
  min-height: 100%;
  /* Desktop pattern: a faint 2px checker, the way a system
     wallpaper dithered two greys together. */
  background-color: var(--color-desktop);
  background-image:
    linear-gradient(45deg, var(--color-desktop-alt) 25%, transparent 25%,
                    transparent 75%, var(--color-desktop-alt) 75%),
    linear-gradient(45deg, var(--color-desktop-alt) 25%, transparent 25%,
                    transparent 75%, var(--color-desktop-alt) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  /* Room for the fixed menu bar and status bar */
  padding-top:    var(--menubar-height);
  padding-bottom: var(--statusbar-height);
}

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

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--speed-fast);
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

img { max-width: 100%; height: auto; }

code, kbd, pre, samp { font-family: var(--font-mono); }

/* ── Layout shell ─────────────────────────────────────────── */
.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Menu bar (top navigation) ────────────────────────────── */
/* Plain words, not brackets. A stranger should not have to
   decode the navigation. */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--menubar-height);
  z-index: var(--z-menubar);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  background-color: var(--color-face);
  border-bottom: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 var(--bevel-light);
}

.menubar__brand {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  margin-right: var(--space-2);
  white-space: nowrap;
}

.menubar__brand:hover { color: var(--color-ink); }

.menubar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.menubar__nav::-webkit-scrollbar { display: none; }

.menubar__item {
  display: block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.menubar__item:hover {
  color: var(--color-ink);
  background-color: var(--color-face-hover);
  border-color: var(--color-border-soft);
  box-shadow: var(--bevel-out);
}

.menubar__item--active {
  background-color: var(--color-titlebar);
  color: var(--color-title-text);
  border-color: var(--color-titlebar);
}

.menubar__item--active:hover {
  background-color: var(--color-titlebar);
  color: var(--color-title-text);
  box-shadow: none;
}

/* ── Status bar (bottom strip) ────────────────────────────── */
.statusbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--statusbar-height);
  z-index: var(--z-statusbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  background-color: var(--color-face);
  border-top: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 var(--bevel-light);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-ink-2);
}

.statusbar__well {
  padding: 1px var(--space-2);
  box-shadow: var(--bevel-in);
  background-color: var(--color-doc-alt);
  white-space: nowrap;
}

.statusbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The terminal easter-egg trigger. Discreet, but a real button
   with a real accessible name — not a hidden keystroke only. */
.statusbar__term {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-2);
  background-color: var(--color-face);
  color: var(--color-ink);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--bevel-out);
  cursor: pointer;
}

.statusbar__term:hover { background-color: var(--color-face-hover); }
.statusbar__term:active { box-shadow: var(--bevel-in); }

/* ── Window ───────────────────────────────────────────────── */
/* The core container. Chrome is beige and bevelled; the body is
   a near-white document surface where the text actually lives. */
.window {
  background-color: var(--color-face);
  border: 1px solid var(--color-border);
  box-shadow: var(--bevel-out), var(--shadow-window);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-2);
  background-color: var(--color-titlebar);
  color: var(--color-title-text);
  border-bottom: 1px solid var(--color-border);
}

.window__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Decorative only — aria-hidden in the markup, never focusable. */
.window__controls {
  margin-left: auto;
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.window__control {
  width: 11px;
  height: 11px;
  background-color: var(--color-face);
  border: 1px solid var(--color-border);
  box-shadow: inset 1px 1px 0 var(--bevel-light);
}

.window__body {
  background-color: var(--color-doc);
  padding: var(--space-6);
  box-shadow: var(--bevel-in);
}

.window__body > * + * { margin-top: var(--space-4); }

/* A window body that holds its own chrome (screenshots, tables) */
.window__body--flush { padding: var(--space-2); }

/* ── Typography ───────────────────────────────────────────── */
.title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.subtitle {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.lede {
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
  max-width: 62ch;
}

.prose {
  max-width: 68ch;
  line-height: var(--line-height-loose);
}

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--font-size-xl); line-height: var(--line-height-tight); }
.prose h3 { font-size: var(--font-size-lg); line-height: var(--line-height-tight); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose strong { font-weight: var(--font-weight-semi); }

.muted { color: var(--color-ink-2); }
.small { font-size: var(--font-size-sm); }

/* ── Group box ────────────────────────────────────────────── */
/* The ┌─ LABEL ─┐ box. Native fieldset/legend gives this look
   and the right semantics at once, so there is no custom
   component to keep in sync. */
.group {
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--bevel-in);
  padding: var(--space-5);
  background-color: var(--color-doc);
}

.group > legend,
.group__legend {
  /* The group draws a 1px inset bevel just inside its top border, which
     would otherwise run straight through the legend text. A solid
     background punches a clean hole in both border and bevel. */
  background-color: var(--color-doc);
  padding: var(--space-1) var(--space-2);
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.group > * + * { margin-top: var(--space-3); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  color: var(--color-ink);
  background-color: var(--color-face);
  border: 1px solid var(--color-border);
  box-shadow: var(--bevel-out);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed-fast);
}

.btn:hover { background-color: var(--color-face-hover); color: var(--color-ink); }
.btn:active { box-shadow: var(--bevel-in); }

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent-hover);
  box-shadow: inset  1px  1px 0 rgba(255,255,255,0.35),
              inset -1px -1px 0 rgba(0,0,0,0.25);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* A link that is pending — a store listing not published yet.
   Styled as visibly inert so a placeholder cannot masquerade
   as a working link. */
.btn--pending {
  color: var(--color-ink-2);
  background-color: var(--color-doc-alt);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
}

.btn--pending:hover { background-color: var(--color-doc-alt); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ── Cards ────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background-color: var(--color-doc);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--bevel-out), var(--shadow-card);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--speed-fast), box-shadow var(--speed-fast);
}

a.card:hover {
  color: var(--color-ink);
  transform: translate(-1px, -1px);
  box-shadow: var(--bevel-out), 3px 3px 0 rgba(42, 36, 32, 0.22);
}

a.card:active { transform: translate(0, 0); }

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semi);
  line-height: var(--line-height-tight);
}

.card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-ink-2);
  line-height: var(--line-height-base);
}

.card__meta {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ── Key-value rows ───────────────────────────────────────── */
.kv-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--color-border-soft);
}

.kv-row:last-child { border-bottom: none; }

.kv-row__key {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.kv-row__value { color: var(--color-ink); }

/* ── Tags / badges ────────────────────────────────────────── */
/* Class names are fixed: js/plugins.js and the index renderer
   emit tag--live / tag--amber / tag--white. */
.tag {
  display: inline-block;
  padding: 2px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
  background-color: var(--color-doc-alt);
  border: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

.tag--green,
.tag--live {
  color: #FFFFFF;
  background-color: var(--color-ok);
  border-color: var(--color-ok);
}

.tag--amber {
  color: var(--color-on-accent);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.tag--white {
  color: var(--color-ink);
  background-color: var(--color-face);
  border-color: var(--color-border-soft);
}

/* ── Notices ──────────────────────────────────────────────── */
.notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-doc-alt);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.notice--warn { border-left-color: var(--color-warn); }
.notice--ok   { border-left-color: var(--color-ok); }

/* ── Divider ──────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border-soft);
  margin: var(--space-5) 0;
}

/* ── Screenshot ───────────────────────────────────────────── */
/* Framed product screenshot. Class names fixed — used by the
   Alvarás landing page. */
.shot { margin: var(--space-4) 0; }

.shot__frame {
  border: 1px solid var(--color-border);
  box-shadow: var(--bevel-out), var(--shadow-card);
  background-color: var(--color-face);
  padding: var(--space-2);
}

.shot__img { display: block; width: 100%; height: auto; }

.shot__caption {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-ink-2);
}

/* ── Long-form document ───────────────────────────────────── */
/* Used by the privacy policy. Class names fixed. */
.doc { max-width: 70ch; }

.doc > * + * { margin-top: var(--space-4); }

.doc h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.doc h2 {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-soft);
  margin-top: var(--space-8);
}

.doc p { line-height: var(--line-height-loose); }
.doc ul { padding-left: var(--space-6); }
.doc li { line-height: var(--line-height-loose); }
.doc li + li { margin-top: var(--space-1); }
.doc strong { font-weight: var(--font-weight-semi); }
.doc code {
  font-size: 0.92em;
  padding: 1px 4px;
  background-color: var(--color-doc-alt);
  border: 1px solid var(--color-border-soft);
}

/* ── Document table ───────────────────────────────────────── */
/* Scrolls horizontally on narrow screens rather than forcing
   the page to. Class names fixed. */
.doc-table-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0;
  box-shadow: var(--bevel-in);
  border: 1px solid var(--color-border-soft);
}

.doc-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: var(--font-size-sm);
  background-color: var(--color-doc);
}

.doc-table th,
.doc-table td {
  border: 1px solid var(--color-border-soft);
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  line-height: var(--line-height-base);
}

.doc-table th {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  background-color: var(--color-face);
}

.doc-table td:first-child {
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ── Forms ────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-1); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.field__input,
.field__textarea {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-ink);
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: var(--bevel-in);
  padding: var(--space-2) var(--space-3);
  width: 100%;
}

.field__textarea { min-height: 140px; resize: vertical; }

/* ── Terminal overlay ─────────────────────────────────────── */
/* The easter egg. Deliberately dark and mono: a Terminal.app
   window open on the beige desktop. */
.terminal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background-color: rgba(42, 36, 32, 0.45);
}

.terminal-overlay[hidden] { display: none !important; }

.terminal-overlay__window {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(520px, 100%);
  background-color: var(--term-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--bevel-out), 4px 4px 0 rgba(42, 36, 32, 0.35);
}

.terminal-overlay__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--term-fg);
}

.terminal-overlay__close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-title-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

.terminal-overlay__close:hover { background-color: rgba(255,255,255,0.15); }

/* Terminal output lines — class names fixed, emitted by
   js/terminal.js. */
.output { white-space: pre-wrap; word-break: break-word; }
.output--dim     { color: var(--term-dim); }
.output--muted   { color: var(--term-dim); }
.output--bright  { color: #FFFFFF; }
.output--white   { color: var(--term-fg); }
.output--amber   { color: var(--term-accent); }
.output--error   { color: var(--term-error); }
.output--warning { color: var(--term-accent); }
.output--success { color: var(--term-success); }
.output--comment { color: var(--term-dim); font-style: italic; }
.output--blank   { height: var(--line-height-base); }

.terminal-overlay__body a { color: var(--term-accent); }

/* Prompt — class names fixed, emitted by js/terminal.js. */
.prompt { display: block; margin-bottom: var(--space-1); }
.prompt__user   { color: var(--term-success); }
.prompt__at,
.prompt__sep,
.prompt__sigil  { color: var(--term-dim); }
.prompt__host   { color: var(--term-accent); }
.prompt__path   { color: var(--term-fg); }
.prompt__command{ color: #FFFFFF; }

.cmd-block { margin-bottom: var(--space-4); }

/* ls output inside the terminal */
.ls-table { margin-bottom: var(--space-3); }

.ls-entry {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: 1px 0;
}

.ls-entry--clickable { cursor: pointer; }
.ls-entry--clickable:hover { background-color: var(--term-bg-alt); }
.ls-entry__perms,
.ls-entry__size,
.ls-entry__date { color: var(--term-dim); font-size: var(--font-size-xs); }
.ls-entry__name { color: var(--term-fg); }
.ls-entry__name--dir  { color: var(--term-accent); }
.ls-entry__name--exec { color: var(--term-success); }
.ls-entry__desc { color: var(--term-dim); font-size: var(--font-size-xs); }

/* cat output inside the terminal */
.cat-block { border-left: 2px solid var(--term-border); padding-left: var(--space-3); }
.cat-block__label { color: var(--term-dim); font-size: var(--font-size-xs); }
.cat-block__value { color: var(--term-fg); }
.cat-block__body  { color: var(--term-fg); }

.ascii-art {
  font-family: var(--font-mono);
  white-space: pre;
  line-height: 1.2;
  color: var(--term-accent);
}

.ascii-art--dim { color: var(--term-dim); }

/* Terminal input row */
.terminal-input-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--term-border);
  background-color: var(--term-bg-alt);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--term-fg);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.terminal-input::placeholder { color: var(--term-dim); }

/* ── Utilities ────────────────────────────────────────────── */
.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;
}

.hidden { display: none !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: var(--space-5) var(--space-4) var(--space-10); }
  .window__body { padding: var(--space-4); }
  .title { font-size: var(--font-size-2xl); }
  .kv-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .statusbar__well { display: none; }
  .menubar__brand { margin-right: 0; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  a.card:hover { transform: none; }
}