/* The Sign-ins page and Settings' "Your sign-ins". Built on the tokens in styles.css (keylines, slabs, chip faces), so
   both themes work without colours of their own. */

.si-places-off h2 { margin-top: 0; }
.si-credit { margin-top: 18px; }
.si-credit a { color: inherit; }

/* ---------- flagged sign-ins */

.si-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.si-flag { border: 2px solid var(--keyline); border-radius: var(--radius); padding: 14px 16px 16px; background: var(--surface); box-shadow: var(--slab); }
.si-flag.si-high { box-shadow: inset 6px 0 0 var(--blocked-ink), var(--slab); padding-left: 20px; }
.si-flag.si-medium { box-shadow: inset 6px 0 0 var(--warn-ink), var(--slab); padding-left: 20px; }
.si-flag-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; }
.si-flag-head .muted { font-size: 14px; }
.si-reasons { margin: 10px 0 8px; padding-left: 20px; display: grid; gap: 4px; font-weight: 600; }
.si-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px 16px; margin: 10px 0; }
.si-facts dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.si-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.si-facts code { font-size: 13px; }
.si-note { margin: 8px 0; }
.si-note input { width: 100%; }
.si-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- lists */

.si-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.si-filters select { width: auto; min-width: 0; max-width: 100%; }
.si-list { list-style: none; margin: 0 0 12px; padding: 0; }
.si-row { padding: 10px 0; border-top: 2px solid var(--line); }
.si-row:first-child { border-top: 0; }
.si-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.si-row-sub { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.si-handled .si-row-main strong { font-weight: 700; }