/* The public absence-request form. Deliberately plain: it is a form a dancer
   opens once on a phone, not a surface anybody lives in. */
/* Restyled 2026-09-09 into the app's own theme (style.css tokens), so the form
   a dancer reaches from the dancer home looks like the app that sent them. */
:root {
  --bg:        #171416;
  --surface:   #241b20;
  --ink:       #fff8f3;
  --muted:     #c6adb0;
  --hairline:  rgba(255,248,243,.14);
  --accent:    #ff9168;
  --accent-2:  #fd746c;
  --warn:      #6b4a12;
  --stop:      #6e2626;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: max(env(safe-area-inset-top), 1rem) 1rem 3rem;
}
.wrap { max-width: 34rem; margin: 0 auto; }
h1 { font-size: 1.6rem; margin: .4rem 0 .3rem; }
h2 { font-size: 1.25rem; margin: .6rem 0 .3rem; }
.lede { color: var(--muted); margin: 0 0 1.6rem; }
label { display: block; font-weight: 600; margin: 1.1rem 0 .35rem; font-size: .95rem; }
.opt { font-weight: 400; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: .8rem .9rem; font: inherit;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; }
.hint { color: var(--muted); font-size: .85rem; margin: .35rem 0 0; }
.row { display: flex; gap: .8rem; }
/* min-width:0 is load-bearing, not tidying. A flex item defaults to
   min-width:auto and will not shrink below its content, and a date input's
   intrinsic width is wide enough that two of them plus the gap overflowed a
   375px phone -- the second field ran past the right edge, measured at 378px
   in a 378px viewport. Every dancer opens this on a phone. */
.row > div { flex: 1; min-width: 0; }

/* The policy warning. Shown before submitting, because a refusal afterwards
   teaches nothing. */
.policy { margin-top: 1rem; display: grid; gap: .6rem; }
.policy[hidden] { display: none; }
.p-blackout, .p-notice {
  padding: .8rem .9rem; border-radius: 8px; font-size: .9rem; line-height: 1.45;
}
.p-blackout { background: var(--stop); }
.p-notice   { background: var(--warn); }

.err {
  margin-top: 1.1rem; padding: .8rem .9rem; border-radius: 8px;
  background: var(--stop); font-size: .92rem;
}
.err[hidden] { display: none; }

button {
  width: 100%; margin-top: 1.5rem; padding: .95rem 1rem;
  font: inherit; font-weight: 700; color: var(--ink);
  background: var(--accent); border: 0; border-radius: 8px; cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }

.done { text-align: center; padding: 2rem 0; }
.done[hidden] { display: none; }
.done-mark {
  font-size: 2.6rem; color: #1B7A4F; line-height: 1;
}

/* The one line that prevents most unresolved submissions. Given the weight of
   a warning rather than a hint: a dancer who types a nickname gets back the
   same "sent" message as everyone else, by design, so nothing downstream will
   ever tell them what went wrong. */
.badge-note {
  margin: 0 0 1.6rem; padding: .8rem .9rem;
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent); border-radius: 8px;
  font-size: .9rem; line-height: 1.45; color: var(--muted);
}
.badge-note strong { color: var(--ink); display: block; margin-bottom: .15rem; }

/* App theme (2026-09-09) */
.brand { margin: .2rem 0 1.2rem; }
.brand-mark { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.brand-tag { color: var(--muted); font-weight: 700; font-size: .78rem; letter-spacing: .06em; margin-top: .25rem; }
h1 { font-weight: 800; letter-spacing: -0.02em; font-size: 1.75rem; }
input, select, textarea { border-radius: 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.badge-note { border-radius: 14px; border-left-color: var(--accent-2); }
.p-blackout, .p-notice, .err { border-radius: 14px; }
button {
  border-radius: 999px; padding: 1rem 1.1rem; font-weight: 800; color: #fff;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 14px 30px -14px rgba(253,116,108,.6);
}
.done-mark { color: #8fd9a3; }