/* The website page (website.js): built from the app's own pieces (section-header, segmented, table-card,
   status-badge) so it sits with the rest, in both themes. */
#view-website { display: none; }
#view-website.active { display: grid; gap: 12px; min-width: 0; }
#view-website > * { min-width: 0; }
#view-website .section-header { margin-bottom: 0; }
#view-website .section-header p { max-width: 80ch; line-height: 1.5; }
.site-head-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.site-conn { display: flex; align-items: center; gap: 8px; min-height: 20px; color: var(--muted); font-size: 12.5px; }
.site-conn:empty { display: none; }
.site-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.site-dot.is-bad { background: var(--red); }
.site-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius-md, 16px); background: var(--panel); color: var(--text); font-size: 13.5px; }
.site-setup span { color: var(--muted); }
.site-tabs { flex-wrap: wrap; justify-self: start; max-width: 100%; }
.site-tabs b { margin-left: 4px; color: var(--red); font-variant-numeric: tabular-nums; }
.site-tabs b:empty { display: none; }
.site-body { min-width: 0; }
.site-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.site-bar .search-box { flex: 1 1 240px; min-width: 0; }
.site-bar .segmented { flex-wrap: wrap; }
.site-bar .segmented b { margin-left: 3px; font-variant-numeric: tabular-nums; }
.site-note { color: var(--muted); font-size: 12.5px; }
#siteBody .site-table { width: 100%; min-width: 0; }
#siteBody .site-table th, #siteBody .site-table td { text-align: left; vertical-align: top; }
#siteBody .site-table .money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#siteBody .site-table tr.is-hidden td { color: var(--muted); }
.site-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.site-when .status-badge { margin-top: 4px; }
.site-what { max-width: 52ch; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.site-what div + div { margin-top: 2px; }
.site-st { min-height: 32px; border-radius: 999px; padding: 0 10px; font-weight: 600; font-size: 12.5px; }
.site-st.is-debt { color: var(--red); background: var(--red-bg); border-color: transparent; }
.site-st.is-due { color: var(--amber); background: var(--amber-bg); border-color: transparent; }
.site-st.is-paid { color: var(--green); background: var(--green-bg); border-color: transparent; }
#siteBody .site-acts { text-align: right; white-space: nowrap; }
.site-acts-in { display: inline-flex; align-items: center; gap: 4px; }
.site-acts-in .row-action { margin: 0; flex: none; }
.site-sub { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.site-sub:hover { border-color: var(--primary); }
.site-sub .icon { width: 14px; height: 14px; flex: none; }
.site-fail { display: grid; gap: 6px; justify-items: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md, 16px); background: var(--panel); }
.site-fail span { color: var(--muted); font-size: 13px; }

.site-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md, 16px); background: var(--panel); }
.site-card h3 { margin: 6px 0 0; font-size: 14px; }
.site-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 12px; }
.site-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.site-form input, .site-form select { min-height: 36px; }
.site-form textarea { resize: vertical; min-height: 56px; }
.site-form .site-wide { grid-column: 1 / -1; }
.site-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-checks label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
.site-form-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-card > .site-form-acts { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px -16px; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-md, 16px) var(--radius-md, 16px); background: var(--panel); }
.site-form-wrap { padding: 14px; border-bottom: 1px solid var(--line); background: var(--panel-muted); }
.site-form-row td { background: var(--panel-muted); }
.site-stats { display: grid; gap: 8px; }
.site-stat { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.site-stat input { min-height: 36px; min-width: 0; }
.site-card > .btn { justify-self: start; }

.site-conn-modal { width: min(640px, calc(100vw - 32px)); }
.site-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.site-inline input { flex: 1 1 260px; min-width: 0; min-height: 36px; }
.site-key { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.site-steps { display: grid; gap: 12px; margin: 14px 0 4px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.site-steps code { padding: 1px 6px; border-radius: 6px; background: var(--panel-muted); font-size: 12.5px; }
.site-check { font-size: 13px; color: var(--muted); }
.site-check.is-ok { color: var(--green); font-weight: 600; }
.site-check.is-bad { color: var(--red); }

@media (max-width: 560px) {
  .site-bar .search-box { flex: none; }   /* the toolbar turns into a column there: no tall box */
}
@media (max-width: 760px) {
  #siteBody .site-table thead { display: none; }
  #siteBody .site-table, #siteBody .site-table tbody, #siteBody .site-table tr, #siteBody .site-table td { display: block; width: 100%; }
  #siteBody .site-table tr { padding: 10px 12px; border-top: 1px solid var(--line); }
  #siteBody .site-table td { border: 0; padding: 3px 0; }
  #siteBody .site-table .money, #siteBody .site-acts { text-align: left; }
  .site-what { max-width: none; }
}