/* The Tender Watchtower. Same sky, same type, one page: the note, the
   checklist and the way out. Layout only; the site's tokens do the identity. */

.tender-body {
  min-height: 100vh;
  color: #ffffff;
  background: transparent;
}

/* The page header, shared verbatim with the waiting room so the two side
   pages read as one family. Copied rather than linking waiting.css, which
   would drag the whole arcade's stylesheet onto a page with no game on it. */
.waiting-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 44px);
}

.waiting-top img { height: 40px; width: auto; opacity: 0.92; }

.waiting-back {
  font-size: 14px;
  color: rgba(233, 240, 250, 0.8);
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.waiting-back:hover { border-color: rgba(184, 231, 106, 0.6); color: #ffffff; }

/* ---------- the beacon ---------- */

/* A watchtower earns a light. One conic wedge, one slow turn a minute, behind
   everything and off-screen at its centre so it reads as a sweep crossing the
   sky rather than as a shape. This is the page's single signature effect: the
   main page had a radar ring once and it was removed as decoration without a
   job, and the difference here is that the page is named after this. */
.tender-beacon {
  position: fixed;
  top: -40vh;
  left: 50%;
  width: 160vmax;
  height: 160vmax;
  margin-left: -80vmax;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(184, 231, 106, 0.05) 8deg,
    rgba(184, 231, 106, 0.11) 14deg,
    rgba(184, 231, 106, 0.05) 20deg,
    transparent 28deg,
    transparent 360deg
  );
  animation: beacon-turn 60s linear infinite;
}

@keyframes beacon-turn {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .tender-beacon { animation: none; }
}

/* On a phone the beacon is mostly off-screen and all battery. */
@media (max-width: 768px) {
  .tender-beacon { display: none; }
}

/* ---------- layout ---------- */

.tender-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 44px) 96px;
  display: grid;
  gap: clamp(44px, 6vw, 84px);
}

.tender-note { max-width: 820px; }

.tender-note .eyebrow {
  color: var(--brand-lime, #b8e76a);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 14px;
}

.tender-note h1 {
  color: #ffffff;
  font-size: clamp(2.1rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-bottom: 22px;
}

.tender-note h1 em {
  font-style: normal;
  color: #a3e635;
}

.tender-copy {
  color: rgba(233, 240, 250, 0.88);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 68ch;
}

/* The reading pool, exactly as the waiting room does it: dense past the block's
   own edge in both directions, feathered entirely in the margin. */
.tender-note,
.tender-check,
.tender-portals,
.tender-watch,
.tender-cta {
  position: relative;
}

.tender-note::before,
.tender-check::before,
.tender-portals::before,
.tender-watch::before,
.tender-cta::before {
  content: "";
  position: absolute;
  inset: -56px -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    120% 75% at 50% 50%,
    rgba(3, 8, 18, 0.84) 0%,
    rgba(3, 8, 18, 0.8) 45%,
    rgba(3, 8, 18, 0.55) 62%,
    rgba(3, 8, 18, 0.22) 80%,
    rgba(3, 8, 18, 0) 100%
  );
}

@media (max-width: 768px) {
  .tender-note::before,
  .tender-check::before,
  .tender-portals::before,
  .tender-watch::before,
  .tender-cta::before { display: none; }
}

/* ---------- the three columns ---------- */

.tender-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tender-grid article {
  background: rgba(5, 11, 24, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-card, 26px);
  padding: 26px 24px;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.tender-grid h3 {
  color: #ffffff;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.tender-grid p {
  color: rgba(233, 240, 250, 0.82);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .tender-grid { grid-template-columns: 1fr; }
}

/* ---------- the checklist ---------- */

.tender-check h2,
.tender-portals h2,
.tender-cta h2 {
  color: #ffffff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.tender-sub {
  color: rgba(233, 240, 250, 0.72);
  font-size: 15px;
  margin-bottom: 22px;
  max-width: 68ch;
}

.check-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.check-kinds button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(240, 246, 255, 0.92);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.check-kinds button[aria-selected="true"] {
  border-color: rgba(184, 231, 106, 0.75);
  background: rgba(184, 231, 106, 0.16);
  color: #ffffff;
}

.check-kinds button:focus-visible {
  outline: 2px solid #b8e76a;
  outline-offset: 2px;
}

.check-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 720px;
}

.check-list label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(5, 11, 24, 0.76);
  color: rgba(233, 240, 250, 0.88);
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.check-list input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #84cc16;
  flex: none;
}

.check-list input:focus-visible {
  outline: 2px solid #b8e76a;
  outline-offset: 2px;
}

.check-list input:checked + span {
  color: rgba(233, 240, 250, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(184, 231, 106, 0.6);
}

.check-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.check-progress {
  margin: 0;
  color: var(--brand-lime, #b8e76a);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- portals and the way out ---------- */

.portal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.portal-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(5, 11, 24, 0.76);
  color: rgba(233, 240, 250, 0.92);
  font-size: 14.5px;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.portal-links a:hover,
.portal-links a:focus-visible {
  border-color: rgba(184, 231, 106, 0.6);
  background: rgba(8, 16, 32, 0.85);
  color: #ffffff;
}

.tender-cta p {
  color: rgba(233, 240, 250, 0.85);
  font-size: 16px;
  line-height: 1.7;
  max-width: 68ch;
  margin: 0;
}

.tender-cta a {
  color: var(--brand-lime, #b8e76a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- the bidder's list ----------
   The one form on this page. It sits after the portals on purpose: a bidder
   who has just been sent to three government sites is the reader most likely
   to want telling when something changes, and asking before that has been
   useful is asking too early. */

.watch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  max-width: 520px;
}

.watch-form input {
  flex: 1 1 240px;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(4, 10, 20, 0.62);
  color: #ffffff;
}

.watch-form input::placeholder { color: rgba(233, 240, 250, 0.42); }

.watch-form input:focus-visible {
  outline: 2px solid var(--brand-lime, #b8e76a);
  outline-offset: 2px;
  border-color: transparent;
}

/* Reserved height, so the reply does not shove the page when it arrives. */
.watch-status {
  margin: 12px 0 0;
  min-height: 20px;
  font-size: 13.5px;
  color: rgba(184, 231, 106, 0.92);
}

.watch-status a {
  color: var(--brand-lime, #b8e76a);
  font-weight: 560;
  text-decoration: underline;
  text-underline-offset: 3px;
}