@font-face {
    font-family: "Vazirmatn";
    src: url("fonts/vazirmatn-v33.003.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

html:root {
    --primary: #2355cc;
    --secondary: #19366d;
    --accent: #fff;
    --header-bg: #172d59;
    --header-color: #fff;
    --header-branding-color: #fff;
    --header-link-color: #fff;
    --breadcrumbs-bg: #203d73;
    --breadcrumbs-fg: #e4ecff;
    --breadcrumbs-link-fg: #fff;
    --button-bg: #2355cc;
    --button-hover-bg: #1946b2;
    --default-button-bg: #2355cc;
    --default-button-hover-bg: #1946b2;
    --font-family-primary: "Vazirmatn", "Geeza Pro", Tahoma, system-ui, sans-serif;
}

@supports (color: light-dark(white, black)) {
    html:root {
        --body-fg: light-dark(#23334c, #e6edf9);
        --body-bg: light-dark(#f4f7fc, #111a2b);
        --body-quiet-color: light-dark(#4c5b74, #bac8df);
        --body-medium-color: var(--body-fg);
        --body-loud-color: light-dark(#16243d, #f4f7ff);
        --link-fg: light-dark(#1747ad, #a5c2ff);
        --link-hover-color: light-dark(#122d71, #d9e6ff);
        --link-selected-fg: var(--link-fg);
        --border-color: light-dark(#7788a3, #8296b7);
        --hairline-color: light-dark(#dbe3f0, #35445e);
        --darkened-bg: light-dark(#fff, #1b2941);
        --selected-bg: light-dark(#eef3fc, #243653);
        --selected-row: light-dark(#dce9ff, #304975);
        --error-fg: light-dark(#a02745, #ffb2bf);
        --invite-shadow: light-dark(#172d5912, #0004);
    }
}

#header {
    padding-block: 1.05rem;
}

#site-name a {
    color: var(--header-branding-color);
    font-weight: 700;
}

#nav-sidebar .module caption,
#nav-sidebar .module caption a {
    background: var(--header-bg);
    color: var(--header-link-color);
}

#container :focus-visible {
    outline: 2px solid var(--link-fg);
    outline-offset: 3px;
}

#header :focus-visible,
div.breadcrumbs :focus-visible {
    outline-color: #fff;
}

.invite-panel {
    box-sizing: border-box;
    max-inline-size: 54rem;
    margin: clamp(.25rem, 2.5vw, 1.75rem) auto;
    border: 1px solid var(--hairline-color);
    border-radius: 1rem;
    background: var(--darkened-bg);
    box-shadow: 0 .75rem 2.5rem var(--invite-shadow, #172d5912);
    color: var(--body-fg);
}

.invite-panel__header,
.invite-panel__body,
.invite-panel__actions {
    padding: clamp(1rem, 3vw, 2rem);
}

.invite-panel__header {
    border-block-end: 1px solid var(--hairline-color);
}

.invite-panel__header h1 {
    margin: .35rem 0 .5rem;
    color: var(--body-loud-color);
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 700;
}

.invite-panel p {
    margin: 0;
    line-height: 1.8;
}

.invite-kicker {
    color: var(--link-fg);
    font-size: .85rem;
    font-weight: 700;
}

.invite-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.invite-field {
    display: grid;
    gap: .4rem;
    align-content: start;
    min-inline-size: 0;
}

.invite-field label {
    color: var(--body-loud-color);
    font-weight: 700;
}

.invite-field input,
.invite-field select {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 2.8rem;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--border-color);
    border-radius: .55rem;
    background: var(--body-bg);
    color: var(--body-fg);
    font: inherit;
}

.invite-field input[dir="ltr"],
.invite-field input[type="email"] {
    direction: ltr;
    text-align: left;
}

.invite-panel .invite-hint {
    margin-block-start: 1.2rem;
    color: var(--body-quiet-color);
}

.invite-panel__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-block-start: 1px solid var(--hairline-color);
    padding-block: 1rem;
}

.invite-panel .invite-primary {
    min-block-size: 2.75rem;
    padding: .55rem 1.15rem;
    border-radius: .55rem;
    font: inherit;
    font-weight: 700;
}

@media (max-width: 640px) {
    .invite-grid {
        grid-template-columns: 1fr;
        gap: .9rem;
    }
}

.structure {
    max-inline-size: 66rem;
    margin-inline: auto;
}

.structure-heading {
    margin-block-end: 1.5rem;
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: 1rem;
    border: 1px solid var(--hairline-color);
    background: var(--selected-bg);
}

.structure-heading h1 {
    margin-block: .4rem;
    font-weight: 700;
    color: var(--body-loud-color);
}

.structure-heading p { margin: 0; }

.structure-org {
    margin-block: .8rem;
    border: 1px solid var(--hairline-color);
    border-radius: .85rem;
    background: var(--darkened-bg);
}

.structure summary {
    cursor: pointer;
    padding: .85rem 1rem;
    color: var(--body-loud-color);
    overflow-wrap: anywhere;
}

.structure summary span {
    display: inline-block;
    margin-inline-start: .7rem;
    color: var(--body-quiet-color);
    font-size: .8rem;
}

.structure-branches {
    margin: 0 1.2rem 1rem;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--border-color);
}

.structure-contract {
    position: relative;
    margin-block: .65rem;
    border-radius: .65rem;
    border: 1px solid var(--hairline-color);
    background: var(--body-bg);
}

.structure-contract::before {
    content: "";
    position: absolute;
    inset-block-start: 1.3rem;
    inset-inline-start: calc(-1rem - 2px);
    inline-size: 1rem;
    border-block-start: 2px solid var(--border-color);
}

.structure-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    padding: 0 .8rem .8rem;
}

.structure-team {
    padding: .7rem;
    border-radius: .55rem;
    background: var(--darkened-bg);
}

.structure-team h2 { margin-block-end: .4rem; color: var(--link-fg); }
.structure-team ul { margin: 0; padding-inline-start: 1.1rem; }
.structure-team li { overflow-wrap: anywhere; }
.structure-empty { color: var(--body-quiet-color); }

@media (max-width: 640px) {
    .structure-teams { grid-template-columns: 1fr; }
}