/* instances screens — see design/canvas/Console-Instances.dc.html, Console-NewInstance.dc.html
   and design/STYLE.md. Shared components are in /app.css. Classes are prefixed il- (list) and ni- (new). */

/* ---------- shared bits ---------- */
.il-ws { color: var(--muted); font-size: 14px; }
.il-link { font-weight: 600; white-space: nowrap; }
.il-amt { font-family: var(--mono); font-size: 13px; color: var(--text); }
.il-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.il-none { color: var(--muted); }
.il-bad { color: var(--bad); font-weight: 500; }
.il-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--faint); }
.il-dot.ok { background: var(--ok); }
.il-dot.info { background: var(--info); }
.il-dot.bad { background: var(--bad); }
.il-c { display: inline-flex; align-items: center; gap: 6px; }
.il-sep { color: var(--faint); }

/* ---------- list ---------- */
.il-wrap { display: flex; flex-direction: column; gap: 16px; }
.il-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.il-counts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text-2); }
.il-runway { margin: 0; font-size: 13px; color: var(--muted); }
.il-runway a { font-weight: 500; }

.il-tablecard { padding: 0; overflow-x: auto; }
.il-table { min-width: 900px; }
.il-table th:first-child, .il-table td:first-child { padding-left: 20px; }
.il-table th:last-child, .il-table td:last-child { padding-right: 20px; }
.il-table td { padding-top: 12px; padding-bottom: 12px; }
.il-table .c-name a { display: block; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.il-table .c-name a:hover { color: var(--accent-text); text-decoration: none; }
.il-id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.il-table .c-plan, .il-table .c-active { color: var(--text-2); white-space: nowrap; }
.il-table .c-cost { white-space: nowrap; }
.il-table tr.click:hover .badge { background: var(--bg); }
.il-host { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.il-host.plain { color: var(--text-2); }
.il-pill-row { display: flex; margin-top: 4px; }
.il-port { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--raised); color: var(--text-2); white-space: nowrap; }
.il-table tr.click:hover .il-port { background: var(--bg); }
.il-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
button.il-more { width: 36px; min-height: 36px; color: var(--text-2); }
button.il-more[aria-expanded="true"] { background: var(--raised); color: var(--text); }

.il-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--muted); }

/* "More actions" menu (appended to body, fixed under its button) */
.il-menu { position: fixed; z-index: 30; min-width: 180px; padding: 6px; background: var(--panel); border: 1px solid var(--line-3); border-radius: 10px; box-shadow: 0 24px 64px var(--shadow); display: flex; flex-direction: column; }
.il-menu a, .il-menu button { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: 500 14px/1 var(--sans); text-align: left; }
.il-menu a:focus-visible, .il-menu button:focus-visible { outline-offset: -2px; }
.il-menu a:hover, .il-menu button:hover, .il-menu a:focus-visible, .il-menu button:focus-visible { background: var(--raised); color: var(--text); text-decoration: none; }
.il-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; width: calc(100% - 4px); }

/* empty: first run */
.il-first { background: var(--panel); border: 1px solid var(--line-card); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 28px; max-width: 880px; }
.il-first-head { display: flex; flex-direction: column; gap: 8px; }
.il-first-head h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.il-first-head p.body { margin: 0; max-width: 600px; }
.il-path { color: var(--text); }
.il-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.il-steps li { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-3); padding-top: 16px; }
.il-steps .n { font-family: var(--mono); font-size: 13px; color: var(--accent-text); }
.il-steps .t { font-weight: 600; color: var(--text); }
.il-steps .d { color: var(--body); }
.il-first-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; border-top: 1px solid var(--line); padding-top: 24px; }
.il-planline { margin: 0; font-size: 13px; color: var(--muted); }
.il-planline .il-amt { color: var(--text-2); }

/* phone: rows become stacked cards */
@media (max-width: 720px) {
  .il-tablecard { overflow: visible; }
  .il-table { min-width: 0; }
  .il-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .il-table, .il-table tbody { display: block; }
  .il-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .il-table tbody tr:last-child { border-bottom: 0; }
  .il-table td, .il-table th:first-child, .il-table td:first-child, .il-table td:last-child { display: block; height: auto; padding: 0; border: 0; }
  .il-table tr.click:hover td { background: none; }
  .il-table tr.click:hover { background: var(--raised); }
  .il-table .c-name { grid-column: 1; grid-row: 1; min-width: 0; }
  .il-table .c-act { grid-column: 2; grid-row: 1; }
  .il-table td[data-label] { grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 0 8px; white-space: normal; }
  .il-table td[data-label]::before { content: attr(data-label); font-size: 13px; color: var(--muted); }
  .il-table td[data-label] .il-sub { margin-top: 2px; }
  .il-table .c-cost .il-sub { display: inline; margin-left: 8px; }
  .il-table tr { gap: 8px 12px; }
  .il-host { white-space: normal; overflow-wrap: anywhere; }
  .il-acts button.sm { min-height: 44px; }
  button.il-more { width: 44px; min-height: 44px; }
  .il-menu a, .il-menu button { min-height: 44px; }
}

/* ---------- new instance ---------- */
.ni { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
#ni-banner:empty { display: none; }
.ni-bad-t { color: var(--bad); font-weight: 600; }
.ni-card { padding: 0; border-radius: var(--r-lg); display: flex; flex-direction: column; }
.ni-sec { padding: 24px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); margin: 0; min-width: 0; }
.ni-sec[hidden] { display: none; }
#ni-name { width: 100%; font-family: var(--mono); }
.ni-help { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.ni-help .hint { margin: 0; }
.ni-count { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.ni-plans { border: 0; border-bottom: 1px solid var(--line); gap: 12px; }
.ni-plans legend { padding: 0; float: left; width: 100%; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--text-2); }
label.ni-plan { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-card); cursor: pointer; font-weight: 400; font-size: 14px; color: var(--text-2); }
label.ni-plan:hover { border-color: var(--line-3); }
label.ni-plan:has(input:checked) { background: var(--raised); border-color: var(--accent-text); }
label.ni-plan:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ni-plan input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.ni-plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ni-plan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ni-plan-name { font: 600 18px/1.3 var(--display); color: var(--text); }
.ni-specs { font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.ni-rates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text-2); }
.ni-rate { white-space: nowrap; }
.ni-idle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ni-idle svg { color: var(--info); flex: none; }

#ni-bill { gap: 12px; }
.ni-bill-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.ni-kv { margin: 0; display: flex; flex-direction: column; }
.ni-kv .k { font-size: 13px; font-weight: 500; color: var(--text-2); }
.ni-kv.end { align-items: flex-end; }
.ni-kv.end .k { font-weight: 400; color: var(--muted); }
.ni-kv .v { font-weight: 600; color: var(--text); }
.ni-bal { font: 500 15px var(--mono); color: var(--text); }
.ni-bal.bad { color: var(--bad); }
.ni-ok, .ni-no { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ni-ok { color: var(--ok-text); }
.ni-ok svg { color: var(--ok); flex: none; }
.ni-no { color: var(--bad); }
.ni-no svg { flex: none; }

.ni-h3 { margin: 0 0 6px; font: 500 13px var(--sans); color: var(--text-2); }
.ni-get { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ni-get li { display: flex; gap: 12px; align-items: flex-start; color: var(--body); }
.ni-get li svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.ni-get b { font-weight: 500; }
.ni-get .mono { color: var(--text); }

.ni-foot { padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.ni-foot-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ni-note { margin: 0; font-size: 13px; color: var(--muted); }
.ni-err { margin: 0; }
.ni-foot-text .err-msg { margin: 0; }
.ni-btns { display: flex; flex-wrap: wrap; gap: 12px; }
#ni-create:disabled { opacity: 1; background: var(--raised); border-color: var(--line-2); color: var(--faint); }

@media (max-width: 860px) {
  .ni-sec, .ni-plans { padding: 20px 16px; }
  .ni-foot { padding: 16px; }
  label.ni-plan { padding: 16px; }
  .ni-btns { width: 100%; }
  .ni-btns > * { flex: 1 1 0; min-height: 44px; }
}