/* webby.sigler.io — one stylesheet, no web fonts, no scripts.
   Served under Content-Security-Policy: default-src 'none'; style-src 'self'; img-src 'self'.
   The theme is the platform's HTTP error-page theme (public-proxy
   roles/haproxy/files/errors/build.py): floating illustration → huge thin
   gradient numeral → title → subtitle → tiny uppercase reason line. */

:root {
  --bg: #0d1117;
  --card: #161b22;
  --line: #30363d;
  --text: #c9d1d9;
  --heading: #e6edf3;
  --muted: #8b949e;
  --faint: #484f58;
  --accent: #58a6ff;
  --gradient: linear-gradient(135deg, #58e6d9 0%, #58a6ff 50%, #bc8cff 100%);
  color-scheme: dark;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

/* ---------- Shared pieces ---------- */

.img-wrap {
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(88, 166, 255, .18));
}
.img-wrap img {
  display: block;
  width: min(320px, 80vw);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .45), 0 0 60px rgba(88, 166, 255, .08);
}
.glow { animation: pulse-glow 4s ease-in-out infinite; }

.wordmark {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.title {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -.01em;
}

.subtitle {
  font-size: clamp(.95rem, 2.5vw, 1.1rem);
  color: var(--muted);
  line-height: 1.55;
  max-width: 420px;
}

.notice {
  font-size: .95rem;
  color: var(--muted);
  max-width: 420px;
}

.reason {
  font-size: .75rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .25rem;
}

.button {
  display: inline-block;
  padding: .7rem 1.6rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--heading);
  font-weight: 600;
  letter-spacing: .01em;
  background: transparent;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.button:hover, .button:focus-visible {
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 0 24px rgba(88, 166, 255, .30);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 28px rgba(88, 166, 255, .18)); }
  50%      { filter: drop-shadow(0 0 40px rgba(88, 166, 255, .30)); }
}
@media (prefers-reduced-motion: reduce) {
  .img-wrap, .glow { animation: none; }
  .button { transition: none; }
}

/* ---------- The gate (/ and /ios/oauth-callback): the error-page layout ---------- */

.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.gate .container {
  max-width: 560px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* ---------- /home ---------- */

.home {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.home .top {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2.5rem;
}
.home .top img { width: 28px; height: 28px; border-radius: 50%; }
.home .top .brand {
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: -.03em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.home .top .signout { margin-left: auto; font-size: .95rem; color: var(--muted); }
.home .top .signout:hover { color: var(--accent); }

.home .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.home .hero .img-wrap img { width: min(240px, 70vw); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 180ms ease;
}
.card:hover { border-color: var(--accent); }
.card .name {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading);
}
.card .pill {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .5rem;
}
.card p { color: var(--muted); font-size: .95rem; flex: 1; }
.card .links { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .9rem; }
.card .links .dot { color: var(--faint); }
.card .note { font-size: .8rem; color: var(--faint); }

.empty {
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
}

.home footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .9rem;
  color: var(--muted);
}
.home footer .reason { margin-top: .75rem; }

/* ---------- /mcp — the crossroads ----------
   Amber is the lantern colour of the spirit-fox series; it marks "lit"
   (healthy) state only, so the page's status reads at a glance. */

.mcp { --amber: #f0b35a; --amber-glow: rgba(240, 179, 90, .45); }

.home .top .nav { margin-left: auto; font-size: .95rem; color: var(--muted); }
.home .top .nav a { color: var(--muted); }
.home .top .nav a:hover { color: var(--accent); }
.home .top .nav .dot { color: var(--faint); }

.crossroads {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 60px rgba(0, 0, 0, .5), 0 0 80px rgba(88, 166, 255, .06);
  margin-bottom: 1.25rem;
}
.crossroads-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.crossroads-text {
  position: absolute;
  inset: 0 45% auto 0;
  padding: clamp(1.25rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.crossroads::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(13, 17, 23, .72) 0%, rgba(13, 17, 23, .25) 45%, transparent 65%);
}
.crossroads-text { z-index: 1; }
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--amber);
  text-transform: lowercase;
}
.crossroads-title {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.lede { color: var(--heading); font-size: clamp(.95rem, 2vw, 1.1rem); max-width: 30rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }

@media (max-width: 720px) {
  .crossroads-text { position: static; padding: 1.25rem; }
  .crossroads::after { display: none; }
  .lede { color: var(--text); text-shadow: none; }
}

/* Lanterns: one chip per gateway capability. */
.lanterns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 2.75rem;
}
.lantern {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--muted);
  background: var(--card);
}
.lantern::before, .lamp {
  content: "";
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.lantern.lit { color: var(--heading); border-color: rgba(240, 179, 90, .35); }
.lantern.lit::before, .lamp.lit {
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow), 0 0 2px var(--amber);
  animation: flicker 5s ease-in-out infinite;
}
.lanterns .meta { font-size: .8rem; color: var(--faint); }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: .82; }
  50%      { opacity: .95; }
  55%      { opacity: .78; }
}

.section-title {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 1rem;
}
.section-title .count { font-size: .8rem; font-weight: 400; color: var(--faint); }

/* Doors: each connector is an arched doorway. */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin-bottom: 3rem;
}
.door {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  /* The doorway: a full round arch over a square threshold. */
  border-radius: 50% 50% 14px 14px / 6.5rem 6.5rem 14px 14px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.door:hover { border-color: rgba(240, 179, 90, .5); box-shadow: 0 0 36px rgba(240, 179, 90, .12); transform: translateY(-3px); }
.door .arch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(1.05) brightness(.92);
  transition: filter 200ms ease;
}
.door:hover .arch img { filter: saturate(1.1) brightness(1.02); }
.door.ajar .arch img { filter: grayscale(.85) brightness(.6); }
.door-body { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.15rem 1.15rem; flex: 1; }
.door-head { display: flex; align-items: center; gap: .55rem; }
.door-head .name { font-size: 1.1rem; font-weight: 600; color: var(--heading); }
.door-head .pill, .step-card .pill {
  margin-left: auto;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .5rem;
  white-space: nowrap;
}
.door-body p { color: var(--muted); font-size: .92rem; }
.door .facts { font-size: .8rem; color: var(--faint); }
.door .facts .dot { color: var(--faint); }
.warn { color: var(--amber); }

/* One click selects the whole value — copying without a script. */
.select {
  display: block;
  user-select: all;
  -webkit-user-select: all;
  cursor: copy;
  padding: .55rem .7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--heading);
  overflow-wrap: anywhere;
  font-size: .82rem;
}
.select:hover { border-color: var(--accent); }
pre.select { white-space: pre; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.6; }

.door details summary { cursor: pointer; font-size: .85rem; color: var(--accent); }
.door .tools { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.door .tools code { font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .4rem; }

/* Writes: a sanctioned state, so a neutral label — never an alarm colour. */
.door .writes { display: flex; flex-direction: column; gap: .45rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 8px; }
.door .writes-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .85rem; }
.door .writes .label {
  font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--heading); border: 1px solid var(--muted); border-radius: 999px; padding: .1rem .5rem;
}
.door .writes .who { color: var(--muted); }
.door .writes .caution { font-size: .8rem; color: var(--text); }
.door .writes summary { cursor: pointer; font-size: .85rem; color: var(--accent); }
.door .routes { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; font-size: .75rem; }
.door .routes code { color: var(--muted); overflow-wrap: anywhere; }
.door .routes .undo { display: block; color: var(--faint); }

.howto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}
.step-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.15rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: .92rem;
}
.step-card.wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .howto { grid-template-columns: minmax(0, 1fr); } }
.step-card h3 { display: flex; align-items: baseline; gap: .5rem; font-size: 1rem; color: var(--heading); }
.step-card h3 .sub { font-size: .75rem; font-weight: 400; color: var(--faint); }
.step-card .pill.pending { color: var(--amber); border-color: rgba(240, 179, 90, .4); align-self: center; }
.step-card ol, .step-card ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; color: var(--text); }
.step-card ol li::marker { color: var(--amber); }
.step-card .hint { font-size: .8rem; color: var(--faint); }

.watch { padding: 1.25rem; border: 1px dashed var(--line); border-radius: 12px; }
.watch .section-title { margin-bottom: .4rem; }
.watch p { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .lantern.lit::before, .lamp.lit { animation: none; }
  .door, .door .arch img { transition: none; }
  .door:hover { transform: none; }
}