/* runguardian.dev portal — the landing page and the /guardians hub.
   Palette is taken from the fresco itself; type is Archivo (the wordmark,
   same as the Guardian dashboard), Cormorant Garamond (display), and
   JetBrains Mono (anything a machine produced). */

:root {
  --ink:        #2E2A22;
  --ink-soft:   #4A443A;
  --muted:      #8A8272;
  --faint:      #A08F6E;
  --line:       #E9E3D6;
  --card:       #FFFEFB;
  --wash:       #FAF9F4;
  --accent:     #8A5A2E;
  --accent-dot: #B8763A;

  /* the dashboard's own status palette, so the two surfaces read as one system */
  --run:    #1F6B87;
  --wait:   #B36A08;
  --human:  #A8352A;
  --done:   #3A7150;
  --evals:  #5A4A8A;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--display);
  color: var(--ink);
  background: var(--wash);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- landing */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* The fresco, washed out rather than blurred: near-opaque white over the
     centre where the type sits, thinning toward the ornate edges — which is
     the painting's own composition. */
  background-image:
    radial-gradient(ellipse 1100px 780px at 50% 42%,
      rgba(253,252,249,0.93) 0%, rgba(253,252,249,0.80) 42%,
      rgba(252,251,246,0.66) 72%, rgba(252,250,245,0.60) 100%),
    url("fresco.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: scroll, fixed;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 24px;
  flex-wrap: wrap;   /* a safety net: nothing in a header should be able to
                        force the page wider than its viewport */
}
@media (min-width: 760px) { .topbar { padding: 34px 56px; flex-wrap: nowrap; } }

.wordmark { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; flex-shrink: 0; }
.wordmark .dot { color: var(--accent-dot); }
.crumb { font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* The full "runguardian.dev/guardians" host label repeats what the browser's
   own address bar already shows, and being one unbreakable word, it was what
   actually forced the page wider than the viewport on a phone. The short
   "/ guardians" breadcrumb beside the wordmark already says where you are. */
#host-label { display: none; }
@media (min-width: 760px) { #host-label { display: inline; } }
.spacer { flex-grow: 1; }

.topnav { display: none; align-items: center; gap: 30px; font-size: 14px; color: var(--ink-soft); }
@media (min-width: 760px) { .topnav { display: flex; } }

.btn-light {
  padding: 10px 22px;
  background: var(--card);
  border: 1px solid #E6DFD1;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(46,38,20,0.05);
  cursor: pointer;
  white-space: nowrap;
}
.btn-light:hover { background: #fff; }

.hero {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 20px 40px;
}
@media (min-width: 760px) { .hero { padding-top: 96px; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A6A3E;
  background: rgba(255,254,251,0.7);
  border: 1px solid rgba(184,118,58,0.22);
  padding: 6px 14px;
  border-radius: 999px;
}
@media (min-width: 760px) { .eyebrow { font-size: 11.5px; letter-spacing: 0.16em; padding: 6px 16px; } }

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 9vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 28px 0 2px;
  text-wrap: balance;
}
.hero .accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(31px, 7vw, 62px);
  color: var(--accent);
  margin: 0 0 26px;
}
.hero p {
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 580px;
  line-height: 1.65;
  margin: 0 0 34px;
}
@media (min-width: 760px) { .hero p { font-size: 16.5px; margin-bottom: 42px; } }

.cta {
  padding: 15px 38px;
  background: var(--card);
  border: 1px solid #E6DFD1;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 8px 22px -10px rgba(46,38,20,0.22);
  cursor: pointer;
}
.cta:hover { background: #fff; }

.chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 54px;
  max-width: 940px;
}
@media (min-width: 760px) { .chips { margin-top: 74px; gap: 12px; } }

.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  background: rgba(255,254,251,0.78);
  border: 1px solid rgba(230,223,209,0.9);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
}
.chip .label { font-family: var(--display); font-size: 11.5px; color: var(--muted); }
.chip.planned { background: rgba(255,254,251,0.55); border-style: dashed; border-color: rgba(138,106,62,0.35); color: #8A6A3E; }
.chip.planned .label { color: var(--faint); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; display: block; }

.footnote {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---------------------------------------------------------------- hub */

.hub {
  min-height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(253,252,249,0.80) 0%, rgba(253,252,249,0.92) 22%,
      rgba(252,251,246,0.975) 46%, var(--wash) 70%),
    url("../fresco.jpg");
  /* `cover`, not a fixed 1440px width: pinning the fresco to a fixed size left
     bare background showing as pale bands down both edges on any screen wider
     than 1440px, which is exactly where the earlier check stopped looking. The
     wash gradient above already fades the painting out, so letting it scale
     costs nothing. */
  background-size: cover, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
}

.hub .topbar { border-bottom: 1px solid rgba(233,227,214,0.8); padding: 20px 20px; }
@media (min-width: 760px) { .hub .topbar { padding: 26px 56px; } }

.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

.hub-body { padding: 28px 20px 56px; }
@media (min-width: 760px) { .hub-body { padding: 38px 56px 64px; } }

.greeting { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.greeting h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 42px); line-height: 1.1; margin: 0 0 6px; }
.greeting p { font-size: 14.5px; color: #5A5344; margin: 0; }
.stamp { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.v { font-family: var(--mono); font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }

.section { margin-top: 26px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }

.alert {
  border-left: 3px solid var(--human);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.alert .run { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.alert .why { font-size: 12.5px; color: #5A5344; }
.alert .why .cls { color: var(--human); font-family: var(--mono); }
.btn-dark {
  padding: 8px 16px;
  background: var(--ink);
  color: var(--card);
  border: none;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.tile { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.tile-head { display: flex; align-items: center; gap: 11px; }
.tile-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile-name { font-weight: 600; font-size: 14.5px; }
.tile-state { font-family: var(--mono); font-size: 10.5px; }
.tile-state.live { color: var(--done); }
.tile-state.planned { color: var(--faint); }
.tile-flag { font-family: var(--mono); font-size: 10.5px; color: var(--human); margin-left: auto; }
.tile-metrics { display: flex; gap: 20px; flex-wrap: wrap; }
.tile-host { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tile-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.tile.planned { background: rgba(255,254,251,0.6); border-style: dashed; }
.tile.planned .tile-name { color: #6B6250; }
.tile.planned .tile-icon { background: #EDE6D5; }

.btn-ghost {
  align-self: flex-start;
  padding: 8px 16px;
  border: 1px solid #E0D8C6;
  border-radius: 999px;
  font-size: 12.5px;
  color: #6B6250;
  background: transparent;
  cursor: pointer;
}

.tile-add {
  border: 1px dashed #DFD6C2;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--faint);
  min-height: 170px;
  text-align: center;
}

/* a state, not a decoration: the hub says so when it cannot reach a guardian */
.unreachable {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--wait);
}
.skeleton { color: var(--faint); font-family: var(--mono); font-size: 12px; }