/* page-legal.css: Copyright and takedown policy (#copyright, legal.js). Scoped to .cr; the reading frame
   (.lg, .lg-read, .lg-sec, .lg-toc) is shared with Privacy in dibs.css. Tokens only (spec/system.md). */

/* Placeholders until the designated agent is filed: a dashed warning outline, ink text, brackets kept */
.cr .cr-ph { padding: 0 3px; border: 1px dashed var(--warning); border-radius: var(--r-control); background: var(--warning-subtle); color: var(--ink); font: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cr .lg-date .cr-ph { color: var(--ink-2); }

/* The one draft note under the summary (system 9 banner: tinted, icon, one or two lines of meta) */
.cr .cr-draft { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-4) 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font: var(--t-meta); color: var(--ink-2); }
.cr .cr-draft > .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.cr .cr-draft .cr-ph { font: inherit; }

/* "Planned" tag on lines whose feature is not live (system 9 badge, neutral) */
.cr .cr-planned { display: inline-flex; align-items: center; height: 20px; margin: 0 2px; padding: 0 6px; vertical-align: 1px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); font: var(--t-small); font-weight: 500; }

/* Agent details: a property list (system 9.6, 88px label column) in one bordered group */
.cr .cr-agent { margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cr .cr-agent > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); padding: 6px 0; }
.cr .cr-agent dt { font: var(--t-label); font-weight: 400; color: var(--muted); padding-top: 2px; }
.cr .cr-agent dd { margin: 0; font: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }

/* Numbered requirements (V291: a circled number beside each step) */
.cr .cr-steps { list-style: none; counter-reset: cr; margin: 0 0 var(--s-4); padding: 0; }
.cr .cr-steps > li { counter-increment: cr; position: relative; padding-left: 36px; }
.cr .cr-steps > li + li { margin-top: var(--s-3); }
.cr .cr-steps > li::before { content: counter(cr); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 999px; font: var(--t-label); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Example wording to copy into a notice */
.cr .cr-quote { margin: var(--s-2) 0 0; padding: 2px 0 2px var(--s-3); border-left: 2px solid var(--line-strong); }
.cr .cr-quote p { margin: 0; color: var(--ink-2); }
.cr .cr-plain { display: block; margin-top: var(--s-2); color: var(--ink-2); }

/* The one warning a complainant must not miss */
.cr .cr-callout { padding-left: var(--s-3); border-left: 2px solid var(--warning); }

.cr .lg-sec ul li > .cr-planned:first-of-type { margin-left: 4px; }
.cr .lg-read a { overflow-wrap: anywhere; }

@media (max-width: 599px) {
  .cr .cr-agent > div { grid-template-columns: 1fr; gap: 0; }
  .cr .cr-steps > li { padding-left: 32px; }
}

/* W5 S5 (27 Oct 2026). On Rails the Privacy and Copyright bodies are the server's own views (GET /privacy.json,
   /copyright.json) inside this frame. These rules cover the few utility classes those views carry that the
   prototype's own copy does not: lists, small print and the usage button's paragraph. Inert on the preview. */
.lg-read .list-disc { list-style: disc; padding-left: 20px; }
.lg-read .space-y-1\.5 > * + * { margin-top: 6px; }
.lg-read .mt-2 { margin-top: var(--s-2); }
.lg-read .text-sm { font: var(--t-label); font-weight: 400; }
.lg-read .text-ink { color: var(--ink); }
.lg-read .text-body { color: var(--ink-2); }
.lg-read .text-brand { color: inherit; }