/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --teal:       #0B4F5E;
  --teal-md:    #0D6278;
  --teal-lt:    #E8F4F7;
  --teal-dim:   rgba(11,79,94,0.08);
  --amber:      #C8893A;
  --amber-lt:   #FBF3E8;
  --amber-dim:  rgba(200,137,58,0.12);
  --ink:        #0F1A1C;
  --ink-2:      #2E3F42;
  --ink-3:      #6B7F82;
  --smoke:      #F7F8FA;
  --white:      #FFFFFF;
  --rule:       #DDE4E6;
  --rule-lt:    #EDF1F2;
  --red:        #C0392B;
  --red-lt:     #FDECEA;
  --green:      #1B6B3A;
  --green-lt:   #EBF5EE;

  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans:  'Geist', system-ui, sans-serif;
  --font-mono:  'Geist Mono', monospace;

  --max-w:      1200px;
  --radius:     4px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.09);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background:   var(--smoke);
  color:        var(--ink);
  font-family:  var(--font-sans);
  font-size:    15px;
  line-height:  1.6;
  overflow-x:   hidden;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 40px;
}

main { padding-top: 60px; } /* nav height offset */

/* ── Typography ────────────────────────────────────────────────────────────── */
.section-kicker {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--teal);
  margin-bottom:  12px;
}

.section-title {
  font-family: var(--font-serif);
  font-size:   clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  color:       var(--ink);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-title em { font-style: italic; color: var(--teal); }

.section-sub {
  font-size:   15px;
  color:       var(--ink-3);
  max-width:   56ch;
  line-height: 1.7;
  margin-bottom: 48px;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-size:       13px;
  font-weight:     500;
  color:           var(--white);
  background:      var(--teal);
  padding:         11px 24px;
  border-radius:   var(--radius);
  border:          none;
  text-decoration: none;
  cursor:          pointer;
  transition:      background .15s, transform .15s, box-shadow .15s;
}
.btn-primary:hover {
  background:  var(--teal-md);
  transform:   translateY(-1px);
  box-shadow:  0 4px 12px rgba(11,79,94,0.25);
}

.btn-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-size:       13px;
  font-weight:     400;
  color:           var(--ink-2);
  border:          1px solid var(--rule);
  background:      var(--white);
  padding:         10px 20px;
  border-radius:   var(--radius);
  text-decoration: none;
  cursor:          pointer;
  transition:      border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

.btn-danger {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  font-size:     12px;
  font-weight:   500;
  color:         var(--white);
  background:    var(--red);
  padding:       8px 16px;
  border-radius: var(--radius);
  border:        none;
  cursor:        pointer;
  transition:    background .15s;
}
.btn-danger:hover { background: #a93226; }

/* ── Badges / tags ─────────────────────────────────────────────────────────── */
.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-family:    var(--font-mono);
  font-size:      10px;
  padding:        3px 8px;
  border-radius:  2px;
  white-space:    nowrap;
  letter-spacing: 0.05em;
}
.badge-open     { background: var(--green-lt); color: var(--green); border: 1px solid rgba(27,107,58,0.2); }
.badge-closing  { background: var(--amber-lt); color: var(--amber); border: 1px solid rgba(200,137,58,0.25); }
.badge-draft    { background: var(--smoke);    color: var(--ink-3); border: 1px solid var(--rule); }
.badge-pending  { background: #EEF2FF;         color: #4338CA;      border: 1px solid #C7D2FE; }
.badge-closed   { background: var(--smoke);    color: var(--ink-3); border: 1px solid var(--rule); }
.badge-category {
  background: var(--smoke);
  color:      var(--ink-2);
  border:     1px solid var(--rule);
}

.badge-open::before,
.badge-closing::before {
  content:       '';
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    currentColor;
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-field { margin-bottom: 16px; }

.form-field label {
  display:        block;
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ink-3);
  margin-bottom:  6px;
}
.form-field label .req { color: var(--red); margin-left: 2px; }

.form-field input,
.form-field select,
.form-field textarea {
  width:       100%;
  background:  var(--white);
  border:      1px solid var(--rule);
  color:       var(--ink);
  font-family: var(--font-sans);
  font-size:   14px;
  padding:     9px 12px;
  border-radius: var(--radius);
  outline:     none;
  transition:  border-color .15s;
  appearance:  none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus  { border-color: var(--teal); }
.form-field textarea        { resize: vertical; min-height: 80px; }
.form-field input::placeholder { color: rgba(107,127,130,0.4); }

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.form-hint {
  font-size:    12px;
  color:        var(--ink-3);
  margin-top:   4px;
}

/* ── Alert / flash messages ────────────────────────────────────────────────── */
.alert {
  padding:       12px 16px;
  border-radius: var(--radius);
  font-size:     13px;
  margin-bottom: 20px;
  border:        1px solid transparent;
}
.alert-success { background: var(--green-lt); color: var(--green); border-color: rgba(27,107,58,0.2); }
.alert-error   { background: var(--red-lt);   color: var(--red);   border-color: rgba(192,57,43,0.2); }
.alert-info    { background: var(--teal-lt);  color: var(--teal);  border-color: rgba(11,79,94,0.2); }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.data-table {
  width:           100%;
  border-collapse: collapse;
  background:      var(--white);
  border:          1px solid var(--rule);
  border-radius:   var(--radius);
  overflow:        hidden;
  font-size:       13px;
}
.data-table th {
  background:     var(--smoke);
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ink-3);
  font-weight:    400;
  padding:        11px 14px;
  text-align:     left;
  border-bottom:  1px solid var(--rule);
  white-space:    nowrap;
}
.data-table td {
  padding:       13px 14px;
  border-bottom: 1px solid var(--rule-lt);
  vertical-align: top;
}
.data-table tr:last-child td  { border-bottom: none; }
.data-table tr:hover td       { background: var(--smoke); }

/* ── Tender ref number ─────────────────────────────────────────────────────── */
.ref-num {
  font-family: var(--font-mono);
  font-size:   11px;
  font-weight: 500;
  color:       var(--teal);
  white-space: nowrap;
}

/* ── Due date ──────────────────────────────────────────────────────────────── */
.due-date           { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.due-date.urgent    { color: var(--red); font-weight: 600; }
.due-date.soon      { color: var(--amber); font-weight: 500; }

/* ── Ticker ────────────────────────────────────────────────────────────────── */
.ticker {
  background:  var(--teal);
  border-top:  1px solid rgba(255,255,255,0.1);
  height:      40px;
  overflow:    hidden;
  display:     flex;
  align-items: center;
}
.ticker-label {
  flex-shrink:    0;
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.6);
  background:     rgba(0,0,0,0.15);
  padding:        0 16px;
  height:         100%;
  display:        flex;
  align-items:    center;
  border-right:   1px solid rgba(255,255,255,0.1);
  white-space:    nowrap;
}
.ticker-track {
  display:    flex;
  align-items: center;
  white-space: nowrap;
  animation:  ticker-scroll 40s linear infinite;
  padding-left: 32px;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  font-family: var(--font-mono);
  font-size:   11px;
  color:       rgba(255,255,255,0.85);
  padding-right: 48px;
}
.ticker-ref  { color: var(--amber); font-weight: 500; }
.ticker-sep  { color: rgba(255,255,255,0.25); padding: 0 4px; }
.ticker-due  { color: rgba(255,255,255,0.5); font-size: 10px; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Live badge ────────────────────────────────────────────────────────────── */
.live-badge {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--green);
  background:  rgba(27,107,58,0.08);
  border:      1px solid rgba(27,107,58,0.2);
  padding:     3px 8px;
  border-radius: 2px;
}
.live-badge::before {
  content:       '';
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--green);
  animation:     pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header {
  background:    var(--white);
  border-bottom: 1px solid var(--rule);
  padding:       40px 0;
}
.page-header h1 {
  font-family: var(--font-serif);
  font-size:   clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  color:       var(--ink);
}
.page-header h1 em { font-style: italic; color: var(--teal); }

.page-header p {
  font-size:   14px;
  color:       var(--ink-3);
  margin-top:  8px;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  padding:    64px 0 36px;
}
.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   60px;
  margin-bottom:         48px;
}
.footer-brand p {
  font-size:   13px;
  color:       rgba(255,255,255,0.4);
  line-height: 1.7;
  margin-top:  16px;
  max-width:   36ch;
}
.footer-logo {
  display:         flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
}
.footer-logomark {
  width:         28px;
  height:        28px;
  background:    var(--teal);
  border-radius: 5px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.footer-wordmark {
  font-family: var(--font-serif);
  font-size:   1.1rem;
  color:       var(--white);
}
.footer-col h4 {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.35);
  margin-bottom:  16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  font-size:       13px;
  color:           rgba(255,255,255,0.55);
  text-decoration: none;
  transition:      color .15s;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-top:     24px;
  border-top:      1px solid rgba(255,255,255,0.08);
  flex-wrap:       wrap;
  gap:             12px;
}
.footer-bottom span {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       rgba(255,255,255,0.3);
}
.nova-credit {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       rgba(255,255,255,0.3);
}
.nova-credit a { color: rgba(255,255,255,0.5); text-decoration: none; }
.nova-credit a:hover { color: var(--white); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container    { padding: 0 28px; }
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 40px; }
  .form-row     { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .container     { padding: 0 16px; }
  .footer-grid   { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .ticker-label  { display: none; }
  .data-table    { font-size: 12px; }
  .data-table th,
  .data-table td { padding: 10px 10px; }
}