/* ---------- buttons ---------- */
.btn {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 9px 17px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-quick), background-color var(--dur-quick), transform var(--dur-quick), filter var(--dur-quick);
}

.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; transform: none; }

/* Primary: solid Solar Flare with Dark Matter text, no outline. */
.btn--primary {
  background: var(--solar);
  border-color: transparent;
  color: var(--dark-matter);
}

/* Hover: solid primary teal, Interstellar Deep, still no outline. */
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--interstellar);
  border-color: transparent;
  color: var(--nebula);
}

.btn--quiet { border-color: transparent; color: var(--dim); }
.btn--quiet:hover { border-color: transparent; color: var(--ink); background: var(--panel-2); }

.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn--danger:hover { border-color: var(--danger); }

.btn--small { min-height: 32px; padding: 5px 12px; font-size: var(--t-xs); }

/* Outline at rest; hover, focus and "you are here" fill with Solar Flare. */
.btn--outline { border-color: var(--line-2); color: var(--ink); }
.btn--outline:hover,
.btn--outline:focus-visible,
.btn--outline[aria-current="page"] { background: var(--solar); border-color: var(--solar); color: var(--dark-matter); }

.actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ---------- surfaces ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.tag, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--panel-2);
  color: var(--dim);
  white-space: nowrap;
}

.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--faint)); }

.tag--rock { background: var(--brass-soft); color: var(--brass); }
.tag--team { background: var(--tide-soft); color: var(--tide); }
.tag--ok { background: var(--tide-soft); color: var(--tide); }
.tag--warn { background: var(--flare-soft); color: var(--flare); }

.dot--now { --dot: var(--flare); }
.dot--next { --dot: var(--mist); }
.dot--waiting { --dot: var(--brass); }
.dot--done { --dot: var(--done); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field > span { font-size: var(--t-xs); color: var(--dim); font-weight: 500; }
.field .hint { font-size: var(--t-xs); color: var(--faint); }

.input, .textarea, .select {
  width: 100%;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick);
}

.textarea { min-height: 96px; resize: vertical; }

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--tide);
  box-shadow: 0 0 0 3px var(--tide-soft);
}

.input::placeholder, .textarea::placeholder { color: var(--faint); }

.field-error { color: var(--danger); font-size: var(--t-xs); }

/* ---------- empty state ---------- */
.empty {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-8) var(--s-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--dim);
}

.empty .moon-phase { width: 44px; height: 44px; }
.empty h2, .empty h3 { font-size: var(--t-lg); color: var(--ink); margin-bottom: 4px; }
.empty p { max-width: 56ch; font-size: var(--t-sm); }
.empty .actions { margin-top: var(--s-3); }

.empty--compact {
  display: block;
  padding: var(--s-4);
  font-size: var(--t-xs);
  color: var(--faint);
  text-align: center;
  border-radius: var(--r-md);
}

/* ---------- moon phase glyph ---------- */
.moon-phase { width: 14px; height: 14px; flex-shrink: 0; }
.moon-phase .disc { fill: var(--panel-3); stroke: var(--line-2); stroke-width: 1; }
.moon-phase .lit { fill: var(--ink); }

/* ---------- drawer ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(8 5 7 / 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-move) var(--ease-out);
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  width: min(540px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(104%);
  transition: transform var(--dur-move) var(--ease-out);
}

/* The frame fills the panel so the body scrolls inside it, below the head. */
.drawer > turbo-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.drawer-open .scrim { opacity: 1; pointer-events: auto; }
.drawer-open .drawer { transform: none; }

.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--t-sm);
}

.drawer__body { padding: var(--s-6); overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.drawer__body h2 { font-size: var(--t-2xl); line-height: 1.12; margin: var(--s-3) 0 var(--s-4); overflow-wrap: anywhere; }
.drawer__body .desc { color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }

.close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.close:hover { background: var(--panel-3); }

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-5) 0;
  font-size: var(--t-sm);
}

.facts dt { color: var(--faint); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.drawer-section {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s-3);
}

/* ---------- toast / flash ---------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translateX(-50%);
  display: grid;
  gap: var(--s-2);
  width: max-content;
  max-width: calc(100% - 32px);
  pointer-events: none;
}

.toast {
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--shadow-float);
  animation: toast-in var(--dur-move) var(--ease-out), toast-out 300ms ease-in 4s forwards;
}

.toast--alert { background: var(--danger); color: #1b0b09; }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- avatar ---------- */
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--ink);
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

/* ---------- brand mark (moon + brand star) ---------- */
.brand-mark { flex-shrink: 0; overflow: visible; }
.brand-mark__moon { fill: var(--moon); }
.brand-mark__star { fill: var(--star); overflow: visible; }

/* Hand-written accents (MM Hand), the way the brand book overlays words on
   bold type: white, tilted, slightly overlapping. Words only (no numerals). */
.hand-accent {
  font-family: var(--hand);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--nebula);
  transform: rotate(-6deg);
  display: inline-block;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- team accents ----------
   One colour per team so labels scan at a glance. The team name is always
   shown, so colour is a second cue: it sits on a dot and a soft tint while
   the text keeps the ink colour. Six hues, the best-separated set the
   dataviz validator found (no 6-hue set passes every all-pairs check;
   labels carry identity, so that is acceptable here). */
.team--leadership { --team: #e39324; }
.team--marketing { --team: #8c78dc; }
.team--creative { --team: #da5fa8; }
.team--web { --team: #1a9cc0; }
.team--accounting { --team: #57a84a; }
.team--bizdev { --team: #a8834a; }
.team--people { --team: #3fae9f; }
.team--strategy { --team: #4a72d0; }
.team--podcast { --team: #c72a2a; }

.tag--team {
  background: color-mix(in srgb, var(--team, var(--cosmic)) 18%, transparent);
  color: var(--ink);
}
.tag--team::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--team, var(--cosmic));
  flex-shrink: 0;
}

/* ---------- status chips (Wrike style) ----------
   Colours follow MM's Wrike workflows so statuses read the same in both
   tools: New gray, TBA turquoise, To Do dark red, In Progress yellow,
   Client Review purple, Completed green. Solid chip, small radius. */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: none;
  white-space: nowrap;
  background: var(--chip-bg);
  color: var(--chip-ink, #fff);
}
.status--now, .stage--building { --chip-bg: #f9c02d; --chip-ink: #1a1318; }      /* In Progress: yellow */
.status--next, .stage--planned { --chip-bg: #b8282c; }                          /* To Do: dark red */
.status--waiting { --chip-bg: #8e3fb0; }                                        /* Client Review: purple */
.status--done, .stage--shipped { --chip-bg: #3f9b4b; }                          /* Completed: green */
.stage--new { --chip-bg: #6e6a6c; }                                             /* New: gray */
.stage--review { --chip-bg: #1fb5b0; --chip-ink: #0f1a1a; }                     /* TBA: turquoise */
.stage--monitoring { --chip-bg: #8e3fb0; }                                       /* Client Review: purple */
.stage--improving { --chip-bg: #faa73f; --chip-ink: #1a1318; }                   /* Solar Flare: refining */

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.panel > h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.faint { color: var(--faint); }
.ta-r { text-align: right; justify-self: end; }

/* ---------- hub layout: department sidebar + main (Overview, Ideas board) ---------- */
.hub { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-6, 40px); align-items: start; }
.hub-side { position: sticky; top: 84px; display: grid; gap: var(--s-5); }
.hub-side__label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 10.5px; color: var(--dim);
}
.dept-nav { display: grid; gap: 2px; margin-top: -10px; }
.dept-link, .side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md, 10px);
  color: var(--dim); text-decoration: none; font-size: var(--t-sm);
  transition: background-color var(--dur-quick), color var(--dur-quick);
}
.dept-link:hover, .side-link:hover { color: var(--ink); background: var(--panel); }
.dept-link[aria-current="page"] { color: var(--ink); background: var(--panel-2); }
.dept-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--team, var(--cosmic)); flex-shrink: 0; }
.dept-name { flex: 1; }
.dept-count {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: var(--panel-3); color: var(--ink); font-size: 11px; font-weight: 700;
}
.dept-link[aria-current="page"] .dept-count, .dept-count--hot { background: var(--punch); color: #fff; box-shadow: 0 0 12px -2px var(--punch); }
.hub-side__more { display: grid; gap: 2px; padding-top: var(--s-4); border-top: 1px solid var(--line); }

.hub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); }
.greeting {
  font-size: clamp(30px, 4.2vw, 52px); line-height: 0.95;
  color: var(--ink);
  text-shadow: 0 0 28px rgb(201 169 106 / 0.38), 0 0 2px rgb(246 222 170 / 0.35);
}
.hub-head__hand { display: inline-block; margin: 2px 0 0 6px; font-size: clamp(20px, 2.4vw, 28px); }
.overview-sub, .hub-head p:not(.live) { color: var(--dim); margin-top: var(--s-3); max-width: 62ch; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.tile {
  display: grid; gap: 6px; padding: var(--s-5) var(--s-5) var(--s-4);
  border-radius: var(--r-xl);
  /* a whisper of the status colour, fading out, on brand-site glass */
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tile, var(--cosmic)) 16%, transparent) 0%, transparent 62%),
    rgb(120 120 120 / 0.08);
  border: 1px solid color-mix(in srgb, var(--tile, var(--line-2)) 26%, var(--line));
  box-shadow: 0 0 34px -12px color-mix(in srgb, var(--tile, var(--cosmic)) 45%, transparent);
  color: inherit; text-decoration: none; position: relative; overflow: hidden;
  transition: border-color var(--dur-quick), box-shadow var(--dur-move), transform var(--dur-quick);
}
.tile__label { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; color: var(--dim); }
.tile .num {
  font-family: var(--display); font-size: clamp(30px, 3.4vw, 42px); line-height: 1; color: var(--ink);
  text-shadow: 0 0 22px color-mix(in srgb, var(--tile, var(--cosmic)) 40%, transparent);
}
.tile__sub { font-size: var(--t-xs); color: var(--faint); }
a.tile:hover { border-color: color-mix(in srgb, var(--tile) 55%, var(--line)); box-shadow: 0 0 44px -10px color-mix(in srgb, var(--tile) 60%, transparent); transform: translateY(-1px); }
.tile--now { --tile: #f9c02d; }
.tile--next { --tile: #b8282c; }
.tile--waiting { --tile: #8e3fb0; }
.tile--live { --tile: #3f9b4b; }
.tile--done { --tile: var(--galactic, #428393); }
a.tile[aria-current="true"] { border-color: color-mix(in srgb, var(--tile) 75%, var(--line)); box-shadow: 0 0 44px -10px color-mix(in srgb, var(--tile) 70%, transparent); }
.tile--new { --tile: #6e6a6c; }
.tile--review { --tile: #1fb5b0; }

@media (max-width: 960px) {
  .hub { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .hub-side { position: static; gap: var(--s-3); }
  .dept-nav, .hub-side__more { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); border-top: 0; }
  .dept-link, .side-link { flex-shrink: 0; white-space: nowrap; background: var(--panel); }
  .hub-side__more { padding-top: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-head { flex-direction: column; }
}

/* ---------- +1 and suggestions on build items ---------- */
.build-input { display: grid; gap: var(--s-3); }
.vote-btn { display: inline-flex; gap: 10px; align-items: center; }
.vote-btn.is-on { background: var(--solar); border-color: var(--solar); color: var(--dark-matter); }
.vote-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--panel-3); color: var(--ink); font-size: 11px; font-weight: 700; }
.suggest-form { display: grid; gap: 8px; }
.suggestions { list-style: none; padding: 0; display: grid; gap: 10px; }
.suggestions li { padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--panel-2); }
.suggestions small { color: var(--faint); font-size: var(--t-xs); }
.hub--single { grid-template-columns: minmax(0, 1fr); }
.hub-main { min-width: 0; }

/* Light theme: the hand-written accents need the deep orange to read on Nebula Mist. */
@media (prefers-color-scheme: light) {
  .hand-accent { color: var(--flare); }
  .greeting { text-shadow: 0 0 26px rgb(201 169 106 / 0.28); }
}

/* ---------- line chart (Launched usage, daily spend) ---------- */
.usage-line { width: 100%; height: auto; display: block; overflow: visible; }
.chart__base { stroke: var(--line-2); stroke-width: 1; }
/* A tiny line chart for a card (launched projects, spend monitors). */
.spark { width: 100%; height: 28px; display: block; }
.spark__line { fill: none; stroke: var(--series-1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart__line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { fill: var(--series-1); stroke: var(--panel); stroke-width: 2; }
.chart__hit { fill: transparent; cursor: default; }
.chart__hit:focus-visible { outline: none; stroke: var(--ink); stroke-width: 1; }

/* status chips for launches, in the Wrike palette */
.launch--live { background: #3f9b4b; color: #fff; }
.launch--pilot { background: #f9c02d; color: var(--dark-matter); }
.launch--paused { background: #6e6a6c; color: #fff; }
.launch--retired { background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-2); }


/* How well a live automation works: five steps, red to green */
.maturity { display: grid; gap: 6px; }
.maturity__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 320px; }
.maturity__step { height: 8px; border-radius: 4px; background: var(--panel-3); }
.maturity[data-level="0"] .is-on { background: #b8282c; }
.maturity[data-level="1"] .is-on { background: var(--punch); }
.maturity[data-level="2"] .is-on { background: #f9c02d; }
.maturity[data-level="3"] .is-on { background: #8fbf4a; }
.maturity[data-level="4"] .is-on { background: #3f9b4b; box-shadow: 0 0 10px -2px #3f9b4b; }
.maturity__label { font-size: var(--t-xs); font-weight: 600; color: var(--ink); }
.maturity__hint { font-size: var(--t-xs); color: var(--dim); }
.launch-head .maturity { margin-top: var(--s-3); }
.priority-why { font-size: var(--t-xs); color: var(--dim); margin: 6px 0 10px; }
.priority-why b { color: var(--punch); }
.related-asks h3 { font-size: var(--t-sm); margin-bottom: 6px; }
.related-asks ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); }

/* Notes, archive and merge in the build item drawer */
.item-notes h3 { font-size: var(--t-sm); margin-bottom: 6px; }
.item-notes ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 8px; }
.item-notes li { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.item-notes small { color: var(--faint); font-size: var(--t-xs); }
.tidy summary { cursor: pointer; font-size: var(--t-sm); color: var(--dim); }
.tidy form { margin-top: var(--s-3); }

/* Phones: tighter tiles, the hand accent sits under the greeting */
@media (max-width: 640px) {
  .tile { padding: 14px 16px; }
  .tile .num { font-size: clamp(22px, 7vw, 28px); }
  .tile__word { font-size: 17px !important; }
  .hub-head__hand { display: block; margin: 8px 0 0 2px; font-size: 20px; }
}

/* Manage toolbar at the top of the build item drawer (AJ and Tim) */
.item-tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.item-tools a { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: var(--t-xs); font-weight: 600; }
.item-tools a:hover { background: var(--punch); border-color: var(--punch); color: #fff; }
.stage--done { --chip-bg: #428393; }                                             /* Done, not live: Galactic Depth */

/* Progress slider in the drawer (AJ) */
.progress-slider { display: flex; align-items: center; gap: 12px; }
.progress-slider input[type=range] {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 140px; height: 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--punch) var(--fill, 0%), color-mix(in srgb, var(--ink) 12%, transparent) var(--fill, 0%));
}
.progress-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink);
  border: 3px solid var(--punch); box-shadow: 0 0 12px -2px var(--punch); transition: transform var(--dur-fast, .15s);
}
.progress-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--punch); }
.progress-slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.progress-slider input[type=range]:focus-visible { outline: 2px solid var(--solar); outline-offset: 4px; }
.progress-slider output { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Where a request came from: a small app icon on a light tile, so the
   app colours read on both themes. The name is the hover text. */
.source-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 5px;
  background: var(--nebula);
  box-shadow: inset 0 0 0 1px rgb(26 19 24 / 0.08);
  vertical-align: -5px;
}
.source-icon svg { width: 14px; height: 14px; display: block; }
.source-icon--text { width: auto; padding: 0 6px; font-size: 11px; font-weight: 600; color: var(--dark-matter); }
.related-asks li .source-icon { margin-right: 6px; }

/* Mark done with an optional note on anything left (requests and drawer) */
.mark-done { margin-top: var(--s-3); }
.mark-done summary { list-style: none; display: inline-flex; width: auto; }
.mark-done summary::-webkit-details-marker { display: none; }
.mark-done[open] summary { display: none; }
.mark-done__form { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: 12px; }
.mark-done__form .btn { justify-self: start; }

/* ---------- Schmeez World launcher ----------
   The one door that isn't a tab: a floating ship-shaped pill in the corner,
   ringed by the Spacewalk gradient that slowly turns, with a UFO carrying a
   Schmeezie. Always night, whatever the theme. */
.world-launch-dock { display: flex; justify-content: flex-end; margin-top: var(--s-6); }

.world-launch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: radial-gradient(120% 140% at 20% 0%, var(--interstellar) 0%, var(--dark-matter) 60%);
  color: var(--nebula);
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 10px 30px rgb(8 5 7 / 0.55), 0 0 0 1px rgb(250 167 63 / 0.25), 0 0 26px rgb(250 167 63 / 0.18);
  transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}

.world-launch__ring {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--world-turn, 0deg), var(--cosmic), var(--astral), var(--mars), var(--solar), var(--cosmic));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  animation: world-turn 6s linear infinite;
}

@property --world-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes world-turn { to { --world-turn: 360deg; } }

.world-launch__ufo { width: 44px; height: 36px; flex-shrink: 0; animation: world-hover 3.2s ease-in-out infinite; }
.world-launch__ufo .hull { fill: var(--nebula); }
.world-launch__ufo .dome { fill: rgb(144 177 187 / 0.45); }
.world-launch__ufo .head { fill: var(--galactic); }
.world-launch__ufo .eye { fill: #050405; }
.world-launch__ufo .light { fill: var(--solar); }
.world-launch__ufo .beam { fill: rgb(250 167 63 / 0.35); }
@keyframes world-hover { 50% { transform: translateY(-3px) rotate(-3deg); } }

.world-launch__text { display: grid; line-height: 1.1; }
.world-launch__text b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.world-launch__text small { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--solar); font-size: 11px; font-weight: 600; }
.world-launch__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--solar); box-shadow: 0 0 0 0 rgb(250 167 63 / 0.6); animation: world-ping 1.8s ease-out infinite; }
@keyframes world-ping { to { box-shadow: 0 0 0 7px rgb(250 167 63 / 0); } }

.world-launch:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgb(8 5 7 / 0.6), 0 0 0 1px rgb(250 167 63 / 0.5), 0 0 40px rgb(250 167 63 / 0.35);
}
.world-launch:focus-visible { outline: 2px solid var(--solar); outline-offset: 4px; }

@media (max-width: 600px) {
  .world-launch { padding: 6px 14px 6px 8px; }
  .world-launch__ufo { width: 36px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .world-launch__ring, .world-launch__ufo, .world-launch__dot { animation: none; }
}