/* lsh.ro — one stylesheet, no framework, no external fonts, no script.
   Monospace carries the structure (headings, nav, labels, the service tree),
   a system sans carries the prose, because monospace at paragraph length is
   tiring to read. Accent is the brand vermilion sampled from the logo, used
   only for interaction and current state.

   Three colour states: no data-theme follows the OS via prefers-color-scheme;
   data-theme="light" and "dark" are the visitor's explicit override, set
   server-side by a form POST so the site still needs no JavaScript. */

:root {
  color-scheme: light;
  --paper:   #f7f8f9;
  --raised:  #ffffff;
  --ink:     #16202a;
  --muted:   #5a6773;
  --rule:    #dce1e6;
  --rule-hi: #b4bfc9;
  --brand:   #d52a00;
  --on-brand: #ffffff;
  --danger:  #b3200a;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Cascadia Mono", "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shell: 51rem;
  --measure: 36rem;
  --gutter: 1.5rem;
}

/* Auto: follow the operating system, unless the visitor forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:   #0c1116;
    --raised:  #131a21;
    --ink:     #c6d1dc;
    --muted:   #7f8d9b;
    --rule:    #222b34;
    --rule-hi: #3a4650;
    --brand:   #ff5a2b;
    --on-brand: #0c1116;
    --danger:  #ff6b5a;
  }
}

/* An explicit choice wins in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:   #0c1116;
  --raised:  #131a21;
  --ink:     #c6d1dc;
  --muted:   #7f8d9b;
  --rule:    #222b34;
  --rule-hi: #3a4650;
  --brand:   #ff5a2b;
  --on-brand: #0c1116;
  --danger:  #ff6b5a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.65 var(--sans);
}

/* ---- shell ------------------------------------------------------------ */

header, main, footer {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
}

.brand { display: block; flex: none; line-height: 0; border: 0; }
.brand img { display: block; height: 30px; width: auto; }

.nav { display: flex; flex-wrap: wrap; gap: 0 .9rem; font-size: .8125rem; }
.nav a {
  color: var(--muted);
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;   /* "Service details" must not fold onto two lines */
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-hi); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

/* Language and theme switches, set in brackets like shell options. */
.controls { margin-left: auto; display: flex; flex-wrap: wrap; gap: .9rem; flex: none; max-width: 100%; }
.lang, .theme { display: flex; align-items: center; gap: .1rem; }

.lang button, .theme button {
  font: .75rem/1 var(--mono);
  min-height: 44px;
  padding: 0 .3rem;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.lang button::before, .theme button::before { content: "["; opacity: .45; }
.lang button::after,  .theme button::after  { content: "]"; opacity: .45; }
.lang button:hover, .theme button:hover { color: var(--ink); }
.lang button[aria-current="true"], .theme button[aria-current="true"] { color: var(--brand); }
.lang button[aria-current="true"]::before, .theme button[aria-current="true"]::before,
.lang button[aria-current="true"]::after,  .theme button[aria-current="true"]::after { opacity: 1; }

main { padding-block: 3.25rem 3.5rem; }

/* ---- type ------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--ink);
}

h1 {
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

h1 + p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1.5rem;
  max-width: 32rem;
}

h2 {
  font-size: .9375rem;
  line-height: 1.3;
  margin: 3rem 0 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
h2::before { content: "// "; color: var(--brand); }

h3 { font-size: .9375rem; line-height: 1.35; margin: 1.6rem 0 .35rem; }

p { margin: 0 0 1rem; max-width: var(--measure); }
main > p:last-child { margin-bottom: 0; }

/* ---- links ------------------------------------------------------------ */

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-hi); }
a:hover { color: var(--brand); border-bottom-color: var(--brand); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---- the service tree -------------------------------------------------- */
/* Services are layers of one system, application down to network. Drawn like
   the output of `tree`, which is the vernacular of the work itself. */

.service {
  position: relative;
  padding: 0 0 1.25rem 1.9rem;
  margin: 0;
  border-left: 1px solid var(--rule-hi);
}
.service:last-of-type { padding-bottom: .3rem; }

.service::before {
  content: "─";
  position: absolute;
  left: 0;
  top: .05em;
  font: .9375rem/1.35 var(--mono);
  color: var(--rule-hi);
}
.service:hover::before, .service:focus-within::before { color: var(--brand); }

.service :is(h2, h3) {
  margin: 0 0 .25rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-size: .9375rem;
}
.service :is(h2, h3)::before { content: none; }

.service :is(h2, h3) a { border-bottom: 1px solid transparent; color: var(--ink); }
.service :is(h2, h3) a:hover { color: var(--brand); border-bottom-color: var(--brand); }

.service p { margin: 0; color: var(--muted); }
.service p + p { margin-top: .65rem; }

/* ---- forms ------------------------------------------------------------ */

label { display: block; font: .8125rem/1.4 var(--mono); margin: 1.35rem 0 .35rem; }

input, textarea {
  width: 100%;
  font: 1rem/1.5 var(--sans);
  color: var(--ink);
  padding: .6rem .7rem;
  background: var(--raised);
  border: 1px solid var(--muted);
  border-radius: 2px;
}
input:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 9rem; resize: vertical; }

main button[type="submit"] {
  font: .875rem/1 var(--mono);
  min-height: 44px;
  margin-top: 1.4rem;
  padding: 0 1.4rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
}
main button[type="submit"]:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.errorlist, .messages { list-style: none; font: .8125rem/1.5 var(--mono); margin: .4rem 0; padding: 0; }
.errorlist li { color: var(--danger); }
.messages { margin-bottom: 1.75rem; }
.messages li { padding: .65rem .85rem; background: var(--raised); border-left: 2px solid var(--brand); }

/* ---- footer and consent ------------------------------------------------ */

footer {
  padding-block: 1.5rem 2.25rem;
  border-top: 1px solid var(--rule);
  font: .8125rem/1.6 var(--mono);
  color: var(--muted);
}
footer p { margin: 0 0 .25rem; max-width: none; }
footer a { color: var(--muted); border-bottom-color: var(--rule); }
footer a:hover { color: var(--brand); border-bottom-color: var(--brand); }

.consent {
  border-top: 1px solid var(--rule);
  background: var(--raised);
  padding-block: .9rem;
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  font: .8125rem/1.55 var(--mono);
}
.consent p { margin: 0 0 .6rem; color: var(--muted); max-width: var(--measure); }
.consent button {
  font: .8125rem/1 var(--mono);
  min-height: 44px;
  padding: 0 1rem;
  color: var(--ink);
  background: none;
  border: 1px solid var(--muted);
  border-radius: 2px;
  cursor: pointer;
}
.consent button:hover { color: var(--brand); border-color: var(--brand); }

/* ---- utility ----------------------------------------------------------- */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: static;
  display: inline-block;
  margin: .5rem var(--gutter);
  padding: .5rem .75rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
}

img { max-width: 100%; }

@media (max-width: 34rem) {
  header { flex-wrap: wrap; gap: .5rem .75rem; }
  .controls { margin-left: 0; order: 2; gap: .75rem; }
  .nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0 .85rem; }
  main { padding-block: 2.25rem 2.75rem; }
}

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