/* Modal overlay — blurred backdrop + themed card.
 * Used by every dialog in the panel (adding an LLM provider, the confirms, …). */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: modal-fade-in .18s ease;
}
@keyframes modal-fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

.modal-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 460px;
  width: 92%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  transform: scale(.98);
  animation: modal-pop-in .2s ease forwards;
}
@keyframes modal-pop-in {
  to { transform: scale(1) }
}
/* A dialog with more to read than to fill in (the extension consent card). */
.modal-card--wide { max-width: 640px; }

.modal-head {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.1rem 2.6rem .7rem 1.2rem;
  border-bottom: 1px solid var(--outline-subtle);
}
.modal-head .title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
/* Sits a touch in from the corner so it reads as a button placed ON the
 * card rather than crammed into the very corner. */
.modal-close {
  position: absolute;
  top: .65rem;
  right: .7rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  transition: color .15s, background .15s;
}
.modal-close:hover {
  color: var(--text);
  background: var(--surface-hover-strong);
  opacity: 1;
}
/* The arrow back to the previous step of a modal that walks through steps
 * (openModal's setBack); the title moves in to leave it room. */
.modal-head.has-back { padding-left: 2.6rem }
.modal-back {
  position: absolute;
  top: .65rem;
  left: .7rem;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.modal-back svg { width: 16px; height: 16px; display: block }
.modal-back:hover {
  color: var(--text);
  background: var(--surface-hover-strong);
}

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .7rem 1.2rem;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.modal-body::-webkit-scrollbar { width: 8px }
.modal-body::-webkit-scrollbar-track { background: transparent }
.modal-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; transition: background .15s }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover) }

.modal-foot {
  flex-shrink: 0;
  padding: .65rem 1.2rem .9rem;
  border-top: 1px solid var(--outline-subtle);
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
}
.modal-foot a {
  color: var(--tier-mid);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* First-visit welcome banner — shown when the panel auto-opens this modal
 * because the agent was deployed with no included credit and the user
 * hasn't added a key yet. Lavender accent (matches panel highlight) so it
 * reads as a friendly nudge, not an error. */
.byok-first-time {
  background: linear-gradient(180deg, color-mix(in srgb, var(--coding) 10%, transparent), color-mix(in srgb, var(--coding) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--coding) 35%, transparent);
  border-radius: 12px;
  padding: .85rem 1rem;
  margin: 0 0 1rem;
}
.byok-first-time-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .35rem;
}
.byok-first-time p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* =========================================================================
   Add LLM provider — two steps in one card. The choice: three rows, each a
   way in (a ChatGPT subscription, a Claude subscription, an API key), the
   same quiet list as Settings → LLM providers: hairlines, the brand mark
   leading, the description under the title, the state line (signed in as
   whom) under that, a muted call on the right. Then the chosen way on its
   own: the card empties, the head takes the option's title and the arrow
   back, the option's mark and lead line head the view and its form follows.
   ========================================================================= */
.add-options {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--outline-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.add-option + .add-option { border-top: 1px solid var(--outline-subtle) }
.add-option {
  --ca-accent: var(--byok);
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem .95rem;
  background: var(--surface-subtle);
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
}
.add-option:hover { background: var(--surface-hover) }
.add-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--focus-outline);
}
.add-option.busy { opacity: .6; cursor: progress }
/* The CLI isn't on the server yet: nothing to start. */
.add-option.is-disabled { cursor: default; opacity: .7 }
.add-option.is-disabled:hover { background: var(--surface-subtle) }
/* The brand mark (Anthropic / OpenAI) leads, in its brand hue; the key row
 * keeps a glyph. */
.add-option-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ca-accent);
  font-size: .95rem;
}
.add-option-icon svg { width: 20px; height: 20px; display: block }
.add-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.add-option-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}
.add-option-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.4;
}
/* Signed in as whom — success green, the one place green stands for. */
.add-option-state {
  font-size: .76rem;
  color: var(--success-status);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.add-option.is-disabled .add-option-state { color: var(--muted); font-style: italic }
.add-option-state[hidden] { display: none }
.add-option-cta {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.add-option-cta::after { content: ' ›' }
.add-option:hover .add-option-cta { color: var(--text) }
.add-option-cta[hidden] { display: none }
@media (max-width: 560px) {
  .add-option { flex-wrap: wrap; row-gap: .35rem }
  .add-option-cta { flex-basis: 100%; padding-left: calc(28px + .85rem) }
}

/* The chosen way on its own: the mark and the lead line (the description,
 * or the connected accounts) at the top, the form under, no chrome. */
.add-view {
  --ca-accent: var(--byok);
  animation: byok-form-fade .22s ease;
}
.add-view-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .35rem 0 .1rem;
}
.add-view-head .add-option-icon { margin-top: -.2rem }
.add-view-desc,
.add-view-state {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}
.add-view-state { color: var(--success-status); overflow-wrap: anywhere }
.byok-add-form label {
  margin-top: .65rem;
}
.byok-add-form label:first-of-type {
  margin-top: .55rem;
}
.byok-add-form .modal-actions {
  margin-top: .95rem;
}
@keyframes byok-form-fade {
  from { opacity: 0; transform: translateY(-3px) }
  to   { opacity: 1; transform: none }
}

/* Forms inside modal --------------------------------------------------- */
.modal-body label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: .75rem 0 .3rem;
  font-weight: 600;
}
.modal-body .mb-hint {
  font-size: .72rem;
  color: var(--muted);
  margin: .5rem 0 .25rem;
  line-height: 1.5;
}
.modal-body .modal-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 680px) {
  .modal-card { max-height: 92vh; border-radius: 12px }
  .modal-head { padding: .85rem 2.6rem .55rem .9rem }
  .modal-head.has-back { padding-left: 2.4rem }
  .modal-body { padding: .55rem .9rem }
  .modal-foot { padding: .55rem .9rem .8rem }
  .modal-close { top: .55rem; right: .6rem }
  .modal-back { top: .55rem; left: .5rem }
}

/* Login flow modal -------------------------------------------------------- */
.ca-login-modal { font-size: .9rem; line-height: 1.5 }
.ca-login-modal p { margin: .35rem 0 }
.ca-login-modal .ca-flow-url {
  display: inline-block;
  word-break: break-all;
  padding: .4rem .55rem;
  border-radius: 7px;
  background: var(--surface-hover);
  border: 1px solid var(--outline-row);
  color: var(--accent);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
}
.ca-login-modal .ca-flow-url:hover {
  background: var(--surface-hover-strong);
  border-color: var(--accent);
}
.ca-login-modal .ca-copy {
  background: transparent;
  border: 1px solid var(--outline-hover);
  color: var(--muted);
  padding: .35rem .9rem;
  border-radius: 6px;
  font-size: .78rem;
  cursor: pointer;
}
.ca-login-modal .ca-copy:hover { color: var(--text); border-color: var(--accent) }

.ca-login-modal .ca-flow-url-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .35rem 0;
}
.ca-login-modal .ca-flow-url-row .ca-flow-url { flex: 1 1 auto; min-width: 0 }
.ca-login-modal .ca-flow-url-row .ca-copy { flex: 0 0 auto }

.ca-flow-code {
  margin-top: .9rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  text-align: left;
}
.ca-flow-code .ca-flow-code-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.ca-flow-code code {
  background: var(--surface-hover);
  border-radius: 5px;
  padding: .2rem .55rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  cursor: pointer;
  user-select: all;
}
.ca-flow-code code:hover { background: var(--surface-hover-strong) }
.ca-login-modal .ca-flow-poll-hint { margin-top: 1.4rem }
.ca-code-form {
  margin-top: .8rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ca-code-form label {
  font-size: .9rem;
  color: var(--text);
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.ca-code-form .ca-code-input-row {
  display: flex;
  gap: .45rem;
  align-items: center;
}
.ca-code-form .ca-paste {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ca-code-form input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface-control);
  border: 1px solid var(--outline-row);
  border-radius: 7px;
  padding: .5rem .6rem;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ca-code-form input:focus { border-color: var(--accent); outline: none }
.ca-code-form input:disabled { opacity: .55; cursor: progress }
.ca-code-form .ca-code-status {
  min-height: 1.05rem;
  font-size: .78rem;
}
.ca-code-form .ca-code-status.err { color: var(--danger-action) }
.ca-flow-err  { color: var(--danger-action) }
.ca-flow-ok   { color: var(--success-status) }
/* Raw technical reason under the friendly headline — muted, monospace, only
   shown when it adds detail the headline didn't. */
.ca-flow-err-detail {
  margin-top: .3rem;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

/* --- Approval modal — dangerous-command prompts from Hermes -------- */
/* approval_modal.js renders these classes inside a stock openModal()
   card, so we only style the inner pieces. */

.approval-command {
  background: color-mix(in srgb, var(--err) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--err) 25%, transparent);
  border-radius: 8px;
  padding: .7rem .8rem;
  margin: .6rem 0 .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* The action row + danger/affirm buttons + warning body are shared STYLING
   roles: the approval modal owns the `.approval-*` names, while generic confirm
   dialogs (delete file/key, remove integration, disconnect bot, …) use the
   neutral `.modal-confirm-*` / `.modal-btn-*` aliases below. They were one set
   of names until the shared `.approval-deny` made the SSH-key remove journey
   flaky (a background approval-poll modal and a confirm dialog could not be told
   apart by a selector) — decoupling the names keeps the two surfaces from ever
   cross-targeting while the styling stays byte-identical. */
.approval-actions,
.modal-confirm-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: .4rem;
}

.approval-deny,
.approval-allow,
.modal-btn-danger,
.modal-btn-affirm {
  padding: .55rem 1.05rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 500;
  cursor: pointer;
}

.approval-deny,
.modal-btn-danger {
  background: color-mix(in srgb, var(--err) 18%, transparent);
  border-color: color-mix(in srgb, var(--err) 32%, transparent);
  color: var(--dialog-danger);
}
/* Override the global button:hover (green accent) so the red Cancel
   button stays red on hover instead of flipping to a mismatched green
   ring. The base rule only set background; border-color and text color
   leaked from base.css button:hover, hence the explicit re-pin. */
.approval-deny:hover,
.modal-btn-danger:hover {
  background: color-mix(in srgb, var(--err) 28%, transparent);
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  color: var(--dialog-danger);
}

.approval-allow,
.modal-btn-affirm {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--dialog-affirm);
}
.approval-allow:hover,
.modal-btn-affirm:hover {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--dialog-affirm);
}

/* AXP extension consent card (install_extension_flow.js → _askConsent).
   A label/value list of what the publisher declared — network, files, root,
   update policy, sandbox — followed by the Allow / Cancel row. Rows are
   tagged .warn / .danger so the sandbox verdict and the riskiest asks read
   at a glance without the user parsing prose. */
.axp-consent-desc {
  margin: -.2rem 0 .6rem;
  color: var(--muted);
  font-size: .9rem;
}
.axp-consent-list {
  list-style: none;
  margin: 0 0 .7rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.axp-consent-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 28%) 1fr;
  gap: .6rem;
  padding: .5rem .75rem;
  font-size: .92rem;
  line-height: 1.4;
}
.axp-consent-row + .axp-consent-row {
  border-top: 1px solid var(--border);
}
.axp-consent-row .k {
  color: var(--muted);
  font-weight: 500;
}
.axp-consent-row .v {
  color: var(--text);
  word-break: break-word;
}
.axp-consent-row .v code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
}
.axp-consent-row .v small {
  color: var(--muted);
}
.axp-consent-row.warn .v   { color: var(--warn); }
.axp-consent-row.danger .v { color: var(--dialog-danger); }
.axp-consent-runtime {
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: .85rem;
}
/* The card opens short (install_extension_flow.js → _managedConsentBody): the
   lead, the full source URL on a line of its own, the publisher, a signature
   badge, a quiet note when root or a foreign origin is asked for, and every
   declared row folded behind "See all details", whose summary turns into
   "Hide details" once open.
   The URL's link icon, the badge's shield and the note's triangle sit on one
   vertical line, and the text after them lines up too: the URL line and the
   note are indented by the pill's own padding and border, and their icons
   and gaps match the badge's. */
.axp-consent-source {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.axp-consent-source:hover { text-decoration: underline; }
.axp-consent-from {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: -.55rem 0 .9rem;
  padding-inline-start: calc(.5rem + 1px);
  font-size: .88rem;
  line-height: 1.45;
}
.axp-consent-from svg { width: 16px; height: 16px; flex: none; margin-top: .1rem; color: var(--muted); }
.axp-consent-from .axp-consent-source { min-width: 0; }
.axp-consent-from code { font-size: inherit; }
.axp-consent-publisher {
  margin: -.5rem 0 .8rem;
  color: var(--muted);
  font-size: .9rem;
}
.axp-consent-publisher strong { color: var(--text); font-weight: 600; }
.axp-consent-signature {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  margin: 0 0 .9rem;
  padding: .25rem .7rem .25rem .5rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: .85rem;
  line-height: 1.35;
}
.axp-consent-signature svg { width: 16px; height: 16px; flex: none; }
.axp-consent-signature span { display: inline-block; }
.axp-consent-signature span::first-letter { text-transform: uppercase; }
.axp-consent-signature.ok   { color: var(--dialog-affirm); }
.axp-consent-signature.warn { color: var(--warn); }
.axp-consent-note {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: -.3rem 0 .9rem;
  padding-inline-start: calc(.5rem + 1px);
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}
.axp-consent-note svg { width: 16px; height: 16px; flex: none; margin-top: .12rem; }
.axp-consent-details { margin: 0 0 .9rem; }
.axp-consent-details > summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .15rem 0;
  color: var(--accent);
  font-size: .9rem;
  cursor: pointer;
  list-style: none;
}
.axp-consent-details > summary::-webkit-details-marker { display: none; }
/* The chevron is an SVG in the summary. The ▸ glyph settings.css gives every
   other <details> stays off: same selector weight, and this file loads later
   (index.html). */
details.axp-consent-details > summary::before { content: none; }
.axp-fold-chevron {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform .15s ease;
}
.axp-consent-details[open] > summary { margin-bottom: .6rem; }
.axp-consent-details[open] > summary .axp-fold-chevron { transform: rotate(90deg); }
.axp-consent-details[open] > summary .axp-fold-closed,
.axp-consent-details:not([open]) > summary .axp-fold-open { display: none; }
.axp-consent-details .axp-consent-runtime { margin-bottom: 0; }
/* What would make the card long folds away; nothing is dropped. A host list
   past its first entries ("5 more"), a long reason past its start ("Read
   more") and each permission's own reason under its row ("Why?") open in
   place, and an open fold's summary says "Show less". */
.axp-consent-fold,
.axp-consent-long,
.axp-consent-why { margin-top: .2rem; }
.axp-consent-fold > summary,
.axp-consent-long > summary,
.axp-consent-why > summary {
  width: fit-content;
  cursor: pointer;
  list-style: none;
}
.axp-consent-fold > summary::-webkit-details-marker,
.axp-consent-long > summary::-webkit-details-marker,
.axp-consent-why > summary::-webkit-details-marker { display: none; }
.axp-consent-fold > summary,
.axp-consent-why > summary,
.axp-consent-long .axp-fold-more,
.axp-consent-long .axp-fold-open {
  color: var(--accent);
  font-size: .85rem;
}
.axp-consent-list details[open] > summary .axp-fold-closed,
.axp-consent-list details:not([open]) > summary .axp-fold-open { display: none; }
.axp-consent-fold > div { margin-top: .2rem; }
.axp-consent-long > p,
.axp-consent-why > p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

/* Body copy inside warning-style modals (approval prompts AND generic confirm
   dialogs). Larger and more legible than .mb-hint, which is intentionally tiny
   for inline form hints. */
.modal-body .approval-warn-body,
.modal-body .modal-confirm-body {
  margin: .25rem 0 .9rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text);
}
.modal-body .approval-warn-body code,
.modal-body .modal-confirm-body code {
  font-size: .88rem;
}

.approval-always-row {
  display: flex;
  justify-content: center;
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid var(--outline-row);
}

.approval-always {
  background: transparent;
  border: 1px dashed var(--outline-hover);
  border-radius: 6px;
  padding: .4rem .8rem;
  font-size: .78rem;
  color: var(--muted);
  cursor: pointer;
}
.approval-always:hover {
  color: var(--text);
  border-color: var(--outline-hover);
}

/* About — the agent's name opens it (about.js): the mint mark, the name, one
 * line on what the agent is, three ways to read more, and a quiet foot with
 * the news channel and the address to write to. Centred and quiet:
 * no title line, the ✕ alone in its corner, a faint wash of the accent behind
 * the mark. */
.modal-card--about {
  max-width: 340px;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--accent-softer), transparent 72%),
    var(--bg2);
}
.modal-card--about .modal-head {
  min-height: 2.5rem;
  padding: 0;
  border-bottom: 0;
}
.modal-card--about .modal-body { padding: 0 1.3rem 1.3rem }
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about-mark {
  width: 64px;
  height: 64px;
  margin-bottom: .8rem;
  animation: about-mark-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes about-mark-in {
  from { opacity: 0; transform: translateY(4px) scale(.92) }
  to   { opacity: 1; transform: none }
}
.about-name {
  max-width: 100%;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}
.about-number {
  margin-top: .1rem;
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.about-lead {
  max-width: 17rem;
  margin: .65rem 0 1.15rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--muted);
}
/* The links: the same quiet list as the add-provider choice — hairlines, the
 * mark leading, the address under the title, an arrow out on the far side. */
.about-links {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--outline-subtle);
  border-radius: 12px;
  overflow: hidden;
  text-align: start;
}
.about-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  background: var(--surface-subtle);
  color: var(--text);
  transition: background .15s;
}
.about-link + .about-link { border-top: 1px solid var(--outline-subtle) }
.about-link:hover { background: var(--surface-hover); text-decoration: none }
.about-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--focus-outline);
}
.about-link-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: color .15s;
}
.about-link-icon svg { width: 20px; height: 20px; display: block }
.about-link:hover .about-link-icon { color: var(--accent) }
.about-link-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}
.about-link-title {
  font-size: .9rem;
  font-weight: 600;
}
.about-link-host {
  font-size: .76rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.about-link-out {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted2);
  transition: color .15s, transform .15s;
}
.about-link:hover .about-link-out { color: var(--text); transform: translate(1px, -1px) }
[dir="rtl"] .about-link-out { transform: scaleX(-1) }
[dir="rtl"] .about-link:hover .about-link-out { transform: scaleX(-1) translate(1px, -1px) }
/* A view of this panel: its chevron steps along the line, not out of it. */
.about-link:hover .about-link-in { transform: translateX(1px) }
[dir="rtl"] .about-link:hover .about-link-in { transform: scaleX(-1) translateX(1px) }
@media (prefers-reduced-motion: reduce) {
  .about-mark { animation: none }
  .about-link-out { transition: none }
}