/* Shared recipient profile and editor preview; landscape export is independent. */
#card-face { --card-content-inset: clamp(1.25rem, 5vw, 2rem); width: 100%; margin: auto; overflow-wrap: anywhere; color: var(--card-text); background: var(--card-paper); border: 1px solid var(--card-border); border-radius: 1rem; overflow: hidden; }
#card-sheet { display: block; }
#card-cover { position: relative; aspect-ratio: 4 / 1; background: var(--card-cover); overflow: hidden; }
#card-cover::before, #card-cover::after { content: ''; position: absolute; pointer-events: none; }
#card-face #card-cover::before { width: 9rem; height: 9rem; top: -5rem; right: 2rem; border: 1px solid rgb(255 255 255 / .35); }
#card-face #card-cover::after { width: 7rem; height: 7rem; top: 1.5rem; right: -3rem; background: rgb(255 255 255 / .08); }
#card-identity { padding: 1.35rem var(--card-content-inset) 0; }
#card-person { min-width: 0; }
#card-person-text { min-width: 0; }
#card-avatar { position: relative; width: 5.5rem; height: 5.5rem; margin: -4rem 0 1rem; border: .3rem solid var(--card-surface); border-radius: 50%; overflow: hidden; background: var(--card-surface); }
#card-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
#card-name { margin: 0; color: var(--card-text); font-size: clamp(1.875rem, 5vw, 2.125rem); font-weight: 650; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
#card-title { margin: .5rem 0 0; color: var(--card-ink); font-size: 1rem; font-weight: 500; line-height: 1.6; }
#card-organization { margin: .3rem 0 0; color: var(--card-muted); font-size: .875rem; line-height: 1.6; }
#card-face[data-placeholder=true] #card-name { color: var(--card-muted); }
#card-face #viewer-contact, #card-contact-preview { margin: 1.5rem var(--card-content-inset) 0; display: grid; gap: .5rem; }
#card-face #viewer-contact .sim-btn-row { display: flex; }
#card-face #save-contact, #card-contact-preview .sim-btn { width: 100%; min-height: 3.25rem; padding: .85rem 1.25rem; border-radius: 2rem; font-size: 1rem; font-weight: 600; background: var(--card-ink); color: var(--card-surface); }
#card-face #save-contact:hover { background: var(--card-action-hover); }
#card-face :focus-visible { outline: 3px solid var(--card-ink); outline-offset: 3px; }
#card-app #card-contact-preview button:disabled { opacity: 1; cursor: default; }
#card-face #viewer-contact p, #card-contact-preview p { margin: 0; color: var(--card-muted); font-size: .8125rem; line-height: 1.65; text-align: center; }
#card-contacts { display: grid; margin: 1.25rem var(--card-content-inset) 0; }
#card-contacts a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; align-items: center; gap: .8rem; min-height: 4rem; padding: .65rem 0; border-bottom: 1px solid var(--card-border); color: var(--card-text); text-decoration: none; }
#card-contacts a:last-child { border-bottom: 0; }
#card-contacts [data-contact-icon] { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--card-tint); color: var(--card-ink); }
#card-contacts svg { display: block; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#card-contacts [data-contact-copy] { display: grid; gap: .1rem; min-width: 0; }
#card-contacts [data-contact-copy] > span:first-child { color: var(--card-muted); font-size: .875rem; }
#card-contacts [data-contact-copy] > span:last-child { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
#card-contacts [data-contact-arrow] { color: var(--card-muted); font-size: 1rem; }
#card-contacts a:hover [data-contact-copy] > span:last-child { text-decoration: underline; text-underline-offset: .2em; }
#card-sheet { padding-bottom: 1.5rem; }
#card-content { display: grid; gap: 1.75rem; padding: 1.75rem var(--card-content-inset); border-top: 1px solid var(--card-border); }
#card-content:empty { display: none; }
#card-tagline { margin: 0; color: var(--card-text); font-size: 1rem; font-weight: 500; line-height: 1.8; }
#card-tags { display: flex; flex-wrap: wrap; gap: .4rem .65rem; margin: -.5rem 0 0; padding: 0; list-style: none; }
#card-tags li { color: var(--card-ink); font-size: .875rem; }
#card-tags li + li::before { content: '·'; margin-right: .65rem; color: var(--card-muted); }
#card-content :is(h2, h3) { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; line-height: 1.5; color: var(--card-muted); }
#card-content section > p { margin: 0; white-space: pre-wrap; font-size: 1rem; line-height: 1.85; color: var(--card-text); }
#card-links { display: grid; }
#card-links a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: .8rem; min-height: 4.25rem; padding: .75rem 0; border-bottom: 1px solid var(--card-border); color: var(--card-text); text-decoration: none; font-size: 1rem; }
#card-links a:last-child { border-bottom: 0; }
#card-links a:hover [data-link-copy] > span:first-child { color: var(--card-ink); text-decoration: underline; text-underline-offset: .2em; }
#card-links [data-link-copy] > span:first-child { font-weight: 500; line-height: 1.5; }
#card-links [data-link-copy] { display: grid; min-width: 0; gap: .25rem; }
#card-links [data-link-copy] > span:last-child { font-size: .8125rem; line-height: 1.5; color: var(--card-muted); }
#card-links [data-link-icon] { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--card-tint); color: var(--card-ink); }
#card-links [data-link-icon] svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
#card-links [data-link-icon] svg[data-social-platform]:not([data-social-platform=link]),
#card-contacts [data-contact-icon] svg[data-social-platform]:not([data-social-platform=link]) { fill: currentColor; stroke: none; }
#card-qr-details { padding: 0 var(--card-content-inset); border-top: 1px solid var(--card-border); }
#card-qr-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .7rem 0; cursor: pointer; list-style: none; color: var(--card-muted); font-size: .875rem; }
#card-qr-details summary::-webkit-details-marker { display: none; }
#card-qr-details summary::after { content: ''; width: .45rem; height: .45rem; margin-right: .25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
#card-qr-details[open] summary::after { transform: rotate(225deg); }
#card-qr-details summary:hover { color: var(--card-ink); }
#card-footer { display: grid; justify-items: center; gap: .65rem; padding: .5rem 0 1.5rem; color: var(--card-muted); font-size: .875rem; }
#card-qr { display: block; width: 10rem; height: 10rem; max-width: 100%; image-rendering: pixelated; }
body#card-viewer { background: var(--card-surface); }
#viewer-app { --card-content-inset: clamp(1.25rem, 5vw, 2rem); max-width: 34rem; padding: env(safe-area-inset-top) env(safe-area-inset-right) max(1.5rem, env(safe-area-inset-bottom)) env(safe-area-inset-left); }
#viewer-app #card-face { border: 0; border-radius: 0; }
#viewer-app #status:not(:empty), #viewer-app #error, #viewer-entry-help { margin: 1.5rem var(--card-content-inset); }
#viewer-actions { margin: 1.5rem var(--card-content-inset) 0; padding-top: 0; border-top: 0; }
#viewer-app #viewer-actions .sim-btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
#viewer-app #viewer-actions .sim-btn { font-size: .8125rem; min-width: 0; padding: .75rem .5rem; border: 1px solid var(--card-border); background: var(--card-paper); color: var(--card-ink); }
#viewer-app #viewer-actions .sim-btn:hover { background: var(--card-tint-hover); color: var(--card-link-hover); }
#viewer-app :focus-visible { outline: 3px solid var(--card-ink); outline-offset: 3px; }
#viewer-app > .sim-btn-row { margin: 0 var(--card-content-inset); }
#viewer-app #create-own { margin: .75rem var(--card-content-inset) 0; font-size: .8125rem; }
#viewer-app #create-own.sim-btn-primary { margin-top: 1rem; }
/* The editor follows the selected card theme without changing the saved data. */
#card-app { --sim-brand-primary: var(--card-ink); --sim-brand-hover: var(--card-action-hover); --sim-brand-secondary: var(--card-tint); caret-color: var(--card-ink); accent-color: var(--card-ink); }
#card-app ::selection { color: var(--card-ink); background: var(--card-tint-hover); }
#card-app .sim-btn-primary { background: var(--card-ink); color: var(--card-surface); }
#card-app .sim-btn-primary:hover { background: var(--card-action-hover); }
#card-app .sim-btn-secondary, #card-app .sim-btn-reset { background: var(--card-tint); color: var(--card-ink); }
#card-app .sim-btn-secondary:hover, #card-app .sim-btn-reset:hover { background: var(--card-tint-hover); color: var(--card-link-hover); }
#card-app :focus-visible, #card-app #role-options label:has(:focus-visible), #card-app #style-options label:has(:focus-visible) { outline: 3px solid var(--card-ink); outline-offset: 3px; }
#card-app #card-form input:focus, #card-app #card-form textarea:focus { border-color: var(--card-ink); }
#card-app #role-options label:has(:checked) { color: var(--card-ink); background: var(--card-tint); border-color: var(--card-ink); }
#card-app #editor-tabs button[aria-selected=true], #card-app #mobile-view button[aria-pressed=true] { color: var(--card-ink); }
#card-app #style-options label:has(:checked) { color: var(--card-ink); }
#card-app #style-options label:has(:checked)::before { outline-color: var(--card-ink); }
#card-app #remove-avatar, #card-app #edit-avatar, #card-app #download-qr, #card-app #secondary-share-actions a, #card-app #crop-tools button, #card-app #preview-feedback { color: var(--card-ink); }
#card-app #avatar-preview, #card-app input[type=file]::file-selector-button { color: var(--card-ink); background: var(--card-tint); }
#card-app #card-form [data-visibility] input:checked { background: var(--card-ink); }
@media (min-width: 768px) {
  body#card-viewer { background: var(--card-page); }
  #viewer-app { padding-top: 2rem; }
  #viewer-app #card-face { border: 1px solid var(--card-border); border-radius: 1rem; }
}
@media (prefers-contrast: more) {
  #card-contacts a, #card-content, #card-qr-details, #card-links a { border-color: var(--card-control-border); }
  #card-face #viewer-contact p, #card-contact-preview p, #card-organization, #card-content :is(h2, h3) { color: var(--card-text); }
}
/* Direction A: neutral surfaces and theme-colored actions. */
#card-app, #viewer-app { --card-button-bg: var(--card-primary); --card-button-fg: var(--card-on-primary); }
#card-app .sim-btn-primary, #viewer-app .sim-btn-primary, #card-face #save-contact, #card-app #card-contact-preview .sim-btn { background: var(--card-button-bg); color: var(--card-button-fg); }
#card-cover { border-bottom: 3px solid var(--card-highlight); }
#card-app #editor-tabs button[aria-selected=true] { box-shadow: none; }
#card-app #style-fields { display: grid; container-type: inline-size; gap: .5rem; margin: 0; }
#card-app #style-fields legend { float: none; margin: 0; padding: 0; text-align: left; font-size: .875rem; font-weight: 600; color: var(--card-text); }
/* Compact swatches retain native radio semantics and 44px touch targets. */
#card-app #style-options { position: relative; display: grid; grid-template-columns: repeat(4, 2.75rem); gap: .375rem .5rem; justify-content: center; }
#card-app #style-options label { position: relative; display: grid; place-items: center; width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--card-text); cursor: pointer; }
#card-app #style-options label::before { width: 1.75rem; height: 1.75rem; border-radius: 50%; box-shadow: none; outline: none; }
#card-app #style-options label:has(:checked) { background: transparent; }
#card-app #style-options label:has(:checked)::before { outline: 2px solid var(--card-primary); outline-offset: 3px; }
#card-app #style-options label:has(:checked)::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--card-on-primary); font-size: .875rem; font-weight: 650; pointer-events: none; }
#card-app #style-options label:has(:focus-visible) { outline: 2px solid var(--card-primary); outline-offset: 0; }
#card-app #style-options input:focus-visible { outline: none; }
#card-app #style-options :is(label, #custom-color-option) > span { position: absolute; z-index: 2; bottom: calc(100% + .375rem); left: 50%; transform: translateX(-50%); width: max-content; padding: .3rem .5rem; border-radius: .375rem; background: var(--card-text); color: var(--card-surface); font-size: .8125rem; font-weight: 500; line-height: 1.5; white-space: nowrap; box-shadow: 0 2px 6px rgb(0 0 0 / .12); visibility: hidden; opacity: 0; pointer-events: none; }
#card-app #style-options :is(label, #custom-color-option) > span::after { content: ''; position: absolute; inset: 100% 0 auto; height: .5rem; }
#card-app #style-options :is(label, #custom-color-option):not([data-tooltip-dismissed]):is(:hover, :focus-within) { z-index: 3; }
#card-app #style-options :is(label, #custom-color-option):not([data-tooltip-dismissed]):is(:hover, :focus-within) > span { visibility: visible; opacity: 1; pointer-events: auto; }
#card-app #style-fields small { color: var(--card-muted); font-size: .75rem; font-weight: 400; }
#card-app button:disabled, #viewer-app button:disabled { opacity: 1; background: var(--card-subtle); color: var(--card-muted); cursor: wait; }
#card-app #card-contact-preview button:disabled { background: var(--card-primary); color: var(--card-on-primary); cursor: default; }
#card-app .sim-btn-danger { background: var(--card-danger); color: var(--card-surface); }
#card-app .sim-btn-danger:hover { background: var(--card-danger-hover); }
/* The wheel invites free color selection; the confirmed choice replaces its
   fill while the plus remains. Native input keeps the full 44px target. */
#custom-color-option { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
#card-app #custom-color { position: absolute; inset: 0; opacity: 0; display: block; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
#custom-color-option::before { content: ''; position: absolute; inset: .5rem; border: 1px solid var(--card-control-border); border-radius: 50%; background: radial-gradient(circle, var(--card-surface) 0 42%, transparent 46%), conic-gradient(#e75151, #eab54e, #62af65, #39a8b5, #5776c9, #b966b3, #e75151); pointer-events: none; }
#custom-color-option::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--card-text); font-size: .875rem; font-weight: 600; line-height: 1; pointer-events: none; }
#custom-color-option:has(:checked)::before { background: var(--card-primary); outline: 2px solid var(--card-ink); outline-offset: 3px; }
#custom-color-option:has(:checked)::after { color: var(--card-on-primary); }
#custom-color-option:has(:focus-visible) { outline: 2px solid var(--card-ink); outline-offset: 0; }
/* Twelve choices form a centered rectangle: 4 × 3 in narrow panels, 6 × 2
   when six full 44px targets and their gaps fit. Custom stays last. */
@container (min-width: 18rem) {
  #card-app #style-options { grid-template-columns: repeat(6, 2.75rem); column-gap: .25rem; }
}
#card-face #card-contact-preview .sim-btn:hover, #card-face #save-contact:hover { color: var(--card-on-primary); }
#card-app #example-row { margin-bottom: .2rem; }
/* A pale custom fill still has a visible control boundary. */
#card-app:has(#card-face[data-card-style=custom]) .sim-btn-primary,
#card-face[data-card-style=custom] #save-contact,
#card-face[data-card-style=custom] #card-contact-preview .sim-btn { border: 1px solid var(--card-ink); }
#card-app:has(#card-face[data-card-style=custom]) .sim-btn,
#viewer-app:has(#card-face[data-card-style=custom]) .sim-btn { transition-property: transform; }
/* Cover controls use the same theme and native radio semantics as the palette. */
#cover-fields { margin-top: .5rem; }
#cover-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .4rem 0 .5rem; }
#cover-options label { position: relative; display: grid; gap: .45rem; min-width: 0; min-height: 2.75rem; padding: .4rem; border: 1px solid var(--card-control-border); border-radius: .65rem; cursor: pointer; text-align: center; color: var(--card-text); }
#cover-options label:hover { background: var(--card-subtle); }
#cover-options label:has(:checked) { outline: 2px solid var(--card-ink); outline-offset: 2px; }
#cover-options label:has(:focus-visible) { outline: 3px solid var(--card-ink); outline-offset: 3px; }
#cover-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#cover-options input:focus-visible { outline: none; }
:is(#cover-options, #cover-current) [data-cover-preview], #cover-thumbnail { position: relative; display: block; width: 100%; aspect-ratio: 4 / 1; height: auto; border-radius: .3rem; overflow: hidden; background: var(--card-cover); object-fit: cover; }
#card-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#cover-thumbnail > img, #cover-current-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(#cover-options, #cover-current) [data-cover-preview]::before, :is(#cover-options, #cover-current) [data-cover-preview]::after { content: ''; position: absolute; pointer-events: none; }
:is(#cover-options, #cover-current) [data-cover-preview=geometry]::before { width: 42%; height: 110%; top: -55%; right: 8%; border: 1px solid rgb(255 255 255 / .35); }
:is(#cover-options, #cover-current) [data-cover-preview=geometry]::after { width: 34%; height: 100%; top: 25%; right: -10%; background: rgb(255 255 255 / .08); }
#card-face #card-cover:not([data-cover=geometry])::before, #card-face #card-cover:not([data-cover=geometry])::after { inset: 0; width: auto; height: auto; border: 0; background: none; }
#card-face #card-cover[data-cover=glow]::before, :is(#cover-options, #cover-current) [data-cover-preview=glow]::before { inset: 0; width: 100%; height: 100%; border: 0; background: radial-gradient(ellipse at 85% 0%, rgb(255 255 255 / .38), transparent 65%), radial-gradient(ellipse at 0% 100%, rgb(0 0 0 / .18), transparent 65%); }
#card-face #card-cover[data-cover=lines]::before, :is(#cover-options, #cover-current) [data-cover-preview=lines]::before { inset: 0; width: 100%; height: 100%; border: 0; background: linear-gradient(120deg, transparent 48%, rgb(255 255 255 / .1) 48% 63%, transparent 63% 72%, rgb(255 255 255 / .18) 72% 73%, transparent 73%); }
#card-face #card-cover:is([data-cover=solid], [data-cover=image])::before, #card-face #card-cover:is([data-cover=solid], [data-cover=image])::after { display: none; }
#cover-options #cover-photo-option { grid-column: 1 / -1; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: .75rem; text-align: left; }
#cover-options #cover-photo-option[hidden] { display: none; }
#cover-image-actions { display: flex; flex-wrap: wrap; gap: 1rem; min-height: 2.75rem; }
#card-app #cover-image-actions button { min-height: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--card-ink); font-size: .8125rem; font-weight: 550; cursor: pointer; }
#avatar-crop-dialog[data-crop-kind=cover] { width: min(40rem, calc(100vw - 2rem)); }
#avatar-crop-dialog[data-crop-kind=cover] #crop-stage { width: 100%; aspect-ratio: 4 / 1; }
#avatar-crop-dialog[data-crop-kind=cover] #avatar-crop-canvas { border-radius: .25rem; }
/* Distinct cover compositions share percentage geometry at thumbnail and full
   sizes. No bitmap assets or extra data are needed for these theme variants. */
#card-face #card-cover[data-cover=split], :is(#cover-options, #cover-current) [data-cover-preview=split] { background: var(--card-surface); }
#card-face #card-cover[data-cover=split]::before, :is(#cover-options, #cover-current) [data-cover-preview=split]::before { inset: 0 auto 0 0; width: 38%; height: 100%; border: 0; background: var(--card-primary); }
#card-face #card-cover[data-cover=split]::after, :is(#cover-options, #cover-current) [data-cover-preview=split]::after { inset: 22% 10% 22% auto; width: 32%; height: 56%; border: 0; background: var(--card-tint); border-bottom: .15rem solid var(--card-ink); }
#card-face #card-cover[data-cover=arch], :is(#cover-options, #cover-current) [data-cover-preview=arch] { background: var(--card-tint); }
#card-face #card-cover[data-cover=arch]::before, :is(#cover-options, #cover-current) [data-cover-preview=arch]::before { inset: -20% -12% auto auto; width: 76%; height: 300%; border: 0; border-radius: 50%; background: var(--card-primary); }
#card-face #card-cover[data-cover=arch]::after, :is(#cover-options, #cover-current) [data-cover-preview=arch]::after { inset: auto auto -60% 27%; width: 32%; height: 128%; border: 0; border-radius: 50%; background: var(--card-highlight); }
#card-face #card-cover[data-cover=horizon], :is(#cover-options, #cover-current) [data-cover-preview=horizon] { background: var(--card-tint); }
#card-face #card-cover[data-cover=horizon]::before, :is(#cover-options, #cover-current) [data-cover-preview=horizon]::before { inset: 12% 17% auto auto; width: 14%; height: 56%; border: 0; border-radius: 50%; background: var(--card-highlight); }
#card-face #card-cover[data-cover=horizon]::after, :is(#cover-options, #cover-current) [data-cover-preview=horizon]::after { inset: auto auto -85% -8%; width: 122%; height: 150%; border: 0; border-radius: 50% 50% 0 0; background: var(--card-primary); }
#card-face #card-cover[data-cover=dots], :is(#cover-options, #cover-current) [data-cover-preview=dots] { background: var(--card-tint); }
#card-face #card-cover[data-cover=dots]::before, :is(#cover-options, #cover-current) [data-cover-preview=dots]::before { inset: 0; width: 100%; height: 100%; border: 0; background: radial-gradient(circle, var(--card-ink) 0 29%, transparent 30%); background-size: 12.5% 50%; }
#card-face #card-cover:is([data-cover=arch], [data-cover=horizon], [data-cover=dots]) { border-bottom-color: var(--card-border); }

/* A native disclosure keeps the current cover visible without a full chooser. */
#cover-current { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 1rem; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .65rem .75rem; border: 1px solid var(--card-control-border); border-radius: .65rem; color: var(--card-text); font-size: .875rem; font-weight: 550; list-style: none; cursor: pointer; }
#cover-current::-webkit-details-marker { display: none; }
#cover-current::marker { content: ''; }
#cover-current:hover, #cover-current:active { background: var(--card-subtle); }
#cover-current-name { min-width: 0; }
#cover-current > svg { width: 1rem; height: 1rem; color: var(--card-muted); }
#cover-picker[open] > #cover-current > svg { transform: rotate(180deg); }
#cover-settings { display: grid; gap: .65rem; padding-top: .75rem; }

/* Native-sized controls remain a single row at narrow phone widths. */
@media (max-width: 380px) {
  #editor-tabs button { font-size: .75rem; white-space: nowrap; }
}
#card-cover > svg, :is(#cover-options, #cover-current) [data-cover-preview] > svg { display: block; width: 100%; height: 100%; stroke: none; }
#card-face #card-cover:is([data-cover=waves], [data-cover=peaks], [data-cover=weave], [data-cover=mosaic]) { border-bottom-color: var(--card-border); }
#card-face #card-cover:is([data-cover=waves], [data-cover=peaks], [data-cover=weave], [data-cover=mosaic])::before,
#card-face #card-cover:is([data-cover=waves], [data-cover=peaks], [data-cover=weave], [data-cover=mosaic])::after { content: none; }

#cover-upload-field { display: grid; gap: .65rem; margin-top: .75rem; }
#card-face[data-has-photo=false] #card-avatar { visibility: hidden; }

/* Text actions stay transparent, including their unavailable state. */
#card-app :is(#photo-actions, #cover-image-actions) button { background: transparent; }
#card-app :is(#photo-actions, #cover-image-actions) button:disabled { background: transparent; color: var(--card-muted); opacity: 1; cursor: default; }

/* The platform chooser expands on demand; existing link rows stay visible. */
#links-fields #add-social { display: inline-flex; align-items: center; gap: .5rem; }
#add-social[aria-expanded=true] > svg:last-child { transform: rotate(180deg); }
#social-platform-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .35rem 0 .75rem; }
#social-platform-picker[hidden] { display: none; }
#social-platform-picker button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-width: 0; min-height: 4rem; padding: .5rem .25rem; border: 1px solid var(--card-border); border-radius: .65rem; color: var(--card-ink); background: var(--card-surface); font-size: .6875rem; line-height: 1.35; cursor: pointer; }
#social-platform-picker button:hover:enabled { background: var(--card-tint); border-color: var(--card-ink); }
#social-platform-picker button:disabled { cursor: default; }
#social-platform-picker button > span { white-space: nowrap; }
#social-platform-picker #add-link { grid-column: 1 / -1; flex-direction: row; gap: .5rem; min-height: 2.75rem; font-size: .8125rem; }
#social-platform-picker svg, #link-rows [data-link-editor-icon] svg { display: block; width: 1.35rem; height: 1.35rem; fill: currentColor; stroke: none; }
#social-platform-picker svg[data-social-platform=link], #link-rows svg[data-social-platform=link] { fill: none; stroke: currentColor; stroke-width: 1.5; }
#link-rows label[data-link-url-label] { display: inline-flex; align-items: center; gap: .4rem; }
#link-rows [data-link-editor-icon] { color: var(--card-ink); }
#link-rows details { border: 1px solid var(--card-border); border-radius: .65rem; }
#link-rows summary { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) 1rem; align-items: center; gap: .6rem; min-height: 3.5rem; padding: .65rem .85rem; border-radius: .65rem; color: var(--card-text); font-size: .875rem; font-weight: 550; list-style: none; cursor: pointer; }
#link-rows summary::-webkit-details-marker { display: none; }
#link-rows summary::marker { content: ''; }
#link-rows summary:hover { background: var(--card-subtle); }
#link-rows [data-link-summary-name] { min-width: 0; overflow-wrap: anywhere; }
#link-rows summary > svg { width: 1rem; height: 1rem; color: var(--card-muted); }
#link-rows details[open] > summary > svg { transform: rotate(180deg); }
#link-rows [data-link-fields] { display: grid; gap: .5rem; padding: .75rem .85rem .85rem; border-top: 1px solid var(--card-border); }
#link-rows > section { position: relative; background: var(--card-surface); border-radius: .65rem; }
#link-rows summary { padding-left: 3.4rem; }
#card-app #link-rows [data-link-drag] { position: absolute; z-index: 1; top: .375rem; left: .3rem; display: grid; place-items: center; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem !important; padding: 0 !important; border: 0; border-radius: .4rem; color: var(--card-muted); background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#link-rows [data-link-drag] svg { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; pointer-events: none; }
#card-app #link-rows [data-link-drag]:hover:enabled, #card-app #link-rows [data-link-drag]:active:enabled { color: var(--card-ink); background: var(--card-tint); }
#card-app #link-rows [data-link-drag]:disabled { opacity: .35; cursor: default; }
#link-rows [data-link-order-actions] { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
#link-rows [data-link-order-actions] button { min-height: 2.75rem !important; }
#link-rows [data-link-order-actions] button:last-child { margin-left: auto; }
#link-rows[data-link-sorting] { user-select: none; -webkit-user-select: none; overflow-anchor: none; }
#link-rows > section[data-link-sorting] { z-index: 3; box-shadow: 0 6px 20px rgb(0 0 0 / .12); will-change: transform; }
#link-rows > section[data-link-sorting] details { border-color: var(--card-ink); }
#card-app #link-rows[data-link-sorting] [data-link-drag] { cursor: grabbing; }
@media (max-width: 360px) {
  #social-platform-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #social-platform-picker #add-link { grid-column: span 2; }
}