/* Reports: the seal every checked version shows, the report sheet, and the team's page */

/* the seal: checked by AI, its signature, reviewed or not, and Report for a listener */
.seal { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line-2, var(--line)); border-radius: calc(14px * var(--round, 1)); background: color-mix(in srgb, var(--sheet) 80%, transparent); color: var(--ink); text-align: left; }
.seal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; font-size: 14px; }
.seal-head svg { flex: none; width: 18px; height: 18px; color: var(--ai); }
.seal-head b { font-weight: 600; }
.seal-sig { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--soft); }
.seal-team { margin: 0; font-size: 13px; color: var(--muted); }
.seal-team.is-reviewed { color: var(--soft); }
.seal-team.is-reviewed::before { content: "✓ "; color: var(--ai); }
.seal-ask { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.seal-report { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: var(--pill, 999px); background: none; color: var(--soft); font: 500 14px/1 var(--sans); cursor: pointer; }
.seal-report svg { width: 16px; height: 16px; }
.seal-report:hover { color: var(--ink); border-color: var(--soft); }
.seal.is-down .seal-head svg { color: var(--muted); }
.lp-close .seal { max-width: 520px; margin: 22px auto 0; }

/* the report sheet */
.rp { display: grid; gap: 10px; color: var(--ink); }
.rp-title { font: var(--display, 400) 28px/1.1 var(--serif); letter-spacing: var(--title-track, normal); padding-right: 48px; }
.rp-sub { font-size: 14px; color: var(--soft); }
.rp-sub code { font: 12px var(--mono); }
.rp-lines { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: calc(14px * var(--round, 1)); }
.rp-line { display: flex; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--soft); font: 400 14px/1.4 var(--sans); text-align: left; cursor: pointer; }
.rp-line small { flex: none; width: 20px; font: 11px var(--mono); color: var(--muted); }
.rp-line:hover { background: var(--sheet); }
.rp-line.is-on { border-color: var(--soft); background: var(--sheet); color: var(--ink); }
.rp-why { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-note { display: grid; gap: 6px; }
.rp-acts { display: flex; justify-content: flex-end; }
.rp-acts .btn { min-height: 48px; }

/* a link to a version that was taken down */
.sp-down { display: grid; gap: 12px; justify-items: start; padding-block: 64px; color: var(--soft); }

/* the team's page */
.tm { display: grid; gap: 18px; padding-block: 28px 64px; color: var(--ink); }
.tm-head { display: grid; gap: 8px; }
.tm-title { font: var(--display, 400) 40px/1.05 var(--serif); letter-spacing: var(--title-track, normal); }
.tm-sub { max-width: 640px; font-size: 15px; color: var(--soft); }
.tm-v { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: calc(18px * var(--round, 1)); background: var(--panel); }
.tm-v-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tm-v-title { font: 600 20px/1.2 var(--sans); }
.tm-v-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.tm-v-meta code { font: 12px var(--mono); color: var(--soft); }
.tm-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tm-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
.tm-r > .btn { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.tm-why { justify-self: start; padding: 2px 8px; border-radius: 6px; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; background: color-mix(in srgb, var(--soft) 16%, transparent); }
.tm-why-unsafe, .tm-why-hurtful { background: color-mix(in srgb, #e4572e 22%, transparent); color: #ffb8a3; }
.tm-words { margin: 0; display: grid; gap: 2px; font: italic 400 16px/1.4 var(--serif); color: var(--ink); }
.tm-words span { font: normal 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tm-note, .tm-from { margin: 0; font-size: 13.5px; color: var(--soft); }
.tm-from { color: var(--muted); font-size: 12.5px; }
.tm-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.tm-closed { display: grid; gap: 6px; font-size: 14px; color: var(--soft); }
.tm-closed ul { margin: 0; padding-left: 18px; }
@container app (max-width: 600px) {
  .tm-r { grid-template-columns: minmax(0, 1fr); }
  .tm-r > .btn { grid-column: auto; grid-row: auto; justify-self: start; }
  .tm-v-head { flex-direction: column; }
}