/* Structure for the legal pages: a prose column, quoted lines, the draft notice, and the policy
   links in the footer. Brand-free — every colour and face comes from the theme contract, as the
   package's own site.css does. This belongs in BorinkenLabs.Web once a second site needs legal
   pages; it is here because the package is a neighbouring project. */

.legal .section__title { max-width: 22ch; }

.legal__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline;
               font-size: var(--step--1); color: var(--muted-2); margin-bottom: 1.75rem; }
.legal__meta a { text-decoration: underline; text-underline-offset: 4px;
                 text-decoration-color: var(--line-2); }
.legal__meta a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.legal__draft { border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius);
                padding: 0.9rem 1.1rem; margin-bottom: 1.75rem; font-size: var(--step--1); }

.legal__toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-bottom: 1.5rem;
              font-size: var(--step--1); max-width: var(--measure); }
.legal__toc a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px;
                text-decoration-color: var(--line-2); }
.legal__toc a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.legal__section { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.75rem; }
.legal__heading { font-size: var(--step-1); font-weight: 500; margin-bottom: 0.75rem; scroll-margin-top: 1.5rem; }
.legal__section p { margin-bottom: 1rem; }
.legal__section p:last-child { margin-bottom: 0; }

/* The words a caller heard or a customer ticked. Set apart so nobody mistakes them for our gloss. */
.legal__spoken { font-size: var(--step-1); line-height: 1.35; color: var(--ink);
                 border-left: 3px solid var(--accent); padding: 0.4rem 0 0.4rem 1.25rem;
                 margin: 1.25rem 0; }

.legal__siblings { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline;
                   border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem;
                   font-size: var(--step--1); }
.legal__siblings-label { font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
                         color: var(--muted-2); font-size: 0.7rem; }
.legal__siblings a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px;
                     text-decoration-color: var(--line-2); }
.legal__siblings a:hover { color: var(--accent); text-decoration-color: var(--accent); }