/* Sites pages: login, Overview, Sites, Site detail, Add a site (workstream D). Builds on montyguard.css + app.css.
   Tokens only (var(--mg-*)); no raw colours, no dark mode. */

/* Shared helpers ------------------------------------------------------------------------------------------- */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.only-narrow { display: none; }
.site-badges { gap: var(--mg-space-1); }
.php-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toast a.toast-link { color: var(--mg-text-inverse); font-weight: var(--mg-fw-semibold); }
.toast a.toast-link:hover { color: var(--mg-green-100); }
.menu__item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.menu__item[aria-disabled="true"]:hover { background: none; }

/* Login / invite ------------------------------------------------------------------------------------------- */
.auth .brand__mark { width: 32px; height: 32px; }
.auth .brand { font-size: var(--mg-fs-20); }
.auth__title:focus { outline: none; }
.auth__message { margin-top: var(--mg-space-4); }
.auth__message:empty { display: none; }
.auth__form { margin-top: var(--mg-space-5); }
.auth__submit { margin-top: var(--mg-space-5); }
.auth__help { margin-top: var(--mg-space-4); font-size: var(--mg-fs-13); color: var(--mg-text-muted); text-align: center; }
.auth__rule { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
.auth__rule .icon { width: 14px; height: 14px; }
.auth__noscript { margin-top: var(--mg-space-4); }
.auth__footer a { color: var(--mg-text-muted); }
.auth__footer a:hover { color: var(--mg-green); }

/* Overview ------------------------------------------------------------------------------------------------- */
.ov-feature { grid-row: span 2; justify-content: flex-start; }
.ov-feature .kpi__value { margin: var(--mg-space-1) 0; }
.kpi--feature .kpi__value--warning { color: var(--mg-warning); }
.ov-feature__target { color: var(--mg-text); }
.ov-fixes { list-style: none; margin: auto 0 0; padding: var(--mg-space-3) 0 0; border-top: 1px solid var(--mg-green-100); font-size: var(--mg-fs-13); }
.ov-fixes__item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--mg-space-3); padding: 3px 0; }
.ov-feature__explain { margin-top: auto; padding-top: var(--mg-space-3); border-top: 1px solid var(--mg-green-100); font-size: var(--mg-fs-13); color: var(--mg-text-muted); max-width: 52ch; }
.ov-fixes__time { color: var(--mg-green-700); font-weight: var(--mg-fw-semibold); }
.ov-kpis .kpi__note { line-height: 1.35; }
.ov-columns { align-items: start; }

.attention__item { align-items: flex-start; flex-wrap: wrap; column-gap: var(--mg-space-4); }
.attention__item > .list__main { flex: 1 1 260px; }
.attention__item--danger { box-shadow: inset 3px 0 0 var(--mg-danger); }
.attention__item--warning { box-shadow: inset 3px 0 0 var(--mg-warning-strong); }
.attention__item--neutral { box-shadow: inset 3px 0 0 var(--mg-n-300); }
.attention__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-2); margin-bottom: 2px; }
.attention__marker { display: inline-flex; flex: none; }
.attention__cta { flex: none; margin-top: 2px; }

.activity__item { padding-top: var(--mg-space-3); padding-bottom: var(--mg-space-3); }
.activity__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-2); margin-bottom: 2px; }
.activity__site { color: var(--mg-text); text-decoration: none; }
.activity__site:hover { color: var(--mg-green); text-decoration: underline; }
.activity__time { margin-left: auto; white-space: nowrap; }

@media (max-width: 1024px) {
  .ov-feature { grid-row: auto; }
}

/* Sites list ----------------------------------------------------------------------------------------------- */
.sites-filters { margin-bottom: var(--mg-space-3); }
.sites-filters__search { flex: 1 1 260px; }
.sites-filters__clear { align-self: flex-end; }
.sites-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-2); margin-bottom: var(--mg-space-3); }
.sites-meta [data-stale]:empty { display: none; }
.sites-meta [data-stale] { flex: 1 1 100%; }
.sites-table tbody tr { cursor: pointer; }
.sites-table td { vertical-align: top; }
.sites-table th, .sites-table td { padding-left: var(--mg-space-3); padding-right: var(--mg-space-3); }
.sites-table th:first-child, .sites-table td:first-child { padding-left: var(--mg-space-4); }
.sites-table__site { min-width: 180px; max-width: 280px; }
.sites-table__site .row-sub { max-width: 260px; }
.sites-table__site .row-sub.only-narrow { margin-top: var(--mg-space-1); }
.sites-table__uptime { white-space: normal; }
.sites-lastrun { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sites-findings { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

@media (max-width: 960px) {
  .sites-table .hide-narrow { display: none; }
  .sites-table .only-narrow { display: block; }
  .sites-table td .only-narrow:not(.row-sub) { margin-top: var(--mg-space-1); }
  .sites-table__site { min-width: 160px; max-width: 220px; }
  .sites-table__site .row-sub { max-width: 200px; }
  .sites-table__uptime { min-width: 64px; }
}

/* Site detail ---------------------------------------------------------------------------------------------- */
.page-header__subtitle a { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
.site-ext { width: 14px; height: 14px; }
.site-meta { margin-top: var(--mg-space-3); gap: var(--mg-space-2) var(--mg-space-3); }
.site-meta__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mg-fs-13); color: var(--mg-text-muted); }
.site-meta__item .icon { width: 15px; height: 15px; }
.site-actions { justify-content: flex-end; }
.site-menu { min-width: 280px; }
.site-menu__text { display: flex; flex-direction: column; gap: 1px; }
.site-menu__hint { font-size: var(--mg-fs-12); color: var(--mg-text-muted); font-weight: var(--mg-fw-regular); }
.site-notices:not(:empty) { margin-bottom: var(--mg-space-4); }
.site-tabs { margin-top: var(--mg-space-1); }
.site-tabs .count { margin-left: 6px; }
.tab-panel:focus-visible { outline-offset: 4px; }

.site-status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mg-space-2); }
.site-findings { border-top: 1px solid var(--mg-border); }
.site-findings__item { display: flex; align-items: flex-start; gap: var(--mg-space-3); padding: var(--mg-space-2) 0; border-bottom: 1px solid var(--mg-border); }
.site-findings__item .badge { flex: none; margin-top: 1px; }
.site-findings__item > .min-w-0 { flex: 1 1 auto; }
.site-findings__fix { flex: none; }
.site-lastrun { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.site-lastrun .cluster .icon { width: 14px; height: 14px; display: inline-block; margin-left: 2px; vertical-align: -2px; }
.site-lastrun a { display: inline-flex; align-items: center; gap: 2px; }

.uptime-scale { display: flex; justify-content: space-between; margin-top: var(--mg-space-1); }
.site-spark { margin-top: var(--mg-space-2); }
.site-spark .sparkline { height: 40px; }
.site-incidents__item { display: flex; align-items: flex-start; gap: var(--mg-space-3); padding: var(--mg-space-2) 0; }
.site-incidents__item + .site-incidents__item { border-top: 1px solid var(--mg-border); }
.site-incidents__item .badge { flex: none; margin-top: 1px; }

.site-flow { flex-wrap: wrap; }
.site-flow .badge { flex: none; min-width: 48px; justify-content: center; }
.site-flow__where { flex: none; }
.site-modes { margin-top: 2px; }
.site-mode-current { font-size: var(--mg-fs-13); margin-top: var(--mg-space-1); }
.site-dl { font-size: var(--mg-fs-13); }
.site-dl dd.text-mono { font-size: var(--mg-fs-13); }
.site-baseline { padding-top: var(--mg-space-3); border-top: 1px solid var(--mg-border); }

.site-releases .actions .btn .icon, .site-runs .icon { width: 14px; height: 14px; }
.site-runs a.nowrap { display: inline-flex; align-items: center; gap: 4px; }
.site-runs__summary { min-width: 220px; max-width: 440px; }
.site-runs__summary .row-title { font-weight: var(--mg-fw-medium); }
.site-backups .row-sub { max-width: 320px; }
.site-rb-list .choice { padding: var(--mg-space-3) var(--mg-space-4); }
/* Read-only host (docs/SAFETY.md "Read-only hosts"): the banner's action and the lift confirmation's list */
.site-readonly__actions { margin-top: var(--mg-space-2); }
.site-access-list { margin: var(--mg-space-2) 0 var(--mg-space-3); padding-left: var(--mg-space-5); }
.site-access-list li + li { margin-top: var(--mg-space-1); }
.dialog .fieldset legend.label { display: block; margin-bottom: var(--mg-space-2); color: var(--mg-text); }

@media (max-width: 1100px) {
  .site-actions { justify-content: flex-start; }
}
@media (max-width: 960px) {
  .site-runs th, .site-runs td, .site-backups th, .site-backups td, .site-releases th, .site-releases td { padding-left: var(--mg-space-3); padding-right: var(--mg-space-3); }
  .site-runs__summary { min-width: 180px; }
}
@media (max-width: 640px) {
  .site-flow__where { flex-basis: 100%; }
}

/* Add a site (wizard) -------------------------------------------------------------------------------------- */
.onboard-steps { margin-bottom: var(--mg-space-4); }
.onboard-notice { max-width: 880px; }
.onboard-notice:not(:empty) { margin-bottom: var(--mg-space-4); }
.onboard-card { max-width: 880px; }
.onboard-form { display: flex; flex-direction: column; gap: var(--mg-space-4); }
.onboard-form > .field, .onboard-form > .form-row, .onboard-form > .fieldset { margin-top: 0; }
.onboard-form .form-row > .field + .field { margin-top: 0; }
.onboard-form .form-actions { margin-top: var(--mg-space-2); padding-top: var(--mg-space-4); border-top: 1px solid var(--mg-border); }
.onboard-form [data-form-error]:empty { display: none; }
.onboard-head .eyebrow { margin-bottom: var(--mg-space-1); }
.onboard-head .h2:focus { outline: none; }
.onboard-fieldset legend, .onboard-conn legend { margin-bottom: var(--mg-space-2); }
.onboard-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onboard-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fieldset:disabled .choice { cursor: not-allowed; opacity: 0.7; }
.onboard-help .h4 { margin-bottom: 0; }
.onboard-list { margin: 0; padding-left: 1.25em; }
.onboard-list li + li { margin-top: 6px; }
.onboard-conn { display: flex; flex-direction: column; gap: var(--mg-space-4); }
.onboard-conn .form-row { margin-top: 0; }
.onboard-conn__grid { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: var(--mg-space-4); }
.onboard-conn .field + .field { margin-top: 0; }
.onboard-sensitive { padding: var(--mg-space-3) var(--mg-space-4); border: 1px solid var(--mg-border); border-radius: var(--mg-radius); }
.onboard-sensitive:has(input:checked) { border-color: var(--mg-green-100); background: var(--mg-green-25); }
.onboard-sensitive__check { font-size: var(--mg-fs-14); }
.onboard-sensitive__help { margin-top: var(--mg-space-1); padding-left: calc(16px + var(--mg-space-2)); }
.onboard-keynote { background: var(--mg-green-25); border-color: var(--mg-green-100); }
.onboard-keynote .alert__icon, .onboard-keynote .alert__title { color: var(--mg-green-700); }
.onboard-loading { padding: var(--mg-space-6) var(--mg-space-4); }
.onboard-anyway { display: inline-flex; align-items: flex-start; gap: var(--mg-space-2); }
.onboard-anyway .icon { width: 16px; height: 16px; margin-top: 2px; }
.onboard-explain p + .onboard-list, .onboard-explain .onboard-list + p { margin-top: var(--mg-space-2); }

.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mg-border); }
.checklist__item { display: flex; align-items: flex-start; gap: var(--mg-space-3); padding: var(--mg-space-3) 0; border-bottom: 1px solid var(--mg-border); }
.checklist__item > .min-w-0 { flex: 1 1 auto; }
.checklist__item .badge { flex: none; }
.checklist__icon { width: 20px; height: 20px; margin-top: 1px; }
.checklist__item--ok .checklist__icon { color: var(--mg-green); }
.checklist__item--fail .checklist__icon { color: var(--mg-danger); }
.checklist__item--wait .checklist__icon,
.checklist__item--warn .checklist__icon { color: var(--mg-warning-strong); }

.onboard-done { align-items: flex-start; }
.onboard-done__icon { display: inline-flex; width: 48px; height: 48px; padding: 10px; border-radius: 50%; background: var(--mg-green-50); color: var(--mg-green); }
.onboard-done__icon .icon { width: 28px; height: 28px; }
.onboard-summary { width: 100%; padding: var(--mg-space-4) 0; border-top: 1px solid var(--mg-border); border-bottom: 1px solid var(--mg-border); }
.onboard-done .card { width: 100%; }

@media (max-width: 760px) {
  .onboard-choices--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .onboard-choices--2 { grid-template-columns: minmax(0, 1fr); }
  .onboard-conn__grid { grid-template-columns: minmax(0, 1fr) 96px; }
}

/* Exception details on the site page keep the engine's line breaks (PHP-switch steps, production instructions). */
.site-exc-detail { white-space: pre-line; overflow-wrap: anywhere; }