/* Route publishing tool. Leans on the tokens in ../styles.css so the page
   sits inside the rest of the site rather than beside it. */

.tool-main {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--s-7, 32px) var(--s-4, 16px) var(--s-8, 40px);
}

.tool-main .page-title {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-3, 12px);
  color: var(--fg-1);
}

.tool-main .page-lead {
  color: var(--fg-2);
  max-width: 62ch;
  margin: 0 0 var(--s-7, 32px);
}

.tool-step {
  border-top: 1px solid var(--line-2);
  padding-top: var(--s-6, 24px);
  margin-top: var(--s-6, 24px);
}

.tool-step h2 {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  font-size: 1.25rem;
  color: var(--fg-1);
  margin: 0 0 var(--s-3, 12px);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.sub-head {
  margin: var(--s-6, 24px) 0 var(--s-2, 8px);
  color: var(--fg-1);
  font-size: 1rem;
}

.step-lead {
  color: var(--fg-2);
  font-size: 0.92rem;
  max-width: 68ch;
  margin: 0 0 var(--s-4, 16px);
}

/* ── Dropzone ─────────────────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed var(--line-3);
  border-radius: 16px;
  background: var(--bg-1);
  padding: var(--s-8, 40px) var(--s-4, 16px);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-over {
  border-color: var(--fg-1);
  background: var(--bg-2);
  outline: none;
}

.dropzone.is-loaded { border-style: solid; border-color: var(--line-3); }

.drop-title {
  margin: 0 0 var(--s-1, 4px);
  color: var(--fg-1);
  font-weight: 600;
}

.drop-sub {
  margin: 0;
  color: var(--fg-3);
  font-size: 0.85rem;
}

/* ── Notices ──────────────────────────────────────────────────────────── */
.notice {
  margin-top: var(--s-4, 16px);
  padding: var(--s-4, 16px);
  border-radius: 12px;
  border: 1px solid rgba(240, 196, 25, 0.35);
  background: rgba(240, 196, 25, 0.07);
}

.notice p { margin: 0 0 var(--s-2, 8px); color: var(--fg-2); font-size: 0.9rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-fineprint { color: var(--fg-3); font-size: 0.82rem; }

.checkline {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2, 8px);
  color: var(--fg-2);
  font-size: 0.9rem;
  cursor: pointer;
}

.checkline input { margin-top: 3px; accent-color: var(--fg-1); }

.status {
  margin-top: var(--s-4, 16px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 0.88rem;
}

.status p { margin: 0 0 var(--s-1, 4px); }
.status p:last-child { margin-bottom: 0; }
.status.is-error { border-color: rgba(239, 107, 98, 0.5); background: rgba(239, 107, 98, 0.08); }

/* ── Preview ──────────────────────────────────────────────────────────── */
.preview-card {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg-1);
  padding: var(--s-4, 16px);
}

.preview-graphics {
  display: flex;
  gap: var(--s-4, 16px);
  align-items: stretch;
  flex-wrap: wrap;
}

.preview-graphics canvas {
  background: var(--bg-2);
  border-radius: 10px;
  max-width: 100%;
}

#shape-canvas { flex: 0 0 220px; }
#profile-canvas { flex: 1 1 320px; min-width: 260px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-3, 12px);
  margin-top: var(--s-4, 16px);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3, 12px);
  background: var(--bg-2);
  border-radius: 10px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--fg-4);
}

.stat-value { color: var(--fg-1); font-weight: 600; font-size: 1.05rem; }

.rider-box {
  margin-top: var(--s-4, 16px);
  padding: var(--s-4, 16px);
  border-radius: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
}

.rider-lead { margin: 0 0 var(--s-3, 12px); color: var(--fg-3); font-size: 0.84rem; }

.rider-inputs { display: flex; gap: var(--s-4, 16px); flex-wrap: wrap; }

.rider-inputs label {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  color: var(--fg-2);
  font-size: 0.88rem;
}

.rider-inputs input { width: 5.5rem; }

/* ── Histogram ────────────────────────────────────────────────────────── */
.histogram-details { margin-top: var(--s-4, 16px); }

.histogram-details summary {
  cursor: pointer;
  color: var(--fg-2);
  font-size: 0.88rem;
  padding: var(--s-2, 8px) 0;
}

.histogram { display: flex; flex-direction: column; gap: 3px; padding-top: var(--s-2, 8px); }

.hist-row { display: grid; grid-template-columns: 8rem 1fr 4.5rem; gap: var(--s-3, 12px); align-items: center; }

.hist-label, .hist-value {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-3);
}

.hist-value { text-align: right; }

.hist-bar-wrap { background: var(--bg-2); border-radius: 4px; height: 12px; overflow: hidden; }
.hist-bar { display: block; height: 100%; background: var(--fg-1); border-radius: 4px; }

/* ── Fields ───────────────────────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4, 16px);
}

.field { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
.field-wide { grid-column: 1 / -1; }
.checkfield { padding-top: var(--s-1, 4px); }

.field > span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-3);
}

.field > span em {
  font-style: normal;
  color: var(--fg-1);
  margin-left: var(--s-2, 8px);
}

.field small { color: var(--fg-4); font-size: 0.78rem; line-height: 1.45; }

input[type="text"],
input[type="number"],
textarea,
select {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 10px 12px;
  width: 100%;
}

textarea { resize: vertical; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--fg-1);
}

/* ── Output ───────────────────────────────────────────────────────────── */
.output-block { margin-bottom: var(--s-6, 24px); }

.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--s-2, 8px);
}

.output-head h3 { margin: 0; color: var(--fg-1); font-size: 1rem; }
.output-actions { display: flex; gap: var(--s-2, 8px); }

.output-json {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: var(--s-4, 16px);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--fg-2);
  /* JSON is wide and must never push the page sideways. */
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  white-space: pre;
}

.manifest-in { margin-bottom: var(--s-3, 12px); font-family: var(--font-mono); font-size: 0.78rem; }

.numbered-list { color: var(--fg-2); font-size: 0.9rem; line-height: 1.7; padding-left: 1.2rem; }
.numbered-list code { font-family: var(--font-mono); font-size: 0.85em; color: var(--fg-1); }

/* ── Field with an inline action ──────────────────────────────────────── */
.field-row {
  display: flex;
  gap: var(--s-2, 8px);
  align-items: stretch;
}

.field-row input { flex: 1; min-width: 0; }

.mini-btn {
  flex: 0 0 auto;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0 var(--s-3, 12px);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.mini-btn:hover:not(:disabled) { border-color: var(--fg-1); color: var(--fg-1); }
.mini-btn:disabled { opacity: 0.5; cursor: default; }

#place-status.is-error { color: var(--zone-6); }

/* ── The publishing flow strip ────────────────────────────────────────────
   Sits above the tool's own numbered steps and answers a different question:
   those explain how to drive this page, this explains what publishing a route
   actually consists of. Without it the manifest section at the bottom arrives
   with no context and reads as a fourth thing to learn rather than as one
   line to paste. */

/* One card holding three nodes, not three cards: the three files are one
   chain, and drawing them as separate panels made them read as three
   unrelated things of equal importance. Same shape as the repository flow on
   the home page, so the two diagrams say "this connects to that" the same way.

   No ordinals here on purpose - the page already has its own 1/2/3 for the
   steps you perform, and a second numbering meaning something else next to it
   is what made this strip confusing. Order comes from the arrows. */

.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: var(--s-4, 16px);
  list-style: none;
  margin: 0 0 var(--s-5, 20px);
  padding: var(--s-6, 24px);
  background: var(--bg-1);
  border-radius: var(--r-xl, 20px);
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

/* The role each file plays, as a chip. This is the line that answers the
   reader's real question - who makes this one? - so it leads. */
.flow-role {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill, 999px);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Emphasis is contrast, not a second grey: the one step this page performs
   gets the filled chip, the way Slate marks any primary action. */
.flow-step.is-tool .flow-role {
  background: var(--fg-1);
  color: var(--on-inverse);
  font-weight: 700;
}

.flow-file {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  /* A filename must never be the thing that makes the page scroll sideways. */
  overflow-wrap: anywhere;
}

.flow-what {
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1.5;
}

.flow-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--fg-3);
}

.flow-note {
  color: var(--fg-2);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 74ch;
  margin: 0 0 var(--s-7, 32px);
}

.flow-privacy { display: block; margin-top: var(--s-2, 8px); color: var(--fg-3); }

/* Narrow screens stack the strip, and the arrows turn to point down it. */
@media (max-width: 700px) {
  .flow { grid-template-columns: 1fr; gap: var(--s-3, 12px); }
  .flow-arrow { justify-self: start; padding-left: 14px; }
  .flow-arrow svg { transform: rotate(90deg); }
}


/* ── The file being built ─────────────────────────────────────────────────
   Sits above the numbered steps because it outlives them: the steps describe
   adding one route, this is the file those routes accumulate in. Styled as a
   panel rather than a step so the numbering below still reads as a sequence. */

.bundle {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg-1);
  padding: var(--s-5, 20px);
  margin-bottom: var(--s-7, 32px);
}

.bundle-title {
  margin: 0 0 var(--s-3, 12px);
  font-size: 1rem;
  color: var(--fg-1);
}

.bundle-lead {
  color: var(--fg-2);
  font-size: 0.92rem;
  max-width: 68ch;
  margin: 0 0 var(--s-4, 16px);
}

.bundle-choices {
  display: flex;
  align-items: center;
  gap: var(--s-4, 16px);
}

.bundle-choices .dropzone-sm {
  flex: 1 1 auto;
  padding: var(--s-5, 20px) var(--s-4, 16px);
  border-radius: 12px;
}

.bundle-choices .dropzone-sm .drop-title { font-size: 0.95rem; }
.bundle-choices .dropzone-sm .drop-sub { font-size: 0.82rem; }

.bundle-or {
  flex: 0 0 auto;
  color: var(--fg-3);
  font-size: 0.85rem;
}

.bundle-new { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 620px) {
  .bundle-choices { flex-direction: column; align-items: stretch; }
  .bundle-or { text-align: center; }
}

.bundle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
}

.bundle-meta { display: flex; flex-direction: column; gap: 2px; }
.bundle-meta strong { color: var(--fg-1); font-size: 1.05rem; }
.bundle-meta span { color: var(--fg-3); font-size: 0.82rem; }

/* The mini button has no height of its own; it borrows one from the row it
   normally sits in, and there is no such row here. */
.bundle-head .mini-btn,
.bundle-row .mini-btn { padding: 6px var(--s-3, 12px); }

.bundle-empty {
  margin: var(--s-4, 16px) 0 0;
  color: var(--fg-3);
  font-size: 0.88rem;
}

.bundle-list {
  list-style: none;
  margin: var(--s-4, 16px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
}

.bundle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border-radius: 10px;
  background: var(--bg-2);
}

.bundle-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bundle-row-main strong {
  color: var(--fg-1);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bundle-row-main span {
  color: var(--fg-3);
  font-size: 0.8rem;
  font-family: var(--font-mono);
}

#add-status { margin-bottom: var(--s-3, 12px); }

/* The notice can carry an Undo beside its text. The [hidden] guard is not
   optional: an id beats the browser's own [hidden] { display: none }. */
#bundle-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4, 16px);
}
#bundle-notice[hidden] { display: none; }
#bundle-notice .mini-btn { padding: 6px var(--s-3, 12px); }

/* Nothing to preview or download until the file has a route in it. The site's
   buttons have no disabled state of their own because nothing else on it has
   one to show. */
.bundle-head .btn:disabled { opacity: 0.45; cursor: default; }
.bundle-head .btn:disabled:hover { background: var(--bg-2); color: var(--fg-3); }
.bundle-head .btn-primary:disabled:hover { background: var(--fg-1); color: var(--bg-0); }

/* ── The app preview ──────────────────────────────────────────────────────
   Not site chrome: this is the app's route browser reproduced, so the sizes
   below are the app's dp values read as pixels and the colours are the ones
   the app paints with. Changing them to match the page would defeat it. */

.preview-dialog {
  border: 1px solid var(--line-3);
  border-radius: 20px;
  background: var(--bg-1);
  color: var(--fg-1);
  padding: var(--s-5, 20px);
  max-width: min(92vw, 460px);
  max-height: 92vh;
  overflow: auto;
}

.preview-dialog::backdrop { background: rgba(21, 27, 36, 0.72); }

.preview-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4, 16px);
  margin-bottom: var(--s-4, 16px);
}

.preview-dialog-head h2 { margin: 0 0 2px; font-size: 1.05rem; color: var(--fg-1); }
.preview-dialog-head p { margin: 0; font-size: 0.85rem; color: var(--fg-3); max-width: 40ch; }
.preview-dialog-head .mini-btn { padding: 6px var(--s-3, 12px); }

/* The bezel is a device, not a surface from the palette, so it is darker than
   anything in the token set on purpose. */
.phone {
  background: #232b3a;
  border: 1px solid var(--line-3);
  border-radius: 34px;
  padding: 14px;
  width: 388px;
  max-width: 100%;
  margin: 0 auto;
}

.phone-screen {
  width: 360px;
  max-width: 100%;
  height: min(68vh, 620px);
  overflow-y: auto;
  border-radius: 22px;
  background: var(--bg-0);
  padding-bottom: var(--s-6, 24px);
}

.rp-head { padding: var(--s-5, 20px) var(--s-4, 16px) var(--s-2, 8px); }
.rp-eyebrow { margin: 0; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--fg-3); }
.rp-title {
  margin: 2px 0 0;
  font-size: 28px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.rp-chips {
  display: flex;
  gap: 8px;
  padding: 8px var(--s-4, 16px);
  overflow-x: auto;
  scrollbar-width: none;
}
.rp-chips::-webkit-scrollbar { display: none; }

.rp-chip {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  cursor: pointer;
}

.rp-chip.is-on { background: var(--fg-1); color: var(--bg-0); font-weight: 700; }

.rp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px var(--s-4, 16px) 0;
}

.rp-card {
  border-radius: 20px;
  background: var(--bg-1);
  padding: var(--s-4, 16px);
}

.rp-card-top { display: flex; align-items: center; gap: 12px; }

.rp-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--bg-2);
  overflow: hidden;
}

.rp-card-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rp-card-titles strong {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--fg-1);
  /* The app wraps rather than truncates, and a name that needs three lines
     needs to look like it here too. */
  overflow-wrap: anywhere;
}
.rp-card-titles span { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--fg-3); }

.rp-add {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--fg-1);
}

.rp-spark { display: block; margin-top: 12px; }

.rp-stats { display: flex; gap: 20px; margin-top: 12px; }
.rp-stats > div { display: flex; flex-direction: column; }
.rp-stat-label { font-size: 9px; line-height: 12px; font-weight: 600; color: var(--fg-4); }
.rp-stat-value { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--fg-1); }

.rp-desc {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--fg-2);
}

.rp-credit {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--fg-4);
}

.rp-empty {
  margin: 0;
  padding: var(--s-7, 32px) var(--s-4, 16px);
  text-align: center;
  color: var(--fg-3);
  font-size: 14px;
}

/* Outside the phone: this is the tool talking to the maintainer, not the app
   talking to a rider, so it deliberately does not look like part of the screen. */
.rp-dropped {
  margin: var(--s-4, 16px) 0 0;
  padding: var(--s-3, 12px);
  border-radius: 10px;
  border: 1px solid rgba(239, 107, 98, 0.5);
  background: rgba(239, 107, 98, 0.08);
  color: var(--fg-2);
  font-size: 0.8rem;
  line-height: 1.5;
}