/* Parts of overlay cards: lists, details, action buttons, /help. */
.list { list-style: none; margin: 0; padding: 0; overflow: auto; max-height: 50vh; }
.list li .label { flex: 1; }
.list li .check { color: var(--accent); }
.list li .swatch { flex: none; align-self: center; width: 56px; height: 24px; }
.list li .remove { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 6px; }
.list li .remove:hover, .list li .remove:focus-visible { color: var(--danger); background: var(--surface); }
#card pre.detail {
  margin: 0;
  padding: 12px 14px;
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 13px/1.5 var(--mono);
  background: var(--surface-2);
  border-radius: 10px;
}
#card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
#card dt { color: var(--muted); }
#card dd { margin: 0; word-break: break-all; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.actions button {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}
.actions button:hover { background: var(--surface-2); }
.actions button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.actions button.primary:hover { filter: brightness(1.05); }
.actions .action-link { margin-right: auto; align-self: center; color: var(--accent); text-decoration: underline; cursor: pointer; }
#card:focus { outline: none; }
#card.wide { width: min(1240px, 100%); }
#card .help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; padding: 8px 4px; overflow-y: auto; min-height: 0; align-content: start; }
#card .help section { min-width: 0; }
#card .help h3 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
#card .help dl { gap: 12px 18px; }
#card .help dd { word-break: normal; }
#card .help .keys-sec { grid-column: 1 / -1; }
#card .help .keys { grid-template-columns: auto 1fr auto 1fr; gap: 14px 24px; }
/* /model-tools: one column, group by group, a switch in front of each tool. */
#card.model-tools-card { width: min(640px, 100%); }
#card .model-tools { display: flex; flex-direction: column; gap: 28px; padding: 8px 4px; overflow-y: auto; min-height: 0; }
#card .model-tools h3 { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
#card .model-tools ul { list-style: none; margin: 0; padding: 0; }
#card .model-tools li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
#card .model-tools li > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#card .model-tools code { font-size: 13px; }
#card .model-tools .note { margin: 0; }
#card .model-tools .danger { color: var(--danger); }
#card .switch { appearance: none; flex: none; position: relative; width: 34px; height: 20px; margin: 1px 0 0; border-radius: 10px; background: var(--border); cursor: pointer; transition: background .15s; }
#card .switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
#card .switch:checked { background: var(--accent); }
#card .switch:checked::before { transform: translateX(14px); }
#card .switch:indeterminate { background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
#card .switch:indeterminate::before { transform: translateX(7px); }
#card .model-tools h3 { display: flex; align-items: center; gap: 14px; }
#card .switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1000px) {
  #card .help { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  #card .help { grid-template-columns: 1fr; }
  #card .help .keys { grid-template-columns: auto 1fr; }
}

/* /status: sections of rows, spaced out. */
#card.status-card { width: min(720px, 100%); gap: 24px; padding: 32px 36px; }
#card .status { display: grid; gap: 28px; overflow-y: auto; min-height: 0; }
#card .status h3 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
#card .status dl { grid-template-columns: 140px 1fr; gap: 12px 24px; font-size: 14px; line-height: 1.4; }
#card .status dd { word-break: break-word; }
@media (max-width: 560px) {
  #card.status-card { padding: 22px 20px; }
  #card .status dl { grid-template-columns: 1fr; gap: 2px; }
  #card .status dd { margin-bottom: 10px; }
}

/* Icon-only buttons: the show-password eye in a field, the reload and folder buttons of /connectors. */
#card .icon-btn { display: inline-flex; padding: 2px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; }
#card .icon-btn:hover:not(:disabled) { color: var(--accent); }
#card .icon-btn:focus-visible { color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
#card .icon-btn:disabled { opacity: 0.4; cursor: default; }
#card .conn-where { margin: 0; } /* the path labels the list below it, so it hugs the list */
.icon-btns { display: flex; gap: 6px; }
#card .icon-btns .icon-btn { padding: 6px; }
#card .icon-btns .icon-btn:hover:not(:disabled) { background: var(--surface-2); }
/* An instant tooltip for an icon-only button: the text in data-tip sits above the button, left-aligned, so a bottom row never clips it. */
#card .icon-btn[data-tip] { position: relative; }
#card .icon-btn[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--fg); font-size: 12px; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; z-index: 1; }
#card .icon-btn[data-tip]:hover::after, #card .icon-btn[data-tip]:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #card .icon-btn[data-tip]::after, #card .switch, #card .switch::before { transition: none; } }
/* The eye sits inside the field's right edge; the input keeps room for it. */
.pw-wrap { position: relative; display: block; }
#card .pw-wrap input.text { display: block; padding-right: 40px; }
#card .pw-wrap .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 4px; }