/* static/css/legal.css
   Styles for pages/eula.html — the public End-User Licence Agreement.

   That page stands alone rather than extending base.html, so it doesn't load
   app.css: the document scrolls normally instead of inside .main. Tokens
   (--surface-1, --hairline, --text-secondary, --ra-cyan, --ease-out …) come
   from custom.css, as they do for profile.css and home.css.

   This is a page people read top to bottom and print, so almost everything
   here serves the measure, the numbering and the print copy. */

.legal-page { --bar-height: 64px; }

/* -------------------------------------------------------------------- bar */

.legal-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--bar-height);
  padding: 0 1.25rem;
  background-color: var(--black);
}

/* The same gradient edge the app header carries. */
.legal-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ra-gradient);
  pointer-events: none;
}

.legal-brand { display: inline-flex; align-items: center; }
.legal-brand img { height: 44px; width: auto; }

.legal-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--hairline-strong);
  border-radius: .625rem;
  background-color: var(--surface-2);
  color: var(--text-primary);
  font-size: .875rem;
  line-height: 1.2;
  text-decoration: none;
  padding: .5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}

.legal-btn:hover {
  border-color: color-mix(in srgb, var(--ra-cyan) 55%, transparent);
  background-color: #1a1f28;
  color: var(--text-primary);
}

.legal-btn i { font-size: .875rem; color: var(--text-secondary); }

/* ------------------------------------------------------------------- head */

.legal {
  max-width: 1120px;
  margin-inline: auto;
  padding: 2.5rem 1.25rem 4rem;
}

.legal-head {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
  max-width: 72ch;
}

/* The short brand rail that opens the dashboard index and the profile page. */
.legal-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: var(--ra-gradient);
}

.legal-eyebrow {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.legal-head h1 {
  margin: 0 0 .5rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  margin: 0 0 1.5rem;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.legal-lede {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.legal-notice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ra-orange) 45%, transparent);
  border-radius: .75rem;
  background-color: color-mix(in srgb, var(--ra-orange) 8%, transparent);
}

.legal-notice i { flex: none; margin-top: .1rem; color: var(--ra-orange); }

.legal-notice p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-primary);
}

/* ---------------------------------------------------------------- columns */

.legal-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .legal-columns {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 3.5rem;
  }
}

/* --------------------------------------------------------------- contents */

.legal-toc details {
  border: 1px solid var(--hairline);
  border-radius: .75rem;
  background-color: var(--surface-1);
}

.legal-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.legal-toc summary::-webkit-details-marker { display: none; }

.legal-toc summary i {
  font-size: .75rem;
  transition: transform .18s var(--ease-out);
}

.legal-toc details[open] summary i { transform: rotate(180deg); }

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0 .5rem .6rem;
}

.legal-toc a {
  display: flex;
  gap: .6rem;
  padding: .35rem .5rem;
  border-radius: .5rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out);
}

.legal-toc a:hover {
  color: var(--text-primary);
  background-color: var(--surface-2);
}

.legal-toc .n {
  flex: none;
  min-width: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

/* On a wide screen the list is a rail beside the text. Its summary is hidden
   and the inline script in eula.html holds the <details> open. */
@media (min-width: 992px) {
  .legal-toc {
    position: sticky;
    top: calc(var(--bar-height) + 1.5rem);
    max-height: calc(100vh - var(--bar-height) - 3rem);
    overflow-y: auto;
  }

  .legal-toc details {
    border: 0;
    background: none;
  }

  .legal-toc summary { display: none; }
  .legal-toc ol { padding: 0; }
  .legal-toc a { padding-inline: .6rem; }
}

/* ------------------------------------------------------------------- body */

.legal-body {
  max-width: 72ch;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--text-primary);
}

/* scroll-margin so a contents link lands the heading below the sticky bar,
   not under it. */
.legal-body section {
  padding: 1.75rem 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: var(--bar-height);
}

.legal-body section:first-child { border-top: 0; padding-top: 0; }

.legal-body h2 {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--text-primary);
}

.legal-body h2 .n {
  flex: none;
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ra-cyan);
}

.legal-body p { margin: 0 0 1rem; }
.legal-body p:last-child { margin-bottom: 0; }

.legal-body strong { font-weight: 600; color: var(--text-primary); }

/* Numbered clauses (3.1) and lettered items ((a)). The numbers are real text
   in the markup — see the note at the top of eula.html — so they're only
   positioned here, not generated. */
.clauses,
.items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clauses > li,
.items > li {
  position: relative;
  margin-bottom: .85rem;
}

.clauses > li:last-child,
.items > li:last-child { margin-bottom: 0; }

.clauses > li { padding-left: 3rem; }
.items > li { padding-left: 2.25rem; margin-bottom: .5rem; }

.clauses .n,
.items .n {
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* A lettered list inside a clause sits under the clause's text. */
.clauses .items { margin-top: .6rem; }

.defs { margin: 0; }

.defs dt {
  font-weight: 600;
  color: var(--text-primary);
}

.defs dd {
  margin: .15rem 0 1rem;
  padding-left: 1.25rem;
  color: var(--text-primary);
}

.defs dd:last-child { margin-bottom: 0; }

/* The clauses the notice at the top points at. An orange edge, the design's
   caution colour, so they stand out in the running text as the Consumer
   Protection Act expects of terms that limit liability. */
.legal-body section.flagged {
  position: relative;
  padding-left: 1.25rem;
}

.legal-body section.flagged::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 2px;
  border-radius: 999px;
  background-color: var(--ra-orange);
}

.legal-link {
  color: var(--ra-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(63, 198, 255, .4);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color .18s var(--ease-out);
}

.legal-link:hover { color: var(--ra-cyan); text-decoration-color: var(--ra-cyan); }

.addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.addresses > div {
  padding: 1rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: .75rem;
  background-color: var(--surface-1);
}

.addresses h3 {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.addresses address {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-primary);
}

/* ----------------------------------------------------------------- footer */

.legal-footer {
  border-top: 1px solid var(--hairline);
  padding: 1.5rem 1.25rem 2rem;
}

.legal-footer p {
  max-width: 1120px;
  margin: 0 auto;
  font-size: .8125rem;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 575.98px) {
  .legal-bar { padding: 0 1rem; }
  .legal-brand img { height: 36px; }
  .legal { padding: 1.75rem 1rem 3rem; }
  .legal-head { margin-bottom: 1.75rem; }
  .legal-head h1 { font-size: 1.5rem; }
  .legal-lede { font-size: .9375rem; }
  .legal-footer { padding-inline: 1rem; }

  /* Clause numbers keep their own column, but a narrower one: "12.1" still
     fits and the text gets back the width a phone can't spare. */
  .clauses > li { padding-left: 2.5rem; }
  .items > li { padding-left: 1.9rem; }
  .legal-body section.flagged { padding-left: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-btn,
  .legal-toc a,
  .legal-toc summary i,
  .legal-link { transition-duration: .01ms; }
}

/* ------------------------------------------------------------------ print */

/* A client's legal team will print this or save it as a PDF, so the printed
   copy is black on white with the chrome dropped and the clause numbering and
   flagged-clause edge kept. */
@media print {
  body.legal-page {
    background: #fff;
    color: #000;
  }

  .legal-bar,
  .legal-toc,
  .legal-print { display: none !important; }

  .legal { max-width: none; padding: 0; }
  .legal-columns { display: block; }
  .legal-head { max-width: none; }
  .legal-head::before { display: none; }

  .legal-head h1,
  .legal-lede,
  .legal-notice p,
  .legal-body,
  .legal-body h2,
  .legal-body strong,
  .defs dt,
  .defs dd,
  .addresses address { color: #000; }

  .legal-eyebrow,
  .legal-meta,
  .clauses .n,
  .items .n,
  .addresses h3,
  .legal-footer p { color: #444; }

  .legal-body h2 .n,
  .legal-link { color: #000; }

  .legal-notice,
  .addresses > div {
    background: none;
    border-color: #999;
  }

  .legal-body { max-width: none; font-size: 10.5pt; }
  .legal-body section { border-color: #ccc; }
  .legal-body h2 { break-after: avoid; }
  .legal-footer { border-color: #ccc; }
}