/*
 * DamageBrief — the cookie banner, the cookie-preferences form, the confirmation line and the legal links. Loaded by
 * EVERY layout (the app and sign-in pages over Bootstrap, the landing and legal pages without it), so nothing here
 * relies on Bootstrap: every colour and the typeface come from brand.css tokens. No inline styles (strict CSP).
 *
 * THE TWO BANNER BUTTONS ARE ONE CLASS (.consent-btn) — equal prominence of Reject and Accept is the legal requirement
 * and must survive any restyling; test/system/cookie_consent_test.rb compares their rendered boxes and colours.
 */

/* ---- the banner: in the page flow at the very top, never fixed over content ---- */
.consent-banner {
  position: relative; z-index: 20;
  padding: 10px 16px; border-bottom: 1px solid var(--db-slate-700); background: var(--db-slate-850);
  color: var(--db-slate-200); font: 400 .875rem/1.45 var(--db-font-sans);
}
.consent-banner-row {
  display: flex; flex-direction: column; gap: 8px; max-width: 1160px; margin: 0 auto;
}
.consent-banner-text { margin: 0; }
.consent-link, .consent-manage { color: var(--db-blue-300); text-underline-offset: 2px; white-space: nowrap; }
.consent-link:hover, .consent-manage:hover { color: var(--db-slate-100); }
.consent-banner-actions { display: flex; align-items: center; gap: 8px; margin: 0; }
.consent-banner-actions .consent-btn { flex: 1 1 0; }
.consent-manage { padding: 6px 4px; font-size: .8125rem; }
@media (min-width: 720px) {
  .consent-banner-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .consent-banner-actions { flex: none; }
  .consent-banner-actions .consent-btn { flex: none; }
}

/* ---- the one button style for both choices ---- */
.consent-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--db-slate-500); border-radius: 8px; background: var(--db-slate-800);
  color: var(--db-slate-100); font: 600 .8125rem/1.2 var(--db-font-sans); white-space: nowrap; cursor: pointer;
}
.consent-btn:hover { border-color: var(--db-blue-400); background: #2b313c; color: #fff; }
.consent-btn:focus-visible { outline: 2px solid var(--db-blue-300); outline-offset: 2px; }
.consent-btn-lg { min-height: 42px; padding: 9px 18px; font-size: .9375rem; }

/* ---- the preferences form ---- */
.consent-form { display: grid; gap: 12px; margin-top: 24px; }
.consent-choice {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--db-slate-700); border-radius: 10px; background: var(--db-slate-850); cursor: pointer;
}
.consent-choice-fixed { display: block; cursor: default; }
.consent-choice-title { display: block; margin: 0; color: var(--db-slate-100); font-weight: 600; }
.consent-choice-note { display: block; margin: 2px 0 0; color: var(--db-slate-400); font-size: .875rem; }
.consent-check { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--db-blue-500); }
.consent-form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

/* ---- the confirmation line on the layouts without Bootstrap alerts ---- */
.public-flash {
  margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; font: 500 .9375rem/1.4 var(--db-font-sans);
}
.public-flash-notice { border: 1px solid #214a30; background: #16301f; color: #79c990; }
.public-flash-alert { border: 1px solid #5c2c2c; background: #341a1b; color: #e99089; }

/* ---- the legal links in the app's and the sign-in page's footers ---- */
.app-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; text-align: left; }
.app-footer-links, .auth-legal nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.app-footer-links a, .auth-legal a { color: var(--db-slate-400); text-decoration: none; }
.app-footer-links a:hover, .auth-legal a:hover { color: var(--db-slate-100); text-decoration: underline; }
.auth-legal { font-size: .8125rem; }
.auth-legal nav { justify-content: center; }