/* The Addresses list, its card and the Space-first picker (spec 72 D-72-26,
   architecture link-distribution/04). One look on Settings → Addresses, Space
   settings → Domains and the Share dialog. Phone first: one column, long hosts
   wrap, and the picker is a bottom sheet below 768px and a dialog above it.
   Controls keep the design system's sizes (.kk-btn-sm, .kk-input); the touch
   input floor lives with .kk-input. Born tokens-only. */
.kk-addr { display: flex; flex-direction: column; gap: var(--kk-s-4); min-width: 0; }
.kk-addr-group, .kk-addr-site { display: flex; flex-direction: column; gap: var(--kk-s-2); min-width: 0; }
/* Scoped twice so a host's own heading rules (the Share modal's serif h3) never win. */
.kk-addr :is(.kk-addr-group, .kk-addr-picker) .kk-addr-h { display: flex; align-items: center; gap: var(--kk-s-2); margin: 0;
  font-family: var(--kk-font-ui); font-size: var(--kk-fs-meta); font-weight: 600; line-height: 1.4; color: var(--kk-ink); }
.kk-addr-shows, .kk-addr-note, .kk-addr-reason, .kk-addr-next { margin: 0; font-size: var(--kk-fs-meta); color: var(--kk-text-soft); overflow-wrap: anywhere; }
.kk-addr-shows a { color: var(--kk-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kk-addr-reason { color: var(--kk-text); }
.kk-addr-next { color: var(--kk-ink); font-weight: 500; }
.kk-addr-note code, .kk-addr-reason code { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); }
.kk-addr-error { margin: 0; font-size: var(--kk-fs-meta); color: var(--kk-danger); }
.kk-addr-reserved { gap: var(--kk-s-1); }
.kk-addr-add { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kk-s-2); min-width: 0; }
.kk-addr-add .kk-fdomain-upgrade { align-self: stretch; }

/* The card: badges and the danger action, shared by every surface. */
.kk-addr-card .badge { flex: none; padding: 2px var(--kk-s-2); border-radius: var(--kk-r-pill); font-size: var(--kk-fs-micro); font-weight: 600; white-space: nowrap; }
.kk-addr-card .badge.green { background: color-mix(in srgb, var(--kk-outcome) 16%, transparent); color: color-mix(in srgb, var(--kk-outcome) 55%, var(--kk-ink)); }
.kk-addr-card .badge.amber { background: color-mix(in srgb, var(--kk-idea) 20%, transparent); color: color-mix(in srgb, var(--kk-idea) 55%, var(--kk-ink)); }
.kk-addr-card .badge.gray { background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-addr-card .kk-cred-actions { display: flex; flex-wrap: wrap; gap: var(--kk-s-2); }
.kk-addr-card .kk-cred-actions form { margin: 0; }
.kk-addr-danger { color: var(--kk-danger); }

/* The sheet: a bottom sheet on phones, a centred dialog from 768px. */
.kk-addr-sheet { box-sizing: border-box; width: 100%; max-width: 100%; max-height: 88dvh; margin: auto 0 0; padding: 0;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg) var(--kk-r-lg) 0 0; background: var(--kk-card);
  color: var(--kk-ink); box-shadow: var(--kk-shadow-lg); overflow: auto; }
.kk-addr-sheet::backdrop { background: color-mix(in srgb, var(--kk-ink) 40%, transparent); }
.kk-addr-sheet-body { position: relative; padding: var(--kk-s-4) var(--kk-s-4) calc(var(--kk-s-4) + env(safe-area-inset-bottom)); min-width: 0; }
.kk-addr-sheet-close { position: absolute; top: var(--kk-s-2); right: var(--kk-s-2); border: 0; background: none;
  color: var(--kk-text-soft); font-size: var(--kk-fs-title); line-height: 1; padding: var(--kk-s-1) var(--kk-s-2); cursor: pointer; }

/* Picker steps. */
.kk-addr-picker { display: flex; flex-direction: column; gap: var(--kk-s-3); min-width: 0; }
.kk-addr-picker-h { margin: 0; padding-right: var(--kk-s-6); font-family: var(--kk-font-ui); font-size: var(--kk-fs-body); font-weight: 600; overflow-wrap: anywhere; }
.kk-addr-crumb { margin: 0; font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kk-addr-crumb a { color: var(--kk-ink); }
.kk-addr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kk-s-1); }
.kk-addr-row { display: flex; flex-direction: column; gap: 2px; padding: var(--kk-s-2) var(--kk-s-3); min-width: 0;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-card); color: var(--kk-ink); text-decoration: none; }
.kk-addr-row b { font-size: var(--kk-fs-meta); overflow-wrap: anywhere; }
.kk-addr-row span { font-size: var(--kk-fs-micro); color: var(--kk-text-soft); overflow-wrap: anywhere; }
a.kk-addr-row:hover, a.kk-addr-row:focus-visible { border-color: var(--kk-ink); }
.kk-addr-row.is-off { background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-addr-modes { display: flex; gap: var(--kk-s-1); padding: 2px; border-radius: var(--kk-r-sm); background: var(--kk-fill); }
.kk-addr-mode { flex: 1 1 0; padding: var(--kk-s-1) var(--kk-s-2); border-radius: var(--kk-r-xs); text-align: center;
  font-size: var(--kk-fs-meta); color: var(--kk-text-soft); text-decoration: none; white-space: nowrap; }
.kk-addr-mode[aria-current="page"] { background: var(--kk-card); color: var(--kk-ink); font-weight: 600; box-shadow: var(--kk-shadow-sm); }
.kk-addr-form, .kk-addr-new, .kk-addr-whole, .kk-addr-confirm { display: flex; flex-direction: column; gap: var(--kk-s-2); min-width: 0; }
.kk-addr-new { padding: var(--kk-s-3); border: 1px dashed var(--kk-border); border-radius: var(--kk-r-sm); }
.kk-addr-field { display: grid; gap: var(--kk-s-1); min-width: 0; }
.kk-addr-field .kk-input { box-sizing: border-box; width: 100%; min-width: 0; }
.kk-addr-check { display: flex; align-items: flex-start; gap: var(--kk-s-2); font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kk-addr-check b { display: block; color: var(--kk-ink); }
.kk-addr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-2); }
.kk-addr-confirm p { margin: 0; font-size: var(--kk-fs-meta); overflow-wrap: anywhere; }
.kk-addr-tag { padding: 0 var(--kk-s-1); border-radius: var(--kk-r-pill); background: var(--kk-fill); font-size: var(--kk-fs-micro); font-weight: 500; color: var(--kk-text-soft); }

@media (min-width: 768px) {
  .kk-addr-sheet { width: min(36rem, calc(100% - 2 * var(--kk-s-5))); max-height: 80dvh; margin: auto; border-radius: var(--kk-r-lg); }
  .kk-addr-sheet-body { padding: var(--kk-s-5); }
}

/* The confirm step's page list (spec 72 D-72-28): explicit publication selection, search and
   Tick all on the matches, each page's visibility on its row. */
.kk-addr-pages { display: grid; gap: var(--kk-s-2); min-width: 0; margin: var(--kk-s-2) 0; }
.kk-addr-pages-h { margin: 0; color: var(--kk-ink); font-size: var(--kk-fs-body); }
.kk-addr-pages-h span { color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-addr-pages-search input { width: 100%; }
.kk-addr-pages-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-3); font-size: var(--kk-fs-meta); }
.kk-addr-pages-all a { color: var(--kk-link); }
.kk-addr-pages-all span { color: var(--kk-text-soft); }
.kk-addr-pages-list { max-height: 260px; overflow: auto; border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); background: var(--kk-bg); }
.kk-addr-pages-list label { display: flex; align-items: center; gap: var(--kk-s-2); min-width: 0; padding: var(--kk-s-2) var(--kk-s-3);
  border-top: 1px solid var(--kk-line); font-size: var(--kk-fs-body); color: var(--kk-text); }
.kk-addr-pages-list label:first-child { border-top: 0; }
.kk-addr-pages-list label.is-locked { color: var(--kk-text-soft); }
.kk-addr-pages-list input { flex: none; margin: 0; accent-color: var(--kk-primary); }
.kk-addr-pages-list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-addr-pages-list .vis { margin-left: auto; flex: none; color: var(--kk-private); font-size: var(--kk-fs-meta); }
.kk-addr-pages-list .vis.pub { color: var(--kk-public); }
.kk-addr-pages-search { display: flex; gap: var(--kk-s-2); }
.kk-addr-pages-search input { flex: 1 1 auto; min-width: 0; }
.kk-addr-pages-link { padding: 0; border: 0; background: none; color: var(--kk-link); font: inherit; cursor: pointer; }

.kk-addr-page-url { display: block; white-space: normal; overflow-wrap: anywhere; font-size: var(--kk-fs-small); font-weight: normal; color: var(--kk-text-soft); }