/* Shared components are opt-in; customer, merchant and reviewer themes share the same tokens. */
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) {
  --green: var(--ck-primary); --brand-primary: var(--ck-primary); --brand-lime: var(--ck-lime);
  --brand-ink: var(--ck-ink); --brand-soft: var(--ck-soft); --line: var(--ck-line); --muted: var(--ck-muted);
  font-family: var(--ck-font); font-size: var(--ck-text-base); line-height: var(--ck-leading);
  color: var(--ck-ink); background: var(--ck-ground); letter-spacing: var(--ck-tracking);
  overflow-wrap: anywhere;
}
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) *, :is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) *::before, :is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) *::after { box-sizing: border-box; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) [hidden] { display: none !important; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(h1,h2,h3,p) { overflow-wrap: anywhere; letter-spacing: var(--ck-tracking); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) h1 { font-size: var(--ck-text-title); line-height: var(--ck-leading-title); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) h2 { font-size: var(--ck-text-lg); line-height: var(--ck-leading-title); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) h3 { font-size: var(--ck-text-input); line-height: var(--ck-leading-title); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(h1,h2,h3) { font-weight: var(--ck-weight-bold); margin: 0 0 var(--ck-space-3); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) p { line-height: var(--ck-leading); margin: var(--ck-space-2) 0 var(--ck-space-4); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(small,.muted) { color: var(--ck-muted); font-size: var(--ck-text-xs); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(button, a, input, select, textarea, summary) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(button,.button,.ui-button) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ck-space-2);
  min-height: var(--ck-touch); min-width: var(--ck-touch); max-width: 100%; white-space: normal;
  padding: var(--ck-space-3) var(--ck-space-4); border: var(--ck-border) solid var(--ck-line);
  border-radius: var(--ck-radius-button); background: var(--ck-surface); color: var(--ck-primary);
  font: inherit; font-weight: var(--ck-weight-semibold); text-align: center; text-decoration: none;
}
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) button:hover { background: var(--ck-soft); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.primary,.ui-button.primary) { background: var(--ck-primary); border-color: var(--ck-primary); color: var(--ck-surface); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) .primary:hover { background: var(--ck-primary-hover); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.danger,.ui-button.danger) { color: var(--ck-danger); background: var(--ck-danger-bg); border-color: var(--ck-danger-bg); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(button:disabled,fieldset:disabled) { opacity: 1; cursor: not-allowed; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) button:disabled { background: var(--ck-done-bg); border-color: var(--ck-line); color: var(--ck-done); }
.ui-button-group { display: inline-grid; gap: var(--ck-space-1); }
.ui-disabled-reason { display: block; color: var(--ck-muted); font-size: var(--ck-text-xs); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) a { color: var(--ck-primary); min-height: var(--ck-touch); min-width: var(--ck-touch); display: inline-flex; align-items: center; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :focus-visible { outline: var(--ck-outline) solid var(--ck-primary); outline-offset: var(--ck-outline-offset); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(input,select,textarea) { min-height: var(--ck-touch); min-width: 0; max-width: 100%; width: 100%; font: inherit; font-size: var(--ck-text-input); color: var(--ck-ink); background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line); border-radius: var(--ck-radius-input); padding: var(--ck-space-3); accent-color: var(--ck-primary); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) input::placeholder { color: var(--ck-muted); opacity: 1; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(input[type=checkbox],input[type=radio]) { width: var(--ck-icon); height: var(--ck-icon); min-width: var(--ck-icon); min-height: var(--ck-icon); margin: 0; flex: none; padding: 0; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) label:has(> input:is([type=checkbox],[type=radio])) { display: flex; align-items: center; gap: var(--ck-space-2); min-height: var(--ck-touch); min-width: var(--ck-touch); cursor: pointer; }
/* A field the form marked invalid: a visible border and its message right under it (customer forms). */
.customer :is(input, select, textarea)[aria-invalid=true] { border-color: var(--ck-danger); }
.customer .ui-field-error { color: var(--ck-danger); font-size: var(--ck-text-sm); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(label.field,.ui-field) { display: grid; gap: var(--ck-space-2); margin-bottom: var(--ck-space-4); font-size: var(--ck-text-md); color: var(--ck-ink); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(label.check,.auth-consent) { display: flex; gap: var(--ck-space-2); align-items: flex-start; font-size: var(--ck-text-sm); line-height: var(--ck-leading); color: var(--ck-ink); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(form,fieldset,form>*,.row>*,.service>*,.auth-consent>span) { min-width: 0; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) fieldset { border: var(--ck-border) solid var(--ck-line); border-radius: var(--ck-radius-card); padding: var(--ck-space-4); margin: var(--ck-space-4) 0; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) legend { font-weight: var(--ck-weight-bold); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.ui-card,.card,.coupon-card,.profile-editor,.legal-settings,.location-consent-settings) { border: var(--ck-border) solid var(--ck-line); border-radius: var(--ck-radius-card); background: var(--ck-surface); padding: var(--ck-space-4); min-width: 0; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.ui-chip,.pill) { display: inline-flex; align-items: center; gap: var(--ck-space-1); padding: var(--ck-space-1) var(--ck-space-2); border: 0; border-radius: var(--ck-radius-chip); font-size: var(--ck-text-xs); font-weight: var(--ck-weight-semibold); color: var(--ck-done); background: var(--ck-done-bg); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is([data-tone=wait],.status-requested) { color: var(--ck-wait); background: var(--ck-wait-bg); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is([data-tone=confirm],.status-confirmed) { color: var(--ck-confirm); background: var(--ck-confirm-bg); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is([data-tone=danger],.status-rejected,.status-reported) { color: var(--ck-danger); background: var(--ck-danger-bg); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is([data-tone=done],.status-completed,.status-cancelled) { color: var(--ck-done); background: var(--ck-done-bg); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.ui-ad,.home-ad,.recommendation-ad) { color: var(--ck-done); background: var(--ck-done-bg); border: 0; border-radius: var(--ck-radius-small); font-size: var(--ck-text-xs); font-weight: var(--ck-weight-bold); padding: var(--ck-space-1) var(--ck-space-2); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.ui-empty,.empty,.home-empty) { padding: var(--ck-space-8) var(--ck-space-4); border: var(--ck-border) solid var(--ck-line); border-radius: var(--ck-radius-card); background: var(--ck-surface); color: var(--ck-muted); text-align: center; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.ui-topbar,.auth-topbar) { display: flex; align-items: center; gap: var(--ck-space-2); min-height: var(--ck-control); background: var(--ck-surface); color: var(--ck-ink); }
.ui-topbar h2 { flex: 1; margin: 0; }
.ui-topbar button { flex: none; }
.ui-bottom-actions { position: sticky; bottom: 0; display: flex; gap: var(--ck-space-2); padding: var(--ck-space-3) 0 calc(var(--ck-space-3) + var(--ck-safe-bottom)); background: var(--ck-surface); border-top: var(--ck-border) solid var(--ck-line); }
.ui-bottom-actions > * { flex: 1; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.notice,.legal-status) { color: var(--ck-confirm); background: var(--ck-confirm-bg); border: 0; border-radius: var(--ck-radius-input); padding: var(--ck-space-3); font-size: var(--ck-text-sm); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) :is(.legal-document,.legal-original,.legal-language,.legal-consents) { color: var(--ck-ink); font-size: var(--ck-text-md); line-height: var(--ck-leading); border-color: var(--ck-line); border-radius: var(--ck-radius-input); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) .legal-document p { color: var(--ck-ink); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) summary { min-height: var(--ck-touch); padding: var(--ck-space-2) 0; color: var(--ck-primary); cursor: pointer; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) .legal-links { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); padding: var(--ck-space-4) 0; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) .legal-links button { color: var(--ck-muted); background: transparent; border: 0; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) dialog { width: min(100%,var(--ck-app-width)); max-width: 100%; max-height: var(--ck-sheet-height); border: 0; border-radius: var(--ck-radius-sheet); padding: var(--ck-space-4); color: var(--ck-ink); background: var(--ck-surface); overflow-y: auto; }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) dialog::backdrop { background: var(--ck-scrim); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) .legal-dialog { max-width: min(100%,var(--ck-document-width)); }
:is(.customer, .legal-theme, .merchant-theme, .reviewer-theme) .legal-close { position: sticky; top: 0; background: var(--ck-surface); }
.legal-theme .legal-page { width: 100%; max-width: var(--ck-document-width); margin: auto; padding: var(--ck-space-5) var(--ck-space-4); }
.legal-theme .legal-page header { display: flex; gap: var(--ck-space-3); align-items: center; flex-wrap: wrap; }
.legal-theme #legal-content { background: var(--ck-surface); border-radius: var(--ck-radius-card); padding: var(--ck-space-4); margin-top: var(--ck-space-4); }
@media (prefers-reduced-motion: reduce) { :is(.customer,.legal-theme,.merchant-theme, .reviewer-theme) * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* UI-A screen stack, step flows, sheets and toasts (docs/design/prototypes). Shared by every app theme. */
.ui-stack { position: relative; min-width: 0; overflow-x: clip; background: var(--ck-surface); }
.ui-screen { display: flex; flex-direction: column; min-height: var(--ck-viewport-height); min-width: 0; background: var(--ck-surface); color: var(--ck-ink); }
.ui-screen[data-enter="forward"] { animation: ui-screen-forward var(--ck-screen-motion) var(--ck-motion-ease); }
.ui-screen[data-enter="back"] { animation: ui-screen-back var(--ck-screen-motion) var(--ck-motion-ease); }
@keyframes ui-screen-forward { from { transform: translateX(var(--ck-screen-shift)); opacity: .85; } to { transform: none; opacity: 1; } }
@keyframes ui-screen-back { from { transform: translateX(calc(var(--ck-screen-shift) * -1)); opacity: .85; } to { transform: none; opacity: 1; } }
.ui-screen-top { position: sticky; top: 0; z-index: var(--ck-z-sticky); display: flex; align-items: center; gap: var(--ck-space-1); min-height: var(--ck-control); padding: 0 var(--ck-space-2); background: var(--ck-surface); flex-shrink: 0; }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-screen-top .ui-screen-title { flex: 1; min-width: 0; margin: 0; font-size: var(--ck-text-lg); font-weight: var(--ck-weight-bold); line-height: var(--ck-leading-title); }
.ui-screen-top.large { padding-left: var(--ck-space-5); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-screen-top.large .ui-screen-title { font-size: var(--ck-text-title); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-icon-button { min-width: var(--ck-touch); min-height: var(--ck-touch); padding: 0; border: 0; border-radius: var(--ck-radius-input); background: transparent; color: var(--ck-ink); }
.ui-screen-body { flex: 1 0 auto; padding: var(--ck-space-6) var(--ck-space-5) var(--ck-space-4); min-width: 0; }
.ui-progress { height: 3px; margin: 0 var(--ck-space-5); border-radius: 2px; background: var(--ck-line); flex-shrink: 0; }
.ui-progress i { display: block; height: 100%; border-radius: inherit; background: var(--ck-primary); transition: width var(--ck-screen-motion) var(--ck-motion-ease); }
.ui-step { display: flex; flex-direction: column; flex: 1; min-height: var(--ck-viewport-height); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-step-title { margin: 0; font-size: 24px; font-weight: var(--ck-weight-bold); line-height: 1.38; }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-step-sub { margin: var(--ck-space-2) 0 0; color: var(--ck-muted); font-size: var(--ck-text-base); line-height: 1.5; }
.ui-cta-bar { position: sticky; bottom: var(--ui-keyboard-inset, 0px); z-index: var(--ck-z-sticky); display: flex; flex-direction: column; gap: var(--ck-space-2); margin-top: auto; padding: var(--ck-space-3) var(--ck-space-5) calc(var(--ck-space-6) + var(--ck-safe-bottom)); background: var(--ck-surface); flex-shrink: 0; }
:root[data-keyboard] .ui-cta-bar { padding-bottom: var(--ck-space-3); }
.ui-cta-bar.row { flex-direction: row; }
.ui-cta-bar.row > * { flex: 1; }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-cta { width: 100%; min-height: var(--ck-cta); border: 0; border-radius: var(--ck-radius-card); background: var(--ck-primary); color: var(--ck-surface); font-size: var(--ck-text-lg); font-weight: var(--ck-weight-bold); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-cta:hover { background: var(--ck-primary-hover); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-cta.gray { background: var(--ck-fill); color: var(--ck-ink); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-cta.danger { background: var(--ck-red); color: var(--ck-surface); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-cta.kakao { background: var(--ck-kakao); color: var(--ck-kakao-ink); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-cta:disabled { background: var(--ck-done-bg); color: var(--ck-done); }
:is(.customer, .merchant-theme, .reviewer-theme) :is(.ui-check-row, .ui-switch-row, .ui-row) { display: flex; align-items: center; gap: var(--ck-space-3); width: 100%; min-height: var(--ck-row); padding: var(--ck-space-2) 0; border: 0; border-radius: 0; background: transparent; color: var(--ck-ink); font-size: var(--ck-text-lg); font-weight: var(--ck-weight-regular); text-align: left; justify-content: flex-start; }
:is(.customer, .merchant-theme, .reviewer-theme) :is(.ui-check-row, .ui-switch-row, .ui-row):hover { background: transparent; }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-check-row.strong { font-weight: var(--ck-weight-bold); border-bottom: var(--ck-border) solid var(--ck-line); margin-bottom: var(--ck-space-2); }
:is(.customer, .merchant-theme, .reviewer-theme) :is(.ui-check-row, .ui-switch-row, .ui-row) small { display: block; margin-top: 2px; color: var(--ck-muted); font-size: var(--ck-text-md); font-weight: var(--ck-weight-regular); }
.ui-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border: 2px solid var(--ck-switch-off); border-radius: 50%; color: var(--ck-surface); }
[aria-checked="true"] > .ui-check { background: var(--ck-primary); border-color: var(--ck-primary); }
/* The transparent native checkbox covers the whole row: one large target, native toggling and focus. */
:is(.customer, .merchant-theme, .reviewer-theme) input.ui-check-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
:is(.ui-check-row, .ui-switch-row):has(> .ui-check-input) { position: relative; cursor: pointer; }
.ui-check-input + .ui-check svg { visibility: hidden; }
.ui-check-input:checked + .ui-check { background: var(--ck-primary); border-color: var(--ck-primary); }
.ui-check-input:checked + .ui-check svg { visibility: visible; }
.ui-check-input:checked + .ui-switch { background: var(--ck-primary); }
.ui-check-input:checked + .ui-switch i { left: 23px; }
.ui-check-input:disabled + :is(.ui-check, .ui-switch) { opacity: .55; }
.ui-check-input:focus-visible + :is(.ui-check, .ui-switch) { outline: var(--ck-outline) solid var(--ck-primary); outline-offset: var(--ck-outline-offset); }
.ui-check-text, .ui-switch-text { flex: 1; min-width: 0; }
.ui-switch { position: relative; width: 50px; height: 30px; flex-shrink: 0; border-radius: 15px; background: var(--ck-switch-off); }
.ui-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ck-surface); transition: left var(--ck-motion); }
[aria-checked="true"] > .ui-switch { background: var(--ck-primary); }
[aria-checked="true"] > .ui-switch i { left: 23px; }
.ui-row .ui-row-end { margin-left: auto; color: var(--ck-muted); font-size: var(--ck-text-base); }
.ui-row .ui-row-end svg { display: block; }
.ui-gap { height: 10px; margin: var(--ck-space-5) calc(var(--ck-space-5) * -1); background: var(--ck-fill); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-chips { display: flex; gap: var(--ck-space-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ui-chips.wrap { flex-wrap: wrap; }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-chip-button { flex-shrink: 0; min-height: var(--ck-touch); padding: 0 var(--ck-space-4); border: var(--ck-border) solid var(--ck-line); border-radius: var(--ck-radius-chip); background: var(--ck-surface); color: var(--ck-ink); font-size: var(--ck-text-md); font-weight: var(--ck-weight-medium); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-chip-button:is([aria-pressed="true"], .on) { background: var(--ck-ink); border-color: var(--ck-ink); color: var(--ck-surface); }
:is(.customer, .merchant-theme, .reviewer-theme) dialog.ui-sheet { position: fixed; inset: auto 0 0; width: min(100%, var(--ck-app-width)); max-width: 100%; max-height: 85dvh; margin: 0 auto; padding: 0; border: 0; border-radius: var(--ck-radius-sheet) var(--ck-radius-sheet) 0 0; background: var(--ck-surface); overflow-y: auto; }
dialog.ui-sheet[open] { animation: ui-sheet-in var(--ck-screen-motion) var(--ck-motion-ease); }
@keyframes ui-sheet-in { from { transform: translateY(12px); opacity: .85; } to { transform: none; opacity: 1; } }
.ui-sheet-panel { padding: var(--ck-space-3) var(--ck-space-5) calc(var(--ck-space-6) + var(--ck-safe-bottom)); }
.ui-sheet-handle { display: block; width: 40px; height: 4px; margin: 0 auto var(--ck-space-4); border-radius: 2px; background: var(--ck-switch-off); }
:is(.customer, .merchant-theme, .reviewer-theme) .ui-sheet-title { margin: 0; font-size: var(--ck-text-xl); font-weight: var(--ck-weight-bold); }
.ui-sheet-actions { display: flex; gap: var(--ck-space-2); margin-top: var(--ck-space-6); }
.ui-sheet-actions > * { flex: 1; }
.ui-toast { position: fixed; left: 50%; bottom: calc(var(--ck-tab-height) + var(--ck-space-4) + var(--ck-safe-bottom)); z-index: var(--ck-z-toast); width: min(calc(100% - var(--ck-space-10)), calc(var(--ck-app-width) - var(--ck-space-10))); transform: translate(-50%, 8px); padding: var(--ck-space-3) var(--ck-space-4); border-radius: var(--ck-radius-button); background: var(--ck-toast); color: var(--ck-surface); font-size: var(--ck-text-base); opacity: 0; transition: opacity var(--ck-motion), transform var(--ck-motion); pointer-events: none; }
.ui-toast.ui-toast-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ui-screen[data-enter], dialog.ui-sheet[open] { animation: none !important; } .ui-toast, .ui-progress i, .ui-switch i { transition: none !important; } }

/* Shared two-step area controls, including narrow sheets. */
.ui-region-picker { display:grid; gap:var(--ck-space-3); min-width:0; }
.ui-region-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ck-space-3); }
.ui-region-columns label { display:grid; gap:var(--ck-space-2); min-width:0; }
.ui-region-columns select { width:100%; min-width:0; min-height:var(--ck-touch); font-size:var(--ck-text-input); color:var(--ck-ink); background:var(--ck-surface); border:var(--ck-border) solid var(--ck-line); border-radius:var(--ck-radius-input); }
.ui-region-picker [data-region-recent] { display:flex; flex-wrap:wrap; gap:var(--ck-space-2); }
.ui-region-picker [hidden] { display:none; }
/* Packaged-app information on My (appInfoRows): label and value per row, long values wrap inside the column. */
.ui-app-info { margin-top: var(--ck-space-4); color: var(--ck-muted); font-size: var(--ck-text-sm); }
.ui-app-info dl { display: grid; gap: var(--ck-space-1); margin: 0; }
.ui-app-info dl > div { display: grid; grid-template-columns: minmax(0, var(--ck-label-col)) minmax(0, 1fr); gap: var(--ck-space-3); }
.ui-app-info :is(dt, dd) { margin: 0; min-width: 0; overflow-wrap: anywhere; line-height: var(--ck-leading); }
.ui-app-info dd { color: var(--ck-ink); }

/* Member pictures: default face underneath, the photo on top when it loads. */
.ui-avatar { position: relative; display: inline-grid; flex-shrink: 0; place-items: center; overflow: hidden; width: var(--ck-avatar-md, 40px); height: var(--ck-avatar-md, 40px); border-radius: 50%; background: var(--ck-soft); color: var(--ck-primary); }
.ui-avatar.sm { width: var(--ck-avatar-small); height: var(--ck-avatar-small); }
.ui-avatar.lg { width: calc(var(--ck-avatar) * 2); height: calc(var(--ck-avatar) * 2); }
.ui-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }