/* batranelu.dev
   One stylesheet for the whole site. Every rule here was inline in the design
   export; it lives in a file because the Content-Security-Policy in _headers
   sets style-src 'self' with no 'unsafe-inline', which blocks style attributes
   and inline style blocks alike. */

:root {
  /* Surfaces */
  --bg:            oklch(0.15 0.015 60);
  --grid:          oklch(0.32 0.03 55 / 0.5);
  --surface:       oklch(0.23 0.02 58 / 0.85);
  --border:        oklch(0.32 0.03 55);

  /* Text */
  --text:          oklch(0.91 0.012 70);
  --muted:         oklch(0.63 0.014 65);
  --dim:           oklch(0.5 0.016 60);

  /* Accent */
  --accent:        oklch(0.72 0.13 70);
  --accent-hover:  oklch(0.82 0.09 70);
  --accent-wash:   oklch(0.72 0.13 70 / 0.14);
  --danger:        oklch(0.6 0.15 35);

  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --radius: 8px;
  --measure: 44rem;

  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

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

a {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: break-word;
}

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

a:focus-visible,
.card-link:focus-visible,
.back-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Page frame ---------- */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 24px;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
}

/* Vignette. Purely decorative, so it never eats a click. */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, var(--bg) 85%);
}

/* Centred variant, used by the index and the 404. */
.page--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}

.shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shell--wide {
  max-width: var(--measure);
  align-items: stretch;
  padding: 5rem 0 6rem;
}

/* ---------- Status code display ---------- */

.status-code {
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
}

/* ---------- Terminal card ---------- */

.card {
  width: 100%;
  margin-top: 32px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
  display: flex;
  flex-direction: column;
}

.card__headers { margin-bottom: 20px; }
.card__headers--tight { margin-bottom: 14px; }

.proto { color: var(--accent); }
.ok { color: var(--text); }
.err { color: var(--danger); }

.lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}

.plain { color: var(--text); }

.cursor {
  display: inline-block;
  width: 9px;
  height: 16px;
  margin-inline-start: 4px;
  vertical-align: middle;
  background: var(--text);
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* ---------- App index ---------- */

.applist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
}

.card-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline-start: -10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--text);
  transition: background 0.15s;
}

.card-link:hover { background: var(--accent-wash); color: var(--text); }

.card-link__name {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
}

.card-link__arrow { color: var(--accent); }

.card-link__pkg {
  padding-inline-start: 26px;
  font-size: 13px;
  color: var(--dim);
}

/* The two arrow glyphs point along the reading direction, so they turn around
   with it. Everything else that had a side is written as a logical property. */
[dir="rtl"] .card-link__arrow,
[dir="rtl"] .back-btn__arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---------- Meta strip ---------- */

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--dim);
}

.wordmark {
  margin-top: 36px;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--dim);
}

/* ---------- Language switcher ---------- */

/* Plain links, because the CSP allows no script. Each language is written in
   its own name: someone looking for Romanian is looking for "Romana", not for
   a flag or a two letter code. */
.langbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 18px;
  font-size: 13px;
}

.langbar__label {
  letter-spacing: 0.5px;
  color: var(--dim);
}

.langbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.langbar__link {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}

.langbar__link:hover {
  background: var(--accent-wash);
  color: var(--text);
}

.langbar__link.is-current {
  border-color: var(--border);
  background: oklch(0.32 0.03 55 / 0.35);
  color: var(--text);
}

/* On the policy page it sits between the facts block and the text. */
.facts + .langbar { margin-top: 14px; }

/* ---------- Policy page ---------- */

.back-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2.5rem;
  padding-block: 8px;
  padding-inline: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}

.back-btn:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--text);
}

.back-btn__arrow { color: var(--accent); }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 14px;
}

.title {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.subtitle {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

/* The facts block: app, package, and the two dates. */
.facts {
  padding: 18px 22px;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--muted);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 10px;
}

.facts dt { color: var(--accent); }
.facts dd { margin: 0; color: var(--text); }

/* ---------- Policy prose ---------- */

.prose {
  margin-top: 3rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}

.prose > :first-child { margin-top: 0; }

.prose p { margin: 0 0 1.15em; }

.prose strong { color: var(--text); font-weight: 600; }

.prose h2 {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
  margin: 3.25rem 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 1.5rem;
}

.prose h2 .n { color: var(--accent); margin-inline-end: 0.6em; }

.prose h3 {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  margin: 2.25rem 0 1rem;
  scroll-margin-top: 1.5rem;
}

.prose h3 .n { color: var(--accent); margin-inline-end: 0.6em; }

.prose ul { margin: 0 0 1.15em; padding-inline-start: 1.25em; }
.prose li { margin-bottom: 0.6em; }
.prose li::marker { color: var(--accent); }

.prose code {
  font-family: var(--mono);
  font-size: 0.875em;
  padding: 1px 5px;
  border-radius: 4px;
  background: oklch(0.32 0.03 55 / 0.4);
  color: var(--text);
}

/* The summary paragraph under the facts block. */
.summary {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--radius);
  margin: 0 0 2em;
}

.summary p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 0 1.5em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Text wants a 44rem measure; these tables do not fit in one. Past the point
   where there is room either side, they spill out of the column rather than
   wrapping every cell down to one word per line. Below that they scroll. */
@media (min-width: 60rem) {
  .table-wrap { margin-inline: -5rem; }
}

.prose table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-wrap: initial;
}

.prose th,
.prose td {
  padding: 11px 14px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.prose th {
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  background: oklch(0.32 0.03 55 / 0.25);
}

.prose tbody tr:last-child td { border-bottom: none; }

.prose td strong { font-weight: 700; }

/* ---------- Contact and footer ---------- */

.contact {
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.foot {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 640px) {
  .page { padding: 0 16px; }
  .page--center { padding: 48px 16px; }
  .shell--wide { padding: 3rem 0 4rem; }
  .status-code { font-size: 84px; letter-spacing: -1px; }
  .card { padding: 20px; font-size: 13.5px; }
  .lede { font-size: 17px; }
  .title { font-size: 1.625rem; }
  .prose { font-size: 1rem; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: 0.5em; }
  .facts dt:first-of-type { margin-top: 0; }
  .facts dd { margin-bottom: 0.25em; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none !important; }
  * { transition: none !important; }
}

/* ---------- Print ---------- */

@media print {
  :root {
    --bg: #fff;
    --text: #000;
    --muted: #222;
    --dim: #555;
    --border: #bbb;
    --surface: #fff;
    --accent: #000;
    color-scheme: light;
  }

  .page {
    background-image: none;
    min-height: 0;
    padding: 0;
    display: block;
  }

  .page::before { display: none; }
  .back-btn, .cursor, .langbar { display: none; }
  .shell--wide { max-width: none; padding: 0; }
  .card, .facts, .summary, .table-wrap { box-shadow: none; backdrop-filter: none; }
  .prose h2, .prose h3 { break-after: avoid; }
  .prose table, .prose li { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}