/*
 * The whole stylesheet for this service, served from our own origin.
 *
 * No @import, no font file, no image, no third-party anything: the page has
 * to render identically for a visitor whose network reaches nothing but this
 * origin, and a web font that arrives late is a layout shift on the first
 * thing anyone sees. The type stack is the system stack, which is already on
 * the reader's machine.
 *
 * The palette is NOT defined here. app/templates/base.html writes the five
 * brand colours plus --primary into an inline <style> on every response,
 * because the brand can change within 60 seconds (app/branding.py) and a
 * cached stylesheet cannot. The fallbacks in the var() calls below exist so
 * that this file still renders a legible page if it is ever opened on its own.
 *
 * Mobile first: every layout rule starts as a single column and widens at a
 * min-width media query. VAR-180 is measured at Lighthouse mobile
 * accessibility 90 or better, so focus states are visible, tap targets are
 * large, and nothing here relies on colour alone.
 */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink, #1B1B11);
  color: var(--cream, #CAC5BF);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  /* Long measure is unreadable on a wide desktop and the browser default is
     to take all of it. */
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal, #4BD5C8); }

/* One focus style for every focusable thing, on a colour that is not either
   of the two link colours, so "this is focused" never reads as "this is a
   different kind of link". */
:focus-visible {
  outline: 3px solid var(--gold, #D4B25E);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--gold, #D4B25E);
  color: var(--ink, #1B1B11);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --- header -------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid #2E2E22;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cream, #CAC5BF);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand__logo {
  display: block;
  height: 2rem;
  width: auto;
}

/* The Vara mark shown when the tenant has no logo_url. The shape is inline
   SVG in base.html; this only sizes it. Decorative and aria-hidden, because
   the brand name sits next to it as text. */
.brand__mark {
  display: block;
  flex: none;
  width: 1.625rem;
  height: 1.5625rem;
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  padding: 3rem 0 2.5rem;
  background:
    radial-gradient(60rem 30rem at 15% -10%,
                    var(--green, #153627) 0%, transparent 65%),
    var(--ink, #1B1B11);
}

.hero__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--primary, #4BD5C8);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__title {
  font-size: clamp(2rem, 7vw, 3.5rem);
  max-width: 18ch;
}

.hero__body {
  max-width: 46rem;
  font-size: 1.0625rem;
  color: rgba(202, 197, 191, 0.86);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px minimum tap target, from the top of the mobile guidance rather than
     from what looks right on a laptop. */
  min-height: 2.75rem;
  padding: 0.65rem 1.15rem;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--primary, #4BD5C8);
  border-color: var(--primary, #4BD5C8);
  color: var(--ink, #1B1B11);
}

.btn--primary:hover { filter: brightness(1.08); }

.btn--ghost {
  background: transparent;
  border-color: rgba(202, 197, 191, 0.45);
  color: var(--cream, #CAC5BF);
}

.btn--ghost:hover { border-color: var(--cream, #CAC5BF); }

/* The resident call to action, which has nowhere to go until VAR-173 exists.
   Dashed, not greyed out into invisibility: it should read as "coming", not
   as "broken", and the adjacent note says so in words rather than leaving the
   styling to carry the meaning.

   Selected on the class and not on :disabled, because the button carries
   aria-disabled rather than disabled: it stays in the tab order so its
   aria-describedby note is actually announced. Contrast is therefore held at
   a readable level rather than dimmed to the level a truly inert control
   could get away with, and the shared :focus-visible ring above applies to
   it like everything else. */
.btn--pending {
  background: transparent;
  border: 2px dashed rgba(202, 197, 191, 0.5);
  color: rgba(202, 197, 191, 0.8);
  cursor: not-allowed;
}

.badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--gold, #D4B25E);
  border-radius: 999px;
  color: var(--gold, #D4B25E);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- sections ------------------------------------------------------------ */

.section {
  padding: 3rem 0;
  border-top: 1px solid #2E2E22;
}

.section__title {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  margin-bottom: 1.5rem;
}

/* --- how it works -------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.step {
  counter-increment: step;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  background: #26261C;
  border: 1px solid #2E2E22;
  border-radius: 10px;
}

/* The step number is decoration on top of a real <ol>: the order is in the
   markup, so a reader who never sees the generated content still gets it. */
.step__title::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.6rem;
  border-radius: 999px;
  background: var(--primary, #4BD5C8);
  color: var(--ink, #1B1B11);
  font-size: 0.875rem;
}

.step__title {
  display: flex;
  align-items: center;
  font-size: 1.1875rem;
}

.step__body { color: rgba(202, 197, 191, 0.86); margin-bottom: 0; }

/* --- differentiators ----------------------------------------------------- */

.diffs {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.diff {
  padding: 1.25rem;
  border: 1px solid #2E2E22;
  border-left: 3px solid var(--gold, #D4B25E);
  border-radius: 10px;
  background: #26261C;
}

.diff__title {
  font-size: 1.125rem;
  color: var(--cream, #CAC5BF);
}

.diff__body { color: rgba(202, 197, 191, 0.86); margin-bottom: 0; }

/* --- calls to action ----------------------------------------------------- */

.cta-grid {
  display: grid;
  gap: 1.25rem;
}

.cta-card {
  padding: 1.5rem;
  border: 1px solid #2E2E22;
  border-radius: 12px;
  background: #26261C;
}

.cta-card--pending { background: transparent; }

.cta-card__title { font-size: 1.25rem; }

.cta-card__body { color: rgba(202, 197, 191, 0.86); }

/* --- footer -------------------------------------------------------------- */

.site-footer {
  padding: 2rem 0 3rem;
  border-top: 1px solid #2E2E22;
  color: rgba(202, 197, 191, 0.8);
  font-size: 0.9375rem;
}

.site-footer__legal { margin-bottom: 0; }

/* --- wider than a phone -------------------------------------------------- */

@media (min-width: 40rem) {
  .hero { padding: 5rem 0 4rem; }
  .section { padding: 4rem 0; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .cta-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 60rem) {
  .diffs { grid-template-columns: repeat(2, 1fr); }
  /* The fifth differentiator is the pricing one and the only number on the
     page. On a two-column grid it would sit alone in a half-width box; it
     gets the full row instead, which is also the emphasis it deserves. */
  .diff:last-child { grid-column: 1 / -1; }
}

/* Nothing on this page animates, so there is no motion to reduce. The query
   is here so that a later addition has an obvious place to opt out of. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sign-in (VAR-173).
   Deliberately small: one utility page, not a design system. The shell rules
   below (VAR-180) are what the authenticated pages use. */
.auth {
  max-width: 34rem;
  padding: 3rem 0 4rem;
}
.auth__title {
  margin: 0 0 1rem;
}
.auth__intro,
.auth__notice {
  margin: 0 0 1.5rem;
}
.auth__notice {
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
}
/* A refused sign-in post re-renders the form with this above it. It shares
   .auth__notice's shape and takes the brand's warning colour rather than a
   raw red, which is the one hue the palette does not define and so the one
   that would not follow a tenant's branding. It is given focus by the page's
   inline script, and the outline is left to the browser's default focus ring
   rather than removed: this is the element a keyboard user lands on. */
.auth__error {
  margin: 0 0 1.5rem;
  border-left: 3px solid var(--gold);
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.auth__label {
  font-weight: 600;
}
.auth__input {
  width: 100%;
  max-width: 26rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 3px;
}
/* VAR-182: the contact form's one multi-line field. It inherits every
   .auth__input rule above and adds only the two a <textarea> needs: a height
   in rows the browser can honour, and a resize handle that cannot push the
   field wider than the column it sits in. */
.auth__textarea {
  max-width: 34rem;
  resize: vertical;
}
.auth__hint {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}
.auth__submit {
  font: inherit;
  padding: 0.6rem 1.2rem;
  color: var(--ink);
  background: var(--primary);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.auth__operator {
  margin-top: 2.5rem;
  font-size: 0.95rem;
}

/* --- the authenticated shells (VAR-180) ---------------------------------- */

/* Who you are signed in as, in the shared header beside the Vara mark. Wraps
   onto its own line on a phone rather than squeezing the brand, which is why
   the header's flex container is allowed to wrap. */
.shell-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-size: 0.9375rem;
}

.shell-identity__who {
  color: rgba(202, 197, 191, 0.86);
  /* An email address has no spaces to break at, and a long one would push the
     sign-out control off a narrow screen. */
  overflow-wrap: anywhere;
}

.shell-identity__form { margin: 0; }

/* Smaller than a .btn on the landing page but still a 44px target: this one
   sits in a header on a phone, where the row has to stay one row high. */
.shell-identity__submit {
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.9375rem;
}

/* The header is shared with the landing page, which has nothing beside the
   brand and is therefore unaffected: the only page where this row has a second
   item is a shell, and on a phone that item has to be allowed to take its own
   line rather than crushing the brand. */
.site-header__inner { flex-wrap: wrap; }

/* The nav strip between the header and <main>. Every item is a plain label,
   because none of the surfaces exists yet (app/templates/shell.html). It is
   styled as a list of chips rather than as links: a chip that is not
   underlined and not in a link colour does not invite a click it cannot
   honour, and the note above it says so in words rather than relying on that
   styling to carry the meaning. */
.shell-nav {
  border-bottom: 1px solid #2E2E22;
  padding: 1rem 0 1.25rem;
  background: #21211A;
}

.shell-nav__note {
  margin: 0 0 0.75rem;
  max-width: 46rem;
  /* Measured 7.34:1 against this strip in Chromium at 375px, against the
     4.5:1 AA threshold for body text: the note explains the whole nav and
     must not be the dimmest thing on the page. The nav labels themselves
     measure 9.44:1. */
  color: rgba(202, 197, 191, 0.86);
  font-size: 0.9375rem;
}

.shell-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shell-nav__item {
  padding: 0.5rem 0.85rem;
  border: 1px dashed rgba(202, 197, 191, 0.4);
  border-radius: 999px;
  color: var(--cream, #CAC5BF);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* A built section is a link and must not look like a pending label (VAR-258).
   Three cues and not one, because colour alone would fail WCAG 1.4.1 for a
   reader who cannot tell the two greens apart: the border goes solid where a
   pending item's is dashed, the text is the accent colour, and it is
   underlined. The padding moves onto the anchor so that the whole pill is the
   click and focus target rather than a word inside it. Computed at 8.98:1 for
   #4BD5C8 on the nav strip's #21211A, against the 4.5:1 AA threshold: WCAG
   relative luminance worked by hand, not measured in a browser. */
.shell-nav__item--linked {
  padding: 0;
  border-style: solid;
  border-color: rgba(75, 213, 200, 0.5);
}

.shell-nav__link {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--primary, #4BD5C8);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- the shell's own content --------------------------------------------- */

.shell {
  padding: 2.5rem 0 3rem;
}

.shell__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--primary, #4BD5C8);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shell__title {
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  margin-bottom: 0.75rem;
}

.shell__intro {
  max-width: 46rem;
  font-size: 1.0625rem;
  color: rgba(202, 197, 191, 0.86);
}

.shell__sections-title {
  margin-top: 2.5rem;
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
}

.shell-cards {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shell-card {
  padding: 1.15rem 1.25rem;
  border: 1px solid #2E2E22;
  border-radius: 10px;
  background: #26261C;
}

.shell-card__title {
  font-size: 1.0625rem;
  margin-bottom: 0.35rem;
}

.shell-card__body {
  margin-bottom: 0;
  color: rgba(202, 197, 191, 0.86);
  font-size: 0.9375rem;
}

.shell-card__ticket {
  margin: 0.5rem 0 0;
  color: var(--gold, #D4B25E);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.shell__note {
  max-width: 46rem;
  margin-top: 2rem;
  color: rgba(202, 197, 191, 0.86);
  font-size: 0.9375rem;
}

@media (min-width: 40rem) {
  .shell { padding: 3.5rem 0 4rem; }
  .shell-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60rem) {
  .shell-cards { grid-template-columns: repeat(3, 1fr); }
}