/* Protokollapp SaaS — publika formulär (/skapa-konto/, /logga-in/).
   Samma designsystem som landningssidan (landing.css): varmt papper + pine,
   serif-display, lugnt och seriöst. Fristående — temat laddas inte här, så
   alla tokens definieras lokalt. */

:root {
    --paper:      #f7f4ec;
    --paper-2:    #efe9dc;
    --ink:        #1c2a24;
    --ink-soft:   #46554d;
    --pine:       #1f5d4c;
    --pine-deep:  #163f33;
    --pine-bright:#2a7d66;
    --gold:       #b7892f;
    --line:       #ddd5c4;
    --card:       #ffffff;
    --radius:     14px;
    --radius-lg:  22px;
    --shadow:     0 1px 2px rgba(28,42,36,.05), 0 18px 40px -22px rgba(28,42,36,.28);
    --serif:      Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --sans:       ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body.protokollapp-saas-public {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    background-image: radial-gradient(rgba(28,42,36,.025) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-font-smoothing: antialiased;
}

.protokollapp-saas-public__main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.protokollapp-saas-public__card {
    width: 100%;
    max-width: 30rem;
    margin-top: 6vh;
    padding: 2.4rem 2.2rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* ---------- Brand (mark + serif-namn), matchar landningens topbar ---------- */
.protokollapp-saas-public__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.5rem;
}
.protokollapp-saas-public__brandmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    color: #fff;
    background: var(--pine);
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.protokollapp-saas-public__brandname {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.01em;
    color: var(--ink);
}

.protokollapp-saas-public__title {
    margin: 0 0 .4rem;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(1.7rem, 5vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
}

.protokollapp-saas-public__intro {
    margin: 0 0 1.6rem;
    color: var(--ink-soft);
}

.protokollapp-saas-public__alt {
    margin: 1.6rem 0 0;
    font-size: .95rem;
    text-align: center;
    color: var(--ink-soft);
}
.protokollapp-saas-public__alt a {
    color: var(--pine);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.protokollapp-saas-public__alt a:hover { border-bottom-color: currentColor; }

/* ---------- Formulär ---------- */
.protokollapp-saas-form { width: 100%; }
.protokollapp-saas-form p { margin: 0 0 1.1rem; }

.protokollapp-saas-form label {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .35rem;
    color: var(--ink);
}

.protokollapp-saas-public input[type="email"],
.protokollapp-saas-public input[type="text"],
.protokollapp-saas-public input[type="password"],
.protokollapp-saas-public select {
    width: 100%;
    padding: .75rem .85rem;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.protokollapp-saas-public input[type="email"]:focus,
.protokollapp-saas-public input[type="text"]:focus,
.protokollapp-saas-public input[type="password"]:focus,
.protokollapp-saas-public select:focus {
    outline: none;
    border-color: var(--pine);
    box-shadow: 0 0 0 3px rgba(31,93,76,.16);
}

.protokollapp-saas-consent label {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-weight: 400;
    font-size: .92rem;
    color: var(--ink-soft);
}
/* Checkbox + en enda text-span = exakt två flex-barn, så gap:en bara hamnar
   mellan kryssrutan och texten (inte runt länken inuti). */
.protokollapp-saas-consent label > input {
    flex: none;
    margin-top: .15rem;
}
.protokollapp-saas-consent a { color: var(--pine); }

/* Knapp — identisk look som landningens .pls-btn (pine pill, vit text). */
.protokollapp-saas-public .protokollapp-saas-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .85rem 1.5rem;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--pine);
    border: 1px solid var(--pine);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 8px 20px -10px rgba(31,93,76,.7);
}
.protokollapp-saas-public .protokollapp-saas-submit:hover {
    background: var(--pine-deep);
    border-color: var(--pine-deep);
    transform: translateY(-1px);
}
.protokollapp-saas-public .protokollapp-saas-submit:active { transform: translateY(0); }

/* ---------- Notiser ---------- */
.protokollapp-saas-notice {
    padding: .8rem 1rem;
    margin: 0 0 1.2rem;
    border-radius: var(--radius);
    font-size: .95rem;
    border: 1px solid transparent;
}
.protokollapp-saas-notice--success {
    background: rgba(31,93,76,.08);
    border-color: rgba(31,93,76,.25);
    color: var(--pine-deep);
}
.protokollapp-saas-notice--error {
    background: #fdecea;
    border-color: #f3c9c4;
    color: #7f1d1d;
}

/* ---------- Enhetlig login (magic + lösenord) ---------- */
.protokollapp-saas-auth { width: 100%; }
.protokollapp-saas-pw-field[hidden] { display: none; }

.protokollapp-saas-switch {
    margin: .9rem 0 0;
    text-align: center;
    font-size: .92rem;
    color: var(--ink-soft);
}
.protokollapp-saas-switch-link {
    color: var(--pine);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}
.protokollapp-saas-switch-link:hover,
.protokollapp-saas-switch-link:focus { border-bottom-color: currentColor; }

/* ---------- Konto-typ-dropdown ---------- */
.pa-select { position: relative; display: block; }

/* Native <select> — stylad fallback (syns utan JS). */
.pa-select__native {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f5d4c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    padding-right: 2.4rem !important;
}
.pa-select__native--hidden { display: none; }

/* Anpassad dropdown (byggd av JS). */
.pa-dropdown { position: relative; display: block; }
.pa-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .75rem .85rem;
    font-family: var(--sans);
    font-size: 1rem;
    text-align: left;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pa-dropdown__toggle::after {
    content: "";
    width: 14px; height: 14px;
    margin-left: .75rem;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f5d4c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .15s ease;
}
.pa-dropdown__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.pa-dropdown__toggle:focus-visible,
.pa-dropdown__toggle[aria-expanded="true"] {
    outline: none;
    border-color: var(--pine);
    box-shadow: 0 0 0 3px rgba(31,93,76,.16);
}

.pa-dropdown__list {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0; right: 0;
    z-index: 30;
    margin: 0; padding: .35rem;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.pa-dropdown__option {
    padding: .6rem .7rem;
    border-radius: 10px;
    cursor: pointer;
    color: var(--ink);
}
.pa-dropdown__option.is-active { background: var(--paper-2); }
.pa-dropdown__option.is-selected { color: var(--pine-deep); font-weight: 600; }
.pa-dropdown__option:hover { background: var(--paper-2); }

@media (max-width: 30rem) {
    .protokollapp-saas-public__card {
        margin-top: 0;
        padding: 1.6rem 1.3rem;
        border-radius: var(--radius);
    }
}

/* "Bekräfta din e-post"-vyn efter lyckad signup. */
.protokollapp-saas-verify {
    text-align: center;
    padding: 1rem 0 0.5rem;
}
.protokollapp-saas-verify__title {
    font-family: var(--serif);
    font-size: 1.5rem;
    margin: 0 0 0.5em;
}
.protokollapp-saas-verify__lead {
    font-size: 1.02rem;
    margin: 0 0 1.2em;
}
.protokollapp-saas-verify__hint {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0;
}