/*
  Shift Apps. The Lune menus' layout, on the web.

  One type size, everywhere: nothing is larger, bolder or boxed. What matters is said by where it stands (the page's
  name top right, its things in the columns) and by the ink or its quieter self (60 %). Four equal columns, as the
  menus have; the same margins; the same single orange, which only ever means "here": a dot and the row's colour
  under the pointer, on the keyboard's focus, or at the choice made.

  Colours are the menus' own (UIColors.swift): cream and ink by day, near-black and cream by night.
*/

:root {
  color-scheme: light dark;
  --bg: #F5F3EE;
  --ink: #141414;
  --quiet: rgb(20 20 20 / 0.6);
  --line: rgb(20 20 20 / 0.14);
  --accent: #ED540A;

  --type: clamp(17px, 0.45vw + 14.5px, 24px);   /* the one size */
  --row: calc(var(--type) * 1.35);               /* the menus' leading */
  --side: clamp(24px, 5vw, 72px);
  --top: clamp(28px, 4vw, 48px);
  --dot: min(28px, calc(var(--side) / 2));       /* how far left of its row the dot stands */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --ink: #F5F3EE;
    --quiet: rgb(245 243 238 / 0.6);
    --line: rgb(245 243 238 / 0.18);
  }
}

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

html {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--type) / 1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
body { margin: 0; }

/* every element is the one size, whatever its tag */
h1, h2, h3, p, dl, dd, ul, ol, li, figure, label, input, textarea, button, small, strong, em {
  font: inherit;
  margin: 0;
  padding: 0;
}
a { color: inherit; text-decoration: none; }

/* ---- the page: four equal columns ---- */

.page {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1em;
  align-content: start;
  min-height: 100dvh;
  padding: var(--top) var(--side);
}
.page > * { grid-column: 1 / -1; }

.sub { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }

/* the top line: where you came from (the menus' Back) at the left, this page's name at the right */
.bar { margin-bottom: calc(var(--row) * 1.5); }
.bar > :first-child { grid-column: 1; }
.bar .title { grid-column: 4; }

/* a thing that can be chosen: its name, what it is, and (right) how it stands */
.row { position: relative; min-height: var(--row); }
.row .a { grid-column: 1; }
.row .b { grid-column: 2 / span 2; }
.row .c { grid-column: 4; }
.quiet { color: var(--quiet); }

/* the dot, and the row in orange, where you are */
.row::before,
.choice label::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--dot) - 0.26em);
  top: calc(var(--row) / 2 - 0.26em);
  width: 0.52em;
  height: 0.52em;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.row:hover, .row:focus-visible { color: var(--accent); outline: none; }
.row:hover::before, .row:focus-visible::before { opacity: 1; }
.row:hover .quiet, .row:focus-visible .quiet { color: inherit; }
.home:hover, .home:focus-visible { color: var(--accent); outline: none; }

/* running text, in the first two columns; a label and its value as a settings row */
.left { grid-column: 1 / span 2; display: grid; grid-template-columns: subgrid; align-content: start; }
.left > * { grid-column: 1 / -1; }
.text { max-width: 36em; }
.text + .text { margin-top: var(--row); }
.gap { margin-top: var(--row); }
.kv { display: grid; grid-template-columns: subgrid; }
.kv > :first-child { grid-column: 1; color: var(--quiet); }
.kv > :last-child { grid-column: 2; }

.pic { grid-column: 3 / span 2; grid-row: 2; align-self: start; }
.pic img { display: block; width: 100%; height: auto; }
.left { grid-row: 2; }

/* things that run the page's whole width, four across */
.four { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: calc(var(--row) * 2); margin-top: calc(var(--row) * 3); }
.four figure img { display: block; width: min(100%, 260px); height: auto; margin-bottom: var(--row); }
.four figcaption .quiet { display: block; }

/* the policy and its kind: the section's name in column one, what it says in two and three */
.doc { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--row); }
.doc > h2 { grid-column: 1; color: var(--quiet); }
.doc > div { grid-column: 2 / span 2; max-width: 36em; }
.doc > div p + p { margin-top: var(--row); }
.doc a, .text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--quiet); }
.doc a:hover, .text a:hover { color: var(--accent); text-decoration-color: currentColor; }

.foot { margin-top: calc(var(--row) * 3); }

/* ---- the contact form: the same rows ---- */

.form { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--row); align-content: start; }
.field { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.field > label, .field > .label { grid-column: 1; color: var(--quiet); }
.field input[type=text], .field input[type=email], .field textarea {
  grid-column: 2 / span 2;
  width: 100%;
  background: none;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0 0.15em;
  min-height: var(--row);
  outline: none;
  appearance: none;
}
.field textarea { min-height: calc(var(--row) * 5); resize: none; }
.field input:focus-visible, .field textarea:focus-visible { border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--quiet); opacity: 0.6; }

/* a choice of one, in the menus' manner: the dot is at the one chosen */
.choice { grid-column: 2 / span 2; display: flex; flex-wrap: wrap; column-gap: 2em; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label { position: relative; cursor: pointer; }
.choice label::before { left: calc(-0.26em - 0.7em); }
.choice input:checked + label { color: var(--accent); }
.choice input:checked + label::before { opacity: 1; }
.choice input:focus-visible + label { text-decoration: underline; text-underline-offset: 0.2em; }
.choice label:hover { color: var(--accent); }

button.row {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  grid-column: 1 / -1;
}
button.row[disabled] { color: var(--quiet); cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { grid-column: 2 / span 2; color: var(--quiet); min-height: var(--row); }
[hidden] { display: none !important; }

/* ---- narrower: two columns ---- */

@media (max-width: 760px) {
  .page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar .title { grid-column: 2; }
  .row .b { grid-column: 2; }
  .row .c { grid-column: 1 / -1; color: var(--quiet); }
  .left { grid-column: 1 / -1; grid-row: auto; }
  .pic { grid-column: 1 / -1; grid-row: auto; margin-top: calc(var(--row) * 1.5); }
  .doc > div, .status, .choice { grid-column: 1 / -1; }
  .doc > h2 { grid-column: 1 / -1; }
  .doc { row-gap: 0; }
  .doc > div { margin-bottom: var(--row); }
  .field > label, .field > .label { grid-column: 1 / -1; }
  .field input[type=text], .field input[type=email], .field textarea { grid-column: 1 / -1; }
  .choice label::before { left: calc(-0.26em - 0.7em); }
  .choice { padding-left: 0.9em; }
  .four figure img { width: min(100%, 200px); }
}

@media (prefers-reduced-motion: no-preference) {
  .row::before, .choice label::before { transition: opacity 120ms ease; }
  .row, .choice label, .home { transition: color 120ms ease; }
}