/* Eventually — the organiser's page (publish.html).
 *
 * This is the SHELL only. The form inside it is the same coordinator markup the app has
 * always used (src/coordinator.js), rendered in `pageMode`, so there is exactly one
 * publish form to maintain — see `.co-page` in main.css for how the modal chrome comes
 * off. Everything below is the page around it: header, tabs, allowance, venue book.
 *
 * main.css is loaded first for the Clay tokens and every .co-/.an- rule. It also styles
 * the APP body — fixed, unscrollable, dark grey behind a globe — so the first block here
 * puts a normal document back.
 *
 * DARK, like /browse/ and the city pages. This page is a destination on the website
 * rather than a panel inside the app, and those pages are all dark — an organiser
 * arriving from a city page should not be flashbanged into a cream form. It is done by
 * REDEFINING main.css's tokens for this body only, so every .co- and .an- rule follows
 * along without being rewritten, and the globe app is untouched. The handful of rules in
 * main.css that hard-code a light colour are listed at the bottom of this file and
 * overridden there; that list is the complete set, so if a form control ever looks wrong
 * on dark, the missing hex belongs in that block.
 */

/* ── the dark palette ────────────────────────────────────────────────────────── */
body.pg-body {
  color-scheme: dark;
  /* Ground and text lifted straight from /browse/ so the two pages are the same colour. */
  --canvas: #14100c;          /* the page itself */
  --bg:     #14100c;
  --cream:  #1c1712;          /* a card sitting on it */
  --bg2:    #1c1712;
  --paper:  #241d16;          /* a control sitting on a card */
  --panel-2:#1c1712;
  --ink:    #ece5da;
  --text:   #ece5da;
  --muted:  #d9cfc2;
  --faint:  #9a8f80;
  --hint:   #7d7365;
  --line:   #2e2820;
  --line-2: #3b332a;
  --stroke: #2e2820;
  --stroke-2: #3b332a;
  --frame:  #3b332a;
  /* Brand clay (#CB5A3C) is too dark to read as an accent on this ground — as a link it
     nearly disappears and as a button it muddies. The accent is the amber the city pages
     already use for links, which makes the primary buttons amber with dark text: more
     contrast than clay-on-dark could reach, and the same colour an organiser followed to
     get here. --cream doubles as "text on an accent", which is why it is a dark value. */
  --clay:   #f0a24a;
  --accent: #f0a24a;
  --cyan:   #f0a24a;
  --apricot:#ffd8a8;
  --ember:  #ffd8a8;
  /* The semantic five, on this ground. These are the values the dark overrides at the
     foot of this file were already using as literals. */
  --tint:       #2b231b;
  --clay-hover: #ffb463;
  --sand:       #241d16;
  --danger:     #ff9b84;
  --warn:       #e2c489;
  --shadow:    0 1px 3px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  /* The location mini-map is painted on a canvas, so it can't inherit any of the above.
     _drawMap() in coordinator.js reads these three and falls back to the light values. */
  --map-sea:  #1a150f;
  --map-land: rgba(236,229,218,0.52);
  --map-pin:  #f0a24a;
  --map-glow: #ffb463;   /* the warm pool the pin sits in */
}

/* The same blurred globe + vignette the city pages sit on. Fixed and inert. */
.pg-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pg-bg img {
  position: absolute; top: 42%; left: 50%; width: min(140vw, 1400px);
  transform: translate(-50%, -50%); filter: blur(24px) saturate(1.05); opacity: .34;
}
.pg-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,16,12,.30) 0%, rgba(20,16,12,.74) 58%, rgba(20,16,12,.96) 100%);
}
.pg-top, .pg-main, .pg-foot { position: relative; z-index: 1; }

/* ── the page is a page ──────────────────────────────────────────────────────── */
/* `hidden` is how this page shows and hides everything from script, and the browser
   implements it as a UA `display: none` — which ANY author display rule silently beats.
   The tab strip is `display: flex`, so it sat there fully visible with hidden="" on it.
   One rule, once, rather than a [hidden] twin for every flexed block. */
[hidden] { display: none !important; }
html { height: auto; }
body.pg-body {
  height: auto; min-height: 100%;
  overflow: visible;                     /* main.css hides overflow for the globe */
  background: var(--canvas);
  user-select: text;                     /* main.css turns selection off app-wide */
  -webkit-user-select: text;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── header ──────────────────────────────────────────────────────────────────── */
.pg-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: rgba(20,16,12,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* The brand NEVER shrinks. It used to carry `min-width: 0`, which let flex squeeze the
   box below the width of the word inside it — and a <span> with no overflow rule simply
   paints outside its box, so at 320px the wordmark rendered straight through the account
   chip next to it. Deciding what gives way is the whole job here: identity does not,
   the way back to the globe does not, the email address does. */
.pg-brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.pg-dots { display: inline-flex; gap: 3px; align-self: center; flex: none; }
.pg-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--clay); }
.pg-dots i:nth-child(2) { opacity: .66; }
.pg-dots i:nth-child(3) { opacity: .38; }
.pg-word { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.pg-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--clay); white-space: nowrap;
}
/* This group absorbs whatever width is left, and shrinks from the inside (the email). */
.pg-top-right { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
/* The allowance also rides in the header once it is known — the same chip the modal used. */
.pg-top .pg-quota {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); background: var(--paper);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
/* Same secondary height as .an-act — these are the same weight of control. */
.pg-acct, .pg-globe {
  /* inline-flex drops the whitespace between the arrow and the word, so the gap is
     set explicitly — otherwise it reads "←Globe". */
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font-family: var(--font);
  white-space: nowrap; transition: border-color .15s ease;
}
.pg-acct:hover, .pg-globe:hover { border-color: var(--clay); }
.pg-globe { flex: none; }   /* the way back is never the thing that gives way */
/* THE ONE ELASTIC ITEM in the header — an address can be any length, so this is what
   shrinks. ⚠️ `display: inline-block`, NOT the inline-flex above: `text-overflow` has no
   effect on a flex container, because the text becomes an anonymous flex item. The rule
   was here all along and did nothing; "rotimialade@gmail.com" was cut off mid-word with
   no ellipsis at all. Nothing else in this chip needs flex — it is one text node. */
.pg-acct {
  display: inline-block; flex: 0 1 auto; min-width: 0; max-width: 32vw;
  line-height: 20px; padding: 7px 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-globe-short { display: none; }

/* ── main column ─────────────────────────────────────────────────────────────── */
.pg-main { flex: 1 1 auto; width: 100%; max-width: 1020px; margin: 0 auto; padding: 22px 20px 56px; }

.pg-intro { margin-bottom: 26px; max-width: 640px; }
.pg-h1 { font-size: clamp(26px, 4.4vw, 38px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 10px; text-wrap: balance; }
.pg-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.pg-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pg-facts li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pg-facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.pg-facts b { color: var(--ink); font-weight: 700; }

/* ── tabs ────────────────────────────────────────────────────────────────────── */
/* The strip does NOT scroll. Three tabs always divide the width between them and each
   truncates if it has to, so the selected pill can never end up half off the left edge
   with no sign that it is there — which is what a scrolling strip does the moment the
   labels outgrow the phone. */
.pg-tabs {
  display: flex; gap: 6px; margin-bottom: 18px; padding: 5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden;
}
.pg-tab {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 9px 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.pg-tab:hover { color: var(--ink); }
.pg-tab.is-on { background: var(--ink); color: var(--cream); }
.pg-tab:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ── the allowance, said plainly ─────────────────────────────────────────────── */
/* Same padding as .pg-card — these two stack directly on top of each other, so 18px
   here and 20px there put their text on two different left edges. */
.pg-allow { margin-bottom: 18px; padding: 16px 20px 18px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.pg-allow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pg-allow-n { font-size: 15px; font-weight: 700; color: var(--ink); }
.pg-allow-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--faint); }
.pg-allow-bar { height: 8px; border-radius: 99px; background: #2e2820; overflow: hidden; }
.pg-allow-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--clay), var(--apricot)); }
.pg-allow.is-full .pg-allow-n { color: var(--clay); }
.pg-allow-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--hint); }
.pg-allow-note a { color: var(--clay); }

/* ── cards (Your events, Your venues, Sign in) ───────────────────────────────── */
/* Every card on this page — Your events, Your venues, Sign in — is the same object as
   the form's card: same padding, same radius, same border, and a title at the same size
   and weight as "Publish to the globe" (.co-head h2). They are the same kind of thing,
   so they must not be three sizes of heading in a row. */
.pg-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; }
.pg-h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 7px; text-wrap: balance; }
.pg-sub { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }

/* ── the venue book ──────────────────────────────────────────────────────────── */
.pg-venues { display: flex; flex-direction: column; }
.pg-venue { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pg-venue:last-child { border-bottom: 0; }
.pg-v-main { flex: 1 1 auto; min-width: 0; }
.pg-v-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-v-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-v-tz { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.pg-v-acts { display: flex; gap: 6px; flex: none; }
.pg-v-empty { font-size: 14px; color: var(--muted); margin: 0; }

/* ── sign in ─────────────────────────────────────────────────────────────────── */
.pg-signin .pg-card { max-width: 440px; }
.pg-auth { display: flex; flex-direction: column; gap: 14px; }
/* The two sign-in buttons are like functions, so they are the same height as each other
   and as the form's primary button (.co-publish, 50px). */
.pg-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; width: 100%; border-radius: 12px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  transition: border-color .15s ease;
}
.pg-google:hover { border-color: var(--clay); }
.pg-or { display: flex; align-items: center; gap: 12px; color: var(--hint); font-size: 12px; }
.pg-or::before, .pg-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.pg-mail { display: flex; flex-direction: column; gap: 8px; }
/* The sign-in field is a field of the same family as the form's, so it takes the same
   height, padding, radius, type size and focus ring — set once in main.css, repeated
   here only because this control is outside .co-body. */
.pg-mail label { font-size: 12px; line-height: 1.35; color: var(--muted); }
.pg-mail input {
  width: 100%; min-height: 44px; padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.3;   /* 16px avoids iOS zoom-on-focus */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pg-mail input:focus { border-color: var(--clay); background: #2b231b; outline: none; box-shadow: 0 0 0 3px rgba(240,162,74,.18); }
.pg-send {
  min-height: 50px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--clay); color: var(--cream); font-family: var(--font); font-size: 15px; font-weight: 700;
  transition: background .15s ease, box-shadow .15s ease;
}
.pg-send:hover { background: #ffb463; box-shadow: 0 10px 28px rgba(240,162,74,.26); }
.pg-send[disabled] { opacity: .6; cursor: default; }
.pg-auth-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.pg-auth-note.is-bad { color: #ff9b84; }

/* ── the form panel ──────────────────────────────────────────────────────────── */
/* The coordinator paints its own card; this panel only carries the gap around it. */
.pg-panel[hidden] { display: none; }

/* The "we kept what you typed" line. Quiet — it is reassurance, not an alert. */
.pg-draft {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 11px 14px; border-radius: 12px;
  background: #241d13; border: 1px solid #4a3d22;
}
.pg-draft[hidden] { display: none; }
.pg-draft span { flex: 1 1 220px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: #e2c489; }
.pg-draft .pg-draft-x { flex: none; }

/* ── footer ──────────────────────────────────────────────────────────────────── */
.pg-foot { border-top: 1px solid var(--line); padding: 20px; text-align: center; }
.pg-foot p { margin: 0; font-size: 12.5px; color: var(--faint); }
.pg-foot a { color: var(--muted); text-decoration: none; }
.pg-foot a:hover { color: var(--clay); text-decoration: underline; }

/* ── narrow screens ──────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .pg-top { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .pg-kicker { display: none; }              /* the page title already says it */
  .pg-top .pg-quota { display: none; }       /* it has its own block below, in full */
  .pg-top-right { gap: 6px; min-width: 0; }
  .pg-globe-long { display: none; }
  .pg-globe-short { display: inline; }
  .pg-acct { max-width: 40vw; padding: 8px 11px; }
  .pg-main { padding: 18px 14px 44px; }
  /* All three tabs fit a 375px phone at this size, so the strip doesn't need scrolling
     — and a tab you have to scroll to find is a tab nobody presses. */
  .pg-tabs { padding: 4px; gap: 3px; }
  .pg-tab { font-size: 12.5px; padding: 9px 6px; }
  .pg-card, .pg-allow { padding: 16px 16px 18px; }
  .pg-h2 { font-size: 19px; }
  /* Actions wrap under the venue rather than squeezing the name to nothing. */
  .pg-venue { flex-wrap: wrap; }
  .pg-v-acts { flex: 1 1 100%; }
  .pg-v-acts .an-act { flex: 1 1 calc(50% - 3px); min-height: 44px; }
}
@media (max-width: 380px) {
  .pg-globe { padding: 8px 10px; font-size: 12px; }
  /* At 320px "Publish Event" came two pixels short of its third of the strip and
     truncated to "Publish Ev…". Two pixels of padding buys the whole label back. */
  .pg-tab { font-size: 12px; padding: 9px 3px; }
}

/* ═══ THE LIGHT COLOURS main.css HARD-CODES ══════════════════════════════════════
   Everything above works by redefining tokens, which carries the whole form across on
   its own. These are the rules in main.css that name a light colour outright, so they
   would otherwise punch cream holes in a dark page. This is the COMPLETE set — found by
   grepping every .co-/.an- rule for a hex — so a control that still looks wrong on dark
   means a new hard-coded colour was added upstream and belongs here.
   Scoped to .pg-body throughout: the globe app's own modal is untouched. */

/* Fields: the focus state filled white, and the picture drop zone lit white on hover. */
.pg-body .co-body input:focus,
.pg-body .co-body select:focus,
.pg-body .co-body textarea:focus { background: #2b231b; box-shadow: 0 0 0 3px rgba(240,162,74,.18); }
.pg-body .co-img-drop:hover,
.pg-body .co-img-drop:focus-visible,
.pg-body .co-img-drop.is-over { background: #2b231b; }
.pg-body .co-sug:hover { background: #2b231b; }
.pg-body .co-close { background: var(--paper); }

/* The primary button is amber here, so its clay hover would have been a jump to a
   darker colour than the button itself. */
.pg-body .co-publish:hover { background: #ffb463; box-shadow: 0 10px 28px rgba(240,162,74,.26); }

/* The allowance chip in the form header. */
.pg-body .co-quota { background: var(--paper); border-color: var(--line-2); }
.pg-body .co-quota.is-low  { color: #e2c489; background: #241d13; border-color: #4a3d22; }
.pg-body .co-quota.is-full { color: #ffb0a0; background: #2a1a17; border-color: #573029; }

/* The venue's time-zone confirmation, and its warning state. */
.pg-body .co-tz-note { background: #241d16; border-color: var(--line-2); }
.pg-body .co-tz-note.warn { background: #2e2014; border-color: #5b452c; }
.pg-body .co-tz-note .co-tz-check { color: #ffd8a8; }

/* Your events: the engagement bars, the status chips, and the destructive actions. */
.pg-body .an-bar { background: #2e2820; }
.pg-body .an-badge { color: #ffd8a8; background: #2e2417; }
.pg-body .an-badge.an-pending { color: #e2c489; background: #2b2313; }
.pg-body .an-badge.an-rejected { color: #ff9b84; background: #2a1a17; }
.pg-body .an-reason { color: #ff9b84; }
.pg-body .an-danger { color: #ff9b84; }
.pg-body .an-danger:hover { border-color: #ff9b84; background: rgba(255,155,132,.10); }
.pg-body .an-reg { background: #1f1a14; }
.pg-body .kpi { background: #1f1a14; }

/* The location card's error state — clay-red on cream, unreadable on this ground. */
.pg-body .co-loc.co-need-loc .map-canvas,
.pg-body .co-loc.co-need-loc .f-addr { border-color: #ff9b84; box-shadow: 0 0 0 2px rgba(255,155,132,.18); }

/* The live-updates perk line (currently off — LIVE_UPDATES_PROMO) and the door list. */
.pg-body .co-perk { background: #241d13; border-color: #4a3d22; }

/* A card on this page reads as a raised surface rather than a bordered box: the border
   is barely there against the ground, so the lift comes from the shadow. */
.pg-body .pg-card,
.pg-body .pg-allow,
.pg-body .pg-tabs,
.pg-body .co-page .co-modal { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.35); }

/* Two more surfaces that resolve to the card colour on dark and so would vanish into it:
   the category-colour note (a tinted block inside the card) and the form's action band. */
.pg-body .co-catcolor { background: var(--paper); border-color: var(--line-2); }
.pg-body .co-page .co-foot { background: #181310; }