.page-shell {
  padding: 2rem 0 3rem;
}

.hero-panel {
  background: linear-gradient(135deg, rgba(15, 76, 129, 0.06), rgba(15, 76, 129, 0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}

.metric-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.metric-inline:last-child {
  border-bottom: 0;
}

.small-note {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Card list is the only tender view now. The old table markup and the
   .table-view / .card-view switching rules were removed on 26-Sep-2026. */

/* Cards used to be the mobile-only view, so they had no column layout.
   auto-fill gives 1 column on a phone and 2-3 on a desktop by itself. */

.tender-view .tender-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  /* stretch, not start: every card in a row becomes as tall as the tallest
     one in that row. With `start` each card shrank to its own content, and
     since titles run from one line to four and the money lines are only
     there when the portal published them, the row came out ragged. */
  align-items: stretch;
}

/* Equal height alone is not enough - the card has to USE the height it is
   given, or the content sits at the top and the button floats wherever the
   text happens to end. So the card is a column, and the actions block takes
   whatever space is left over, which pins the button to the bottom. Every
   View Tender button in a row then lines up. */

.tender-view .tender-card {
  display: flex;
  flex-direction: column;
}

.tender-view .tender-card .actions {
  margin-top: auto;
  padding-top: 0.8rem;
}

/* Tender value and EMD amount are rendered as ordinary card lines, the same
   as Reference and Organisation, so they need no styles of their own. */

.auth-shell>.container {
  display: flex;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 650px;
}

/* Synchronized for production deployment */

/* ---------------------------------------------------------------------------
   SAVE TENDER — on a listing card
   ---------------------------------------------------------------------------
   Sits in the actions row beside View Tender rather than floating in the
   card's corner, because the corner already holds the status pill and a
   second thing there reads as clutter at a glance.

   The saved state is a filled star on the site's gold, which is the colour
   already reserved for "this is yours / act on this". Unsaved is a quiet
   outline so a page of 100 cards is not a page of 100 gold stars. */

.tender-view .tender-card .actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.save-btn .star {
  font-size: 1rem;
  line-height: 1;
}

.save-btn:hover {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  background: var(--gold-soft);
}

.save-btn.is-saved {
  border-color: var(--gold-dark);
  background: var(--gold-soft);
  color: var(--gold-dark);
}

/* A visitor who is not logged in still sees the button - hiding it would
   hide the reason to make an account. Clicking sends them to login. */
.save-btn.needs-login {
  border-style: dashed;
}