/* ViDash AI pages on banhmiapp.com (/apps/dashcam/). Loaded after the site's /styles.css; it only adds the
   app's colours and the parts the site's privacy frame has no style for: long legal text with sub-headings,
   lists and tables, the language links, and (draft builds only) the editorial notes. Built by
   DashCam docs/legal/site/build.py - edit there, not on the site. */

.dc-page {
  --brand-primary: #b45309;
  --brand-primary-strong: #7c2d12;
  --brand-accent: #b45309;
  --brand-accent-soft: #fef3c7;
  --pp-primary: #b45309;
  --pp-primary-bright: #7c2d12;
}

.dc-page.pp-page {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(252, 250, 245, 0.94) 48%, #fcfaf5 100%),
    radial-gradient(760px 420px at 88% -130px, rgba(245, 158, 11, 0.16), transparent 72%),
    radial-gradient(620px 360px at -120px 30%, rgba(30, 41, 59, 0.08), transparent 72%),
    #fcfaf5;
}

.dc-page .pp-download,
.dc-page .pp-contact a {
  background: linear-gradient(135deg, #b45309, #1e293b);
  box-shadow: 0 14px 32px rgba(180, 83, 9, 0.16);
}

.dc-page .pp-date {
  border-color: rgba(180, 83, 9, 0.2);
  background: rgba(254, 243, 199, 0.88);
  color: #78350f !important;
}

.dc-page [id] {
  scroll-margin-top: 96px;
}

/* Language switch: links to the other language's page (the site's switch uses buttons). */
.dc-page .pp-lang-switch a {
  min-width: 32px;
  padding: 2px 0;
  border-radius: 999px;
  color: var(--brand-muted);
  font-size: 12px;
  text-align: center;
}

.dc-page .pp-lang-switch a.active {
  color: var(--brand-primary);
  font-weight: 820;
}

.dc-page .pp-links a[aria-current="page"] {
  color: var(--brand-ink);
  font-weight: 700;
}

.dc-lang-alt {
  margin: 14px 0 0;
  font-size: 14px;
}

.dc-lang-alt a,
.dc-page .pp-hero a,
.dc-prose a {
  color: var(--brand-primary-strong);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.dc-page .pp-hero > p + p:not(.dc-lang-alt) {
  margin-top: 12px;
}

/* Long legal text inside the site's cards. */
.dc-prose {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.dc-prose > * {
  min-width: 0;
}

.dc-prose h3 {
  margin: 14px 0 0;
  color: var(--brand-ink);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 720;
}

.dc-prose h3:first-child {
  margin-top: 0;
}

.dc-prose h4 {
  margin: 8px 0 0;
  color: var(--brand-ink);
  font-size: 16px;
}

.dc-prose ul,
.dc-prose ol {
  margin: 0;
  padding-left: 1.35em;
  color: var(--brand-muted);
  font-size: 15px;
  line-height: 1.65;
}

.dc-prose ul {
  list-style: disc;
}

.dc-prose ol {
  list-style: decimal;
}

.dc-prose li + li {
  margin-top: 4px;
}

.dc-prose li > ul,
.dc-prose li > ol {
  margin-top: 4px;
}

.dc-prose code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(240, 235, 226, 0.8);
  font-size: 0.92em;
}

.dc-prose hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--brand-line);
}

.dc-table {
  overflow-x: auto;
}

.dc-table table {
  width: 100%;
  border-collapse: collapse;
  color: var(--brand-muted);
  font-size: 14px;
  line-height: 1.55;
}

.dc-table th,
.dc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--brand-line);
  text-align: left;
  vertical-align: top;
}

.dc-table th {
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 720;
  background: rgba(240, 235, 226, 0.55);
}

.dc-table td:first-child {
  color: var(--brand-ink);
  font-weight: 650;
}

/* Index page cards are links. */
.dc-card {
  color: inherit;
  transition:
    transform 180ms ease,
    border-color 180ms ease;
}

.dc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 83, 9, 0.35);
}

.dc-card .pp-card-icon {
  padding: 7px;
}

.dc-card p {
  margin: 0;
}

/* Draft builds only (build.py --draft). */
.dc-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  padding: 8px 16px;
  background: #fff4d6;
  border-top: 2px solid #e0a800;
  color: #3a2a00;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

.dc-note {
  padding: 10px 14px;
  border-left: 4px solid;
  border-radius: 6px;
  font-size: 14px;
}

.dc-note p {
  font-size: 14px;
}

.dc-note-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dc-note-draft {
  background: #fff4d6;
  border-color: #e0a800;
}

.dc-note-legal {
  background: #fde8e8;
  border-color: #c62828;
}

.dc-note-owner {
  background: #e6f0ff;
  border-color: #1e63d6;
}

/* Phones: each table row becomes a small card, each cell labelled with its column name. */
@media (max-width: 640px) {
  .dc-table table,
  .dc-table tbody,
  .dc-table tr,
  .dc-table td {
    display: block;
    width: 100%;
  }

  .dc-table thead {
    display: none;
  }

  .dc-table tr {
    margin: 0 0 12px;
    padding: 6px 0;
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
  }

  .dc-table td {
    padding: 5px 12px;
    border: 0;
  }

  .dc-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--brand-faint);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .dc-prose h3 {
    font-size: 18px;
  }
}

@media print {
  .pp-nav,
  .pp-progress,
  .dc-lang-alt,
  .dc-banner {
    display: none;
  }
}