/* Kalos drops and creator styles (ui-drops): apply form, steps panel, application and request cards, drops page empty
   states, mint page additions, creator dashboard and Manage. Injected by kalos-drops.js with ctx.css('kalos-drops.css');
   every rule is namespaced kd-* or scoped to markup kalos-drops.js renders. Reuses the classic launch-, drop- and mint-
   classes and the theme tokens (--line, --surface, --quiet-surface, --secondary-text, --brand-soft, --green, --negative). */

/* Apply: the form card and the "How it works" side panel. The panel sticks under the header beside the form on
   desktop (no empty column beside a long form); at 1000px and below it sits above the form, and on phones it is a
   compact list of the step titles. */
.kd-launchpad .drops-my{flex-shrink:0;min-height:44px}
@media(max-width:700px){.kd-launchpad .drops-toolbar{flex-wrap:wrap}.kd-launchpad .drops-navigation{flex:1 1 100%}.kd-launchpad .drops-my{margin-right:auto}.kd-creator .dv-route-heading{align-items:flex-start;gap:16px}}
.kd-apply-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;max-width:1220px}
.kd-apply .launch-application-card{max-width:none;padding:28px 32px;border-radius:var(--radius-panel,20px);box-shadow:var(--surface-shadow)}
/* "How it works" scrolls with the page, as the form beside it does (Michael: it stuck under the header and "moves on
   scroll" against the form). */
.kd-steps-card{padding:24px;border:1px solid var(--line);border-radius:var(--radius-panel,20px);background:var(--surface);box-shadow:var(--surface-shadow)}
.kd-steps-title{margin:0 0 18px;font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.2px}
.kd-steps{list-style:none;margin:0;padding:0;display:grid}
.kd-steps li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding-bottom:20px}
.kd-steps li:last-child{padding-bottom:0}
.kd-steps li:not(:last-child)::before{content:'';position:absolute;left:13.5px;top:34px;bottom:6px;width:1px;background:var(--line)} /* joins a step's number to the next */
.kd-steps strong{display:block;padding-top:4px;font-size:var(--type-body,14px);font-weight:600;line-height:1.45}
.kd-steps strong a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kd-steps strong a{display:inline-block;padding-block:5px;margin-block:-5px} /* UI round 3: a 24px+ tap area; the line box is as it was */
.kd-steps small{display:block;margin-top:4px;font-size:var(--type-meta,13px);line-height:1.5;color:var(--secondary-text)}
.kd-step-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--quiet-surface);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.kd-step-done .kd-step-n{background:var(--brand-soft);border-color:transparent;color:var(--green)}
.kd-step-n svg{width:14px;height:14px}

/* The form: titled groups split by hairlines. One label size, one help-text size, one field height (house --field-*). */
.kd-group{min-width:0;margin:0;padding:28px 0;border:0;border-top:1px solid var(--fine-line,var(--line))}
.kd-group:first-of-type{padding-top:0;border-top:0}
.kd-group:last-of-type{padding-bottom:0}
.kd-group>legend{float:left;width:100%;margin:0 0 18px;padding:0;font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.2px;color:var(--ink)} /* floated: laid out like a heading */
.kd-group>legend+*{clear:both}
.kd-apply .launch-form-grid{gap:20px 16px}
.kd-apply .form-field>label{display:block;margin:0;font-size:var(--type-meta,13px);font-weight:550;line-height:1.4;color:var(--ink)}
.kd-apply .form-field>small{font-size:var(--type-sm,12px);line-height:1.5;color:var(--secondary-text)}
.kd-optional{font-style:normal;font-weight:400;color:var(--secondary-text);font-size:var(--type-sm,12px);margin-left:6px}
.kd-apply :is(input,textarea)[aria-invalid=true],.kd-apply .kd-prefixed:has(>input[aria-invalid=true]),.kd-apply .select-trigger:has(+select[aria-invalid=true]){border-color:var(--negative,#b3261e)}
/* "@" + handle: the wrapper draws the field, so the @ sits inside it with one border and one focus ring (house.css
   lists .kd-prefixed among the field wrappers; checks/field-rings). Shared with the collection settings page. */
.kd-prefixed{display:flex;align-items:stretch;min-width:0;height:var(--field-height,40px);border:1px solid var(--field-border,var(--fine-line));border-radius:var(--field-radius,12px);background:var(--field-fill,var(--recessed));box-shadow:var(--inset-shadow);overflow:hidden}
.kd-prefixed:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
.kd-prefixed>span{display:flex;align-items:center;flex:none;padding:0 1px 0 12px;color:var(--secondary-text);font-size:var(--field-font,14px)}
.kd-prefixed>input{flex:1;min-width:0;height:auto;min-height:0;padding-left:0;border:0;border-radius:0;background:transparent;box-shadow:none}
/* The date field keeps the native picker; it only takes the house field's text alignment and the select chevron's
   icon colour (iOS centres the value without the first rule). */
:root{--kd-date-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E")}
:root[data-theme=dark]{--kd-date-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ababab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E")}
.kd-apply input[type=date]{-webkit-appearance:none;appearance:none;text-align:left;font-variant-numeric:tabular-nums}
.kd-apply input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.kd-apply input[type=date]::-webkit-datetime-edit{padding:0}
.kd-apply input[type=date]::-webkit-calendar-picker-indicator{width:16px;height:16px;margin:0 0 0 8px;padding:0;background:var(--kd-date-icon) center/16px 16px no-repeat;color:transparent;opacity:1;cursor:pointer}
.kd-counter{align-self:flex-end;margin-top:-2px;font-size:var(--type-sm,12px);color:var(--secondary-text);font-variant-numeric:tabular-nums}
.kd-field-error{font-size:12px!important;line-height:1.45;color:var(--negative,#b3261e)!important}
.kd-form-error{margin:14px 0 0;font-size:13px;color:var(--negative,#b3261e)}
.kd-status{margin:12px 0 0}
.kd-footnote{font-size:12px;line-height:1.5;color:var(--secondary-text);max-width:420px}
/* Submit: the note and the button on one line, under a hairline; stacked on phones (full-width button). */
.kd-apply .launch-form-footer{justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--fine-line,var(--line))}
.kd-apply #kalos-apply-form .kd-footnote{flex:1 1 220px;max-width:none;font-size:var(--type-meta,13px)}

/* Two steps: the marker (1 Your project, 2 Details and terms), a recap of step 1 on step 2, and the Links rows. */
#kd-apply-steps:empty{display:none}
.kd-apply-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 24px;padding:0 0 20px;list-style:none;border-bottom:1px solid var(--fine-line,var(--line))}
.kd-apply-steps:focus{outline:none}
.kd-apply-steps li{display:flex;align-items:center;gap:8px;color:var(--secondary-text);font-size:var(--type-meta,13px);font-weight:550}
.kd-apply-steps li+li::before{content:'';width:28px;height:1px;margin-right:4px;background:var(--line)}
.kd-apply-steps span{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:var(--quiet-surface);font-size:12px;font-variant-numeric:tabular-nums}
.kd-apply-steps span svg{width:13px;height:13px}
.kd-apply-steps [aria-current=step]{color:var(--ink)}
.kd-apply-steps [aria-current=step] span{border-color:transparent;background:var(--ink);color:var(--surface)}
.kd-apply-steps .is-done span{border-color:transparent;background:var(--brand-soft);color:var(--green)}
.kd-apply-recap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 28px;padding:12px 16px;border:1px solid var(--fine-line,var(--line));border-radius:var(--radius-field,12px);background:var(--quiet-surface)}
.kd-apply-recap>div{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.kd-apply-recap strong{font-size:var(--type-body,14px);font-weight:600;overflow-wrap:anywhere}
.kd-apply-recap small{font-size:var(--type-sm,12px);color:var(--secondary-text)}
.kd-apply-recap .text-button{flex:none;min-height:32px;padding:0}
.kd-links-field .kd-link-more{display:grid;gap:8px}
.kd-add-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0}
.kd-add-link svg{width:14px;height:14px}
.kd-apply-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0}
.kd-apply-back svg{width:14px;height:14px}
.kd-apply #kalos-apply-form .kd-apply-back+.kd-footnote{text-align:right}

/* Terms: the contract summary with the full terms as its footer row (one card), then the two confirmations as one
   group of full-width rows: the whole row is the label (a large hit area), the checkbox keeps its own look. */
.kd-agreements #kd-terms-box{margin:0}
.kd-terms{border:1px solid var(--fine-line,var(--line));border-top:0;border-radius:0 0 16px 16px;background:var(--surface);font-size:var(--type-meta,13px)}
.kd-terms>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 22px;cursor:pointer;font-weight:550;color:var(--ink);list-style:none}
.kd-terms>summary::-webkit-details-marker{display:none}
.kd-terms>summary::after,.kd-powers-more>summary::after{content:'';flex:none;width:16px;height:16px;background:var(--select-chevron) center/16px 16px no-repeat}
.kd-terms[open]>summary::after,.kd-powers-more[open]>summary::after{transform:rotate(180deg)}
@media(hover:hover){.kd-terms>summary:hover,.kd-powers-more>summary:hover{color:var(--strong)}}
.kd-terms-text{margin:0 22px 20px;padding:14px 16px;border-radius:10px;background:var(--recessed);white-space:pre-wrap;line-height:1.65;font-size:12.5px;color:var(--secondary-text);overflow-wrap:anywhere}
.kd-terms-missing{display:flex;align-items:center;min-height:48px;padding:12px 22px;color:var(--secondary-text)} /* the loading row is as tall as the loaded link: nothing below moves */
.kd-terms-missing .modal-note{margin:0}
.kd-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;cursor:pointer}
.kd-check input{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--brand,currentColor)}
.kd-check input[aria-invalid=true]{outline:2px solid var(--negative,#b3261e);outline-offset:2px}
.kd-consents{margin-top:16px;border:1px solid var(--fine-line,var(--line));border-radius:var(--radius-field,12px);overflow:hidden}
.kd-consents>.kd-check{gap:12px;min-height:var(--tap-min,44px);padding:14px 16px;font-size:var(--type-body,14px);color:var(--ink)}
.kd-consents>:is(.kd-check,small)+.kd-check{border-top:1px solid var(--fine-line,var(--line))}
.kd-consents>.kd-field-error{display:block;margin-top:-6px;padding:0 16px 12px 44px}
@media(hover:hover){.kd-consents>.kd-check:hover{background:var(--quiet-surface)}}

.kd-notice{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--quiet-surface);font-size:13px;line-height:1.55;color:var(--secondary-text)}
.kd-notice .modal-note{margin:0}
.kd-notice-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kd-muted{color:var(--secondary-text);font-size:13px;line-height:1.6}
.kd-danger{color:var(--negative,#b3261e)!important}
.kd-loading{margin:8px 0}

/* Success screen */
.kd-dm textarea{width:100%;min-height:84px;padding:12px;border:1px solid var(--field-border,var(--fine-line,var(--line)));border-radius:var(--field-radius,var(--radius-field,12px));background:var(--field-fill,var(--recessed,var(--quiet-surface)));font-size:var(--field-font,14px);line-height:1.55;resize:none}
.kd-dm{display:flex;flex-direction:column;gap:8px;margin:18px 0 0}
.kd-dm label span{font-size:12px;font-weight:550}
.kd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.kd-actions .button{display:inline-flex;align-items:center;gap:8px}
.kd-actions svg{width:14px;height:14px}

/* Sections and cards (applications, fee requests) */
.kd-section{margin-top:40px;max-width:1220px}
.kd-app-list,.kd-rows{display:grid;gap:12px}
.kd-app{padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.kd-app-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.kd-app-head strong{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.kd-app-head small{display:block;margin-top:3px;font-size:12px;color:var(--secondary-text)}
.kd-app-note{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--secondary-text);overflow-wrap:anywhere}
.kd-app .kd-actions{margin-top:12px}
.kd-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:none}
.kd-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--badge-height,22px);padding:var(--badge-pad-block,2px) var(--badge-pad-inline,8px);border-radius:var(--badge-radius,var(--radius-pill,999px));font-size:var(--badge-size,var(--type-xs,11px));font-weight:var(--badge-weight,550);line-height:1.3;white-space:nowrap;border:1px solid var(--line);background:var(--quiet-surface);color:var(--secondary-text)}
.kd-chip:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.kd-chip-ok{color:var(--badge-live-color,var(--green));border-color:var(--badge-live-border,color-mix(in srgb,var(--green) 40%,var(--line)));background:var(--badge-live-bg,color-mix(in srgb,var(--green) 12%,var(--surface)))}
.kd-chip-pending{color:var(--badge-warning-color,var(--gold,#a77d2e));border-color:var(--badge-warning-border,color-mix(in srgb,var(--gold) 40%,var(--line)));background:var(--badge-warning-bg,color-mix(in srgb,var(--gold) 12%,var(--surface)))}
.kd-chip-bad{color:var(--badge-negative-color,var(--negative,#b3261e));border-color:var(--badge-negative-border,color-mix(in srgb,var(--negative) 40%,var(--line)));background:var(--badge-negative-bg,color-mix(in srgb,var(--negative) 12%,var(--surface)))}
.kd-empty{padding:22px;border:1px dashed var(--line);border-radius:10px;color:var(--secondary-text);font-size:13px;display:grid;gap:12px;justify-items:start}
.kd-empty p{margin:0;line-height:1.55}
.kd-empty-wide{margin-bottom:28px}

/* Creator pages ("Your applications" on /apply, every My Drops section): the page kit's empty card (house.css
   .empty-card: one sentence, one button) for every state with nothing to list, and one list panel of rows split by
   hairlines. Loading is the empty card's shape with quiet bars (.kd-pending), so the card that replaces it moves
   nothing. */
.empty-card+.kd-list{margin-top:12px}
.kd-pending{pointer-events:none}
.kd-pending-text{display:block;width:min(320px,80%);height:20px;border-radius:6px;background:var(--quiet-surface)}
.kd-pending-text.is-two{height:40px}
.kd-pending-action{display:block;width:132px;height:var(--control-sm,32px);border-radius:999px;background:var(--quiet-surface)}
@media(max-width:900px){.kd-pending-action{height:var(--tap-min,44px)}}
@media(prefers-reduced-motion:no-preference){.kd-pending{animation:kd-list-breathe 1.6s ease-in-out infinite alternate}@keyframes kd-list-breathe{to{opacity:.55}}}
.kd-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-panel,20px);background:var(--surface);box-shadow:var(--surface-shadow)}
.kd-list>:is(.kd-app,.kd-row){border:0;border-radius:0;background:none;box-shadow:none}
.kd-list>:is(.kd-app,.kd-row)+:is(.kd-app,.kd-row){border-top:1px solid var(--fine-line,var(--line))}
.kd-list>.kd-app{padding:18px 20px}
.kd-list>.kd-row{min-height:72px;padding:14px 20px}
.kd-list .kd-app-head strong{font-weight:600}
.kd-list .kd-app-note{margin-top:8px}
.kd-list .kd-app .kd-actions{gap:8px 14px}
.kd-list .kd-actions>.kd-danger{order:9;margin-left:auto} /* Withdraw / Cancel request: last, apart from the next steps */
/* My Drops: a section shows only with something in it (an empty body hides it; signed out, the sign-in card speaks).
   Sections still loading hide behind one pending card; signed in with every section empty, one empty card shows. */
.kd-creator .kd-section:is(:has(>.kd-section-body:empty),:has(>.kd-section-body>.kd-list-loading)),.kd-creator #kd-creator-signin:empty{display:none}
.kd-creator-pending,.kd-creator-empty{display:none;margin-top:8px}
.kd-creator:has(.kd-section-body>.kd-list-loading) .kd-creator-pending{display:block}
.kd-creator[data-signed-in]:not(:has(.kd-section-body:not(:empty))) .kd-creator-empty{display:block}
.kd-creator #kd-creator-signin:empty+.kd-section{margin-top:16px}
.kd-creator .drops-section-heading{justify-content:flex-start;align-items:center;gap:10px}
.kd-count{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--quiet-surface);color:var(--secondary-text);font-size:12px;font-weight:550;font-variant-numeric:tabular-nums}

/* Drops page (UI round 2, kalos-drops.js launchpadLive): the page kit's head (My Drops a quiet link, Apply to launch the
   action), the Live & upcoming / Past switch, then one grid of drop cards. Every card has the same rows (status, name,
   creator, price and time, minted bar, one action), one line each, so the cards of a row line up, a countdown or a new
   minted count moves nothing, and the loading cards hold their exact place. */
.drop-status.ended{color:var(--secondary-text)}
.kd-drops .page-head-actions{gap:8px 20px}
.kd-drops .kd-head-link{display:inline-flex;align-items:center;min-height:var(--control-sm,32px)}
.kd-drops .kd-apply-cta{gap:8px}
.kd-drops .kd-apply-cta svg{width:14px;height:14px;flex:none}
/* The switch: the house sliding pill (switchers.js) in a recessed track, like the other two-way switches. */
.kd-drops-bar{display:flex;align-items:center;margin:0 0 24px}
.kd-drops-bar .drops-navigation{display:inline-flex;align-items:center;gap:24px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none}
.kd-drops-bar .drops-navigation>button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 1px;border:0;border-radius:0;background:none;font-size:var(--type-meta,13px);font-weight:550;line-height:1;color:var(--secondary-text);white-space:nowrap}
.kd-drops-bar .drops-navigation>button[aria-pressed=true]{color:var(--strong)}
.kd-drops-bar .drops-navigation>button::after{display:none}
/* The grid: as many 240px+ columns as fit (5 at 1440, 6 at 1920), so a first row shows whole, its actions included. */
.kd-drops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:24px;align-items:start;container:kd-drops/inline-size}
.kd-drop{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--fine-line);border-radius:var(--radius-panel,20px);background:var(--surface);box-shadow:var(--surface-shadow);transition:border-color var(--motion-fast,160ms) ease,box-shadow var(--motion-fast,160ms) ease}
@media(hover:hover){.kd-drop:not(.is-skeleton):hover{border-color:var(--line);box-shadow:var(--surface-hover-shadow,var(--surface-shadow))}}
.kd-drop-art{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--quiet-surface);border-bottom:1px solid var(--fine-line)}
.kd-drop-art>.art{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;box-shadow:none}
.kd-drop-body{display:flex;flex-direction:column;min-width:0;padding:16px 18px 18px}
.kd-drop-status{display:flex;align-items:center;height:24px}
.kd-drop-status [data-countdown]{font-variant-numeric:tabular-nums}
.kd-drop-name{margin:11px 0 0;font-size:var(--type-control,16px);line-height:24px;font-weight:650;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* UI round 3: the name link is the row's whole 24px line (a tap target), with the same text where it was. */
.kd-drop-name>a{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--strong)}
.kd-drop-name .verified{vertical-align:-1px}
.kd-drop-by{margin:1px 0 0;font-size:var(--type-meta,13px);line-height:18px;color:var(--secondary-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-drop-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--fine-line)}
.kd-drop-facts>div{min-width:0}
.kd-drop-facts dt{margin:0;font-size:var(--type-sm,12px);line-height:16px;font-weight:450;color:var(--secondary-text)}
.kd-drop-facts dd{margin:4px 0 0;height:20px;font-size:var(--type-body,14px);line-height:20px;font-weight:600;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.kd-drop-facts dd .price-display small{margin-left:4px;font-size:var(--type-xs,11px);font-weight:450;color:var(--secondary-text)}
.kd-drop-progress{margin:14px 0 0}
.kd-drop-progress>p{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:var(--type-sm,12px);line-height:16px;color:var(--secondary-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.kd-drop-progress b{font-weight:600;color:var(--ink)}
.kd-drop-progress progress{display:block;width:100%;height:4px;margin:0;border:0;border-radius:4px;overflow:hidden;-webkit-appearance:none;appearance:none;background:var(--quiet-surface)}
.kd-drop-progress progress::-webkit-progress-bar{background:var(--quiet-surface)}
.kd-drop-progress progress::-webkit-progress-value{background:var(--green);border-radius:4px}
.kd-drop-progress progress::-moz-progress-bar{background:var(--green);border-radius:4px}
.kd-drop:is([data-state=ended],[data-state=soldout]) .kd-drop-progress progress::-webkit-progress-value{background:var(--secondary-text)}
.kd-drop:is([data-state=ended],[data-state=soldout]) .kd-drop-progress progress::-moz-progress-bar{background:var(--secondary-text)}
.kd-drop .kd-drop-action{width:100%;min-height:var(--control-md,40px);margin-top:16px;justify-content:center}
@media(max-width:900px){.kd-drop .kd-drop-action{min-height:var(--tap-min,44px)}}
@media(max-width:700px){.kd-drops-bar{margin-bottom:20px}.kd-drops-bar .drops-navigation{display:flex;width:100%}.kd-drops-bar .drops-navigation>button{flex:1 1 0;min-height:var(--tap-min,44px)}.kd-drops-grid{gap:16px}}
/* Phones: one column of compact cards: the art beside the status, name and creator, then the facts, the bar and the full
   width action, so a card is about 300px tall and its action is on the first screen. */
@media(max-width:600px){
 .kd-drop{display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;padding:14px 16px 16px}
 .kd-drop-body{display:contents}
 .kd-drop-art{grid-column:1;grid-row:1/span 3;align-self:start;width:80px;border:0;border-radius:12px}
 .kd-drop-status{grid-column:2;grid-row:1}
 .kd-drop-name{grid-column:2;grid-row:2;margin-top:9px}
 .kd-drop-by{grid-column:2;grid-row:3;margin-top:3px}
 .kd-drop-facts,.kd-drop-progress,.kd-drop .kd-drop-action{grid-column:1/-1}
}
/* One drop in Live & upcoming (UI round 3, launchpadLive .is-single): one wide featured card, the art on the left and the
   rest on the right, instead of a lone card at the grid's left edge. The art is exactly as tall as a grid row (a column's
   width, by the 240px+ auto-fill column count, + 277px), so the loading row, the boot skeleton and the card that
   replaces them share one height: nothing moves when it arrives. A grid under 900px keeps the card's own shape (the
   art would leave the rest too little room). */
@container kd-drops (min-width:900px){
 .kd-drops-grid.is-single>.kd-drop{--n:3;grid-column:1/-1;display:grid;grid-template-columns:calc((100% + 2px - (var(--n) - 1) * 24px) / var(--n) + 277px) minmax(0,1fr);align-items:center}
 .kd-drops-grid.is-single>.kd-drop>.kd-drop-art{border-bottom:0;border-right:1px solid var(--fine-line)}
 .kd-drops-grid.is-single .kd-drop-body{width:100%;max-width:624px;padding:32px 48px}
 .kd-drops-grid.is-single .kd-drop-name{margin-top:16px;font-size:var(--type-title,32px);line-height:40px;letter-spacing:-.8px}
 .kd-drops-grid.is-single .kd-drop-by{margin-top:6px;font-size:var(--type-body,14px);line-height:20px}
 .kd-drops-grid.is-single .kd-drop-facts{gap:24px;margin-top:24px;padding-top:24px}
 .kd-drops-grid.is-single .kd-drop-facts dt{font-size:var(--type-meta,13px);line-height:18px}
 .kd-drops-grid.is-single .kd-drop-facts dd{height:30px;margin-top:6px;font-size:var(--type-panel,24px);line-height:30px;letter-spacing:-.4px}
 .kd-drops-grid.is-single .kd-drop-facts dd .price-display small{font-size:var(--type-meta,13px)}
 .kd-drops-grid.is-single .kd-drop-progress{margin-top:24px}
 .kd-drops-grid.is-single .kd-drop-progress>p{font-size:var(--type-meta,13px);line-height:18px}
 .kd-drops-grid.is-single .kd-drop-progress progress{height:6px;border-radius:6px}
 .kd-drops-grid.is-single .kd-drop .kd-drop-action{width:auto;min-width:200px;min-height:var(--control-lg,44px);margin-top:28px;align-self:flex-start;padding-inline:28px}
}
@container kd-drops (min-width:900px) and (max-width:1031.98px){.kd-drops-grid.is-single .kd-drop-body{padding:28px 32px}.kd-drops-grid.is-single .kd-drop-name{font-size:var(--type-panel,24px);line-height:32px;letter-spacing:-.5px}}
@container kd-drops (min-width:1032px){.kd-drops-grid.is-single>.kd-drop{--n:4}}
@container kd-drops (min-width:1296px){.kd-drops-grid.is-single>.kd-drop{--n:5}}
@container kd-drops (min-width:1560px){.kd-drops-grid.is-single>.kd-drop{--n:6}}
@container kd-drops (min-width:1824px){.kd-drops-grid.is-single>.kd-drop{--n:7}}
/* Empty cards on Drops, Apply ("Your applications") and My Drops (UI round 3): the kit's card at the content width,
   lined up with the headings above it (its sentence and button stay centred inside). */
:is(.kd-drops,.kd-creator)>.empty-card,.kd-creator :is(#kd-creator-signin,.kd-creator-pending,.kd-creator-empty)>.empty-card,.kd-section-body>.empty-card{max-width:none;margin-inline:0}

/* Mint page */
.kd-mint .kd-phases>div{flex-wrap:nowrap}
.kd-phase-row small span[data-countdown]{font-variant-numeric:tabular-nums}
.kd-tag{display:inline-flex;align-items:center;min-height:var(--badge-height,22px);margin-left:6px;padding:var(--badge-pad-block,2px) var(--badge-pad-inline,8px);border-radius:var(--badge-radius,var(--radius-pill,999px));border:1px solid var(--line);font-style:normal;font-size:var(--badge-size,var(--type-xs,11px));font-weight:var(--badge-weight,550);line-height:1.3;color:var(--secondary-text);vertical-align:middle;white-space:nowrap}
.kd-tag-live{color:var(--badge-live-color,var(--green));border-color:var(--badge-live-border,color-mix(in srgb,var(--green) 40%,var(--line)));background:var(--badge-live-bg,color-mix(in srgb,var(--green) 12%,var(--surface)))}
.kd-phase-pick{display:inline-flex;align-items:center;min-height:var(--control-sm,32px);margin-top:6px;padding:0;font-size:var(--type-meta,13px);text-decoration:underline;text-underline-offset:2px}
.kd-elig{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-12px 0 20px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--quiet-surface);font-size:13px;line-height:1.5}
.kd-elig>span{flex:1;min-width:160px}
.kd-elig svg{width:15px;height:15px;flex:none}
.kd-elig .modal-note{margin:0}
.kd-elig-ok{border-color:transparent;background:var(--brand-soft);color:var(--ink)}
.kd-elig-ok svg{color:var(--green)}
.kd-elig-no svg{color:var(--secondary-text)}
.kd-fee-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--secondary-text)}
.kd-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:13px}
.kd-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kd-shell{padding:40px 0;display:grid;gap:14px;justify-items:start}
.kd-shell h1{margin:0}
.kd-shell p{margin:0;color:var(--secondary-text);line-height:1.6}
.kd-state-actions{display:flex;flex-wrap:wrap;gap:10px}

/* Mint page (UI round 2, kalos-drops.js mintLayoutHtml; v1 and SeaDrop alike): the art and a compact About on the left,
   ONE panel on the right that reads top to bottom: the status pill, the name and creator, the phase on now with its
   price, the minted bar, who can mint, the quantity and the total, ONE Mint button, the phases and the contract details
   (closed). Phones: the panel first, with a small art, so the Mint button is on the first screen. */
.kd-mint.mint-layout{grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:48px;margin-top:20px;align-items:start}
.kd-about{padding:24px 2px 0}
.kd-about-text{margin:0;max-width:68ch;font-size:var(--type-body,14px);line-height:1.7;color:var(--secondary-text);white-space:pre-line}
.kd-about-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font-size:var(--type-meta,13px);line-height:18px;color:var(--secondary-text)}
.kd-about-facts>span{display:inline-flex;align-items:center;gap:6px}
.kd-about-facts svg{width:15px;height:15px;flex:none;color:var(--gold)}
.kd-about .kd-links{margin-top:16px}
.kd-about .kl-gallery{margin-top:16px}
.kd-panel.mint-panel{padding:24px;border-radius:var(--radius-panel,20px)}
.kd-panel-head{display:flex;align-items:flex-start;gap:14px;min-width:0}
.kd-panel-head>div{flex:1;min-width:0}
.kd-panel-thumb{display:none;flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--quiet-surface)}
.kd-panel-thumb>.art{position:relative;display:block;width:100%;height:100%;margin:0;border:0;border-radius:inherit;box-shadow:none}
.kd-panel-status{display:flex;align-items:center;height:24px}
.kd-panel-status [data-countdown]{font-variant-numeric:tabular-nums}
.kd-panel h1{margin:10px 0 0;font-size:var(--type-panel,24px);line-height:30px;font-weight:650;letter-spacing:-.5px;color:var(--strong);overflow-wrap:anywhere}
.kd-panel .mint-byline{margin:4px 0 0;font-size:var(--type-meta,13px);line-height:18px;color:var(--secondary-text)}
.kd-panel>.kl-notice{margin:16px 0 0}
/* The phase on now (or next, or last): its name and price large, its time under them. */
.kd-now{margin:20px 0 0;padding:16px 18px;border:1px solid var(--fine-line);border-radius:16px;background:var(--quiet-surface)}
.kd-now-main{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kd-now-name{min-width:0;font-size:var(--type-section,20px);line-height:26px;font-weight:650;letter-spacing:-.3px;color:var(--strong);overflow-wrap:anywhere}
.kd-now-name .kd-tag{vertical-align:3px}
.kd-now-price{flex:none;font-size:var(--type-section,20px);line-height:26px;font-weight:650;color:var(--strong);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.kd-now-price .price-display small{margin-left:4px;font-size:var(--type-sm,12px);font-weight:450;color:var(--secondary-text)}
.kd-each{margin-left:6px;font-size:var(--type-sm,12px);font-weight:450;color:var(--secondary-text)}
.kd-now-when{margin:6px 0 0;font-size:var(--type-meta,13px);line-height:18px;color:var(--secondary-text);font-variant-numeric:tabular-nums}
.kd-panel .mint-progress{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:20px 0 0;font-size:var(--type-sm,12px);line-height:16px;color:var(--secondary-text);font-variant-numeric:tabular-nums}
.kd-panel .mint-progress b{font-weight:600;color:var(--ink)}
.kd-panel .mint-progress progress{display:block;width:100%;height:6px;margin:0;border:0;border-radius:6px;overflow:hidden;-webkit-appearance:none;appearance:none;background:var(--quiet-surface)}
.kd-panel .mint-progress progress::-webkit-progress-bar{background:var(--quiet-surface)}
.kd-panel .mint-progress progress::-webkit-progress-value{background:var(--green);border-radius:6px}
.kd-panel .mint-progress progress::-moz-progress-bar{background:var(--green);border-radius:6px}
/* Who can mint, one plain line (the allowlist answer, or the public rule). */
.kd-panel .kd-access{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:12px 14px;border:1px solid var(--fine-line);border-radius:12px;background:var(--surface);font-size:var(--type-meta,13px);line-height:18px;color:var(--ink)}
.kd-panel .kd-access>span{flex:1;min-width:160px}
.kd-panel .kd-access>svg{width:16px;height:16px;flex:none;color:var(--secondary-text)}
.kd-panel .kd-access.kd-elig-ok{border-color:transparent;background:var(--brand-soft)}
.kd-panel .kd-access.kd-elig-ok>svg{color:var(--green)}
.kd-panel .kd-access .modal-note{margin:0}
.kd-panel .kd-access .kl-elig-list{margin:6px 0 0;padding-left:18px}
/* The quantity stepper (− n +) and the total on one row, then the one Mint button. */
.kd-buy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 0}
.kd-stepper{display:inline-flex;align-items:center;flex:none;height:var(--control-lg,44px);padding:2px;border:1px solid var(--fine-line);border-radius:999px;background:var(--recessed)}
.kd-stepper:has(>input:focus-visible){border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
.kd-stepper>button{display:grid;place-items:center;width:40px;height:38px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
@media(hover:hover){.kd-stepper>button:hover:not(:disabled){background:var(--hover-surface,var(--quiet-surface))}}
.kd-stepper>button:disabled{opacity:.4;cursor:not-allowed}
.kd-stepper svg{width:16px;height:16px}
.kd-stepper>input{width:44px;height:38px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;font-size:var(--type-control,16px);font-weight:600;color:var(--strong);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.kd-stepper>input:is(:focus,:focus-visible){outline:none;border:0;box-shadow:none;background:transparent}
.kd-stepper>input::-webkit-inner-spin-button,.kd-stepper>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.kd-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.kd-total>span{font-size:var(--type-sm,12px);line-height:16px;color:var(--secondary-text)}
.kd-total>strong{font-size:var(--type-section,20px);line-height:26px;font-weight:650;color:var(--strong);white-space:nowrap;font-variant-numeric:tabular-nums}
.kd-total .price-display small{margin-left:4px;font-size:var(--type-sm,12px);font-weight:450;color:var(--secondary-text)}
.kd-panel .purchase-shortfall{margin:16px 0 0}
.kd-panel>.button.primary.full{min-height:var(--control-lg,44px);margin-top:16px;font-size:var(--type-control,16px);font-weight:650} /* the one Mint button */
.kd-panel .purchase-fund{margin-top:8px}
.kd-panel .mint-balance{margin:10px 0 0;text-align:center;font-size:var(--type-sm,12px);line-height:16px;color:var(--secondary-text)}
/* The phases (two or more): past, now and next, each with its time and price; the rows are the picker when two stages
   are open to the wallet (kalos-launch.js K112). */
.kd-timeline{margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--fine-line)}
.kd-panel-label{margin:0 0 10px;font-size:var(--type-meta,13px);line-height:18px;font-weight:600;color:var(--secondary-text)}
.kd-panel .mint-phases{margin:0;border:1px solid var(--fine-line);border-radius:14px;overflow:hidden}
.kd-panel .mint-phases>.kd-phase-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;background:transparent;color:var(--secondary-text)}
.kd-panel .mint-phases>.kd-phase-row+.kd-phase-row{border-top:1px solid var(--fine-line)}
.kd-panel .mint-phases>.kd-phase-row.current{background:var(--brand-soft);color:var(--ink)}
.kd-panel .kd-phase-row>span:nth-child(2){flex:1;min-width:0}
.kd-panel .kd-phase-row>span:nth-child(2)>:is(strong,small){display:block}
.kd-panel .kd-phase-row strong{font-size:var(--type-meta,13px);line-height:18px;font-weight:600;color:var(--ink)}
.kd-panel .kd-phase-row small{margin-top:2px;font-size:var(--type-sm,12px);line-height:16px}
.kd-panel .kd-phase-row>span:last-child{flex:none;white-space:nowrap;text-align:right;font-size:var(--type-meta,13px);font-weight:600;color:var(--ink)}
.kd-panel .kd-phase-row.is-ended{opacity:.75}
/* The contract words, closed by default. */
.kd-details{margin:20px 0 0;border-top:1px solid var(--fine-line)}
.kd-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 0 0;cursor:pointer;list-style:none;font-size:var(--type-meta,13px);font-weight:550;color:var(--secondary-text)}
.kd-details>summary::-webkit-details-marker{display:none}
.kd-details>summary::after{content:'';flex:none;width:16px;height:16px;background:var(--select-chevron) center/16px 16px no-repeat}
.kd-details[open]>summary::after{transform:rotate(180deg)}
@media(hover:hover){.kd-details>summary:hover{color:var(--strong)}}
.kd-details dl{display:grid;gap:10px;margin:8px 0 0}
.kd-details dl>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;font-size:var(--type-sm,12px);line-height:1.5}
.kd-details dt{color:var(--secondary-text)}
.kd-details dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.kd-details a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kd-details a{display:inline-block;padding-block:5px;margin-block:-5px} /* UI round 3: a 24px+ tap area; the row is as it was */
.kd-panel>.text-button{margin-top:12px}
/* The review: price, the Kalos fee, gas and the total; "You need X more HYPE" said as an alert above Confirm. */
.kd-review{margin:16px 0 0}
.kd-plus-gas{margin-left:6px;font-size:var(--type-sm,12px);font-weight:450;color:var(--secondary-text)}
.modal-note.kd-short{color:var(--negative,#b3261e);font-weight:550}
@media(max-width:1100px){.kd-mint.mint-layout{gap:32px}}
@media(max-width:900px){
 .kd-mint.mint-layout{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:12px}
 .kd-mint .kd-panel{grid-row:1}
 .kd-panel-thumb{display:block}
 .kd-panel h1{margin-top:8px;font-size:var(--type-section,20px);line-height:26px}
}
@media(max-width:600px){
 .kd-panel.mint-panel{padding:18px 16px}
 .kd-now{padding:14px 16px}
 .kd-now-name,.kd-now-price{font-size:var(--type-control,16px);line-height:22px}
}

/* Creator dashboard rows */
.kd-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.kd-row>.art,.kd-manage-head>.art{width:44px;height:44px;border-radius:8px;overflow:hidden;flex:none}
.kd-row strong{display:block;font-size:14px;overflow-wrap:anywhere}
.kd-row small{display:block;margin-top:3px;font-size:12px;color:var(--secondary-text)}
.kd-row .kd-actions{margin:0;justify-content:flex-end}

/* Manage */
.kd-manage-head{display:flex;align-items:center;gap:16px;margin:8px 0 26px}
.kd-manage-head>.art{width:64px;height:64px;border-radius:12px}
.kd-manage-head h1{margin:4px 0;font-size:30px;letter-spacing:-.8px;line-height:1.15}
.kd-manage-head p{margin:0;font-size:13px;color:var(--secondary-text)}
.kd-manage-head p a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kd-manage-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start;max-width:1220px}
.kd-manage .launch-application-card{max-width:none}
.kd-card .detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;margin:0;border-top:0;border-bottom:1px solid var(--fine-line,var(--line));font-size:13px}
.kd-card .detail-row>strong{min-width:0;text-align:right}.kd-card .detail-row a.person-link{white-space:nowrap}
.kd-card .detail-row a{color:inherit}
.kd-card .launch-form-footer{justify-content:space-between;flex-wrap:wrap}

/* Dialogs */
.kd-dialog{display:grid;gap:12px;min-width:min(380px,80vw)}
.kd-dialog h2,.kd-dialog p{margin:0}
.kd-dialog p{line-height:1.55}
.kd-dialog .kd-actions{justify-content:flex-end}

@media (max-width:1000px){
  .kd-apply-grid,.kd-manage-grid{grid-template-columns:minmax(0,1fr)}
  .kd-apply-grid{gap:16px}
  /* "How it works" above the form: the four steps side by side in two columns, without the joining line. */
  .kd-steps-card{position:static;order:-1;padding:20px 24px}
  .kd-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
  .kd-steps li{padding-bottom:0}
  .kd-steps li::before{display:none}
}
@media (max-width:640px){
  .kd-row{grid-template-columns:44px minmax(0,1fr);}
  .kd-row>.kd-chip{grid-column:2;justify-self:start}
  .kd-row .kd-actions{grid-column:1/-1;justify-content:flex-start}
  .kd-app-head{flex-direction:column}
  .kd-chips{justify-content:flex-start}
  .kd-manage-head h1{font-size:24px}
  .kd-apply .launch-application-card{padding:22px 18px}
  .kd-group{padding:24px 0}
  /* Phones: "How it works" is a compact list of the step titles (the details repeat what the form already says). */
  .kd-steps-card{padding:16px 18px}
  .kd-steps-title{margin-bottom:12px;font-size:15px}
  .kd-steps{grid-template-columns:minmax(0,1fr);gap:10px}
  .kd-steps li{grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center}
  .kd-steps small{display:none}
  .kd-steps strong{padding-top:0;font-size:var(--type-meta,13px)}
  .kd-step-n{width:24px;height:24px;font-size:11px}
  .kd-powers{padding:16px}
  .kd-terms>summary,.kd-terms-missing{padding:12px 16px}
  .kd-terms-text{margin:0 16px 16px;padding:12px}
  .kd-apply .launch-form-footer{flex-direction:column-reverse;align-items:stretch} /* Submit first, then the note, then Back */
  .kd-apply #kalos-apply-form .kd-apply-back+.kd-footnote{text-align:left}
  .kd-apply-back{align-self:flex-start}
  .kd-apply-steps{gap:8px;padding-bottom:16px;margin-bottom:20px}
  .kd-apply-steps li+li::before{width:16px}
  .kd-apply #kalos-apply-form .kd-footnote{flex:none}
  .kd-apply .launch-form-footer .button{width:100%}
  .kd-list>.kd-row{padding-inline:16px}
  .kd-list>.kd-app{padding:16px}
  .kd-list .kd-actions>.kd-danger{margin-left:0}
}

/* Apply: terms v2 summary ("What Kalos can do on your contract"; DESIGN-SOCIAL-LAUNCH §E.2): a calm card whose footer
   row is the full terms (.kd-terms). The function names open under "Contract details" (powersHtml). */
.kd-powers{padding:20px 22px;border:1px solid var(--fine-line,var(--line));border-radius:16px 16px 0 0;background:var(--quiet-surface);font-size:var(--type-meta,13px);line-height:1.6}
.kd-powers h3{margin:0 0 6px;font-size:var(--type-body,14px);font-weight:600;line-height:1.4;letter-spacing:-.1px}
.kd-powers>p{margin:0 0 14px;color:var(--secondary-text)}
.kd-powers ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.kd-powers li{position:relative;padding-left:18px;color:var(--ink);overflow-wrap:anywhere}
.kd-powers li::before{content:'';position:absolute;left:3px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--secondary-text)}
.kd-powers-more>summary{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-top:2px;cursor:pointer;color:var(--secondary-text);font-weight:550;list-style:none}
.kd-powers-more>summary::-webkit-details-marker{display:none}
.kd-powers-more>p{margin:4px 0 0;padding:12px 14px;border:1px solid var(--fine-line,var(--line));border-radius:10px;background:var(--surface);color:var(--secondary-text)}
.kd-powers code{padding:1px 4px;border-radius:5px;background:var(--recessed);color:var(--ink);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}

/* SeaDrop dashboard: the creator fee cards under the Overview tab */
.kl-fee-cards{margin-top:4px}

/* Collection header (banner.css lays it out): the gear icon + About text and links (patchCollectionHeader) */
body[data-view=marketplace] .collection-header .kc-actions>.kd-gear svg{width:18px;height:18px}

.collection-lore p[data-kd-lore]{white-space:pre-line;overflow-wrap:anywhere}
.collection-lore .kd-lore-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:13px}
.collection-lore .kd-lore-links a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* About on the collection page: trader.css hides the classic lore there; it shows (collapsed) once the collection has a
   Kalos description or links (patchCollectionLore sets data-kd-about), in Items and Pro alike. */
body[data-view=marketplace] .collection-lore[data-kd-about]{display:block;grid-column:1/-1;min-width:0;padding:4px 0 12px}
body[data-view=marketplace] .collection-lore[data-kd-about]>p{max-width:760px;margin:8px 0 0;font-size:14px;line-height:1.6}

/* Drops loading (kalos-drops.js dropsSkeleton): drop cards in their own geometry, placeholder text as quiet bars. Only the
   first row shows (the next rows are 0 tall and clipped), so the cards that arrive fill it without pushing the page. */
.kd-drops-grid.is-loading{grid-template-rows:auto;grid-auto-rows:0;row-gap:0;overflow:hidden}
.kd-drop.is-skeleton{pointer-events:none;box-shadow:none}
.kd-drop .kd-sk-art{position:absolute;inset:0;display:block;width:auto;max-width:none;aspect-ratio:auto;border-radius:0;background:var(--quiet-surface)}
.kd-sk-text{color:transparent!important;background:var(--quiet-surface);border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kd-sk-pill{border-color:transparent!important;background:var(--quiet-surface)!important}
.kd-sk-pill>.kd-sk-text{background:none}
.kd-sk-button{color:transparent!important;background:var(--quiet-surface)!important;border-color:transparent!important;box-shadow:none!important}
.kd-sk-button>.kd-sk-text{background:none}
@media(prefers-reduced-motion:no-preference){.kd-drop.is-skeleton{animation:kd-sk-breathe 1.6s ease-in-out infinite alternate}@keyframes kd-sk-breathe{to{opacity:.55}}}

/* Shared field/tap roles; badge labels remain compact status text. */
@media(max-width:900px){
  .kd-dm textarea{font-size:var(--type-control,16px)}
  .kd-check,.kd-powers-more>summary,.kd-phase-pick{min-height:var(--tap-min,44px)} /* the terms row is 48px everywhere */
  .kd-links a,.collection-lore .kd-lore-links a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap-min,44px);min-height:var(--tap-min,44px)}
}

/* Page views use an underline; My Drops and Apply remain independent actions. */
.kd-drops-bar{gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.kd-drops-actions{display:flex;align-items:center;gap:20px;margin-left:0;padding-left:24px;border-left:1px solid var(--fine-line)}
.kd-drops-actions>a{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap}
.kd-drops-actions svg{width:16px;height:16px}
.kd-label-short{display:none}
.kd-drops-bar .drops-navigation[data-sliding-switch]::before{top:auto;bottom:0;height:2px;transform:translateX(var(--pill-x));border-radius:2px;background:var(--ink);box-shadow:none}
@media(max-width:700px){.kd-drops-bar{flex-wrap:nowrap;gap:12px}.kd-drops-bar .drops-navigation{width:auto;flex:none;gap:18px}.kd-drops-bar .drops-navigation>button{flex:none;min-width:44px;padding:0 1px}.kd-drops-actions{padding-left:0;border-left:0;gap:12px}.kd-drops .kd-head-link{min-height:44px}.kd-apply-cta .kd-label-full{display:none}.kd-apply-cta .kd-label-short{display:inline}}
@media(max-width:360px){.kd-drops-bar .drops-navigation .kd-label-full{display:none}.kd-drops-bar .drops-navigation .kd-label-short{display:inline}}