/* ---------------------------------------------------------------------
   Strani z besedilom — pravilnik o zasebnosti, pogoji, podpora.

   Namenoma NISO del vodoravnega sveta. App Store Connect zahteva URL, ki
   besedilo pokaze takoj; recenzent, ki bi moral zavrteti kolesce do
   pravega mesta v svetu na platnu, tega ne bi nasel. Pravno besedilo
   mora biti tudi berljivo, oznacljivo, natisljivo in delovati brez
   JavaScripta — od tega ne odstopa nobena od teh treh strani.
   --------------------------------------------------------------------- */

:root {
  --ink: #f9f7f3;
  --dim: #b9b5c8;
  --gold: #f9c22e;
  --outline: #0e131d;
  --bg: #171325;
  --card: #201a30;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }

body {
  color: var(--ink);
  background: var(--bg);
  font: 16px/1.7 var(--mono);
  padding: 0 1.25rem 5rem;
}

.doc {
  max-width: 46rem;
  margin: 0 auto;
}

/* --- glava ---------------------------------------------------------- */

.doc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.6rem 0 2.4rem;
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
  margin-bottom: 2.4rem;
}
.doc-home {
  color: var(--gold);
  text-decoration: none;
  letter-spacing: .18em;
  font-size: .78rem;
  text-transform: uppercase;
}
.doc-home { padding: .7rem 0; display: inline-block; }   /* tipna tarca */
.doc-home:hover { text-decoration: underline; }
.doc-nav { display: flex; gap: 0 1.1rem; flex-wrap: wrap; font-size: .72rem; letter-spacing: .1em; }
.doc-nav a {
  color: var(--dim);
  text-decoration: none;
  text-transform: uppercase;
  padding: .7rem 0;            /* tipna tarca, ne le besedilo */
  display: inline-block;
}
.doc-nav a:hover, .doc-nav a[aria-current] { color: var(--ink); }
.doc-nav a[aria-current] { border-bottom: 2px solid var(--gold); }

/* --- besedilo -------------------------------------------------------- */

h1 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--outline);
  margin-bottom: .5rem;
}
.updated { color: var(--dim); font-size: .78rem; letter-spacing: .1em; margin-bottom: 2.2rem; }

h2 {
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2.4rem 0 .8rem;
}
h3 { font-size: .95rem; margin: 1.6rem 0 .4rem; color: var(--ink); }

p, li { color: var(--dim); font-size: .93rem; }
p + p { margin-top: .9rem; }

ul, ol { margin: .8rem 0 .8rem 1.3rem; }
li { margin-bottom: .5rem; }
li strong, p strong { color: var(--ink); }

.callout {
  background: var(--card);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  border-radius: 2px;
}
.callout p, .callout li { color: var(--ink); }

.faq { margin-top: 1.2rem; }
.faq h3 { color: var(--gold); font-weight: 700; }

a { color: var(--ink); }
.mail-link { color: var(--gold); padding: .4rem 0; display: inline-block; }

/* --- noga ------------------------------------------------------------ */

.doc-foot {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--dim);
  font-size: .78rem;
  letter-spacing: .06em;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- portret na strani o razvijalcu ----------------------------------

   Edina fotografija na strani, ki sicer nima nobene slike. Stoji ob prvem
   odstavku in se pod 32 rem prelomi nadenj; sirina je v `rem`, da se z
   besedilom vred poveca, ce ima bralnik vecjo pisavo.
   --------------------------------------------------------------------- */

.intro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}
.intro-row p { flex: 1 1 16rem; margin: 0; }

.portrait {
  flex: none;
  width: 11rem;
  height: auto;
  display: block;
  border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 3px;
}

/* Fotografija ni pikselska risba — glajenje ostane, kot ga da brskalnik. */

.tagline {
  color: var(--dim);
  font-size: .82rem;
  letter-spacing: .04em;
}

/* --- tabela svetov ---------------------------------------------------

   Enaindvajset vrstic z imenom, vremenom in podpisano oviro. Tabela je
   TABELA in ne seznam odstavkov: bralec, ki isce en svet, isce vrstico,
   in stroj, ki bere stran, iz vrstice dobi tri polja namesto enega
   odstavka, iz katerega bi jih moral uganiti.

   Ozek zaslon je ne prelomi in ne stisne — drsi v svojem okvirju.
   Stisnjena tabela s tremi znaki na stolpec ni berljiva, vodoravni drsnik
   cez celo stran pa pokvari vse ostalo na njej.
   --------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin: 1.4rem 0 2rem;
  border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 3px;
}

table { border-collapse: collapse; width: 100%; min-width: 34rem; }

th, td {
  text-align: left;
  padding: .5rem .75rem;
  font-size: .82rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }

thead th {
  color: var(--gold);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--card);
  position: sticky;
  top: 0;
}

td { color: var(--dim); }
td:first-child { color: var(--ink); text-align: right; width: 2.5rem; }
td b { color: var(--ink); font-weight: 700; }
.w-move { color: var(--gold); white-space: nowrap; }

/* --- stevilke na predstavitveni strani -------------------------------- */

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .8rem;
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 2rem;
}
.numbers li {
  background: var(--card);
  padding: .9rem 1rem;
  border-radius: 3px;
  font-size: .78rem;
  color: var(--dim);
}
.numbers b {
  display: block;
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1.1;
  margin-bottom: .25rem;
}

/* Odsek kode na strani o izdelavi — v igri je grafika prav to. */
pre {
  background: var(--card);
  border-left: 3px solid var(--gold);
  padding: .9rem 1rem;
  overflow-x: auto;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 1.2rem 0;
}
code { color: var(--gold); }
pre code { color: var(--ink); }