/* Home ports (backlog #5) and the port status board (backlog #19): js/ports.js (board), js/live-ports.js (Live activity),
   js/mobile-ports.js (phone board). Colours come from the theme tokens in app.css, so light, dark and wallpaper tones follow. */

.port-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; line-height: 1.5; padding: 0 6px; margin: 0 4px 0 0; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-muted); background: var(--surface-2); white-space: nowrap; vertical-align: middle; }
.port-badge.check { color: var(--status-risk); border-color: var(--status-risk); background: var(--status-risk-soft); }
.port-badge.ok { color: var(--status-available); border-color: var(--status-available); background: var(--status-available-soft); }
.port-badge.own { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- board panel ---------- */
.port-status { margin: 0 20px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ps-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.ps-sub { font-size: var(--fs-sm); color: var(--ink-muted); }
.ps-bad { color: var(--status-critical); }
.ps-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ps-caret { border: 0; background: none; color: var(--ink-muted); cursor: pointer; font: inherit; padding: 4px 6px; border-radius: var(--ctl-radius); }
.ps-caret:hover { background: var(--surface-3); }
.ps-alerts { list-style: none; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--status-critical-soft); }
.ps-alerts li { font-size: 13px; color: var(--ink); padding: 3px 0; }
.ps-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ink-faint); vertical-align: middle; }
.ps-dot.bad { background: var(--status-critical); }
.ps-ports { padding: 6px 14px 4px; }
.ps-port { padding: 6px 0 10px; }
.ps-port + .ps-port { border-top: 1px dashed var(--border); }
.ps-port-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; font-size: var(--fs-lg); color: var(--ink); }
.ps-port-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.ps-note { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--status-risk-soft); color: var(--ink); border: 1px solid var(--status-risk); }
.ps-note.bad { background: var(--status-critical-soft); border-color: var(--status-critical); }
.ps-link { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; margin-left: 6px; }
.ps-link:hover { text-decoration: underline; }
.ps-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.ps-table th { text-align: left; font-weight: 600; color: var(--ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ps-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: top; }
.ps-table tr:last-child td { border-bottom: 0; }
.ps-name .linklike { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); }
.ps-name .linklike:hover { text-decoration: underline; }
.ps-kind { display: inline-block; font-size: 11px; color: var(--ink-faint); margin: 0 6px; }
.ps-h { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-h.closed { color: var(--status-critical); font-weight: 700; }
.ps-h.special { color: var(--status-risk); font-weight: 600; }
.ps-h.unknown { color: var(--ink-faint); }
.ps-notes { color: var(--ink-muted); min-width: 140px; }
.ps-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-n { color: var(--ink-faint); font-size: 11px; }
.ps-empty, .ps-foot { margin: 0; padding: 6px 14px 10px; font-size: var(--fs-sm); color: var(--ink-faint); }

/* ---------- Settings › Home ports and the wizard ---------- */
.pw-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 4px 0 12px; font-size: var(--fs-sm); color: var(--ink-faint); }
.pw-steps li.on { color: var(--accent); font-weight: 700; }
.pw-steps li.done { color: var(--ink-muted); }
.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.pw-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 34px 9px 34px; border: 1px solid var(--border); border-radius: var(--ctl-radius);
  background: var(--surface); cursor: pointer; text-transform: none; letter-spacing: 0; }
.pw-tile:hover { border-color: var(--ink-faint); }
.pw-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.pw-tile input { position: absolute; left: 10px; top: 11px; width: auto; margin: 0; }
.pw-tile-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.pw-tile-sub { font-size: var(--fs-sm); color: var(--ink-muted); }
.pw-order { position: absolute; right: 8px; top: 8px; min-width: 18px; height: 18px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
  color: var(--accent-ink); background: var(--accent); }
.pw-order:empty { display: none; }
.pw-own { margin: 14px 0 0; font-size: 13px; }
.pw-own summary { cursor: pointer; color: var(--accent); }
.pw-actions { align-items: center; position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 2px; border-top: 1px solid var(--border); }
.pw-count { margin-right: auto; font-size: var(--fs-sm); color: var(--ink-muted); }
.pw-table td, .pw-table th { font-size: var(--fs-md); vertical-align: top; }
.pw-table tr.pw-off td { opacity: .55; }
.pw-hours { font-size: 12px; color: var(--ink-muted); max-width: 220px; }
.pw-rowbtns { white-space: nowrap; }
.pw-rowbtns .btn { margin: 0 4px 4px 0; }
.pw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.pw-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.pw-card-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.pw-card-sub { font-size: 12px; color: var(--ink-muted); margin: 2px 0 8px; }
.pw-first { display: inline-block; color: var(--accent-ink); background: var(--accent); margin-right: 6px; vertical-align: middle; }
.pw-defaults { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; font-size: 13px; color: var(--ink); }
.pw-defaults p { margin: 4px 0 8px; }
.pw-defaults .check-inline { margin: 0 14px 6px 0; }
.pw-def-more { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pw-port3 { margin-bottom: 8px; }
.pw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 18px; }
.pw-cols h4 { margin: 4px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.pw-check { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.pw-check input { width: auto; margin: 3px 0 0; }
.pw-check .hint, .pw-cred .hint { display: block; }
.pw-cred { padding: 4px 0 6px; font-size: 13px; color: var(--ink); }
.pw-cov { display: block; font-size: 12px; margin-top: 2px; }
.pw-cov.warn { color: var(--status-risk); }
.pw-cov.ok { color: var(--status-available); }
.pw-list { list-style: none; padding: 0; margin: 0; }
.pw-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink); }
.pw-list li .btn { margin-left: 6px; }
.pw-links { font-size: 13px; line-height: 1.8; }
.pw-hours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 10px; margin-bottom: 10px; }
.pw-hours-grid label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
.pw-rows { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.pw-rows th { text-align: left; font-size: 11px; color: var(--ink-muted); font-weight: 600; padding: 2px 4px; }
.pw-rows td { padding: 2px 4px; vertical-align: top; }
.pw-rows input:not([type="checkbox"]), .pw-rows select, .pw-rows textarea { width: 100%; min-width: 90px; }

/* ---------- Live activity window ---------- */
.lvp { margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 14px; }
.lvp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lvp-head h2 { margin: 0; font-size: 15px; color: var(--ink); }
.lvp-head span { font-size: var(--fs-sm); color: var(--ink-muted); }
.lvp-alerts { list-style: none; margin: 8px 0 0; padding: 6px 10px; border-radius: var(--ctl-radius); background: var(--status-critical-soft); font-size: 13px; color: var(--ink); }
.lvp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; }
.lvp-port h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.lvp-sites { display: flex; flex-wrap: wrap; gap: 6px; }
.lvp-site { display: flex; flex-direction: column; min-width: 120px; flex: 1 1 140px; padding: 6px 8px; border-radius: var(--ctl-radius); border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--ink-muted); }
.lvp-site b { font-size: var(--fs-md); color: var(--ink); }
.lvp-site .h { font-variant-numeric: tabular-nums; color: var(--ink); }
.lvp-site.closed { border-color: var(--status-critical); background: var(--status-critical-soft); }
.lvp-site.closed .h { color: var(--status-critical); font-weight: 700; }
.lvp-site.special { border-color: var(--status-risk); }
.lvp-site.special .h { color: var(--status-risk); font-weight: 600; }
.live-page.big .lvp-site { font-size: 15px; }
.live-page.big .lvp-site b { font-size: 16px; }

/* ---------- phone board ---------- */
.mp-card { margin: 10px 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--ink); }
.mp-card.bad { border-color: var(--status-critical); background: var(--status-critical-soft); }
.mp-card h3 { margin: 0 0 4px; font-size: 13px; }
.mp-card ul { list-style: none; margin: 0; padding: 0; }
.mp-card li { padding: 3px 0; }
.mp-card .linklike { font-size: 13px; }
.mp-sub { color: var(--ink-muted); font-size: 12px; }

@media (max-width: 640px) {
  .port-status { margin: 0 8px 10px; }
  .ps-tools { margin-left: 0; }
  .pw-rowbtns { white-space: normal; }
}