/* Noterlik Rehberi public auth presentation.

   Authentication markup and form behavior remain owned by Zulip; this file
   is presentation-only. It styles three things:

     1. The public landing page (templates/zerver/login.html), including the
        centered sign-in / sign-up dialogs and the tour-video dialog.
     2. The single-card auth screens: registration step 1
        (create_user/accounts_home.html), the "check your e-mail" screen
        (accounts_send_confirm.html) and registration step 2
        (create_user/register.html).
     3. The form primitives shared by both. */

:root {
    --nr-navy: #16365f;
    --nr-navy-deep: #0f2748;
    --nr-blue: #1f5fac;
    --nr-link: #1565c8;
    --nr-ink: #1b2740;
    --nr-muted: #5c6b82;
    --nr-faint: #7c8aa2;
    --nr-border: #dde5f0;
    --nr-line: #e7ecf4;
    --nr-gold: #b8821f;
    --nr-gold-soft: #c8912f;
    --nr-gold-bg: #fdf6e8;
    --nr-gold-border: #efdcb4;
    --nr-panel: #eef2f8;
    --nr-field: #cbd6e6;
    --nr-info-bg: #ecf4fe;
    --nr-info-border: #d3e5fb;
    --nr-cream-bg: #fdf7ea;
    --nr-cream-border: #efe1bf;
    --nr-page: #f4f8fd;
}

/* ==================================================== portico neutralizers */

body:has(.nr-landing-page),
body:has(.nr-auth-page) {
    margin: 0;
    color: var(--nr-ink);
    font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body:has(.nr-landing-page) {
    background: var(--nr-page);
}

body:has(.nr-auth-page) {
    background: var(--nr-panel);
}

body:has(.nr-landing-page) .portico-header,
body:has(.nr-auth-page) .portico-header {
    display: none;
}

body:has(.nr-landing-page) .portico-container {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% -10%, rgb(214 232 255 / 55%), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--nr-page) 45%, #eef3fa 100%);
}

body:has(.nr-auth-page) .portico-container {
    min-height: 100vh;
    background: var(--nr-panel);
}

body:has(.nr-landing-page) .portico-wrap,
body:has(.nr-landing-page) .portico-page,
body:has(.nr-landing-page) .portico-page-container,
body:has(.nr-auth-page) .portico-wrap,
body:has(.nr-auth-page) .portico-page,
body:has(.nr-auth-page) .portico-page-container {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}

body:has(.nr-landing-page) .portico-page,
body:has(.nr-landing-page) .portico-page-container,
body:has(.nr-auth-page) .portico-page,
body:has(.nr-auth-page) .portico-page-container {
    display: block;
    flex: none;
}

.nr-landing-page,
.nr-auth-page {
    display: block;
    width: 100%;
    text-align: left;
}

/* Zulip's `.login-page` sets `text-align: center` and the portico bundle
   still carries bootstrap-era heading margins; reset both here. */
.nr-landing h1,
.nr-landing h2,
.nr-landing p,
.nr-landing ul,
.nr-landing li,
.nr-modal h2,
.nr-modal p,
.nr-modal ol,
.nr-modal li {
    margin: 0;
    text-align: left;
}

html.nr-modal-open,
html.nr-modal-open body {
    overflow: hidden;
}

/* ============================================================== brand mark */

.nr-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nr-brand-logo,
.nr-brand-fallback {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.nr-brand-logo {
    object-fit: contain;
}

.nr-brand-fallback {
    display: grid;
    place-items: center;
    background: var(--nr-navy);
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.nr-brand-name {
    color: var(--nr-navy);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.nr-brand-name strong {
    color: var(--nr-gold-soft);
    font-weight: 600;
}

/* ================================================================= landing */

.nr-landing {
    box-sizing: border-box;
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(16px, 2.4vh, 26px) clamp(20px, 4vw, 40px) clamp(18px, 2.6vh, 30px);
}

.nr-landing-header {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
    justify-content: center;
    padding-bottom: clamp(14px, 2.6vh, 28px);
}

.nr-landing-tagline {
    padding-left: 20px;
    border-left: 1px solid var(--nr-border);
    color: var(--nr-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

/* hero */

.nr-hero {
    display: block;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.nr-hero-title {
    margin: 0 0 13px !important;
    color: var(--nr-navy);
    font-size: clamp(28px, 3.9vw, 45px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-align: center !important;
}

.nr-hero-title em {
    display: block;
    color: var(--nr-gold-soft);
    font-style: normal;
}

.nr-hero-sub {
    max-width: 620px;
    margin: 0 auto 22px !important;
    color: var(--nr-muted);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.55;
    text-align: center !important;
}

.nr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

.nr-btn {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    min-height: 48px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease,
        box-shadow 150ms ease, transform 150ms ease;
}

.nr-btn > i {
    font-size: 17px;
}

.nr-btn--primary {
    background: var(--nr-gold);
    color: #ffffff;
    box-shadow: 0 10px 24px rgb(184 130 31 / 26%);
}

.nr-btn--primary:hover,
.nr-btn--primary:focus-visible {
    background: #a3711a;
    outline: none;
    transform: translateY(-1px);
}

.nr-btn--ghost {
    border-color: var(--nr-navy);
    background: #ffffff;
    color: var(--nr-navy);
}

.nr-btn--ghost:hover,
.nr-btn--ghost:focus-visible {
    background: var(--nr-navy);
    color: #ffffff;
    outline: none;
    transform: translateY(-1px);
}

.nr-hero-video {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding: 6px;
    border: 0;
    background: none;
    color: var(--nr-blue);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

.nr-hero-video:hover,
.nr-hero-video:focus-visible {
    color: var(--nr-navy);
    outline: none;
    text-decoration: underline;
}

.nr-hero-video-play {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: var(--nr-navy);
}

.nr-hero-video-play::before {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #ffffff;
    content: "";
}

.nr-hero-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-sizing: border-box;
    max-width: 640px;
    margin: clamp(16px, 2.4vh, 26px) auto 0;
    padding: 13px 18px;
    border: 1px solid var(--nr-gold-border);
    border-radius: 12px;
    background: var(--nr-gold-bg);
    text-align: left;
}

.nr-hero-notice > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--nr-gold);
    font-size: 20px;
}

.nr-hero-notice strong {
    display: block;
    color: #6d4d0c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nr-hero-notice p {
    margin: 5px 0 0 !important;
    color: #4f3a10;
    font-size: 14.5px;
    line-height: 1.45;
}

.nr-hero-notice span {
    display: block;
    margin-top: 3px;
    color: #8a6d33;
    font-size: 12.5px;
}

/* feature cards */

.nr-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(18px, 2.8vh, 32px);
}

.nr-card {
    box-sizing: border-box;
    padding: 16px 16px 17px;
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgb(22 54 95 / 5%);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.nr-card:hover {
    border-color: #c7d8ef;
    box-shadow: 0 12px 26px rgb(22 54 95 / 10%);
    transform: translateY(-2px);
}

.nr-card-icon {
    display: grid;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    place-items: center;
    border: 1px solid var(--nr-gold-border);
    border-radius: 11px;
    background: var(--nr-gold-bg);
    color: var(--nr-gold);
    font-size: 19px;
}

.nr-card h2 {
    margin: 0 0 6px !important;
    color: var(--nr-navy);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
}

.nr-card p {
    margin: 0 !important;
    color: var(--nr-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* safety strip */

.nr-safety-strip {
    box-sizing: border-box;
    margin-top: clamp(14px, 2.2vh, 22px);
    padding: 13px 18px;
    border: 1px solid var(--nr-cream-border);
    border-radius: 14px;
    background: var(--nr-cream-bg);
}

.nr-safety-strip h2 {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 0 0 9px !important;
    color: #4a3813;
    font-size: 14px;
    font-weight: 700;
}

.nr-safety-strip h2 > i {
    color: #ac7c1e;
    font-size: 16px;
}

.nr-safety-strip ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 26px;
    margin: 0 !important;
    padding-left: 18px;
    color: #5b4a2a;
    font-size: 13px;
    line-height: 1.5;
}

.nr-landing-footer {
    margin-top: clamp(14px, 2.2vh, 22px);
    padding-top: 14px;
    border-top: 1px solid var(--nr-border);
}

.nr-landing-footer p {
    margin: 0 !important;
    color: var(--nr-faint);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center !important;
}

/* ================================================================== dialog */

.nr-modal,
.nr-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    overflow-y: auto;
}

.nr-modal[hidden],
.nr-video-modal[hidden] {
    display: none;
}

.nr-modal-backdrop,
.nr-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(12 28 52 / 55%);
    backdrop-filter: blur(3px);
}

.nr-modal-dialog {
    position: relative;
    box-sizing: border-box;
    width: min(452px, 100%);
    margin: auto;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid #e3eaf4;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 30px 70px rgb(9 26 51 / 30%);
}

.nr-modal-close,
.nr-video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f2f5fa;
    color: var(--nr-muted);
    cursor: pointer;
    font-size: 16px;
    transition: background-color 150ms ease, color 150ms ease;
}

.nr-modal-close:hover,
.nr-modal-close:focus-visible {
    background: var(--nr-panel);
    color: var(--nr-navy);
    outline: none;
}

.nr-modal-heading {
    margin-bottom: 20px;
    padding-right: 32px;
}

.nr-modal-heading h2 {
    margin: 0 0 6px !important;
    color: var(--nr-navy);
    font-size: clamp(21px, 2vw, 25px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.nr-modal-heading p {
    margin: 0 !important;
    color: var(--nr-muted);
    font-size: 14.5px;
}

.nr-modal .nr-auth-steps {
    margin: 4px 0 18px;
    padding-right: 32px;
}

.nr-modal-error {
    margin-bottom: 16px;
    padding: 11px 14px;
    border: 1px solid #f0c9c5;
    border-radius: 9px;
    background: #fdf1f0;
    color: #a3221a;
    font-size: 13.5px;
    line-height: 1.45;
}

.nr-modal-error[hidden] {
    display: none;
}

.nr-modal-note {
    margin: 16px 0 0 !important;
    padding: 11px 14px;
    border: 1px dashed var(--nr-border);
    border-radius: 10px;
    color: var(--nr-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.nr-modal-foot {
    margin: 18px 0 0 !important;
    padding-top: 15px;
    border-top: 1px solid var(--nr-line);
    color: var(--nr-muted);
    font-size: 13.5px;
    text-align: center !important;
}

.nr-modal-foot a {
    color: var(--nr-link);
    font-weight: 700;
    text-decoration: none;
}

.nr-modal-foot a:hover,
.nr-modal-foot a:focus-visible {
    text-decoration: underline;
}

/* tour video dialog */

.nr-video-modal-dialog {
    position: relative;
    width: min(960px, 100%);
    max-height: 90vh;
    margin: auto;
    border-radius: 14px;
    background: #05122a;
    box-shadow: 0 30px 80px rgb(4 12 28 / 55%);
}

.nr-video-modal-close {
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: var(--nr-navy);
    box-shadow: 0 6px 18px rgb(4 12 28 / 45%);
}

.nr-video-modal-close:hover,
.nr-video-modal-close:focus-visible {
    background: var(--nr-panel);
    outline: none;
}

.nr-video-modal-player {
    display: block;
    width: 100%;
    max-height: 90vh;
    border-radius: 14px;
    background: #000000;
}

/* ======================================================= form primitives */

.nr-input-box {
    margin-bottom: 16px;
}

.nr-input-box label {
    display: block;
    margin-bottom: 6px;
    color: var(--nr-ink);
    font-size: 13.5px;
    font-weight: 700;
}

.nr-input-wrap {
    position: relative;
}

.nr-input-wrap > i:not(.password_visibility_toggle) {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: var(--nr-faint);
    font-size: 17px;
    pointer-events: none;
    transform: translateY(-50%);
}

.nr-input-wrap input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 42px;
    border: 1px solid var(--nr-field);
    border-radius: 9px;
    background: #ffffff;
    color: var(--nr-ink);
    font: inherit;
    font-size: 15px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nr-input-wrap input::placeholder {
    color: #8b99b1;
}

.nr-input-wrap input:focus {
    border-color: var(--nr-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgb(31 95 172 / 16%);
}

.nr-input-wrap input[readonly] {
    background: #f5f7fb;
    color: var(--nr-muted);
}

.nr-input-wrap .password_visibility_toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    color: var(--nr-faint);
    cursor: pointer;
    font-size: 17px;
    transform: translateY(-50%);
}

.nr-input-wrap--select::after {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 0;
    height: 0;
    border-top: 6px solid var(--nr-faint);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
}

.nr-input-wrap--select select {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 38px 0 42px;
    border: 1px solid var(--nr-field);
    border-radius: 9px;
    background: #ffffff;
    color: var(--nr-ink);
    font: inherit;
    font-size: 15px;
    appearance: none;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nr-input-wrap--select select:invalid {
    color: #8b99b1;
}

.nr-input-wrap--select select:focus {
    border-color: var(--nr-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgb(31 95 172 / 16%);
}

.nr-field-hint {
    margin-top: 8px !important;
    color: var(--nr-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.nr-field-hint strong {
    color: var(--nr-navy);
    font-weight: 700;
}

.nr-field-error {
    margin: 6px 0 0 !important;
    color: #b3261e;
    font-size: 12.5px;
    line-height: 1.4;
}

.nr-form-links {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 16px;
}

.nr-form-links a {
    color: var(--nr-link);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.nr-form-links a:hover,
.nr-form-links a:focus-visible {
    text-decoration: underline;
}

.nr-auth-submit {
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 9px;
    background: var(--nr-navy);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 15.5px;
    font-weight: 700;
    transition: background-color 150ms ease, transform 150ms ease;
}

.nr-auth-submit:hover:not(:disabled),
.nr-auth-submit:focus-visible:not(:disabled) {
    background: var(--nr-blue);
    outline: none;
    transform: translateY(-1px);
}

.nr-auth-submit:disabled,
.nr-auth-submit.is-busy {
    cursor: progress;
    opacity: 0.65;
}

.nr-auth-submit .loader {
    display: none;
}

.nr-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    color: var(--nr-faint);
    font-size: 12.5px;
}

.nr-divider::before,
.nr-divider::after {
    height: 1px;
    flex: 1;
    background: var(--nr-line);
    content: "";
}

.nr-social-login {
    margin-bottom: 10px;
}

.nr-social-login .login-social-button {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding-left: 42px;
    border: 1px solid var(--nr-field);
    border-radius: 9px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 19px;
    color: var(--nr-ink);
    cursor: pointer;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.nr-social-login .login-social-button:hover {
    border-color: var(--nr-blue);
}

.anonymous-access-button {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 1px solid var(--nr-field);
    border-radius: 9px;
    background: #ffffff;
    color: var(--nr-ink);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

/* ============================================================= auth cards */

.nr-auth-wrap {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(28px, 6vh, 64px) clamp(16px, 5vw, 40px);
}

.nr-auth-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 468px;
    padding: clamp(28px, 4.4vw, 44px);
    border: 1px solid #e3eaf4;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgb(18 46 86 / 12%);
    text-align: left;
}

.nr-auth-card--wide {
    max-width: 520px;
}

.nr-auth-card h1,
.nr-auth-card h2,
.nr-auth-card p,
.nr-auth-card ol,
.nr-auth-card li {
    margin: 0;
    text-align: left;
}

.nr-auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--nr-line);
}

.nr-auth-brand .nr-brand-logo,
.nr-auth-brand .nr-brand-fallback {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.nr-auth-brand .nr-brand-name {
    font-size: 20px;
}

.nr-auth-steps {
    display: flex;
    gap: 10px;
    margin: 18px 0 20px;
    padding: 0;
    list-style: none;
}

.nr-step {
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    background: #f7f9fd;
    color: var(--nr-faint);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}

.nr-step-num {
    display: grid;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: #dbe3ef;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.nr-step.is-active {
    border-color: var(--nr-blue);
    background: var(--nr-info-bg);
    color: var(--nr-navy);
}

.nr-step.is-active .nr-step-num {
    background: var(--nr-navy);
}

.nr-step.is-done {
    border-color: #cfe0d3;
    background: #eef7f0;
    color: #2f6b45;
}

.nr-step.is-done .nr-step-num {
    background: #3a8a5a;
}

.nr-auth-heading h1 {
    color: var(--nr-navy);
    font-size: clamp(21px, 2vw, 25px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.nr-auth-heading p {
    margin-top: 6px !important;
    color: var(--nr-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

.nr-auth-form {
    margin-top: 20px;
}

.nr-auth-card .nr-input-box {
    margin-bottom: 18px;
}

.nr-field-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
    margin-bottom: 16px;
    padding: 11px 14px;
    border: 1px solid var(--nr-line);
    border-radius: 10px;
    background: #f7f9fd;
}

.nr-field-readonly-label {
    color: var(--nr-faint);
    font-size: 12px;
    font-weight: 600;
}

.nr-field-readonly-value {
    color: var(--nr-navy);
    font-size: 14.5px;
    font-weight: 700;
    word-break: break-all;
}

.nr-auth-card .email-frontend-error,
.nr-auth-card .email-backend-error {
    margin: 8px 0 0;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
}

.nr-auth-card .email-frontend-error:empty {
    display: none;
}

.nr-auth-note {
    margin-top: 16px !important;
    padding: 12px 14px;
    border: 1px dashed var(--nr-border);
    border-radius: 10px;
    color: var(--nr-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.nr-auth-note a {
    color: var(--nr-link);
    font-weight: 700;
    text-decoration: none;
}

.nr-auth-note a:hover,
.nr-auth-note a:focus-visible {
    text-decoration: underline;
}

.nr-auth-alt {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--nr-line);
    color: var(--nr-muted);
    font-size: 13.5px;
    text-align: center;
}

.nr-auth-alt a {
    color: var(--nr-link);
    font-weight: 700;
    text-decoration: none;
}

.nr-auth-alt a:hover,
.nr-auth-alt a:focus-visible {
    text-decoration: underline;
}

.nr-auth-alert {
    margin-bottom: 4px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.45;
}

.nr-auth-card .nr-notice {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--nr-info-border);
    border-radius: 12px;
    background: var(--nr-info-bg);
    color: var(--nr-navy);
    font-size: 13px;
    line-height: 1.5;
}

.nr-auth-card .nr-notice > i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--nr-blue);
    font-size: 18px;
}

.nr-visibility-row,
.nr-tos-row {
    margin: 4px 0 16px;
    font-size: 13px;
    line-height: 1.5;
}

.nr-visibility-row .padded-input-box,
.nr-visibility-row .input-box {
    margin: 0;
}

.register-button-box {
    margin-top: 4px;
}

/* informational auth card (e-mail sent, expired link, ...) */

.nr-auth-card--info {
    text-align: center;
}

.nr-auth-card--info .nr-auth-brand {
    justify-content: center;
}

.nr-auth-card--info .nr-auth-heading h1,
.nr-auth-card--info .nr-auth-heading p,
.nr-auth-card--info .nr-auth-note {
    text-align: center;
}

.nr-auth-card--info .nr-auth-note {
    border-style: solid;
    background: #f7f9fd;
}

.nr-auth-icon {
    display: grid;
    width: 60px;
    height: 60px;
    margin: 22px auto 4px;
    place-items: center;
    border-radius: 50%;
    background: var(--nr-info-bg);
    color: var(--nr-blue);
    font-size: 26px;
}

.nr-auth-card--info .user_email {
    color: var(--nr-navy);
    font-weight: 700;
    white-space: nowrap;
}

/* ============================================================ error pages
   Zulip's portico bundle paints error pages in a mint/teal palette
   (`.error_page` background, `.errorbox` border, `.lead` colour). Repaint
   them in the Noterlik Rehberi palette; the markup is untouched. */

.nr-error-page {
    box-sizing: border-box;
    padding: clamp(40px, 9vh, 96px) 16px clamp(40px, 8vh, 80px);
    background: var(--nr-page);
}

.nr-error-page .errorbox {
    box-sizing: border-box;
    max-width: 540px;
    border: 1px solid #e3eaf4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgb(18 46 86 / 10%);
    font-size: 15px;
}

.nr-error-page .errorbox.config-error {
    max-width: 640px;
}

.nr-error-page .errorcontent {
    padding: clamp(26px, 3vw, 38px);
    text-align: left;
}

.nr-error-page .lead {
    margin: 0 0 12px;
    color: var(--nr-navy);
    font-size: clamp(22px, 2.2vw, 27px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.nr-error-page p,
.nr-error-page li {
    color: var(--nr-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.nr-error-page p {
    margin: 0 0 12px;
}

.nr-error-page ol,
.nr-error-page ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.nr-error-page a:not(.button) {
    color: var(--nr-link);
    font-weight: 600;
    text-decoration: none;
}

.nr-error-page a:not(.button):hover,
.nr-error-page a:not(.button):focus-visible {
    text-decoration: underline;
}

.nr-error-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 6px;
    padding: 0 24px;
    border: 0;
    border-radius: 9px;
    background: var(--nr-navy);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 150ms ease, transform 150ms ease;
}

.nr-error-page .button:hover,
.nr-error-page .button:focus-visible {
    background: var(--nr-blue);
    color: #ffffff;
    outline: none;
    transform: translateY(-1px);
}

/* ============================================================= responsive */

@media (max-width: 900px) {
    .nr-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .nr-landing-header {
        flex-direction: column;
        gap: 12px;
    }

    .nr-landing-tagline {
        padding: 0;
        border: 0;
        text-align: center;
    }

    .nr-hero-actions .nr-btn {
        width: 100%;
    }

    .nr-cards {
        grid-template-columns: 1fr;
    }

    .nr-safety-strip ul {
        grid-template-columns: 1fr;
    }

    .nr-modal-dialog {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .nr-auth-card {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .nr-auth-steps {
        flex-direction: column;
    }

    .nr-video-modal-close {
        top: 8px;
        right: 8px;
    }
}

/* ================================================= register step 2 layout
   Zulip's bundled register stylesheet contains responsive transforms for
   #create-account.  The custom card is already responsive, so neutralize
   only those presentation rules; form fields, names and JS hooks are not
   changed. */

.register-account #create-account {
    box-sizing: border-box;
    width: min(640px, 100%);
    max-width: 640px;
    margin: 0;
    padding: clamp(30px, 4vw, 48px);
    transform: none;
}

.register-account #create-account #registration {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.register-account #create-account .nr-auth-brand,
.register-account #create-account .nr-auth-steps,
.register-account #create-account .nr-auth-heading,
.register-account #create-account .nr-auth-form,
.register-account #create-account .nr-auth-alt,
.register-account #create-account .nr-field-readonly,
.register-account #create-account .nr-input-box,
.register-account #create-account .nr-visibility-row,
.register-account #create-account .nr-tos-row,
.register-account #create-account .register-button-box {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

.register-account #create-account .nr-auth-brand {
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
}

.register-account #create-account .nr-auth-steps {
    margin-right: 0;
    margin-left: 0;
}

.register-account #create-account .nr-auth-heading {
    padding: 0;
}

.register-account #create-account .nr-field-readonly {
    min-height: 64px;
    margin-right: 0;
    margin-left: 0;
    padding: 16px;
    align-items: center;
}

.register-account #create-account .nr-input-box {
    margin-right: 0;
    margin-left: 0;
}

.register-account #create-account .nr-input-wrap,
.register-account #create-account .nr-input-wrap input,
.register-account #create-account .nr-input-wrap select {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

.register-account #create-account .register-button-box {
    margin-right: 0;
    margin-left: 0;
}

.register-account #create-account .nr-auth-alt {
    margin-right: 0;
    margin-left: 0;
}

@media (max-width: 640px) {
    .register-account #create-account {
        width: 100%;
        max-width: none;
        padding: 24px 18px;
    }

    .register-account #create-account .nr-auth-brand {
        gap: 10px;
    }

    .register-account #create-account .nr-auth-steps {
        gap: 8px;
    }
}