/* DEV Doorn planner. Dark with a gold accent, phone first.
   One theme, not two: the design is dark on purpose. */

@font-face {
  font-family: Archivo;
  src: url(/assets/archivo.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Black';
  src: url(/assets/archivo-black.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0C0C0D;
  --card: #1B1C22;
  --line: #2C2D35;
  --edge: #35353A;
  --fg: #FFFFFF;
  --dim: #A9A6A1;
  --dimmer: #7C7975;
  --off: #55534F;

  --gold: #FFD100;
  --green: #2FBF6A;
  --amber: #F2B01E;
  --red: #E2001A;
  --grey: #9A968F;

  color-scheme: dark;
}

* { box-sizing: border-box }

/* Author display rules beat the browser's [hidden] rule, so say it once here.
   Without this, every hidden section and panel renders. */
[hidden] { display: none !important }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 Archivo, system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 620px; margin-inline: auto; padding: 0 20px 32px }

/* Headings and lead text ------------------------------------------------- */

.display {
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-size: clamp(2rem, 11vw, 2.75rem);
  line-height: .94;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
}
.gold { color: var(--gold) }
.lead { margin: .875rem 0 0; color: #8E8B86; max-width: 20rem; text-wrap: pretty }
.hint { margin: .875rem 0 0; font-size: .8125rem; color: #6F6C68; text-wrap: pretty }
.eyebrow {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: #6F6C68; display: block;
}
.mark { display: block; height: auto; margin: 2.5rem 0 1.75rem }

/* Forms ------------------------------------------------------------------ */

#view-login, #view-name { display: flex; flex-direction: column }
form { display: flex; flex-direction: column; gap: .75rem; margin-top: 3rem }
#view-name form { margin-top: 2rem }

input {
  font: inherit;
  font-size: 1.25rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  height: 62px;
  padding: 0 18px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
}
input::placeholder { color: var(--off) }
input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

button { font: inherit; cursor: pointer }

.primary {
  height: 62px;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: #16161A;
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.primary:disabled { opacity: .55; cursor: not-allowed }

.link {
  background: none; border: 0; padding: 0;
  color: var(--gold); font-size: .8125rem; text-decoration: underline;
}

/* The error line, with the red dot from the design --------------------- */

#error { margin: 0; min-height: 0; font-size: .8125rem; color: #7C7975 }
#error:not(:empty) {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 1rem 0 0; padding: 1rem 0; border-top: 1px solid var(--line);
  text-wrap: pretty;
  /* Sticks to the bottom, so a failed save stays visible however far the
     calendar is scrolled. */
  position: sticky; bottom: 0; background: var(--bg);
}
#error:not(:empty)::before {
  content: ''; flex: none; width: 8px; height: 8px; margin-top: .45em;
  border-radius: 50%; background: var(--red);
}

/* Calendar --------------------------------------------------------------- */

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2.5rem 0 1rem;
  border-bottom: 1px solid #1E1F24;
}
.brand { display: flex; align-items: center; gap: 12px }
.brand img { height: auto }
.brand-name {
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-size: 1rem; text-transform: uppercase; letter-spacing: .02em;
}
.who { margin: 0; font-size: .8125rem; color: #8E8B86; text-align: right }
#whoami { margin-right: .35em }

#rows { list-style: none; margin: 0; padding: 1rem 0 0; display: flex; flex-direction: column; gap: 14px }

.row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.row-when { display: flex; flex-direction: column; gap: 3px; min-width: 0 }

.date {
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .01em;
}
.d-long { display: none }
.counts {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dimmer); font-variant-numeric: tabular-nums;
}

.status {
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px; white-space: nowrap; flex: none;
}
.status.green { color: var(--green); background: rgba(47,191,106,.14) }
.status.amber { color: var(--amber); background: rgba(242,176,30,.16) }
.status.red   { color: var(--red);   background: rgba(226,0,26,.14) }
.status.grey  { color: var(--grey);  background: rgba(255,255,255,.06) }

/* The two answer buttons ------------------------------------------------- */

.answer { display: flex; gap: 8px }
.answer button {
  flex: 1; height: 46px; border-radius: 10px;
  border: 1px solid var(--edge); background: transparent; color: #C9C6C1;
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em;
}
.answer .yes.on { background: var(--green); border-color: var(--green); color: #08210F }
.answer .no.on  { background: var(--red);   border-color: var(--red);   color: #FFFFFF }
.answer button[disabled] { color: var(--off); border-color: #2A2A2E; cursor: not-allowed }

/* Wie komen er? ---------------------------------------------------------- */

.reveal {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 11px 0 0; color: var(--dim);
  font-size: .8125rem; font-weight: 600; text-align: left;
}
.sign {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid #3A3A40; display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo Black', Archivo, sans-serif; font-size: .8125rem; line-height: 1;
  color: var(--gold);
}

.names { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.names-col { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.names-head {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
}
.names-head.ja { color: var(--green) }
.names-head.nee { color: var(--red) }
.names-yes, .names-no { font-size: .8125rem; line-height: 1.6; color: #C9C6C1; overflow-wrap: break-word }

.reason { margin: 0; font-size: .75rem; color: #8E8B86 }

.footer {
  margin: 1.75rem 0 0;
  display: flex; flex-direction: column; align-items: center; gap: .875rem;
}
.week-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem; border: 1px solid var(--edge); border-radius: 10px;
  color: var(--gold); text-decoration: none;
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
}
.week-link::after { content: '\2192' }

/* Wide screen: the same list, centred. Rows go horizontal. --------------- */

/* Wide screen: the same list, centred. The row goes horizontal, which needs a
   little more than the 620px the phone column uses, or the long date wraps. */
@media (min-width: 800px) {
  main { max-width: 740px }

  .row { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 14px 18px; gap: 14px }
  .row-head { flex: 1 1 auto; min-width: 0; gap: 14px }
  .row-when { flex: 1 1 auto; min-width: 0 }

  /* The long date reads better when there is room for it. */
  .d-short { display: none }
  .d-long { display: inline }
  .date { font-size: 1rem; text-transform: none; letter-spacing: 0 }
  .counts { text-transform: none; letter-spacing: 0 }

  .answer { width: 260px; flex: none }
  .answer button { height: 42px; border-radius: 9px; font-size: .75rem }
  .reveal { flex: none; width: auto; border-top: 0; padding: 0 }
  .reveal-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .sign { width: 30px; height: 30px; border-radius: 8px; font-size: .9375rem }
  .names, .reason { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 12px }
}