/* =============================================================
   FINAL ROUND AU — site layer

   design-language.css is the report design (MENTIBUDDY DESIGN
   LANGUAGE v1) and is loaded first, unmodified. This file adds
   only what the site needs and the report did not: a stub notice,
   an account panel, a landing refusal list, and a footer that
   works outside the report's page geometry.

   Every colour here comes from a design-language token. No new
   hex values are introduced.
   ============================================================= */

/* The report's footer uses margin:96px ... -120px to bleed past
   main's 120px bottom padding. Site pages set their own bottom
   padding, so the footer needs a site-local variant. */
footer.site {
  background: var(--forest);
  color: var(--bright-2);
  margin: 96px calc(-1 * var(--pad)) 0;
  padding: 56px var(--pad) 60px;
}
footer.site .flinks a { color: var(--bright); }
footer.site .tiny { color: rgba(198, 242, 169, 0.6); }
footer.site .fnote { margin-top: 28px; }
body > footer.site { margin-left: 0; margin-right: 0; }

/* The landing h1 lives inside .hero, so it keeps the design
   language's --bright on --forest. Nothing here puts a display
   heading on white, which the system has no readable colour for. */
.hero h1 { margin-bottom: 26px; }
.hero .lede { margin: 0 0 30px; }

/* "Three things we won't do" — a refusal list. Deliberately NOT
   .tick: a tick reads as an achievement, and these are refusals. */
.refuse {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.refuse li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}
.refuse li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--forest);
}
.hero .refuse li { color: var(--bright-2); }
.hero .refuse li::before { background: var(--bright); }

/* A rule with a label, for the landing page's two banded sections. */
.band {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
}
.band::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.hero .band { color: var(--bright); }
.hero .band::after { background: rgba(159, 232, 112, 0.3); }

/* The STUB banner. Every screen not built yet says so, loudly,
   on screen. CLAUDE.md: "A stub that says STUB on screen beats a
   half-built real implementation every time." */
.stub {
  border: 2px dashed var(--forest);
  border-radius: var(--r);
  padding: 30px 32px;
  background: var(--grey);
  margin: 0 0 26px;
}
.stub .tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--forest);
  color: var(--bright);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 0 0 16px;
}
.stub h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 12px;
}
.stub p:last-child { margin-bottom: 0; }

/* /account and /health rows. Reuses .kv but allows a wider key
   column for labels like "Free sessions left". */
.kv.kv-wide li { grid-template-columns: minmax(168px, auto) minmax(0, 1fr); }
.kv.kv-wide .k { min-width: 168px; }

/* Sign-out is a POST (a GET would let any image tag sign you out),
   so it is a real button that has to look like the .cta links. */
button.cta { font: inherit; font-weight: 600; font-size: 17px; }
form.inline { display: inline; margin: 0; }

/* /health status marks. Green and red are not in the palette by
   design, so pass/fail is carried by the accent and by a word —
   never by colour alone. */
.hstat {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.hstat-ok { background: var(--bright); color: var(--forest); }
.hstat-warn { background: var(--grey-2); color: var(--body); }
.hstat-fail { background: var(--forest); color: var(--bright); }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

/* The landing page has no nav links, only the brand and the CTA,
   so it is unaffected by the design language hiding .tb-nav below
   940px. Signed-in pages do have links; give them a wrapping row
   rather than losing them on a phone. */
@media (max-width: 940px) {
  .topbar .tb-nav.tb-keep { display: flex; margin-left: 0; width: 100%; }
}

@media (max-width: 620px) {
  .stub { padding: 24px 22px; }
}

/* A sign-in that came back to the landing page instead of completing.
   Deliberately not red: nothing is broken for the candidate and nothing
   was lost. It states what happened and what to do, in that order. */
.notice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bright);
  color: var(--forest);
  border-radius: var(--r-s);
  padding: 18px 22px;
  margin: 18px 0 0;
  max-width: 62ch;
}
.notice strong { color: var(--forest); font-weight: 600; }
.notice span { font-size: 15px; line-height: 1.5; }