@import url("/fonts/fontawesome-pro/css/wa-icons-map.css");

@font-face {
    font-family: "Swiss 721";
    src: url("/fonts/Swiss/SWZ721N.TTF") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Swiss 721";
    src: url("/fonts/Swiss/SWZ721B.TTF") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Font Awesome";
    src: url("/fonts/fontawesome-pro/webfonts/fa-regular-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome";
    src: url("/fonts/fontawesome-pro/webfonts/fa-solid-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Brands";
    src: url("/fonts/fontawesome-pro/webfonts/fa-brands-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Pro";
    src: url("/fonts/fontawesome-pro/webfonts/fa-light-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Pro";
    src: url("/fonts/fontawesome-pro/webfonts/fa-thin-100.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-duotone-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-duotone-regular-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-duotone-light-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-duotone-thin-100.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-solid-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-regular-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-light-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-thin-100.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-duotone-solid-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-duotone-regular-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-duotone-light-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome Sharp Duotone";
    src: url("/fonts/fontawesome-pro/webfonts/fa-sharp-duotone-thin-100.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------- */
/* Web Awesome: Font Awesome Pro (Icon Fonts)                                  */
/* -------------------------------------------------------------------------- */

/* Prevent Web Awesome's `<wa-icon>` from showing fetched SVGs for app icons.
   System icons used inside Web Awesome components keep using the `system` library. */
wa-icon:not([library="system"])::part(svg) {
    display: none;
}

/* Render our app icons as Font Awesome glyphs (no HTML changes required). */
wa-icon:not([library="system"]) {
    --fa-wa-family: "Font Awesome";
    --fa-wa-weight: 900;

    font-family: var(--fa-wa-family);
    font-style: normal;
    font-weight: var(--fa-wa-weight);
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Allow controlling style via Web Awesome attributes (optional).
   Examples:
   - <wa-icon name="..." variant="regular"></wa-icon>
   - <wa-icon name="..." family="sharp" variant="solid"></wa-icon> */
wa-icon:not([library="system"])[variant="regular"] { --fa-wa-weight: 400; }
wa-icon:not([library="system"])[variant="light"] { --fa-wa-weight: 300; }
wa-icon:not([library="system"])[variant="thin"] { --fa-wa-weight: 100; }
wa-icon:not([library="system"])[family="brands"] {
    --fa-wa-family: "Font Awesome Brands";
    --fa-wa-weight: 400;
}
wa-icon:not([library="system"])[family="sharp"] { --fa-wa-family: "Font Awesome Sharp"; }
wa-icon:not([library="system"])[family="duotone"] { --fa-wa-family: "Font Awesome Duotone"; }
wa-icon:not([library="system"])[family="sharp-duotone"] { --fa-wa-family: "Font Awesome Sharp Duotone"; }

wa-icon:not([library="system"])::before {
    content: var(--fa)/"";
}

@supports not (content: ""/"") {
    wa-icon:not([library="system"])::before {
        content: var(--fa);
    }
}


.fa,
.fas,
.far,
.fal,
.fab,
.fad,
.fat {
    display: inline-block;
    font-family: "Font Awesome";
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    vertical-align: -0.125em;
    speak: none;
}

.fas {
    font-weight: 900;
}

.far {
    font-weight: 400;
}

.fal {
    font-family: "Font Awesome Pro";
    font-weight: 300;
}

.fat {
    font-family: "Font Awesome Pro";
    font-weight: 100;
}

.fab {
    font-family: "Font Awesome Brands";
    font-weight: 400;
}

.fad {
    font-family: "Font Awesome Duotone";
    font-weight: 900;
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: -0.125em;
}

.fa-stack-1x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 2em;
}

.fa-fw {
    width: 1.25em;
    text-align: center;
}

:root {
    --bg: #f4f4f4;
    --bg-dark: color-mix(in srgb, var(--bg) 95%, black);
    --panel: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --wa-font-weight-bold: 700;
    --font-primary: "Swiss 721", "Helvetica Neue", Arial, sans-serif;
    --wa-font-family-body: var(--font-primary);
    --wa-font-family-heading: var(--font-primary);
}
* {
    box-sizing: border-box;
}
.is-hidden {
    display: none !important;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    background: #ffffff;
    color: var(--text);
}
html {
    background: #ffffff;
}
.app-shell > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem;
    max-width: 1800px;
    margin: 0 auto;
}
.app-shell > header .header-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.app-shell > header h1 {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.app-shell > main {
    padding: 0 2rem 4rem 2rem;
    max-width: 1800px;
    margin: 0 auto;
}
.app-shell > main.authed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
}
.app-shell > main.login-only {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.app-shell.login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1.5rem;
}
.app-shell.login header,
.app-shell.login main {
    width: clamp(320px, 60vw, 480px);
    max-width: 100%;
    padding: 0;
}
.app-shell.login header {
    padding-bottom: 0.5rem;
}
.app-shell.login main {
    margin: 0;
}
.login-wrapper {
    width: 100%;
}
.app-shell.login .login-panel {
    width: 100%;
    margin-top: 0;
}
.panel {
  background: var(--panel);
  border-radius: 1rem;
  padding: 2rem;
  overflow: hidden;
}
.login-panel {
    width: clamp(320px, 60vw, 480px);
    padding-bottom: 2rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.10),
        0 10px 20px rgba(0, 0, 0, 0.05);
}
.login-only .login-panel {
    margin-top: -6rem;
}
.login-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.login-actions .login-status {
    flex: 1;
    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    line-height: 125%;
}
.login-actions wa-button.enter-hover::part(base) {
    filter: brightness(0.93);
}






.form-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}
.panel .form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-width: 100%;
}
.panel wa-input {
    min-width: 200px;
    --wa-input-color: #111827;
    --wa-input-label-color: #0f172a;
    --wa-input-help-text-color: #0f172a;
    --wa-input-filled-background: var(--wa-color-neutral-fill-quiet, var(--wa-color-surface-100, var(--bg)));
    --wa-color-surface-100: var(--wa-color-neutral-fill-quiet, var(--wa-color-surface-100, var(--bg)));
}
.panel wa-input::part(base),
.panel wa-input::part(input) {
    background: var(--wa-color-neutral-fill-quiet, var(--wa-color-surface-100, var(--bg))) !important;
    box-shadow: 0 0 0 1000px var(--wa-color-neutral-fill-quiet, var(--wa-color-surface-100, var(--bg))) inset !important;
}


.panel.functions {
    padding-bottom: .75rem;
    grid-column: span 2;
}

.toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    margin-bottom: 1rem;
    align-items: center;
}



.toolbar .buttons {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.toolbar .buttons .margin-left {
    margin-left: 1rem;
}
wa-button[appearance='plain']:not([disabled]):active::part(base),
wa-button[appearance='plain']:not([disabled]):active {
    background: var(--wa-color-brand-600, #2563eb);
    color: #fff;
    border-color: var(--wa-color-brand-600, #2563eb);
    border-radius: var(--wa-border-radius-m, 0.6rem);
}
.autosave-spinner {
    animation: autosave-spin 0.9s linear infinite;
}
@keyframes autosave-spin {
    to { transform: rotate(360deg); }
}








.doc-select-wrapper {
    width: 100%;
}
.doc-select-wrapper wa-select {
    width: 100%;
}
.doc-select-current-id {
    display: inline-flex;
    align-items: center;
    margin-inline-end: 0.5rem;
}
.doc-select-current-id[appearance='filled'] {
    --wa-color-fill-normal: white;
    --wa-color-on-normal: var(--wa-color-text-normal);
}

/* Filled badges in select options (light gray, white when active).
   wa-badge sets colors on :host([appearance='filled']), so override via its CSS vars. */
wa-option wa-badge[appearance='filled'] {
    --wa-color-fill-normal: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 4%);
    --wa-color-on-normal: var(--wa-color-neutral-on-quiet);
}
wa-option:state(current) wa-badge[appearance='filled'],
wa-option[aria-selected="true"] wa-badge[appearance='filled'] {
    --wa-color-fill-normal: rgba(255, 255, 255, 0.1);
    --wa-color-on-normal: white;
}
.doc-option-title {
    flex: 1;
    min-width: 0;
    display: inline-block;
}
.doc-delete-icon {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 1rem;
    padding: 0.15rem;
    cursor: pointer;
}
.doc-delete-icon wa-icon {
    pointer-events: none;
}
.doc-delete-icon--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.header-auth {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-user-label {
    font-size: 0.95rem;
    color: var(--muted);
}
.delete-dialog-question {
    margin: 0 0 0.35rem;
    font-weight: 600;
}
.delete-dialog-subtitle {
    margin: 0 0 0.75rem;
    color: var(--muted);
}
.delete-dialog-error {
    color: #d0342c;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}
.delete-dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    /* margin-top: 1rem; */
}

.panel wa-select::part(combobox) {
    border-color: transparent;
}

@media (max-width: 800px) {
    .toolbar {
        grid-template-columns: 1fr;
    }
    .panel.functions {
        grid-column: span 1;
    }
    .toolbar wa-button-group::part(base) {
        flex-wrap: wrap;
    }
}

.login-wrapper wa-input::part(base),
.login-wrapper wa-input::part(input) {
    background: var(--wa-color-neutral-fill-quiet, var(--wa-color-surface-100, var(--bg))) !important;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.4;
}
.login-wrapper wa-input {
}

.preview-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--wa-font-size-m, 1rem);
    line-height: 1.5;
}
textarea.markdown {
    min-height: 600px;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    border: none;
    background-color: var(--wa-color-neutral-fill-quiet);
    font: inherit;
    color: #0f172a;

}
.markdown-hint {
    margin-top: 0.35rem;
    color: rgba(2, 6, 23, 0.6);
    font-size: 0.9rem;
    margin-bottom: 3rem;
}

.panel.preview {
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: visible;
    min-width: 0;
}

.preview-viewport {
    --pv-shadow-a1: 0.075;
    --pv-shadow-a2: 0.125;
    --pv-outline-o: 0;
    --pv-transition-dur: 2000ms;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    border-radius: 1rem;
	    box-shadow:
	        0 40px 100px rgba(0, 0, 0, var(--pv-shadow-a1)),
	        0 10px 20px rgba(0, 0, 0, var(--pv-shadow-a2));
	    transition: box-shadow var(--pv-transition-dur) cubic-bezier(0.2, 0.8, 0.2, 1);
	    will-change: box-shadow;
}

.preview-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.08) inset;
    opacity: var(--pv-outline-o);
    transition: opacity var(--pv-transition-dur) cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.preview-viewport.preview-viewport--idle {
    /* No drop shadow; show a subtle outline instead */
    --pv-outline-o: 1;
    --pv-shadow-a1: 0;
    --pv-shadow-a2: 0;
}

.preview-stage-wrap{
    position: relative;
    display: block;
}

.preview-stage{
    position: relative;
    display: block;
    transform-origin: top left;
    --list-indent-step: 6mm;
    --list-marker-width: 6mm;
    --list-marker-gap: 2mm;
    --list-dash-offset: 0mm;
}

.doc-option-lock {
    opacity: 0.6;
    margin-left: 0.5rem;
    font-size: 0.75em;
    opacity: .25;
    transform: translateY(-3px);
}

.title-privacy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0.6rem;
    color: rgba(15, 23, 42, 0.45);
    cursor: pointer;
}
.title-privacy-button:hover:not(:disabled) { color: inherit; background: transparent; }
.title-privacy-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.title-privacy-button.title-privacy-button--active {
    color: var(--wa-color-brand-600, #2563eb);
}

.preview-note {
    margin-top: 10px;
    padding: 2rem;
}
.footer-toggle {
    margin-top: 1rem;
    padding: 0 1.5rem 1.5rem;
}
.footer-toggle wa-switch + wa-switch {
    margin-top: 0.75rem;
}
textarea::part(base) {
    align-items: flex-start;
}

.doc-content .page-break {
    margin: 3rem 0;
    padding: 10px 0;
    border-top: 1px dashed #94a3b8;
    border-bottom: 1px dashed #94a3b8;
    color: #475569;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    text-align: center;
    height: auto;
}
.preview-stage .page-break::before {
    content: "Seitenumbruch";
}

.preview-stage hr,
.doc-content hr {
    border: none;
    border-top: 0.1mm solid #d1d5db;
    margin: 3rem 0;
}

/* Preview-specific overrides for lists (fixed marker column) */
.preview-stage .doc-content p + ul,
.preview-stage .doc-content p + ol{
    margin-top: 9.6mm;
}
.preview-stage .doc-content ul,
.preview-stage .doc-content ol{
    margin: 0 0 3.2mm 0;
    list-style: none;
}
.preview-stage .doc-content ul{
    counter-reset: list-item;
}
.preview-stage .doc-content ol{
    counter-reset: list-item;
}
.preview-stage .doc-content ol[start]{
    counter-reset: list-item calc(attr(start number) - 1);
}
.preview-stage .doc-content ul > li,
.preview-stage .doc-content ol > li{
    position: relative;
    margin: 0 0 1.5mm 0;
    padding-left: calc(var(--list-marker-width) + var(--list-marker-gap));
}
.preview-stage .doc-content li > ul,
.preview-stage .doc-content li > ol{
    margin-top: 3.2mm;
    padding-left: 0;
}
.preview-stage .doc-content ul > li::before,
.preview-stage .doc-content ol > li::before{
    position: absolute;
    left: 0;
    top: 0;
    width: var(--list-marker-width);
    text-align: right;
    font-family: "Swiss 721", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
.preview-stage .doc-content ul > li::before{
    content: "–";
    transform: translateX(var(--list-dash-offset));
}
.preview-stage .doc-content ol > li{
    counter-increment: list-item;
}
.preview-stage .doc-content ol > li::before{
    content: counter(list-item) ".";
}

.tips {
    margin-bottom: 2rem;
}
.tip + .tip {
    margin-top: 1rem;
}

/* Delete dialog layout */
.delete-dialog-id {
    margin-bottom: 0.5rem;
}
.delete-dialog-title {
    margin-bottom: 2rem;
}

.delete-dialog-error {
}

@media (max-width: 1000px) {
    main {
        grid-template-columns: 1fr;
    }
    .textarea {
        min-height: 320px;
    }
}