/* Kalos platform styles (ui-platform): profiles, usernames, sign-in, curated collections. Injected by kalos-profile.js
   with ctx.css('kalos-platform.css'); every rule is namespaced kp-* or scoped to markup the platform modules render. */

/* Avatars from a Kalos profile (header button, account menu, profile headers) */
.kp-avatar-holder{position:relative;overflow:hidden;background-image:none!important;background-color:var(--quiet-surface)}
.kp-avatar-holder>img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.profile-avatar.kp-avatar-holder{padding:0}

/* Account menu */
.account-menu .kp-menu-note{margin-left:auto;font-size:11px;color:var(--muted);font-weight:400}

/* Small dialogs (sign-in, waking) */
.kp-dialog{display:grid;gap:12px;min-width:min(380px,80vw)}
.kp-dialog h2{margin:0}
.kp-dialog p{margin:0;line-height:1.5}
/* Sign in to Kalos: two big choices (Sign in; New to Kalos? Create your profile), one reassurance line, then the status
   of the signature (a spinner while the wallet is asked; the error and Try again in a readable line). */
.kp-signin{gap:16px;width:min(440px,100%)}
.kp-signin h2{font-size:var(--type-panel,24px);line-height:32px}
.kp-signin-choices{display:grid;gap:10px}
.kp-signin-choice{display:grid;grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:14px;width:100%;min-height:72px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-align:left;text-decoration:none;font:inherit;cursor:pointer;box-shadow:var(--control-shadow,none);transition:border-color .16s ease,background-color .16s ease}
.kp-signin-choice:hover{border-color:color-mix(in srgb,var(--strong) 28%,var(--line));background:var(--quiet-surface)}
.kp-signin-choice:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kp-signin-choice.is-primary{border-color:color-mix(in srgb,var(--strong) 22%,var(--line))}
.kp-signin-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--quiet-surface);color:var(--strong)}
.kp-signin-choice.is-primary .kp-signin-icon{background:linear-gradient(var(--primary-top),var(--primary-bottom));color:var(--on-brand)}
.kp-signin-icon svg{width:18px;height:18px}
.kp-signin-text{display:grid;gap:2px;min-width:0}
.kp-signin-text strong{font-size:15px;line-height:20px;font-weight:600;color:var(--strong)}
.kp-signin-text small{font-size:13px;line-height:18px;color:var(--secondary-text);overflow-wrap:anywhere}
.kp-signin-choice>svg{width:18px;height:18px;color:var(--secondary-text)}
.kp-signin-address{white-space:nowrap}
.kp-signin-note{font-size:13px;color:var(--secondary-text);text-align:center}
.kp-signin.is-signing .kp-signin-choice{opacity:.55;pointer-events:none}
.kp-signin-status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;padding:10px 12px;border-radius:12px;background:var(--quiet-surface);font-size:13px;line-height:18px;color:var(--ink);text-align:center}
.kp-signin-status[hidden]{display:none}
.kp-signin-status.is-error{background:color-mix(in srgb,var(--negative) 10%,var(--surface));color:var(--ink)}
.kp-signin-status .text-button{font-weight:600;color:var(--strong);text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.kp-signin-choice{min-height:68px;padding:12px 14px;gap:12px}.kp-signin h2{font-size:20px;line-height:28px}}

/* Profile editor */
.kp-profile-editor .editor-intro{margin-bottom:14px}
.kp-offline-note{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.kp-media-editor{position:relative;margin:0 0 46px}
.kp-banner-pick{display:block;position:relative;aspect-ratio:3/1;max-height:150px;width:100%;border-radius:12px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,var(--quiet-surface),var(--hover-surface,var(--quiet-surface)));border:1px dashed var(--line)}
.kp-banner-pick>img{width:100%;height:100%;object-fit:cover;display:block}
.kp-avatar-pick{position:absolute;left:18px;bottom:-38px;width:84px;height:84px;border-radius:50%;overflow:hidden;cursor:pointer;
  background:var(--quiet-surface);border:4px solid var(--paper,#fff);box-shadow:0 2px 8px #0003}
.kp-avatar-pick>img{width:100%;height:100%;object-fit:cover;display:block}
.kp-media-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px;color:var(--muted);font-size:12px}
.kp-media-empty svg{width:18px;height:18px}
.kp-media-hint{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;
  background:#000a;color:#fff;font-size:11px;pointer-events:none}
.kp-avatar-pick .kp-media-hint{right:50%;bottom:4px;transform:translateX(50%);padding:4px}
.kp-media-hint svg{width:12px;height:12px}
.kp-banner-pick:focus-within,.kp-avatar-pick:focus-within,.kp-banner-pick:hover,.kp-avatar-pick:hover{outline:2px solid var(--focus,var(--brand));outline-offset:2px}
.kp-prefixed{display:flex;align-items:stretch}
.kp-prefixed>span{display:grid;place-items:center;padding:0 10px;border:1px solid var(--field-border,var(--line));border-right:0;border-radius:var(--field-radius,12px) 0 0 var(--field-radius,12px);color:var(--muted);background:var(--field-fill,var(--recessed,var(--quiet-surface)))}
.kp-prefixed>input{flex:1;min-width:0;border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.kp-field-status{display:block;margin-top:6px;font-size:12px;color:var(--muted);min-height:16px}
.kp-field-status.kp-ok{color:var(--green,#2f7d4f)}
.kp-field-status.kp-bad,.kp-error,.kp-warn{color:var(--negative,#b3261e)}
.kp-error{margin:4px 0 10px;font-size:13px}
.kp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.kp-form-row{grid-template-columns:1fr}.kp-avatar-pick{width:68px;height:68px;bottom:-30px}.kp-media-editor{margin-bottom:38px}}

/* Public profile #u/<name> */
.kp-user-page .profile-cover.kp-has-banner{background-size:cover;background-position:center}
.kp-handle{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:2px 0 8px;font-size:13px;color:var(--secondary-text,var(--muted))}
.kp-handle i{font-style:normal;opacity:.6}
.kp-handle a,.kp-handle .text-button{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kp-handle .text-button svg{width:12px;height:12px}
.kp-shell{padding:48px 0;display:grid;gap:14px;justify-items:start}
.kp-table-wrap{overflow-x:auto;margin-top:8px}
.kp-table{width:100%;border-collapse:collapse;font-size:var(--table-row-size,13px);font-variant-numeric:tabular-nums lining-nums}
.kp-table th{text-align:left;font-weight:var(--table-head-weight,500);color:var(--muted);font-size:var(--table-head-size,12px);text-transform:none;letter-spacing:0;padding:8px 10px;border-bottom:1px solid var(--line)}
.kp-table td{padding:10px;border-bottom:1px solid var(--fine-line,var(--line));white-space:nowrap;font-size:var(--table-row-size,13px)}
.kp-table td .text-button{padding:0;font-size:inherit}
.kp-grid{margin-top:8px}
