/* Mira's own form (FORMSPRAK.md): warm paper, black, no bold anywhere. Two voices: serif
   capitals for headings and big numbers, small grotesque for everything else. Mira's frame
   at the top: MIRA COMMUNICATION, the m, the tabs. Less important = smaller, never grey. */
:root {
  --bg: #f3f2ec;
  --ink: #000000;
  --mute: #000000;
  --line: #000000;
  --warn: #c8102e;   /* only for errors */
  --font: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Times Now", "Times New Roman", Times, serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 12px/1.45 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
b, strong { font-weight: 400; }

header {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 12px;
  background: var(--bg);
  font-size: 10px;
}
.who { justify-self: start; }
.logo { justify-self: center; line-height: 0; }
.logo img { height: 12px; width: auto; display: block; }
nav { justify-self: end; display: flex; gap: 16px; }
nav a.on { text-decoration: underline; text-underline-offset: 3px; }

main {
  padding: 36px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 80px);
  max-width: 860px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}

a, button, label.btn {
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
a:hover, button:hover, label.btn:hover { opacity: 0.5; }
button:disabled { opacity: 0.35; cursor: default; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
p { margin: 0; }
[hidden] { display: none !important; }

.grey, .label { color: var(--ink); }
.grey { font-size: 10px; }
.label { font-size: 10px; letter-spacing: 0.06em; margin-top: 26px; }
.small { font-size: 10px; }
.plain { text-transform: none; letter-spacing: 0.01em; font-size: 13px; }
.warn { color: var(--warn); }
.num { font-variant-numeric: tabular-nums; }

/* Serif voice: headings and big numbers, always capitals */
.title, .big, .date { font-family: var(--serif); font-weight: 400; text-transform: uppercase; margin: 0; letter-spacing: -0.01em; }
.title { font-size: clamp(32px, 6vw, 44px); line-height: 1; }
.big { font-size: clamp(72px, 16vw, 128px); line-height: 0.9; }
.date { font-size: clamp(44px, 10vw, 80px); line-height: 0.95; }
.lede { max-width: 52ch; text-transform: none; font-size: 14px; letter-spacing: 0.01em; }

.row { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.actions { margin-top: 6px; }
.actions .on { color: var(--ink); }

/* Lists are tables with thin lines, no numbers (FORMSPRAK rule 9) */
.rows { list-style: none; margin: 0; padding: 0; width: 100%; }
.rows > li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.rows > li:last-child { border-bottom: 1px solid var(--line); }
.rows .main { min-width: 0; overflow-wrap: anywhere; }
.rows .sub { display: block; font-size: 12px; text-transform: none; letter-spacing: 0.01em; margin-top: 2px; }
.rows .end { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; display: flex; gap: 14px; justify-content: flex-end; }
.rows > li.done .main > :first-child { text-decoration: line-through; }

/* Forms */
.form { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; max-width: 560px; justify-items: stretch; }
.form > button, .form > .row { justify-self: start; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 10px; letter-spacing: 0.06em; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
input[type="text"], input[type="date"], input[type="number"], input[type="password"], textarea, select {
  font: inherit; letter-spacing: 0.01em; text-transform: none; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 6px 0;
  width: 100%; background: transparent; -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; min-height: 5.5em; font-weight: 400; }
input::placeholder, textarea::placeholder { color: var(--ink); opacity: 0.35; }
input:focus, textarea:focus, select:focus { outline: none; }

.drop {
  width: 100%; padding: 36px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
}
body.dragging .drop { background: var(--ink); color: var(--bg); }

.shot { max-width: min(100%, 360px); display: block; }
.mail { border-top: 1px solid var(--ink); padding-top: 20px; width: 100%; }
.error { color: var(--warn); max-width: 52ch; }
.dots::after { content: ""; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

@media (max-width: 560px) {
  .who { display: none; }
  header { grid-template-columns: auto 1fr; }
  .logo { justify-self: start; }
  nav { gap: 14px; }
  .three { grid-template-columns: 1fr 1fr; }
  .rows .end { flex-direction: column; gap: 4px; align-items: flex-end; }
}

/* Inbjudan */
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; width: 100%; border-top: 1px solid var(--line); }
.counts div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.counts b { display: block; font: 400 34px/1 var(--serif); }
.door { position: fixed; inset: 0; background: var(--bg); z-index: 5; overflow: auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 40px; display: flex; flex-direction: column; gap: 12px; }
.door input[type="text"] { font-size: 20px; }
.door .rows > li { padding: 16px 0; font-size: 14px; }
.door .rows .end button { font-size: 13px; }
.door video { width: 100%; max-width: 420px; background: #000; }
.flash { font: 400 40px/1 var(--serif); text-transform: uppercase; }