/* The «Estado» card of a service (/servicio/<worker>/): on top of /editor.css, the light, the ficha, the switch with its confirms and the activity. */
main { overflow-wrap: anywhere; } /* whatever the server says may be one long word: it wraps, the page never scrolls sideways */
.sv-card { margin-top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-light { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sv-light-text { flex: 1 1 220px; min-width: 0; }
.sv-light-text h2 { margin: 0 0 2px; }
.sv-light-text p { margin: 0; overflow-wrap: anywhere; }
.sv-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.sv-dot.green { background: var(--green); }
.sv-dot.yellow { background: var(--yellow); }
.sv-dot.red { background: var(--red); }
.sv-dl { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 8px 14px; margin: 8px 0 0; }
.sv-dl dt { color: var(--muted); font-size: .88rem; font-weight: 600; }
.sv-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sv-dl dd a { overflow-wrap: anywhere; }
.sv-list, .sv-chips, .sv-events { list-style: none; margin: 8px 0 0; padding: 0; }
.sv-list li, .sv-chips li { margin: 4px 0; overflow-wrap: anywhere; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.chip { display: inline-block; max-width: 100%; font-size: .78rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; margin: 2px 4px 2px 0; color: var(--muted); overflow-wrap: anywhere; }
.chip.on { color: var(--green); border-color: rgba(34, 177, 76, .5); }
.chip.bad { color: var(--red); border-color: rgba(240, 57, 47, .5); }
.chip.warn { color: var(--yellow); border-color: rgba(242, 201, 76, .5); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; overflow-wrap: anywhere; }
.sv-form { margin-top: 10px; }
.sv-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sv-state { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; font-weight: 400; cursor: pointer; }
.sv-state input { margin-top: 4px; flex: 0 0 auto; }
.sv-state span { display: block; min-width: 0; }
.sv-state strong { display: block; font-weight: 600; }
.sv-state:has(input:checked) { border-color: var(--blue); }
.sv-state:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.sv-confirm { margin-top: 14px; border: 1px solid rgba(242, 201, 76, .5); border-radius: 10px; padding: 12px 14px; }
.sv-confirm h3 { margin: 0 0 6px; }
.sv-deps { color: var(--yellow); font-weight: 600; }
.sv-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 10px 0; }
.sv-check input { margin-top: 4px; }
.sv-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; align-items: end; margin-top: 8px; }
.sv-filters input[type=date] { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; width: 100%; min-width: 0; }
.sv-filters-go { padding-bottom: 2px; }
.sv-events li { border-bottom: 1px solid var(--line); padding: 8px 0; font-size: .9rem; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: baseline; overflow-wrap: anywhere; }
.sv-events time { color: var(--muted); }
.sv-events .kind, .sv-events .svc, .sv-events .actor { color: var(--muted); }
.sv-events .what { flex: 1 1 14rem; min-width: 0; color: var(--text); }
button.act.danger { background: var(--red); color: #fff; border: 0; }
#events-more { margin-top: 10px; }
@media (max-width: 560px) {
  .sv-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sv-dl dd { margin-bottom: 8px; }
  main { padding-left: 12px; padding-right: 12px; }
}
.sv-diff { color: var(--yellow); font-weight: 600; }
/* The CSP card of duxels-security (csp.js): one fold per day, tables of what the reports said. Every cell is text from the internet: it wraps, it never widens the page. */
.sv-day { border-top: 1px solid var(--line); padding: 8px 0; }
.sv-day summary { cursor: pointer; display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: baseline; }
.sv-day h4 { margin: 14px 0 4px; font-size: .92rem; color: var(--muted); }
.sv-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .86rem; }
.sv-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 8px 4px 0; }
.sv-table td { padding: 4px 8px 4px 0; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.sv-table td.num { text-align: left; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .sv-table { table-layout: auto; }
}