/* admin?a=infra - the Lightsail health page (class.admin_infra.php). Every rule is under
   .infra_page; the portal's global.css stays untouched. Series colours: s1 blue, s2 orange,
   s3 violet, s4 aqua (validated for colour-blind separation); status colours are their own set. */

.infra_page{
  --infra-ground: #f3f6f5; --infra-surface: #ffffff; --infra-surface-2: #eaf0ee; --infra-line: #d7e0dd; --infra-line-soft: #e8eeec;
  --infra-ink: #14201f; --infra-ink-2: #4d5e5b; --infra-ink-3: #7d8c89;
  --infra-accent: #0e7f78; --infra-accent-ink: #0a615b;
  --infra-s1: #2a78d6; --infra-s2: #eb6834; --infra-s3: #4a3aa7; --infra-s4: #1baf7a; --infra-s5: #eda100; --infra-s6: #7d8c89;
  --infra-good: #0a7a0a; --infra-warn: #8a5d00; --infra-serious: #c9622f; --infra-crit: #d03b3b;
  --infra-good-soft: #e3f5e3; --infra-warn-soft: #fff3d6; --infra-serious-soft: #fde8df; --infra-crit-soft: #f9dede;
  --infra-grid: #e6ebea;
  --infra-mono: ui-monospace, Menlo, Consolas, monospace;
  color: var(--infra-ink); font-size: 15px; line-height: 1.5; max-width: 1080px; margin: 0 auto; padding-bottom: 40px;
}
.infra_page *{ box-sizing: border-box }
.infra_page h1, .infra_page h2, .infra_page h3{ margin: 0; line-height: 1.15; text-wrap: balance }
.infra_h1{ font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.01em; margin-top: 4px }
.infra_page h2{ font-size: 21px; font-weight: 600 }
.infra_page h3{ font-size: 16.5px; font-weight: 600 }
.infra_eyebrow{ font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--infra-accent-ink) }
.infra_lede{ margin: 8px 0 0; max-width: 64ch; color: var(--infra-ink-2) }
.infra_dim{ color: var(--infra-ink-3) }
.infra_c_crit{ color: var(--infra-crit) }

/* header */
.infra_head{ padding: 8px 0 22px; border-bottom: 1px solid var(--infra-line); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between }
.infra_meta{ font-family: var(--infra-mono); font-size: 12px; color: var(--infra-ink-2); display: grid; gap: 4px; text-align: right }
.infra_meta b{ color: var(--infra-ink); font-weight: 600 }
.infra_refresh{ display: inline-block; margin-top: 4px; padding: 5px 12px; border-radius: 6px; background: var(--infra-accent); color: white !important; font-family: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none !important; justify-self: end }
.infra_refresh:hover{ background: var(--infra-accent-ink) }
@media (max-width: 640px){ .infra_meta{ text-align: left } .infra_refresh{ justify-self: start } }

/* verdict strip */
.infra_verdict{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--infra-line); border: 1px solid var(--infra-line); margin-top: 22px; border-radius: 6px; overflow: hidden }
.infra_verdict > div{ background: var(--infra-surface); padding: 14px 16px; display: grid; gap: 2px; align-content: start }
.infra_k{ font-size: 11.5px; color: var(--infra-ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600 }
.infra_v{ font-size: 28px; font-weight: 700; line-height: 1.05 }
.infra_s{ font-size: 13px; color: var(--infra-ink-2) }

.infra_errors{ margin-top: 16px; background: var(--infra-serious-soft); border: 1px solid #f2c9b4; border-radius: 6px; padding: 12px 16px; font-size: 13.5px; color: var(--infra-ink) }
.infra_errors ul{ margin: 6px 0; padding-left: 20px; font-family: var(--infra-mono); font-size: 12px }

.infra_sec{ padding-top: 34px }
.infra_sec_head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 14px }
.infra_sec_head p{ margin: 0; max-width: 62ch; color: var(--infra-ink-2) }

/* instance cards */
.infra_instances{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px }
.infra_inst{ background: var(--infra-surface); border: 1px solid var(--infra-line); border-radius: 8px; padding: 16px 18px; display: grid; gap: 12px; align-content: start; border-top: 4px solid var(--infra-sc, var(--infra-s1)) }
.infra_s1{ --infra-sc: var(--infra-s1) } .infra_s2{ --infra-sc: var(--infra-s2) } .infra_s3{ --infra-sc: var(--infra-s3) }
.infra_s4{ --infra-sc: var(--infra-s4) } .infra_s5{ --infra-sc: var(--infra-s5) } .infra_s6{ --infra-sc: var(--infra-s6) }
.infra_inst_top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.infra_inst h3{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.infra_swatch{ display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--infra-sc, var(--infra-s1)); flex: none; margin-right: 6px; vertical-align: -1px }
.infra_inst h3 .infra_swatch{ margin-right: 0 }
.infra_here{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--infra-accent-ink); background: #d9efec; padding: 1px 7px; border-radius: 3px }
.infra_role{ font-size: 13px; color: var(--infra-ink-2); margin: 2px 0 0 }
.infra_spec{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font-family: var(--infra-mono); font-size: 12.5px }
.infra_spec div{ background: var(--infra-surface-2); border-radius: 4px; padding: 6px 8px; line-height: 1.25 }
.infra_spec small{ display: block; color: var(--infra-ink-3); font-family: inherit; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em }
.infra_kv{ display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; margin: 0 }
.infra_kv dt{ color: var(--infra-ink-3); font-weight: normal }
.infra_kv dd{ margin: 0; font-family: var(--infra-mono); font-size: 12px }
.infra_pill{ display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px 2px 7px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none }
.infra_pill::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor }
.infra_pill_good{ background: var(--infra-good-soft); color: var(--infra-good) }
.infra_pill_warn{ background: var(--infra-warn-soft); color: var(--infra-warn) }
.infra_pill_crit{ background: var(--infra-crit-soft); color: var(--infra-crit) }

/* meters */
.infra_meters{ display: grid; gap: 8px }
.infra_meter{ display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; font-size: 13px }
.infra_meter_lab{ color: var(--infra-ink-3) }
.infra_meter_bar{ height: 8px; background: var(--infra-surface-2); border-radius: 4px; overflow: hidden; position: relative }
.infra_meter_bar i{ position: absolute; top: 0; bottom: 0; left: 0; background: var(--infra-sc, var(--infra-s1)); border-radius: 4px }
.infra_meter_bar i.infra_hot{ background: var(--infra-serious) }
.infra_meter_val{ font-family: var(--infra-mono); font-size: 12px; text-align: right; color: var(--infra-ink-2); white-space: nowrap }
.infra_meter_note{ font-size: 12.5px; color: var(--infra-ink-3); font-style: italic }

/* charts */
.infra_charts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px }
.infra_charts + .infra_charts{ margin-top: 14px }
.infra_fig{ margin: 0; background: var(--infra-surface); border: 1px solid var(--infra-line); border-radius: 8px; padding: 14px 16px 10px; display: grid; gap: 8px; min-width: 0; align-content: start }
.infra_fig_wide{ grid-column: 1 / -1 }
.infra_fig figcaption{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap }
.infra_fig figcaption b{ font-weight: 600; font-size: 15px }
.infra_fig figcaption span{ font-size: 12px; color: var(--infra-ink-3) }
.infra_fig svg{ width: 100%; height: auto; display: block; overflow: visible }
.infra_legend{ display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--infra-ink-2) }
.infra_ln{ display: inline-block; width: 14px; height: 2px; background: var(--infra-ink); vertical-align: 3px; margin-right: 6px; border-radius: 1px }
.infra_grid line{ stroke: var(--infra-grid); stroke-width: 1 }
.infra_ax text, .infra_axt{ fill: var(--infra-ink-3); font: 11px var(--infra-mono) }
.infra_lbl{ fill: var(--infra-ink); font: 500 11px var(--infra-mono) }
.infra_bars rect{ fill: var(--infra-sc, var(--infra-s1)); opacity: .9 }
.infra_bars rect:hover{ opacity: 1 }
.infra_line{ fill: none; stroke: var(--infra-ink); stroke-width: 2; stroke-linejoin: round }
.infra_dot{ fill: var(--infra-ink); stroke: var(--infra-surface); stroke-width: 2 }
svg rect.infra_s1{ fill: var(--infra-s1) } svg rect.infra_s2{ fill: var(--infra-s2) } svg rect.infra_s3{ fill: var(--infra-s3) }
svg rect.infra_s4{ fill: var(--infra-s4) } svg rect.infra_s5{ fill: var(--infra-s5) } svg rect.infra_s6{ fill: var(--infra-s6) }

/* database */
.infra_two{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px }
@media (max-width: 760px){ .infra_two{ grid-template-columns: 1fr } }
.infra_stack{ display: grid; gap: 6px }
.infra_row{ display: grid; grid-template-columns: 150px 1fr 72px; gap: 10px; align-items: center; font-size: 13px }
.infra_row_n{ font-family: var(--infra-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.infra_row_txt{ font-family: inherit; font-size: 13px }
.infra_row_b{ height: 14px; background: var(--infra-surface-2); border-radius: 3px; overflow: hidden }
.infra_row_b i{ display: block; height: 100%; border-radius: 3px; background: var(--infra-s1) }
.infra_row_mail .infra_row_b i{ background: var(--infra-s2) }
.infra_row_b i.infra_accent{ background: var(--infra-accent) }
.infra_row_b i.infra_quiet{ background: var(--infra-line) }
.infra_row_v{ font-family: var(--infra-mono); font-size: 12px; text-align: right; color: var(--infra-ink-2) }
@media (max-width: 480px){ .infra_row{ grid-template-columns: 110px 1fr 60px } }
.infra_gauges{ display: grid; gap: 12px; align-content: start }
.infra_gauge{ background: var(--infra-surface-2); border-radius: 6px; padding: 12px 14px; display: grid; gap: 6px }
.infra_gauge_t{ font-size: 13px; color: var(--infra-ink-2) }
.infra_gauge_n{ font-size: 26px; font-weight: 700; line-height: 1 }
.infra_gauge_n small{ font-size: 13px; font-weight: 600; color: var(--infra-ink-3); margin-left: 6px }
.infra_gauge_b{ height: 6px; border-radius: 3px; background: var(--infra-line); overflow: hidden }
.infra_gauge_b i{ display: block; height: 100% }
.infra_gauge_b i.infra_hot{ background: var(--infra-serious) }
.infra_gauge_b i.infra_ok{ background: var(--infra-accent) }
.infra_gauge p{ margin: 0; font-size: 12.5px; color: var(--infra-ink-2) }

/* findings */
.infra_findings{ display: grid; gap: 10px }
.infra_finding{ background: var(--infra-surface); border: 1px solid var(--infra-line); border-left: 5px solid var(--infra-fc); border-radius: 6px; padding: 14px 18px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start }
.infra_num{ font-size: 22px; font-weight: 700; color: var(--infra-fc); line-height: 1.1; min-width: 28px }
.infra_finding h3{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px }
.infra_finding p{ margin: 6px 0 0; color: var(--infra-ink-2); max-width: 72ch; font-size: 14px }
.infra_tag{ font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: var(--infra-fs); color: var(--infra-fc) }
.infra_who{ font-size: 12px; color: var(--infra-ink-3); font-family: var(--infra-mono) }
.infra_f_crit{ --infra-fc: var(--infra-crit); --infra-fs: var(--infra-crit-soft) }
.infra_f_serious{ --infra-fc: var(--infra-serious); --infra-fs: var(--infra-serious-soft) }
.infra_f_warn{ --infra-fc: var(--infra-warn); --infra-fs: var(--infra-warn-soft) }
.infra_f_good{ --infra-fc: var(--infra-good); --infra-fs: var(--infra-good-soft) }

/* raw + foot */
.infra_details{ margin-top: 28px }
.infra_details summary{ cursor: pointer; color: var(--infra-ink-3); font-size: 12.5px }
.infra_scroll{ overflow-x: auto; margin-top: 10px }
.infra_dat{ border-collapse: collapse; width: 100%; font-size: 12.5px }
.infra_dat th, .infra_dat td{ padding: 5px 10px; border-bottom: 1px solid var(--infra-line-soft); text-align: left; white-space: nowrap }
.infra_dat td.infra_n{ font-family: var(--infra-mono); text-align: right }
.infra_rawlists{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; font-size: 12.5px }
.infra_rawlists ul{ margin: 4px 0 0; padding-left: 18px; font-family: var(--infra-mono); font-size: 11.5px; color: var(--infra-ink-2) }
.infra_foot{ margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--infra-line); font-size: 12.5px; color: var(--infra-ink-3); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between }