/* Selve visitkortet: offentlig visning og ejerens design-mode.
   Lå i en 524 linjers <style>-blok i templaten. */

/* Temaets accent sættes som custom property på <body> af templaten —
   farven er data om kortet, ikke en styleregel.

   De afledte farver skal derfor også stå på body og ikke på :root:
   custom properties arver nedad, så en regel på :root (altså <html>)
   kan ikke se en værdi der er sat på <body>. Står de på :root, falder
   var(--accent) tilbage til standardpaletten og hele temaet forsvinder.

   Alt andet end accenten udledes af accenten, så baggrund, hover og
   bløde flader følger med når man skifter tema. */
@supports (background: color-mix(in srgb, red, blue)) {
    body {
        --accent-hover: color-mix(in srgb, var(--accent) 80%, #0a0a0a);
        --page-bg: color-mix(in srgb, var(--accent) 7%, #f5f3ef);
        --soft-fill: color-mix(in srgb, var(--accent) 14%, #ffffff);
        --line: color-mix(in srgb, var(--accent) 14%, #e5e2dc);
        --card-bg: color-mix(in srgb, var(--accent) 2%, #ffffff);
    }
}

* { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    padding: 30px;
}

body.public-view {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-container { perspective: 1200px; width: 100%; max-width: 400px; }

/* De to sider stables i samme grid-celle. Det gør wrapperen præcis så høj
   som den højeste af dem — tidligere lå bagsiden absolut positioneret, så
   kortet fik sin højde fra forsiden alene, og bagsidens nederste 122px
   (URL'en og download-linkene) blev klippet af overflow: hidden. */
.card-wrapper {
    display: grid;
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-wrapper.flipped { transform: rotateY(180deg); }

.card, .card-back {
    grid-area: 1 / 1;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 24px 48px -20px rgba(10, 10, 10, 0.16);
    overflow: hidden;
    width: 100%;
    min-height: 460px;
    text-align: center;
    padding: 2.75rem 2rem 2.25rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Kun forsiden toner ind. fadeIn animerer transform, og en animation
   vinder over almindelige deklarationer — så på bagsiden overskrev den
   rotateY(180deg) i hele animationens løbetid. Uden rotationen vender
   bagsiden fremad, backface-visibility har intet at skjule, og da den
   ligger sidst i samme grid-celle malede den hen over forsiden i 600ms
   ved hver sideindlæsning. Det var QR-koden man så blinke. */
.card { animation: fadeIn 0.6s ease-out; }

/* backface-visibility skjuler af sig selv den side der vender væk, og
   skiftet sker præcis ved 90 grader. Der lå tidligere en opacity- og
   visibility-mekanisme oveni: forsiden forsvandt øjeblikkeligt, og
   bagsiden tonede først frem 400ms inde i en 700ms rotation — så der
   roterede en tom kasse i to tredjedele af flippet. */
.card-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flip-button {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.flip-button:hover { border-color: var(--accent); color: var(--accent); }

.avatar-container {
    width: 92px;
    height: 92px;
    border-radius: 8px;
    margin: 0 auto 1.4rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Fraunces", Georgia, serif;
    font-size: 2.1rem;
    font-weight: 500;
    color: var(--accent);
}

.avatar { width: 100%; height: 100%; object-fit: cover; }

h1 {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: 0;
    line-height: 1.15;
}
.title {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0.55rem 0 1.1rem;
}
.bio { font-size: 0.92rem; color: #4b4b4b; margin-bottom: 1.75rem; line-height: 1.6; }

.links { display: flex; flex-direction: column; margin-bottom: 1.75rem; border-top: 1px solid var(--line); }

.link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.15rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.15s ease, gap 0.15s ease;
    /* Labels er ofte ét ubrudt token (linkedin.com/in/annasorensen).
       'anywhere' — ikke 'break-word' — er den der også sænker
       min-content, så teksten ikke skubber sig ud over kortet. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.link:hover { color: var(--accent); gap: 1.05rem; }

.link-icon {
    width: 30px; height: 30px; flex: none;
    border-radius: 7px;
    background: var(--page-bg);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    font-size: 0.82rem;
}
.link:hover .link-icon { border-color: var(--accent); color: var(--accent); }

.link-arrow { margin-left: auto; color: var(--line); font-size: 0.7rem; }
.link:hover .link-arrow { color: var(--accent); }

/* Bagsiden viser hele card_url som ét ubrudt token — det er bredere
   end kortet på en telefon, og .card har overflow:hidden, så URL'en
   blev bare klippet af uden ellipsis. */
.footer { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
.card-url { color: var(--accent); }

/* SVG er den der dur til sticker og skilt — vektor skalerer uden
   at blive grynet. PNG er der for dem hvis trykkeri kun vil have
   en bitmap. Kun ejeren ser linkene. */
.qr-downloads { display: inline-block; margin-top: 0.5rem; }
.qr-downloads a { color: var(--accent); text-decoration: none; font-weight: 600; }
.qr-downloads a:hover { text-decoration: underline; }

.footer a.vcard-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.footer a.vcard-link:hover { color: var(--accent); border-color: var(--accent); }

.qr-container {
    /* Fast 220px var bredere end kortets indhold på en 320px-telefon,
       så QR-koden stak 12px ud til hver side og blev klippet. */
    width: min(220px, 100%);
    aspect-ratio: 1 / 1;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.75rem;
}

/* height:100% mod en forælder hvis højde kommer fra aspect-ratio er
   cirkulært: billedet blev 186x390 i stedet for kvadratisk, containeren
   voksede til 424px, og bagsidens nederste 76px blev klippet af.
   QR-koden er kvadratisk i sig selv, så auto er både korrekt og nok. */
.qr-code { display: block; width: 100%; height: auto; }

.qr-title { font-family: "Fraunces", Georgia, serif; font-size: 1.4rem; font-weight: 500; margin-bottom: 0.5rem; }
.qr-subtitle { color: var(--muted); font-size: 0.88rem; margin-bottom: 1.75rem; }

.kontakto-badge {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.02em;
    z-index: 10;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ---------- Design mode (owner editor) - card stays 100% in focus ---------- */

body.design-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.design-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    z-index: 20;
}
.design-topbar .brand {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
}
.design-topbar .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}
.status-pill.live { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); }
.status-pill.draft { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.new-code-banner {
    background: var(--warn-bg); border-bottom: 1px solid var(--warn-line);
    color: var(--warn-ink); text-align: center; font-size: 0.85rem; padding: 0.65rem 1rem;
}
.new-code-banner strong { letter-spacing: 0.15em; font-size: 0.95rem; }

/* Floating toolbar of tiny icon-only menus, docked under the card */
.design-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px -14px rgba(10, 10, 10, 0.18);
    border-radius: 999px;
    padding: 0.4rem;
}
.design-toolbar .tool-item { position: relative; display: flex; }
.design-toolbar button.tool-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.design-toolbar a.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.design-toolbar button.tool-btn:hover,
.design-toolbar a.tool-btn:hover { background: var(--page-bg); }
.design-toolbar button.tool-btn.active { background: var(--accent); color: #fff; }
.design-toolbar .divider { width: 1px; height: 22px; background: var(--line); margin: 0 0.3rem; }
.design-toolbar button.save-btn {
    width: auto;
    border-radius: 999px;
    padding: 0 1.1rem;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    gap: 0.4rem;
}
.design-toolbar button.save-btn:hover { background: var(--accent-hover); }

/* Popover panels anchored above the toolbar - only one open at a time */
.tool-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: min(340px, calc(100vw - 2.5rem));
    max-height: min(60vh, 480px);
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 25px 50px -12px rgba(10,10,10,0.22);
    text-align: left;
    color: var(--ink);
    z-index: 30;
}
.tool-popover.open { display: block; }
.tool-popover h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.9rem; color: var(--ink); }
.tool-popover .field { margin-bottom: 0.85rem; }
.tool-popover .field:last-child { margin-bottom: 0; }
.tool-popover .field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-bottom: 0.3rem; }
.tool-popover .field input[type="text"], .tool-popover .field textarea {
    width: 100%;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.88rem;
}
.tool-popover .field input:focus, .tool-popover .field textarea:focus { outline: none; border-color: var(--accent); }
.tool-popover .field textarea { resize: vertical; min-height: 70px; }

/* iOS Safari zoomer ind når et felt med font-size under 16px får
   fokus, og zoomer ikke ud igen. 0.88rem er fint med mus. */
@media (pointer: coarse) {
    .tool-popover .field input[type="text"], .tool-popover .field textarea { font-size: 1rem; }
}

.btn-primary-block {
    width: 100%;
    margin-top: 0.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.1rem;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}
.btn-primary-block:hover { background: var(--accent-hover); }
.btn-secondary-block {
    width: 100%;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 8px;
    padding: 0.65rem 1.1rem;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}
.btn-secondary-block:hover { border-color: var(--muted); color: var(--ink); }

/* Private link popover */
.save-link-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}
.save-link-box code { flex: 1; color: var(--ink); user-select: all; word-break: break-all; font-size: 0.75rem; }
.save-link-box button.copy-btn {
    flex: none;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.tool-popover .hint { font-size: 0.75rem; color: var(--muted); line-height: 1.5; }

/* Theme popover swatches */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.theme-swatch-form { margin: 0; }
.theme-swatch {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    color: var(--ink);
    font-size: 0.78rem;
    text-align: left;
}
.theme-swatch:hover { border-color: var(--accent); }
.theme-swatch.active { border-color: var(--accent); background: var(--soft-fill); }
.theme-swatch .swatch-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.08);
    /* Temaets farve kommer ind som --swatch fra markup. */
    background: var(--swatch, var(--accent));
}
.theme-swatch .swatch-name { flex: 1; }
.theme-swatch .swatch-check { color: var(--accent); font-size: 0.7rem; }

.custom-color {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}
.custom-color label { flex: 1; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.custom-color.active label { color: var(--accent); }
.custom-color input[type="color"] {
    flex: none;
    width: 38px; height: 34px;
    padding: 2px;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
}
.custom-color .btn-primary-block { width: auto; margin-top: 0; white-space: nowrap; }

/* Add-field popover: hver felttype vises med ikon og navn */
.add-field-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}
.add-field-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.3rem;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    color: var(--ink);
    font-size: 1rem;
    text-align: center;
    transition: all 0.15s ease;
}
.add-field-chip:hover { border-color: var(--accent); background: var(--soft-fill); color: var(--accent); }
.add-field-chip .chip-label {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--muted);
}
.add-field-chip:hover .chip-label { color: var(--accent); }

.inline-add-form { display: none; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.inline-add-form.open { display: block; }

/* Compact existing-links list inside the popover */
.link-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.45rem;
}
.link-row .link-row-icon {
    flex: none;
    width: 26px; height: 26px; border-radius: 6px;
    background: var(--soft-fill); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.link-row .link-row-body { flex: 1; min-width: 0; }
.link-row .link-row-label { font-size: 0.8rem; font-weight: 500; }
.link-row .link-row-url { font-size: 0.7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row form { margin: 0; }
.link-row .link-row-move { display: flex; flex-direction: column; flex: none; }
.link-row .link-row-move .row-btn { height: 20px; font-size: 0.65rem; }
.link-row button.row-btn {
    flex: none;
    background: transparent;
    border: none;
    color: var(--muted);
    border-radius: 6px;
    width: 24px; height: 24px;
    cursor: pointer;
    font-size: 0.78rem;
}
.link-row button.row-btn:hover { color: var(--accent); }
.link-row button.row-btn:disabled { opacity: 0.3; cursor: default; color: var(--muted); }
.link-row button.remove-btn:hover { color: var(--danger); }
.empty-links { font-size: 0.78rem; color: var(--muted); padding: 0.3rem 0 0.6rem; }
.existing-links-list { margin-bottom: 0.5rem; }

/* Full-screen paywall interstitial - shown only after "Gem" on an unpublished card */
.paywall-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.paywall-box {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2.25rem 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    color: var(--ink);
    box-shadow: 0 30px 60px -20px rgba(10,10,10,0.3);
}
.paywall-box .icon { font-size: 1.9rem; color: var(--accent); margin-bottom: 1rem; }
.paywall-box h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; margin-bottom: 0.6rem; }
.paywall-box p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.5rem; }
.paywall-box button {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.85rem 1.2rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 0.7rem;
}
.paywall-box button:hover { background: var(--accent-hover); }
.paywall-box .skip-link { font-size: 0.8rem; color: var(--muted); text-decoration: none; }
.paywall-box .skip-link:hover { color: var(--ink); text-decoration: underline; }

.studio-empty-hint {
    margin-top: 1.4rem;
    font-size: 0.82rem;
    color: var(--muted);
    text-align: center;
    max-width: 320px;
}

@media (max-width: 560px) {
    .add-field-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Toolbaren er en fast række på 343px og skar ud over kanten på de
   smalleste telefoner (320px). Den skal blive én pille, ikke ombryde,
   så knapperne krymper i stedet. */
@media (max-width: 380px) {
    .design-toolbar { gap: 0.15rem; padding: 0.3rem; }
    .design-toolbar button.tool-btn { width: 34px; height: 34px; }
    .design-toolbar .divider { margin: 0 0.15rem; }
    /* width:auto skal gentages — reglen ovenfor har samme specificitet
       og står senere, så save-btn ville blive klemt til 34px. */
    .design-toolbar button.save-btn { width: auto; height: 34px; padding: 0 0.75rem; font-size: 0.8rem; }
}

/* Modal-varianten af overlayet. Paywall'en efter wizarden vises altid;
   den her aabnes af en knap, saa den skal kunne skjules. */
.paywall-overlay.is-modal[hidden] { display: none; }

/* Luk-knappen er en <button> i modalen og et <a> i paywall'en. En knap
   arver hverken skriftfarve eller -stoerrelse fra sin forfaeder, saa uden
   det her stod teksten naesten usynlig paa den lyse boks. */
.paywall-box button.skip-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--muted);
    cursor: pointer;
}

/* Udstillingskortene på forsiden. Banneret ligger efter kortet, så man ser
   eksemplet før opfordringen — og det er fastgjort i bunden på mobil, hvor
   kortet fylder hele skærmen og man ellers aldrig ville nå ned til det. */
.demo-cta {
    /* Samme bredde som kortet, ellers stikker banneret ud til begge sider. */
    max-width: 400px;
    margin: 1.75rem auto 0;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    text-align: center;
    box-shadow: 0 20px 45px -25px rgba(10, 10, 10, 0.3);
}
.demo-cta p { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin: 0 0 1rem; }
.demo-cta strong { color: var(--ink); }
.demo-cta .btn { width: 100%; }
.demo-cta-back {
    display: inline-block;
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
}
.demo-cta-back:hover { color: var(--ink); text-decoration: underline; }

/* Kortet centreres lodret i public-view. Med et banner under skal siden
   kunne rulle i stedet, ellers ligger opfordringen uden for skærmen.

   Men display:block tog centreringen med sig: kortet har max-width og
   ingen auto-margener, så det faldt om i venstre hjørne mens banneret —
   der har margin:auto — blev stående på midten. En kolonne med
   flex-start centrerer vandret og lader stadig siden rulle. */
body.demo-view.public-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1.25rem 3rem;
}