/**
 * @file tender-bulletin.css
 * @desc "Bulletin" design system — supplier-facing surface (originated 2026-07-07).
 *
 * Scope: now loaded by register.html, login-link.html, for-suppliers.html,
 * tenders.html, verify-company.html, unsubscribe.html, and auth/verify.html
 * (EN + zh + zht). portal.css / assets/portal.css are untouched by this
 * file; it loads after them and layers a paper/bulletin "document" surface
 * on top of the existing dark shell.
 *
 * Tokens per DESIGN_asaptic_tender_bulletin.md (light, default):
 *   Paper #F6F3EC / Ink #191B1E / Seal #BE3A2B / Stone #6E7378 / Line #D8D2C4
 * Dark-mode equivalents added 2026-07-12 (prefers-color-scheme: dark) —
 * see the @media block below.
 */

:root {
  --bulletin-paper: #F6F3EC;
  --bulletin-ink: #191B1E;
  --bulletin-seal: #BE3A2B;
  --bulletin-seal-dim: rgba(190, 58, 43, 0.10);
  --bulletin-amber: #B8781E;
  --bulletin-amber-dim: rgba(184, 120, 30, 0.12);
  --bulletin-stone: #6E7378;
  --bulletin-line: #D8D2C4;
  --bulletin-input-bg: #FFFFFF;
  --bulletin-font-serif: "Source Serif 4", "Songti SC", "Songti TC", "Noto Serif CJK SC", serif;
  --bulletin-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --bulletin-radius: 2px;
  --bulletin-radius-btn: 4px;
}

/* ── Dark mode — the "sheet" becomes dark slate paper instead of cream,
   keeping the same seal/stamp identity so the document metaphor still
   reads (2026-07-12 polish pass; goal: real dark+light support). ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bulletin-paper: #161A22;
    --bulletin-ink: #F1EDE4;
    --bulletin-seal: #E2665A;
    --bulletin-seal-dim: rgba(226, 102, 90, 0.14);
    --bulletin-amber: #D9A354;
    --bulletin-amber-dim: rgba(217, 163, 84, 0.16);
    --bulletin-stone: #9CA3AC;
    --bulletin-line: #2A2E38;
    --bulletin-input-bg: #1D222C;
  }
}

/* ── Quiet language switcher (redline 2026-07-07) ─────────────────────── */
/* Replaces the blue "pill" active-state with a plain small-caps text link;
   current language is underlined, not boxed. Shared across every portal
   supplier-facing page (register/tenders/login-link/verify-company/auth-verify,
   all three languages) so the nav reads identically everywhere. */

.bulletin-lang-switch,
.lang-switch {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  font-variant-caps: small-caps;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  font-family: var(--font-sans, Inter, sans-serif);
}

.bulletin-lang-switch a,
.lang-switch a {
  color: rgba(240, 244, 255, 0.62);
  text-decoration: none;
  padding: 2px 1px;
  border-bottom: 1px solid transparent;
}

.bulletin-lang-switch a:hover,
.lang-switch a:hover { color: rgba(240, 244, 255, 0.9); }

.bulletin-lang-switch a[aria-current="true"],
.lang-switch a[aria-current="true"] {
  color: var(--text-primary, #F0F4FF);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

.bulletin-lang-switch span,
.lang-switch span { color: rgba(240, 244, 255, 0.3); }

/* ── Shared sheet surface ─────────────────────────────────────────────── */

.bulletin-sheet {
  background: var(--bulletin-paper);
  color: var(--bulletin-ink);
  border-radius: var(--bulletin-radius);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}

.bulletin-masthead {
  display: block;
}

/* Eyebrow + double seal rule — signature masthead band (redline 2026-07-07) */
.bulletin-eyebrow {
  font-family: var(--bulletin-font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bulletin-stone);
  margin-bottom: 7px;
}

.bulletin-rule-double {
  height: 5px;
  margin-bottom: 14px;
  background:
    linear-gradient(var(--bulletin-seal), var(--bulletin-seal)) top / 100% 1px no-repeat,
    linear-gradient(var(--bulletin-seal), var(--bulletin-seal)) bottom / 100% 2px no-repeat;
}

.bulletin-issue-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--bulletin-line);
}

.bulletin-masthead-title {
  font-family: var(--bulletin-font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bulletin-ink);
  margin: 0;
}

.bulletin-masthead-issue {
  font-family: var(--bulletin-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--bulletin-stone);
  text-transform: uppercase;
}

.bulletin-prepared-for {
  font-family: var(--bulletin-font-mono);
  font-size: 0.72rem;
  color: var(--bulletin-stone);
  text-align: right;
  white-space: nowrap;
}

.bulletin-prepared-for strong {
  color: var(--bulletin-ink);
  font-weight: 600;
}

/* Category filter — its own quiet row below the masthead (redline 2026-07-07) */
.bulletin-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 28px;
  margin: -18px -28px 18px;
  background: rgba(25, 27, 30, 0.03);
  border-bottom: 1px solid var(--bulletin-line);
}

.bulletin-filter-row label {
  color: var(--bulletin-stone);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Register page: subscription-form styling ────────────────────────── */

.bulletin-sheet.bulletin-form-sheet {
  padding: 30px 36px 34px;
}

.bulletin-form-sheet label {
  color: var(--bulletin-stone);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bulletin-form-sheet input,
.bulletin-form-sheet select {
  background: var(--bulletin-input-bg);
  border: 1px solid var(--bulletin-line);
  color: var(--bulletin-ink);
  border-radius: var(--bulletin-radius);
}

.bulletin-form-sheet input:focus,
.bulletin-form-sheet select:focus {
  border-color: var(--bulletin-seal);
}

.bulletin-form-sheet .sub {
  color: var(--bulletin-stone);
}

.bulletin-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}

.bulletin-check-tile {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--bulletin-line);
  background: transparent;
  color: var(--bulletin-ink);
  font-size: 0.82rem;
  line-height: 1.3;
  min-height: unset;
}

.bulletin-check-tile input {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--bulletin-seal);
  flex: 0 0 auto;
}

.bulletin-statement {
  border: 1px solid var(--bulletin-line);
  border-radius: var(--bulletin-radius);
  padding: 14px 16px;
  background: rgba(216, 210, 196, 0.18);
}

.bulletin-statement .pics-notice {
  color: var(--bulletin-stone) !important;
}

.bulletin-statement .pics-notice strong {
  color: var(--bulletin-ink);
}

.bulletin-statement .pics-notice a {
  color: var(--bulletin-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bulletin-consent label {
  color: var(--bulletin-ink) !important;
}

.bulletin-consent input {
  accent-color: var(--bulletin-seal) !important;
}

.btn-seal {
  min-width: 220px;
  border: 0;
  border-radius: var(--bulletin-radius-btn);
  padding: 12px 20px;
  background: var(--bulletin-seal);
  color: #FBF3EF;
  font-weight: 700;
  font: inherit;
  cursor: pointer;
  transition: filter var(--dur-fast, 120ms) ease;
}

.btn-seal:hover { filter: brightness(1.08); }
.btn-seal:disabled { opacity: 0.55; cursor: default; filter: none; }

.bulletin-trust-footer {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--bulletin-line);
  color: var(--bulletin-stone);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bulletin-trust-footer a {
  color: var(--bulletin-seal);
  text-decoration: none;
}

.bulletin-trust-footer a:hover { text-decoration: underline; }

/* ── Tenders page: ledger table ───────────────────────────────────────── */

.bulletin-page-wrap {
  background: transparent;
}

.ledger-panel {
  background: var(--bulletin-paper);
  border-radius: var(--bulletin-radius);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}

.ledger-panel .sub { color: var(--bulletin-stone); }

table.ledger {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.84rem;
  color: var(--bulletin-ink);
}

table.ledger thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 12px 14px;
  background: var(--bulletin-paper);
  color: var(--bulletin-stone);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.66rem;
  font-weight: 700;
  border-bottom: 2px solid var(--bulletin-seal);
}

table.ledger td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--bulletin-line);
  vertical-align: middle;
}

table.ledger tbody tr:last-child td { border-bottom: 0; }

table.ledger tbody tr:hover td {
  background: rgba(25, 27, 30, 0.035);
}

.chop {
  position: relative;
  display: inline-block;
  padding-left: 10px;
  font-family: var(--bulletin-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--bulletin-ink);
}

.chop::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  background: var(--bulletin-seal);
  border-radius: 1px;
}

.ledger-title {
  font-family: var(--bulletin-font-serif);
  font-weight: 600;
  color: var(--bulletin-ink);
  overflow-wrap: anywhere;
}

.ledger-category {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
  color: var(--bulletin-stone);
  font-size: 0.82rem;
}

.ledger-date {
  font-family: var(--bulletin-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--bulletin-ink);
  font-size: 0.8rem;
}

.day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
  padding: 4px 8px;
  border-radius: var(--bulletin-radius-btn);
  font-family: var(--bulletin-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  color: var(--bulletin-stone);
  background: rgba(110, 115, 120, 0.12);
  border: 1px solid var(--bulletin-line);
}

.day-chip.day-chip--urgent {
  color: #FBF3EF;
  background: var(--bulletin-seal);
  border-color: var(--bulletin-seal);
}

.day-chip.day-chip--soon {
  color: #3A2600;
  background: var(--bulletin-amber-dim);
  border-color: rgba(184, 120, 30, 0.4);
}

.ledger-empty, .ledger-error {
  padding: 34px 20px;
  text-align: center;
  color: var(--bulletin-stone);
  font-size: 0.85rem;
}

.ledger-error { color: var(--bulletin-seal); }

/* ── Spec-request column (ledger) ─────────────────────────────────────── */

.spec-link-verify {
  color: var(--bulletin-stone);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spec-link-verify:hover { color: var(--bulletin-ink); }

.btn-seal-outline {
  border: 1px solid var(--bulletin-seal);
  border-radius: var(--bulletin-radius-btn);
  background: transparent;
  color: var(--bulletin-seal);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}

.btn-seal-outline:hover { background: var(--bulletin-seal); color: #FBF3EF; }
.btn-seal-outline:disabled { opacity: 0.5; cursor: default; }

.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: var(--bulletin-radius-btn);
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--bulletin-line);
  color: var(--bulletin-stone);
  background: rgba(110, 115, 120, 0.1);
}

.spec-chip.spec-chip--ready {
  color: #14532D;
  background: rgba(102, 187, 106, 0.16);
  border-color: rgba(102, 187, 106, 0.4);
}

.spec-chip.spec-chip--ready a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spec-chip.spec-chip--declined {
  color: var(--bulletin-seal);
  background: var(--bulletin-seal-dim);
  border-color: rgba(190, 58, 43, 0.35);
}

/* ── Request-spec modal ───────────────────────────────────────────────── */

.bulletin-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 10, 22, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bulletin-modal-scrim[hidden] { display: none; }

.bulletin-modal {
  width: min(480px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bulletin-paper);
  color: var(--bulletin-ink);
  border-radius: var(--bulletin-radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  padding: 26px 26px 24px;
}

.bulletin-modal h2 {
  font-family: var(--bulletin-font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bulletin-ink);
  margin: 0 0 4px;
}

.bulletin-modal .modal-chop {
  margin-bottom: 14px;
}

.bulletin-modal .modal-tick {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.bulletin-modal .modal-tick input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--bulletin-seal);
  flex: 0 0 auto;
}

.bulletin-modal textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  background: var(--bulletin-input-bg);
  border: 1px solid var(--bulletin-line);
  color: var(--bulletin-ink);
  border-radius: var(--bulletin-radius);
  padding: 9px 11px;
  font: inherit;
  outline: none;
}

.bulletin-modal textarea:focus { border-color: var(--bulletin-seal); }

.bulletin-modal .modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.bulletin-modal .modal-err {
  display: none;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--bulletin-radius);
  font-size: 0.8rem;
  color: #7A1F17;
  background: var(--bulletin-seal-dim);
  border: 1px solid rgba(190, 58, 43, 0.4);
}

.bulletin-modal .modal-err.show { display: block; }

.bulletin-modal .modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  color: var(--bulletin-stone);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

.bulletin-modal-wrap { position: relative; }

/* ── Verify-company form ──────────────────────────────────────────────── */

.bulletin-verify-state {
  padding: 10px 2px 4px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.bulletin-verify-state .state-title {
  font-family: var(--bulletin-font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.bulletin-verify-state.pending .state-title { color: var(--bulletin-amber); }
.bulletin-verify-state.verified .state-title { color: #14532D; }
.bulletin-verify-state.rejected .state-title { color: var(--bulletin-seal); }

.bulletin-verify-state a.seal-link {
  color: var(--bulletin-seal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bulletin-file-field {
  display: grid;
  gap: 6px;
}

.bulletin-file-field input[type="file"] {
  background: var(--bulletin-input-bg);
  border: 1px dashed var(--bulletin-line);
  border-radius: var(--bulletin-radius);
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--bulletin-ink);
}

.bulletin-file-hint {
  color: var(--bulletin-stone);
  font-size: 0.7rem;
}

.ledger-skeleton-row td div {
  height: 13px;
  width: 100%;
  border-radius: var(--bulletin-radius);
  background: linear-gradient(90deg, rgba(25,27,30,0.06), rgba(25,27,30,0.14), rgba(25,27,30,0.06));
  background-size: 220% 100%;
  animation: bulletin-shimmer 1.3s infinite;
}

@keyframes bulletin-shimmer {
  to { background-position: -220% 0; }
}

/* Mobile: ledger rows collapse to stacked cards, chop + title + deadline visible */
@media (max-width: 640px) {
  table.ledger, table.ledger thead, table.ledger tbody, table.ledger tr, table.ledger th, table.ledger td {
    display: block;
  }
  table.ledger thead { display: none; }
  table.ledger tbody tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bulletin-line);
  }
  table.ledger tbody tr:hover td { background: transparent; }
  table.ledger td {
    padding: 3px 0;
    border-bottom: 0;
  }
  table.ledger td::before {
    content: attr(data-label);
    display: block;
    color: var(--bulletin-stone);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1px;
  }
  table.ledger td[data-label="Category"] { display: none; }
}

/* ── Motion & accessibility floor ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn-seal,
  .ledger-skeleton-row td div {
    transition: none;
    animation: none;
  }
}

.bulletin-sheet a:focus-visible,
.bulletin-sheet button:focus-visible,
.bulletin-sheet input:focus-visible,
.bulletin-sheet select:focus-visible,
.ledger-panel a:focus-visible,
.ledger-panel button:focus-visible,
.ledger-panel select:focus-visible,
.bulletin-modal a:focus-visible,
.bulletin-modal button:focus-visible,
.bulletin-modal input:focus-visible,
.bulletin-modal textarea:focus-visible,
.bulletin-lang-switch a:focus-visible,
.lang-switch a:focus-visible {
  outline: 2px solid var(--bulletin-seal);
  outline-offset: 2px;
}