/* Custom domain card in the Folder share dialog (ADR 0033). Phone first: the
   DNS record is a label/value grid at every width (the dialog stays narrow on
   desktop too); long hosts wrap instead of widening the dialog. Controls keep the
   design system's sizes; inputs get 16px text on touch phones only. */
.kk-fdomain { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kk-fdomain code { font: 12.5px var(--kk-font-mono); color: var(--kk-ink); overflow-wrap: anywhere; }
.kk-fdomain-records { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kk-fdomain-record { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-fill); min-width: 0; }
.kk-fdomain-record dt { font-size: 12px; color: var(--kk-text-soft); }
.kk-fdomain-record dd { margin: 0; min-width: 0; }
.kk-fdomain-error { color: var(--kk-danger, var(--kk-blocker)); }
.kk-fdomain-input { box-sizing: border-box; width: 100%; min-width: 0; }

@media (hover: none) and (pointer: coarse) {
  .kk-fdomain-input { font-size: 16px; }
}

/* "Needs a paid plan" (spec 72 D-72-21): the gate's line and See plans, in place
   of a connect form. Wraps to two lines at phone width. */
.kk-fdomain-upgrade { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-2) var(--kk-s-3); padding: var(--kk-s-2) var(--kk-s-3);
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-fill); min-width: 0; }
.kk-fdomain-upgrade-line { margin: 0; flex: 1 1 14rem; min-width: 0; font-size: var(--kk-fs-body); color: var(--kk-ink); }
.kk-fdomain-lapse { color: var(--kk-text-soft); }

/* The last action's outcome, shown in the card it changed, since the dialog's frame
   updates in place and has no page flash (Q-97-22). */
.kk-fdomain-message { margin: 0; color: var(--kk-ink); }
.kk-fdomain-message.is-alert { color: var(--kk-danger, var(--kk-blocker)); }