/* =====================================================================
 * Free label maker pages (/en/label-maker, /tr/etiket-olusturucu): the
 * designer is part of the page, not a frame.
 *
 * Load order: site css (main, components, responsive, label-maker, bridge),
 * then the dashboard editor css (dashboard-v2, dark-theme, designer, v3,
 * designer-automations), then this file. The editor css is written for the
 * dashboard (every editor selector is .dz-*, .da-*, .btn-v2*, or hangs off
 * body.dashboard-v3), so it coexists with the site css on one body:
 * <body class="li-v3-bridge dashboard-v3 lm-page">. What it does change on
 * the body (the --primary/--bg-* variables) is put back for the site parts
 * below (.lm-site).
 * ===================================================================== */

body.lm-page {
    /* Height of the sticky site header (3px bar + navbar) and of the title strip. */
    --lm-nav: 71px;
    --lm-strip: 54px;
    --lm-gutter: 16px;
    overflow-x: clip;
}

/* body.dashboard-v3 also sets the body colours (it loads later, same specificity). */
body.lm-page.li-v3-bridge { color: var(--li-bridge-ink, #101214); background: var(--li-bridge-paper, #f2efe7); }

/* The site parts keep the site's palette: body.dashboard-v3 redefines --primary
   (and the surfaces) for the editor, and it loads later than the bridge. */
body.lm-page .navbar,
body.lm-page .lm-site,
body.lm-page #footer-placeholder {
    --primary: var(--li-bridge-blue, #155dfc);
    --primary-dark: #0d45c4;
    --primary-light: #4a86ff;
    --bg-primary: var(--li-bridge-panel, #fffdf7);
    --bg-secondary: #e9e6de;
    --text-primary: var(--li-bridge-ink, #101214);
    --text-secondary: var(--li-bridge-muted, #67655f);
    --border: var(--li-bridge-line, #bbb7ad);
    /* ...and the rest of what body.dashboard-v3 redefines, back to main.css. */
    --accent: #10b981; --accent-dark: #059669; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; --success: #10b981;
    --bg-tertiary: #f3f4f6; --bg-elevated: #ffffff; --bg-hover: rgba(0, 0, 0, 0.04);
    --text-light: #9ca3af; --text-link: #2563eb;
    --border-dark: #d1d5db; --border-light: #f3f4f6; --border-focus: #2563eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-sm: 0.375rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem;
}

/* ── Title strip: the page's H1 plus the guest actions ───────────────── */
.lm-top { border-bottom: 1px solid var(--li-bridge-ink, #101214); background: var(--li-bridge-panel, #fffdf7); }
.lm-top-in { box-sizing: border-box; width: min(1680px, calc(100% - 2 * var(--lm-gutter))); min-height: var(--lm-strip); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; padding: 6px 0; }
.lm-top h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--li-bridge-ink, #101214); text-align: left; }
.lm-top-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.lm-top-note { font-size: 12.5px; color: var(--li-bridge-muted, #67655f); }
.lm-top-signin { font-size: 13px; font-weight: 600; color: var(--li-bridge-muted, #67655f); text-decoration: none; }
.lm-top-signin:hover { text-decoration: underline; }
/* Plain until the editor's button styles (.btn-v2-primary) load, which then take over. */
.lm-top-cta { padding: 7px 14px; border: 1px solid var(--li-bridge-ink, #101214); background: var(--li-bridge-signal, #c93613); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; }

/* ── The designer area ────────────────────────────────────────────────── */
.lm-app { position: relative; box-sizing: border-box; width: min(1680px, calc(100% - 2 * var(--lm-gutter))); margin: 12px auto 20px; }
.lm-app:not(.lm-ready):not(.lm-failed) { min-height: calc(100vh - var(--lm-nav) - var(--lm-strip) - 32px); }
/* The editor fills the window under the site header like an app: its own
   panels scroll, the page does not scroll while you work in it. */
.lm-app .dz-root { height: calc(100vh - var(--lm-nav) - var(--lm-strip) - 32px); min-height: 560px; }
/* The start screen (template gallery) is page content: it grows with its
   content and the page scrolls, instead of a second scroll area inside. */
.lm-app .dz-root.dz-starting { height: auto; min-height: 0; }
.lm-app .dz-start { overflow: visible; }
.lm-failed-note { margin: 0; padding: 40px 16px; text-align: center; color: var(--li-bridge-muted, #67655f); }

/* Phones: the editor stacks (designer.css) and the page scrolls through it. */
@media (max-width: 860px) {
    body.lm-page { --lm-strip: 0px; }
    .lm-app .dz-root { height: auto; min-height: 0; }
    .lm-app .dz-inspector { max-height: none; }
    .lm-top-note { display: none; }
}

/* ── Loading placeholder, until the editor has drawn ─────────────────── */
.lm-skel { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: 52px 1fr; overflow: hidden; background: var(--li-bridge-paper, #f2efe7); border: 1px solid var(--li-bridge-ink, #101214); pointer-events: none; }
.lm-skel-top { grid-column: 1 / -1; border-bottom: 1px solid #d8d4ca; background: #fffdf7 linear-gradient(90deg, #e5e1d6 0 180px, transparent 180px) 16px 17px / 100% 18px no-repeat; }
.lm-skel-side { border-right: 1px solid #d8d4ca; background: #fffdf7 repeating-linear-gradient(180deg, transparent 0 14px, #e5e1d6 14px 38px, transparent 38px 52px) 14px 0 / 28px 100% no-repeat; }
.lm-skel-stage { display: flex; align-items: center; justify-content: center; }
.lm-skel-label { width: min(52%, 460px); aspect-ratio: 5 / 3; background: linear-gradient(#e5e1d6, #e5e1d6) 12% 14% / 46% 9% no-repeat, linear-gradient(#e5e1d6, #e5e1d6) 12% 34% / 30% 6% no-repeat, repeating-linear-gradient(90deg, #cfcabd 0 3px, transparent 3px 7px) 12% 88% / 56% 24% no-repeat, #fff; border: 1px solid #d8d4ca; box-shadow: 0 6px 22px rgba(16, 18, 20, .08); animation: lm-skel-pulse 1.4s ease-in-out infinite; }
@keyframes lm-skel-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .lm-skel-label { animation: none; } }
@media (max-width: 860px) { .lm-skel { grid-template-columns: 1fr; grid-template-rows: 52px 1fr; } .lm-skel-side { display: none; } .lm-app:not(.lm-ready):not(.lm-failed) { min-height: 70vh; } }

/* ── The copy under the designer ──────────────────────────────────────── */
.lm-hero.lm-hero-below { padding: 36px 0 8px; background: none; }
.lm-hero.lm-hero-below p.lm-sub { margin-left: auto; margin-right: auto; }