/* Security page (plans/security.md): every claim a line with its tag, two drawings, one table. Tokens only. */

/* The three tags: done in the pilot, in V1, not promised yet */
.sec-tag { justify-content: center; }
.sec-tag--pilot { background: var(--color-success-soft); color: var(--color-success-text); border-color: transparent; }
.sec-tag--v1 { background: var(--color-primary-soft); color: var(--color-primary-strong); border-color: transparent; }
.sec-tag--no { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }

.sec-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-4); }
.sec-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }

/* A claim: the tag, then the consequence in bold and one sentence */
.sec-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 960px; }
.sec-item { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-default); }
.sec-item:last-child { border-bottom: 0; }
.sec-item .sec-tag { margin-top: 1px; }
.sec-item__body { display: flex; flex-direction: column; gap: var(--space-1); }
.sec-item__body p { margin: 0; }
.sec-item__body .t-body { color: var(--color-muted); }

/* The drawings */
.sec-fig { margin: 0 0 var(--space-6); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.sec-fig > svg { min-width: 760px; }
.sec-key svg { display: inline-block; width: 22px; height: 22px; min-width: 0; }
.sec-fig figcaption { max-width: 760px; }
.sec-region { fill: none; stroke: var(--color-primary); stroke-width: 1.25; stroke-dasharray: 6 4; }
.sec-lock-bg { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.25; }
.sec-lock { color: var(--color-primary); }
.sec-ic { color: var(--color-muted); }
.sec-row { text-anchor: start; }
.sec-rule { stroke: var(--color-default); stroke-width: 1; }
.sec-dot { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; }
.sec-dot--full { fill: var(--color-primary); }
.sec-dot--half { fill: var(--color-primary); stroke: none; }
.sec-dot--none { fill: none; stroke: var(--color-emphasis); stroke-dasharray: 3 3; }
.sec-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.sec-key__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.sec-notes { padding: 0 0 0 var(--space-6); max-width: 760px; }

/* The last part */
.sec-lead { max-width: 760px; margin: 0 0 var(--space-4); }
.sec-claims td:first-child { width: 28%; }
.sec-claims td:last-child { width: 20%; }
.sec-claims .t-body { color: var(--color-muted); }

@media (max-width: 720px) {
  .sec-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .sec-item .sec-tag { justify-self: start; }
  .sec-fig { padding: var(--space-4); }
}