/* Fatafat: a speed look. Slanted slabs, heavy italic type, one chilli-red for "go".
   Colors: chilli #FF3D2E (action), indigo ink #17123A, lilac paper #F6F4FF, sun #FFC933 (progress), mint #12B886 (ready), maroon #8A0F26 (blocked). */
:root {
  --paper: #f6f4ff;
  --ink: #17123a;
  --muted: #5a5483;
  --panel: #ffffff;
  --chilli: #ff3d2e;
  --sun: #ffc933;
  --mint: #12b886;
  --maroon: #8a0f26;
  --on-bright: #17123a; /* text on chilli, sun and mint: always dark */
  --run-bg: #17123a; /* the dark "in progress" slab */
  --run-ink: #f6f4ff;
  --seg-off: rgba(23, 18, 58, 0.1);
  --seg-fg: var(--muted);
  --done-bg: var(--ink);
  --done-fg: var(--paper);
  --bar: var(--chilli);
  --tile: 1.5rem;
  --chev-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3l10 9-10 9' fill='none' stroke='%2317123A' stroke-width='4.5' stroke-linecap='square'/%3E%3C/svg%3E");
  --chev-chilli: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3l10 9-10 9' fill='none' stroke='%23FF3D2E' stroke-width='4.5' stroke-linecap='square'/%3E%3C/svg%3E");
  --font: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hi: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN", Mangal, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #110c2b;
    --ink: #f6f4ff;
    --muted: #b4aedb;
    --panel: #1c1646;
    --run-bg: #261d63;
    --seg-off: rgba(246, 244, 255, 0.12);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main, .top, .foot { width: 100%; max-width: 46rem; margin: 0 auto; padding-inline: 1.25rem; }
main { flex: 1; padding-block: 0.5rem 3rem; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- brand and headings */
.top { padding-block: 1.25rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.who { font-size: 0.9375rem; color: var(--muted); }
.linkbtn { background: none; border: 0; padding: 0; margin-left: 0.6rem; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--chilli); }
.locked h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.brand { display: inline-flex; align-items: baseline; gap: 0.65rem; text-decoration: none; color: var(--ink); }
.brand-hi { font: 800 2rem/1 var(--font-hi); color: var(--chilli); }
.brand-en { font-weight: 900; font-style: italic; font-size: 1.125rem; letter-spacing: -0.02em; }

.hero {
  font-size: clamp(3.25rem, 14vw, 7rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.05em;
  line-height: 0.88;
  margin: 1.5rem 0 1.5rem;
}
.page-title {
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 1.5rem 0 0.75rem;
  text-wrap: balance;
}
.file-title { overflow-wrap: anywhere; font-size: clamp(1.75rem, 6vw, 3rem); }
h2 { font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.75rem; font-weight: 900; font-style: italic; letter-spacing: -0.01em; }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 38ch; margin: 0 0 1.75rem; }
.hint { color: var(--muted); font-size: 0.9375rem; margin: 0.5rem 0; }
.status { font-weight: 700; margin: 0.5rem 0; min-height: 1.5em; }
.error { color: var(--maroon); font-weight: 700; margin: 0.5rem 0; }
@media (prefers-color-scheme: dark) { .error { color: #ff9c94; } }

/* ---- mode tabs */
.modes { display: flex; gap: 1.75rem; margin: 0 0 1.25rem; }
.mode {
  font: inherit;
  font-weight: 900;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.4rem 0 0.7rem;
  cursor: pointer;
  position: relative;
}
.mode[aria-selected="true"] { color: var(--ink); }
.mode[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: -0.4rem;
  right: -0.4rem;
  bottom: 0;
  height: 0.4rem;
  background: var(--chilli);
  transform: skewX(-30deg);
}

/* ---- the drop slab */
.drop {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 2.75rem 1.75rem 4.25rem;
  color: var(--on-bright);
  cursor: pointer;
}
.drop.small { padding: 1.5rem 1.5rem 3.25rem; }
.drop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chilli);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3.25rem) 100%, 0 100%);
  transition: background-color 0.2s;
}
.drop.over::before, body.dragging .drop::before { background: var(--sun); }
.drop:focus-within { outline: 3px solid var(--ink); outline-offset: 4px; }
.drop-title { display: block; font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 900; font-style: italic; letter-spacing: -0.035em; line-height: 1; max-width: 13ch; }
.drop.small .drop-title { font-size: 1.375rem; max-width: none; }
.drop-note { display: block; margin-top: 0.6rem; font-size: 0.9375rem; font-weight: 600; }
.chevs { position: absolute; left: 1.75rem; bottom: 1.2rem; width: 6rem; height: var(--tile); background: var(--chev-ink) repeat-x 0 0 / var(--tile) var(--tile); }
.drop.small .chevs { bottom: 0.9rem; width: 4.5rem; }

.ts { margin-top: 0.75rem; }
.key { margin: 1rem 0; }
.key summary { cursor: pointer; font-weight: 700; width: fit-content; }
.key input { margin-top: 0.5rem; }

/* ---- the dark "in progress" slab */
.run {
  --bar: var(--sun);
  --seg-off: rgba(246, 244, 255, 0.16);
  --seg-fg: var(--run-ink);
  --done-bg: var(--run-ink);
  --done-fg: var(--run-bg);
  position: relative;
  isolation: isolate;
  margin-top: 1rem;
  padding: 1.5rem 2.75rem 1.75rem 1.5rem;
  color: var(--run-ink);
}
.run::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--run-bg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.5rem) 100%, 0 100%);
}
.run .hint { color: var(--run-ink); opacity: 0.8; }
.run .error { color: #ff9c94; }
.run .journey { margin-bottom: 0; }
.file-name { font-weight: 800; font-size: 1.125rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.speed { font-size: clamp(2.25rem, 10vw, 4.25rem); font-weight: 900; font-style: italic; letter-spacing: -0.045em; line-height: 1; color: var(--sun); margin: 0.25rem 0 0.75rem; min-height: 1em; }
.lane { height: var(--tile); margin-bottom: 0.9rem; background: var(--chev-chilli) repeat-x 0 0 / var(--tile) var(--tile); animation: run var(--dur, 1.2s) linear infinite; }
.lane.idle { animation: none; opacity: 0.25; }
@keyframes run { to { background-position-x: var(--tile); } }

progress {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 0.8rem;
  border: 0;
  background: var(--seg-off);
  transform: skewX(-20deg);
}
progress::-webkit-progress-bar { background: var(--seg-off); }
progress::-webkit-progress-value { background: var(--bar); transition: width 0.2s; }
progress::-moz-progress-bar { background: var(--bar); }

/* ---- plain panels, rows, inputs, buttons */
.plate { background: var(--panel); border: 3px solid var(--ink); padding: 1.25rem; margin-top: 1rem; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.row > input { flex: 1 1 14rem; min-width: 0; }
.result label, .form label { display: block; font-weight: 800; margin: 0 0 0.35rem; }
.result .hint { margin: 0.75rem 0 1rem; }

input[type="text"], input[type="password"], input[type="email"], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 0.6rem 0.75rem;
  width: 100%;
}
textarea { resize: vertical; }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: var(--paper);
  background: var(--ink);
  border: 3px solid var(--ink);
  padding: 0.6rem 1.25rem;
  transform: skewX(-8deg);
}
.btn:hover { background: var(--chilli); border-color: var(--chilli); color: var(--on-bright); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.bright { background: var(--sun); border-color: var(--sun); color: var(--on-bright); }
.btn.bright:hover { background: var(--chilli); border-color: var(--chilli); }
.btn.ghost { background: transparent; color: var(--run-ink); border-color: var(--run-ink); }
.btn.ghost:hover { background: var(--run-ink); color: var(--run-bg); border-color: var(--run-ink); }
.btn.big { background: var(--chilli); border-color: var(--chilli); color: var(--on-bright); font-size: 1.5rem; padding: 0.85rem 2.5rem; }
.btn.big:hover { background: var(--sun); border-color: var(--sun); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.actions { margin: 1.75rem 0 1rem; }

/* ---- the file's journey: three slanted segments */
.journey { display: flex; gap: 0.4rem; list-style: none; margin: 1.25rem 0 0.5rem; padding: 0; }
.journey li {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: 0.7rem 1.1rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--seg-fg);
  background: var(--seg-off);
  clip-path: polygon(0.9rem 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%);
  transition: background-color 0.3s;
}
.journey[data-step="2"] li:nth-child(1),
.journey[data-step="3"] li:nth-child(-n + 2) { background: var(--done-bg); color: var(--done-fg); }
.journey[data-step="1"] li:nth-child(1),
.journey[data-step="2"] li:nth-child(2) { background: var(--chilli); color: var(--on-bright); }
.journey[data-step="3"] li:nth-child(3) { background: var(--mint); color: var(--on-bright); }
.journey[data-state="blocked"] li:nth-child(3) { background: var(--maroon); color: #fff; }
.journey[data-step="1"] li:nth-child(1)::after,
.journey[data-step="2"] li:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background: var(--chev-ink) repeat-x 0 50% / var(--tile) var(--tile);
  animation: run 1.4s linear infinite;
}

/* ---- peer-to-peer */
.notice { border-left: 8px solid var(--chilli); background: var(--panel); padding: 0.85rem 1rem; margin: 0 0 1.75rem; }
.p2p { display: grid; gap: 2.25rem; }
[data-has-code] .p2p-recv { order: -1; }
.code { display: flex; gap: 0.3rem; margin: 0.25rem 0 1rem; font-size: clamp(1.4rem, 6vw, 2.25rem); font-weight: 900; line-height: 1; }
.code span { flex: 1; min-width: 0; padding: 0.2em 0; text-align: center; color: var(--paper); background: var(--ink); transform: skewX(-8deg); }
.peers { list-style: none; margin: 1rem 0 0; padding: 0; }
.peers li { padding: 0.7rem 0; border-top: 3px solid var(--ink); font-weight: 600; }
.peers li progress { margin-top: 0.4rem; }

/* ---- forms and long text */
.form { max-width: 34rem; display: grid; gap: 0.25rem; }
.form label:not(.check) { margin-top: 0.75rem; }
.form .check { font-weight: 500; display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.75rem; }
.form .check input { margin-top: 0.3rem; width: 1.2rem; height: 1.2rem; accent-color: var(--chilli); flex: none; }
.form .btn { margin-top: 1rem; justify-self: start; }
.opt { font-weight: 500; color: var(--muted); }
.prose { max-width: 40rem; }
.prose h1 { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 900; font-style: italic; letter-spacing: -0.04em; line-height: 1; margin: 1.5rem 0 1rem; }
.prose h2 { margin-top: 2rem; }
.prose .draft { border: 3px solid var(--ink); padding: 0.75rem 1rem; background: var(--panel); }

.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-block: 1.5rem 2rem; font-size: 0.9375rem; color: var(--muted); }

@media (min-width: 52rem) {
  .p2p { grid-template-columns: 1fr 1fr; align-items: start; }
  [data-has-code] .p2p-recv { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lane, .journey li::after { animation: none !important; }
  * { transition: none !important; }
}


/* Fatafat admin panel */
.admin-wrap { width: min(100% - 2rem, 860px); margin: 0 auto; }
.admin-wrap h2 { margin: .3rem 0 .8rem; }
.admin-wrap .form { margin: 1rem 0; }
.admin-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.admin-actions h2 { margin-right: auto; }
.admin-users { display: grid; gap: .8rem; margin: 1rem 0 3rem; }
.admin-user { padding: 1rem; overflow-wrap: anywhere; }
.admin-user h3 { margin: 0 0 .6rem; }
.admin-user p { margin: .3rem 0; }
.admin-danger { border-color: #d33; }
#admin-message { overflow-wrap: anywhere; }