/* ==========================================================================
   Bar Hunt — the editor
   Hand-written CSS. No framework, no preprocessor, no build step.

   The TOKEN LAYER is reused verbatim from the game's visual shell (the old
   repo's public/app.css lines 14-80): the same near-black ground, the same
   electric cyan accent, the same gold for money, the same glows and easings.
   An author and a guest should be looking at the same app.

   The TYPE SCALE and the CONTROL METRICS are the editor's own, and deliberately
   NOT the game's. The game's --tap: 56px floor and its
   clamp(2.5rem, 11vw, 4.5rem) display type are phone-in-a-dark-bar ergonomics:
   a thumb, one decision on screen, arm's length. This is a dense desktop form
   with fifty controls on it, read at 60cm with a mouse. Viewport-scaled type
   would make a wide window shout; a 56px floor would push one stop past a
   screenful. So the scale here is fixed rem, and the control floor is 34px.

   Everything is scoped under .editor. The game's stylesheet is loaded on the
   same pages by the layout and is NOT modified to suit this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — the game's colour layer, the editor's metrics
   -------------------------------------------------------------------------- */

.editor {
  color-scheme: dark;

  /* Ground + surfaces — from the game's token layer */
  --ground:       #08080b;
  --ground-lift:  #101017;
  --surface:      #17171f;
  --surface-hi:   #21212c;
  --line:         #2e2e3d;
  --line-hot:     #45455c;

  /* Ink */
  --ink:          #f6f6fa;
  --ink-dim:      #a8a8bd;
  --ink-faint:    #6c6c85;

  /* Signal colours */
  --accent:       #00e5ff;
  --accent-deep:  #00a6bd;
  --accent-ink:   #00181d;
  --danger:       #ff2b45;
  --danger-deep:  #b3001a;
  --danger-ink:   #ffffff;
  --gold:         #ffc844;
  --gold-deep:    #c99400;
  --gold-ink:     #241900;
  --good:         #35e07a;

  /* Glows — used far more sparingly here than in the game */
  --glow-accent:  0 0 28px rgba(0, 229, 255, .45);
  --glow-danger:  0 0 32px rgba(255, 43, 69, .5);

  /* Fonts — the game's stacks */
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* THE EDITOR'S OWN TYPE SCALE. Fixed rem: a form does not grow with the
     window, it grows a second column. */
  --fs-page:   1.5rem;      /* page title */
  --fs-section: 1.125rem;   /* section title */
  --fs-panel:  1rem;        /* panel title */
  --fs-body:   0.9375rem;
  --fs-label:  0.8125rem;
  --fs-hint:   0.75rem;

  /* THE EDITOR'S OWN CONTROL METRICS. 34px, not the game's 56px floor. */
  --tap:       34px;
  --gap:       10px;
  --gap-lg:    18px;
  --pad:       14px;
  --radius:    8px;
  --radius-lg: 12px;

  /* Motion — the game's easings */
  --dur-fast:  160ms;
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
}

/* The editor owns the page it is on. Higher specificity than a bare `body`
   rule so it does not depend on stylesheet order. */
body:has(.editor) {
  margin: 0;
  background: #08080b;
  color: #f6f6fa;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

/* --------------------------------------------------------------------------
   2. Page frame — desktop. Two columns; forms left, map and night right.
   -------------------------------------------------------------------------- */

.editor {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 28px 96px;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.editor--narrow { max-width: 820px; }

.editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-lg);
  padding-bottom: var(--gap-lg);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--gap-lg);
}

.editor__crumb { margin: 0; flex: 1 0 100%; font-size: var(--fs-hint); }
.editor__crumb a { color: var(--ink-dim); text-decoration: none; }
.editor__crumb a:hover { color: var(--accent); }

.editor__title {
  margin: 0;
  font-size: var(--fs-page);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.editor__meta { margin: 0; color: var(--ink-dim); font-size: var(--fs-hint); }

.editor__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
}

.editor__column { display: flex; flex-direction: column; gap: var(--gap-lg); min-width: 0; }
.editor__column--side { position: sticky; top: 24px; }

.section__title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: 700;
  color: var(--ink);
}

.stops { display: flex; flex-direction: column; gap: var(--gap-lg); }

/* --------------------------------------------------------------------------
   3. Panels
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--pad) calc(var(--pad) + 2px);
}

.panel--row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.panel--stop { border-left: 3px solid var(--line-hot); }

.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); }

.panel__title {
  margin: 0 0 var(--gap);
  font-size: var(--fs-panel);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.panel__title a { color: var(--ink); text-decoration: none; }
.panel__title a:hover { color: var(--accent); }

.panel__subtitle {
  margin: var(--gap-lg) 0 var(--gap);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.tag {
  font-size: var(--fs-hint);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.empty {
  margin: 0;
  padding: var(--pad);
  border: 1px dashed var(--line-hot);
  border-radius: var(--radius);
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   4. Flash — THAT something failed. What failed is beside the field.
   -------------------------------------------------------------------------- */

.flash {
  margin: 0 0 var(--gap-lg);
  padding: 10px var(--pad);
  border-radius: var(--radius);
  border: 1px solid;
  font-size: var(--fs-body);
}

.flash--notice { border-color: rgba(53, 224, 122, .5); background: rgba(53, 224, 122, .09); color: var(--good); }
.flash--alert  { border-color: rgba(255, 43, 69, .55); background: rgba(255, 43, 69, .1); color: #ff8f9d; }

/* --------------------------------------------------------------------------
   5. Fields
   -------------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: var(--gap); }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field__row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.field--grow { flex: 1 1 220px; }
.field--narrow { flex: 0 0 110px; }

.field__label {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

.field__hint { margin: 0; font-size: var(--fs-hint); color: var(--ink-faint); }
.field__hint code { font-family: var(--font-mono); color: var(--accent); }

.field__error {
  margin: 0;
  font-size: var(--fs-hint);
  font-weight: 600;
  color: #ff8f9d;
}

.field__actions { display: flex; gap: var(--gap); margin-top: 4px; }

.control {
  min-height: var(--tap);
  width: 100%;
  padding: 6px 10px;
  background: var(--ground-lift);
  color: var(--ink);
  border: 1px solid var(--line-hot);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, .28);
}

.control--area { min-height: calc(var(--tap) * 2); resize: vertical; line-height: 1.45; }
.control--check { width: auto; min-height: 0; height: 20px; accent-color: var(--accent); }

.field:has(.field__error) .control { border-color: var(--danger); }

/* --------------------------------------------------------------------------
   6. Dares
   -------------------------------------------------------------------------- */

.dare {
  border-top: 1px solid var(--line);
  padding-top: var(--gap);
  margin-top: var(--gap);
}
.dare:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.dare__row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.button,
.editor input[type="submit"] {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line-hot);
  background: var(--surface-hi);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.button:hover,
.editor input[type="submit"]:hover { filter: brightness(1.15); }

.button--primary,
.editor input.button--primary[type="submit"] {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: var(--accent-ink);
}
.button--primary:hover { box-shadow: var(--glow-accent); }

.button--gold,
.editor input.button--gold[type="submit"] {
  background: var(--gold);
  border-color: var(--gold-deep);
  color: var(--gold-ink);
}

.button--danger {
  background: transparent;
  border-color: var(--danger-deep);
  color: var(--danger);
}
.button--danger:hover { background: var(--danger-deep); color: var(--danger-ink); box-shadow: var(--glow-danger); }

.button--quiet { background: transparent; color: var(--ink-dim); }

.editor form[class~="button_to"] { display: inline-block; margin-top: var(--gap); }

/* --------------------------------------------------------------------------
   8. The map, and the click surface
   -------------------------------------------------------------------------- */

.editor-map {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1400;   /* MapRenderer::WIDTH / MapRenderer::HEIGHT */
  border: 1px solid var(--line-hot);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d1420;         /* MapRenderer's own ground, so a blank map matches */
  cursor: crosshair;
}

/* The SVG is stretched to exactly the click box, so a click's fraction of the
   box is the same fraction of MapRenderer's canvas. */
.editor-map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.editor-map__blank {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--pad);
  color: var(--ink-faint);
  font-size: var(--fs-hint);
}

/* Where the last click landed. Unsaved, and it says so in the readout. */
.editor-map__cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-accent);
  pointer-events: none;
}

.editor-map__cursor[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. Sign in, and the two password screens

   The only pages an unauthenticated person sees, and the first thing the MC
   touches on party night. They reuse this file's whole form vocabulary —
   `.form`, `.field`, `.field__label`, `.control`, `.button--primary`, `.flash`
   — and `.panel` for the card chrome, so there is no second set of input styles
   to keep in step with the editor's.

   Two metrics are deliberately NOT the editor's. The control floor is 44px
   rather than 34px: the editor is a laptop with fifty controls on screen, but
   this is two fields that may well be typed with a thumb, one-handed, in a bar,
   while people wait. And the card is centred in the viewport rather than hung
   from the top-left, because a 400px form sitting in the corner of a 1400px
   page reads as an unfinished page rather than a considered one.

   Section 10's media query does not touch any of this — it is about
   `.editor__columns`, which this surface does not use.
   -------------------------------------------------------------------------- */

.editor--auth {
  max-width: none;
  min-height: 100dvh;
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);

  /* A thumb, not a mouse. See the section comment. */
  --tap: 44px;
}

/* The wordmark, in the eyebrow idiom the play surface uses for its labels. */
.auth__brand {
  margin: 0;
  font-size: var(--fs-hint);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The card itself is a `.panel`; this only constrains its width. */
.auth { width: 100%; max-width: 400px; }

.auth__head { margin-bottom: var(--gap-lg); }

.auth__title {
  margin: 0;
  font-size: var(--fs-page);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth__subtitle { margin: 4px 0 0; font-size: var(--fs-hint); color: var(--ink-dim); }

/* One action per screen, and it is the only thing to press: full width. */
.auth .field__actions { margin-top: var(--gap); }
.auth .button, .auth input[type="submit"] { width: 100%; }

.auth__aside {
  margin: var(--gap-lg) 0 0;
  padding-top: var(--gap);
  border-top: 1px solid var(--line);
  font-size: var(--fs-hint);
  color: var(--ink-dim);
  text-align: center;
}

.auth__aside a { color: var(--accent); }

/* --------------------------------------------------------------------------
   10. One column when the window cannot hold two. Still a desktop layout —
      there is no phone layout for the editor, on purpose.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .editor__columns { grid-template-columns: minmax(0, 1fr); }
  .editor__column--side { position: static; }
}